Commit 1dc4b8ec77fa5f86d7215f348a8c9a9daea7be15

Authored by xp.Huang
2 parents e268d6d0 5850144d

Merge branch 'ft' into 'main_dev'

fix(src/packages): 修改设备分布地图和3d地图,返回图标问题

See merge request yunteng/thingskit-view!135
... ... @@ -43,6 +43,9 @@ export const option = {
43 43 iconDistanceTop: 20,
44 44 drillingIn: false,
45 45 dataset: dataMaps,
  46 + saveClickRegion: {
  47 + level: ''
  48 + },
46 49 mapRegion: {
47 50 adcode: 'china',
48 51 showHainanIsLands: true,
... ...
... ... @@ -41,7 +41,7 @@ const toolBoxOption = ref({
41 41 top: 20,
42 42 feature: {
43 43 myFullButton: {
44   - show: true,
  44 + show: false,
45 45 title: '返回',
46 46 icon: iconStr.value,
47 47 iconStyle: {
... ... @@ -55,8 +55,34 @@ const toolBoxOption = ref({
55 55 watch(
56 56 () => props.chartConfig.option,
57 57 newData => {
58   - const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop } = newData
59   - toolBoxOption.value.feature.myFullButton.show = drillingIn
  58 + const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop, mapRegion } = newData
  59 + if (drillingIn && !newData.saveClickRegion.level) {
  60 + toolBoxOption.value.feature.myFullButton.show = !drillingIn
  61 + } else if (
  62 + drillingIn &&
  63 + newData.saveClickRegion.level === areaEnum.PROVINCE &&
  64 + mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
  65 + ) {
  66 + toolBoxOption.value.feature.myFullButton.show = drillingIn
  67 + } else if (
  68 + drillingIn &&
  69 + newData.saveClickRegion.level === areaEnum.COUNTRY &&
  70 + mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
  71 + ) {
  72 + toolBoxOption.value.feature.myFullButton.show = !drillingIn
  73 + } else if (
  74 + drillingIn &&
  75 + newData.saveClickRegion.level === areaEnum.CITY &&
  76 + mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
  77 + ) {
  78 + toolBoxOption.value.feature.myFullButton.show = drillingIn
  79 + } else if (
  80 + drillingIn &&
  81 + newData.saveClickRegion.level === areaEnum.PROVINCE &&
  82 + mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
  83 + ) {
  84 + toolBoxOption.value.feature.myFullButton.show = !drillingIn
  85 + }
60 86 toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
61 87 toolBoxOption.value.right = iconDistanceRight
62 88 toolBoxOption.value.top = iconDistanceTop
... ... @@ -89,6 +115,7 @@ const watchAdcode = async () => {
89 115 }
90 116 const exist = await getGeojson(saveAdcode)
91 117 const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
  118 + props.chartConfig.option.saveClickRegion.level = saveLevelStr.level
92 119 if (exist) {
93 120 //fix解决点击下钻返回后页面为空问题
94 121 props.chartConfig.option.mapRegion.adcode = adcode
... ... @@ -114,6 +141,7 @@ const handleMap3DClick = async (params: Recordable) => {
114 141 if (level === 'DISTRICT') return
115 142 if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
116 143 props.chartConfig.option.mapRegion.adcode = adcode
  144 + props.chartConfig.option.saveClickRegion.level = level
117 145 saveLevelStr.level = level
118 146 handleDataPoint(adcode)
119 147 saveHistoryParent.value.push({
... ... @@ -215,8 +243,18 @@ onMounted(() => {
215 243 const handleDataPoint = (newData: string | number) => {
216 244 if (newData === 'china') {
217 245 props.chartConfig.option.dataset = dataMaps
  246 + props.chartConfig.option.series.forEach((item: Recordable) => {
  247 + if (item.type === 'scatter3D') {
  248 + item.data = dataMaps
  249 + }
  250 + })
218 251 } else {
219 252 props.chartConfig.option.dataset = dataMaps.filter((item: dataPointI) => item.adcode === newData)
  253 + props.chartConfig.option.series.forEach((item: Recordable) => {
  254 + if (item.type === 'scatter3D') {
  255 + item.data = dataMaps.filter((item: dataPointI) => item.adcode === newData)
  256 + }
  257 + })
220 258 }
221 259 }
222 260
... ...
... ... @@ -241,7 +241,8 @@ const MarkerOptions = [
241 241 }
242 242 ]
243 243
244   -/**通用函数封装 */
  244 +const iconMarkerValue = ref<string | null>('1.png')
  245 +
245 246 const isHref = (url: string) => {
246 247 try {
247 248 new URL(url)
... ... @@ -250,26 +251,8 @@ const isHref = (url: string) => {
250 251 return false
251 252 }
252 253 }
253   -const renderCommonOption = (option: SelectOption, src: string) => {
254   - return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
255   - h(NImage, {
256   - width: 25,
257   - src,
258   - previewDisabled: true,
259   - style: { height: '25px' }
260   - } as Recordable),
261   - h(NEllipsis, null, () => option.label)
262   - ])
263   -}
264   -const getImagePath = (path: string, name: string) => {
265   - return isHref(name) ? name : new URL(`${path}/${name}`, import.meta.url).href
266   -}
267   -/** */
268   -
269   -/** 图标选择 */
270   -const iconMarkerValue = ref<string | null>('1.png')
271 254
272   -// import.meta.glob 这里没有封装,不能通过传值传进去
  255 +// import.meta.glob 这个不能封装,必须是字符串,不能通过传值传进去
273 256 const iconMarkerOptions = computed(() => {
274 257 const pathList = import.meta.glob('./images/marker/*')
275 258 return Object.keys(pathList).map(item => {
... ... @@ -277,55 +260,76 @@ const iconMarkerOptions = computed(() => {
277 260 return {
278 261 label: imgName,
279 262 value: imgName
280   - }
  263 + } as SelectOption
281 264 })
282 265 })
283 266 //
284 267
285   -const getMarkerImagePath = (name: string) => getImagePath('./images/marker', name)
  268 +const getMarkerImagePath = (name: string) => {
  269 + return isHref(name) ? name : new URL(`./images/marker/${name}`, import.meta.url).href
  270 +}
286 271
287   -const renderOption = (option: SelectOption) => renderCommonOption(option, getMarkerImagePath(option.value as string))
  272 +const renderOption = (option: SelectOption) => {
  273 + return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
  274 + h(NImage, {
  275 + width: 25,
  276 + src: getMarkerImagePath(option.value as string),
  277 + previewDisabled: true,
  278 + style: { height: '25px' }
  279 + } as Recordable),
  280 + h(NEllipsis, null, () => option.label)
  281 + ])
  282 +}
288 283
289 284 const selectHandle = (value: string) => {
290 285 iconMarkerValue.value = value
291 286 props.optionData.mapOptions.iconMarker = getMarkerImagePath(value)
292 287 }
293   -/** */
294 288
295   -/** 弹窗选择 */
296 289 const mapSelectBorderValue = ref<string | null>('border01.png')
297 290
298 291 const needBorder = ['border01.png', 'border02.png', 'border03.png', 'border05.png', 'border07.png']
299 292
300   -// import.meta.glob 这里没有封装,不能通过传值传进去
  293 +// import.meta.glob 这个不能封装,必须是字符串,不能通过传值传进去
301 294 const mapBorderOptions = computed(() => {
302 295 const pathList = import.meta.glob('../../../../../../assets/images/chart/decorates/*')
303 296 return Object.keys(pathList)
304 297 .map(item => {
305 298 const imgName = item.split('/').at(-1) as string
306   - if (!needBorder.includes(imgName)) return
307   - return {
308   - label: imgName,
309   - value: imgName
310   - } as SelectOption
  299 + if (needBorder.includes(imgName)) {
  300 + return {
  301 + label: imgName,
  302 + value: imgName
  303 + } as SelectOption
  304 + }
311 305 })
312 306 .filter(Boolean) as SelectOption[]
313 307 })
314 308 //
315 309
316   -const getMapBorderImagePath = (name: string) => getImagePath('../../../../../../assets/images/chart/decorates', name)
  310 +const getMapBorderImagePath = (name: string) => {
  311 + return isHref(name) ? name : new URL(`../../../../../../assets/images/chart/decorates/${name}`, import.meta.url).href
  312 +}
317 313
318   -const renderMapBorderOption = (option: SelectOption) =>
319   - renderCommonOption(option, getMapBorderImagePath(option.value as string))
  314 +const renderMapBorderOption = (option: SelectOption) => {
  315 + return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
  316 + h(NImage, {
  317 + width: 25,
  318 + src: getMapBorderImagePath(option.value as string),
  319 + previewDisabled: true,
  320 + style: { height: '25px' }
  321 + } as Recordable),
  322 + h(NEllipsis, null, () => option.label)
  323 + ])
  324 +}
320 325
321 326 const selectMapBorderHandle = (value: string) => {
322 327 mapSelectBorderValue.value = value
323 328 const toLowerValue = value.toLocaleLowerCase()
324 329 ;(props.optionData.mapOptions.mpBorderConfig as BaseSelectBorderIF) = {
325   - value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substring(1)?.split('.')[0]
326   - } //这里首字母转大写,动态引入时匹配对应目录也是大写字母开头,即components\Decorates\Borders\Border01
  330 + value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substr(1)?.split('.')[0]
  331 + }
327 332 }
328   -/** */
329 333
330 334 onMounted(() => {
331 335 iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string
... ...
... ... @@ -8,7 +8,7 @@ export const OverrideMapAmapConfig: ConfigType = {
8 8 key,
9 9 chartKey,
10 10 conKey,
11   - title: '高德地图',
  11 + title: '设备分布',
12 12 category: ChatCategoryEnum.MAP,
13 13 categoryName: ChatCategoryEnumName.MAP,
14 14 package: PackagesCategoryEnum.CHARTS,
... ...
... ... @@ -7,11 +7,11 @@ import dataJson from './data.json'
7 7
8 8 //省市区枚举
9 9 export const enum areaEnum {
10   - PROVINCE = 'PROVINCE',//省份
11   - CITY = 'CITY',//城市
12   - COUNTY = 'COUNTY',//县
13   - COUNTRY = 'COUNTRY',//国家
14   - TOWN = 'TOWN'//镇
  10 + PROVINCE = 'PROVINCE', //省份
  11 + CITY = 'CITY', //城市
  12 + COUNTY = 'COUNTY', //县
  13 + COUNTRY = 'COUNTRY', //国家
  14 + TOWN = 'TOWN' //镇
15 15 }
16 16 export const includes = []
17 17
... ... @@ -22,6 +22,9 @@ export const option = {
22 22 iconDistanceTop: 20,
23 23 drillingIn: false,
24 24 dataset: dataJson,
  25 + saveClickRegion: {
  26 + level: ''
  27 + },
25 28 mapRegion: {
26 29 adcode: 'china',
27 30 showHainanIsLands: true,
... ...
... ... @@ -74,7 +74,7 @@ const toolBoxOption = ref({
74 74 top: 20,
75 75 feature: {
76 76 myFullButton: {
77   - show: true,
  77 + show: false,
78 78 title: '返回',
79 79 icon: iconStr.value,
80 80 iconStyle: {
... ... @@ -88,22 +88,49 @@ const toolBoxOption = ref({
88 88 watch(
89 89 () => props.chartConfig.option,
90 90 newData => {
91   - const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop } = newData
92   - toolBoxOption.value.feature.myFullButton.show = drillingIn
  91 + const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop, mapRegion } = newData
  92 + if (drillingIn && !newData.saveClickRegion.level) {
  93 + toolBoxOption.value.feature.myFullButton.show = !drillingIn
  94 + } else if (
  95 + drillingIn &&
  96 + newData.saveClickRegion.level === areaEnum.PROVINCE &&
  97 + mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
  98 + ) {
  99 + toolBoxOption.value.feature.myFullButton.show = drillingIn
  100 + } else if (
  101 + drillingIn &&
  102 + newData.saveClickRegion.level === areaEnum.COUNTRY &&
  103 + mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
  104 + ) {
  105 + toolBoxOption.value.feature.myFullButton.show = !drillingIn
  106 + } else if (
  107 + drillingIn &&
  108 + newData.saveClickRegion.level === areaEnum.CITY &&
  109 + mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
  110 + ) {
  111 + toolBoxOption.value.feature.myFullButton.show = drillingIn
  112 + } else if (
  113 + drillingIn &&
  114 + newData.saveClickRegion.level === areaEnum.PROVINCE &&
  115 + mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
  116 + ) {
  117 + toolBoxOption.value.feature.myFullButton.show = !drillingIn
  118 + }
93 119 toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
94 120 toolBoxOption.value.right = iconDistanceRight
95 121 toolBoxOption.value.top = iconDistanceTop
  122 + vEchartsSetOption()
96 123 },
97 124 {
98   - deep: true
  125 + deep: true,
99 126 }
100 127 )
101   -
102 128 props.chartConfig.option = {
103 129 ...props.chartConfig.option,
104 130 ...{ toolbox: toolBoxOption.value }
105 131 }
106 132
  133 +
107 134 //地图点击返回 adcode=100000,名字必须是china
108 135 const watchAdcode = async () => {
109 136 if (props.chartConfig.option.drillingIn) {
... ... @@ -121,6 +148,7 @@ const watchAdcode = async () => {
121 148 }
122 149 await getGeojson(saveAdcode)
123 150 const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
  151 + props.chartConfig.option.saveClickRegion.level = saveLevelStr.level
124 152 props.chartConfig.option.geo.map = adcode
125 153 props.chartConfig.option.series.forEach((item: any) => {
126 154 if (item.type === 'map') item.map = adcode
... ... @@ -324,6 +352,7 @@ const handleVChartClick = async (params: any) => {
324 352 if (level === 'DISTRICT') return
325 353 if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
326 354 props.chartConfig.option.mapRegion.adcode = adcode
  355 + props.chartConfig.option.saveClickRegion.level = level
327 356 saveLevelStr.level = level
328 357 handleDataPoint(adcode)
329 358 saveHistoryParent.value.push({
... ...