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

@@ -88,6 +88,12 @@ export const option = {
     amapLon: 104.108689,
     amapLat: 30.66176,
     amapZindex: 11,
+    typeMarker: '',
+    mpBorderConfig: {
+      label: '弹窗边框1',
+      value: 'Border01',
+      config: 'Border01'
+    },
     marker: {
       fillColor: '#E98984FF',
       fillOpacity: 0.5,

@@ -71,19 +71,53 @@
       <setting-item name="类型">
         <n-select size="small" v-model:value="optionData.mapOptions.mapMarkerType" :options="MarkerOptions" />
       </setting-item>
-      <setting-item name="颜色">
+      <setting-item v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.CIRCLE_MARKER" name="颜色">
         <n-color-picker v-model:value="optionData.mapOptions.marker.fillColor" size="small"></n-color-picker>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="图标选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
+      <setting-item name="图标选择">
+        <NSelect
+          size="small"
+          placeholder="请选择您要使用的图标"
+          style="width: 250px"
+          :value="typeMarkerValue"
+          :options="typeMarkerOptions"
+          :render-label="renderOption"
+          clearable
+          filterable
+          @update:value="selectHandle"
+        />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="弹窗选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
+      <setting-item name="弹窗选择">
+        <NSelect
+          size="small"
+          placeholder="请选择您要使用的弹窗"
+          style="width: 250px"
+          :value="mapSelectBorderValue"
+          :options="mapSelectBorderOption.option"
+          @update:value="mapSelectBorderHandle"
+          clearable
+          filterable
+        />
+      </setting-item>
+    </setting-item-box>
   </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref, computed, h, onMounted, reactive } from 'vue'
 import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { NEllipsis, NImage, NSelect, NSpace, SelectOption } from 'naive-ui'
+
+interface BaseSelectBorderIF extends SelectOption {
+  config?: string
+}
 
-defineProps({
+const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
     required: true
@@ -187,10 +221,10 @@ const featuresOptions = [
 ]
 
 const MarkerOptions = [
-  {
-    value: MarkerEnum.CIRCLE_MARKER,
-    label: '圆形标点'
-  },
+  // {
+  //   value: MarkerEnum.CIRCLE_MARKER,
+  //   label: '圆形标点'
+  // },
   {
     value: MarkerEnum.MARKER,
     label: '定位标点'
@@ -200,4 +234,119 @@ const MarkerOptions = [
     label: '隐藏标点'
   }
 ]
+
+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'
+})
+
+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 isHref = (url: string) => {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
+const typeMarkerOptions = computed(() => {
+  const pathList = import.meta.glob('./images/marker/*')
+  return Object.keys(pathList).map(item => {
+    const imgName = item.split('/').at(-1)
+    return {
+      label: imgName,
+      value: imgName
+    } as SelectOption
+  })
+})
+//
+
+const getMarkerImagePath = (name: string) => {
+  return isHref(name) ? name : new URL(`./images/marker/${name}`, import.meta.url).href
+}
+
+const renderOption = (option: SelectOption) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 25,
+      src: getMarkerImagePath(option.value as string),
+      previewDisabled: true,
+      style: { height: '25px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
+
+const selectHandle = (value: string) => {
+  typeMarkerValue.value = value
+  props.optionData.mapOptions.typeMarker = getMarkerImagePath(value)
+}
 </script>

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, PropType, toRefs, watch } from 'vue'
+import { ref, PropType, toRefs, watch, render, h } from 'vue'
 import AMapLoader from '@amap/amap-jsapi-loader'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
@@ -16,6 +16,7 @@ import { isArray } from '@/utils'
 import djh from './images/djh.png'
 import online from './images/online.png'
 import lx1 from './images/lx1.png'
+import positionImg from './images/marker/position1.png'
 import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index'
 import dayjs from 'dayjs'
 import SearchBox from './components/SearchBox.vue'
@@ -44,7 +45,9 @@ let {
   viewMode,
   pitch,
   skyColor,
-  marker
+  marker,
+  typeMarker,
+  mpBorderConfig
 } = toRefs(props.chartConfig.option.mapOptions)
 
 //官方没有高德地图api的ts，所以类型全用的any
@@ -84,8 +87,7 @@ const initMap = (newData: any) => {
           `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
         )
       }
-      //点击地图任意地方关闭infoWindow窗体
-      mapIns.on('click', () => {
+      mapIns.on('mouseout', () => {
         mapIns.clearInfoWindow()
       })
     })
@@ -102,26 +104,38 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
     const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
     let { lastUpdateTs } = res[0]
     const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
+    //render方式渲染小组件里的边框组件
+    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()
+    const id = Date.now().toString()
+    setTimeout(() => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      render(h(BorderInstance.default, { chartConfig: BorderConfigInstance }), document.getElementById(id)!)
+    }, 100)
+    //
     return `
-        <div style="width:15vw;height:18vh;background-color:white;">
-         <div style="margin:0px 10px">
+        <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="font-size:16px;font-weight:bold">${alias || name}</div>
+            <div style="width:12vw;text-overflow: ellipsis;overflow: hidden; word-break: break-all;white-space: nowrap;font-size:18px;font-weight:bold;color:white">${
+              alias || name
+            }</div>
             ${
               deviceState === 'INACTIVE'
-                ? `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${djh}" class="mr-1">待激活</div>`
+                ? `<div style="display:flex;align-items:center;color:#999999"><img style="width:15px;height:15px;margin-right:5px" src="${djh}">待激活</div>`
                 : deviceState === 'ONLINE'
-                ? `<div style="display:flex;align-items:center; ">
-                <img style="width:15px;height:15px"  src="${online}"  class="mr-1">在线</div>`
-                : `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${lx1}" class="mr-1">离线</div>`
+                ? `<div style="display:flex;align-items:center;color:green">
+                <img style="width:15px;height:15px;margin-right:5px"  src="${online}"  class="mr-1">在线</div>`
+                : `<div style="display:flex;align-items:center;color:#F5222D"><img style="width:15px;height:15px;margin-right:5px" src="${lx1}">离线</div>`
             }
           </div>
-          <div>所属组织：${organizationDTO.name}</div>
-          <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
-          <div style="margin-top:6px;">
+          <div style="color:white;">所属组织：${organizationDTO.name}</div>
+          <div style="margin-top:6px;color:white">接入协议：${deviceProfile.transportType}</div>
+          <div style="margin-top:6px;color:white">
             设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}
           </div>
-          <div style="margin-top:6px;">
+          <div style="margin-top:6px;color:white">
             ${
               deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'
             }时间：${lastUpdateFormatTs}
@@ -153,23 +167,23 @@ const handleSearchParams = async (searchPage: any, params: any) => {
   }
 }
 
-//地图点击
+//地图鼠标hover
 const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => {
   markerInstance.setExtData({
     extraInfo: markerItem.extraInfo
   })
-  markerInstance.setLabel({
-    content: markerItem.extraInfo.alias || markerItem.extraInfo.name
-  })
-  markerInstance.on('click', async (e: any) => {
+  markerInstance.on('mouseover', async (e: any) => {
     const { extraInfo } = e.target.getExtData()
     if (extraInfo.tbDeviceId.startsWith('@')) return //假的模拟数据则终止弹窗
     let infoWindow = new AMapIns.InfoWindow({
       content: await createInfoWindow(extraInfo),
-      offset: new AMapIns.Pixel(0, -50)
+      offset: new AMapIns.Pixel(3, -30)
     })
     infoWindow.open(mapIns, e.target.getPosition())
   })
+  markerInstance.on('mouseout', () => {
+    mapIns.clearInfoWindow()
+  })
 }
 
 const dataHandle = (newData: dataJsonType) => {
@@ -186,7 +200,8 @@ const dataHandle = (newData: dataJsonType) => {
       newData.markers.forEach((markerItem: dataJsonMarkersType) => {
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
-          offset: new AMapIns.Pixel(-13, -30)
+          offset: new AMapIns.Pixel(-13, -30),
+          icon: typeMarker.value || positionImg
         })
         // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
         // markerInstance.setMap(mapIns)
@@ -244,6 +259,22 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 })
 </script>
 
+<style>
+.amap-info-outer {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+.amap-info-close {
+  display: none !important;
+}
+.amap-info-content {
+  overflow: hidden !important;
+}
+.amap-info-content .go-border-box {
+  position: absolute;
+  transform: scale(0.7);
+  top: -10px;
+}
+</style>
 <style lang="scss" scoped>
 .chart-amap {
   position: relative;