feat: 修复gd地图无法生成缩略图的bug

src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue

@@ -91,31 +91,35 @@
         </g>
       </g>
     </svg>
-    <img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>
+    <!-- img标签出来的图不完整 所以换background-url background-reapt object-fit: contain不支持 -->
+<!--    <img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>-->
+    <div id="img" :style="{backgroundImage: `url(${gdMap.propValue})`, transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></div>
     <div :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top">
-      <svg
+      <div
         v-for="(item, i) in point"
         :key="i"
-        xmlns="http://www.w3.org/2000/svg"
+        style="position: absolute;"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
+        :style="{top: `${pxToPercentTop(item.style.top + 20, 911)}`,left: `${pxToPercentLeft(item.style.left - 230, 1400)}`,}"
-        style="position: absolute;outline: none;width: 22px;height: 22px;cursor: pointer;"
-        @click="pointJump(item)"
-        :style="{
-          top: `${pxToPercentTop(item.style.top + 20, 911)}`,
-          left: `${pxToPercentLeft(item.style.left - 220, 1400)}`,
-        }"
       >
-        <g transform="translate(0, 0) scale(1, 1)">
+        <!-- svg加绝对定位时 四个方位都要写全 只写left top就不行 -->
-        <g>
+        <svg
-          <circle cx="11" cy="11" r="6.5" style="fill:#4dca59;opacity:0.5;isolation:isolate"></circle>
+          xmlns="http://www.w3.org/2000/svg"
-          <path d="M11,5a6,6,0,1,1-6,6,6,6,0,0,1,6-6m0-1a7,7,0,1,0,7,7A7,7,0,0,0,11,4Z" style="fill:#4dca59"></path>
+          xmlns:xlink="http://www.w3.org/1999/xlink"
-          <g style="opacity:0.5">
+          @click="pointJump(item)"
-            <path d="M11,1A10,10,0,1,1,1,11,10,10,0,0,1,11,1m0-1A11,11,0,1,0,22,11,11,11,0,0,0,11,0Z" style="fill:#4dca59"></path>
+          style="cursor:pointer;outline: none;width: 22px;height: 22px;"
+        >
+          <g transform="translate(0, 0) scale(1, 1)">
+          <g>
+            <circle cx="11" cy="11" r="6.5" style="fill:#4dca59;opacity:0.5;isolation:isolate"></circle>
+            <path d="M11,5a6,6,0,1,1-6,6,6,6,0,0,1,6-6m0-1a7,7,0,1,0,7,7A7,7,0,0,0,11,4Z" style="fill:#4dca59"></path>
+            <g style="opacity:0.5">
+              <path d="M11,1A10,10,0,1,1,1,11,10,10,0,0,1,11,1m0-1A11,11,0,1,0,22,11,11,11,0,0,0,11,0Z" style="fill:#4dca59"></path>
+            </g>
+            <circle cx="11" cy="11" r="3" style="fill:#4dca59"></circle>
           </g>
-          <circle cx="11" cy="11" r="3" style="fill:#4dca59"></circle>
         </g>
-      </g>
+        </svg>
-      </svg>
+      </div>
       <div
         v-for="(item, i) in text"
         :key="i"

src/packages/components/CustomComponents/CustomComponents/RealTimeAlarmStatistics/Svg.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="box">
+  <div class="box" ref="box">
-    <img class="scaner" src="@/assets/customComponents/RealTimeAlarmStatistics/scanner.png" alt="">
+    <img class="scaner" :style="{width: shorterSide, height: shorterSide}" src="@/assets/customComponents/RealTimeAlarmStatistics/scanner.png" alt="">
     <svg v-show="alarmLevelsLength === 5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
       <g>
         <g>
@@ -511,19 +511,34 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, computed } from 'vue'
+import { toRefs, computed, onMounted, onUnmounted, ref } from 'vue'
+import { ResizeObserverELE } from '@/utils/aboutHtml2Canvas'
 const props = defineProps(['urgentName', 'seriousName', 'importantName', 'commonName', 'eventName', 'alarmMonitorData', 'alarmLevels'])
 const { urgentName, seriousName, importantName, commonName, eventName, alarmMonitorData, alarmLevels } = toRefs(props)
 
 const alarmLevelsLength = computed(() => {
   return alarmLevels!.value.length
 })
+
+let shorterSide = ref('50px')
+const box = ref(null)
+
+const observer = ResizeObserverELE((w, h) => {
+  shorterSide.value = `${w > h ? h : w}px`
+})
+
+onMounted(() => {
+  observer.observe(box.value!);
+})
+onUnmounted(() => {
+  observer.disconnect();
+})
 </script>
 
 <style lang="scss" scoped>
 @keyframes rotate {
-  from { transform: translateY(-50%) scale(0.71) rotate(0)}
+  from { transform: translate(-50%, -50%) scale(0.71) rotate(0)}
-  to { transform: translateY(-50%) scale(0.71) rotate(360deg) }
+  to { transform: translate(-50%, -50%) scale(0.71) rotate(360deg) }
 }
 .box{
   position: relative;
@@ -532,18 +547,19 @@ const alarmLevelsLength = computed(() => {
     height: 100%;
     width: 100%;
     position: absolute;
-    top: 50%;
+    //top: 50%;
-    transform: translateY(-50%);
+    //transform: translateY(-50%);
     z-index: 2;
   }
   .scaner{
-    object-fit: contain;
+    // html2canvas不支持这个属性  解决方法:直接设置宽高
+    //object-fit: contain;
     height: 100%;
     width: 100%;
     position: absolute;
     top: 50%;
+    left: 50%;
     animation: rotate linear 5s infinite;
-    width: 100%;
     z-index: 3;
     //height: 100%;
   }

src/utils/aboutHtml2Canvas.ts

@@ -0,0 +1,11 @@
+import { throttle } from 'lodash'
+
+// 监听元素的宽高变化
+export const ResizeObserverELE = (callback = (w:number, h:number) => {}) => {
+    return new ResizeObserver(throttle((entries) => {
+        for (let entry of entries) {
+            const { width:w, height:h } = entry.contentRect;
+            callback(w, h)
+        }
+    }, 200));
+}

src/utils/index.ts

@@ -7,4 +7,5 @@ export * from '@/utils/plugin'
 export * from '@/utils/components'
 export * from '@/utils/type'
 export * from '@/utils/file'
-export * from '@/utils/http'
+export * from '@/utils/http'
+export * from '@/utils/aboutHtml2Canvas'