[Feat 0000] 风窗SVG动画开发以及整体实现改进

src/views/vent/monitorManager/gateMonitor/components/entryThree.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+    <a-spin :spinning="loading" />
+    <div id="deviceDetail" class="device-detail">
+      <div id="deviceCard" class="device-card" style="z-index: -1; position: absolute">
+        <div class="title">KJ-980-F矿用本安型监控分站</div>
+        <div class="detail-box">
+          <div class="left-box"></div>
+          <div class="right-box">
+            <div><span class="detail-title">规格型号：</span> <span>KJ-980-F</span></div>
+            <div
+              ><span class="detail-title">技术参数：</span>
+              <span
+                >380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+  defineProps<{ loading: boolean }>();
+</script>

src/views/vent/monitorManager/gateMonitor/components/gateSVG.vue

@@ -8,6 +8,7 @@
     y="0px"
     width="1536px"
     height="100%"
+    style="margin-left: calc(50% - 768px)"
     viewBox="0 0 1920 1080"
   >
     <defs>
@@ -1117,13 +1118,7 @@
       </g>
     </g>
     <g transform="matrix( 1, 0, 0, 1, 10.3,1.4) " />
-    <g
-      transform="matrix( 1, 0, 0, 1, 920.85,570.6) "
-      :class="{
-        ___R_0_Layer0_0_FILL_animate: !manager.___R_0_Layer0_0_FILL,
-        ___R_0_Layer0_0_FILL_animate_reverse: manager.___R_0_Layer0_0_FILL,
-      }"
-    >
+    <g transform="matrix( 1, 0, 0, 1, 920.85,570.6) " data-anim-id="anim____R_0_Layer0_0_FILL_0">
       <g transform="matrix( 1, 0, 0, 1, 0,0) ">
         <use xlink:href="#___R_0_Layer0_0_FILL" />
       </g>
@@ -1134,13 +1129,7 @@
         <use xlink:href="#___0_Layer0_0_1_STROKES" />
       </g>
     </g>
-    <g
-      transform="matrix( 1, 0, 0, 1, 874.05,582.8) "
-      :class="{
-        ___L_0_Layer0_0_FILL_animate: !manager.___L_0_Layer0_0_FILL,
-        ___L_0_Layer0_0_FILL_animate_reverse: manager.___L_0_Layer0_0_FILL,
-      }"
-    >
+    <g transform="matrix( 1, 0, 0, 1, 874.05,582.8) " data-anim-id="anim____L_0_Layer0_0_FILL_0">
       <g transform="matrix( 1, 0, 0, 1, 0,0) ">
         <use xlink:href="#___L_0_Layer0_0_FILL" />
       </g>
@@ -1149,217 +1138,154 @@
 </template>
 
 <script setup lang="ts">
-  defineProps<{
+  import { watch, onMounted, defineExpose, defineProps } from 'vue';
+
+  const props = defineProps<{
     manager: Record<string, boolean>;
   }>();
-</script>
 
-<style scoped>
-  @keyframes L0Layer00FILL {
-    0% {
-      transform: matrix(1, 0, 0, 1, 874.05, 582.8);
-    }
-    3% {
-      transform: matrix(1.0739898681640625, 0.12255859375, 0, 1, 875.85, 585.75);
-    }
-    7% {
-      transform: matrix(1.081298828125, 0.137237548828125, 0, 1, 876, 586.15);
-    }
-    10% {
-      transform: matrix(1.0883636474609375, 0.1521148681640625, 0, 1, 876.2, 586.5);
-    }
-    14% {
-      transform: matrix(1.0952606201171875, 0.167205810546875, 0, 1, 876.35, 586.8);
-    }
-    17% {
-      transform: matrix(1.1019439697265625, 0.1824951171875, 0, 1, 876.5, 587.2);
-    }
-    21% {
-      transform: matrix(1.1084136962890625, 0.1979827880859375, 0, 1, 876.65, 587.55);
-    }
-    24% {
-      transform: matrix(1.114654541015625, 0.2136688232421875, 0, 1, 876.9, 587.95);
-    }
-    28% {
-      transform: matrix(1.120697021484375, 0.229522705078125, 0, 1, 876.95, 588.35);
-    }
-    31% {
-      transform: matrix(1.126495361328125, 0.245574951171875, 0, 1, 877.1, 588.7);
-    }
-    34% {
-      transform: matrix(1.1320648193359375, 0.2617950439453125, 0, 1, 877.25, 589.1);
-    }
-    38% {
-      transform: matrix(1.0088958740234375, 0.012725830078125, 0, 1, 874.25, 583.1);
-    }
-    41% {
-      transform: matrix(1.137420654296875, 0.2782135009765625, 0, 1, 877.45, 589.5);
-    }
-    45% {
-      transform: matrix(1.14251708984375, 0.2947998046875, 0, 1, 877.5, 589.9);
-    }
-    48% {
-      transform: matrix(1.1473846435546875, 0.3115692138671875, 0, 1, 877.65, 590.3);
-    }
-    52% {
-      transform: matrix(1.152008056640625, 0.3284912109375, 0, 1, 877.8, 590.75);
-    }
-    55% {
-      transform: matrix(1.1563873291015625, 0.3455810546875, 0, 1, 877.8, 591.15);
-    }
-    59% {
-      transform: matrix(1.1605224609375, 0.3628387451171875, 0, 1, 877.95, 591.55);
-    }
-    62% {
-      transform: matrix(1.1644134521484375, 0.3802642822265625, 0, 1, 878.1, 592);
-    }
-    66% {
-      transform: matrix(1.1680450439453125, 0.3978271484375, 0, 1, 878.1, 592.4);
-    }
-    69% {
-      transform: matrix(1.1714019775390625, 0.415557861328125, 0, 1, 878.2, 592.8);
-    }
-    72% {
-      transform: matrix(1.1744842529296875, 0.4334259033203125, 0, 1, 878.3, 593.25);
-    }
-    76% {
-      transform: matrix(1.0176544189453125, 0.0256805419921875, 0, 1, 874.5, 583.4);
-    }
-    79% {
-      transform: matrix(1.177337646484375, 0.4514617919921875, 0, 1, 878.25, 593.55);
-    }
-    83% {
-      transform: matrix(1.0262298583984375, 0.0388641357421875, 0, 1, 874.7, 583.7);
-    }
-    86% {
-      transform: matrix(1.0346527099609375, 0.0522918701171875, 0, 1, 874.85, 584.05);
-    }
-    90% {
-      transform: matrix(1.0428924560546875, 0.0659027099609375, 0, 1, 875.1, 584.4);
-    }
-    93% {
-      transform: matrix(1.0509490966796875, 0.0797576904296875, 0, 1, 875.3, 584.7);
-    }
-    97% {
-      transform: matrix(1.0588226318359375, 0.09381103515625, 0, 1, 875.45, 585);
-    }
-    100% {
-      transform: matrix(1.066497802734375, 0.1080780029296875, 0, 1, 875.65, 585.45);
-    }
-  }
-  .___L_0_Layer0_0_FILL_animate {
-    transition: transform 3s;
-    transform: matrix(1.066497802734375, 0.1080780029296875, 0, 1, 875.65, 585.45);
-    /*animation: L0Layer00FILL 3s forwards;*/
-  }
+  // 存储所有动画元素（不在模板中使用，不需要ref）
+  const animElements = new Map<string, HTMLElement>();
 
-  .___L_0_Layer0_0_FILL_animate_reverse {
-    transition: transform 3s;
-    transform: matrix(1, 0, 0, 1, 874.05, 582.8);
-    /*animation: L0Layer00FILL 3s forwards reverse;*/
-  }
+  // 元素信息（常量数据，使用Map）
+  const elementInfo = new Map([
+    [
+      'anim____L_0_Layer0_0_FILL_0',
+      {
+        key: '___L_0_Layer0_0_FILL',
+        initialTransform: 'matrix( 1, 0, 0, 1, 874.05,582.8) ',
+        transforms: [
+          'matrix( 1, 0, 0, 1, 874.05,582.8) ',
+          'matrix( 1.0739898681640625, 0.12255859375, 0, 1, 875.85,585.75) ',
+          'matrix( 1.081298828125, 0.137237548828125, 0, 1, 876,586.15) ',
+          'matrix( 1.0883636474609375, 0.1521148681640625, 0, 1, 876.2,586.5) ',
+          'matrix( 1.0952606201171875, 0.167205810546875, 0, 1, 876.35,586.8) ',
+          'matrix( 1.1019439697265625, 0.1824951171875, 0, 1, 876.5,587.2) ',
+          'matrix( 1.1084136962890625, 0.1979827880859375, 0, 1, 876.65,587.55) ',
+          'matrix( 1.114654541015625, 0.2136688232421875, 0, 1, 876.9,587.95) ',
+          'matrix( 1.120697021484375, 0.229522705078125, 0, 1, 876.95,588.35) ',
+          'matrix( 1.126495361328125, 0.245574951171875, 0, 1, 877.1,588.7) ',
+          'matrix( 1.1320648193359375, 0.2617950439453125, 0, 1, 877.25,589.1) ',
+          'matrix( 1.0088958740234375, 0.012725830078125, 0, 1, 874.25,583.1) ',
+          'matrix( 1.137420654296875, 0.2782135009765625, 0, 1, 877.45,589.5) ',
+          'matrix( 1.14251708984375, 0.2947998046875, 0, 1, 877.5,589.9) ',
+          'matrix( 1.1473846435546875, 0.3115692138671875, 0, 1, 877.65,590.3) ',
+          'matrix( 1.152008056640625, 0.3284912109375, 0, 1, 877.8,590.75) ',
+          'matrix( 1.1563873291015625, 0.3455810546875, 0, 1, 877.8,591.15) ',
+          'matrix( 1.1605224609375, 0.3628387451171875, 0, 1, 877.95,591.55) ',
+          'matrix( 1.1644134521484375, 0.3802642822265625, 0, 1, 878.1,592) ',
+          'matrix( 1.1680450439453125, 0.3978271484375, 0, 1, 878.1,592.4) ',
+          'matrix( 1.1714019775390625, 0.415557861328125, 0, 1, 878.2,592.8) ',
+          'matrix( 1.1744842529296875, 0.4334259033203125, 0, 1, 878.3,593.25) ',
+          'matrix( 1.0176544189453125, 0.0256805419921875, 0, 1, 874.5,583.4) ',
+          'matrix( 1.177337646484375, 0.4514617919921875, 0, 1, 878.25,593.55) ',
+          'matrix( 1.0262298583984375, 0.0388641357421875, 0, 1, 874.7,583.7) ',
+          'matrix( 1.0346527099609375, 0.0522918701171875, 0, 1, 874.85,584.05) ',
+          'matrix( 1.0428924560546875, 0.0659027099609375, 0, 1, 875.1,584.4) ',
+          'matrix( 1.0509490966796875, 0.0797576904296875, 0, 1, 875.3,584.7) ',
+          'matrix( 1.0588226318359375, 0.09381103515625, 0, 1, 875.45,585) ',
+          'matrix( 1.066497802734375, 0.1080780029296875, 0, 1, 875.65,585.45) ',
+        ],
+      },
+    ],
+    [
+      'anim____R_0_Layer0_0_FILL_0',
+      {
+        key: '___R_0_Layer0_0_FILL',
+        initialTransform: 'matrix( 1, 0, 0, 1, 920.85,570.6) ',
+        transforms: [
+          'matrix( 1, 0, 0, 1, 920.85,570.6) ',
+          'matrix( 1.0812530517578125, 0.11395263671875, 0, 1, 919,568) ',
+          'matrix( 1.0894622802734375, 0.127685546875, 0, 1, 918.8,567.7) ',
+          'matrix( 1.0975189208984375, 0.1416168212890625, 0, 1, 918.65,567.4) ',
+          'matrix( 1.105377197265625, 0.15576171875, 0, 1, 918.45,567.05) ',
+          'matrix( 1.1130828857421875, 0.1701202392578125, 0, 1, 918.3,566.75) ',
+          'matrix( 1.120574951171875, 0.1846771240234375, 0, 1, 918.1,566.4) ',
+          'matrix( 1.1278839111328125, 0.1994171142578125, 0, 1, 918,566.1) ',
+          'matrix( 1.135009765625, 0.2143707275390625, 0, 1, 917.8,565.8) ',
+          'matrix( 1.1419525146484375, 0.2294921875, 0, 1, 917.7,565.4) ',
+          'matrix( 1.1486663818359375, 0.2448272705078125, 0, 1, 917.5,565.05) ',
+          'matrix( 1.0095977783203125, 0.0117645263671875, 0, 1, 920.65,570.3) ',
+          'matrix( 1.155181884765625, 0.260345458984375, 0, 1, 917.35,564.7) ',
+          'matrix( 1.1614837646484375, 0.2760467529296875, 0, 1, 917.25,564.3) ',
+          'matrix( 1.1676025390625, 0.2919158935546875, 0, 1, 917.05,564) ',
+          'matrix( 1.1734771728515625, 0.3079833984375, 0, 1, 916.9,563.65) ',
+          'matrix( 1.1791534423828125, 0.3242340087890625, 0, 1, 916.8,563.25) ',
+          'matrix( 1.18463134765625, 0.3406524658203125, 0, 1, 916.7,562.85) ',
+          'matrix( 1.1898345947265625, 0.3572235107421875, 0, 1, 916.55,562.5) ',
+          'matrix( 1.1948394775390625, 0.3739776611328125, 0, 1, 916.45,562.15) ',
+          'matrix( 1.199615478515625, 0.3909149169921875, 0, 1, 916.35,561.75) ',
+          'matrix( 1.2041473388671875, 0.407989501953125, 0, 1, 916.2,561.35) ',
+          'matrix( 1.01910400390625, 0.023773193359375, 0, 1, 920.4,570.05) ',
+          'matrix( 1.208465576171875, 0.42523193359375, 0, 1, 916.1,560.8) ',
+          'matrix( 1.0284271240234375, 0.0359954833984375, 0, 1, 920.2,569.75) ',
+          'matrix( 1.037628173828125, 0.0484466552734375, 0, 1, 920,569.5) ',
+          'matrix( 1.046661376953125, 0.0611114501953125, 0, 1, 919.8,569.25) ',
+          'matrix( 1.0555572509765625, 0.0739898681640625, 0, 1, 919.6,568.95) ',
+          'matrix( 1.0642852783203125, 0.08709716796875, 0, 1, 919.4,568.65) ',
+          'matrix( 1.0728302001953125, 0.1004180908203125, 0, 1, 919.2,568.35) ',
+        ],
+      },
+    ],
+  ]);
 
-  @keyframes R0Layer00FILL {
-    0% {
-      transform: matrix(1, 0, 0, 1, 920.85, 570.6);
-    }
-    3% {
-      transform: matrix(1.0812530517578125, 0.11395263671875, 0, 1, 919, 568);
-    }
-    7% {
-      transform: matrix(1.0894622802734375, 0.127685546875, 0, 1, 918.8, 567.7);
-    }
-    10% {
-      transform: matrix(1.0975189208984375, 0.1416168212890625, 0, 1, 918.65, 567.4);
-    }
-    14% {
-      transform: matrix(1.105377197265625, 0.15576171875, 0, 1, 918.45, 567.05);
-    }
-    17% {
-      transform: matrix(1.1130828857421875, 0.1701202392578125, 0, 1, 918.3, 566.75);
-    }
-    21% {
-      transform: matrix(1.120574951171875, 0.1846771240234375, 0, 1, 918.1, 566.4);
-    }
-    24% {
-      transform: matrix(1.1278839111328125, 0.1994171142578125, 0, 1, 918, 566.1);
-    }
-    28% {
-      transform: matrix(1.135009765625, 0.2143707275390625, 0, 1, 917.8, 565.8);
-    }
-    31% {
-      transform: matrix(1.1419525146484375, 0.2294921875, 0, 1, 917.7, 565.4);
-    }
-    34% {
-      transform: matrix(1.1486663818359375, 0.2448272705078125, 0, 1, 917.5, 565.05);
-    }
-    38% {
-      transform: matrix(1.0095977783203125, 0.0117645263671875, 0, 1, 920.65, 570.3);
-    }
-    41% {
-      transform: matrix(1.155181884765625, 0.260345458984375, 0, 1, 917.35, 564.7);
-    }
-    45% {
-      transform: matrix(1.1614837646484375, 0.2760467529296875, 0, 1, 917.25, 564.3);
-    }
-    48% {
-      transform: matrix(1.1676025390625, 0.2919158935546875, 0, 1, 917.05, 564);
-    }
-    52% {
-      transform: matrix(1.1734771728515625, 0.3079833984375, 0, 1, 916.9, 563.65);
-    }
-    55% {
-      transform: matrix(1.1791534423828125, 0.3242340087890625, 0, 1, 916.8, 563.25);
-    }
-    59% {
-      transform: matrix(1.18463134765625, 0.3406524658203125, 0, 1, 916.7, 562.85);
-    }
-    62% {
-      transform: matrix(1.1898345947265625, 0.3572235107421875, 0, 1, 916.55, 562.5);
-    }
-    66% {
-      transform: matrix(1.1948394775390625, 0.3739776611328125, 0, 1, 916.45, 562.15);
-    }
-    69% {
-      transform: matrix(1.199615478515625, 0.3909149169921875, 0, 1, 916.35, 561.75);
-    }
-    72% {
-      transform: matrix(1.2041473388671875, 0.407989501953125, 0, 1, 916.2, 561.35);
-    }
-    76% {
-      transform: matrix(1.01910400390625, 0.023773193359375, 0, 1, 920.4, 570.05);
-    }
-    79% {
-      transform: matrix(1.208465576171875, 0.42523193359375, 0, 1, 916.1, 560.8);
-    }
-    83% {
-      transform: matrix(1.0284271240234375, 0.0359954833984375, 0, 1, 920.2, 569.75);
-    }
-    86% {
-      transform: matrix(1.037628173828125, 0.0484466552734375, 0, 1, 920, 569.5);
-    }
-    90% {
-      transform: matrix(1.046661376953125, 0.0611114501953125, 0, 1, 919.8, 569.25);
-    }
-    93% {
-      transform: matrix(1.0555572509765625, 0.0739898681640625, 0, 1, 919.6, 568.95);
-    }
-    97% {
-      transform: matrix(1.0642852783203125, 0.08709716796875, 0, 1, 919.4, 568.65);
-    }
-    100% {
-      transform: matrix(1.0728302001953125, 0.1004180908203125, 0, 1, 919.2, 568.35);
+  // 初始化元素引用
+  onMounted(() => {
+    elementInfo.forEach((info, elementId) => {
+      const el = document.querySelector(`[data-anim-id="${elementId}"]`);
+      if (el) {
+        animElements.set(elementId, el as HTMLElement);
+        // 设置初始transform
+        const initialTransform = info.transforms[0] || '';
+        el.setAttribute('transform', initialTransform);
+      }
+    });
+  });
+
+  // 监听manager变化并执行动画
+  watch(
+    () => props.manager,
+    (newManager) => {
+      Object.keys(newManager).forEach((key) => {
+        const isActive = newManager[key];
+
+        // 找到所有属于这个key的元素
+        animateByKey(key, isActive);
+      });
+    },
+    { deep: true }
+  );
+
+  // 直接控制动画的方法
+  const animateElement = (elementId: string, toEnd: boolean, duration: number = 3000) => {
+    const el = animElements.get(elementId);
+    const info = elementInfo.get(elementId);
+
+    if (el && info && info.transforms.length > 1) {
+      el.style.transition = `transform ${duration}ms`;
+      el.setAttribute('transform', toEnd ? info.transforms[info.transforms.length - 1] : info.transforms[0]);
     }
-  }
-  .___R_0_Layer0_0_FILL_animate {
-    transition: transform 3s;
-    transform: matrix(1.0728302001953125, 0.1004180908203125, 0, 1, 919.2, 568.35);
-    /*animation: R0Layer00FILL 3s forwards;*/
-  }
+  };
+
+  // 批量控制同一key的所有元素
+  const animateByKey = (key: string, toEnd: boolean, duration: number = 3000) => {
+    animElements.forEach((el, elementId) => {
+      const info = elementInfo.get(elementId);
+      if (info && info.key === key) {
+        animateElement(elementId, toEnd, duration);
+      }
+    });
+  };
 
-  .___R_0_Layer0_0_FILL_animate_reverse {
+  // 导出方法以便外部调用
+  defineExpose({
+    animateElement,
+    animateByKey,
+  });
+</script>
+<style scoped>
+  /* 可以添加一些基础样式 */
+  [data-anim-id] {
     transition: transform 3s;
-    transform: matrix(1, 0, 0, 1, 920.85, 570.6);
-    /*animation: R0Layer00FILL 3s forwards reverse;*/
   }
 </style>

src/views/vent/monitorManager/gateMonitor/gate.data.ts

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from 'vue';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { rules } from '/@/utils/helper/validator';
@@ -314,3 +315,16 @@ export const chartsColumns = [
   //   dataIndex: '2zdqfktl',
   // },
 ];
+
+export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: string) {
+  // @ts-ignore
+  return defineAsyncComponent(() => {
+    if (!is2DModel) return import('./components/entryThree.vue');
+    switch (sysOrgCode) {
+      // case '000000':
+      //   return import('./components/000000.vue');
+      default:
+        return import('./components/gateSVG.vue');
+    }
+  });
+}

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

@@ -1,32 +1,5 @@
 <template>
-  <div
-    v-if="!globalConfig.is2DModel"
-    class="bg"
-    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden"
-  >
-    <a-spin :spinning="loading" />
-    <div id="deviceDetail" class="device-detail">
-      <div id="deviceCard" class="device-card" style="z-index: -1; position: absolute">
-        <div class="title">KJ-980-F矿用本安型监控分站</div>
-        <div class="detail-box">
-          <div class="left-box"></div>
-          <div class="right-box">
-            <div><span class="detail-title">规格型号：</span> <span>KJ-980-F</span></div>
-            <div
-              ><span class="detail-title">技术参数：</span>
-              <span
-                >380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
-  </div>
-  <div v-if="globalConfig.is2DModel" class="flex justify-center">
-    <GateSVG :manager="animationManager" />
-  </div>
+  <component :loading="loading" :manager="animationManager" :is="modelComponent" />
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center row">
@@ -367,7 +340,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject, unref } from 'vue';
+  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject, unref, defineAsyncComponent } from 'vue';
   import MonitorTable from '../comment/MonitorTable.vue';
   import HistoryTable from '../comment/HistoryTable.vue';
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
@@ -379,7 +352,7 @@
   import { deviceControlApi } from '/@/api/vent/index';
   import { message } from 'ant-design-vue';
   import { list, getTableList, cameraList, cameraAddrList } from './gate.api';
-  import { chartsColumns } from './gate.data';
+  import { chartsColumns, getModelComponent } from './gate.data';
   import lodash from 'lodash';
   import { setDivHeight } from '/@/utils/event';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
@@ -396,12 +369,14 @@
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
   import HistoryTableChart from '../comment/HistoryTableChart.vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
-  import GateSVG from './components/gateSVG.vue';
 
   const { hasPermission } = usePermission();
   const { sysOrgCode } = useGlobSetting();
   const globalConfig = inject<any>('globalConfig');
 
+  /** 模型对应的组件，根据实际情况分为二维三维 */
+  const modelComponent = getModelComponent(globalConfig.is2DModel, sysOrgCode);
+
   const { animationManager, triggerAnimation } = useSvgAnimation();
   const { currentRoute } = useRouter();
   const MonitorDataTable = ref();
@@ -410,7 +385,7 @@
   const deviceType = ref('gate');
   const activeKey = ref('1'); // tab
   const loading = ref(false);
-  const stationType = ref('plc1');
+  // const stationType = ref('plc1');
   const scroll = reactive({
     y: 230,
   });

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+    <a-spin :spinning="loading" />
+    <div id="window3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
+      <div>
+        <div ref="elementContent" class="elementContent">
+          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
+          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
+          <p><span class="data-title">故障诊断：</span>
+            <i
+              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
+            ></i>{{selectData.fault}}</p>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+<script lang="ts" setup>
+  defineProps<{ loading: boolean }>();
+</script>

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

@@ -1,20 +1,5 @@
 <template>
-  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
-    <a-spin :spinning="loading" />
-    <div id="window3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
-    <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
-      <div>
-        <div ref="elementContent" class="elementContent">
-          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
-          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
-          <p><span class="data-title">故障诊断：</span>
-            <i
-              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
-            ></i>{{selectData.fault}}</p>
-        </div>
-      </div>
-    </div> -->
-  </div>
+  <component :loading="loading" :manager="animationManager" :is="modelComponent" />
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center" style="display: flex">
@@ -244,11 +229,17 @@
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { getModelComponent } from './window.data';
+  import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
   const { hasPermission } = usePermission();
   const { sysOrgCode } = useGlobSetting();
   const globalConfig = inject('globalConfig');
 
+  /** 模型对应的组件，根据实际情况分为二维三维 */
+  const modelComponent = getModelComponent(globalConfig.is2DModel, sysOrgCode);
+
+  const { animationManager, triggerAnimation } = useSvgAnimation();
   const { currentRoute } = useRouter();
 
   const MonitorDataTable = ref();
@@ -395,6 +386,7 @@
 
   // 判断前后窗的面积是否发生改变，如果改变则开启动画
   const playAnimation = (data, maxarea = 90, isFirst = false) => {
+    triggerAnimation('shanye_0_Layer0_0_FILL', isFirst);
     computePlay(data, maxarea, isFirst);
   };
 

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

@@ -1,4 +1,5 @@
 import { BasicColumn } from '/@/components/Table';
+import { defineAsyncComponent } from 'vue';
 import { FormSchema } from '/@/components/Table';
 import { rules } from '/@/utils/helper/validator';
 export const columns: BasicColumn[] = [
@@ -302,3 +303,16 @@ export const chartsColumns = [
     dataIndex: 'rearPresentValue',
   },
 ];
+
+export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: string) {
+  // @ts-ignore
+  return defineAsyncComponent(() => {
+    if (!is2DModel) return import('./components/entryThree.vue');
+    switch (sysOrgCode) {
+      // case '000000':
+      //   return import('./components/000000.vue');
+      default:
+        return import('./components/windowSVG.vue');
+    }
+  });
+}