Commit 3f7c8c2158276d23812942be4fe2c80344cd115e

Authored by xp.Huang
2 parents 410df39a b9f88a0f

Merge branch 'ft' into 'main_dev'

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

See merge request yunteng/thingskit-view!120
... ... @@ -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>
... ...
... ... @@ -7,6 +7,7 @@
7 7 :option="option.value"
8 8 :manual-update="isPreview()"
9 9 :loading="loading"
  10 + :loadingOptions="{ maskColor: '#18181C', text: '加载中', textColor: 'white' }"
10 11 autoresize
11 12 >
12 13 </v-chart>
... ... @@ -142,6 +143,7 @@ const getGeojson = async (regionId: any) => {
142 143 )
143 144 const { geoJson, name, code, level } = data
144 145 const geoJsonFile = JSON.parse(geoJson)
  146 + if (!geoJsonFile) return
145 147 saveGeojson.value = geoJsonFile
146 148 registerMap(level === areaEnum.COUNTRY ? name : code, { geoJSON: geoJsonFile as any, specialAreas: {} })
147 149 loading.value = false
... ... @@ -199,16 +201,16 @@ const hainanLandsHandle = async (newData: boolean) => {
199 201 }
200 202
201 203 //监听 dataset 数据发生变化
202   -watch(
203   - () => props.chartConfig.option.dataset,
204   - newData => {
205   - dataSetHandle(newData)
206   - },
207   - {
208   - immediate: true,
209   - deep: false
210   - }
211   -)
  204 +// watch(
  205 +// () => props.chartConfig.option.dataset,
  206 +// newData => {
  207 +// dataSetHandle(newData)
  208 +// },
  209 +// {
  210 +// immediate: true,
  211 +// deep: false
  212 +// }
  213 +// )
212 214
213 215 //监听是否显示南海群岛
214 216 watch(
... ...
... ... @@ -7,28 +7,46 @@
7 7 <collapse-item name="时间配置" :expanded="true">
8 8 <setting-item-box name="快捷选择">
9 9 <setting-item name="日期">
10   - <n-select clearable @change="shortCutSelect" v-model:value="optionData.shortcut" size="small" :options="intervalOption" />
  10 + <n-select
  11 + clearable
  12 + @change="shortCutSelect"
  13 + v-model:value="optionData.shortcut"
  14 + size="small"
  15 + :options="intervalOption"
  16 + />
11 17 </setting-item>
12 18 </setting-item-box>
13 19 <setting-item-box name="基础">
14 20 <setting-item name="类型">
15   - <n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions"
16   - @update:value="datePickerTypeUpdate"/>
  21 + <n-select
  22 + v-model:value="optionData.componentInteractEventKey"
  23 + size="small"
  24 + :options="datePickerTypeOptions"
  25 + @update:value="datePickerTypeUpdate"
  26 + />
17 27 </setting-item>
18 28 </setting-item-box>
19 29 <setting-item-box name="默认值">
20 30 <setting-item name="类型">
21   - <n-select v-model:value="optionData.defaultType" size="small" :options="defaultTypeOptions"
22   - @update:value="defaultTypeUpdate" />
  31 + <n-select
  32 + v-model:value="optionData.defaultType"
  33 + size="small"
  34 + :options="defaultTypeOptions"
  35 + @update:value="defaultTypeUpdate"
  36 + />
23 37 </setting-item>
24   -
25 38 </setting-item-box>
26 39 <setting-item-box v-if="optionData.defaultType === DefaultTypeEnum.STATIC" :alone="true">
27 40 <setting-item name="静态默认值">
28   - <n-date-picker size="small" clearable v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" />
  41 + <n-date-picker
  42 + size="small"
  43 + clearable
  44 + v-model:value="optionData.dataset"
  45 + :type="optionData.componentInteractEventKey"
  46 + />
29 47 </setting-item>
30 48 </setting-item-box>
31   - <setting-item-box v-if="optionData.defaultType === DefaultTypeEnum.DYNAMIC" >
  49 + <setting-item-box v-if="optionData.defaultType === DefaultTypeEnum.DYNAMIC">
32 50 <template #name>
33 51 <n-text></n-text>
34 52 <n-tooltip trigger="hover">
... ... @@ -43,7 +61,7 @@
43 61 <setting-item :name="differValueName">
44 62 <n-input-number v-model:value="optionData.differValue[0]" class="input-num-width" size="small">
45 63 <template #suffix>
46   - {{DifferUnitObject[optionData.differUnit[0]]}}
  64 + {{ DifferUnitObject[optionData.differUnit[0]] }}
47 65 </template>
48 66 </n-input-number>
49 67 </setting-item>
... ... @@ -53,7 +71,7 @@
53 71 <setting-item v-if="isRange" name="结束值动态偏移量">
54 72 <n-input-number v-model:value="optionData.differValue[1]" class="input-num-width" size="small">
55 73 <template #suffix>
56   - {{DifferUnitObject[optionData.differUnit[1]]}}
  74 + {{ DifferUnitObject[optionData.differUnit[1]] }}
57 75 </template>
58 76 </n-input-number>
59 77 </setting-item>
... ... @@ -61,18 +79,17 @@
61 79 <n-select v-model:value="optionData.differUnit[1]" size="small" :options="differUnitOptions" />
62 80 </setting-item>
63 81 </setting-item-box>
64   -
65 82 </collapse-item>
66 83 </template>
67 84
68 85 <script lang="ts" setup>
69   -import { PropType,computed } from 'vue'
  86 +import { PropType, computed, ref } from 'vue'
70 87 import { icon } from '@/plugins'
71 88 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
72 89 import { option } from './config'
73 90 import { intervalOption } from './shortcutTime'
74 91 import { ComponentInteractEventEnum, DefaultTypeEnum, DifferUnitEnum, DifferUnitObject } from './interact'
75   -import dayjs from "dayjs";
  92 +import dayjs from 'dayjs'
76 93
77 94 const { HelpOutlineIcon } = icon.ionicons5
78 95
... ... @@ -152,7 +169,6 @@ const defaultTypeOptions = [
152 169 }
153 170 ]
154 171
155   -
156 172 const differUnitOptions = [
157 173 // ManipulateType
158 174 {
... ... @@ -193,7 +209,6 @@ const differUnitOptions = [
193 209 }
194 210 ]
195 211
196   -
197 212 const isRange = computed(() => {
198 213 return props.optionData.componentInteractEventKey.endsWith('range')
199 214 })
... ... @@ -206,8 +221,13 @@ const differUnitName = computed(() => {
206 221 return isRange.value ? '开始值偏移单位' : '偏移单位'
207 222 })
208 223
  224 +const startTs = ref(0)
  225 +const endTs = ref(0)
  226 +
209 227 const datePickerTypeUpdate = () => {
210   - props.optionData.dataset = isRange.value ? [dayjs().valueOf(), dayjs().valueOf()] : [dayjs().valueOf()]
  228 + props.optionData.dataset = isRange.value
  229 + ? [startTs.value ? startTs.value : dayjs().valueOf(), endTs.value ? endTs.value : dayjs().valueOf()]
  230 + : [dayjs().valueOf()]
211 231 }
212 232
213 233 const defaultTypeUpdate = (v: string) => {
... ... @@ -220,9 +240,9 @@ const defaultTypeUpdate = (v: string) => {
220 240 }
221 241
222 242 const shortCutSelect = (value: number) => {
223   - const startTs = Date.now() - value
224   - const endTs = Date.now()
225   - props.optionData.dataset = [startTs, endTs] as any
  243 + startTs.value = Date.now() - value
  244 + endTs.value = Date.now()
  245 + props.optionData.dataset = [startTs.value, endTs.value] as any
226 246 }
227 247 // shortCutSelect(24*60*60*1000)//默认近1天
228 248 </script>
... ...