Commit e128aa24b43e7902e518a94b19742ad866a6054c

Authored by fengwotao
1 parent e268d6d0

fix(src/packages): 修改高德地图名字为设备分布,修改打包到线上,图片路径找不到

@@ -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,