Commit 3f7c8c2158276d23812942be4fe2c80344cd115e
Merge branch 'ft' into 'main_dev'
fix(src/packages): 图表地图 点击切换 标点还存在 See merge request yunteng/thingskit-view!120
Showing
7 changed files
with
103 additions
and
40 deletions
@@ -64,6 +64,17 @@ const onHandleSelectCity = async (value: number) => { | @@ -64,6 +64,17 @@ const onHandleSelectCity = async (value: number) => { | ||
64 | const onHandleSubmit = () => { | 64 | const onHandleSubmit = () => { |
65 | emits('submit', selectValues) | 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 | </script> | 78 | </script> |
68 | 79 | ||
69 | <template> | 80 | <template> |
@@ -4,7 +4,7 @@ | @@ -4,7 +4,7 @@ | ||
4 | <CollapseItem name="地图" :expanded="true"> | 4 | <CollapseItem name="地图" :expanded="true"> |
5 | <SettingItemBox name="开启下钻"> | 5 | <SettingItemBox name="开启下钻"> |
6 | <SettingItem name=""> | 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 | </SettingItem> | 8 | </SettingItem> |
9 | </SettingItemBox> | 9 | </SettingItemBox> |
10 | <SettingItemBox name="返回图标"> | 10 | <SettingItemBox name="返回图标"> |
@@ -35,7 +35,12 @@ | @@ -35,7 +35,12 @@ | ||
35 | ></n-input-number> | 35 | ></n-input-number> |
36 | </SettingItem> | 36 | </SettingItem> |
37 | </SettingItemBox> | 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 | <SettingItemBox name="颜色"> | 44 | <SettingItemBox name="颜色"> |
40 | <SettingItem name="区域颜色"> | 45 | <SettingItem name="区域颜色"> |
41 | <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker> | 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,6 +186,8 @@ const symbolOption = ref([ | ||
181 | } | 186 | } |
182 | ]) | 187 | ]) |
183 | 188 | ||
189 | +const SelectCityRef = ref<typeof SelectCity>() | ||
190 | + | ||
184 | const onHandleSelectValues = (values: any) => { | 191 | const onHandleSelectValues = (values: any) => { |
185 | const { cityValue, countyValue, provinceValue } = values | 192 | const { cityValue, countyValue, provinceValue } = values |
186 | props.optionData.mapRegion.saveSelect = values | 193 | props.optionData.mapRegion.saveSelect = values |
@@ -192,4 +199,8 @@ const onHandleSelectValues = (values: any) => { | @@ -192,4 +199,8 @@ const onHandleSelectValues = (values: any) => { | ||
192 | ? 'china' | 199 | ? 'china' |
193 | : provinceValue | 200 | : provinceValue |
194 | } | 201 | } |
202 | + | ||
203 | +const handleChangeDrillingIn = () => { | ||
204 | + SelectCityRef.value?.resetValue() | ||
205 | +} | ||
195 | </script> | 206 | </script> |
@@ -64,6 +64,18 @@ const onHandleSelectCity = async (value: number) => { | @@ -64,6 +64,18 @@ const onHandleSelectCity = async (value: number) => { | ||
64 | const onHandleSubmit = () => { | 64 | const onHandleSubmit = () => { |
65 | emits('submit', selectValues) | 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 | </script> | 79 | </script> |
68 | 80 | ||
69 | <template> | 81 | <template> |
@@ -3,7 +3,7 @@ import { OverrideMapBaseConfig } from './index' | @@ -3,7 +3,7 @@ import { OverrideMapBaseConfig } from './index' | ||
3 | import { chartInitConfig } from '@/settings/designSetting' | 3 | import { chartInitConfig } from '@/settings/designSetting' |
4 | import { CreateComponentType } from '@/packages/index.d' | 4 | import { CreateComponentType } from '@/packages/index.d' |
5 | import cloneDeep from 'lodash/cloneDeep' | 5 | import cloneDeep from 'lodash/cloneDeep' |
6 | -import dataJson from './data.json' | 6 | +// import dataJson from './data.json' |
7 | 7 | ||
8 | //省市区枚举 | 8 | //省市区枚举 |
9 | export const enum areaEnum { | 9 | export const enum areaEnum { |
@@ -21,7 +21,7 @@ export const option = { | @@ -21,7 +21,7 @@ export const option = { | ||
21 | iconDistanceRight: 20, | 21 | iconDistanceRight: 20, |
22 | iconDistanceTop: 20, | 22 | iconDistanceTop: 20, |
23 | drillingIn: false, | 23 | drillingIn: false, |
24 | - dataset: dataJson, | 24 | + // dataset: dataJson, |
25 | mapRegion: { | 25 | mapRegion: { |
26 | adcode: 'china', | 26 | adcode: 'china', |
27 | showHainanIsLands: true, | 27 | showHainanIsLands: true, |
@@ -4,7 +4,7 @@ | @@ -4,7 +4,7 @@ | ||
4 | <CollapseItem name="地图" :expanded="true"> | 4 | <CollapseItem name="地图" :expanded="true"> |
5 | <SettingItemBox name="开启下钻"> | 5 | <SettingItemBox name="开启下钻"> |
6 | <SettingItem name=""> | 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 | </SettingItem> | 8 | </SettingItem> |
9 | </SettingItemBox> | 9 | </SettingItemBox> |
10 | <SettingItemBox name="返回图标"> | 10 | <SettingItemBox name="返回图标"> |
@@ -14,11 +14,7 @@ | @@ -14,11 +14,7 @@ | ||
14 | </SettingItemBox> | 14 | </SettingItemBox> |
15 | <SettingItemBox name="图标颜色"> | 15 | <SettingItemBox name="图标颜色"> |
16 | <SettingItem name=""> | 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 | </SettingItem> | 18 | </SettingItem> |
23 | </SettingItemBox> | 19 | </SettingItemBox> |
24 | <SettingItemBox name="图标距离"> | 20 | <SettingItemBox name="图标距离"> |
@@ -39,7 +35,12 @@ | @@ -39,7 +35,12 @@ | ||
39 | ></n-input-number> | 35 | ></n-input-number> |
40 | </SettingItem> | 36 | </SettingItem> |
41 | </SettingItemBox> | 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 | <SettingItemBox name="区域颜色"> | 44 | <SettingItemBox name="区域颜色"> |
44 | <SettingItem name="0%处颜色"> | 45 | <SettingItem name="0%处颜色"> |
45 | <n-color-picker | 46 | <n-color-picker |
@@ -281,6 +282,8 @@ const props = defineProps({ | @@ -281,6 +282,8 @@ const props = defineProps({ | ||
281 | } | 282 | } |
282 | }) | 283 | }) |
283 | 284 | ||
285 | +const SelectCityRef = ref<typeof SelectCity>() | ||
286 | + | ||
284 | const initMapRegionOptions = () => { | 287 | const initMapRegionOptions = () => { |
285 | mapChinaJson.features.forEach((element: any) => { | 288 | mapChinaJson.features.forEach((element: any) => { |
286 | if (element.properties.name) { | 289 | if (element.properties.name) { |
@@ -309,4 +312,8 @@ const onHandleSelectValues = (values: any) => { | @@ -309,4 +312,8 @@ const onHandleSelectValues = (values: any) => { | ||
309 | ? 'china' | 312 | ? 'china' |
310 | : provinceValue | 313 | : provinceValue |
311 | } | 314 | } |
315 | + | ||
316 | +const handleChangeDrillingIn = () => { | ||
317 | + SelectCityRef.value?.resetValue() | ||
318 | +} | ||
312 | </script> | 319 | </script> |
@@ -7,6 +7,7 @@ | @@ -7,6 +7,7 @@ | ||
7 | :option="option.value" | 7 | :option="option.value" |
8 | :manual-update="isPreview()" | 8 | :manual-update="isPreview()" |
9 | :loading="loading" | 9 | :loading="loading" |
10 | + :loadingOptions="{ maskColor: '#18181C', text: '加载中', textColor: 'white' }" | ||
10 | autoresize | 11 | autoresize |
11 | > | 12 | > |
12 | </v-chart> | 13 | </v-chart> |
@@ -142,6 +143,7 @@ const getGeojson = async (regionId: any) => { | @@ -142,6 +143,7 @@ const getGeojson = async (regionId: any) => { | ||
142 | ) | 143 | ) |
143 | const { geoJson, name, code, level } = data | 144 | const { geoJson, name, code, level } = data |
144 | const geoJsonFile = JSON.parse(geoJson) | 145 | const geoJsonFile = JSON.parse(geoJson) |
146 | + if (!geoJsonFile) return | ||
145 | saveGeojson.value = geoJsonFile | 147 | saveGeojson.value = geoJsonFile |
146 | registerMap(level === areaEnum.COUNTRY ? name : code, { geoJSON: geoJsonFile as any, specialAreas: {} }) | 148 | registerMap(level === areaEnum.COUNTRY ? name : code, { geoJSON: geoJsonFile as any, specialAreas: {} }) |
147 | loading.value = false | 149 | loading.value = false |
@@ -199,16 +201,16 @@ const hainanLandsHandle = async (newData: boolean) => { | @@ -199,16 +201,16 @@ const hainanLandsHandle = async (newData: boolean) => { | ||
199 | } | 201 | } |
200 | 202 | ||
201 | //监听 dataset 数据发生变化 | 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 | watch( | 216 | watch( |
@@ -7,28 +7,46 @@ | @@ -7,28 +7,46 @@ | ||
7 | <collapse-item name="时间配置" :expanded="true"> | 7 | <collapse-item name="时间配置" :expanded="true"> |
8 | <setting-item-box name="快捷选择"> | 8 | <setting-item-box name="快捷选择"> |
9 | <setting-item name="日期"> | 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 | </setting-item> | 17 | </setting-item> |
12 | </setting-item-box> | 18 | </setting-item-box> |
13 | <setting-item-box name="基础"> | 19 | <setting-item-box name="基础"> |
14 | <setting-item name="类型"> | 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 | </setting-item> | 27 | </setting-item> |
18 | </setting-item-box> | 28 | </setting-item-box> |
19 | <setting-item-box name="默认值"> | 29 | <setting-item-box name="默认值"> |
20 | <setting-item name="类型"> | 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 | </setting-item> | 37 | </setting-item> |
24 | - | ||
25 | </setting-item-box> | 38 | </setting-item-box> |
26 | <setting-item-box v-if="optionData.defaultType === DefaultTypeEnum.STATIC" :alone="true"> | 39 | <setting-item-box v-if="optionData.defaultType === DefaultTypeEnum.STATIC" :alone="true"> |
27 | <setting-item name="静态默认值"> | 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 | </setting-item> | 47 | </setting-item> |
30 | </setting-item-box> | 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 | <template #name> | 50 | <template #name> |
33 | <n-text></n-text> | 51 | <n-text></n-text> |
34 | <n-tooltip trigger="hover"> | 52 | <n-tooltip trigger="hover"> |
@@ -43,7 +61,7 @@ | @@ -43,7 +61,7 @@ | ||
43 | <setting-item :name="differValueName"> | 61 | <setting-item :name="differValueName"> |
44 | <n-input-number v-model:value="optionData.differValue[0]" class="input-num-width" size="small"> | 62 | <n-input-number v-model:value="optionData.differValue[0]" class="input-num-width" size="small"> |
45 | <template #suffix> | 63 | <template #suffix> |
46 | - {{DifferUnitObject[optionData.differUnit[0]]}} | 64 | + {{ DifferUnitObject[optionData.differUnit[0]] }} |
47 | </template> | 65 | </template> |
48 | </n-input-number> | 66 | </n-input-number> |
49 | </setting-item> | 67 | </setting-item> |
@@ -53,7 +71,7 @@ | @@ -53,7 +71,7 @@ | ||
53 | <setting-item v-if="isRange" name="结束值动态偏移量"> | 71 | <setting-item v-if="isRange" name="结束值动态偏移量"> |
54 | <n-input-number v-model:value="optionData.differValue[1]" class="input-num-width" size="small"> | 72 | <n-input-number v-model:value="optionData.differValue[1]" class="input-num-width" size="small"> |
55 | <template #suffix> | 73 | <template #suffix> |
56 | - {{DifferUnitObject[optionData.differUnit[1]]}} | 74 | + {{ DifferUnitObject[optionData.differUnit[1]] }} |
57 | </template> | 75 | </template> |
58 | </n-input-number> | 76 | </n-input-number> |
59 | </setting-item> | 77 | </setting-item> |
@@ -61,18 +79,17 @@ | @@ -61,18 +79,17 @@ | ||
61 | <n-select v-model:value="optionData.differUnit[1]" size="small" :options="differUnitOptions" /> | 79 | <n-select v-model:value="optionData.differUnit[1]" size="small" :options="differUnitOptions" /> |
62 | </setting-item> | 80 | </setting-item> |
63 | </setting-item-box> | 81 | </setting-item-box> |
64 | - | ||
65 | </collapse-item> | 82 | </collapse-item> |
66 | </template> | 83 | </template> |
67 | 84 | ||
68 | <script lang="ts" setup> | 85 | <script lang="ts" setup> |
69 | -import { PropType,computed } from 'vue' | 86 | +import { PropType, computed, ref } from 'vue' |
70 | import { icon } from '@/plugins' | 87 | import { icon } from '@/plugins' |
71 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | 88 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' |
72 | import { option } from './config' | 89 | import { option } from './config' |
73 | import { intervalOption } from './shortcutTime' | 90 | import { intervalOption } from './shortcutTime' |
74 | import { ComponentInteractEventEnum, DefaultTypeEnum, DifferUnitEnum, DifferUnitObject } from './interact' | 91 | import { ComponentInteractEventEnum, DefaultTypeEnum, DifferUnitEnum, DifferUnitObject } from './interact' |
75 | -import dayjs from "dayjs"; | 92 | +import dayjs from 'dayjs' |
76 | 93 | ||
77 | const { HelpOutlineIcon } = icon.ionicons5 | 94 | const { HelpOutlineIcon } = icon.ionicons5 |
78 | 95 | ||
@@ -152,7 +169,6 @@ const defaultTypeOptions = [ | @@ -152,7 +169,6 @@ const defaultTypeOptions = [ | ||
152 | } | 169 | } |
153 | ] | 170 | ] |
154 | 171 | ||
155 | - | ||
156 | const differUnitOptions = [ | 172 | const differUnitOptions = [ |
157 | // ManipulateType | 173 | // ManipulateType |
158 | { | 174 | { |
@@ -193,7 +209,6 @@ const differUnitOptions = [ | @@ -193,7 +209,6 @@ const differUnitOptions = [ | ||
193 | } | 209 | } |
194 | ] | 210 | ] |
195 | 211 | ||
196 | - | ||
197 | const isRange = computed(() => { | 212 | const isRange = computed(() => { |
198 | return props.optionData.componentInteractEventKey.endsWith('range') | 213 | return props.optionData.componentInteractEventKey.endsWith('range') |
199 | }) | 214 | }) |
@@ -206,8 +221,13 @@ const differUnitName = computed(() => { | @@ -206,8 +221,13 @@ const differUnitName = computed(() => { | ||
206 | return isRange.value ? '开始值偏移单位' : '偏移单位' | 221 | return isRange.value ? '开始值偏移单位' : '偏移单位' |
207 | }) | 222 | }) |
208 | 223 | ||
224 | +const startTs = ref(0) | ||
225 | +const endTs = ref(0) | ||
226 | + | ||
209 | const datePickerTypeUpdate = () => { | 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 | const defaultTypeUpdate = (v: string) => { | 233 | const defaultTypeUpdate = (v: string) => { |
@@ -220,9 +240,9 @@ const defaultTypeUpdate = (v: string) => { | @@ -220,9 +240,9 @@ const defaultTypeUpdate = (v: string) => { | ||
220 | } | 240 | } |
221 | 241 | ||
222 | const shortCutSelect = (value: number) => { | 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 | // shortCutSelect(24*60*60*1000)//默认近1天 | 247 | // shortCutSelect(24*60*60*1000)//默认近1天 |
228 | </script> | 248 | </script> |