[Mod 0000]测风装置svg动画修改

src/views/vent/monitorManager/windrectMonitor/components/scanSVG.vue

@@ -1335,7 +1335,7 @@
       transform="matrix( 0.770660400390625, 0, 0, 0.770660400390625, 860.35,522.9) "
       id="Anim_SaoMiaoCeFeng_All"
       data-anim-id="Anim_SaoMiaoCeFeng_All"
-      :class="{ 'animate-scan': isAnimating }"
+      :class="{ 'animate-scan-down': animateDrection === 'down', 'animate-scan-up': animateDrection === 'up' }"
     >
       <g transform="matrix( 1, 0, 0, 1, -139.2,5.95) " class="animate-blink">
         <g transform="matrix( 1, 0, 0, 1, 0,0) ">
@@ -1454,7 +1454,8 @@
 <script setup lang="ts">
   import { onMounted, defineExpose, ref } from 'vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
-  const isAnimating = ref(false);
+  const isAnimating = ref(false); // 动画是否在进行中
+  const animateDrection = ref<'' | 'down' | 'up'>(''); // 动画方向
   // 动画持续时间（秒）
   const ANIMATION_DURATION = 3;
   // 元素信息（常量数据，使用Map）
@@ -1487,12 +1488,13 @@
   // const scanSvg = ref<SVGSVGElement | null>(null);
 
   /** 根据SVG的使用场景播放动画 */
-  function animate() {
+  function animate(data?: any) {
     // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
     // triggerAnimation(['anim_saomiaocefeng_all'], false);
     if (isAnimating.value) return; // 防止未挂载或重复触发
 
     isAnimating.value = true;
+    animateDrection.value = data;
     // 设置定时器，在动画结束后重置状态
     setTimeout(() => {
       isAnimating.value = false;
@@ -1533,11 +1535,16 @@
     }
   }
 
-  @keyframes scan {
+  @keyframes scanDown {
     0% {
       transform: matrix(0.770660400390625, 0, 0, 0.770660400390625, 860.35, 522.9);
     }
-    50% {
+    100% {
+      transform: matrix(0.770660400390625, 0, 0, 0.770660400390625, 860.35, 662.9);
+    }
+  }
+  @keyframes scanUp {
+    0% {
       transform: matrix(0.770660400390625, 0, 0, 0.770660400390625, 860.35, 662.9);
     }
     100% {
@@ -1547,7 +1554,10 @@
   .animate-blink {
     animation: blink 3s infinite linear;
   }
-  .animate-scan {
-    animation: scan 3s infinite forwards;
+  .animate-scan-down {
+    animation: scanDown 10s forwards;
+  }
+  .animate-scan-up {
+    animation: scanUp 2s forwards;
   }
 </style>

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

@@ -183,7 +183,7 @@
   const { currentRoute } = useRouter();
   const modelRef = ref();
   /** 模型对应的组件，根据实际情况分为二维三维 */
-  const modelComponent = getModelComponent(true, sysOrgCode);
+  let modelComponent = getModelComponent(true, sysOrgCode);
 
   const MonitorDataTable = ref();
   const scroll = reactive({
@@ -614,16 +614,16 @@
     }
 
     if (selectData.deviceType == 'windrect_ds') {
-      // 添加svg动画
-      modelRef.value?.animate?.();
       if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
         if (!deviceRunState) {
           deviceRunState = 'start';
           play('down');
+          modelRef.value?.animate?.('down');
         }
       } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
         deviceRunState = '';
         play('up');
+        modelRef.value?.animate?.('up');
       }
     }
   }
@@ -719,6 +719,11 @@
       }
 
       // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
+      /**
+       * 模型对应的组件，根据实际情况分为二维三维
+       * 这里传入类型type而不是sysOrgCode进行判断展示哪个装置
+       * */
+      modelComponent = getModelComponent(true, type);
       await setModelType(type);
       loading.value = false;
       deviceRunState = '';

src/views/vent/monitorManager/windrectMonitor/windrect.data.ts

@@ -433,11 +433,11 @@ export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: strin
   return defineAsyncComponent(() => {
     if (!is2DModel) return import('./components/entryThree.vue');
     switch (sysOrgCode) {
-      // case '000000':
-      // return import('./components/scanSVG.vue');
-      default:
-        // return import('./components/fixedSVG.vue');
+      // 这里配置测风装置类型，也可通过sysOrgCode来进行判断
+      case 'dsWindRect_move':
         return import('./components/scanSVG.vue');
+      default:
+        return import('./components/fixedSVG.vue');
     }
   });
 }