Commit 1dc4b8ec77fa5f86d7215f348a8c9a9daea7be15
Merge branch 'ft' into 'main_dev'
fix(src/packages): 修改设备分布地图和3d地图,返回图标问题 See merge request yunteng/thingskit-view!135
Showing
6 changed files
with
128 additions
and
51 deletions
| ... | ... | @@ -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 | ... | ... |
| ... | ... | @@ -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({ | ... | ... |