[Mod 0000]工作面防火门监控系统修改防火门控制按钮逻辑

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

@@ -15,32 +15,45 @@
           <div class="door-card" v-for="(item, index) in props.data" :key="index">
             <div class="door-position">
               <div class="position"></div>
-              <div class="door-name"
-                ><span>{{ item.devicePos }}</span></div
-              >
-              <a-button class="door-btn" @click="oneKeyClose(item, index, 'frontGateClose_S', '关闭')">关闭</a-button>
-              <a-button class="door-btn" @click="oneKeyOpen(item, index, 'frontGateOpen_S', '打开')">打开</a-button>
+              <div class="door-name">
+                <span>{{ item.devicePos }}</span>
+              </div>
+              <div class="door-control">
+                <a-button class="door-btn" @click="oneKeyOpen(item, index, 'frontGateOpen_S', '打开')">防火门开</a-button>
+                <a-button class="door-btn" v-if="item.readData?.MBOpen?.value" @click="oneKeyOpen(item, index, 'MBOpen_S', '打开')">
+                  皮带打开
+                </a-button>
+                <a-button class="door-btn" v-if="item.readData?.MBOpen?.value" @click="oneKeyOpen(item, index, 'AllOpen_S', '打开')">
+                  一键全开
+                </a-button>
+                <a-button class="door-btn" @click="oneKeyClose(item, index, 'frontGateClose_S', '关闭')">防火门关</a-button>
+                <a-button class="door-btn" v-if="item.readData?.MBOpen?.value" @click="oneKeyClose(item, index, 'MBClose_S', '关闭')">
+                  皮带关闭
+                </a-button>
+                <a-button class="door-btn" v-if="item.readData?.MBOpen?.value" @click="oneKeyClose(item, index, 'AllClose_S', '关闭')">
+                  一键全关
+                </a-button>
+              </div>
             </div>
             <div class="door-header">
-              <div class="info-column" v-for="(i, idx) in config.config.items" :key="idx">
-                <span class="col-label">{{ i.label }}</span>
-                <span
-                  class="col-value"
-                  :class="[
-                    getFormattedText(item, i.value, i.trans) === '打开' || getFormattedText(item, i.value, i.trans) === '连接'
-                      ? 'status-open'
-                      : 'status-close',
-                    'status-dot',
-                  ]"
-                >
-                  {{ getFormattedText(item, i.value, i.trans) }}
-                </span>
-              </div>
+              <template v-for="(i, idx) in config.config.items" :key="idx">
+                <div class="info-column" v-if="!i.value.includes('MBOpen') || item.readData?.MBOpen?.value">
+                  <span class="col-label">{{ i.label }}</span>
+                  <span
+                    class="col-value"
+                    :class="[
+                      getFormattedText(item, i.value, i.trans) === '打开' || getFormattedText(item, i.value, i.trans) === '连接'
+                        ? 'status-open'
+                        : 'status-close',
+                      'status-dot',
+                    ]"
+                  >
+                    {{ getFormattedText(item, i.value, i.trans) }}
+                  </span>
+                </div>
+              </template>
             </div>
-            <!-- 模型展示占位div -->
-            <!-- <div class="model-placeholder">
-              <gateSVG :ref="(el) => setChildRef(el, index)" :identify="String(index)" />
-            </div> -->
+
             <div class="model-placeholder">
               <!-- <img :src="gatePng" alt="风门" class="model-img" /> -->
               <pidaihangSVG :ref="(el) => setChildRef(el, index)" :identify="String(index)" />
@@ -106,8 +119,10 @@
   function monitorAnimation(selectData, index) {
     if (!selectData?.readData) return;
     const frontOpen = selectData.readData?.frontGateOpen?.value === '1';
+    const beltOpen = selectData.readData?.MBOpen?.value === '1';
     if (childRefs.value[index]) {
-      childRefs.value[index].animate(frontOpen, frontOpen, frontOpen);
+      childRefs.value[index].animateFireDoor(frontOpen);
+      childRefs.value[index].animateBeltDoor(beltOpen);
     }
   }
 
@@ -125,7 +140,6 @@
   }
 
   function handleOK(passWord, handlerState, value?) {
-    console.log('handleOK', passWord, handlerState, value);
     if (!passWord && !globalConfig?.simulatedPassword) {
       message.warning('请输入密码');
       return;
@@ -150,12 +164,16 @@
             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);
+            if (paramcode.value === 'AllOpen_S' || paramcode.value === 'AllClose_S') {
+              childRefs.value[targetIndex].animate(isOpen, isOpen, isOpen);
+            } else if (paramcode.value === 'frontGateOpen_S' || paramcode.value === 'frontGateClose_S') {
+              childRefs.value[targetIndex].animateFireDoor(isOpen);
+            } else if (paramcode.value === 'MBOpen_S' || paramcode.value === 'MBClose_S') {
+              childRefs.value[targetIndex].animateBeltDoor(isOpen);
+            }
           }
           // 触发刷新事件
           emit('refresh');
@@ -200,7 +218,7 @@
     }
   );
   onMounted(() => {
-    console.log('页面加载完成', props.data);
+    // console.log('页面加载完成', props.data);
   });
 </script>
 
@@ -290,42 +308,57 @@
     gap: 15px;
   }
   .door-position {
+    width: 100%;
+    height: 60px;
+    position: relative;
     background: url('/@/assets/images/beltFire/yjkf/1-5.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     color: #fff;
+    padding: 5px 0;
+    align-items: center;
   }
   .door-position .position {
+    position: absolute;
     background: url('/@/assets/images/beltFire/yjkf/1-1-1.svg') no-repeat;
     background-size: 100% 100%;
     width: 16px;
     height: 16px;
-    margin-top: 8px;
-    margin-left: 8px;
+    top: 50%;
+    left: 10px;
+    transform: translateY(-50%);
   }
   .door-position .door-name {
-    flex: 1;
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    font-size: 12px;
+    align-items: center;
+    font-size: 14px;
     font-weight: bold;
     color: #c4ebff;
-    margin: 0 25px 0 25px;
-    line-height: 33px;
     font-style: italic;
+    padding-left: 40px;
+    max-width: 130px;
+  }
+  .door-control {
+    direction: rtl;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 3px;
+    justify-items: center;
+    position: absolute;
+    right: 0;
   }
   .door-btn {
+    direction: ltr;
     background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
     border: 1px solid #40c4ff;
     color: #fff;
     font-size: 12px;
-    padding: 2px 8px;
+    padding: 2px;
     height: 24px;
     margin: auto;
-    margin-left: 3px;
+    margin-left: 2px;
     box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
     display: inline-flex;
     align-items: center;

src/views/vent/home/configurable/configurable.data.fireDoorMonitor.ts

@@ -308,6 +308,14 @@ export const testFireDoorMonitor: Config[] = [
                   '0': '关闭',
                 },
               },
+              {
+                label: '皮带密闭状态',
+                value: '${readData.MBOpen.value}',
+                trans: {
+                  '1': '打开',
+                  '0': '关闭',
+                },
+              },
               {
                 label: '网络状态',
                 value: '${netStatus}',

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

@@ -63,6 +63,7 @@
   onMounted(() => {
     // 1. 先加载页面配置
     fetchConfigs('fireMonitor').then(() => {
+      // configs.value = testFireDoorMonitor; // 本地配置时使用
       // updateEnhancedConfigs(configs.value);
       // 2. 获取场景列表
       manageFireList({

src/views/vent/monitorManager/fireDoorMonitor/components/pidaihangSVG.vue

@@ -6819,14 +6819,25 @@ Q 191.2556640625 113.589453125 191.25 113.575"
 
   /** 根据SVG的使用场景播放动画 */
   function animate(door1, door2, door3) {
-    // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
     const open = door1 || door2 || door3;
     triggerAnimation(['mibimen_0_Layer0_0_FILL', 'fanghuomen_0_Layer0_0_FILL'], !open);
   }
 
+  /** 触发放火门动画 */
+  function animateFireDoor(open: boolean) {
+    triggerAnimation(['fanghuomen_0_Layer0_0_FILL'], !open);
+  }
+
+  /** 触发皮带密闭门动画 */
+  function animateBeltDoor(open: boolean) {
+    triggerAnimation(['mibimen_0_Layer0_0_FILL'], !open);
+  }
+
   // 导出方法以便外部调用
   defineExpose({
     animate,
+    animateFireDoor,
+    animateBeltDoor,
   });
 </script>
 <style scoped>