feat(src/packages): 设备分布修改弹窗图标显示

@@ -118,7 +118,7 @@ export const option = {
     amapLon: 104.108689,
     amapLat: 30.66176,
     amapZindex: 11,
-    iconMarker: defaultImg,
+    iconMarker: '1.png',
     mpBorderConfig: {
       value: 'Border01'
     },

@@ -118,6 +118,7 @@ import { PropType, ref, computed, h, onMounted } 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'
+import { getUrlBase64 } from '@/utils/external/imageUrlToBase64'
 
 interface BaseSelectBorderIF extends SelectOption {
   config?: string
@@ -283,7 +284,9 @@ const renderOption = (option: SelectOption) => {
 
 const selectHandle = (value: string) => {
   iconMarkerValue.value = value
-  props.optionData.mapOptions.iconMarker = getMarkerImagePath(value)
+   getUrlBase64(getMarkerImagePath(value),'png',(baseEncodeText: string)=>{
+    props.optionData.mapOptions.iconMarker =baseEncodeText
+  })
 }
 
 const mapSelectBorderValue = ref<string | null>('border01.png')
@@ -332,9 +335,9 @@ const selectMapBorderHandle = (value: string) => {
 }
 
 onMounted(() => {
-  iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string
-  props.optionData.mapOptions.iconMarker = getMarkerImagePath(iconMarkerValue.value)
-  console.log(getMarkerImagePath(iconMarkerValue.value));
+  getUrlBase64(getMarkerImagePath(props.optionData.mapOptions.iconMarker),'png',(baseEncodeText: string)=>{
+    props.optionData.mapOptions.iconMarker = baseEncodeText
+  })
   mapSelectBorderValue.value = `${props.optionData.mapOptions.mpBorderConfig.value?.toLocaleLowerCase()}.png`
 })
 </script>

@@ -12,15 +12,15 @@ import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { MarkerEnum, ThemeEnum, dataExtraInfoType, dataJsonType, dataJsonMarkersType, devicePartInfoInterface } from './config'
 import { isArray } from '@/utils'
-import djh from './images/djh.png'
+import inactive from './images/inactive.png'
 import online from './images/online.png'
-import lx1 from './images/lx1.png'
-import onLineImg from '../../../../../../assets/external/marker/3.png'
-import listImg from './images/list.png'
+import offline from './images/offline.png'
+import listView from './images/list.png'
 import { getDeviceActiveTime } from '@/api/external/common/index'
 import dayjs from 'dayjs'
 import DeviceLatestTable from './components/DeviceLatestTable.vue'
 import { getDeviceLatest, getProfileAttrs } from '@/api/external/common'
+import { NButton } from 'naive-ui'
 
 const props = defineProps({
   chartConfig: {
@@ -127,11 +127,11 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
       render(h(BorderInstance.default, { chartConfig: BorderConfigInstance }), document.getElementById(id)!)
     }, 100)
     //
-    const textOverflow = `width:20rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;`
-    const textOverflowFontBold = `width:12rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;font-size:17px;font-weight:bold;`
+    const textOverflow = `width:16rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;`
+    const textOverflowFontBold = `width:12rem;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;font-size:15px;font-weight:bold;`
     const deviceStateContainer = `display:flex;justify-content:space-between;align-items:center;`
     const deviceStateImg = `width:1.2rem;height:1.2rem;`
-    const deviceStateText = `margin-left:0.6rem;font-size:17px;font-weight:bold;`
+    const deviceStateText = `margin-left:0.6rem;font-weight:bold;`
     return `
     <div id="${id}" style="width:30rem;">
       <div style="display:flex;flex-direction:column;margin:3.5rem 5.5rem 2rem 6.5rem;position:relative;">
@@ -140,24 +140,24 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
           ${
             deviceState === 'INACTIVE'
             ? `<div style="${deviceStateContainer}">
-                <img style="${deviceStateImg}" src="${djh}"/>
+                <img onclick="handleOpenDrawer()" alt="最新数据" style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
+                <img style="${deviceStateImg};margin-left:0.3rem" src="${inactive}"/>
                 <span style="${deviceStateText}">待激活</span>
                </div>`
             : deviceState === 'ONLINE'
             ?  `<div style="${deviceStateContainer}">
-                <img style="${deviceStateImg}" src="${online}"/>
+                <img onclick="handleOpenDrawer()" alt="最新数据"  style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
+                <img style="${deviceStateImg};margin-left:0.3rem" src="${online}"/>
                 <span style="${deviceStateText}">在线</span>
                </div>`
             : `<div style="${deviceStateContainer}">
-                <img style="${deviceStateImg}" src="${lx1}"/>
+                <img onclick="handleOpenDrawer()" alt="最新数据"  style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
+                <img style="${deviceStateImg};margin-left:0.3rem" src="${offline}"/>
                 <span style="${deviceStateText}">离线</span>
                </div>`
           }
         </div>
-        <div style="display:flex;justify-content:flex-end;cursor:pointer;" onclick="handleOpenDrawer()">
-          <img style="${deviceStateImg};position:relative;top:0.7rem" src="${listImg}"/>
-        </div>
-        <div style="display:flex;flex-direction:column;justify-content:space-between;color:white;margin-top:1rem;gap:0.8rem;">
+        <div style="display:flex;flex-direction:column;justify-content:space-between;color:white;margin-top:1rem;gap:0.95rem;">
           <div style="${textOverflow}">所属组织：${organizationDTO.name}</div>
           <div style="${textOverflow}">接入协议：${deviceProfile.transportType}</div>
           <div style="${textOverflow}">设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}</div>
@@ -220,11 +220,10 @@ const dataHandle = (newData: dataJsonType) => {
     // 记录新标记
     if (mapMarkerType.value === MarkerEnum.MARKER) {
       newData.markers.forEach((markerItem: dataJsonMarkersType) => {
-        const { deviceState } = markerItem.extraInfo
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
-          offset: new AMapIns.Pixel(-13, -30),
-          icon: deviceState === 'ONLINE' ? onLineImg : iconMarker.value
+          offset: new AMapIns.Pixel(-13, 5),
+          icon: iconMarker.value
         })
         // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
         // markerInstance.setMap(mapIns)
@@ -286,6 +285,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 
 <style>
 /**去除高德地图原生弹窗 */
+.amap-info-outer, .amap-menu-outer {
+  box-shadow: 0 1px 2px rgba(0,0,0,0)!important;
+}
 .amap-info-outer {
   background-color: rgba(0, 0, 0, 0) !important;
 }

+/**
+ *
+ * @param url 图片路径
+ * @param ext 图片格式
+ * @param callback 结果回调
+ * 类型暂定any
+ */
+export  function getUrlBase64(url: any, ext: any, callback: any) {
+    let canvas = document.createElement("canvas") as any;   //创建canvas DOM元素
+    const ctx = canvas.getContext("2d") as any;
+    const img = new Image;
+    img.crossOrigin = 'Anonymous';
+    img.src = url;
+    img.onload = function () {
+        canvas.height = 35; //指定画板的高度,自定义
+        canvas.width = 35; //指定画板的宽度，自定义
+        ctx.drawImage(img, 0, 0, 35, 35); //参数可自定义
+        const dataURL = canvas.toDataURL("image/" + ext);
+        callback.call(this, dataURL); //回掉函数获取Base64编码
+        canvas = null;
+    };
+}
\ No newline at end of file