Commit e128aa24b43e7902e518a94b19742ad866a6054c
1 parent
e268d6d0
fix(src/packages): 修改高德地图名字为设备分布,修改打包到线上,图片路径找不到
Showing
2 changed files
with
42 additions
and
38 deletions
| @@ -241,7 +241,8 @@ const MarkerOptions = [ | @@ -241,7 +241,8 @@ const MarkerOptions = [ | ||
| 241 | } | 241 | } |
| 242 | ] | 242 | ] |
| 243 | 243 | ||
| 244 | -/**通用函数封装 */ | 244 | +const iconMarkerValue = ref<string | null>('1.png') |
| 245 | + | ||
| 245 | const isHref = (url: string) => { | 246 | const isHref = (url: string) => { |
| 246 | try { | 247 | try { |
| 247 | new URL(url) | 248 | new URL(url) |
| @@ -250,26 +251,8 @@ const isHref = (url: string) => { | @@ -250,26 +251,8 @@ const isHref = (url: string) => { | ||
| 250 | return false | 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 | const iconMarkerOptions = computed(() => { | 256 | const iconMarkerOptions = computed(() => { |
| 274 | const pathList = import.meta.glob('./images/marker/*') | 257 | const pathList = import.meta.glob('./images/marker/*') |
| 275 | return Object.keys(pathList).map(item => { | 258 | return Object.keys(pathList).map(item => { |
| @@ -277,55 +260,76 @@ const iconMarkerOptions = computed(() => { | @@ -277,55 +260,76 @@ const iconMarkerOptions = computed(() => { | ||
| 277 | return { | 260 | return { |
| 278 | label: imgName, | 261 | label: imgName, |
| 279 | value: imgName | 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 | const selectHandle = (value: string) => { | 284 | const selectHandle = (value: string) => { |
| 290 | iconMarkerValue.value = value | 285 | iconMarkerValue.value = value |
| 291 | props.optionData.mapOptions.iconMarker = getMarkerImagePath(value) | 286 | props.optionData.mapOptions.iconMarker = getMarkerImagePath(value) |
| 292 | } | 287 | } |
| 293 | -/** */ | ||
| 294 | 288 | ||
| 295 | -/** 弹窗选择 */ | ||
| 296 | const mapSelectBorderValue = ref<string | null>('border01.png') | 289 | const mapSelectBorderValue = ref<string | null>('border01.png') |
| 297 | 290 | ||
| 298 | const needBorder = ['border01.png', 'border02.png', 'border03.png', 'border05.png', 'border07.png'] | 291 | const needBorder = ['border01.png', 'border02.png', 'border03.png', 'border05.png', 'border07.png'] |
| 299 | 292 | ||
| 300 | -// import.meta.glob 这里没有封装,不能通过传值传进去 | 293 | +// import.meta.glob 这个不能封装,必须是字符串,不能通过传值传进去 |
| 301 | const mapBorderOptions = computed(() => { | 294 | const mapBorderOptions = computed(() => { |
| 302 | const pathList = import.meta.glob('../../../../../../assets/images/chart/decorates/*') | 295 | const pathList = import.meta.glob('../../../../../../assets/images/chart/decorates/*') |
| 303 | return Object.keys(pathList) | 296 | return Object.keys(pathList) |
| 304 | .map(item => { | 297 | .map(item => { |
| 305 | const imgName = item.split('/').at(-1) as string | 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 | .filter(Boolean) as SelectOption[] | 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 | const selectMapBorderHandle = (value: string) => { | 326 | const selectMapBorderHandle = (value: string) => { |
| 322 | mapSelectBorderValue.value = value | 327 | mapSelectBorderValue.value = value |
| 323 | const toLowerValue = value.toLocaleLowerCase() | 328 | const toLowerValue = value.toLocaleLowerCase() |
| 324 | ;(props.optionData.mapOptions.mpBorderConfig as BaseSelectBorderIF) = { | 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 | onMounted(() => { | 334 | onMounted(() => { |
| 331 | iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string | 335 | iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string |
| @@ -8,7 +8,7 @@ export const OverrideMapAmapConfig: ConfigType = { | @@ -8,7 +8,7 @@ export const OverrideMapAmapConfig: ConfigType = { | ||
| 8 | key, | 8 | key, |
| 9 | chartKey, | 9 | chartKey, |
| 10 | conKey, | 10 | conKey, |
| 11 | - title: '高德地图', | 11 | + title: '设备分布', |
| 12 | category: ChatCategoryEnum.MAP, | 12 | category: ChatCategoryEnum.MAP, |
| 13 | categoryName: ChatCategoryEnumName.MAP, | 13 | categoryName: ChatCategoryEnumName.MAP, |
| 14 | package: PackagesCategoryEnum.CHARTS, | 14 | package: PackagesCategoryEnum.CHARTS, |