fix: 地区配置添加确定预览

张峰林 · xp.Huang
1 parent da7263e4
Showing 3 changed files with 101 additions and 126 deletions
src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/config.ts
src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/config.vue
src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/index.vue
--- a/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/config.ts
View file @eee1727
+++ b/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/config.ts
View file @eee1727
@@ -98,7 +98,7 @@ export const setScale = (adcode: string | number) => {
     case '340000':
       return { distance: 170, zoom: 0.8, alpha: 45 }
     case '350000':
-      return { distance: 150, zoom: 0.8, alpha: 45 }
+     return { distance: 150, zoom: 0.8, alpha: 45 }
     case '360000':
       return { distance: 190, zoom: 0.8, alpha: 45 }
     case '370000':
@@ -111,6 +111,8 @@ export const setScale = (adcode: string | number) => {
       return { distance: 165, zoom: 0.8, alpha: 45 }
     case '500000':
       return { distance: 145, zoom: 0.8, alpha: 45 }
+    case '510000':
+      return { distance: 115, zoom: 0.8, alpha: 45 }
     case '520000':
       return { distance: 135, zoom: 0.8, alpha: 45 }
     case '530000':
@@ -166,6 +168,7 @@ export const option = {
   iconDistanceTop: 20,
   drillingIn: false,
   dataset: dataMaps,
+  isShowExecute:false,
   saveClickRegion: {
     level: ''
   },
@@ -188,7 +191,10 @@ export const option = {
   geo3D: {
     show: false, // 隐藏该层，为true时会导致出现两个地图
     map: '',
-    roam: true
+    roam: true,
+    viewControl:{
+      distance:100
+    }
   },
   series: [
     {
--- a/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/config.vue
View file @eee1727
+++ b/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/config.vue
View file @eee1727
@@ -19,28 +19,16 @@
     </SettingItemBox>
     <SettingItemBox name="图标距离">
       <SettingItem name="距右">
-        <n-input-number
-          v-model:value="optionData.iconDistanceRight"
-          :min="1"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="optionData.iconDistanceRight" :min="1" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       <SettingItem name="距上">
-        <n-input-number
-          v-model:value="optionData.iconDistanceTop"
-          :min="1"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="optionData.iconDistanceTop" :min="1" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SelectCity
-      ref="SelectCityRef"
-      :optionData="optionData"
-      :drillingIn="optionData.drillingIn"
-      @submit="onHandleSelectValues"
-    />
+    <SelectCity ref="SelectCityRef" :optionData="optionData" :drillingIn="optionData.drillingIn"
+      @submit="onHandleSelectValues" />
     <div style="height: 30px"></div>
     <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
     <SettingItemBox name="地图配置">
@@ -48,35 +36,20 @@
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
       </SettingItem>
       <SettingItem name="边框颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="seriesList[0].itemStyle.borderColor"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']"
+          v-model:value="seriesList[0].itemStyle.borderColor"></n-color-picker>
       </SettingItem>
       <SettingItem name="边框大小">
-        <n-input-number
-          v-model:value="seriesList[0].itemStyle.borderWidth"
-          :min="0"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[0].itemStyle.borderWidth" :min="0" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       <SettingItem name="透明度">
-        <n-input-number
-          v-model:value="seriesList[0].itemStyle.opacity"
-          :min="0"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[0].itemStyle.opacity" :min="0" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       <SettingItem name="厚度">
-        <n-input-number
-          v-model:value="seriesList[0].regionHeight"
-          :min="0"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[0].regionHeight" :min="0" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="标题配置">
@@ -84,19 +57,12 @@
         <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
       </SettingItem>
       <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="seriesList[0].label.textStyle.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']"
+          v-model:value="seriesList[0].label.textStyle.color"></n-color-picker>
       </SettingItem>
       <SettingItem name="大小">
-        <n-input-number
-          v-model:value="seriesList[0].label.textStyle.fontSize"
-          :min="0"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[0].label.textStyle.fontSize" :min="0" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="高亮配置">
@@ -104,69 +70,40 @@
         <n-switch v-model:value="seriesList[0].emphasis.label.show" size="small"></n-switch>
       </SettingItem>
       <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="seriesList[0].emphasis.label.textStyle.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']"
+          v-model:value="seriesList[0].emphasis.label.textStyle.color"></n-color-picker>
       </SettingItem>
       <SettingItem name="大小">
-        <n-input-number
-          v-model:value="seriesList[0].emphasis.label.textStyle.fontSize"
-          :min="0"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[0].emphasis.label.textStyle.fontSize" :min="0" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       <SettingItem name="区块颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="seriesList[0].emphasis.itemStyle.color"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']"
+          v-model:value="seriesList[0].emphasis.itemStyle.color"></n-color-picker>
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="柱状配置">
       <SettingItem name="最小高度">
-        <n-input-number
-          v-model:value="seriesList[1].minHeight"
-          :min="0"
-          :step="1"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[1].minHeight" :min="0" :step="1" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       <SettingItem name="大小">
-        <n-input-number
-          v-model:value="seriesList[1].barSize"
-          :min="0"
-          :step="1"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[1].barSize" :min="0" :step="1" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
       <SettingItem name="倒角尺寸">
-        <n-input-number
-          v-model:value="seriesList[1].bevelSize"
-          :min="0"
-          :max="1"
-          :step="0.1"
-          size="small"
-          placeholder="请输入"
-        ></n-input-number>
+        <n-input-number v-model:value="seriesList[1].bevelSize" :min="0" :max="1" :step="0.1" size="small"
+          placeholder="请输入"></n-input-number>
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
   <CollapseItem name="地区配置" :expanded="true">
     <SettingItemBox name="地区配置" :alone="true">
       <template v-for="(item, map3DIndex) in optionData.dataset.map3D" :key="map3DIndex">
-        <setting-item name="省份名称"  v-if="mapRegionCache.adcode=='china'">
+        <setting-item name="省份名称" v-if="mapRegionCache.adcode == 'china'">
           <n-select
-            @change="(v:number,o:Recordable,w:Recordable,s1:number)=> onHandleSelectProvince(v,o,item, map3DIndex)"
-            placeholder="请选择省份"
-            v-model:value="item.name"
-            :options="item.provinceOptions"
-          />
+            @change="(v: number, o: Recordable, w: Recordable, s1: number) => onHandleSelectProvince(v, o, item, map3DIndex)"
+            placeholder="请选择省份" v-model:value="item.name" :options="item.provinceOptions" />
         </setting-item>
         <setting-item name="城市名称">
           <n-select placeholder="请选择城市" v-model:value="item.city_name" :options="item.cityOptions" />
@@ -187,6 +124,8 @@
       </template>
       <div class="h-space"></div>
       <n-button size="small" @click="handleAddRegion"> + </n-button>
+      <div class="h-space"></div>
+      <n-button type="primary" @click="handleAreaSubmit">确定</n-button>
     </SettingItemBox>
   </CollapseItem>
   <CollapseItem name="柱状配置" :expanded="true">
@@ -212,13 +151,12 @@
         </setting-item>
       </template>
       <div class="h-space"></div>
-      <n-button
-        style="float: right"
-        size="small"
-        @click="optionData.dataset.bar3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
-      >
+      <n-button style="float: right" size="small"
+        @click="optionData.dataset.bar3D.push(cloneDeep(STATIC_SCATTER_CONFIG))">
         +
       </n-button>
+      <div class="h-space"></div>
+      <n-button type="primary" @click="handleAreaSubmit">确定</n-button>
     </SettingItemBox>
   </CollapseItem>
 </template>
@@ -253,7 +191,7 @@ const datasetMap3DList = computed(() => {
 const STATIC_SCATTER_CONFIG = {
   name: null,
   adcode: 510000,
-  city_name:null,
+  city_name: null,
   value: [0, 0, 0],
   height: 2,
   itemStyle: {
@@ -277,7 +215,7 @@ onMounted(async () => {
   datasetMap3DList.value.forEach(async (item: Recordable) => {
     item.provinceOptions = await getAreaLists()
     item.cityOptions = await getAreaLists(areaEnum.CITY, !item.adcode ? mapRegionCache.value.adcode : item.adcode)
-    item.adcode =  !item.adcode ? mapRegionCache.value.adcode : item.adcode
+    item.adcode = !item.adcode ? mapRegionCache.value.adcode : item.adcode
   })
 })
@@ -288,13 +226,28 @@ const onHandleSelectProvince = async (value: number, option: Recordable, item: R
   datasetMap3DList.value[findIndex].cityOptions = await getAreaLists(areaEnum.CITY, option.adcode)
 }
-const handleAddRegion = () => {
+const handleAddRegion =async () => {
   props.optionData.dataset.map3D.push(cloneDeep(STATIC_SCATTER_CONFIG))
+  if (mapRegionCache.value.adcode !== 'china') {
+    const { adcode, areaName } = unref(mapRegionCache) || {}
+    const cityOptions = await getAreaLists(areaEnum.CITY, adcode)
+    // 循环 push 城市数据
+    datasetMap3DList.value.forEach((item: any) => {
+      
+      item.name = areaName
+      item.cityOptions = cityOptions && cityOptions.length ? cityOptions : [{ adcode, label: areaName, value: areaName }]
+    })
+    return
+  }
   datasetMap3DList.value.forEach(async (item: Recordable) => {
     item.provinceOptions = await getAreaLists()
   })
 }
+const handleAreaSubmit = () => {
+  props.optionData.isShowExecute = !props.optionData?.isShowExecute
+}
+
 const mapRegionCache = computed(() => {
   return props.optionData.mapRegion
 })
@@ -306,24 +259,31 @@ const onHandleSelectValues = async (values: regionInfo) => {
   mapRegionCache.value.adcode = countyValue
     ? countyValue
     : cityValue
-    ? cityValue
-    : provinceValue === 'china'
-    ? 'china'
-    : provinceValue
+      ? cityValue
+      : provinceValue === 'china'
+        ? 'china'
+        : provinceValue
   props.optionData.mapRegion = mapRegionCache.value
-  if(mapRegionCache.value.adcode!=='china'){
-    const {adcode,areaName} = unref(mapRegionCache) || {}
-    const cityOptions =  await getAreaLists(areaEnum.CITY, adcode)
-    console.log(cityOptions,'cityOptions')
-    datasetMap3DList.value.forEach((item:any)=>{
-      item.name=areaName
-      item.city_name=areaName?areaName:null
-      item.adcode=adcode,
-      item.cityOptions = cityOptions && cityOptions.length?cityOptions:[{adcode,label:areaName,value:areaName}]
-    })
+  if (mapRegionCache.value.adcode !== 'china') {
+    //清空区块配置和柱状配置
+    props.optionData.dataset.map3D = [cloneDeep(STATIC_SCATTER_CONFIG)]
+    props.optionData.dataset.bar3D = [cloneDeep(STATIC_SCATTER_CONFIG)]
+    setDatasetArea()
   }
 }
+const setDatasetArea = async () => {
+  const { adcode, areaName } = unref(mapRegionCache) || {}
+  const cityOptions = await getAreaLists(areaEnum.CITY, adcode)
+  // 循环 push 城市数据
+  datasetMap3DList.value.forEach((item: any) => {
+    item.name = areaName
+    item.city_name = null
+    item.adcode = null,
+    item.cityOptions = cityOptions && cityOptions.length ? cityOptions : [{ adcode, label: areaName, value: areaName }]
+  })
+}
+
 const handleChangeDrillingIn = () => {
   SelectCityRef.value?.resetValue()
   props.optionData.mapRegion.adcode = 'china'
--- a/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/index.vue
View file @eee1727
+++ b/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/index.vue
View file @eee1727
@@ -309,7 +309,7 @@ const handleDataPoint = (newData: string | number, areaName: string) => {
         item.data = cloneDeepData.filter((item: Recordable) => item.name !== null) || []
       }
       if (item.type === ThreeMapEnum.BAR3D) {
-        item.data = dataset.value[ThreeMapEnum.BAR3D].filter((dataItem: dataPointI) => dataItem.adcode === newData)
+        item.data = dataset.value[ThreeMapEnum.BAR3D]
       }
     })
   }
@@ -322,24 +322,23 @@ watch(
   async (newData: number | string) => {
     try {
       await getGeojson(newData)
-      const { distance, zoom, alpha } = setScale(String(newData))
+      const { distance} = setScale(String(newData))
       const option = props.chartConfig.option
       // 修复缩放
-      const { series } = option || {}
+      const { series,geo3D } = option || {}
+      
       series?.forEach((item: Recordable) => {
         if (item.type === 'map3D') {
           item.viewControl = {
             ...item?.viewControl,
             distance,
-            zoom,
-            alpha
           }
         }
       })
       handleRegisterMapNameAndData(newData, dataset.value, mapRegion.value.areaName)
       handleDataPoint(newData, mapRegion.value.areaName)
       changeOption.value = true
-      handleSetOption(chartInstance.value!, { ...option, series })
+      handleSetOption(chartInstance.value!, { ...option, series ,geo3D:{...geo3D,viewControl:{distance:distance}}})
     } catch (error) {
       console.error('展示区域发生变化出错，出错原因->', error)
     }
@@ -366,4 +365,14 @@ const stopWatch = watch(
     deep: true
   }
 )
+watch(()=>props.chartConfig.option.isShowExecute,async()=>{
+  const {adcode,areaName} = props.chartConfig.option.mapRegion || {}
+  handleRegisterMapNameAndData(adcode,dataset.value,mapRegion.value.areaName)
+  handleDataPoint(adcode,areaName)
+
+  const { distance } = setScale(String(adcode))
+  const option = props.chartConfig.option
+  const { series,geo3D } = option || {}
+  handleSetOption(chartInstance.value!, { ...option, series ,geo3D:{...geo3D,viewControl:{distance:distance}}})
+})
 </script>