Commit 03612b261dd4e2ed846dfa45de7c2d169ecc5a33
1 parent
044a4aee
feat(src/packages): 图表地图 点击切换 标点还存在
Showing
6 changed files
with
63 additions
and
21 deletions
... | ... | @@ -64,6 +64,17 @@ const onHandleSelectCity = async (value: number) => { |
64 | 64 | const onHandleSubmit = () => { |
65 | 65 | emits('submit', selectValues) |
66 | 66 | } |
67 | +const resetValue = () => { | |
68 | + selectValues.provinceValue = 'china' | |
69 | + selectValues.cityValue = null | |
70 | + selectValues.countyValue = null | |
71 | + selectValues.levelStr = areaEnum.COUNTRY | |
72 | + selectOptions.cityOptions = [] | |
73 | + selectOptions.countryOptions = [] | |
74 | +} | |
75 | +defineExpose({ | |
76 | + resetValue | |
77 | +}) | |
67 | 78 | </script> |
68 | 79 | |
69 | 80 | <template> | ... | ... |
... | ... | @@ -4,7 +4,7 @@ |
4 | 4 | <CollapseItem name="地图" :expanded="true"> |
5 | 5 | <SettingItemBox name="开启下钻"> |
6 | 6 | <SettingItem name=""> |
7 | - <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch> | |
7 | + <n-switch @change="handleChangeDrillingIn" v-model:value="optionData.drillingIn" size="small"></n-switch> | |
8 | 8 | </SettingItem> |
9 | 9 | </SettingItemBox> |
10 | 10 | <SettingItemBox name="返回图标"> |
... | ... | @@ -35,7 +35,12 @@ |
35 | 35 | ></n-input-number> |
36 | 36 | </SettingItem> |
37 | 37 | </SettingItemBox> |
38 | - <SelectCity :optionData="optionData" :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" /> | |
38 | + <SelectCity | |
39 | + ref="SelectCityRef" | |
40 | + :optionData="optionData" | |
41 | + :drillingIn="optionData.drillingIn" | |
42 | + @submit="onHandleSelectValues" | |
43 | + /> | |
39 | 44 | <SettingItemBox name="颜色"> |
40 | 45 | <SettingItem name="区域颜色"> |
41 | 46 | <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker> |
... | ... | @@ -181,6 +186,8 @@ const symbolOption = ref([ |
181 | 186 | } |
182 | 187 | ]) |
183 | 188 | |
189 | +const SelectCityRef = ref<typeof SelectCity>() | |
190 | + | |
184 | 191 | const onHandleSelectValues = (values: any) => { |
185 | 192 | const { cityValue, countyValue, provinceValue } = values |
186 | 193 | props.optionData.mapRegion.saveSelect = values |
... | ... | @@ -192,4 +199,8 @@ const onHandleSelectValues = (values: any) => { |
192 | 199 | ? 'china' |
193 | 200 | : provinceValue |
194 | 201 | } |
202 | + | |
203 | +const handleChangeDrillingIn = () => { | |
204 | + SelectCityRef.value?.resetValue() | |
205 | +} | |
195 | 206 | </script> | ... | ... |
... | ... | @@ -64,6 +64,18 @@ const onHandleSelectCity = async (value: number) => { |
64 | 64 | const onHandleSubmit = () => { |
65 | 65 | emits('submit', selectValues) |
66 | 66 | } |
67 | + | |
68 | +const resetValue = () => { | |
69 | + selectValues.provinceValue = 'china' | |
70 | + selectValues.cityValue = null | |
71 | + selectValues.countyValue = null | |
72 | + selectValues.levelStr = areaEnum.COUNTRY | |
73 | + selectOptions.cityOptions = [] | |
74 | + selectOptions.countryOptions = [] | |
75 | +} | |
76 | +defineExpose({ | |
77 | + resetValue | |
78 | +}) | |
67 | 79 | </script> |
68 | 80 | |
69 | 81 | <template> | ... | ... |
... | ... | @@ -3,7 +3,7 @@ import { OverrideMapBaseConfig } from './index' |
3 | 3 | import { chartInitConfig } from '@/settings/designSetting' |
4 | 4 | import { CreateComponentType } from '@/packages/index.d' |
5 | 5 | import cloneDeep from 'lodash/cloneDeep' |
6 | -import dataJson from './data.json' | |
6 | +// import dataJson from './data.json' | |
7 | 7 | |
8 | 8 | //省市区枚举 |
9 | 9 | export const enum areaEnum { |
... | ... | @@ -21,7 +21,7 @@ export const option = { |
21 | 21 | iconDistanceRight: 20, |
22 | 22 | iconDistanceTop: 20, |
23 | 23 | drillingIn: false, |
24 | - dataset: dataJson, | |
24 | + // dataset: dataJson, | |
25 | 25 | mapRegion: { |
26 | 26 | adcode: 'china', |
27 | 27 | showHainanIsLands: true, | ... | ... |
... | ... | @@ -4,7 +4,7 @@ |
4 | 4 | <CollapseItem name="地图" :expanded="true"> |
5 | 5 | <SettingItemBox name="开启下钻"> |
6 | 6 | <SettingItem name=""> |
7 | - <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch> | |
7 | + <n-switch @change="handleChangeDrillingIn" v-model:value="optionData.drillingIn" size="small"></n-switch> | |
8 | 8 | </SettingItem> |
9 | 9 | </SettingItemBox> |
10 | 10 | <SettingItemBox name="返回图标"> |
... | ... | @@ -14,11 +14,7 @@ |
14 | 14 | </SettingItemBox> |
15 | 15 | <SettingItemBox name="图标颜色"> |
16 | 16 | <SettingItem name=""> |
17 | - <n-color-picker | |
18 | - size="small" | |
19 | - :modes="['hex']" | |
20 | - v-model:value="optionData.iconColor" | |
21 | - ></n-color-picker> | |
17 | + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.iconColor"></n-color-picker> | |
22 | 18 | </SettingItem> |
23 | 19 | </SettingItemBox> |
24 | 20 | <SettingItemBox name="图标距离"> |
... | ... | @@ -39,7 +35,12 @@ |
39 | 35 | ></n-input-number> |
40 | 36 | </SettingItem> |
41 | 37 | </SettingItemBox> |
42 | - <SelectCity :optionData="optionData" :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" /> | |
38 | + <SelectCity | |
39 | + ref="SelectCityRef" | |
40 | + :optionData="optionData" | |
41 | + :drillingIn="optionData.drillingIn" | |
42 | + @submit="onHandleSelectValues" | |
43 | + /> | |
43 | 44 | <SettingItemBox name="区域颜色"> |
44 | 45 | <SettingItem name="0%处颜色"> |
45 | 46 | <n-color-picker |
... | ... | @@ -281,6 +282,8 @@ const props = defineProps({ |
281 | 282 | } |
282 | 283 | }) |
283 | 284 | |
285 | +const SelectCityRef = ref<typeof SelectCity>() | |
286 | + | |
284 | 287 | const initMapRegionOptions = () => { |
285 | 288 | mapChinaJson.features.forEach((element: any) => { |
286 | 289 | if (element.properties.name) { |
... | ... | @@ -309,4 +312,8 @@ const onHandleSelectValues = (values: any) => { |
309 | 312 | ? 'china' |
310 | 313 | : provinceValue |
311 | 314 | } |
315 | + | |
316 | +const handleChangeDrillingIn = () => { | |
317 | + SelectCityRef.value?.resetValue() | |
318 | +} | |
312 | 319 | </script> | ... | ... |
... | ... | @@ -142,6 +142,7 @@ const getGeojson = async (regionId: any) => { |
142 | 142 | ) |
143 | 143 | const { geoJson, name, code, level } = data |
144 | 144 | const geoJsonFile = JSON.parse(geoJson) |
145 | + if (!geoJsonFile) return | |
145 | 146 | saveGeojson.value = geoJsonFile |
146 | 147 | registerMap(level === areaEnum.COUNTRY ? name : code, { geoJSON: geoJsonFile as any, specialAreas: {} }) |
147 | 148 | loading.value = false |
... | ... | @@ -199,16 +200,16 @@ const hainanLandsHandle = async (newData: boolean) => { |
199 | 200 | } |
200 | 201 | |
201 | 202 | //监听 dataset 数据发生变化 |
202 | -watch( | |
203 | - () => props.chartConfig.option.dataset, | |
204 | - newData => { | |
205 | - dataSetHandle(newData) | |
206 | - }, | |
207 | - { | |
208 | - immediate: true, | |
209 | - deep: false | |
210 | - } | |
211 | -) | |
203 | +// watch( | |
204 | +// () => props.chartConfig.option.dataset, | |
205 | +// newData => { | |
206 | +// dataSetHandle(newData) | |
207 | +// }, | |
208 | +// { | |
209 | +// immediate: true, | |
210 | +// deep: false | |
211 | +// } | |
212 | +// ) | |
212 | 213 | |
213 | 214 | //监听是否显示南海群岛 |
214 | 215 | watch( | ... | ... |