[Mod 0000]调整工作面防火门数据加载逻辑，新增svg动画控制

src/views/vent/home/configurable/belt/components/detail/fireGateBoard.vue

@@ -42,7 +42,8 @@
               <gateSVG :ref="(el) => setChildRef(el, index)" :identify="String(index)" />
             </div> -->
             <div class="model-placeholder">
-              <img :src="gatePng" alt="风门" class="model-img" />
+              <!-- <img :src="gatePng" alt="风门" class="model-img" /> -->
+              <pidaihangSVG :ref="(el) => setChildRef(el, index)" :identify="String(index)" />
             </div>
           </div>
         </div>
@@ -62,9 +63,7 @@
 <script setup lang="ts">
   import { ref, onMounted, watch, inject } from 'vue';
   import { getFormattedText } from '../../../hooks/helper';
-  // import gateSVG from '../gateSVG.vue';
-  import gateSVG from '../../../../../monitorManager/gateMonitor/components/gateDualSVG.vue';
-  import gatePng from '/@/assets/images/fireDoorMonitor.png'; //暂时用图片
+  import pidaihangSVG from '/@/views/vent/monitorManager/fireDoorMonitor/components/pidaihangSVG.vue';
   import { nextTick } from 'process';
   import HandleModal from '/@/views/vent/monitorManager/gateMonitor/modal.vue';
   import { deviceControlApi } from '/@/api/vent/index';
@@ -97,23 +96,18 @@
   const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
   const modalType = ref(''); // 模态框内容显示类型，设备操作类型
   const paramcode = ref(''); // 模态框操作代码
-  const childRefs = ref<(InstanceType<typeof gateSVG> | null)[]>([]);
+  const childRefs = ref<(InstanceType<typeof pidaihangSVG> | null)[]>([]);
   const selectData = ref<any>({});
   const setChildRef = (el, index) => {
     if (el) {
       childRefs.value[index] = el;
     }
   };
-  function yjControl() {
-    console.log('应急控制');
-  }
   function monitorAnimation(selectData, index) {
     if (!selectData?.readData) return;
-    const frontOpen = selectData.readData.frontGateOpen === '1';
-    const midOpen = selectData.readData.midGateOpen === '1';
-    const rearOpen = selectData.readData.rearGateOpen === '1';
+    const frontOpen = selectData.readData?.frontGateOpen?.value === '1';
     if (childRefs.value[index]) {
-      childRefs.value[index].animate(frontOpen, midOpen, rearOpen);
+      childRefs.value[index].animate(frontOpen, frontOpen, frontOpen);
     }
   }
 
@@ -122,18 +116,12 @@
     modalTitle.value = title;
     paramcode.value = code;
     openGateControlModal();
-    // if (childRefs.value[index]) {
-    //   childRefs.value[index].animate(true, true, true);
-    // }
   }
   function oneKeyClose(item, index, code, title) {
     selectData.value = item;
     modalTitle.value = title;
     paramcode.value = code;
     openGateControlModal();
-    // if (childRefs.value[index]) {
-    //   childRefs.value[index].animate(false, false, false);
-    // }
   }
 
   function handleOK(passWord, handlerState, value?) {
@@ -150,7 +138,6 @@
       value: '',
       password: passWord || globalConfig?.simulatedPassword,
     };
-    console.log('data', data);
 
     doorControlApi(data)
       .then((res) => {
@@ -162,6 +149,14 @@
           } else {
             message.success('指令已下发成功！');
           }
+
+          // 找到对应的索引并更新动画状态
+          const targetIndex = props.data.findIndex((item) => item.deviceID === selectData.value.deviceID);
+          if (targetIndex !== -1 && childRefs.value[targetIndex]) {
+            // 根据操作类型设置动画状态
+            const isOpen = paramcode.value.includes('Open');
+            childRefs.value[targetIndex].animate(isOpen, isOpen, isOpen);
+          }
           // 触发刷新事件
           emit('refresh');
         } else {
@@ -410,6 +405,18 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
+    overflow: hidden;
+  }
+  svg {
+    width: 350%;
+    height: 350%;
+    max-width: none;
+    max-height: none;
+    object-fit: contain;
+    position: absolute;
+    top: -140%;
+    left: -110%;
   }
   .model-img {
     width: 100%;

src/views/vent/home/configurable/fireDoorMonitor.vue

@@ -61,29 +61,28 @@
   }
 
   onMounted(() => {
-    // 1. 获取场景列表
-    manageFireList({
-      strtype: 'sys_door',
-      pagetype: 'normal',
-    }).then((res) => {
-      if (res.records && res.records.length > 0) {
-        res.records.forEach((item) => {
-          selectorOptions.value.push({
-            value: item.id,
-            label: item.systemname,
+    // 1. 先加载页面配置
+    fetchConfigs('fireMonitor').then(() => {
+      // updateEnhancedConfigs(configs.value);
+      // 2. 获取场景列表
+      manageFireList({
+        strtype: 'sys_door',
+        pagetype: 'normal',
+      }).then((res) => {
+        if (res.records && res.records.length > 0) {
+          res.records.forEach((item) => {
+            selectorOptions.value.push({
+              value: item.id,
+              label: item.systemname,
+            });
           });
-        });
-
-        // 2. 默认选中第一个场景
-        deviceId.value = selectorOptions.value[0].value;
 
-        // 3. 初始化页面配置并加载第一个场景的数据
-        fetchConfigs('fireMonitor').then(() => {
-          // configs.value = testFireDoorMonitor;
-          updateEnhancedConfigs(configs.value);
-          loadFireGateData();
-        });
-      }
+          // 3. 默认选中第一个场景
+          deviceId.value = selectorOptions.value[0].value;
+        }
+        // 加载数据
+        loadFireGateData();
+      });
     });
   });