[Feat 0000] 防灭火监测预警

src/assets/images/beltFire/2-6.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25.71" height="25.198" viewBox="0 0 25.71 25.198">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="1" stop-color="#ff5353"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57940" data-name="路径 57940" d="M20.831,23.127a1.543,1.543,0,0,0-.782-.411.376.376,0,0,1-.311-.366V13.663a6.955,6.955,0,0,0-13.908-.052V22.35a.376.376,0,0,1-.311.366A1.522,1.522,0,0,0,4.283,24.2h17a1.5,1.5,0,0,0-.452-1.07ZM14.118,10.965l-.468,4.1h1.838L11.45,20.795l.468-4.1h-1.84ZM12.783,4.915a.764.764,0,0,1-.773-.756V.756a.773.773,0,0,1,1.545,0v3.4A.764.764,0,0,1,12.783,4.915ZM7.181,7a.782.782,0,0,1-1.055-.276L4.387,3.774a.748.748,0,0,1,.283-1.033.782.782,0,0,1,1.055.276L7.463,5.964A.748.748,0,0,1,7.181,7Zm11.2,0a.782.782,0,0,0,1.055-.276l1.739-2.947A.748.748,0,0,0,20.9,2.741a.782.782,0,0,0-1.055.276L18.1,5.964A.748.748,0,0,0,18.385,7ZM5.309,10.513a.773.773,0,0,1-.947.534L1,10.168a.757.757,0,0,1-.548-.926A.773.773,0,0,1,1.4,8.708l3.359.881A.753.753,0,0,1,5.309,10.513Zm14.947,0a.773.773,0,0,0,.947.534l3.359-.881a.753.753,0,0,0,.546-.926.773.773,0,0,0-.947-.534L20.8,9.587A.757.757,0,0,0,20.256,10.513Z" transform="translate(0.073 0.5)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

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

@@ -83,9 +83,12 @@ const readData = {
       warningLevel: '一般风险',
       sysList: [
         {
-          pos: '1#皮带区域',
-          vehicle: '车辆23425',
-          status: '0',
+          time: '2026-03-21 13:23:34',
+          area: '3#皮带区域',
+          type: 'CO浓度异常',
+          status: '三级预警',
+          advice: '立即检查该区域设备，启动应急预案',
+          action: '启动喷淋',
         },
         {
           time: '2026-03-21 13:23:34',

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

@@ -28,11 +28,11 @@ import { onMounted, ref } from 'vue';
 import customHeader from './components/customHeader-belt.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import { testBeltLaneFire } from './configurable.data';
-import ModuleCommon from './components/ModuleCommonBelt.vue';
+import ModuleCommon from './components/ModuleCommon.vue';
 import SubApp from '/@/components/vent/micro/createSubApp.vue';
 // import { BDFireMock } from './mock';
 const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, updateData } = useInitPage('皮带巷三级防灭火系统');
+const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
 const readData = {
   pdhzfxInfo: [
     {
@@ -300,33 +300,6 @@ function refresh() {
     // 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(() => {

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

@@ -10,7 +10,6 @@
       </template>
       <template #container>
         <slot>
-          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event"></Header>
           <Content
             :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
             :moduleData="moduleData"
@@ -23,7 +22,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

@@ -82,7 +82,7 @@ function getModuleClass({ size, position }) {
 function redirectTo() {
   const { to } = props.moduleData;
   if (!to) return;
-  openWindow(getFormattedText(selectedData.value, to));
+  openWindow(getFormattedText(props.data, to));
 }
 
 watch(

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

@@ -32,6 +32,9 @@ export default defineComponent({
   --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');
+  --image-box1-left1: url('/@/assets/images/beltFire/1-4.png');
+  --image-box1-mid: url('/@/assets/images/beltFire/1-5.png');
+  --image-box1-right: url('/@/assets/images/beltFire/1-6.png');
   --container-color: #00213236;
   --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
   width: 100%;
@@ -56,6 +59,9 @@ export default defineComponent({
   .box1-top-beltYjkf {
     margin-top: 13px;
   }
+  .box1-top-fireMonitorMid {
+    width: 30% !important;
+  }
   .box1-center {
     width: 93%;
     margin-left: 15px;
@@ -69,6 +75,10 @@ export default defineComponent({
       backdrop-filter: blur(5px);
     }
   }
+  .box1-center-fireMonitorMid {
+    margin-left: 30px !important;
+    margin-bottom: 10px !important;
+  }
   .box1-top-beltYjkf1 {
     margin-top: 12px;
   }
@@ -101,5 +111,13 @@ export default defineComponent({
     background: var(--image-box1-bottom1) no-repeat;
     background-size: 100% 100%;
   }
+  .box1-bottom-fireMonitorLeft {
+    background: var(--image-box1-left1) no-repeat;
+    background-size: 100% 100%;
+  }
+  .box1-bottom-fireMonitorMid {
+    background: var(--image-box1-mid) no-repeat !important;
+    background-size: 100% 100% !important;
+  }
 }
 </style>

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

@@ -374,7 +374,7 @@ export const testYjkf: Config[] = [
   {
     deviceType: '',
     moduleName: '摄像头视频信号',
-    pageType: 'emergencyControl',
+    pageType: 'beltYjkf',
     moduleData: {
       header: {
         show: false,
@@ -424,7 +424,7 @@ export const testBeltNew: Config[] = [
   {
     deviceType: '',
     moduleName: '火灾监测设备报警与分析',
-    pageType: 'fireMonitor',
+    pageType: 'fireMonitorLeft',
     moduleData: {
       header: {
         show: false,
@@ -494,7 +494,7 @@ export const testBeltNew: Config[] = [
                 },
                 {
                   label: '最大值产生于',
-                  code: 'maxTime',
+                  code: '${wz.maxTime}',
                   color: 'white',
                 },
               ],
@@ -670,7 +670,7 @@ export const testBeltNew: Config[] = [
   {
     deviceType: '',
     moduleName: '预警结果',
-    pageType: 'fireMonitor',
+    pageType: 'fireMonitorMid',
     moduleData: {
       header: {
         show: false,
@@ -707,14 +707,14 @@ export const testBeltNew: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: '',
+          readFrom: 'pdhzfxInfo[0]',
           type: 'C',
           tableReadFrom: 'sysList',
           columns: [
             {
               name: '时间',
               prop: 'time',
-              width: '120px',
+              width: '180px',
             },
             {
               name: '区域',

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

@@ -3,19 +3,12 @@
     <!-- 顶部标题栏 -->
     <div class="panel-header">
       <div class="header-left">
-        <svg class="icon-fire" viewBox="0 0 24 24" width="20" height="20">
-          <path
-            fill="currentColor"
-            d="M12.7 3.3C11.2 2.4 9.5 2 7.7 2 4.8 2 2.5 4.3 2.5 7.2c0 1.4 0.4 2.7 1 3.8 1.1 1.8 2.9 3.2 4.9 3.7 0.2 0.1 0.4 0.1 0.6 0.1 0.6 0 1.2-0.3 1.5-0.8 0.3-0.5 0.2-1.1 0.1-1.7-0.2-1.1-0.1-2.3 0.3-3.4 0.7-1.7 2.1-3.1 3.8-3.8 0.8-0.3 1.6-0.4 2.4-0.4 1.7 0 3.4 0.7 4.7 2 1.3 1.3 2 3 2 4.7 0 1.1-0.3 2.2-0.8 3.1-0.2 0.4-0.2 0.9 0 1.3 0.2 0.4 0.6 0.7 1.1 0.7 0.5 0 0.9-0.3 1.1-0.7 0.7-1.2 1.1-2.6 1.1-4.1 0-2.4-0.9-4.7-2.5-6.3-1.4-1.4-3.2-2.3-5.1-2.6-0.1 0-0.2-.1-0.3-.1s-0.2.1-0.3.1c-0.2.1-0.3.1-0.4.1z"
-          />
-        </svg>
-        <span class="title-text">{{ config.otherProps.title }}</span>
+        <div class="icon-fire"></div>
       </div>
       <div class="header-right">
+        <span class="title-text">{{ config.otherProps.title }}</span>
         <div class="risk-tag high-risk">
-          <svg class="icon-dot" viewBox="0 0 16 16" width="10" height="10">
-            <circle cx="8" cy="8" r="8" fill="red" />
-          </svg>
+          <div class="status-dot"></div>
           <span v-if="!!data" class="risk-text">{{ data[config.otherProps.prop] }}</span>
         </div>
       </div>
@@ -46,157 +39,163 @@
 </template>
 
 <script setup lang="ts">
-  const props = defineProps<{
-    config: {
-      tableReadFrom: string;
-      columns: {
-        name: string;
-        prop: string;
-        width?: string; // 增加宽度配置
-        render?: (row: any) => string;
-      }[];
-      otherProps: {
-        title: string;
-        prop: string;
-      };
-    };
-    data: {
-      [key: string]: any;
+import { onMounted } from 'vue';
+
+const props = defineProps<{
+  config: {
+    tableReadFrom: string;
+    columns: {
+      name: string;
+      prop: string;
+      width?: string; // 增加宽度配置
+      render?: (row: any) => string;
+    }[];
+    otherProps: {
+      title: string;
+      prop: string;
     };
-  }>();
+  };
+  data: {
+    [key: string]: any;
+  };
+}>();
+onMounted(() => {});
 </script>
 
 <style scoped lang="less">
-  // 定义主题变量
-  @primary-bg: #0a192f;
-  @secondary-bg: #112240;
-  @text-color: #e6f1ff;
-  @primary-color: #00e1ff; // 青色高亮
-  @danger-color: #ff4d4d; // 红色警告
-  @border-color: #1a3b5d;
-
-  .warning-result-panel {
-    background-color: @primary-bg;
-    border: 1px solid @border-color;
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-    font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Arial', sans-serif;
-    color: @text-color;
-  }
-
-  /* --- 顶部标题栏 --- */
-  .panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 15px;
-    border-bottom: 1px solid @border-color;
-    margin-bottom: 20px;
-  }
-
-  .header-left {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 16px;
-    font-weight: bold;
-    color: @primary-color;
-    letter-spacing: 1px;
-  }
-
+.warning-result-panel {
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Arial', sans-serif;
+}
+
+/* --- 顶部标题栏 --- */
+.panel-header {
+  position: relative;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  padding-bottom: 15px;
+  border-bottom: 1px dashed #0e324b;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+
+.title-text {
+  margin-left: 20px;
+}
+
+.icon-fire {
+  background: url('@/assets/images/beltFire/2-6.svg') no-repeat;
+  background-size: 100% 100%;
+  width: 20px;
+  height: 20px;
+  margin-top: -2px;
+}
+
+.header-right {
+  margin-left: 10px;
+  height: 30px;
+  width: 50%;
+  background: url('@/assets/images/beltFire/2-7.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   .title-text {
-    font-size: 18px;
-  }
-
-  .icon-fire {
-    fill: @primary-color;
-    margin-top: -2px;
-  }
-
-  .header-right {
-    display: flex;
-    align-items: center;
-  }
-
-  .risk-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 12px;
-    border-radius: 4px;
     font-size: 14px;
-    font-weight: bold;
-    background: rgba(255, 77, 77, 0.2);
-    color: @danger-color;
-    border: 1px solid @danger-color;
   }
-
-  .icon-dot {
-    fill: red;
-  }
-
-  /* --- 表格样式 --- */
-  .table-container {
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .warning-table {
-    width: 100%;
-    border-collapse: collapse;
-    min-width: 800px; // 防止内容太少表格塌陷
-  }
-
-  /* 表头 */
-  thead tr {
-    background-color: @secondary-bg;
-  }
-
-  th {
-    padding: 12px 15px;
-    text-align: left;
-    color: @primary-color;
-    font-size: 14px;
-    font-weight: bold;
-    border-bottom: 1px solid @border-color;
-    vertical-align: middle;
-  }
-
-  /* 表格主体 */
-  .table-row {
-    transition: background-color 0.2s ease;
-    &:nth-child(even) {
-      background-color: rgba(255, 255, 255, 0.03); // 隔行变色
-    }
-    &:hover {
-      background-color: rgba(0, 225, 255, 0.1); // 悬停高亮
-    }
+  .status-dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 4px;
+    background-color: #ff0000;
+    box-shadow: 0 0 6px 2px rgba(255, 45, 45, 0.6);
   }
-
-  .table-cell {
-    padding: 12px 15px;
+}
+
+.risk-tag {
+  margin-right: 30%;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 4px;
+  .risk-text {
     font-size: 14px;
-    color: #aebccf;
-    border-bottom: 1px solid @border-color;
-    vertical-align: middle;
-  }
-
-  /* 操作列按钮样式 */
-  .btn-start-spray {
-    background-color: @primary-color;
-    color: #000;
-    border: none;
-    padding: 4px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 12px;
     font-weight: bold;
-    transition: all 0.2s;
-    &:hover {
-      background-color: #00fffd;
-      transform: translateY(-1px);
-    }
+    font-style: italic;
   }
+}
+
+.icon-dot {
+  fill: red;
+}
+
+/* --- 表格样式 --- */
+.table-container {
+  width: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.warning-table {
+  width: 100%;
+  min-width: 900px; // 防止内容太少表格塌陷
+}
+
+thead {
+  background: url('@/assets/images/beltFire/2-8.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+/* 表头 */
+thead tr {
+  color: #38e4ef;
+}
+
+th {
+  padding: 5px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: bold;
+  vertical-align: middle;
+}
+
+/* 表格主体 */
+.table-row {
+  height: 20px;
+  background: url('@/assets/images/beltFire/2-9.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.table-cell {
+  padding: 12px 15px;
+  font-size: 14px;
+  color: #aebccf;
+  vertical-align: middle;
+}
+
+/* 操作列按钮样式 */
+.btn-start-spray {
+  background: #2192d9;
+  color: #fff;
+  border: none;
+  padding: 4px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: bold;
+  transition: all 0.2s;
+}
 </style>

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

@@ -495,7 +495,6 @@ const layoutConfig = computed(() => {
         });
         break;
       }
-
       default: {
         const cfg = preset.shift();
         if (!cfg) break;

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

@@ -16,7 +16,15 @@
       @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">
+        <img
+          style="margin-right: 10px"
+          v-if="headerConfig.selector.toggleIcon"
+          src="@/assets/images/home-container/configurable/electroChamper/2-2.png"
+          alt=""
+        />
+        <SwapOutlined v-else class="w-30px" />
+
+        <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
           {{ selectedDeviceLabel }}
         </div>
         <CaretUpOutlined class="w-30px" v-if="visible" />
@@ -82,12 +90,11 @@ watch(
 
 .costume-header {
   height: 30px;
-  background: url('@/assets/images/beltFire/4-1.png');
-  background-size: 100% 100%;
+  background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity));
 }
 .costume-headerToggleIcon {
   height: 30px;
-  background: url('@/assets/images/beltFire/4-1.png');
+  background: url('@/assets/images/home-container/configurable/electroChamper/2-1.png');
   background-size: 100% 100%;
 }
 .costume-header_left {