[Feat 0000]皮带巷三级防灭火

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

@@ -1,10 +1,5 @@
 <template>
   <div class="belt-control-page">
-    <!-- 顶部标题栏 -->
-    <!-- <div class="header-bar">
-      <div class="center-title">皮带巷智能管控</div>
-    </div> -->
-
     <div class="content-layout">
       <!-- 左侧面板：3个模块 -->
       <div class="left-panel">
@@ -184,17 +179,6 @@ const activeTab = ref('1');
   overflow: hidden;
 }
 
-/* 顶部标题栏 */
-.header-bar {
-  height: 50px;
-  background: linear-gradient(90deg, #0f2457, #1a3b7a);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-  border-bottom: 1px solid #2a52be;
-}
-
 .left-header,
 .right-header {
   display: flex;

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

@@ -1,102 +1,59 @@
 <template>
   <div class="belt-control-page">
-    <!-- 顶部标题栏 -->
-    <!-- <div class="header-bar">
-      <div class="center-title">皮带巷智能管控</div>
-    </div> -->
-
     <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 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>
 
-        <!-- 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 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="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 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>
-
-      <!-- 右侧面板：3个模块 -->
-      <div class="right-panel"> </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>
@@ -105,7 +62,14 @@
 import { ref } from 'vue';
 import Nav from '../components/nav.vue';
 const selectedBelt = ref('belt1');
-const activeTab = ref('1');
+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>
@@ -117,52 +81,23 @@ const activeTab = ref('1');
   font-family: 'Microsoft YaHei', sans-serif;
   overflow: hidden;
 }
-
-/* 顶部标题栏 */
-.header-bar {
-  height: 50px;
-  background: linear-gradient(90deg, #0f2457, #1a3b7a);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-  border-bottom: 1px solid #2a52be;
-}
-
-.left-header,
-.right-header {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.center-title {
-  font-size: 24px;
-  font-weight: bold;
-  color: #fff;
-}
-
-.belt-select {
+.belt-select,
+.area-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;
@@ -175,8 +110,6 @@ const activeTab = ref('1');
   padding: 10px;
   gap: 10px;
 }
-
-.left-panel,
 .right-panel {
   width: 22%;
   display: flex;
@@ -192,78 +125,129 @@ const activeTab = ref('1');
   gap: 10px;
 }
 
-/* 卡片样式 */
-.panel-card {
-  background: rgba(15, 36, 87, 0.6);
-  border: 1px solid #3b8ad4;
-  border-radius: 4px;
-  padding: 12px;
-  flex: 1;
+/* 左侧面板样式 */
+.left-panel {
+  width: 22%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 10px;
+  border: 1px solid #2a52be;
+  padding: 10px;
 }
 
-.panel-title {
-  margin: 0 0 12px 0;
-  font-size: 16px;
-  color: #fff;
-  text-align: center;
+/* 控制栏高度缩小 */
+.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;
 }
 
-.data-row {
+/* 设备列表容器：紧凑无间隔 */
+.device-list-wrapper {
+  flex: 1;
   display: flex;
-  justify-content: space-around;
-  margin-bottom: 12px;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.data-item {
-  text-align: center;
+/* 设备卡片统一高度、紧凑 */
+.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;
 }
 
-.data-icon {
-  font-size: 20px;
+/* 内容间距全部收紧 */
+.device-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   margin-bottom: 4px;
+  font-size: 12px;
 }
-
-.data-label {
+.device-info {
   font-size: 12px;
-  color: #a0c8ff;
-  margin-bottom: 4px;
 }
-
-.data-value {
-  font-size: 18px;
-  font-weight: bold;
-  color: #1890ff;
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2px;
 }
-
-.alarm-info {
-  font-size: 12px;
-  border-top: 1px dashed #2a52be;
-  padding-top: 8px;
+/* 中间Tab样式 */
+.tab-container {
+  background: rgba(15, 36, 87, 0.6);
+  border: 1px solid #2a52be;
+  border-radius: 4px;
+  padding: 0 12px;
 }
-
-.alarm-status {
+.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;
-  margin-bottom: 6px;
+  justify-content: center;
 }
-
-.status-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin-right: 6px;
+.scene-placeholder {
+  text-align: center;
+  color: #a0c8ff;
 }
-
-.status-dot.green {
-  background: #52c41a;
+.sub-text {
+  font-size: 12px;
+  margin-top: 4px;
 }
 
-.status-dot.red {
-  background: #f5222d;
+/* 右侧面板样式 */
+.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;
 }
 
-.alarm-detailalarm-detail {
-  color: #a0c8ff;
+/* 透明下拉框样式 */
+:deep(.ant-select-selector) {
+  background: transparent !important;
+  border: none !important;
+  color: #d0e8ff !important;
 }
 </style>

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

@@ -0,0 +1,250 @@
+<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

@@ -36,7 +36,7 @@ const menuList = ref([
   },
   {
     name: '应急控风减灾',
-    targatUrl: '',
+    targatUrl: '/WindControl/index',
   },
 ]);