[Feat 0000] 风窗注氮单道、双道以及调节风窗二维模型动画对接

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

@@ -1558,7 +1558,6 @@
 <script setup lang="ts">
   import { onMounted } from 'vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
-  import { round } from 'lodash-es';
 
   const props = withDefaults(
     defineProps<{
@@ -1741,52 +1740,15 @@
   });
 
   /** 根据SVG的使用场景播放动画 */
-  function animate(data: any) {
-    // 在SVG图片中，找到需要动起来的元素，并填入id即可控制该元素的动画（如有）
-    // 开度 / 最大开度 = 动画进度
-    if (data.OpenDegree) {
-      // 前门（画面左边的门）
-      const progress = round(data.OpenDegree / 90, 2);
-      if (progress > 0) {
-        triggerAnimation([`auto_anim_0${props.identify}`, `auto_anim_1${props.identify}`], false, {
-          progress,
-        });
-      } else {
-        triggerAnimation([`auto_anim_0${props.identify}`, `auto_anim_1${props.identify}`], true);
-      }
-    }
-
-    if (data.OpenDegree1) {
-      // 前门（画面左边的门）
-      const progress = round(data.OpenDegree1 / 90, 2);
-      if (progress > 0) {
-        triggerAnimation([`auto_anim_0${props.identify}`, `auto_anim_1${props.identify}`], false, {
-          progress,
-        });
-      } else {
-        triggerAnimation([`auto_anim_0${props.identify}`, `auto_anim_1${props.identify}`], true);
-      }
-    }
-    if (data.OpenDegree2) {
-      // 后门（画面右边的门）
-      const progress = round(data.OpenDegree2 / 90, 2);
-      if (progress > 0) {
-        triggerAnimation([`auto_anim_2${props.identify}`, `auto_anim_3${props.identify}`], false, {
-          progress,
-        });
-      } else {
-        triggerAnimation([`auto_anim_2${props.identify}`, `auto_anim_3${props.identify}`], true);
-      }
-    }
-    // if (data.OpenDegree3) {
-    //   const progress = round(data.OpenDegree3 / 90, 2);
-    //   if (progress > 0) {
-    //     triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], false, {
-    // progress});
-    //   } else {
-    //     triggerAnimation(['Chuang2_shanye_0_Layer0_0_FILL'], true);
-    //   }
-    // }
+  function animate(data: any, maxarea) {
+    // 前门（画面左边的门）
+    triggerAnimation([`auto_anim_0${props.identify}`], false, { progress: data.frontArea / maxarea });
+    // 前门（画面左边的门）
+    triggerAnimation([`auto_anim_1${props.identify}`], false, { progress: data.rearArea / maxarea });
+    // 后门（画面右边的门）
+    triggerAnimation([`auto_anim_2${props.identify}`], false, { progress: data.frontArea3 / maxarea });
+    // 后门（画面右边的门）
+    triggerAnimation([`auto_anim_3${props.identify}`], false, { progress: data.frontArea4 / maxarea });
   }
 
   // 导出方法以便外部调用

src/views/vent/monitorManager/windowMonitor/window.data.ts

@@ -309,49 +309,58 @@ export const chartsColumns = [
 const componentsCaches = new Map<string, any>();
 export function getModelComponent(is2DModel: boolean = false, type: string = '') {
   if (!is2DModel) return EntryThree;
+
+  const getComponent = (name) => {
+    if (!componentsCaches.has(name)) {
+      componentsCaches.set(name, import(`./components/${name}.vue`));
+    }
+    return componentsCaches.get(name);
+  };
   // @ts-ignore
   return defineAsyncComponent(() => {
     // 为了支持SVG组件切换时不闪烁，先行下载并缓存
-    if (!componentsCaches.has('windowSVG')) componentsCaches.set('windowSVG', import('./components/windowSVG.vue'));
-    if (!componentsCaches.has('windowDualSVG')) componentsCaches.set('windowDualSVG', import('./components/windowDualSVG.vue'));
-    if (!componentsCaches.has('windowDoorSVG')) componentsCaches.set('windowDoorSVG', import('./components/windowDoorSVG.vue')); //带小门风窗
-    if (!componentsCaches.has('SmallWindowSVG')) componentsCaches.set('SmallWindowSVG', import('./components/SmallWindowSVG.vue')); //小窗风窗
-    if (!componentsCaches.has('windowDualAdjustSVG')) componentsCaches.set('windowDualAdjustSVG', import('./components/windowDualAdjustSVG.vue')); //小窗风窗
+    // if (!componentsCaches.has('windowSVG')) componentsCaches.set('windowSVG', import('./components/windowSVG.vue'));
+    // if (!componentsCaches.has('windowDualSVG')) componentsCaches.set('windowDualSVG', import('./components/windowDualSVG.vue'));
+    // if (!componentsCaches.has('windowDoorSVG')) componentsCaches.set('windowDoorSVG', import('./components/windowDoorSVG.vue')); //带小门风窗
+    // if (!componentsCaches.has('SmallWindowSVG')) componentsCaches.set('SmallWindowSVG', import('./components/SmallWindowSVG.vue')); //小窗风窗
+    // if (!componentsCaches.has('windowDualAdjustSVG')) componentsCaches.set('windowDualAdjustSVG', import('./components/windowDualAdjustSVG.vue')); //小窗风窗
+    // if (!componentsCaches.has('windowZDSVG')) componentsCaches.set('windowZDSVG', import('./components/windowZDSVG.vue')); //小窗风窗
+    // if (!componentsCaches.has('windowDualZDSVG')) componentsCaches.set('windowDualZDSVG', import('./components/windowDualZDSVG.vue')); //小窗风窗
     switch (type) {
       case 'sdFc1':
-        return componentsCaches.get('windowDualSVG');
+        return getComponent('windowDualSVG');
       case 'ddFc5':
-        return componentsCaches.get('windowSVG');
+        return getComponent('windowSVG');
       case 'ddFc6':
-        return componentsCaches.get('windowSVG');
+        return getComponent('windowSVG');
       case 'ddFc7':
-        return componentsCaches.get('windowSVG');
+        return getComponent('windowSVG');
       case 'ddFc8':
-        return componentsCaches.get('windowSVG');
+        return getComponent('windowSVG');
       case 'ddFc1':
-        return componentsCaches.get('windowSVG');
+        return getComponent('windowZDSVG');
       case 'ddFc2':
-        return componentsCaches.get('windowSVG');
+        return getComponent('windowSVG');
       case 'ddFc4':
-        return componentsCaches.get('windowSVG');
+        return getComponent('windowSVG');
       case 'sdFc3':
-        return componentsCaches.get('windowDualSVG');
+        return getComponent('windowDualSVG');
       case 'sdFc4':
-        return componentsCaches.get('windowDualSVG');
+        return getComponent('windowDualAdjustSVG');
       case 'sdFc2':
-        return componentsCaches.get('windowDualSVG');
+        return getComponent('windowDualSVG');
       case 'sdFc5':
-        return componentsCaches.get('windowDualSVG');
+        return getComponent('windowDualZDSVG');
       case 'threeFc8':
         // 暂不支持，用单道的先
-        return componentsCaches.get('windowSVG');
+        return getComponent('windowSVG');
       case 'singleXkWindow':
-        return componentsCaches.get('windowSVG');
+        return getComponent('windowSVG');
       case 'sdFcZhq':
-        return componentsCaches.get('windowDualSVG');
+        return getComponent('windowDualSVG');
       default:
-        // return componentsCaches.get('windowSVG');
-        return componentsCaches.get('windowSVG');
+        // return getComponent('windowSVG');
+        return getComponent('windowSVG');
     }
   });
 }