[Feat 0000] 修复了风窗SVG动画播放错误并添加了SVG根据风窗类型切换的功能

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

@@ -1633,10 +1633,10 @@
   });
 
   /** 根据SVG的使用场景播放动画 */
-  function animate(data: any, maxarea) {
+  function animate(data: any, maxarea = 90) {
     // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
     // 当前面积 / 最大面积 = 风窗开度 = 动画进度
-    const progress = _.round(Math.max(parseFloat(data.forntArea) / parseFloat(maxarea), 1), 2);
+    const progress = _.round(parseFloat(data.frontArea) / parseFloat(maxarea), 2);
     if (progress > 0) {
       triggerAnimation(['Chuang1_shanye_0_Layer0_0_FILL'], false, 3000, progress);
     } else {

src/views/vent/monitorManager/windowMonitor/index.vue

@@ -207,7 +207,7 @@
 <script setup lang="ts">
   import { message } from 'ant-design-vue';
   import DeviceEcharts from '../comment/DeviceEcharts.vue';
-  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, watch, nextTick, inject, unref } from 'vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, shallowRef, nextTick, inject, unref } from 'vue';
   import MonitorTable from '../comment/MonitorTable.vue';
   import HistoryTable from '../comment/HistoryTable.vue';
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
@@ -239,7 +239,7 @@
 
   const modelRef = ref();
   /** 模型对应的组件，根据实际情况分为二维三维 */
-  const modelComponent = getModelComponent(globalConfig.is2DModel, sysOrgCode);
+  const modelComponent = shallowRef(getModelComponent(globalConfig.is2DModel));
 
   const { currentRoute } = useRouter();
 
@@ -377,20 +377,25 @@
 
     const type = selectData.value.windowModal ? selectData.value.windowModal : selectData.value.nwindownum == 1 ? 'ddFc5' : 'sdFc1';
 
-    setModelType(type).then(() => {
-      addMonitorText(selectData.value);
-      playAnimation(selectRow, selectData.value.maxarea, true);
-      loading.value = false;
-    });
+    await setSVGModelType(type);
+    await setModelType(type);
+    addMonitorText(selectData.value);
+    playAnimation(selectRow, selectData.value.maxarea, true);
+    loading.value = false;
     await getCamera(selectRow.deviceID, playerRef.value);
   };
 
   // 判断前后窗的面积是否发生改变，如果改变则开启动画
   const playAnimation = (data, maxarea = 90, isFirst = false) => {
-    modelRef.value?.animate?.(data);
+    modelRef.value?.animate?.(data, maxarea);
     computePlay(data, maxarea, isFirst);
   };
 
+  function setSVGModelType(type) {
+    modelComponent.value = getModelComponent(globalConfig.is2DModel, type);
+    return nextTick();
+  }
+
   // 设置风窗面积
   const setArea = (flag) => {
     modalType.value = flag + '';

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

@@ -304,17 +304,51 @@ export const chartsColumns = [
   },
 ];
 
-export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: string) {
+const componentsCaches = new Map<string, any>();
+export function getModelComponent(is2DModel: boolean = false, type: string = '') {
   // @ts-ignore
   return defineAsyncComponent(() => {
     if (!is2DModel) return import('./components/entryThree.vue');
-    switch (sysOrgCode) {
-      // case '000000':
-      //   return import('./components/000000.vue');
-      // return import('./components/windowDualSVG.vue');
+
+    // 为了支持SVG组件切换时不闪烁，先行下载并缓存
+    if (!componentsCaches.has('windowSVG')) componentsCaches.set('windowSVG', import('./components/windowSVG.vue'));
+    if (!componentsCaches.has('windowDualSVG')) componentsCaches.set('windowDualSVG', import('./components/windowDualSVG.vue'));
+
+    switch (type) {
+      case 'sdFc1':
+        return componentsCaches.get('windowDualSVG');
+      case 'ddFc5':
+        return componentsCaches.get('windowSVG');
+      case 'ddFc6':
+        return componentsCaches.get('windowSVG');
+      case 'ddFc7':
+        return componentsCaches.get('windowSVG');
+      case 'ddFc8':
+        return componentsCaches.get('windowSVG');
+      case 'ddFc1':
+        return componentsCaches.get('windowSVG');
+      case 'ddFc2':
+        return componentsCaches.get('windowSVG');
+      case 'ddFc4':
+        return componentsCaches.get('windowSVG');
+      case 'sdFc3':
+        return componentsCaches.get('windowDualSVG');
+      case 'sdFc4':
+        return componentsCaches.get('windowDualSVG');
+      case 'sdFc2':
+        return componentsCaches.get('windowDualSVG');
+      case 'sdFc5':
+        return componentsCaches.get('windowDualSVG');
+      case 'threeFc8':
+        // 暂不支持，用单道的先
+        return componentsCaches.get('windowSVG');
+      case 'singleXkWindow':
+        return componentsCaches.get('windowSVG');
+      case 'sdFcZhq':
+        return componentsCaches.get('windowDualSVG');
       default:
-        // return import('./components/windowDualSVG.vue');
-        return import('./components/windowSVG.vue');
+        // return componentsCaches.get('windowSVG');
+        return componentsCaches.get('windowSVG');
     }
   });
 }