feat(src/packages): 图表地图 高德地图新增标注物点击弹窗

@@ -5,6 +5,12 @@ import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
+export type dataExtraInfoType = typeof dataJson.markers[number]['extraInfo'] //data.json下的extraInfo类型
+
+export type dataJsonType = typeof dataJson //data.json类型
+
+export type dataJsonMarkersType = typeof dataJson.markers[number] //data.json markers类型
+
 export enum ThemeEnum {
   NORMAL = 'normal',
   DARK = 'dark',

 {
   "markers": [
     {
-      "name": "x",
+      "name": "模拟1",
       "value": 20,
       "position": [103.856504, 30.687278],
       "extraInfo": {
-        "tbDeviceId": "xxxxxxxxxxx",
-        "name": "xx",
-        "alias": "xx",
+        "tbDeviceId": "@xxxxxxxxxxx",
+        "name": "模拟1",
+        "alias": "模拟1",
         "organizationDTO": {
-          "name": "xx"
+          "name": "模拟1"
         },
         "deviceState": "INACTIVE",
         "deviceProfile": {
@@ -23,15 +23,15 @@
       }
     },
     {
-      "name": "xx",
+      "name": "模拟2",
       "value": 30,
       "position": [104.095368, 30.716787],
       "extraInfo": {
-        "tbDeviceId": "xxxxxxxxxxxxxxx",
-        "name": "xxx",
-        "alias": "xx",
+        "tbDeviceId": "@xxxxxxxxxxxxxxx",
+        "name": "模拟2",
+        "alias": "模拟2",
         "organizationDTO": {
-          "name": "xx"
+          "name": "模拟2"
         },
         "deviceState": "INACTIVE",
         "deviceProfile": {

@@ -8,10 +8,10 @@ import AMapLoader from '@amap/amap-jsapi-loader'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { MarkerEnum, ThemeEnum } from './config'
+import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType } from './config'
 import { isArray } from '@/utils'
 import djh from './images/djh.png'
-import online from './images/online1.png'
+import online from './images/online.png'
 import lx1 from './images/lx1.png'
 import { getDeviceActiveTime } from '@/api/external/common/index'
 import dayjs from 'dayjs'
@@ -39,6 +39,7 @@ let {
   marker
 } = toRefs(props.chartConfig.option.mapOptions)
 
+//官方没有高德地图api的ts，所以类型全用的any
 let mapIns: any = null
 let markers: any = []
 let AMapIns: any = null
@@ -64,7 +65,7 @@ const initMap = (newData: any) => {
         viewMode: viewMode.value, // 地图模式
         willReadFrequently: true
       })
-      dataHandle(props.chartConfig.option.dataset)
+      dataHandle(props.chartConfig.option.dataset) //处理地图标点
       let satellite = new AMap.TileLayer.Satellite()
       let roadNet = new AMap.TileLayer.RoadNet()
       if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
@@ -85,12 +86,14 @@ const initMap = (newData: any) => {
     })
 }
 
-const createInfoWindow = async (extraInfo: any) => {
+//创建信息弹窗
+const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
   try {
     const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId } = extraInfo
-    const res = await getDeviceActiveTime(tbDeviceId)
+    if (tbDeviceId.startsWith('@')) return //假的模拟数据则终止
+    const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
     let { lastUpdateTs } = res[0]
-    lastUpdateTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
+    const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
     return `
         <div style="width:15vw;height:18vh;background-color:white;">
          <div style="margin:0px 10px">
@@ -111,7 +114,9 @@ const createInfoWindow = async (extraInfo: any) => {
             设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}
           </div>
           <div style="margin-top:6px;">
-            ${deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'}时间：${lastUpdateTs}
+            ${
+              deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'
+            }时间：${lastUpdateFormatTs}
             </div>
             </div>
           </div>
@@ -121,7 +126,26 @@ const createInfoWindow = async (extraInfo: any) => {
   }
 }
 
-const dataHandle = (newData: any) => {
+//地图点击
+const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => {
+  markerInstance.setExtData({
+    extraInfo: markerItem.extraInfo
+  })
+  mapIns.add(markerInstance)
+  markerInstance.setLabel({
+    content: markerItem.extraInfo.alias || markerItem.extraInfo.name
+  })
+  markerInstance.on('click', async (e: any) => {
+    const { extraInfo } = e.target.getExtData()
+    let infoWindow = new AMapIns.InfoWindow({
+      content: await createInfoWindow(extraInfo),
+      offset: new AMapIns.Pixel(0, -50)
+    })
+    infoWindow.open(mapIns, e.target.getPosition())
+  })
+}
+
+const dataHandle = (newData: dataJsonType) => {
   if (!mapIns && !AMapIns) {
     initMap(props.chartConfig.option)
     return
@@ -132,54 +156,28 @@ const dataHandle = (newData: any) => {
     markers = []
     // 记录新标记
     if (mapMarkerType.value === MarkerEnum.MARKER) {
-      newData.markers.forEach((markerItem: any) => {
+      newData.markers.forEach((markerItem: dataJsonMarkersType) => {
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
           offset: new AMapIns.Pixel(-13, -30)
         })
-        // markers.push(markerInstance) 原作者这种方式添加，地图标注获取不到当前点击对象
+        // markers.push(markerInstance) 原作者这种方式添加，属于1.4.8版本的
         // markerInstance.setMap(mapIns)
-        markerInstance.setExtData({
-          extraInfo: markerItem.extraInfo
-        })
-        mapIns.add(markerInstance)
-        markerInstance.setLabel({
-          content: markerItem.extraInfo.alias || markerItem.extraInfo.name
-        })
-        markerInstance.on('click', async (e: any) => {
-          const { extraInfo } = e.target.getExtData()
-          let infoWindow = new AMapIns.InfoWindow({
-            content: await createInfoWindow(extraInfo),
-            offset: new AMapIns.Pixel(0, -50)
-          })
-          infoWindow.open(mapIns, e.target.getPosition())
-        })
+        mapClick(markerInstance, markerItem)
       })
     } else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) {
-      newData.markers.forEach((markerItem: any) => {
+      newData.markers.forEach((markerItem: dataJsonMarkersType) => {
         const markerInstance = new AMapIns.CircleMarker({
           center: [
             !markerItem.position[0] ? 0 : markerItem.position[0],
             !markerItem.position[1] ? 0 : markerItem.position[1]
           ],
-          radius: markerItem.value,
-          ...marker.value,
+          radius: markerItem.value, //圆圈半径大小
+          ...marker.value
         })
-        // markers.push(markerInstance) //原作者这种方式添加，地图标注获取不到当前点击对象
+        // markers.push(markerInstance) //原作者这种方式添加，属于1.4.8版本的
         // markerInstance.setMap(mapIns)
-        markerInstance.setExtData({
-          extraInfo: markerItem.extraInfo
-        })
-        mapIns.add(markerInstance)
-        markerInstance.on('click', async (e: any) => {
-          console.log(e)
-          const { extraInfo } = e.target.getExtData()
-          let infoWindow = new AMapIns.InfoWindow({
-            content: await createInfoWindow(extraInfo),
-            offset: new AMapIns.Pixel(0, -50)
-          })
-          infoWindow.open(mapIns, e.target.getPosition())
-        })
+        mapClick(markerInstance, markerItem)
       })
     }
   }