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 | 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 | ... | ... |