简柏林 / thingskit-view · Commits

Commit 747f83fd95aeb3fea4ac436a430e189318f053cd

Authored by xp.Huang
2 parents da7263e4 eee1727f

Merge branch 'fix/3D-map-preview-add-button' into 'main_dev' 

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

See merge request yunteng/thingskit-view!187
Inline Side-by-side
Showing 3 changed files with 101 additions and 126 deletions
... ... @@ -98,7 +98,7 @@ export const setScale = (adcode: string | number) => {
98 98 case '340000':
99 99 return { distance: 170, zoom: 0.8, alpha: 45 }
100 100 case '350000':
101   - return { distance: 150, zoom: 0.8, alpha: 45 }
  101 + return { distance: 150, zoom: 0.8, alpha: 45 }
102 102 case '360000':
103 103 return { distance: 190, zoom: 0.8, alpha: 45 }
104 104 case '370000':
... ... @@ -111,6 +111,8 @@ export const setScale = (adcode: string | number) => {
111 111 return { distance: 165, zoom: 0.8, alpha: 45 }
112 112 case '500000':
113 113 return { distance: 145, zoom: 0.8, alpha: 45 }
  114 + case '510000':
  115 + return { distance: 115, zoom: 0.8, alpha: 45 }
114 116 case '520000':
115 117 return { distance: 135, zoom: 0.8, alpha: 45 }
116 118 case '530000':
... ... @@ -166,6 +168,7 @@ export const option = {
166 168 iconDistanceTop: 20,
167 169 drillingIn: false,
168 170 dataset: dataMaps,
  171 + isShowExecute:false,
169 172 saveClickRegion: {
170 173 level: ''
171 174 },
... ... @@ -188,7 +191,10 @@ export const option = {
188 191 geo3D: {
189 192 show: false, // 隐藏该层，为true时会导致出现两个地图
190 193 map: '',
191   - roam: true
  194 + roam: true,
  195 + viewControl:{
  196 + distance:100
  197 + }
192 198 },
193 199 series: [
194 200 {
... ...
... ... @@ -19,28 +19,16 @@
19 19 </SettingItemBox>
20 20 <SettingItemBox name="图标距离">
21 21 <SettingItem name="距右">
22   - <n-input-number
23   - v-model:value="optionData.iconDistanceRight"
24   - :min="1"
25   - size="small"
26   - placeholder="请输入"
27   - ></n-input-number>
  22 + <n-input-number v-model:value="optionData.iconDistanceRight" :min="1" size="small"
  23 + placeholder="请输入"></n-input-number>
28 24 </SettingItem>
29 25 <SettingItem name="距上">
30   - <n-input-number
31   - v-model:value="optionData.iconDistanceTop"
32   - :min="1"
33   - size="small"
34   - placeholder="请输入"
35   - ></n-input-number>
  26 + <n-input-number v-model:value="optionData.iconDistanceTop" :min="1" size="small"
  27 + placeholder="请输入"></n-input-number>
36 28 </SettingItem>
37 29 </SettingItemBox>
38   - <SelectCity
39   - ref="SelectCityRef"
40   - :optionData="optionData"
41   - :drillingIn="optionData.drillingIn"
42   - @submit="onHandleSelectValues"
43   - />
  30 + <SelectCity ref="SelectCityRef" :optionData="optionData" :drillingIn="optionData.drillingIn"
  31 + @submit="onHandleSelectValues" />
44 32 <div style="height: 30px"></div>
45 33 <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
46 34 <SettingItemBox name="地图配置">
... ... @@ -48,35 +36,20 @@
48 36 <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
49 37 </SettingItem>
50 38 <SettingItem name="边框颜色">
51   - <n-color-picker
52   - size="small"
53   - :modes="['hex']"
54   - v-model:value="seriesList[0].itemStyle.borderColor"
55   - ></n-color-picker>
  39 + <n-color-picker size="small" :modes="['hex']"
  40 + v-model:value="seriesList[0].itemStyle.borderColor"></n-color-picker>
56 41 </SettingItem>
57 42 <SettingItem name="边框大小">
58   - <n-input-number
59   - v-model:value="seriesList[0].itemStyle.borderWidth"
60   - :min="0"
61   - size="small"
62   - placeholder="请输入"
63   - ></n-input-number>
  43 + <n-input-number v-model:value="seriesList[0].itemStyle.borderWidth" :min="0" size="small"
  44 + placeholder="请输入"></n-input-number>
64 45 </SettingItem>
65 46 <SettingItem name="透明度">
66   - <n-input-number
67   - v-model:value="seriesList[0].itemStyle.opacity"
68   - :min="0"
69   - size="small"
70   - placeholder="请输入"
71   - ></n-input-number>
  47 + <n-input-number v-model:value="seriesList[0].itemStyle.opacity" :min="0" size="small"
  48 + placeholder="请输入"></n-input-number>
72 49 </SettingItem>
73 50 <SettingItem name="厚度">
74   - <n-input-number
75   - v-model:value="seriesList[0].regionHeight"
76   - :min="0"
77   - size="small"
78   - placeholder="请输入"
79   - ></n-input-number>
  51 + <n-input-number v-model:value="seriesList[0].regionHeight" :min="0" size="small"
  52 + placeholder="请输入"></n-input-number>
80 53 </SettingItem>
81 54 </SettingItemBox>
82 55 <SettingItemBox name="标题配置">
... ... @@ -84,19 +57,12 @@
84 57 <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
85 58 </SettingItem>
86 59 <SettingItem name="颜色">
87   - <n-color-picker
88   - size="small"
89   - :modes="['hex']"
90   - v-model:value="seriesList[0].label.textStyle.color"
91   - ></n-color-picker>
  60 + <n-color-picker size="small" :modes="['hex']"
  61 + v-model:value="seriesList[0].label.textStyle.color"></n-color-picker>
92 62 </SettingItem>
93 63 <SettingItem name="大小">
94   - <n-input-number
95   - v-model:value="seriesList[0].label.textStyle.fontSize"
96   - :min="0"
97   - size="small"
98   - placeholder="请输入"
99   - ></n-input-number>
  64 + <n-input-number v-model:value="seriesList[0].label.textStyle.fontSize" :min="0" size="small"
  65 + placeholder="请输入"></n-input-number>
100 66 </SettingItem>
101 67 </SettingItemBox>
102 68 <SettingItemBox name="高亮配置">
... ... @@ -104,69 +70,40 @@
104 70 <n-switch v-model:value="seriesList[0].emphasis.label.show" size="small"></n-switch>
105 71 </SettingItem>
106 72 <SettingItem name="颜色">
107   - <n-color-picker
108   - size="small"
109   - :modes="['hex']"
110   - v-model:value="seriesList[0].emphasis.label.textStyle.color"
111   - ></n-color-picker>
  73 + <n-color-picker size="small" :modes="['hex']"
  74 + v-model:value="seriesList[0].emphasis.label.textStyle.color"></n-color-picker>
112 75 </SettingItem>
113 76 <SettingItem name="大小">
114   - <n-input-number
115   - v-model:value="seriesList[0].emphasis.label.textStyle.fontSize"
116   - :min="0"
117   - size="small"
118   - placeholder="请输入"
119   - ></n-input-number>
  77 + <n-input-number v-model:value="seriesList[0].emphasis.label.textStyle.fontSize" :min="0" size="small"
  78 + placeholder="请输入"></n-input-number>
120 79 </SettingItem>
121 80 <SettingItem name="区块颜色">
122   - <n-color-picker
123   - size="small"
124   - :modes="['hex']"
125   - v-model:value="seriesList[0].emphasis.itemStyle.color"
126   - ></n-color-picker>
  81 + <n-color-picker size="small" :modes="['hex']"
  82 + v-model:value="seriesList[0].emphasis.itemStyle.color"></n-color-picker>
127 83 </SettingItem>
128 84 </SettingItemBox>
129 85 <SettingItemBox name="柱状配置">
130 86 <SettingItem name="最小高度">
131   - <n-input-number
132   - v-model:value="seriesList[1].minHeight"
133   - :min="0"
134   - :step="1"
135   - size="small"
136   - placeholder="请输入"
137   - ></n-input-number>
  87 + <n-input-number v-model:value="seriesList[1].minHeight" :min="0" :step="1" size="small"
  88 + placeholder="请输入"></n-input-number>
138 89 </SettingItem>
139 90 <SettingItem name="大小">
140   - <n-input-number
141   - v-model:value="seriesList[1].barSize"
142   - :min="0"
143   - :step="1"
144   - size="small"
145   - placeholder="请输入"
146   - ></n-input-number>
  91 + <n-input-number v-model:value="seriesList[1].barSize" :min="0" :step="1" size="small"
  92 + placeholder="请输入"></n-input-number>
147 93 </SettingItem>
148 94 <SettingItem name="倒角尺寸">
149   - <n-input-number
150   - v-model:value="seriesList[1].bevelSize"
151   - :min="0"
152   - :max="1"
153   - :step="0.1"
154   - size="small"
155   - placeholder="请输入"
156   - ></n-input-number>
  95 + <n-input-number v-model:value="seriesList[1].bevelSize" :min="0" :max="1" :step="0.1" size="small"
  96 + placeholder="请输入"></n-input-number>
157 97 </SettingItem>
158 98 </SettingItemBox>
159 99 </CollapseItem>
160 100 <CollapseItem name="地区配置" :expanded="true">
161 101 <SettingItemBox name="地区配置" :alone="true">
162 102 <template v-for="(item, map3DIndex) in optionData.dataset.map3D" :key="map3DIndex">
163   - <setting-item name="省份名称" v-if="mapRegionCache.adcode=='china'">
  103 + <setting-item name="省份名称" v-if="mapRegionCache.adcode == 'china'">
164 104 <n-select
165   - @change="(v:number,o:Recordable,w:Recordable,s1:number)=> onHandleSelectProvince(v,o,item, map3DIndex)"
166   - placeholder="请选择省份"
167   - v-model:value="item.name"
168   - :options="item.provinceOptions"
169   - />
  105 + @change="(v: number, o: Recordable, w: Recordable, s1: number) => onHandleSelectProvince(v, o, item, map3DIndex)"
  106 + placeholder="请选择省份" v-model:value="item.name" :options="item.provinceOptions" />
170 107 </setting-item>
171 108 <setting-item name="城市名称">
172 109 <n-select placeholder="请选择城市" v-model:value="item.city_name" :options="item.cityOptions" />
... ... @@ -187,6 +124,8 @@
187 124 </template>
188 125 <div class="h-space"></div>
189 126 <n-button size="small" @click="handleAddRegion"> + </n-button>
  127 + <div class="h-space"></div>
  128 + <n-button type="primary" @click="handleAreaSubmit">确定</n-button>
190 129 </SettingItemBox>
191 130 </CollapseItem>
192 131 <CollapseItem name="柱状配置" :expanded="true">
... ... @@ -212,13 +151,12 @@
212 151 </setting-item>
213 152 </template>
214 153 <div class="h-space"></div>
215   - <n-button
216   - style="float: right"
217   - size="small"
218   - @click="optionData.dataset.bar3D.push(cloneDeep(STATIC_SCATTER_CONFIG))"
219   - >
  154 + <n-button style="float: right" size="small"
  155 + @click="optionData.dataset.bar3D.push(cloneDeep(STATIC_SCATTER_CONFIG))">
220 156 +
221 157 </n-button>
  158 + <div class="h-space"></div>
  159 + <n-button type="primary" @click="handleAreaSubmit">确定</n-button>
222 160 </SettingItemBox>
223 161 </CollapseItem>
224 162 </template>
... ... @@ -253,7 +191,7 @@ const datasetMap3DList = computed(() => {
253 191 const STATIC_SCATTER_CONFIG = {
254 192 name: null,
255 193 adcode: 510000,
256   - city_name:null,
  194 + city_name: null,
257 195 value: [0, 0, 0],
258 196 height: 2,
259 197 itemStyle: {
... ... @@ -277,7 +215,7 @@ onMounted(async () => {
277 215 datasetMap3DList.value.forEach(async (item: Recordable) => {
278 216 item.provinceOptions = await getAreaLists()
279 217 item.cityOptions = await getAreaLists(areaEnum.CITY, !item.adcode ? mapRegionCache.value.adcode : item.adcode)
280   - item.adcode = !item.adcode ? mapRegionCache.value.adcode : item.adcode
  218 + item.adcode = !item.adcode ? mapRegionCache.value.adcode : item.adcode
281 219 })
282 220 })
283 221
... ... @@ -288,13 +226,28 @@ const onHandleSelectProvince = async (value: number, option: Recordable, item: R
288 226 datasetMap3DList.value[findIndex].cityOptions = await getAreaLists(areaEnum.CITY, option.adcode)
289 227 }
290 228
291   -const handleAddRegion = () => {
  229 +const handleAddRegion =async () => {
292 230 props.optionData.dataset.map3D.push(cloneDeep(STATIC_SCATTER_CONFIG))
  231 + if (mapRegionCache.value.adcode !== 'china') {
  232 + const { adcode, areaName } = unref(mapRegionCache) || {}
  233 + const cityOptions = await getAreaLists(areaEnum.CITY, adcode)
  234 + // 循环 push 城市数据
  235 + datasetMap3DList.value.forEach((item: any) => {
  236 +
  237 + item.name = areaName
  238 + item.cityOptions = cityOptions && cityOptions.length ? cityOptions : [{ adcode, label: areaName, value: areaName }]
  239 + })
  240 + return
  241 + }
293 242 datasetMap3DList.value.forEach(async (item: Recordable) => {
294 243 item.provinceOptions = await getAreaLists()
295 244 })
296 245 }
297 246
  247 +const handleAreaSubmit = () => {
  248 + props.optionData.isShowExecute = !props.optionData?.isShowExecute
  249 +}
  250 +
298 251 const mapRegionCache = computed(() => {
299 252 return props.optionData.mapRegion
300 253 })
... ... @@ -306,24 +259,31 @@ const onHandleSelectValues = async (values: regionInfo) => {
306 259 mapRegionCache.value.adcode = countyValue
307 260 ? countyValue
308 261 : cityValue
309   - ? cityValue
310   - : provinceValue === 'china'
311   - ? 'china'
312   - : provinceValue
  262 + ? cityValue
  263 + : provinceValue === 'china'
  264 + ? 'china'
  265 + : provinceValue
313 266 props.optionData.mapRegion = mapRegionCache.value
314   - if(mapRegionCache.value.adcode!=='china'){
315   - const {adcode,areaName} = unref(mapRegionCache) || {}
316   - const cityOptions = await getAreaLists(areaEnum.CITY, adcode)
317   - console.log(cityOptions,'cityOptions')
318   - datasetMap3DList.value.forEach((item:any)=>{
319   - item.name=areaName
320   - item.city_name=areaName?areaName:null
321   - item.adcode=adcode,
322   - item.cityOptions = cityOptions && cityOptions.length?cityOptions:[{adcode,label:areaName,value:areaName}]
323   - })
  267 + if (mapRegionCache.value.adcode !== 'china') {
  268 + //清空区块配置和柱状配置
  269 + props.optionData.dataset.map3D = [cloneDeep(STATIC_SCATTER_CONFIG)]
  270 + props.optionData.dataset.bar3D = [cloneDeep(STATIC_SCATTER_CONFIG)]
  271 + setDatasetArea()
324 272 }
325 273 }
326 274
  275 +const setDatasetArea = async () => {
  276 + const { adcode, areaName } = unref(mapRegionCache) || {}
  277 + const cityOptions = await getAreaLists(areaEnum.CITY, adcode)
  278 + // 循环 push 城市数据
  279 + datasetMap3DList.value.forEach((item: any) => {
  280 + item.name = areaName
  281 + item.city_name = null
  282 + item.adcode = null,
  283 + item.cityOptions = cityOptions && cityOptions.length ? cityOptions : [{ adcode, label: areaName, value: areaName }]
  284 + })
  285 +}
  286 +
327 287 const handleChangeDrillingIn = () => {
328 288 SelectCityRef.value?.resetValue()
329 289 props.optionData.mapRegion.adcode = 'china'
... ...
... ... @@ -309,7 +309,7 @@ const handleDataPoint = (newData: string | number, areaName: string) => {
309 309 item.data = cloneDeepData.filter((item: Recordable) => item.name !== null) || []
310 310 }
311 311 if (item.type === ThreeMapEnum.BAR3D) {
312   - item.data = dataset.value[ThreeMapEnum.BAR3D].filter((dataItem: dataPointI) => dataItem.adcode === newData)
  312 + item.data = dataset.value[ThreeMapEnum.BAR3D]
313 313 }
314 314 })
315 315 }
... ... @@ -322,24 +322,23 @@ watch(
322 322 async (newData: number | string) => {
323 323 try {
324 324 await getGeojson(newData)
325   - const { distance, zoom, alpha } = setScale(String(newData))
  325 + const { distance} = setScale(String(newData))
326 326 const option = props.chartConfig.option
327 327 // 修复缩放
328   - const { series } = option || {}
  328 + const { series,geo3D } = option || {}
  329 +
329 330 series?.forEach((item: Recordable) => {
330 331 if (item.type === 'map3D') {
331 332 item.viewControl = {
332 333 ...item?.viewControl,
333 334 distance,
334   - zoom,
335   - alpha
336 335 }
337 336 }
338 337 })
339 338 handleRegisterMapNameAndData(newData, dataset.value, mapRegion.value.areaName)
340 339 handleDataPoint(newData, mapRegion.value.areaName)
341 340 changeOption.value = true
342   - handleSetOption(chartInstance.value!, { ...option, series })
  341 + handleSetOption(chartInstance.value!, { ...option, series ,geo3D:{...geo3D,viewControl:{distance:distance}}})
343 342 } catch (error) {
344 343 console.error('展示区域发生变化出错，出错原因->', error)
345 344 }
... ... @@ -366,4 +365,14 @@ const stopWatch = watch(
366 365 deep: true
367 366 }
368 367 )
  368 +watch(()=>props.chartConfig.option.isShowExecute,async()=>{
  369 + const {adcode,areaName} = props.chartConfig.option.mapRegion || {}
  370 + handleRegisterMapNameAndData(adcode,dataset.value,mapRegion.value.areaName)
  371 + handleDataPoint(adcode,areaName)
  372 +
  373 + const { distance } = setScale(String(adcode))
  374 + const option = props.chartConfig.option
  375 + const { series,geo3D } = option || {}
  376 + handleSetOption(chartInstance.value!, { ...option, series ,geo3D:{...geo3D,viewControl:{distance:distance}}})
  377 +})
369 378 </script>
... ...