feat(src/packages/): 高德地图新增标点点击显示弹窗信息

@@ -46,6 +46,7 @@ export const getPlatformInfo = () => defHttp.get({ url: Api.PLATFORM })
 export const getConfigurationList = (params: object) => {
   return defHttp.get({ url: `${Api.CONFIGURATION}`, params })
 }
+
 //组态设置是否公开或私有
 export const setConfigurationIsShare = (params: string,isShare:boolean,data:object) => {
   return defHttp.post({
@@ -53,3 +54,15 @@ export const setConfigurationIsShare = (params: string,isShare:boolean,data:obje
     data
   })
 }
+
+// 获取设备状态，在线 or 离线时间
+export const getDeviceActiveTime = (entityId: string) => {
+  return defHttp.get(
+    {
+      url: `/plugins/telemetry/DEVICE/${entityId}/values/attributes?keys=active`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
\ No newline at end of file

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideMapAmapConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export enum ThemeEnum {
+  NORMAL = 'normal',
+  DARK = 'dark',
+  LIGHT = 'light',
+  WHITES_MOKE = 'whitesmoke',
+  FRESH = 'fresh',
+  GREY = 'grey',
+  GRAFFITI = 'graffiti',
+  MACARON = 'macaron',
+  BLUE = 'blue',
+  DARKBLUE = 'darkblue',
+  WINE = 'wine',
+  WEIXIN = 'tileLayer'
+}
+
+export enum LangEnum {
+  ZH_CN = 'zh_cn',
+  EN = 'en',
+  ZH_EN = 'zh_en'
+}
+
+export enum ViewModeEnum {
+  PLANE = '2D',
+  STEREOSCOPIC = '3D'
+}
+
+export enum FeaturesEnum {
+  BG = 'bg',
+  POINT = 'point',
+  ROAD = 'road',
+  BUILDING = 'building'
+}
+
+export enum MarkerEnum {
+  // 圆圈
+  CIRCLE_MARKER = 'CircleMarker',
+  // 定位标点
+  MARKER = 'Marker',
+  // 暂无
+  NONE = 'none'
+}
+
+export const option = {
+  dataset: dataJson,
+  mapOptions: {
+    pitch: 60,
+    skyColor: '#53A9DE',
+    amapKey: 'd5f3e16589dbecae64d05fe90e2ba4f2',
+    amapStyleKey: ThemeEnum.DARK,
+    amapStyleKeyCustom: '',
+    amapLon: 104.108689,
+    amapLat: 30.66176,
+    amapZindex: 11,
+    marker: {
+      fillColor: '#E98984FF',
+      fillOpacity: 0.5,
+      strokeColor: 'white',
+      strokeWeight: 2,
+      strokeOpacity: 0.5,
+      zIndex: 10,
+      bubble: true,
+      cursor: 'pointer',
+      clickable: true
+    },
+    mapMarkerType: MarkerEnum.MARKER,
+    viewMode: ViewModeEnum.PLANE,
+    lang: LangEnum.ZH_CN,
+    features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideMapAmapConfig.key
+  public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideMapAmapConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="基础" :expanded="true">
+    <setting-item-box name="语言类型" :alone="true">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.mapOptions.lang" :options="langOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="Key" :alone="true">
+      <setting-item name="请务必使用自己的高德应用 key">
+        <n-input v-model:value="optionData.mapOptions.amapKey" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="自定义地图样式ID" :alone="true">
+      <setting-item>
+        <n-input size="small" v-model:value="optionData.mapOptions.amapStyleKeyCustom" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="地图" :expanded="true">
+    <setting-item-box name="主题">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内容" :alone="true">
+      <n-checkbox-group v-model:value="optionData.mapOptions.features">
+        <n-space item-style="display: flex;">
+          <n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
+        </n-space>
+      </n-checkbox-group>
+    </setting-item-box>
+    <setting-item-box name="位置">
+      <setting-item name="经度">
+        <n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
+          <template #suffix>°</template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="纬度">
+        <n-input-number v-model:value="optionData.mapOptions.amapLat" :show-button="false" size="small">
+          <template #suffix>°</template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="初始缩放">
+        <n-input-number v-model:value="optionData.mapOptions.amapZindex" :min="0" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="模式" :alone="true">
+      <setting-item>
+        <n-radio-group v-model:value="optionData.mapOptions.viewMode" name="radiogroup">
+          <n-space>
+            <n-radio v-for="song in viewModeOptions" :key="song.value" :value="song.value">
+              {{ song.label }}
+            </n-radio>
+          </n-space>
+        </n-radio-group>
+      </setting-item>
+    </setting-item-box>
+    <template v-if="optionData.mapOptions.viewMode === '3D'">
+      <setting-item-box>
+        <setting-item name="天空色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.mapOptions.skyColor"></n-color-picker>
+        </setting-item>
+        <setting-item name="俯仰角">
+          <n-input-number v-model:value="optionData.mapOptions.pitch" :min="0" :max="83" size="small"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+    </template>
+  </collapse-item>
+  <collapse-item name="标记" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select size="small" v-model:value="optionData.mapOptions.mapMarkerType" :options="MarkerOptions" />
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker v-model:value="optionData.mapOptions.marker.fillColor" size="small"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const themeOptions = [
+  {
+    value: ThemeEnum.NORMAL,
+    label: '标准'
+  },
+  {
+    value: ThemeEnum.DARK,
+    label: '幻影黑'
+  },
+  {
+    value: ThemeEnum.LIGHT,
+    label: '月光银'
+  },
+  {
+    value: ThemeEnum.WHITES_MOKE,
+    label: '远山黛'
+  },
+  {
+    value: ThemeEnum.FRESH,
+    label: '草色青'
+  },
+  {
+    value: ThemeEnum.GREY,
+    label: '雅士灰'
+  },
+  {
+    value: ThemeEnum.GRAFFITI,
+    label: '涂鸦'
+  },
+  {
+    value: ThemeEnum.MACARON,
+    label: '马卡龙'
+  },
+  {
+    value: ThemeEnum.BLUE,
+    label: '靛青蓝'
+  },
+  {
+    value: ThemeEnum.DARKBLUE,
+    label: '极夜蓝'
+  },
+  {
+    value: ThemeEnum.WINE,
+    label: '酱籽'
+  },
+  {
+    value: ThemeEnum.WEIXIN,
+    label: '卫星'
+  }
+]
+
+const langOptions = [
+  {
+    value: LangEnum.ZH_CN,
+    label: '中文简体'
+  },
+  {
+    value: LangEnum.EN,
+    label: '英文'
+  },
+  {
+    value: LangEnum.ZH_EN,
+    label: '中英文对照'
+  }
+]
+
+const viewModeOptions = [
+  {
+    value: ViewModeEnum.PLANE,
+    label: '2D'
+  },
+  {
+    value: ViewModeEnum.STEREOSCOPIC,
+    label: '3D'
+  }
+]
+
+const featuresOptions = [
+  {
+    value: FeaturesEnum.BG,
+    label: '显示地图背景'
+  },
+  {
+    value: FeaturesEnum.POINT,
+    label: '显示标识'
+  },
+  {
+    value: FeaturesEnum.ROAD,
+    label: '显示道路'
+  },
+  {
+    value: FeaturesEnum.BUILDING,
+    label: '显示建筑'
+  }
+]
+
+const MarkerOptions = [
+  {
+    value: MarkerEnum.CIRCLE_MARKER,
+    label: '圆形标点'
+  },
+  {
+    value: MarkerEnum.MARKER,
+    label: '定位标点'
+  },
+  {
+    value: MarkerEnum.NONE,
+    label: '隐藏标点'
+  }
+]
+</script>

+{
+  "markers": [
+    {
+      "name": "x",
+      "value": 20,
+      "position": [103.856504, 30.687278],
+      "extraInfo": {
+        "tbDeviceId": "xxxxxxxxxxx",
+        "name": "xx",
+        "alias": "xx",
+        "organizationDTO": {
+          "name": "xx"
+        },
+        "deviceState": "INACTIVE",
+        "deviceProfile": {
+          "transportType": "MQTT"
+        },
+        "deviceInfo": {
+          "address": "四川省",
+          "longitude": 103.856504,
+          "latitude": 30.687278
+        }
+      }
+    },
+    {
+      "name": "xx",
+      "value": 30,
+      "position": [104.095368, 30.716787],
+      "extraInfo": {
+        "tbDeviceId": "xxxxxxxxxxxxxxx",
+        "name": "xxx",
+        "alias": "xx",
+        "organizationDTO": {
+          "name": "xx"
+        },
+        "deviceState": "INACTIVE",
+        "deviceProfile": {
+          "transportType": "TCP"
+        },
+        "deviceInfo": {
+          "address": "四川省",
+          "longitude": 104.095368,
+          "latitude": 30.716787
+        }
+      }
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideMapAmap', true)
+
+export const OverrideMapAmapConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '高德地图',
+  category: ChatCategoryEnum.MAP,
+  categoryName: ChatCategoryEnumName.MAP,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'map_amap.png'
+}

+<template>
+  <div ref="vChartRef"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, toRefs, watch } from 'vue'
+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 { isArray } from '@/utils'
+import djh from './images/djh.png'
+import online from './images/online1.png'
+import lx1 from './images/lx1.png'
+import { getDeviceActiveTime } from '@/api/external/common/index'
+import dayjs from 'dayjs'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+let {
+  amapKey,
+  amapStyleKey,
+  amapLon,
+  amapLat,
+  amapZindex,
+  mapMarkerType,
+  lang,
+  amapStyleKeyCustom,
+  features,
+  viewMode,
+  pitch,
+  skyColor,
+  marker
+} = toRefs(props.chartConfig.option.mapOptions)
+
+let mapIns: any = null
+let markers: any = []
+let AMapIns: any = null
+const vChartRef = ref<HTMLElement>()
+
+const initMap = (newData: any) => {
+  // 初始化
+  AMapLoader.load({
+    key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
+  })
+    .then(AMap => {
+      AMapIns = AMap
+      mapIns = new AMap.Map(vChartRef.value, {
+        resizeEnable: true,
+        zoom: amapZindex.value, // 地图显示的缩放级别
+        center: [amapLon.value, amapLat.value],
+        lang: lang.value,
+        features: features.value,
+        pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
+        skyColor: skyColor.value,
+        viewMode: viewMode.value, // 地图模式
+        willReadFrequently: true
+      })
+      dataHandle(props.chartConfig.option.dataset)
+      let satellite = new AMap.TileLayer.Satellite()
+      let roadNet = new AMap.TileLayer.RoadNet()
+      if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
+        mapIns.add([satellite, roadNet])
+      } else {
+        mapIns.remove([satellite, roadNet])
+        mapIns.setMapStyle(
+          `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
+        )
+      }
+      //点击地图任意地方关闭infoWindow窗体
+      mapIns.on('click', () => {
+        mapIns.clearInfoWindow()
+      })
+    })
+    .catch(e => {
+      console.error(e)
+    })
+}
+
+const createInfoWindow = async (extraInfo: any) => {
+  try {
+    const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId } = extraInfo
+    const res = await getDeviceActiveTime(tbDeviceId)
+    let { lastUpdateTs } = res[0]
+    lastUpdateTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
+    return `
+        <div style="width:15vw;height:18vh;background-color:white;">
+         <div style="margin:0px 10px">
+          <div style="display:flex;justify-content:space-between; margin:20px 0px;">
+            <div style="font-size:16px;font-weight:bold">${alias || name}</div>
+            ${
+              deviceState === 'INACTIVE'
+                ? `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${djh}" class="mr-1">待激活</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>
+          <div>所属组织：${organizationDTO.name}</div>
+          <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
+          <div style="margin-top:6px;">
+            设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}
+          </div>
+          <div style="margin-top:6px;">
+            ${deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'}时间：${lastUpdateTs}
+            </div>
+            </div>
+          </div>
+          `
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+const dataHandle = (newData: any) => {
+  if (!mapIns && !AMapIns) {
+    initMap(props.chartConfig.option)
+    return
+  }
+  if (isArray(newData.markers)) {
+    // 先清除旧标记
+    mapIns.remove(markers)
+    markers = []
+    // 记录新标记
+    if (mapMarkerType.value === MarkerEnum.MARKER) {
+      newData.markers.forEach((markerItem: any) => {
+        const markerInstance = new AMapIns.Marker({
+          position: [markerItem.position[0], markerItem.position[1]],
+          offset: new AMapIns.Pixel(-13, -30)
+        })
+        // markers.push(markerInstance) 原作者这种方式添加，地图标注获取不到当前点击对象
+        // 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())
+        })
+      })
+    } else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) {
+      newData.markers.forEach((markerItem: any) => {
+        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,
+        })
+        // markers.push(markerInstance) //原作者这种方式添加，地图标注获取不到当前点击对象
+        // 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())
+        })
+      })
+    }
+  }
+}
+
+const stopWatch = watch(
+  () => props.chartConfig.option.mapOptions,
+  option => {
+    initMap(option)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  stopWatch()
+  dataHandle(newData)
+})
+</script>

@@ -21,6 +21,7 @@ import { OverrideLineGradientsConfig } from '@/packages/components/external/Char
 import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mores/OverrideProcess'
 import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle'
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
+import { OverrideMapAmapConfig } from '@/packages/components/external/Charts/Maps/OverrideMapAmap'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
 import { OverrideWaterPoloConfig } from '@/packages/components/external/Charts/Mores/OverrideWaterPolo'
 import { OverrideDialConfig } from '@/packages/components/external/Charts/Mores/OverrideDial'
@@ -104,6 +105,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)//重写图表下的native ui
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)//重写图表下的饼图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)//重写图表下的地图
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapAmapConfig)//重写图表下的高德地图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)//重写图表下的水球图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideDialConfig)//重写图表下的表盘
   //

@@ -16,7 +16,8 @@ export const hideAsideComponentsObj = {
     'VPieCircle' //饼图-环形
   ],
   Maps: [
-    'VMapBase' //地图(可选省份)
+    'VMapBase', //地图(可选省份)
+    'VMapAmap', //高德地图
   ],
   Mores: [
     'VProcess', //NaiveUI-进度
@@ -45,6 +46,7 @@ export const hideAsideComponentsObj = {
     'VLineGradients', //双折线渐变面积图
     'VPieCircle', //饼图-环形
     'VMapBase', //地图(可选省份)
+    'VMapAmap',//高德地图
     'VProcess', //NaiveUI-进度
     'VTextGradient', //渐变文字
     'VTextBarrage', //弹幕文字