feat(src/packages): 优化高德地图标点弹窗和数据展示

@@ -235,6 +235,7 @@ const updateVChart = async (newData: SocketReceiveMessageType) => {
 }
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any, targetComponent: any) => {
+  props.chartConfig.option.queryCondition.timeRange=[targetComponent.requestParams.Params.startTs,targetComponent.requestParams.Params.endTs]
   //联动支持分组
   /**
    * 修复多个分组，然后下拉框联动，会影响另一个组件

@@ -90,9 +90,7 @@ export const option = {
     amapZindex: 11,
     typeMarker: '',
     mpBorderConfig: {
-      label: '弹窗边框1',
       value: 'Border01',
-      config: 'Border01'
     },
     marker: {
       fillColor: '#E98984FF',

@@ -92,7 +92,7 @@
     </setting-item-box>
     <setting-item-box name="弹窗选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
       <setting-item name="弹窗选择">
-        <NSelect
+        <!-- <NSelect
           size="small"
           placeholder="请选择您要使用的弹窗"
           style="width: 250px"
@@ -101,6 +101,17 @@
           @update:value="mapSelectBorderHandle"
           clearable
           filterable
+        /> -->
+        <NSelect
+          size="small"
+          placeholder="请选择您要使用的弹窗"
+          style="width: 250px"
+          :value="mapSelectBorderValue"
+          :options="mapBorderOptions"
+          :render-label="renderMapBorderOption"
+          clearable
+          filterable
+          @update:value="selectMapBorderHandle"
         />
       </setting-item>
     </setting-item-box>
@@ -238,74 +249,13 @@ const MarkerOptions = [
 onMounted(() => {
   props.optionData.mapOptions.typeMarker = getMarkerImagePath(props.optionData.mapOptions.typeMarker || 'position1.png')
   typeMarkerValue.value = props.optionData.mapOptions.typeMarker || 'position1.png'
-  mapSelectBorderValue.value = props.optionData.mapOptions.mpBorderConfig.value || '弹窗边框1'
+  mapSelectBorderValue.value =
+    `${props.optionData.mapOptions.mpBorderConfig.value.toLocaleLowerCase()}.png` || 'border01.png'
 })
 
 const typeMarkerValue = ref<string | null>('position1.png')
 
-const mapSelectBorderValue = ref<string | null>('Border01')
-
-const mapSelectBorderOption = reactive<{ option: BaseSelectBorderIF[] }>({
-  option: [
-    {
-      label: '弹窗边框1',
-      value: 'Border01'
-    },
-    {
-      label: '弹窗边框2',
-      value: 'Border02'
-    },
-    {
-      label: '弹窗边框3',
-      value: 'Border03'
-    },
-    {
-      label: '弹窗边框4',
-      value: 'Border04'
-    },
-    {
-      label: '弹窗边框5',
-      value: 'Border05'
-    },
-    {
-      label: '弹窗边框6',
-      value: 'Border06'
-    },
-    {
-      label: '弹窗边框7',
-      value: 'Border07'
-    },
-    {
-      label: '弹窗边框8',
-      value: 'Border08'
-    },
-    {
-      label: '弹窗边框9',
-      value: 'Border09'
-    },
-    {
-      label: '弹窗边框10',
-      value: 'Border10'
-    },
-    {
-      label: '弹窗边框11',
-      value: 'Border11'
-    },
-    {
-      label: '弹窗边框12',
-      value: 'Border12'
-    },
-    {
-      label: '弹窗边框13',
-      value: 'Border13'
-    }
-  ]
-})
-
-const mapSelectBorderHandle = (value: string, option: BaseSelectBorderIF) => {
-  mapSelectBorderValue.value = value
-  ;(props.optionData.mapOptions.mpBorderConfig as BaseSelectBorderIF) = { ...option }
-}
+const mapSelectBorderValue = ref<string | null>('border01.png')
 
 const isHref = (url: string) => {
   try {
@@ -349,4 +299,47 @@ const selectHandle = (value: string) => {
   typeMarkerValue.value = value
   props.optionData.mapOptions.typeMarker = getMarkerImagePath(value)
 }
+
+const needBorder = ['border01.png', 'border02.png', 'border03.png', 'border05.png', 'border07.png']
+
+// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
+const mapBorderOptions = computed(() => {
+  const pathList = import.meta.glob('../../../../../../assets/images/chart/decorates/*')
+  return Object.keys(pathList)
+    .map(item => {
+      const imgName = item.split('/').at(-1) as string
+      if (needBorder.includes(imgName)) {
+        return {
+          label: imgName,
+          value: imgName
+        } as SelectOption
+      }
+    })
+    .filter(Boolean) as SelectOption[]
+})
+//
+
+const getMapBorderImagePath = (name: string) => {
+  return isHref(name) ? name : new URL(`../../../../../../assets/images/chart/decorates/${name}`, import.meta.url).href
+}
+
+const renderMapBorderOption = (option: SelectOption) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 25,
+      src: getMapBorderImagePath(option.value as string),
+      previewDisabled: true,
+      style: { height: '25px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
+
+const selectMapBorderHandle = (value: string) => {
+  mapSelectBorderValue.value = value
+  const toLowerValue = value.toLocaleLowerCase()
+  ;(props.optionData.mapOptions.mpBorderConfig as BaseSelectBorderIF) = {
+    value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substr(1)?.split('.')[0]
+  }
+}
 </script>

@@ -105,6 +105,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
     let { lastUpdateTs } = res[0]
     const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
     //render方式渲染小组件里的边框组件
+    console.log(mpBorderConfig.value.value)
     const BorderInstance = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/index.vue`)
     const config = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/config.ts`)
     const BorderConfigInstance = new config.default()
@@ -115,7 +116,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
     }, 100)
     //
     return `
-        <div id="${id}" style="width:25vw;height:29vh;position:relative;top:30px">
+        <div id="${id}" style="width:25vw;height:29vh;position:relative;top:30px;">
          <div style="position: absolute;top: 52px;left: 105px;">
           <div style="display:flex;justify-content:space-between; margin:20px 0px;">
             <div style="width:12vw;text-overflow: ellipsis;overflow: hidden; word-break: break-all;white-space: nowrap;font-size:18px;font-weight:bold;color:white">${
@@ -273,6 +274,13 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   position: absolute;
   transform: scale(0.7);
   top: -10px;
+  /* opacity: 0,8; */
+  /* background-color: rgba(0, 0, 0, 0.1); */
+  background-color:rgba(255,255,255,0.1)
+}
+.amap-info-content .go-border-box svg {
+  /* background-color: rgba(0, 0, 0, 0.1); */
+  /* background-color: rgba(255, 255, 255, 0.8); */
 }
 </style>
 <style lang="scss" scoped>