Commit 03612b261dd4e2ed846dfa45de7c2d169ecc5a33

Authored by fengwotao
1 parent 044a4aee

feat(src/packages): 图表地图 点击切换 标点还存在

... ... @@ -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(
... ...