矿井火灾预警系统页面搭建

src/views/vent/deviceManager/configurationTable/types.ts

@@ -146,7 +146,7 @@ export interface CommonItem {
 
 export interface ModuleDataBoard extends ReadFrom {
   /** 展示牌预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'New' | 'New1' | 'New2' | 'New3';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'New' | 'New1' | 'New2' | 'New3'| 'J' | 'K';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top' | 'new-top' | 'new1-top' | 'new2-top' | 'new3-top';
   /** 核心配置，每个展示牌对应一项 */
@@ -155,7 +155,7 @@ export interface ModuleDataBoard extends ReadFrom {
 
 export interface ModuleDataList extends ReadFrom {
   /** 列表预设的背景类型 */
-  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'timelineNew' | 'fireList';
+  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'timelineNew' | 'fireList' | 'L' | 'M';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */
@@ -272,7 +272,7 @@ export interface ModuleDataChart extends ReadFrom {
 
 export interface ModuleDataTable extends ReadFrom {
   /** 表格的预设样式 */
-  type: 'A' | 'B' | 'C';
+  type: 'A' | 'B' | 'C' | 'D';
   /** 核心配置，每个表格列对应一项 */
   columns: {
     /** 数据说明，注意该项不支持 formatter 格式 */
@@ -289,7 +289,7 @@ export interface ModuleDataPreset extends ReadFrom {
 
 export interface ModuleDataComplexList extends ReadFrom {
   /** 列表预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */

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

@@ -0,0 +1,208 @@
+<template>
+  <div class="module-mine" :style="style" :class="moduleClass">
+    <!-- 标题栏 -->
+    <div v-if="moduleName" class="module-title">
+      <div class="title-content" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">
+        {{ moduleName }}
+      </div>
+      <!-- 右侧插槽内容（如有） -->
+      <div class="title-right" v-if="header.show && header.slot.show">
+        {{ getFormattedText(selectedDevice, header.slot.value) }}
+      </div>
+    </div>
+    <!-- 下拉选择框，单独一行放在标题栏下方 -->
+    <div class="module-selector-row" v-if="header.show && header.selector.show">
+      <a-select
+        size="middle"
+        placeholder="请选择"
+        v-model:value="selectedDeviceID"
+        :options="options"
+        @change="selectHandler"
+        class="custom-select"
+      />
+    </div>
+    <!-- 内容区 -->
+    <div class="module-content" :style="contentStyle">
+      <slot>
+        <Content style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 引入内容组件
+import Content from './content.vue';
+import { defineProps, defineEmits, computed, watch } from 'vue';
+import { useInitModule } from '../hooks/useInit';
+import { getFormattedText } from '../hooks/helper';
+import { openWindow } from '/@/utils';
+
+// 定义组件接收的属性
+const props = defineProps<{
+  moduleData: any;
+  showStyle: any;
+  deviceType: string;
+  data: any;
+  moduleName: string;
+  visible: boolean;
+}>();
+const emit = defineEmits(['close', 'select']);
+
+// 取出头部配置
+const { header } = props.moduleData;
+
+// 初始化模块相关的下拉、选中项等
+const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+
+// 计算样式（宽高+定位）
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  return size + position;
+});
+
+// 计算不同布局下的class
+const moduleClass = computed(() => {
+  const position = props.showStyle.position;
+  const size = props.showStyle.size;
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  if (position.includes('bottom') || parseInt(width) > 800) {
+    return 'module-wide';
+  }
+  if (position.includes('left')) {
+    return 'module-medium';
+  }
+  if (position.includes('right')) {
+    return 'module-medium';
+  }
+  return 'module-medium';
+});
+
+// 计算内容区高度样式
+const contentStyle = computed(() => {
+  if (header.show && header.selector.show) {
+    return 'height: calc(100% - 48px - 40px);'; // 有下拉框的情况
+  }
+  return 'height: calc(100% - 40px);'; // 没有下拉框的情况
+});
+
+// 下拉选择事件
+function selectHandler(id) {
+  selectedDeviceID.value = id;
+  emit('select', selectedDevice);
+}
+
+// 跳转事件
+function redirectTo() {
+  const { to } = props.moduleData;
+  if (!to) return;
+  openWindow(to);
+}
+
+// 监听数据变化，初始化
+watch(
+  () => props.data,
+  (d) => {
+    init(d);
+    selectedDeviceID.value = options.value[0]?.value;
+  },
+  {
+    immediate: true,
+  }
+);
+</script>
+
+<style scoped lang="less">
+    @font-face {
+      font-family: 'douyuFont';
+      src: url('../../../../assets/font/douyuFont.otf');
+    }
+    .module-mine {
+      --image-common-border1: url('@/assets/images/home-container/configurable/minehome/common-border1.png');
+      --image-common-border2: url('@/assets/images/home-container/configurable/minehome/common-border2.png');
+      --image-common-border3: url('@/assets/images/home-container/configurable/minehome/common-border3.png');
+      --image-select-border: url('@/assets/images/home-container/configurable/minehome/select-border.png');
+      position: absolute;
+      //   width: 100%;
+      //   height: 100%;
+      background: var(--image-common-border2) no-repeat center;
+      background-size: 100% 100%;
+      box-shadow: 0 0 16px #0a223a99;
+      z-index: 2;
+      overflow: hidden;
+
+      /* 标题栏样式 */
+      .module-title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        color: #fff;
+        font-size: 14px;
+        font-weight: bold;
+
+        .title-content {
+          font-family: 'douyuFont';
+          margin-right: 10px;
+          &.cursor-pointer {
+          cursor: pointer;
+          text-decoration: underline;
+          }
+        }
+      }
+
+      /* 下拉选择框单独一行样式 */
+      .module-selector-row {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 10px 35px 0 35px;
+        width: 100%;
+        min-height: 40px;
+        .custom-select {
+          flex: 1;
+          width: 100% !important;
+          min-width: 0;
+          font-size: 18px;
+          color: white !important;
+          ::v-deep .zxm-select-selector {
+            background: var(--image-select-border) no-repeat center/100% 100%;
+            border: none !important;
+            padding: 0 20px;
+
+          }
+          /* 隐藏默认的下拉箭头 */
+          ::v-deep .zxm-select-arrow {
+            display: none;
+          }
+          
+          /* 添加自定义白色下拉三角形 */
+          &::after {
+            content: '';
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-left: 6px solid transparent;
+            border-right: 6px solid transparent;
+            border-top: 8px solid white;
+            pointer-events: none;
+          }
+          /* 修复占位符颜色 */
+          ::v-deep .zxm-select-selection-placeholder {
+            color: white !important;
+            font-size: 18px;
+          }
+        }
+      }
+
+      /* 内容区样式 */
+      .module-content {
+        padding: 10px 23px;
+        background: transparent;
+      }
+    }
+</style>

src/views/vent/home/configurable/components/detail/ComplexList.vue

@@ -10,11 +10,11 @@
         <!-- 列表项前面的图标 -->
         <div :class="`list-item__title_${type}`">{{ item.title }}</div>
         <!-- 列表项的具体内容填充剩余宽度 -->
-        <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
-          <div class="list-item__label">{{ ctx.label }}</div>
-          <div class="list-item__info" :class="`list-item__info_${ctx.color}`">{{ ctx.info }}</div>
-          <div class="list-item__value" :class="`list-item__value_${ctx.color} list-item__value_${type}`">{{ ctx.value }}</div>
-        </div>
+          <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
+            <div class="list-item__label">{{ ctx.label }}</div>
+            <div class="list-item__info" :class="`list-item__info_${ctx.color}`">{{ ctx.info }}</div>
+            <div class="list-item__value" :class="`list-item__value_${ctx.color} list-item__value_${type}`">{{ ctx.value }}</div>
+          </div>
       </div>
     </div>
   </div>
@@ -63,6 +63,9 @@
       --image-img-8: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
       --image-img-9: url(/@/assets/images/home-container/configurable/firehome/img-9.png);
       --image-list_bg_1: url(/@/assets/images/home-container/configurable/dusthome/list_bg_1.png);
+      --image-list_bg_h_title: url(/@/assets/images/home-container/configurable/minehome/list-bg-h-title.png);
+      --image-list_bg_h_border: url(/@/assets/images/home-container/configurable/minehome/list-bg-h-border.png);
+      --image-list_bg_h_content: url(/@/assets/images/home-container/configurable/minehome/list-bg-h-content.png);
       --image-linear-gradient-1: linear-gradient(to right, #39a3ff50, #39a3ff00);
       --image-linear-gradient-2: linear-gradient(to right, #3df6ff40, #3df6ff00);
       --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
@@ -443,6 +446,53 @@
         background-image: var(--image-linear-gradient-3);
       }
   }
+  .list_H {
+    padding: 0 10px;
+  }
+
+  .list__wrapper_H {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+
+  .list-item_H {
+    position: relative;
+    height: 80px;
+    width: calc((100% - 20px) / 2);
+    background-image: var(--image-list_bg_h_border);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center top;
+    margin-top: 25px;
+  }
+  .list-item__title_H {
+    position: absolute;
+    top: -26px;
+    left: 0;
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    background-repeat: no-repeat;
+    background-image: var(--image-list_bg_h_title);
+    background-size: 100% auto;
+    background-position: center top;
+    font-size: 16px;
+    text-align: center;
+  }
+
+  .list-item__content_H {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background-repeat: no-repeat;
+    background-image: var(--image-list_bg_h_content);
+    background-size: 100% auto;
+    background-position: center top;
+    margin: 13px 10px;
+  }
 
     // .list-item__title_B_O2 {
     //   background-image: url(/@/assets/images/home-container/configurable/firehome/O₂.png);

src/views/vent/home/configurable/components/detail/CustomList.vue

@@ -74,6 +74,22 @@ withDefaults(
   --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
   --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
   --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
+  --image-list_icon_l1: url('/@/assets/images/home-container/configurable/minehome/list-icon-wd.png');
+  --image-list_icon_l2: url('/@/assets/images/home-container/configurable/minehome/list-icon-CO.png');
+  --image-list_icon_l3: url('/@/assets/images/home-container/configurable/minehome/list-icon-yw.png');
+  --image-list_icon_l4: url('/@/assets/images/home-container/configurable/minehome/list-icon-hy.png');
+  --image-list_icon_m1: url('/@/assets/images/home-container/configurable/minehome/list-icon-co1.png');
+  --image-list_icon_m2: url('/@/assets/images/home-container/configurable/minehome/list-icon-co2.png');
+  --image-list_icon_m3: url('/@/assets/images/home-container/configurable/minehome/list-icon-ch4.png');
+  --image-list_icon_m4: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h2.png');
+  --image-list_icon_m5: url('/@/assets/images/home-container/configurable/minehome/list-icon-o2.png');
+  --image-list_icon_m6: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h4.png');
+  --image-list_icon_m7: url('/@/assets/images/home-container/configurable/minehome/list-icon-n2.png');
+  --image-list_icon_m8: url('/@/assets/images/home-container/configurable/minehome/list-icon-h2.png');
+  --image-list_bg_l1: url('/@/assets/images/home-container/configurable/minehome/list-bg-l1.png');
+  --image-list_bg_l2: url('/@/assets/images/home-container/configurable/minehome/list-bg-l2.png');
+  --image-list_bg_m1: url('/@/assets/images/home-container/configurable/minehome/list-bg-m1.png');
+  --image-list_bg_m2: url('/@/assets/images/home-container/configurable/minehome/list-bg-m2.png');
   padding: 5px 20px;
   position: relative;
   background-repeat: no-repeat;
@@ -413,6 +429,142 @@ withDefaults(
   }
 }
 
+.list_L {
+  background: none;
+  padding: 5px 10px;
+}
+.list-item_L {
+  width: 100%;
+  height: 37px;
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin-bottom: 8px;
+}
+/* 奇数项背景图 */
+.list-item_L:nth-child(odd) {
+  background-image: var(--image-list_bg_l1);
+}
+
+/* 偶数项背景图 */
+.list-item_L:nth-child(even) {
+  background-image: var(--image-list_bg_l2);
+}
+.list-item__icon_L {
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 20px;
+  margin-left: 15px;
+  background-position: center;
+  background-size: contain;
+}
+/* 四个图标样式 */
+.list-item_L:nth-child(1) .list-item__icon_L {
+  background-image: var(--image-list_icon_l1);
+}
+
+.list-item_L:nth-child(2) .list-item__icon_L {
+  background-image: var(--image-list_icon_l2);
+}
+
+.list-item_L:nth-child(3) .list-item__icon_L {
+  background-image: var(--image-list_icon_l3);
+}
+
+.list-item_L:nth-child(4) .list-item__icon_L {
+  background-image: var(--image-list_icon_l4);
+}
+.list-item__content_L {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  .list-item__value_L {
+    font-family: 'douyuFont';
+  }
+
+}
+.list-item__content_L > div {
+  flex-basis: 33.3%;
+}
+
+
+.list_M {
+  background: none;
+  padding: 0;
+}
+.list__wrapper_M {
+  display: grid;
+  grid-template-columns: 1fr 1fr; /* 两列均等 */
+  gap: 18px; /* 统一间距 */
+}
+.list-item_M {
+  height: 37px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.list-item_M:nth-child(1),
+.list-item_M:nth-child(4),
+.list-item_M:nth-child(5),
+.list-item_M:nth-child(8) {
+  background-image: var(--image-list_bg_m1);
+}
+
+.list-item_M:nth-child(2),
+.list-item_M:nth-child(3),
+.list-item_M:nth-child(6),
+.list-item_M:nth-child(7) {
+  background-image: var(--image-list_bg_m2);
+}
+.list-item_M:nth-child(7),
+.list-item_M:nth-child(8) {
+  margin-bottom: 0;
+}
+.list-item__icon_M {
+  background-repeat: no-repeat;
+  height: 16px;
+  margin-left: 5px;
+  background-position: center;
+  background-size: auto 100%;
+  display: inline-block;
+  width: 40px;
+}
+/* 八个图标样式 */
+.list-item_M:nth-child(1) .list-item__icon_M {
+  background-image: var(--image-list_icon_m1);
+}
+.list-item_M:nth-child(2) .list-item__icon_M {
+  background-image: var(--image-list_icon_m2);
+}
+.list-item_M:nth-child(3) .list-item__icon_M {
+  background-image: var(--image-list_icon_m3);
+}
+.list-item_M:nth-child(4) .list-item__icon_M {
+  background-image: var(--image-list_icon_m4);
+}
+.list-item_M:nth-child(5) .list-item__icon_M {
+  background-image: var(--image-list_icon_m5);
+}
+.list-item_M:nth-child(6) .list-item__icon_M {
+  background-image: var(--image-list_icon_m6);
+}
+.list-item_M:nth-child(7) .list-item__icon_M {
+  background-image: var(--image-list_icon_m7);
+}
+.list-item_M:nth-child(8) .list-item__icon_M {
+  background-image: var(--image-list_icon_m8);
+}
+
+.list-item__content_M {
+  display: flex;
+  text-align: center;
+  align-items: center;
+
+  .list-item__value_M {
+    font-family: 'douyuFont';
+    font-size: 12px;
+  }
+
+}
+
 .list-item__label {
   flex-basis: 55%;
 }

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

@@ -65,6 +65,8 @@
     --image-content-label: url(/@/assets/images/company/content-label.png);
     --image-content-text: url('/@/assets/images/company/content-text.png');
     --image-list-head: url('/@/assets/images/home-container/configurable/firehome/list-head.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;
@@ -149,5 +151,32 @@
         background-image: var(--image-content-text);
       }
     }
+
+    .table__content_label_D {
+      width: calc(100% - 10px);
+      background-image: var(--image-content-label-d);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      color: #fff;
+    }
+    .table__content_list_D {
+      width: calc(100% - 10px);
+      background-image: var(--image-content-body-d);
+      background-size: 100% 100%;
+      padding: 5px;
+      .table__content_list_row {
+        height: 20%;
+        margin: 0;
+      }
+      /* 奇数行背景颜色 */
+      .table__content_list_row:nth-child(odd) {
+        background: #061b24;
+      }
+
+      /* 偶数行背景颜色 */
+      .table__content_list_row:nth-child(even) {
+        background: #092b3a;
+      }
+    }
   }
 </style>

src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -145,6 +145,9 @@ defineEmits(['click']);
   --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
   --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
   --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
+  --image-board-bg-J: url('/@/assets/images/home-container/configurable/minehome/board-bg-j.png');
+  --image-board-bg-k1: url('/@/assets/images/home-container/configurable/minehome/board-bg-k1.png');
+  --image-board-bg-k2: url('/@/assets/images/home-container/configurable/minehome/board-bg-k2.png');
 
   --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
   --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
@@ -270,6 +273,27 @@ defineEmits(['click']);
   background-size: 100% 100%;
 }
 
+.mini-board_J {
+  width: 110px;
+  height: 58px;
+  background-image: var(--image-board-bg-J);
+  background-size: 100% 100%;
+}
+.mini-board_K {
+  width: 170px;
+  height: 70px;
+  background-size: 100% 100%;
+}
+/* 第一个mini-board_K使用k1背景 */
+.mini-board_K:first-of-type {
+  background-image: var(--image-board-bg-k1);
+}
+
+/* 第二个mini-board_K使用k2背景 */
+.mini-board_K:first-of-type + .mini-board_K { 
+  background-image: var(--image-board-bg-k2);
+}
+
 .mini-board__value_New {
   color: @vent-gas-primary-text;
   font-size: 15px;
@@ -388,6 +412,34 @@ defineEmits(['click']);
   height: 20px;
 }
 
+.mini-board__value_J {
+  color: #b3ebf7;
+  font-size: 16px;
+  font-weight: bold;
+  height: 25px;
+  line-height: 25px;
+}
+.mini-board__label_J {
+  line-height: 20px;
+  height: 20px;
+}
+
+.mini-board__value_K {
+  color: #fff;
+  font-family: 'douyuFont';
+  font-size: 16px;
+  // font-weight: bold;
+  height: 55px;
+  line-height: 55px;
+  padding-left: 60px;
+}
+.mini-board__label_K {
+  line-height: 21px;
+  height: 21px;
+  text-align: end;
+  font-size: 13px;
+}
+
 .mini-board_E:nth-child(1) {
   .mini-board__label_E {
     background-image: var(--image-hycd);

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

@@ -0,0 +1,622 @@
+import type { Config } from '../../deviceManager/configurationTable/types';
+
+export const testConfigMineFire: Config[] = [
+  // 1. 重点区域风险监测（左上）
+  {
+    deviceType: 'fireManageInfo',
+    moduleName: '重点区域风险监测',
+    pageType: 'mine_fire',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '50%',
+          },
+          {
+            name: 'complex_list',
+            basis: '50%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'K',
+          readFrom: 'fireManageInfo',
+          layout: 'label-top',
+          items: [
+            {
+              label: '内因风险等级',
+              value: '${nyWarnLevel}',
+            },
+            {
+              label: '外因风险等级',
+              value: '${wyWarnLevel}',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [
+        {
+          type: 'H',
+          readFrom: 'fireManageInfo.sysList',
+          mapFromData: true,
+          items: [
+            {
+              title: '${sysNamme}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${warnLevel}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '最高温度',
+                  value: '${maxVal}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:290px;',
+      version: '原版',
+      position: 'top:50px;left:10px;',
+    },
+  },
+  // 2. 带式输送机防灭火监控系统（左中）
+  {
+    deviceType: 'pdArray',
+    moduleName: '带式输送机防灭火监控系统',
+    pageType: 'mine_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${systemname}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '35%',
+          },
+          {
+            name: 'chart',
+            basis: '65%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'J',
+          layout: 'val-top',
+          readFrom: 'arrayCount',
+          items: [
+            {
+              label: '光纤预警',
+              value: '${[0].val}℃',
+            },
+            {
+              label: '一氧化碳预警',
+              value: '${[1].val}ppm',
+            },
+            {
+              label: '烟雾预警',
+              value: '${[2].val}',
+            },
+          ],
+        },
+      ],
+      chart: [
+        {
+          type: 'line_smooth',
+          readFrom: 'arrayFiber',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          series: [
+            {
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:290px;',
+      version: '原版',
+      position: 'top:340px;left:10px;',
+    },
+  },
+  // 3. 密闭采空区监测区域（左下）
+  {
+    deviceType: 'obfObj',
+    moduleName: '密闭采空区监测区域',
+    pageType: 'mine_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: 'obfObjModded',
+        selector: { show: true, value: '${objType}' },
+        slot: { show: false, value: '' },
+      },
+      background: { show: false, type: 'video', link: '' },
+      layout: {
+        direction: 'row',
+        items: [
+          { name: 'chart', basis: '100%' },
+        ],
+      },
+      board: [],
+      chart: [
+        {
+          type: 'bar_cylinder',
+          readFrom: '',
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '', position: 'left' }],
+          series: [
+            {
+              readFrom: 'arrayDev',
+              xprop: 'strinstallpos',
+              yprop: 'val',
+              label: '',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:290px;',
+      version: '原版',
+      position: 'bottom:8px;left:10px;',
+      headerPosition: 'centerBottom',
+    },
+  },
+  // 4. 变电硐室防灭火监控系统（右上）
+  {
+    deviceType: 'powerFireMonitor',
+    moduleName: '变电硐室防灭火监控系统',
+    pageType: 'mine_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: { show: true, value: '${stationName}' },
+        slot: { show: false, value: '' },
+      },
+      background: { show: false, type: 'video', link: '' },
+      layout: {
+        direction: 'row',
+        items: [{ name: 'list', basis: '100%' }],
+      },
+      list: [
+        {
+          type: 'L',
+          readFrom: '',
+          mapFromData: false,
+          items: [
+            { label: '温度预警', value: '27℃', color: 'blue', info: '最高温度' },
+            { label: '一氧化碳预警', value: '0ppm', color: 'blue', info: '最高浓度' },
+            { label: '烟雾预警', value: '无烟', color: 'blue', info: '最高浓度' },
+            { label: '火焰预警', value: '无', color: 'blue', info: '是否有火焰' },
+          ],
+        },
+      ],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:290px;',
+      version: '原版',
+      position: 'top:50px;right:10px;',
+      headerPosition: 'centerBottom',
+    },
+  },
+  // 5. 开采煤层自燃发火特性（右中）
+  {
+    deviceType: 'coalFireFeature',
+    moduleName: '开采煤层自燃发火特性',
+    pageType: 'mine_fire',
+        moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        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: 'D',
+          readFrom: 'mockTable',
+          columns: [
+            {
+              name: '煤层',
+              prop: 'a',
+            },
+            {
+              name: '自燃倾向性',
+              prop: 'b',
+            },
+            {
+              name: '最短发火期',
+              prop: 'c',
+            },
+            {
+              name: '最小推进速度',
+              prop: 'd',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        mockTable: [
+          {
+            a: '1煤',
+            b: '自燃',
+            c: '123天',
+            d: '0.87md',
+          },
+          {
+            a: '2煤',
+            b: '自燃',
+            c: '123天',
+            d: '0.87md',
+          },
+          {
+            a: '3煤',
+            b: '自燃',
+            c: '123天',
+            d: '0.87md',
+          },
+          {
+            a: '4煤',
+            b: '自燃',
+            c: '123天',
+            d: '0.87md',
+          },
+          {
+            a: '5煤',
+            b: '自燃',
+            c: '123天',
+            d: '0.87md',
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:440px;height:290px;',
+      version: '原版',
+      position: 'top:340px;right:10px;',
+    },
+  },
+  // 6. 安全监控系统（底部右）
+  {
+    deviceType: 'safetyMonitor',
+    moduleName: '安全监控系统',
+    pageType: 'mine_fire',
+    moduleData: {
+      header: { show: false, readFrom: '', selector: { show: false, value: '' }, slot: { show: false, value: '' } },
+      background: { show: false, type: 'video', link: '' },
+      layout: {
+        direction: 'row',
+        items: [{ name: 'table', basis: '100%' }],
+      },
+      table: [
+        {
+          type: 'D',
+          readFrom: 'mockTable',
+          columns: [
+            { name: '测点位置', prop: 'strinstallpos' },
+            { name: '温度', prop: 'nowVal' },
+            { name: '预警级别', prop: 'warnLevel' },
+          ],
+        },
+      ],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        mockTable: [
+          {
+            strinstallpos: '枣林四号压风机出口温度',
+            nowVal: '45',
+            warnLevel: '低风险',
+          },
+          {
+            strinstallpos: '枣林四号压风机出口温度',
+            nowVal: '45',
+            warnLevel: '低风险',
+          },
+          {
+            strinstallpos: '枣林四号压风机出口温度',
+            nowVal: '45',
+            warnLevel: '低风险',
+          },
+          {
+            strinstallpos: '枣林四号压风机出口温度',
+            nowVal: '45',
+            warnLevel: '低风险',
+          },
+          {
+            strinstallpos: '枣林四号压风机出口温度',
+            nowVal: '45',
+            warnLevel: '低风险',
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:440px;height:290px;',
+      version: '原版',
+      position: 'bottom:8px;right:10px;',
+    },
+  },
+  // 7. 工作面束管监测（中下1）
+  {
+    deviceType: 'sgGxObj',
+    moduleName: '工作面束管监测',
+    pageType: 'mine_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: 'devSgjc',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'blast_delta',
+            basis: '40%',
+          },
+          {
+            name: 'list',
+            basis: '60%',
+          }
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          type: 'M',
+          readFrom: '',
+          items: [
+            {
+              label: '一氧化碳(ppm)',
+              value: '${coVal}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '二氧化碳%',
+              value: '${co2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '甲烷%',
+              value: '${ch4Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '乙炔(ppm)',
+              value: '${c2h2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '氧气%',
+              value: '${o2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '乙烯(ppm)',
+              value: '${c2h4Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '二氧化氮%',
+              value: '${n2Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '氢气%',
+              value: '${h2Val}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: '',
+        },
+      ],
+    },
+    showStyle: {
+      size: 'width:980px;height:315px;',
+      version: '原版',
+      position: 'bottom:8px;left:470px',
+    },
+  },
+  // 8. 工作面光纤监测（中下2）
+  {
+    deviceType: 'sgGxObj',
+    moduleName: '工作面光纤监测',
+    pageType: 'BD_fire',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: 'devGxcw',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [
+        {
+          type: 'line_smooth',
+          readFrom: '',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          series: [
+            {
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:980px;height:315px;',
+      version: '原版',
+      position: 'bottom:8px;left:470px',
+    },
+  }
+];

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

@@ -0,0 +1,237 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <!-- 顶部标题样式块 -->
+    <div class="top-bg">
+      <div class="main-title">{{ mainTitle }}</div>
+    </div>
+    <!-- 中间样式块 -->
+    <div class="center-info-bar">
+      <div class="center-info-btn" @click="redirectTo('/grout-home')">
+        <div>
+          <img src="@/assets/images/home-container/configurable/minehome/znzjxt-icon.png" alt="智能注浆系统" />
+        </div>
+        <div>
+          智能注浆系统
+        </div>
+      </div>
+      <div class="center-info-content ">
+        <div class="center-info-block left">
+          <img src="@/assets/images/home-container/configurable/minehome/jcqy-icon.png" alt="监测区域" />
+          <span>监测区域</span>
+        </div>
+        <div class="center-info-risk">
+          <div class="risk-notice">自然倾向性等级：容易自燃</div>
+          <div class="risk-level">{{ data.fireAllMineWarn || '低风险' }}</div>
+        </div>
+        <div class="center-info-block right">
+          <span>火灾风险</span>
+          <img src="@/assets/images/home-container/configurable/minehome/hzfx-icon.png" alt="火灾风险" />
+        </div>
+      </div>
+      <div class="center-info-btn" @click="redirectTo('/nitrogen-home')">
+        <div>
+          <img src="@/assets/images/home-container/configurable/minehome/znzdxt-icon.png" alt="智能注氮系统" />
+        </div>
+        <div>
+          智能注氮系统
+        </div>
+      </div>
+    </div>
+    <!-- 渲染所有模块 -->
+    <ModuleMine
+      v-for="cfg in cfgs"
+       :key="cfg.deviceType + cfg.moduleName"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="data"
+      :visible="true"
+    />
+    <ModuleBDDual
+      v-if="cfgA && cfgB"
+      :show-style="cfgA.showStyle"
+      :module-data-a="cfgA.moduleData"
+      :module-name-a="cfgA.moduleName"
+      :device-type-a="cfgA.deviceType"
+      :module-data-b="cfgB.moduleData"
+      :module-name-b="cfgB.moduleName"
+      :device-type-b="cfgB.deviceType"
+      :data="data"
+      :visible="true"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleMine from './components/ModuleMine.vue';
+import ModuleBDDual from './components/ModuleBDDual.vue';
+import { getDisHome } from './configurable.api';
+import { testConfigMineFire } from './configurable.data.mine';
+
+const cfgs = computed(() =>
+  configs.value.filter((_, index) => index !== 6 && index !== 7)
+);
+const cfgA = computed<any>(() =>
+  configs.value[6]
+);
+const cfgB = computed<any>(() =>
+  configs.value[7]
+);
+const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('矿井火灾预警系统');
+let interval: ReturnType<typeof setInterval> | undefined;
+
+onMounted(() => {
+  fetchConfigs('mine_fire').then(() => {
+    configs.value = testConfigMineFire;
+    getDisHome({
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    }).then(updateData);
+  });
+  interval = setInterval(() => {
+    getDisHome({
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    }).then(updateData);
+  }, 2000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+function redirectTo(url) {
+  window.open(url);
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+.company-home {
+  --image-bg: url('@/assets/images/home-container/configurable/minehome/bg.png');
+  --image-fire-title: url(/@/assets/images/home-container/configurable/minehome/fire-title.png);
+  --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
+  --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: var(--image-bg) no-repeat center;
+
+  .top-bg {
+    width: 100%;
+    height: 80px;
+    background: var(--image-fire-title) no-repeat top;
+    position: absolute;
+    z-index: 1;
+    .main-title {
+      height: 80px;
+      font-family: 'douyuFont';
+      font-size: 26px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 0 10px 0;
+    }
+  }
+  // 顶部中间样式块
+  .center-info-bar {
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 900px;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    background: url('@/assets/images/home-container/configurable/minehome/center-info-bg.png') no-repeat center;
+    box-shadow: 0 2px 12px #000a;
+    padding: 0 20px;
+    gap: 15px;
+
+    .center-info-btn {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #fff;
+      font-size: 10px;
+      font-family: 'douyuFont';
+      font-weight: bold;
+      cursor: pointer;
+      user-select: none;
+      width: 110px;
+      margin: 0 0 10px 0;
+      img {
+        width: 60px;
+      }
+    }
+
+    .center-info-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .center-info-block {
+        color: #ffffff;
+        font-size: 18px;
+        img{
+          margin: 0 5px;
+        }
+      }
+      .center-info-risk {
+        color: #fff;
+        font-weight: bolder;
+        text-align: center;
+        .risk-level {
+          color: #4EABD9;
+          font-size: 24px;
+          font-weight: bold;
+          letter-spacing: 8px;
+          margin: 10px 0;
+        }
+      }
+
+      .left {
+        margin-right: 45px;
+
+      }
+      .right {
+        margin-left: 45px;
+      }
+    }
+  }
+
+  ::v-deep .dane-bd {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    &.dane-w {
+      background-image: var(--image-common-border3);
+    }
+    .dane-title {
+      justify-content: space-around;
+      padding: 0 50px 0 0;
+
+      .common-navL {
+        font-size: 14px;
+        font-weight: bold;
+        font-family: 'douyuFont';
+      }
+    }
+    .dane-content {
+      border: none;
+      background: none;
+      padding: 5px 35px 10px 10px;
+    }
+  }
+}
+</style>