Merge branch 'fix/save-thumb' into 'main_dev'

fix: 修复设备分布地图保存缩略图时为空白地图 See merge request yunteng/thingskit-view!142

Merge branch 'fix/save-thumb' into 'main_dev'
fix: 修复设备分布地图保存缩略图时为空白地图 See merge request yunteng/thingskit-view!142
xp.Huang
2 parents 1a5d33bf d1a523e0
Showing 2 changed files with 37 additions and 24 deletions
src/packages/components/Charts/Maps/MapAmap/index.vue
src/packages/components/external/Charts/Maps/OverrideMapAmap/index.vue
--- a/src/packages/components/Charts/Maps/MapAmap/index.vue
View file @436214d
+++ b/src/packages/components/Charts/Maps/MapAmap/index.vue
View file @436214d
@@ -56,7 +56,10 @@ const initMap = (newData: any) => {
         pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
         skyColor: skyColor.value,
         viewMode: viewMode.value, // 地图模式
-        willReadFrequently: true
+        willReadFrequently: true,
+        WebGLParams: {
+          preserveDrawingBuffer: true,
+        }
       })
       dataHandle(props.chartConfig.option.dataset)
       let satellite = new AMap.TileLayer.Satellite()
@@ -68,7 +71,7 @@ const initMap = (newData: any) => {
         mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
       }
     })
-    .catch(e => {})
+    .catch(e => { })
 }
 const dataHandle = (newData: any) => {
--- a/src/packages/components/external/Charts/Maps/OverrideMapAmap/index.vue
View file @436214d
+++ b/src/packages/components/external/Charts/Maps/OverrideMapAmap/index.vue
View file @436214d
@@ -5,7 +5,7 @@
 </template>
 <script setup lang="ts">
-import { ref, PropType, toRefs, watch, render, h, onMounted, onUnmounted, reactive} from 'vue'
+import { ref, PropType, toRefs, watch, render, h, onMounted, onUnmounted, reactive } from 'vue'
 import AMapLoader from '@amap/amap-jsapi-loader'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
@@ -74,7 +74,10 @@ const initMap = (newData: any) => {
         pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
         skyColor: skyColor.value,
         viewMode: viewMode.value, // 地图模式
-        willReadFrequently: true
+        willReadFrequently: true,
+        WebGLParams: {
+          preserveDrawingBuffer: true,
+        }
       })
       dataHandle(props.chartConfig.option.dataset) //处理地图标点
       let satellite = new AMap.TileLayer.Satellite()
@@ -99,10 +102,10 @@ const initMap = (newData: any) => {
 //携带设备的tbDeviceId和别名或者名称
 const devicePartInfo = reactive<devicePartInfoInterface>({
-  tbDeviceId:'',
-  name:'',
-  alias:'',
-  deviceProfileId:'',
+  tbDeviceId: '',
+  name: '',
+  alias: '',
+  deviceProfileId: '',
 })
 //创建信息弹窗
@@ -137,25 +140,24 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
       <div style="display:flex;flex-direction:column;margin:3.5rem 5.5rem 2rem 6.5rem;position:relative;">
         <div style="display:flex;justify-content:space-between;align-items:center;color:white;">
           <span style="${textOverflowFontBold}">${alias || name}</span>
-          ${
-            deviceState === 'INACTIVE'
-            ? `<div style="${deviceStateContainer}">
+          ${deviceState === 'INACTIVE'
+        ? `<div style="${deviceStateContainer}">
                 <img onclick="handleOpenDrawer()" title="最新数据" 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}">
+        : deviceState === 'ONLINE'
+          ? `<div style="${deviceStateContainer}">
                 <img onclick="handleOpenDrawer()" title="最新数据"  style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
                 <img style="${deviceStateImg};margin-left:0.3rem" src="${online}"/>
                 <span style="${deviceStateText}">在线</span>
                </div>`
-            : `<div style="${deviceStateContainer}">
+          : `<div style="${deviceStateContainer}">
                 <img onclick="handleOpenDrawer()" title="最新数据"  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;flex-direction:column;justify-content:space-between;color:white;margin-top:1rem;gap:0.95rem;">
           <div style="${textOverflow}">所属组织：${organizationDTO.name}</div>
@@ -176,16 +178,16 @@ const handleOpenDrawer = async () => {
   deviceLatestTableRef.value?.setDrawerTitle(devicePartInfo.alias || devicePartInfo.name)
   if (!devicePartInfo.tbDeviceId) return
   const resp = await getDeviceLatest(devicePartInfo.tbDeviceId)
-  const respGetAttrs = await getProfileAttrs({deviceProfileId: devicePartInfo.deviceProfileId})
-  deviceLatestTableRef.value?.setValue(resp,respGetAttrs)
+  const respGetAttrs = await getProfileAttrs({ deviceProfileId: devicePartInfo.deviceProfileId })
+  deviceLatestTableRef.value?.setValue(resp, respGetAttrs)
 }
 onMounted(() => {
-    (window as any).handleOpenDrawer = handleOpenDrawer;
+  (window as any).handleOpenDrawer = handleOpenDrawer;
 });
 onUnmounted(() => {
-    (window as any).handleOpenDrawer = null;
+  (window as any).handleOpenDrawer = null;
 });
 //地图鼠标hover
@@ -225,9 +227,10 @@ const dataHandle = (newData: dataJsonType) => {
           offset: new AMapIns.Pixel(-13, 5),
           icon: iconMarker.value
         })
-        // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
-        // markerInstance.setMap(mapIns)
-        mapIns.add(markerInstance)
+        // 原作者这种方式添加，属于JS API 1.4.8版本的
+        markers.push(markerInstance)
+        markerInstance.setMap(mapIns)
+        // mapIns.add(markerInstance)
         mapClick(markerInstance, markerItem)
       })
     } else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) {
@@ -285,18 +288,23 @@ 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,
+.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;
 }
+
 .amap-info-close {
   display: none !important;
 }
+
 .amap-info-content {
   overflow: hidden !important;
 }
+
 /**去除高德地图原生弹窗*/
 .amap-info-content .go-border-box {
   position: absolute;
@@ -304,6 +312,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   top: 0;
   z-index: -100;
 }
+
 .amap-info-content .go-border-box svg {
   background-color: v-bind(bgColor);
 }
@@ -311,6 +320,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 <style lang="scss" scoped>
 .chart-amap {
   position: relative;
+
   .search-box {
     cursor: pointer;
     position: absolute;