[Feat 0000]应急控风减灾模块开发

src/components/vent/ventBox1.vue

@@ -14,128 +14,128 @@
   </div>
 </template>
 <script>
-  import { defineComponent } from 'vue';
-  export default defineComponent({
-    name: 'VentBox1',
-    setup() {},
-  });
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'VentBox1',
+  setup() {},
+});
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @{theme-green} {
-    .vent-box1-bg {
-      --image-box1-top: url(/@/assets/images/themify/green/vent/border/box-top.png);
-      --image-box1-bottom: url('/@/assets/images/themify/green/vent/border/box-bottom.png');
-      // --container-color: #1e2932;
-      --container-image: linear-gradient(#3df6ff00, #308972, #3df6ff00);
-    }
-    // .box1-center {
-    //   height: calc(100% - 37px);
-    //   clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
-    // }
+@import '/@/design/theme.less';
+@{theme-green} {
+  .vent-box1-bg {
+    --image-box1-top: url(/@/assets/images/themify/green/vent/border/box-top.png);
+    --image-box1-bottom: url('/@/assets/images/themify/green/vent/border/box-bottom.png');
+    // --container-color: #1e2932;
+    --container-image: linear-gradient(#3df6ff00, #308972, #3df6ff00);
   }
+  // .box1-center {
+  //   height: calc(100% - 37px);
+  //   clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
+  // }
+}
 
-  // @{theme-deepblue} {
-  //   .vent-box1-bg {
-  //     --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box2-top.png');
-  //     --image-box1-bottom: none;
-  //     // --image-box1-bottom: url('/@/assets/images/themify/deepblue/vent/border/box1-bottom.png');
-  //     --container-color: #0e223b;
-  //     // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
-  //     --container-image: none;
-  //   }
+// @{theme-deepblue} {
+//   .vent-box1-bg {
+//     --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box2-top.png');
+//     --image-box1-bottom: none;
+//     // --image-box1-bottom: url('/@/assets/images/themify/deepblue/vent/border/box1-bottom.png');
+//     --container-color: #0e223b;
+//     // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
+//     --container-image: none;
+//   }
 
-  //   .vent-box1-bg {
-  //     border: 1px solid #3a4b5f;
-  //     border-radius: 10px;
-  //     background: var(--container-color) no-repeat;
-  //     padding-top: 5px;
+//   .vent-box1-bg {
+//     border: 1px solid #3a4b5f;
+//     border-radius: 10px;
+//     background: var(--container-color) no-repeat;
+//     padding-top: 5px;
 
-  //     .box1-top {
-  //       height: 35px;
-  //       background: var(--image-box1-top) no-repeat;
-  //       background-size: 94% 25px;
-  //       background-position: center center;
-  //       margin-bottom: 5px;
-  //       .title {
-  //         height: 100%;
-  //         padding-left: 8%;
-  //         justify-content: flex-start;
-  //         align-items: center;
-  //       }
-  //     }
-  //   }
-  // }
+//     .box1-top {
+//       height: 35px;
+//       background: var(--image-box1-top) no-repeat;
+//       background-size: 94% 25px;
+//       background-position: center center;
+//       margin-bottom: 5px;
+//       .title {
+//         height: 100%;
+//         padding-left: 8%;
+//         justify-content: flex-start;
+//         align-items: center;
+//       }
+//     }
+//   }
+// }
 
-  .vent-box1-bg {
-    --image-box1-top: url('/@/assets/images/vent/border/box1-top.png');
-    --image-box1-bottom: url('/@/assets/images/vent/border/box1-bottom.png');
-    --container-color: #00213236;
-    --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+.vent-box1-bg {
+  --image-box1-top: url('/@/assets/images/vent/border/box1-top.png');
+  --image-box1-bottom: url('/@/assets/images/vent/border/box1-bottom.png');
+  --container-color: #00213236;
+  --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+  width: 100%;
+  min-height: 80px;
+  position: relative;
+  overflow-x: hidden;
+  .box1-top {
     width: 100%;
-    min-height: 80px;
-    position: relative;
-    overflow-x: hidden;
-    .box1-top {
+    height: 35px;
+    background: var(--image-box1-top) no-repeat;
+    background-size: 100% 100%;
+    .title {
       width: 100%;
       height: 35px;
-      background: var(--image-box1-top) no-repeat;
-      background-size: 100% 100%;
-      .title {
-        width: 100%;
-        height: 35px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #fff;
-      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
     }
-    .box1-center {
-      width: calc(100% + 0.5px);
-      position: relative;
+  }
+  .box1-center {
+    width: calc(100% + 0.5px);
+    position: relative;
 
-      .box-container {
-        width: calc(100% - 2px);
-        min-height: 50px;
-        // position: relative;
-        padding: 10px;
-        color: #fff;
-        // background-color: #0097ff05;
-        background-color: var(--container-color);
-        backdrop-filter: blur(5px);
+    .box-container {
+      width: calc(100% - 2px);
+      min-height: 50px;
+      // position: relative;
+      padding: 10px;
+      color: #fff;
+      // background-color: #0097ff05;
+      background-color: var(--container-color);
+      backdrop-filter: blur(5px);
 
-        &::before {
-          content: '';
-          display: block;
-          position: absolute;
-          top: 5px;
-          left: 0;
-          width: 1px;
-          height: calc(100% - 10px);
-          background-image: var(--container-image);
-        }
-        &::after {
-          content: '';
-          display: block;
-          position: absolute;
-          right: 1px;
-          top: 5px;
-          width: 1px;
-          height: calc(100% - 10px);
-          background: var(--container-image);
-        }
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 5px;
+        left: 0;
+        width: 1px;
+        height: calc(100% - 10px);
+        background-image: var(--container-image);
+      }
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        right: 1px;
+        top: 5px;
+        width: 1px;
+        height: calc(100% - 10px);
+        background: var(--container-image);
       }
     }
-    .box1-bottom {
-      width: 100%;
-      height: 35px;
-      background: var(--image-box1-bottom) no-repeat;
-      background-size: 100% 100%;
-      position: absolute;
-      bottom: 0px;
-      z-index: 1;
-      pointer-events: none;
-    }
   }
+  .box1-bottom {
+    width: 100%;
+    height: 35px;
+    background: var(--image-box1-bottom) no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    bottom: 0px;
+    z-index: 1;
+    pointer-events: none;
+  }
+}
 </style>

src/views/vent/BeltLaneThreeLevelFire/BeltMonitorWarn/index.vue

@@ -1,319 +0,0 @@
-<template>
-  <div class="belt-control-page">
-    <div class="content-layout">
-      <!-- 左侧面板：3个模块 -->
-      <div class="left-panel">
-        <!-- 光纤测温模块 -->
-        <div class="panel-card">
-          <h3 class="panel-title">光纤测温监测与分析</h3>
-          <div class="data-row">
-            <div class="data-item">
-              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
-              <div class="data-label">平均温度</div>
-              <div class="data-value">56.99</div>
-            </div>
-            <div class="data-item">
-              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
-              <div class="data-label">最高温度</div>
-              <div class="data-value">56.99</div>
-            </div>
-            <div class="data-item">
-              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
-              <div class="data-label">最低温度</div>
-              <div class="data-value">56.99</div>
-            </div>
-          </div>
-          <div class="alarm-info">
-            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
-            <div class="alarm-detail">
-              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- CO传感器模块 -->
-        <div class="panel-card">
-          <h3 class="panel-title">CO传感器监测与分析</h3>
-          <div class="data-row">
-            <div class="data-item">
-              <div class="data-icon"><i class="iconfont icon-co"></i>CO₂</div>
-              <div class="data-label">平均(%)</div>
-              <div class="data-value">56.99</div>
-            </div>
-            <div class="data-item">
-              <div class="data-icon"><i class="iconfont icon-co"></i>CO₂</div>
-              <div class="data-label">最大(%)</div>
-              <div class="data-value">56.99</div>
-            </div>
-            <div class="data-item">
-              <div class="data-icon"><i class="iconfont icon-co"></i>CO⁴</div>
-              <div class="data-label">最小(%)</div>
-              <div class="data-value">56.99</div>
-            </div>
-          </div>
-          <div class="alarm-info">
-            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
-            <div class="alarm-detail">
-              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 CO传感器1</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 微震测声模块 -->
-        <div class="panel-card">
-          <h3 class="panel-title">微震测声传感器监测与分析</h3>
-          <div class="data-row">
-            <div class="data-item">
-              <div class="data-label">平均值</div>
-              <div class="data-value">--</div>
-            </div>
-            <div class="data-item">
-              <div class="data-label">最大值</div>
-              <div class="data-value">--</div>
-            </div>
-            <div class="data-item">
-              <div class="data-label">最小值</div>
-              <div class="data-value">--</div>
-            </div>
-          </div>
-          <div class="alarm-info">
-            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
-            <div class="alarm-detail">
-              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 中间区域：顶部Tab -->
-      <div class="center-panel">
-        <Nav />
-      </div>
-
-      <!-- 右侧面板：3个模块 -->
-      <div class="right-panel">
-        <!-- 火焰传感器模块 -->
-        <div class="panel-card">
-          <h3 class="panel-title">火焰传感器监测与分析</h3>
-          <div class="alarm-info">
-            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
-            <div class="alarm-detail">
-              <span>● 报警产生于 2013-05-24 15:52:42 时刻 火焰传感器1</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 温度传感器模块 -->
-        <div class="panel-card">
-          <h3 class="panel-title">温度传感器监测与分析</h3>
-          <div class="alarm-info">
-            <span class="alarm-status"><span class="status-dot red"></span>是否报警：正常</span>
-            <div class="alarm-detail">
-              <span>● 报警产生于 2013-05-24 15:52:42 时刻 温度传感器1</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 烟雾传感器模块 -->
-        <div class="panel-card">
-          <h3 class="panel-title">烟雾传感器监测与分析</h3>
-          <div class="alarm-info">
-            <span class="alarm-status"><span class="status-dot red"></span>是否报警：正常</span>
-            <div class="alarm-detail">
-              <span>● 报警产生于 2013-05-24 15:52:42 时刻 烟雾传感器1</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- HCl传感器模块 -->
-        <div class="panel-card">
-          <h3 class="panel-title">HCl传感器监测与分析</h3>
-          <div class="data-row">
-            <div class="data-item">
-              <div class="data-label">平均值</div>
-              <div class="data-value">--</div>
-            </div>
-            <div class="data-item">
-              <div class="data-label">最大值</div>
-              <div class="data-value">--</div>
-            </div>
-            <div class="data-item">
-              <div class="data-label">最小值</div>
-              <div class="data-value">--</div>
-            </div>
-          </div>
-          <div class="alarm-info">
-            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
-            <div class="alarm-detail">
-              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 多参数传感器模块 -->
-        <div class="panel-card">
-          <h3 class="panel-title">火灾多参数传感器监测与分析</h3>
-          <div class="alarm-info">
-            <span>具体需根据接入数据调整数据展示</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import Nav from '../components/nav.vue';
-  const selectedBelt = ref('belt1');
-  const activeTab = ref('1');
-</script>
-
-<style scoped>
-  .belt-control-page {
-    width: 100%;
-    height: 100%;
-    background: #0a1435;
-    color: #d0e8ff;
-    font-family: 'Microsoft YaHei', sans-serif;
-    overflow: hidden;
-  }
-
-  .left-header,
-  .right-header {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-  }
-
-  .center-title {
-    font-size: 24px;
-    font-weight: bold;
-    color: #fff;
-  }
-
-  .belt-select {
-    color: #d0e8ff;
-    font-size: 16px;
-  }
-
-  .view-mode label {
-    margin-left: 10px;
-    cursor: pointer;
-  }
-
-  .pressure {
-    font-size: 14px;
-  }
-
-  .icons {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 16px;
-  }
-
-  .admin {
-    font-size: 14px;
-    margin-left: 8px;
-  }
-
-  /* 内容布局 */
-  .content-layout {
-    display: flex;
-    height: calc(100% - 54px);
-    padding: 10px;
-    gap: 10px;
-  }
-
-  .left-panel,
-  .right-panel {
-    width: 22%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    gap: 10px;
-  }
-
-  .center-panel {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  /* 卡片样式 */
-  .panel-card {
-    background: rgba(15, 36, 87, 0.6);
-    border: 1px solid #3b8ad4;
-    border-radius: 4px;
-    padding: 12px;
-    flex: 1;
-  }
-
-  .panel-title {
-    margin: 0 0 12px 0;
-    font-size: 16px;
-    color: #fff;
-    text-align: center;
-  }
-
-  .data-row {
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 12px;
-  }
-
-  .data-item {
-    text-align: center;
-  }
-
-  .data-icon {
-    font-size: 20px;
-    margin-bottom: 4px;
-  }
-
-  .data-label {
-    font-size: 12px;
-    color: #a0c8ff;
-    margin-bottom: 4px;
-  }
-
-  .data-value {
-    font-size: 18px;
-    font-weight: bold;
-    color: #1890ff;
-  }
-
-  .alarm-info {
-    font-size: 12px;
-    border-top: 1px dashed #2a52be;
-    padding-top: 8px;
-  }
-
-  .alarm-status {
-    display: flex;
-    align-items: center;
-    margin-bottom: 6px;
-  }
-
-  .status-dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    margin-right: 6px;
-  }
-
-  .status-dot.green {
-    background: #52c41a;
-  }
-
-  .status-dot.red {
-    background: #f5222d;
-  }
-
-  .alarm-detail {
-    color: #a0c8ff;
-  }
-</style>

src/views/vent/BeltLaneThreeLevelFire/SprySystem/index.vue

@@ -1,253 +0,0 @@
-<template>
-  <div class="belt-control-page">
-    <div class="content-layout">
-      <!-- 左侧面板：喷淋设备控制 -->
-      <div class="left-panel">
-        <!-- 顶部控制栏 -->
-        <div class="control-bar">
-          <a-select v-model:value="beltArea" class="area-select" :bordered="false">
-            <a-select-option value="1">1#皮带区域</a-select-option>
-          </a-select>
-          <a-button type="primary" class="control-btn start">启动喷淋</a-button>
-          <a-button class="control-btn stop">停止喷淋</a-button>
-          <div class="control-mode">
-            <div class="mode-title">控制模式</div>
-            <div class="mode-value">手动/自动</div>
-          </div>
-        </div>
-
-        <!-- 喷淋设备列表（紧凑布局） -->
-        <div class="device-list-wrapper">
-          <div class="device-card" v-for="item in deviceList" :key="item.id">
-            <div class="device-header">
-              <a-checkbox v-model:checked="item.checked" class="check-btn">控制勾选按钮</a-checkbox>
-              <span class="status-item">网络状态</span>
-              <span class="status-item">运行状态</span>
-            </div>
-            <div class="device-info">
-              <div class="info-row">
-                <span class="info-label">皮带区域</span>
-                <span class="info-value">{{ item.beltArea }}</span>
-                <span class="info-label">设备位置</span>
-                <span class="info-value">{{ item.devicePos }}</span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">水量</span>
-                <span class="info-value">{{ item.waterPercent }}</span>
-                <span class="info-label">水压</span>
-                <span class="info-value">{{ item.waterPressure }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 中间区域：顶部Tab -->
-      <div class="center-panel">
-        <Nav></Nav>
-      </div>
-      <!-- 右侧面板：摄像头视频信号 -->
-      <div class="right-panel">
-        <div class="video-card">
-          <h3 class="video-title">摄像头视频信号</h3>
-          <div class="video-placeholder" v-for="i in 3" :key="i">
-            <div class="video-frame"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import Nav from '../components/nav.vue';
-const selectedBelt = ref('belt1');
-const beltArea = ref('1');
-const activeTab = ref('2'); // 默认选中喷淋系统管控
-const deviceList = ref([
-  { id: 1, checked: true, beltArea: '1#皮带区域', devicePos: '1#皮带-50米处', waterPercent: '86%', waterPressure: '1.4MPa' },
-  { id: 2, checked: true, beltArea: '1#皮带区域', devicePos: '1#皮带-100米处', waterPercent: '86%', waterPressure: '1.4MPa' },
-  { id: 3, checked: true, beltArea: '1#皮带区域', devicePos: '1#皮带-150米处', waterPercent: '86%', waterPressure: '1.4MPa' },
-  { id: 4, checked: true, beltArea: '1#皮带区域', devicePos: '1#皮带-200米处', waterPercent: '86%', waterPressure: '1.4MPa' },
-]);
-</script>
-
-<style scoped>
-.belt-control-page {
-  width: 100%;
-  height: 100%;
-  background: #0a1435;
-  color: #d0e8ff;
-  font-family: 'Microsoft YaHei', sans-serif;
-  overflow: hidden;
-}
-.belt-select,
-.area-select {
-  color: #d0e8ff;
-}
-.view-mode label {
-  margin-left: 10px;
-  cursor: pointer;
-}
-.pressure {
-  font-size: 14px;
-}
-.icons {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 16px;
-}
-.admin {
-  font-size: 14px;
-  margin-left: 8px;
-}
-
-/* 内容布局 */
-.content-layout {
-  display: flex;
-  height: calc(100% - 54px);
-  padding: 10px;
-  gap: 10px;
-}
-.right-panel {
-  width: 22%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  gap: 10px;
-}
-
-.center-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* 左侧面板样式 */
-.left-panel {
-  width: 22%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 10px;
-  border: 1px solid #2a52be;
-  padding: 10px;
-}
-
-/* 控制栏高度缩小 */
-.control-bar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-  background: rgba(15, 36, 87, 0.6);
-  border: 1px solid #2a52be;
-  border-radius: 4px;
-  min-height: 42px;
-}
-
-/* 设备列表容器：紧凑无间隔 */
-.device-list-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-/* 设备卡片统一高度、紧凑 */
-.device-card {
-  background: rgba(15, 36, 87, 0.6);
-  border: 1px solid #2a52be;
-  border-radius: 4px;
-  padding: 8px;
-  min-height: 185px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-/* 内容间距全部收紧 */
-.device-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 4px;
-  font-size: 12px;
-}
-.device-info {
-  font-size: 12px;
-}
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 2px;
-}
-/* 中间Tab样式 */
-.tab-container {
-  background: rgba(15, 36, 87, 0.6);
-  border: 1px solid #2a52be;
-  border-radius: 4px;
-  padding: 0 12px;
-}
-.custom-tabs {
-  --antd-tabs-bg: transparent;
-  --antd-tabs-color: #d0e8ff;
-  --antd-tabs-hover-color: #1890ff;
-  --antd-tabs-active-color: #1890ff;
-}
-.scene-container {
-  flex: 1;
-  background: rgba(10, 20, 53, 0.8);
-  border: 1px solid #2a52be;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.scene-placeholder {
-  text-align: center;
-  color: #a0c8ff;
-}
-.sub-text {
-  font-size: 12px;
-  margin-top: 4px;
-}
-
-/* 右侧面板样式 */
-.video-card {
-  background: rgba(15, 36, 87, 0.6);
-  border: 1px solid #2a52be;
-  border-radius: 4px;
-  padding: 12px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.video-title {
-  margin: 0;
-  font-size: 18px;
-  color: #fff;
-  text-align: center;
-}
-.video-placeholder {
-  flex: 1;
-}
-.video-frame {
-  width: 100%;
-  height: 100%;
-  border: 2px solid #2a52be;
-  border-radius: 4px;
-  background: transparent;
-  position: relative;
-}
-
-/* 透明下拉框样式 */
-:deep(.ant-select-selector) {
-  background: transparent !important;
-  border: none !important;
-  color: #d0e8ff !important;
-}
-</style>

src/views/vent/BeltLaneThreeLevelFire/WindControl/index.vue

@@ -1,249 +0,0 @@
-<template>
-  <div class="wind-control-page">
-    <div class="content-layout">
-      <!-- 左侧面板：短路风门管控 -->
-      <div class="left-panel">
-        <div class="panel-title">短路风门管控详情</div>
-        <!-- 风门数据列表 -->
-        <div class="door-list">
-          <div class="door-card" v-for="item in doorList" :key="item.id">
-            <div class="door-header">
-              <div class="header-row">
-                <span class="col">位置</span>
-                <span class="col">前门状态</span>
-                <span class="col">后门状态</span>
-                <span class="col">网络状态</span>
-                <a-button type="primary" class="one-key-btn">一键双开</a-button>
-              </div>
-              <div class="status-row">
-                <span class="col">{{ item.position }}</span>
-                <span class="col" :class="item.frontStatus === '打开' ? 'status-open' : 'status-close'">
-                  {{ item.frontStatus }}
-                </span>
-                <span class="col" :class="item.backStatus === '打开' ? 'status-open' : 'status-close'">
-                  {{ item.backStatus }}
-                </span>
-                <span class="col status-online">{{ item.networkStatus }}</span>
-              </div>
-            </div>
-            <!-- 模型展示占位div -->
-            <div class="model-placeholder">
-              <img :src="item.modelImg" alt="风门模型" class="model-img" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="center-panel">
-        <Nav></Nav>
-      </div>
-      <!-- 右侧面板：摄像头视频信号 -->
-      <div class="right-panel">
-        <div class="video-card">
-          <h3 class="video-title">摄像头视频信号</h3>
-          <div class="video-placeholder" v-for="i in 3" :key="i">
-            <div class="video-frame"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import Nav from '../components/nav.vue';
-const doorList = ref([
-  {
-    id: 1,
-    position: '16联巷短路风门',
-    frontStatus: '关闭',
-    backStatus: '关闭',
-    networkStatus: '在线',
-    modelImg: '',
-  },
-  {
-    id: 2,
-    position: '18联巷短路风门',
-    frontStatus: '打开',
-    backStatus: '打开',
-    networkStatus: '在线',
-    modelImg: '',
-  },
-  {
-    id: 3,
-    position: '23联巷短路风门',
-    frontStatus: '关闭',
-    backStatus: '关闭',
-    networkStatus: '在线',
-    modelImg: '',
-  },
-]);
-</script>
-
-<style scoped>
-.wind-control-page {
-  width: 100%;
-  height: 100%;
-  background: #0a1435;
-  color: #d0e8ff;
-  font-family: 'Microsoft YaHei', sans-serif;
-  overflow: hidden;
-}
-
-.content-layout {
-  display: flex;
-  height: calc(100% - 54px);
-  padding: 10px;
-  gap: 10px;
-}
-
-.center-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-/* 左侧面板 */
-.left-panel {
-  border: 1px solid #2a52be;
-  width: 22%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 10px;
-}
-
-.panel-title {
-  background: #1890ff;
-  color: #fff;
-  padding: 4px 12px;
-  border-radius: 4px;
-  font-size: 14px;
-  width: fit-content;
-  text-align: center;
-}
-
-.door-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  flex: 1;
-}
-
-.door-card {
-  background: rgba(15, 36, 87, 0.6);
-  border: 1px solid #2a52be;
-  border-radius: 4px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.door-header {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.header-row {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  font-weight: bold;
-  color: #fff;
-}
-
-.status-row {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-}
-
-.col {
-  flex: 1;
-  padding: 0 4px;
-}
-
-.one-key-btn {
-  padding: 2px 8px;
-  font-size: 12px;
-  background: #1890ff;
-  border-color: #1890ff;
-}
-
-.status-open {
-  color: #52c41a;
-  font-weight: bold;
-}
-
-.status-close {
-  color: #f5222d;
-  font-weight: bold;
-}
-
-.status-online {
-  color: #1890ff;
-  font-weight: bold;
-}
-
-/* 模型展示占位div */
-.model-placeholder {
-  width: 100%;
-  height: 120px;
-  background: rgba(10, 20, 53, 0.8);
-  border: 1px solid #2a52be;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.model-img {
-  width: 22%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  gap: 10px;
-  object-fit: cover;
-}
-
-/* 右侧面板 */
-.right-panel {
-  width: 22%;
-  display: flex;
-  flex-direction: column;
-}
-
-.video-card {
-  background: rgba(15, 36, 87, 0.6);
-  border: 1px solid #2a52be;
-  border-radius: 4px;
-  padding: 12px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.video-title {
-  margin: 0;
-  font-size: 18px;
-  color: #fff;
-  text-align: center;
-}
-
-.video-placeholder {
-  flex: 1;
-}
-
-.video-frame {
-  width: 100%;
-  height: 100%;
-  border: 2px solid #2a52be;
-  border-radius: 4px;
-  background: transparent;
-  position: relative;
-}
-</style>

src/views/vent/BeltLaneThreeLevelFire/components/nav.vue

@@ -1,97 +0,0 @@
-<template>
-  <!-- 外层容器：页面居中 -->
-  <div class="nav-container">
-    <div class="nav-menu">
-      <div class="nav-menu-left">
-        <div
-          v-for="(item, index) in menuList"
-          :key="index"
-          :class="activeIndex === index ? 'nav-menu-active' : 'nav-menu-item'"
-          @click="menuClick({ item, index })"
-        >
-          <span>{{ item.name }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
-  import { useRouter, useRoute } from 'vue-router';
-
-  const router = useRouter();
-  const route = useRoute();
-  // 当前激活菜单
-  const activeIndex = ref(0);
-  // 菜单列表
-  const menuList = ref([
-    {
-      name: '防灭火监测与预警',
-      targatUrl: '/BeltMonitorWarn/index',
-    },
-    {
-      name: '喷淋系统管控',
-      targatUrl: '/SprySystem/index',
-    },
-    {
-      name: '应急控风减灾',
-      targatUrl: '/WindControl/index',
-    },
-  ]);
-
-  // 点击切换菜单 + 路由
-  function menuClick(data) {
-    activeIndex.value = data.index;
-    router.push({ path: data.item.targatUrl });
-  }
-
-  // 页面刷新自动匹配当前路由
-  onMounted(() => {
-    const currentPath = route.path;
-    const idx = menuList.value.findIndex((item) => item.targatUrl === currentPath);
-    if (idx !== -1) activeIndex.value = idx;
-  });
-</script>
-
-<style scoped>
-  .nav-container {
-    display: flex;
-    justify-content: center;
-    padding: 12px 0;
-  }
-
-  .nav-menu {
-    width: 60%;
-    max-width: 900px;
-  }
-  .nav-menu-left {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    border: 1px solid #2a52be;
-    border-radius: 10px;
-  }
-
-  /* 默认样式 */
-  .nav-menu-item {
-    padding: 10px 22px;
-    font-size: 15px;
-    color: #bbb;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .nav-menu-item:hover {
-    color: #fff;
-  }
-
-  .nav-menu-active {
-    padding: 10px 22px;
-    font-size: 15px;
-    color: #fff !important;
-    font-weight: 500;
-    cursor: pointer;
-    border-bottom: 2px solid #1890ff; /* 选中下划线（可删） */
-  }
-</style>

src/views/vent/BeltLaneThreeLevelFire/home/beltFire.api.ts

@@ -1,13 +0,0 @@
-import { defHttp } from '/@/utils/http/axios';
-
-enum Api {
-  systemList = '/monitor/device',
-  list = '/monitor/system',
-}
-/**
- * 列表接口
- * @param params
- */
-export const list = (params) => defHttp.post({ url: Api.list, params });
-
-export const systemList = (params) => defHttp.post({ url: Api.systemList, params });

src/views/vent/BeltLaneThreeLevelFire/home/beltFire.data.ts

@@ -1,313 +0,0 @@
-import { Config } from '../../deviceManager/configurationTable/types';
-
-// 皮带巷三级防灭火
-export const testBeltLaneFire: Config[] = [
-  {
-    deviceType: 'pdhzfxInfo',
-    moduleName: '皮带火灾风险状态整体评价',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: false,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'complex_list1',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      complex_list1: [
-        {
-          type: 'A',
-          readFrom: 'pdhzfxInfo[0].sysList',
-          mapFromData: true,
-          items: [
-            {
-              title: '',
-              contents: [
-                {
-                  label: '${beltName}',
-                  value: '${warnlevel}',
-                  info: '',
-                },
-              ],
-            },
-          ],
-        },
-        // {
-        //   type: 'C',
-        //   readFrom: 'sysList',
-        //   mapFromData: true,
-        //   items: [
-        //     {
-        //       title: '',
-        //       contents: [
-        //         {
-        //           label: '${beltName}',
-        //           value: '${warnlevel}',
-        //           info: '',
-        //         },
-        //       ],
-        //     },
-        //   ],
-        // },
-      ],
-      preset: [],
-      to: '/BeltMonitorWarn/index',
-    },
-    showStyle: {
-      size: 'width:430px;height:350px;',
-      version: '原版',
-      position: 'top:30px;left:25px;',
-    },
-  },
-  {
-    deviceType: 'fmhjcInfo',
-    moduleName: '防灭火检测与预警信息',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'complex_list',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [
-        {
-          type: 'C',
-          readFrom: 'sysList',
-          mapFromData: true,
-          items: [
-            {
-              title: '',
-              contents: [
-                {
-                  label: '${deviceType}',
-                  value: '${warnLevel}',
-                  info: '',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      preset: [],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:430px;height:430px;',
-      version: '原版',
-      position: 'top:415px;left:25px;',
-    },
-  },
-  {
-    deviceType: 'plmhInfo',
-    moduleName: '喷淋灭火系统',
-    pageType: 'belt',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'list',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [
-        {
-          type: 'B',
-          readFrom: 'sysList',
-          items: [
-            {
-              label: '系统状态',
-              value: '${[0].netstatus}',
-              trans: {
-                '0': '离线',
-                '1': '正常',
-              },
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '运行状态',
-              value: '${[0].yxzt}',
-              trans: {
-                '0': '未喷淋',
-                '1': '正在喷淋',
-              },
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '喷淋水压状态',
-              value: '${[0].plsy}',
-              color: 'blue',
-              info: '',
-            },
-            {
-              label: '控制模式',
-              value: '${[0].kzms}',
-              color: 'blue',
-              info: '',
-            },
-          ],
-        },
-      ],
-      complex_list: [],
-      preset: [
-        {
-          readFrom: '',
-        },
-      ],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:430px;height:350px;',
-      version: '原版',
-      position: 'top:30px;right:25px;',
-    },
-  },
-  {
-    deviceType: 'yjkfArray',
-    moduleName: '应急控风减灾',
-    pageType: 'fire',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${beltName}',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'row',
-        items: [
-          {
-            name: 'table',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [
-        {
-          type: 'C',
-          readFrom: 'aqjkData',
-          columns: [
-            {
-              name: '设备位置',
-              prop: 'deviceName',
-            },
-            {
-              name: '前门状态',
-              prop: 'frontDoorStatus',
-            },
-            {
-              name: '后门状态',
-              prop: 'backDoorStatus',
-            },
-            {
-              name: '网络状态',
-              prop: 'netStatus',
-            },
-          ],
-        },
-      ],
-      list: [],
-      complex_list: [],
-      preset: [],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:430px;height:430px;',
-      version: '原版',
-      position: 'top:415px;right:25px;',
-    },
-  },
-];

src/views/vent/BeltLaneThreeLevelFire/home/components/ModuleCommon.vue

@@ -1,104 +0,0 @@
-<template>
-  <!-- 常用模块 -->
-  <Transition
-    :enter-active-class="`animate__animated  animate__fadeIn${capitalizedPosition}`"
-    :leave-active-class="`animate__animated  animate__fadeOut${capitalizedPosition}`"
-  >
-    <ventBox1 v-if="visible" :class="getModuleClass(showStyle)" :style="style">
-      <template v-if="moduleName" #title>
-        <div :class="{ 'cursor-pointer': !!moduleData.to }" style="font-weight: bold; font-style: italic" @click="redirectTo">{{ moduleName }}</div>
-      </template>
-      <template #container>
-        <slot>
-          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
-          <Content
-            :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
-            :moduleData="moduleData"
-            :data="selectedData"
-            :chartData="chartData"
-          />
-        </slot>
-      </template>
-    </ventBox1>
-  </Transition>
-</template>
-<script lang="ts" setup>
-import Header from './header.vue';
-import Content from './content.vue';
-// import ModuleLeft from './original/moduleLeft.vue';
-// import ModuleBottom from './original/moduleBottom.vue';
-import { computed, ref } from 'vue';
-import ventBox1 from './ventBox1.vue';
-import { openWindow } from '/@/utils';
-import { getFormattedText } from '../../../home/configurable/hooks/helper';
-// import { ModuleProps } from '../types';
-
-const props = defineProps<{
-  /** 配置的详细模块信息 */
-  moduleData: any;
-  /** 配置的详细样式信息 */
-  showStyle: any;
-  /** 该模块配置中的设备标识符 */
-  deviceType: string;
-  /** api返回的数据 */
-  data: any;
-  moduleName: string;
-  visible: boolean;
-  chartData?: any;
-}>();
-defineEmits(['close', 'click']);
-
-const { header } = props.moduleData;
-const selectedData = ref();
-
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
-});
-
-const capitalizedPosition = computed(() => {
-  return props.showStyle.position.includes('left') ? 'Left' : 'Right';
-});
-
-// 根据配置里的定位判断应该使用哪个class
-function getModuleClass({ size, position }) {
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'module-common module-common-longer';
-  }
-  return 'module-common';
-}
-
-function redirectTo() {
-  const { to } = props.moduleData;
-  if (!to) return;
-  openWindow(getFormattedText(selectedData.value, to));
-}
-</script>
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-.module-common .box1-center {
-  height: calc(100% - 48px);
-}
-
-:deep(.box1-center) {
-  height: calc(100% - 48px);
-}
-:deep(.box1-center > .box-container) {
-  height: 100%;
-  padding: 0 !important;
-  width: 100% !important;
-}
-.module-common-longer {
-  :deep(.box1-top) {
-    --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
-    background-image: url('/@/assets/images/beltFire/1-1.png');
-  }
-  :deep(.box1-bottom) {
-    --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
-    background-image: url('/@/assets/images/beltFire/1-2.png');
-  }
-}
-</style>

src/views/vent/BeltLaneThreeLevelFire/home/components/content.vue

@@ -1,386 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <!-- 主体内容部分 -->
-  <div class="content">
-    <!-- 背景 -->
-    <img v-if="background.show && background.type === 'image'" class="content__background" :src="background.link" />
-    <video
-      v-if="background.show && background.type === 'video' && background.isBoard"
-      class="content__background"
-      width="100%"
-      autoplay
-      loop
-      muted
-      disablepictureinpicture
-      playsinline
-    >
-      <source :src="background.link" />
-      Not Supportted Link Or Browser
-    </video>
-    <video
-      v-if="background.show && background.type === 'video' && !background.isBoard"
-      class="content__background_1"
-      width="100%"
-      autoplay
-      loop
-      muted
-      disablepictureinpicture
-      playsinline
-    >
-      <source :src="background.link" />
-      Not Supportted Link Or Browser
-    </video>
-    <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
-      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
-        <!-- 通常列表部分 -->
-        <template v-if="config.name === 'list'">
-          <CustomList class="content__module" :type="config.type" :list-config="config.items" />
-        </template>
-        <!-- 复杂列表部分 -->
-        <template v-if="config.name === 'gallery_list'">
-          <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
-        </template>
-        <!-- 复杂列表部分 -->
-        <template v-if="config.name === 'complex_list'">
-          <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
-        </template>
-        <template v-if="config.name === 'complex_list1'">
-          <ComplexList1 class="content__module" :type="config.type" :list-config="config.items" />
-        </template>
-        <!-- 表格部分，这部分通常是占一整个模块的 -->
-        <template v-if="config.name === 'table'">
-          <CustomTable
-            class="content__module text-center overflow-auto"
-            :type="config.type"
-            :columns="config.columns"
-            :auto-scroll="config.autoScroll"
-            :data="config.data"
-          />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
-import CustomList from './detail/ListOne.vue';
-import ComplexList from './detail/ListTwo.vue';
-import ComplexList1 from './detail/ListThree.vue';
-// import GalleryList from './detail/ListThree.vue';
-import CustomTable from './detail/CustomTable.vue';
-import { clone } from 'lodash-es';
-import { getData, getFormattedText } from '../../../home/configurable/hooks/helper';
-
-// import FIreWarn from './preset/FIreWarn.vue';
-// import FIreControl from './preset/FIreControl.vue';
-
-const props = defineProps<{
-  data: any;
-  moduleData: Config['moduleData'];
-  chartData: any;
-}>();
-
-const { background, layout } = props.moduleData;
-
-// 获取当原始配置带 items 项时的最终 items 配置
-function getItems(raw, items: CommonItem[]) {
-  return items.map((i) => {
-    return {
-      ...i,
-      label: getFormattedText(raw, i.label, i.trans),
-      value: getFormattedText(raw, i.value, i.trans),
-    };
-  });
-}
-
-// 获取当 List 组件配置带 items 项时的最终 items 配置
-function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-  if (mapFromData && Array.isArray(raw)) {
-    return raw.map((data) => {
-      const item = items[0];
-      return {
-        ...item,
-        label: getFormattedText(data, item.label, item.trans),
-        value: getFormattedText(data, item.value, item.trans),
-      };
-    });
-  }
-  return getItems(raw, items);
-}
-
-/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
-const layoutConfig = computed(() => {
-  const refData = props.data;
-  const list = clone(props.moduleData.list) || [];
-  const complex_list = clone(props.moduleData.complex_list) || [];
-  const complex_list1 = clone(props.moduleData.complex_list1) || [];
-  const table = clone(props.moduleData.table) || [];
-  const mockData = clone(props.chartData) || [];
-  return layout.items.reduce((arr: any[], item) => {
-    switch (item.name) {
-      case 'list': {
-        const cfg = list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getListItems(data, cfg.items, cfg.mapFromData),
-        });
-        break;
-      }
-      case 'complex_list': {
-        const cfg = complex_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
-          arr.push({
-            overflow: true,
-            ...item,
-            ...cfg,
-            items: (data || []).map((d) => {
-              return {
-                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                contents: firstListItem.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(d, e.label, e.trans),
-                    value: getFormattedText(d, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
-          });
-        } else {
-          arr.push({
-            overflow: true,
-            ...item,
-            ...cfg,
-            items: cfg.items.map((i) => {
-              return {
-                title: getFormattedText(data, i.title, i.trans),
-                contents: i.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label, e.trans),
-                    value: getFormattedText(data, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
-          });
-        }
-        break;
-      }
-      case 'gallery_list': {
-        const cfg = gallery_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-          galleryItems: getItems(data, cfg.galleryItems),
-        });
-        break;
-      }
-      case 'complex_list1': {
-        const cfg = complex_list1.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
-          arr.push({
-            overflow: true,
-            ...item,
-            ...cfg,
-            items: (data || []).map((d) => {
-              return {
-                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                contents: firstListItem.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(d, e.label, e.trans),
-                    value: getFormattedText(d, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
-          });
-        } else {
-          arr.push({
-            overflow: true,
-            ...item,
-            ...cfg,
-            items: cfg.items.map((i) => {
-              return {
-                title: getFormattedText(data, i.title, i.trans),
-                contents: i.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label, e.trans),
-                    value: getFormattedText(data, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
-          });
-        }
-        break;
-      }
-      case 'table': {
-        const cfg = table.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          ...cfg,
-          ...item,
-          columns: cfg.columns,
-          data,
-        });
-        console.log(arr, '11111111111');
-        break;
-      }
-      default: {
-        const cfg = preset.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          ...item,
-          data,
-          config: cfg,
-        });
-        break;
-      }
-    }
-    // console.log(arr,'arr---')
-    return arr;
-  }, []);
-});
-</script>
-<style lang="less" scoped>
-@import '@/design/theme.less';
-
-.content {
-  height: calc(100% - 30px);
-  position: relative;
-  // z-index: -2;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto; // 这里会导致样式无故添加滚动条
-  overflow-x: hidden;
-}
-
-.content__background {
-  width: 100%;
-  // height: 100%;
-  height: calc(100% - 65px);
-  position: absolute;
-  top: 65px;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-  padding: 5px;
-  box-sizing: border-box;
-}
-.content__background_1 {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-}
-
-.image__background {
-  width: 35%;
-  height: 61%;
-  left: 30%;
-}
-
-.content__module {
-  // margin-top: 5px;
-  // margin-bottom: 5px;
-  width: 100%;
-  height: 100%;
-}
-
-.content__module1 {
-  background: url('@/assets/images/vent/homeNew/databg/4.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  height: 129px;
-  margin-top: 20%;
-}
-
-.content__moduleFire {
-  width: 100%;
-  height: 100%;
-  margin-left: -24% !important;
-}
-
-.content__module_dust {
-  background: url('@/assets/images/vent/homeNew/bottomBg.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-}
-
-// .content__module:first-of-type {
-//   margin-top: 0;
-// }
-// .content__module:last-of-type {
-//   margin-bottom: 0;
-// }
-::-webkit-scrollbar {
-  width: 5px !important;
-}
-
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
-
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  /* background-color: transparent; */
-  color: #fff;
-}
-
-:deep(.zxm-select-arrow) {
-  color: #fff;
-}
-
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
-
-:deep(.zxm-select-selection-placeholder) {
-  color: #fff !important;
-}
-
-:deep(.dialog-overlay) {
-  width: 100%;
-  height: 100%;
-  position: unset;
-  box-shadow: unset;
-}
-
-::-webkit-scrollbar {
-  width: 5px !important;
-}
-
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
-</style>

src/views/vent/BeltLaneThreeLevelFire/home/components/detail/CustomTable.vue

@@ -1,171 +0,0 @@
-<template>
-  <div class="table__content">
-    <div class="table__content_label" :class="`table__content_label_${type}`">
-      <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
-    </div>
-    <div ref="scrollRef" class="table__content_list" :class="`table__content_list_${type}`">
-      <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
-        <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }" :class="`table__content__list_item_${type}`">
-          <slot :name="t.prop" :scope="item">
-            <span>
-              <span
-                v-if="t.prop === 'frontDoorStatus' || t.prop === 'backDoorStatus' || t.prop === 'netStatus'"
-                :class="`status-dot ${getStatusClass(get(item, t.prop))}`"
-              ></span>
-              {{ get(item, t.prop) }}
-            </span>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed, defineProps, ref } from 'vue';
-import _ from 'lodash';
-import { useAutoScroll } from '/@/hooks/core/useAutoScroll';
-
-let props = withDefaults(
-  defineProps<{
-    /** B | C */
-    type: string;
-    autoScroll: boolean;
-    /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
-    columns: { prop: string; name: string }[];
-    data: any[];
-    defaultValue: string;
-  }>(),
-  {
-    type: 'B',
-    autoScroll: false,
-    columns: () => [],
-    data: () => [],
-    defaultValue: '-',
-  }
-);
-
-const scrollRef = ref(null);
-if (props.autoScroll) {
-  useAutoScroll(scrollRef);
-}
-const getStatusClass = (status) => {
-  switch (status) {
-    case '在线':
-      return 'online';
-    case '开启':
-      return 'open';
-    case '关闭':
-    case '离线':
-      return 'offline';
-    default:
-      return '';
-  }
-};
-const flexBasis = computed(() => {
-  return Math.fround(100 / props.columns.length) + '%';
-});
-
-function get(o, p) {
-  const d = _.get(o, p);
-  return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
-}
-</script>
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-.table__content {
-  --image-content-label: url('/@/assets/images/beltFire/4-1.png');
-  --image-content-text: url('/@/assets/images/beltFire/4-2.png');
-  --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
-  --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 5px 0;
-
-  .table__content_label {
-    padding: 10px;
-    width: 400px;
-    height: 32px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .label-t {
-      text-align: center;
-      font-size: 14px;
-    }
-  }
-  .table__content_label_C {
-    background-position: center 100%;
-    background-size: 100% 40px;
-    background-repeat: no-repeat;
-    background-image: var(--image-content-label);
-    height: 40px;
-    .label-t {
-      background-repeat: no-repeat;
-      background-size: 80% auto;
-      background-position: center;
-      background-image: var(--image-list-head);
-    }
-  }
-
-  .table__content_list {
-    height: calc(100% - 32px);
-    width: 400px;
-    display: flex;
-    flex-direction: column;
-    padding: 5px 0;
-    box-sizing: border-box;
-    overflow-y: auto;
-    .table__content_list_row {
-      width: 100%;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      color: #fff;
-      margin-bottom: 5px;
-      span {
-        display: inline-block;
-        text-align: center;
-      }
-    }
-  }
-  .table__content_list_C {
-    .table__content_list_row {
-      min-height: 50px;
-      background-size: 100% auto;
-      background-repeat: no-repeat;
-      background-position: center bottom;
-      background-image: var(--image-content-text);
-    }
-  }
-
-  .status-dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    margin-right: 4px;
-  }
-
-  .status-dot.online {
-    background-color: #46ff9c;
-  }
-
-  .status-dot.open {
-    background-color: #2cb6ff;
-  }
-
-  .status-dot.offline,
-  .status-dot.closed {
-    background-color: gray;
-  }
-}
-</style>

src/views/vent/BeltLaneThreeLevelFire/home/components/detail/ListOne.vue

@@ -1,144 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="list flex" :class="`list_${type}`">
-    <div class="flex-grow" :class="`list__wrapper_${type}`">
-      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="list-item" :class="`list-item_${type}`">
-        <div class="list-item__content" :class="`list-item__content_${type} ${getBgClass(item.value)}`">
-          <div class="list-item__label"> {{ item.label }}</div>
-          <div class="list-item__value" :class="`list-item__value_${type}`" v-if="item.label != '控制模式'">
-            <span v-if="item.label === '系统状态' || item.label === '运行状态'" class="status_dot"></span>
-            {{ item.value }}
-          </div>
-          <div class="list-item__value" :class="`list-item__value_${type}`" v-else>
-            <!-- 单选按钮组 -->
-            <div class="radio-group">
-              <label class="radio-label">
-                <input
-                  type="radio"
-                  :name="`mode_${i}`"
-                  value="auto"
-                  :checked="item.value === '自动'"
-                  @change="$emit('mode-change', { index: i, mode: '自动' })"
-                />
-                <span>自动</span>
-              </label>
-              <label class="radio-label">
-                <input
-                  type="radio"
-                  :name="`mode_${i}`"
-                  value="manual"
-                  :checked="item.value === '手动'"
-                  @change="$emit('mode-change', { index: i, mode: '手动' })"
-                />
-                <span>手动</span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    listConfig: {
-      label: string;
-      value: string; // 低风险 | 一般风险 | 较大风险 | 严重风险 | 报警
-      color?: string;
-      info?: string;
-    }[];
-    type: string;
-  }>(),
-  {
-    listConfig: () => [],
-    type: 'A',
-  }
-);
-const getBgClass = (riskLevel: string) => {
-  switch (riskLevel) {
-    case '低风险':
-      return 'bg-lowRisk';
-    case '一般风险':
-      return 'bg-normalRisk';
-    case '较大风险':
-      return 'bg-greaterRisk ';
-    case '重大风险':
-      return 'bg-majorRisk';
-    case '报警':
-      return 'bg-warning';
-    default:
-      return 'bg-lowRisk';
-  }
-};
-</script>
-
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-.list {
-  background-repeat: no-repeat;
-  position: relative;
-}
-
-.list-item_B {
-  align-items: center;
-  text-align: center;
-  margin: 20px;
-  display: flex;
-}
-.list-item__content_B {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 42px;
-  padding: 0 30px;
-  color: #ffffff;
-  font-size: 13px;
-  background-image: url('/@/assets/images/beltFire/3-1.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-.list-item__content_B > .list-item__label {
-  padding-top: 10px;
-  font-size: 14px;
-}
-.list-item__content_B > .list-item__value {
-  padding-top: 10px;
-  font-size: 14px;
-  font-weight: bold;
-  color: #fff;
-}
-.radio-group {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  align-items: center;
-}
-
-.radio-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.radio-label input[type='radio'] {
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  cursor: pointer;
-}
-
-.status_dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin-right: 4px;
-  background-color: #46ff9c;
-}
-</style>

src/views/vent/BeltLaneThreeLevelFire/home/components/detail/ListThree.vue

@@ -1,131 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="list flex items-center" :class="`list_${type}`">
-    <div class="flex-grow" :class="`list_wrapper_${type}`">
-      <!-- 遍历每一组传感器数据 -->
-      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="list-item" :class="`list-item_${type}`">
-        <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type} ${getBgClass(ctx.value)}`">
-          <div class="list-item__label"> {{ ctx.label }}</div>
-          <div class="list-item__value" :class="`list-item__value_${type}`">
-            {{ ctx.value }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    listConfig: {
-      title: string;
-      contents: {
-        value: string;
-        color: string;
-        label?: string;
-        info?: string;
-      }[];
-    }[];
-    type: string;
-  }>(),
-  {
-    listConfig: () => [],
-    type: 'C',
-  }
-);
-
-const getBgClass = (riskLevel: string) => {
-  switch (riskLevel) {
-    case '低风险':
-      return 'bg-lowRisk';
-    case '一般风险':
-      return 'bg-normalRisk';
-    case '较大风险':
-      return 'bg-greaterRisk ';
-    case '重大风险':
-      return 'bg-majorRisk';
-    case '报警':
-      return 'bg-warning';
-    default:
-      return 'bg-lowRisk';
-  }
-};
-</script>
-
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-.list {
-  padding-left: 20px;
-  background-repeat: no-repeat;
-  position: relative;
-  display: flex;
-  align-items: center;
-  list-style: none;
-}
-
-.list-item_A {
-  align-items: center;
-  text-align: center;
-  margin: 10px 10px 17px 10px;
-  display: flex;
-  flex-direction: column; /* 竖排 */
-  gap: 5px; /* 间距 */
-}
-.list-item__content_A {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 35px;
-  padding: 0 12px;
-  color: #ffffff;
-  font-size: 13px;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-.list-item__content_A > .list-item__label {
-  padding-left: 40px;
-}
-.list-item__content_A > .list-item__value {
-  padding-right: 30px;
-  font-weight: bold;
-  font-style: italic;
-}
-.bg-lowRisk {
-  background-image: url('/@/assets/images/beltFire/lowRisk.png');
-}
-.bg-normalRisk {
-  background-image: url('/@/assets/images/beltFire/normalRisk.png');
-}
-.bg-greaterRisk {
-  background-image: url('/@/assets/images/beltFire/greaterRisk.png');
-}
-.bg-warning {
-  background-image: url('/@/assets/images/beltFire/warning.png');
-}
-.bg-majorRisk {
-  background-image: url('/@/assets/images/beltFire/majorRisk.png');
-}
-
-.list-item__content_A.bg-lowRisk .list-item__value {
-  color: #32ddff;
-}
-
-.list-item__content_A.bg-normalRisk .list-item__value {
-  color: #ffff00;
-}
-
-.list-item__content_A.bg-greaterRisk .list-item__value {
-  color: #ff9d17;
-}
-
-.list-item__content_A.bg-warning .list-item__value {
-  color: #ff0000;
-}
-
-.list-item__content_A.bg-majorRisk .list-item__value {
-  color: #ff3823;
-}
-</style>

src/views/vent/BeltLaneThreeLevelFire/home/components/detail/ListTwo.vue

@@ -1,142 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="list flex items-center" :class="`list_${type}`">
-    <div class="flex-grow" :class="`list_wrapper_${type}`">
-      <!-- 遍历每一组传感器数据 -->
-      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="list-item" :class="`list-item_${type}`">
-        <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
-          <div class="item-top">
-            <div class="sensor-icon"></div>
-            <div class="risk-text">{{ ctx.value }}</div>
-          </div>
-          <div class="item-bottom">
-            {{ ctx.label }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    listConfig: {
-      title: string;
-      contents: {
-        value: string;
-        color: string;
-        label?: string;
-        info?: string;
-      }[];
-    }[];
-    type: string;
-  }>(),
-  {
-    listConfig: () => [],
-    type: 'C',
-  }
-);
-</script>
-
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-.list {
-  padding-left: 20px;
-  background-repeat: no-repeat;
-  position: relative;
-  display: flex;
-  align-items: center;
-  list-style: none;
-}
-.list_wrapper_C {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 5px;
-}
-.list-item_C {
-  width: 80%;
-  padding: 5px 0;
-}
-
-.list-item__content_C {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  background-position: center;
-}
-
-.item-top {
-  width: 100%;
-  height: 80px;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-/* 外层list-item奇数时的图标 */
-.list-item:nth-child(odd) .list-item__content_C {
-  background-image: url('@/assets/images/beltFire/2-4.png');
-}
-
-/* 外层list-item偶数时的图标 */
-.list-item:nth-child(even) .list-item__content_C {
-  background-image: url('@/assets/images/beltFire/2-1.png');
-}
-/* 传感器图标 */
-.sensor-icon {
-  width: 100%;
-  height: 100%;
-  background-repeat: no-repeat;
-  background-size: 55% 100%;
-  background-position: center;
-  margin-bottom: 4px;
-}
-/* 外层list-item奇数时的图标 */
-.list-item:nth-child(odd) .sensor-icon {
-  background-image: url('@/assets/images/beltFire/2-5.png');
-}
-
-/* 外层list-item偶数时的图标 */
-.list-item:nth-child(even) .sensor-icon {
-  background-image: url('@/assets/images/beltFire/2-2.png');
-}
-/* 风险文字 */
-.risk-text {
-  white-space: nowrap;
-  width: 100%;
-  text-align: center;
-  color: #87ecf3;
-  font-size: 14px;
-  padding: 4px;
-  font-style: italic;
-  font-weight: bold;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  background-position: center;
-}
-/* 外层list-item奇数时的图标 */
-.list-item:nth-child(odd) .risk-text {
-  background-image: url('@/assets/images/beltFire/2-3.png');
-}
-
-/* 外层list-item偶数时的图标 */
-.list-item:nth-child(even) .risk-text {
-  background-image: url('@/assets/images/beltFire/2-6.png');
-}
-
-/* 底部：传感器名称 */
-.item-bottom {
-  margin-bottom: 5px;
-  text-align: center;
-  color: #fff;
-  font-size: 12px;
-  line-height: 1.2;
-  width: 100%;
-}
-</style>

src/views/vent/BeltLaneThreeLevelFire/home/components/header.vue

@@ -1,122 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <!-- Header部分 -->
-  <div
-    v-if="headerConfig.show"
-    class="w-100% flex costume-header"
-    :class="headerConfig.selector.toggleIcon ? 'costume-headerToggleIcon' : 'costume-header'"
-  >
-    <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
-    <Dropdown
-      v-if="headerConfig.selector.show"
-      class="flex-grow-1"
-      :class="!headerConfig.selector.toggleIcon ? 'costume-header_left' : ''"
-      :trigger="['click']"
-      :bordered="false"
-      @open-change="visible = $event"
-    >
-      <div class="flex-basis-100% flex flex-items-center" @click.prevent>
-        <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis" style="margin-left: 20px">
-          {{ selectedDeviceLabel }}
-        </div>
-        <CaretUpOutlined class="w-30px" v-if="visible" />
-        <CaretDownOutlined class="w-30px" v-else />
-      </div>
-      <template #overlay>
-        <Menu :selected-keys="[selectedDeviceID]" @click="selectHandler">
-          <MenuItem v-for="item in options" :key="item.value" :title="item.label">
-            {{ item.label }}
-          </MenuItem>
-        </Menu>
-      </template>
-    </Dropdown>
-    <template v-if="headerConfig.slot.show">
-      <div class="flex-basis-50% flex flex-items-center flex-grow-1 costume-header_right">
-        <SwapOutlined class="w-30px" />
-        <div class="flex-grow-1">
-          {{ selectedDeviceSlot }}
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref, watch } from 'vue';
-  import { Config } from '../../../deviceManager/configurationTable/types';
-  import { useInitModule } from '../../../home/configurable/hooks/useInit';
-  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
-  import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
-  const props = defineProps<{
-    moduleData: Config['moduleData'];
-    deviceType: Config['deviceType'];
-    data: any;
-  }>();
-
-  const emit = defineEmits(['select']);
-
-  const visible = ref(false);
-  const headerConfig = props.moduleData.header;
-  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
-    props.deviceType,
-    props.moduleData
-  );
-
-  function selectHandler({ key }) {
-    selectedDeviceID.value = key;
-    emit('select', selectedDevice.value);
-  }
-
-  watch(
-    () => props.data,
-    (d) => {
-      init(d);
-      emit('select', selectedDevice.value);
-    },
-    {
-      immediate: true,
-    }
-  );
-</script>
-<style scoped>
-  @import '/@/design/theme.less';
-
-  .costume-header {
-    height: 30px;
-    background: url('@/assets/images/beltFire/4-1.png');
-    background-size: 100% 100%;
-  }
-  .costume-headerToggleIcon {
-    height: 30px;
-    background: url('@/assets/images/beltFire/4-1.png');
-    background-size: 100% 100%;
-  }
-  .costume-header_left {
-    border-left: 3px solid;
-    border-right: 3px solid;
-    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-    border-image-slice: 1;
-  }
-  .costume-header_right {
-    border-right: 3px solid;
-    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-    border-image-slice: 1;
-  }
-  img {
-    width: 16px;
-    height: 16px;
-    margin-left: 8px;
-  }
-  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
-    /* background-color: transparent; */
-    color: #fff;
-  }
-  ::v-deep .zxm-select-arrow {
-    color: #fff;
-  }
-  ::v-deep .zxm-select-selection-item {
-    color: #fff !important;
-  }
-  ::v-deep .zxm-select-selection-placeholder {
-    color: #fff !important;
-  }
-</style>

src/views/vent/BeltLaneThreeLevelFire/home/components/ventBox1.vue

@@ -1,97 +0,0 @@
-<template>
-  <div class="vent-box1-bg">
-    <div class="box1-top">
-      <div class="title">
-        <slot name="title"></slot>
-      </div>
-    </div>
-    <div class="box1-center">
-      <div class="box-container">
-        <slot name="container"></slot>
-      </div>
-    </div>
-    <div class="box1-bottom"></div>
-  </div>
-</template>
-<script>
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: 'VentBox1',
-  setup() {},
-});
-</script>
-
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-.vent-box1-bg {
-  --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
-  --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
-  --image-box1-bottom1: url('/@/assets/images/beltFire/1-3.png');
-  --container-color: #00213236;
-  --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
-  width: 100%;
-  min-height: 80px;
-  .box1-top {
-    width: 65%;
-    height: 35px;
-    margin-left: 20px;
-    background: var(--image-box1-top) no-repeat;
-    background-size: 100% 100%;
-    z-index: 2;
-    position: relative;
-    .title {
-      width: 100%;
-      height: 35px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-    }
-  }
-  .box1-center {
-    width: 93%;
-    margin-left: 15px;
-    position: relative;
-
-    .box-container {
-      position: relative;
-      min-height: 50px;
-      padding: 10px;
-      color: #fff;
-      background-color: var(--container-color);
-      backdrop-filter: blur(5px);
-
-      &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 5px;
-        left: 0;
-        width: 1px;
-        height: calc(100% - 10px);
-        background-image: var(--container-image);
-      }
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        right: 1px;
-        top: 5px;
-        width: 1px;
-        height: calc(100% - 10px);
-        background: var(--container-image);
-      }
-    }
-  }
-  .box1-bottom {
-    width: 100%;
-    height: 97%;
-    background: var(--image-box1-bottom) no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    bottom: 0px;
-    pointer-events: none;
-    z-index: -1 !important;
-  }
-}
-</style>

src/views/vent/BeltLaneThreeLevelFire/home/index.vue

@@ -1,338 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="company-home">
-    <div class="border">
-      <customHeader>皮带巷三级防灭火系统</customHeader>
-      <div class="box-container">
-        <ModuleCommon
-          v-for="cfg in configs"
-          :key="cfg.deviceType"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :data="readData"
-          :visible="true"
-          :style="{ zIndex: 1 }"
-        />
-      </div>
-      <!-- 巷道模型组件 -->
-      <VentModal />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import customHeader from './customHeader.vue';
-import { useInitConfigs, useInitPage } from '../../home/configurable/hooks/useInit';
-import { testBeltLaneFire } from './beltFire.data';
-import ModuleCommon from './components/ModuleCommon.vue';
-import { list, systemList } from './beltFire.api';
-import { BDFireMock } from './mock';
-const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, updateData } = useInitPage('皮带巷三级防灭火系统');
-const readData = {
-  pdhzfxInfo: [
-    {
-      beltName: '测试1',
-      sysList: [
-        {
-          beltName: '东翼胶带运输大巷皮带',
-          warnlevel: '重大风险',
-        },
-        {
-          beltName: '1102主运顺槽皮带',
-          warnlevel: '报警',
-        },
-        {
-          beltName: '1101主运顺槽皮带',
-          warnlevel: '低分险',
-        },
-        {
-          beltName: '东翼胶带运输大巷皮带',
-          warnlevel: '一般风险',
-        },
-        {
-          beltName: '东翼胶带运输大巷皮带',
-          warnlevel: '较大风险',
-        },
-      ],
-    },
-  ],
-
-  // csdata: [
-  //   {
-  //     beltName: '东翼胶带运输大巷皮带',
-  //     warnlevel: '重大风险',
-  //   },
-  //   {
-  //     beltName: '1102主运顺槽皮带',
-  //     warnlevel: '报警',
-  //   },
-  //   {
-  //     beltName: '1101主运顺槽皮带',
-  //     warnlevel: '低分险',
-  //   },
-  //   {
-  //     beltName: '东翼胶带运输大巷皮带',
-  //     warnlevel: '一般风险',
-  //   },
-  //   {
-  //     beltName: '东翼胶带运输大巷皮带',
-  //     warnlevel: '较大风险',
-  //   },
-  // ],
-  plmhInfo: [
-    {
-      beltName: '测试1',
-      sysList: [
-        {
-          netstatus: '1',
-          yxzt: '1',
-          plsy: '1#区域 1.4MPa',
-          kzms: '手动',
-        },
-      ],
-    },
-    {
-      beltName: '测试2',
-      sysList: [
-        {
-          netstatus: '1',
-          yxzt: '1',
-          plqy: '1#区域',
-          plsy: '1.6MPa',
-          kzms: '自动',
-        },
-      ],
-    },
-  ],
-  fmhjcInfo: [
-    {
-      beltName: '测试1',
-      sysList: [
-        {
-          warnLevel: '一般风险',
-          deviceType: '微震测声传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '光纤测温传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'HCI传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '烟雾传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'CO传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '火焰传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '温度传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '多参数传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'AI视频火焰分析',
-        },
-      ],
-    },
-    {
-      beltName: '测试2',
-      sysList: [
-        {
-          warnLevel: '一般风险',
-          deviceType: '微震测声传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '光纤测温传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'HCI传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '烟雾传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'CO传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '火焰传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '温度传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: '多参数传感器',
-        },
-        {
-          warnLevel: '一般风险',
-          deviceType: 'AI视频火焰分析',
-        },
-      ],
-    },
-  ],
-  yjkfArray: [
-    {
-      beltName: '测试1',
-      aqjkData: [
-        {
-          deviceName: '风门1',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门2',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门3',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门4',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门5',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门6',
-          frontDoorStatus: '开启',
-          backDoorStatus: '开启',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门7',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门8',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-        {
-          deviceName: '风门9',
-          frontDoorStatus: '关闭',
-          backDoorStatus: '关闭',
-          netStatus: '在线',
-        },
-      ],
-    },
-  ],
-};
-// const readData = ref({});
-function refresh() {
-  fetchConfigs('belt').then(() => {
-    configs.value = testBeltLaneFire;
-    Promise.resolve(readData).then(updateData);
-    // updateEnhancedConfigs(configs.value);
-    // getDataSource();
-  });
-}
-// async function getDataSource() {
-//   const res = await list({ devicetype: 'belt', pagetype: 'normal' });
-//   let dataSource: any = [];
-//   dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : {};
-//   if (dataSource) {
-//     readData.value = Object.assign(dataSource, dataSource.readData);
-//   }
-// }
-
-// 查询关联设备列表
-// async function getDeviceList() {
-//   const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
-//   const result = res.msgTxt;
-//   const deviceArr = <DeviceType[]>[];
-//   result.forEach((item) => {
-//     const data = item['datalist'].filter((data: any) => {
-//       const readData = data.readData;
-//       return Object.assign(data, readData);
-//     });
-//     if (item.type != 'sys') {
-//       deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data });
-//     }
-//   });
-//   deviceList.value = deviceArr;
-//   deviceActive.value = deviceArr[0].deviceType;
-//   deviceChange(0);
-// }
-
-function initInterval() {
-  setInterval(() => {
-    refresh();
-  }, 60000);
-}
-onMounted(() => {
-  refresh();
-  initInterval();
-});
-</script>
-
-<style lang="less" scoped>
-.spray-wrapper {
-  width: 100%;
-  height: 100%;
-  background-image: url('/@/assets/images/beltFire/baseMap.png');
-  background-size: cover;
-}
-
-#spray3D {
-  pointer-events: all;
-}
-
-.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
-}
-.spray-wrapper :deep(.list-item_N:nth-child(1)) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
-}
-.spray-wrapper :deep(.list-item_N:nth-child(2)) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
-}
-.company-home {
-  background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  .border {
-    width: 100%;
-    height: 94%;
-    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
-    background-size: 100% 100%;
-  }
-}
-</style>

src/views/vent/home/configurable/belt/belt-new.vue

@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref, watch, computed } from 'vue';
-import customHeader from './components/customHeader-belt.vue';
+import customHeader from './components/customHeader.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import { testBeltNew, testYjkf, testSpary } from './configurable.data';
 import ModuleCommon from './components/ModuleCommon.vue';
@@ -68,7 +68,18 @@ const route = useRoute();
 // 初始化配置
 const { configs, fetchConfigs } = useInitConfigs();
 const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷智能管控');
-const pageType = computed(() => route.query.pageType || 'fireMonitor');
+const pageType = computed(() => {
+  const queryType = route.query.pageType;
+  if (queryType) {
+    return queryType;
+  } else {
+    const isFireMonitorPath = window.location.href.includes('fireMonitor');
+    const isEmergencyControlPath = window.location.href.includes('emergencyControl');
+    const isSprayControlPath = window.location.href.includes('sprayControl');
+    return isFireMonitorPath ? 'fireMonitor' : isEmergencyControlPath ? 'emergencyControl' : isSprayControlPath ? 'sprayControl' : 'fireMonitor';
+  }
+});
+
 // 下拉框选项
 const beltOptions = [
   { id: '1', beltName: '主运巷皮带 1' },
@@ -223,10 +234,10 @@ function getLevelClass(level: string) {
 // 刷新数据
 function refresh() {
   fetchConfigs('belt').then(() => {
-    if (route.query.pageType == 'fireMonitor') {
+    if (pageType.value == 'fireMonitor') {
       configs.value = testBeltNew;
       Promise.resolve(readData).then(updateData);
-    } else if (route.query.pageType == 'emergencyControl') {
+    } else if (pageType.value == 'emergencyControl') {
       const params = {
         devicetype: 'sys',
         systemID: '1637983899775242242',
@@ -234,7 +245,7 @@ function refresh() {
       };
       Promise.resolve(getSystem(params)).then(updateData);
       configs.value = testYjkf;
-    } else if (route.query.pageType == 'sprayControl') {
+    } else if (pageType.value == 'sprayControl') {
       configs.value = testSpary;
       Promise.resolve(readData).then(updateData);
     } else {

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

@@ -3,9 +3,9 @@
   <div class="company-home">
     <div class="border">
       <customHeader>皮带巷三级防灭火系统</customHeader>
-      <!-- <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+      <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
         <SubApp />
-      </div> -->
+      </div>
       <div class="box-container">
         <ModuleCommon
           v-for="cfg in configs"
@@ -79,7 +79,7 @@ const readData = {
         {
           netstatus: '1',
           yxzt: '1',
-          plqy: '1#区域',
+          plqy: '2#区域',
           plsy: '1.6MPa',
           kzms: '自动',
         },

src/views/vent/home/configurable/belt/components/BeltNav.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 const router = useRouter();
 const route = useRoute();
@@ -67,7 +67,18 @@ function handleNavClick(data: any) {
 }
 
 onMounted(() => {
-  const idx = menuList.value.findIndex((item) => item.pageType === route.query.pageType);
+  const pageTypePath = computed(() => {
+    const queryType = route.query.pageType;
+    if (queryType) {
+      return queryType;
+    } else {
+      const isFireMonitorPath = window.location.href.includes('fireMonitor');
+      const isEmergencyControlPath = window.location.href.includes('emergencyControl');
+      const isSprayControlPath = window.location.href.includes('sprayControl');
+      return isFireMonitorPath ? 'fireMonitor' : isEmergencyControlPath ? 'emergencyControl' : isSprayControlPath ? 'sprayControl' : 'fireMonitor';
+    }
+  });
+  const idx = menuList.value.findIndex((item) => item.pageType === pageTypePath.value);
   if (idx !== -1) activeIndex.value = idx;
 });
 </script>

src/views/vent/home/configurable/belt/components/ModuleCommon.vue

@@ -10,8 +10,9 @@
       </template>
       <template #container>
         <slot>
+          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event"></Header>
           <Content
-            :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
+            :style="{ height: header.show ? 'calc(100% - 30px)' : 'calc(100% - 20px)' }"
             :moduleData="moduleData"
             :data="selectedDevice"
             :chartData="chartData"
@@ -22,7 +23,7 @@
   </Transition>
 </template>
 <script lang="ts" setup>
-// import Header from './header.vue';
+import Header from './header.vue';
 import ContentBelt from './contentBelt.vue';
 import Content from '../../components/content.vue';
 // import ModuleLeft from './original/moduleLeft.vue';

src/views/vent/home/configurable/belt/components/ModuleCommonBelt.vue

@@ -60,7 +60,6 @@ const selectedData = ref();
 const style = computed(() => {
   const size = props.showStyle.size;
   const position = props.showStyle.position;
-  console.log(props.showStyle, '123123');
   return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
 });
 const pageType = computed(() => {

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

@@ -1,7 +1,12 @@
 <template>
   <div class="wind-control-page">
     <div class="title">
-      <div class="panel-title"><span>短路风门管控详情</span></div>
+      <div class="panel-title">
+        <div class="tab-title">短路风门管控详情</div>
+        <div>
+          <a-button class="btn" @click="yjControl()">应急控制</a-button>
+        </div>
+      </div>
     </div>
     <div class="content-layout">
       <!-- 左侧面板：短路风门管控 -->
@@ -44,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, defineProps } from 'vue';
+import { ref, onMounted, defineProps, watch } from 'vue';
 import { getFormattedText } from '../../../hooks/helper';
 import gateSVG from '../gateSVG.vue';
 const props = defineProps<{
@@ -66,6 +71,21 @@ const childRefs = ref<any[]>([]);
 const setChildRef = (el, index) => {
   childRefs.value[index] = el;
 };
+function yjControl() {
+  console.log('应急控制');
+}
+//模型动画
+function monitorAnimation(selectData, index) {
+  console.log(selectData, index, `${index}`);
+  childRefs.value[index]?.animate?.(selectData.frontGateOpen == '1', selectData.rearGateOpen == '1');
+}
+
+onMounted(() => {
+  props.data.forEach((el: any, index: number) => {
+    el = Object.assign(el, el.readData);
+    monitorAnimation(el, index);
+  });
+});
 onMounted(() => {});
 </script>
 
@@ -84,27 +104,40 @@ onMounted(() => {});
 }
 
 .panel-title {
-  width: 200px;
   height: 40px;
   color: #fff;
   border-radius: 4px;
   font-size: 14px;
   line-height: 50px;
-  margin: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-.panel-title span {
+.tab-title {
+  margin-top: 12px;
+  margin-left: 20px;
   background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
   border: 1px solid #40c4ff;
   color: #fff;
   font-size: 12px;
   padding: 2px 8px;
   height: 24px;
-  margin: auto;
   box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
+.btn {
+  margin-top: 22px;
+  margin-right: 20px;
+  background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
+  border: 1px solid #40c4ff;
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  height: 24px;
+  box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
+}
 .content-layout {
   display: flex;
   height: calc(100% - 54px);

src/views/vent/home/configurable/belt/components/ventBoxBelt.vue

@@ -71,8 +71,6 @@ export default defineComponent({
       min-height: 50px;
       padding: 10px;
       color: #fff;
-      background-color: var(--container-color);
-      backdrop-filter: blur(5px);
     }
   }
   .box1-center-fireMonitorMid {

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

@@ -11,7 +11,7 @@ export const testBeltLaneFire: Config[] = [
         show: false,
         readFrom: '',
         selector: {
-          show: true,
+          show: false,
           value: '${beltName}',
         },
         slot: {
@@ -389,7 +389,7 @@ export const testYjkf: Config[] = [
         show: false,
         readFrom: '',
         selector: {
-          show: true,
+          show: false,
           value: '${beltName}',
         },
         slot: {
@@ -398,7 +398,7 @@ export const testYjkf: Config[] = [
         },
       },
       background: {
-        show: true,
+        show: false,
         type: 'video',
         link: '',
       },
@@ -1099,7 +1099,7 @@ export const testSpary: Config[] = [
         show: false,
         readFrom: '',
         selector: {
-          show: true,
+          show: false,
           value: '${beltName}',
         },
         slot: {

src/views/vent/home/configurable/components/belt/CameraList.vue

@@ -1,44 +1,48 @@
 <template>
   <div class="camera-modal">
-    <div v-for="(group, index) in allVideos" :key="index" class="sensor-group">
-      <div class="group-title">{{ group.name }}</div>
+    <!-- 遍历每个设备 -->
+    <div v-for="(group, index) in props.data" :key="index" class="sensor-group">
+      <div class="group-title">{{ group.strname }}</div>
       <div class="camrea-area">
-        <div v-if="renderPlayer" ref="playerRef" style="display: flex; width: 100%; height: 100%; overflow-y: auto; pointer-events: none"> </div>
+        <div
+          v-if="renderPlayer"
+          ref="playerRef"
+          style="display: flex; width: 100%; height: 100%; overflow-y: auto; pointer-events: none; flex-direction: column"
+        ></div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, reactive, onBeforeUnmount, computed } from 'vue';
+import { onMounted, ref, reactive, computed, onBeforeUnmount } from 'vue';
 import { useCamera } from '/@/hooks/system/useCamera';
-
 const props = defineProps<{
   config: Array<{
     title: string;
-    contents: Array<{
-      code: string;
-    }>;
+    contents: Array<{ code: string }>;
   }>;
-  data: {
-    [key: string]: any;
-  };
+  data: any[];
 }>();
 const { getCamera, removeCamera } = useCamera();
-const playerRef = ref();
+const playerRef = ref<any[]>([]);
 const renderPlayer = ref(true);
 const allVideos = computed(() => {
   return props.data?.flatMap((item) => item.cameras || []) || [];
 });
-const cameraIds = computed(() => {
-  // 把所有 cameras 里的 id 全部抽出来
-  return props.data?.flatMap((item) => item.cameras?.map((cam) => cam.id) || []) || [];
+
+let cameraD: any = computed(() => {
+  let cameras: any[] = [];
+
+  const result: any = [];
+  cameras = result[1];
+  return cameras;
 });
 
 onMounted(async () => {
-  await getCamera(cameraIds.value, playerRef, renderPlayer);
+  await getCamera(playerRef, renderPlayer, cameraD.value);
 });
-
+// 销毁时清理所有视频
 onBeforeUnmount(() => {
   removeCamera(playerRef);
 });
@@ -53,11 +57,11 @@ onBeforeUnmount(() => {
     background: url('@/assets/images/beltFire/fireMonitor/2-1.png') no-repeat;
     background-size: 100% 100%;
     padding: 10px;
-    height: 280px;
+    height: 580px;
   }
   .group-title {
     background: url('@/assets/images/beltFire/fireMonitor/2-2.png') no-repeat;
-    background-size: 35% 100%;
+    background-size: 45% 100%;
     color: #fff;
     font-size: 12px;
     font-weight: bold;
@@ -93,4 +97,4 @@ onBeforeUnmount(() => {
     align-self: auto !important;
   }
 }
-</style>
+</style>

src/views/vent/home/configurable/components/belt/VehicleCOAnalysis.vue

@@ -105,7 +105,6 @@ const filteredList = (type: string) => {
 const toggleSwitch = () => {
   // const isOn = monitData.isRisk;
   isOn.value = !isOn.value;
-  console.log(monitData.isRisk, '123123');
 };
 // --- 方法：获取状态类名和文本 ---
 const getStatusClass = (status: string) => {

src/views/vent/home/configurable/components/belt/WarningResultList.vue

@@ -60,7 +60,6 @@ const props = defineProps<{
   };
 }>();
 onMounted(() => {
-  console.log(props.config, '123123');
 });
 </script>
 

src/views/vent/home/configurable/components/preset/nitrogenBtnList.vue

@@ -54,7 +54,6 @@ const handleButtonConfirm = inject<(button: ButtonItem) => void>(
  */
 const handleConfirm = async (inputPassword: string) => {
   try {
-    console.log(globalConfig?.simulatedPassword, '123123');
     const data = {
       paramcode: currentButton.value.value,
       password: inputPassword || globalConfig?.simulatedPassword,