[Feat 0000] SVG风窗支持根据开度播放动画

src/views/vent/monitorManager/windowMonitor/components/windowDualSVG.vue

@@ -1321,6 +1321,7 @@
 <script setup lang="ts">
   import { onMounted, defineExpose } from 'vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
+  import _ from 'lodash';
 
   // 元素信息（常量数据，使用Map）
   const elementInfo = new Map([
@@ -2276,23 +2277,41 @@
 
   /** 根据SVG的使用场景播放动画 */
   function animate(data: any) {
+    console.log('debug data', data.OpenDegree, data.OpenDegree1, data.OpenDegree2);
     // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
-    if (data.OpenDegree || data.OpenDegree1) {
-      triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false);
-    } else {
-      triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
+    // 开度 / 最大开度 = 动画进度
+    if (data.OpenDegree) {
+      const progress = _.round(data.OpenDegree / 90, 2);
+      if (progress > 0) {
+        triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false, 3000, progress);
+      } else {
+        triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
+      }
     }
 
+    if (data.OpenDegree1) {
+      const progress = _.round(data.OpenDegree1 / 90, 2);
+      if (progress > 0) {
+        triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false, 3000, progress);
+      } else {
+        triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
+      }
+    }
     if (data.OpenDegree2) {
-      triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false);
-    } else {
-      triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], true);
+      const progress = _.round(data.OpenDegree2 / 90, 2);
+      if (progress > 0) {
+        triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false, 3000, progress);
+      } else {
+        triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], true);
+      }
     }
-
     // if (data.OpenDegree3) {
-    //   triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false);
-    // } else {
-    //   triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
+    //   const progress = _.round(data.OpenDegree3 / 90, 2);
+    //   if (progress > 0) {
+    //     triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false, 3000, progress);
+    //   } else {
+    //     triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
+    //   }
     // }
   }
 

src/views/vent/monitorManager/windowMonitor/components/windowSVG.vue

@@ -1146,6 +1146,7 @@
 <script setup lang="ts">
   import { onMounted, defineExpose } from 'vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
+  import _ from 'lodash';
 
   // 元素信息（常量数据，使用Map）
   const elementInfo = new Map([
@@ -1634,9 +1635,10 @@
   /** 根据SVG的使用场景播放动画 */
   function animate(data: any, maxarea) {
     // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
-    const isOpen = parseFloat(Math.max(parseFloat(data.forntArea) / parseFloat(maxarea), 1).toFixed(2));
-    if (isOpen > 0) {
-      triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false, 3000, isOpen);
+    // 当前面积 / 最大面积 = 风窗开度 = 动画进度
+    const progress = _.round(Math.max(parseFloat(data.forntArea) / parseFloat(maxarea), 1), 2);
+    if (progress > 0) {
+      triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false, 3000, progress);
     } else {
       triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], true);
     }