[Feat 0000] 塔山火灾预警页面搭建

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'| 'J' | 'K';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'New' | 'New1' | 'New2' | 'New3'| 'J' | 'K' | 'L' | 'M' | 'N' | 'O';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top' | 'new-top' | 'new1-top' | 'new2-top' | 'new3-top';
   /** 核心配置，每个展示牌对应一项 */

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

@@ -0,0 +1,167 @@
+<template>
+  <ventBox1 :class="getModuleClass(showStyle)" :style="style">
+    <template #title>
+      <div class="dual-title">
+        <div class="title-left">
+          <div :class="{ deactived: index === 1, 'cursor-pointer': !!moduleDataA.to }" @click="index = 0">{{ moduleNameA }}</div>
+          <div :class="{ deactived: index === 0, 'cursor-pointer': !!moduleDataB.to }" @click="index = 1">{{ moduleNameB }}</div>
+        </div>
+        <div class="title-center">{{ commonTitle }}</div>
+      </div>
+    </template>
+    <template #container>
+      <slot>
+        <Header
+          v-if="index === 0"
+          :deviceType="deviceTypeA"
+          :moduleData="moduleDataA"
+          :data="data"
+          @select="selectedDataA = $event"
+        />
+        <Header
+          v-if="index === 1"
+          :deviceType="deviceTypeB"
+          :moduleData="moduleDataB"
+          :data="data"
+          @select="selectedDataB = $event"
+        />
+        <Content
+          v-if="index === 0"
+          :style="{ height: moduleDataA.header?.show ? 'calc(100% - 30px)' : '100%' }"
+          :moduleData="moduleDataA"
+          :data="selectedDataA"
+        />
+        <Content
+          v-if="index === 1"
+          :style="{ height: moduleDataB.header?.show ? 'calc(100% - 30px)' : '100%' }"
+          :moduleData="moduleDataB"
+          :data="selectedDataB"
+        />
+      </slot>
+    </template>
+  </ventBox1>
+</template>
+
+<script lang="ts" setup>
+import Header from './header.vue';
+import Content from './content.vue';
+import { computed, ref } from 'vue';
+import ventBox1 from '/@/components/vent/ventBox1.vue';
+import { openWindow } from '/@/utils';
+import { getFormattedText } from '../hooks/helper';
+
+const props = defineProps<{
+  moduleDataA: any;
+  moduleNameA: string;
+  deviceTypeA: string;
+  moduleDataB: any;
+  moduleNameB: string;
+  deviceTypeB: string;
+  showStyle: any;
+  visible: boolean;
+  data: any;
+  commonTitle: string;
+}>();
+defineEmits(['close', 'click']);
+
+const index = ref(0);
+
+const selectedDataA = ref();
+const selectedDataB = ref();
+
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  
+  return size + position + ';position: absolute; pointer-events: auto;';
+});
+
+// 根据配置里的定位判断应该使用哪个class
+function getModuleClass({ size, position }) {
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  if (position.includes('bottom') || parseInt(width) > 800) {
+    return 'module-common-dual module-common-dual-longer';
+  }
+  return 'module-common-dual';
+}
+
+// 跳转
+function redirectToA() {
+  const { to } = props.moduleDataA;
+  if (!to) return;
+  openWindow(getFormattedText(selectedDataA.value, to));
+}
+function redirectToB() {
+  const { to } = props.moduleDataB;
+  if (!to) return;
+  openWindow(getFormattedText(selectedDataB.value, to));
+}
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+.module-common-dual .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;
+}
+.dual-title {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  display: flex;
+  font-size: 14px;
+  .title-center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .title-left {
+    height: 100%;
+    margin-left: 30px;
+    display: flex;
+    div {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      cursor: pointer;
+      padding: 0 12px;
+      background: linear-gradient(to top, #2bafc6 0%, rgba(44, 255, 221, 0.1) 50%,rgba(44, 255, 221, 0) 90%);
+    }
+  }
+
+  .deactived {
+    background: none !important;
+    color: #8087a1;
+  }
+}
+// @{theme-deepblue} {
+//   .module-common-dual-longer {
+//     :deep(.box1-top) {
+//       --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
+//     }
+//     :deep(.box1-bottom) {
+//       --image-box1-bottom: none;
+//     }
+//   }
+// }
+.module-common-dual-longer {
+  :deep(.box1-top) {
+    --image-box1-top: url('/@/assets/images/vent/box-top-bg.png');
+    background-image: var(--image-box1-top);
+  }
+  :deep(.box1-bottom) {
+    --image-box1-bottom: url('/@/assets/images/vent/box-bottom-bg.png');
+    background-image: var(--image-box1-bottom);
+  }
+}
+</style>

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

@@ -148,6 +148,15 @@ defineEmits(['click']);
   --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-board-bg-l1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l1.png');
+  --image-board-bg-l2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l2.png');
+  --image-board-bg-m1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m1.png');
+  --image-board-bg-m2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m2.png');
+  --image-board-bg-nl1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n1.png');
+  --image-board-bg-nr1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n2.png');
+  --image-board-bg-nl2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n3.png');
+  --image-board-bg-nr2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n4.png');
+  --image-board-bg-o: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-o.png');
 
   --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
   --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
@@ -294,6 +303,58 @@ defineEmits(['click']);
   background-image: var(--image-board-bg-k2);
 }
 
+.mini-board_L {
+  width: 120px;
+  height: 100px;
+  background-size: 100% 100%;
+}
+.mini-board_L:nth-child(odd) {
+  background-image: var(--image-board-bg-l1);
+}
+.mini-board_L:nth-child(even) {
+  background-image: var(--image-board-bg-l2);
+}
+
+.mini-board_M {
+  width: 180px;
+  height: 60px;
+  background-image: var(--image-board-bg-m1);
+  background-size: 100% 100%;
+}
+.mini-board_M:nth-child(2),
+.mini-board_M:nth-child(3) {
+  background-image: var(--image-board-bg-m2);
+}
+
+.mini-board_N {
+  width: 200px;
+  height: 59px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 25px 0 20px;
+  background-image: var(--image-board-bg-nl1);
+  background-size: 100% 100%;
+}
+.mini-board_N:nth-child(2) {
+  background-image: var(--image-board-bg-nr1);
+}
+.mini-board_N:nth-child(3) {
+  margin-top: -15px;
+  background-image: var(--image-board-bg-nl2);
+}
+.mini-board_N:nth-child(4) {
+  margin-top: -15px;
+  background-image: var(--image-board-bg-nr2);
+}
+
+.mini-board_O {
+  width: 130px;
+  height: 50px;
+  background-image: var(--image-board-bg-o);
+  background-size: 100% 100%;
+}
+
 .mini-board__value_New {
   color: @vent-gas-primary-text;
   font-size: 15px;
@@ -439,6 +500,38 @@ defineEmits(['click']);
   text-align: end;
   font-size: 13px;
 }
+.mini-board__label_L {
+  line-height: 21px;
+  height: 21px;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 30px;
+}
+.mini-board__value_L {
+  font-family: 'douyuFont';
+  color: @vent-gas-primary-text;
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.mini-board__label_M {
+  line-height: 21px;
+  height: 21px;
+  text-align: center;
+  font-size: 14px;
+}
+.mini-board__value_M {
+  font-family: 'douyuFont';
+  color: @vent-gas-primary-text;
+  font-size: 12px;
+  height: 23px;
+  margin-top: 5px;
+}
+.mini-board__value_M:nth-child(2),
+.mini-board__value_M:nth-child(3) {
+  color: #218a89;
+}
 
 .mini-board_E:nth-child(1) {
   .mini-board__label_E {

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

@@ -0,0 +1,669 @@
+import type { Config } from '../../deviceManager/configurationTable/types';
+
+export const testConfigTSFire: Config[] = [
+
+  // 1. 采空区基本信息（左上）
+  {
+    deviceType: 'goafsInfo',
+    moduleName: '采空区基本信息',
+    pageType: 'ts_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: 'board', basis: '100%' }],
+      },
+      list: [],
+      board: [
+        {
+          type: 'L',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '所属煤层',
+              value: '6煤',
+            },
+            {
+              label: '煤层厚度',
+              value: '2.62m',
+            },
+            {
+              label: '煤层角度',
+              value: '0°~10°',
+            },
+            {
+              label: '最短发火期',
+              value: '33天',
+            },
+            {
+              label: '工作面长度',
+              value: '303.69m',
+            },
+            {
+              label: '采空区管理',
+              value: '全部垮落',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:250px;',
+      version: '原版',
+      position: 'top:70px;left:10px;',
+      headerPosition: 'centerBottom',
+    },
+  },
+  // 2. 矿用自动喷洒系统（左中）
+  {
+    deviceType: 'autoSpraySystem',
+    moduleName: '矿用自动喷洒系统',
+    pageType: 'ts_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: 'device_alarm',
+             basis: '40%',
+           },
+          { 
+            name: 'board', 
+            basis: '60%' 
+          }
+        ],
+      },
+      board: [
+        {
+          type: 'M',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '流量传感器#1',
+              value: 'xxxxxx',
+            },
+            {
+              label: '流量传感器#2',
+              value: 'xxxxxx',
+            },
+            {
+              label: '压力传感器',
+              value: 'xxxxxx',
+            },
+            {
+              label: '液位计',
+              value: '液位超限',
+            }
+          ],
+        },],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'device',
+        },
+      ],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:440px;height:290px;',
+      version: '原版',
+      position: 'top:325px;left:10px;',
+    },
+  },
+  // 3. 光纤测温系统（左下）
+  {
+    deviceType: 'pdArray',
+    moduleName: '光纤测温系统',
+    pageType: 'ts_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: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      chart: [
+        {
+          type: 'line_smooth',
+          readFrom: 'arrayFiber',
+          legend: { show: false },
+          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:270px;',
+      version: '原版',
+      position: 'bottom:8px;left:10px;',
+      headerPosition: 'centerBottom',
+    },
+  },
+  // 4. 可采煤层煤自燃特性（右上）
+  {
+    deviceType: 'coalFireFeature',
+    moduleName: '开采煤层自燃发火特性',
+    pageType: 'ts_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: 'A',
+          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%',
+          },
+          {
+            a: '2煤',
+            b: '自燃',
+            c: '123天',
+            d: '0%',
+          },
+          {
+            a: '3煤',
+            b: '自燃',
+            c: '123天',
+            d: '0%',
+          },
+          {
+            a: '4煤',
+            b: '自燃',
+            c: '123天',
+            d: '0%',
+          },
+          {
+            a: '5煤',
+            b: '自燃',
+            c: '123天',
+            d: '0%',
+          },
+          {
+            a: '6煤',
+            b: '自燃',
+            c: '123天',
+            d: '0%',
+          },
+          {
+            a: '7煤',
+            b: '自燃',
+            c: '123天',
+            d: '0%',
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:440px;height:200px;',
+      version: '原版',
+      position: 'top:75px;right:10px;',
+    },
+  },
+  // 5. 注氮系统（右中）
+  {
+    deviceType: 'NitrogenMonitor',
+    moduleName: '注氮系统',
+    pageType: 'ts_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: '40%',
+          },
+          { 
+            name: 'board', 
+            basis: '30%' 
+          },
+          { 
+            name: 'board', 
+            basis: '30%' 
+          },
+          { 
+            name: 'board', 
+            basis: '30%' 
+          }],
+      },
+      table: [],
+      board: [
+        {
+          type: 'N',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '流量',
+              value: '2663',
+            },
+            {
+              label: '管道温度',
+              value: '40.1',
+            },
+            {
+              label: '氮气压力',
+              value: '0.86',
+            },
+            {
+              label: '氮含量',
+              value: '97.3',
+            }
+          ],
+        },
+        {
+          type: 'O',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '排气压力',
+              value: '0.97',
+            },
+            {
+              label: '排气温度',
+              value: '84.4',
+            },
+            {
+              label: '油压',
+              value: '0.99',
+            }
+          ],
+        },
+        {
+          type: 'O',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '排气压力',
+              value: '0.97',
+            },
+            {
+              label: '排气温度',
+              value: '84.4',
+            },
+            {
+              label: '油压',
+              value: '0.99',
+            }
+          ],
+        },
+        {
+          type: 'O',
+          readFrom: '',
+          layout: 'val-top',
+          items: [
+            {
+              label: '排气压力',
+              value: '0.97',
+            },
+            {
+              label: '排气温度',
+              value: '84.4',
+            },
+            {
+              label: '油压',
+              value: '0.99',
+            }
+          ],
+        }
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {},
+    },
+    showStyle: {
+      size: 'width:440px;height:290px;',
+      version: '原版',
+      position: 'top:280px;right:10px;',
+    },
+  },
+  // 6. 采空区密闭监测系统（右下）
+  {
+    deviceType: 'pdArray',
+    moduleName: '采空区密闭监测系统',
+    pageType: 'ts_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: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      chart: [
+        {
+          type: 'line_smooth',
+          readFrom: 'arrayFiber',
+          legend: { show: false },
+          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:280px;',
+      version: '原版',
+      position: 'bottom:8px;right:10px;',
+    },
+  },
+  // 7. 工作面束管监测（中下1）
+  {
+    deviceType: 'RealtimeMonitor',
+    moduleName: '实时监视',
+    pageType: 'ts_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: 'A',
+          readFrom: 'mockTable',
+          columns: [
+            { name: '序号', prop: 'serialVal' },
+            { name: '监测点', prop: 'MonitorPoint' },
+            { name: '报警等级', prop: 'warnLevel' },
+            { name: '类型', prop: 'warnType' },
+            { name: '值', prop: 'nowVal' },
+          ],
+        },],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: {
+        mockTable: [
+          {
+            serialVal: '1',
+            MonitorPoint: '130608工作面采空区30mC2H6',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '2',
+            MonitorPoint: '130608工作面采空区30mC2H6',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '3',
+            MonitorPoint: '130608工作面采空区30mC2H6',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          },
+          {
+            serialVal: '4',
+            MonitorPoint: '130608工作面采空区30mC2H6',
+            warnLevel: '低风险',
+            warnType: '乙烷',
+            nowVal: '0ppm',
+          }
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:980px;height:270px;',
+      version: '原版',
+      position: 'bottom:8px;left:470px',
+    },
+  },
+  // 8. 异常待处理（中下2）
+  {
+    deviceType: 'sgGxObj',
+    moduleName: '异常待处理',
+    pageType: 'ts_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

@@ -159,7 +159,6 @@ function redirectTo(url) {
     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;
 

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

@@ -0,0 +1,292 @@
+<!-- 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="left-info-content">
+        <div class="left-block block1">
+          <div class="info-value">无</div>
+          <div class="info-label">突变预警</div>
+        </div>
+        <div class="left-block block2">
+          <div class="info-value">无自燃隐患</div>
+          <div class="info-label">煤自燃氧化阶段</div>
+        </div>
+        <div class="left-block block3">
+          <div class="info-value">-</div>
+          <div class="info-label">最高温度</div>
+        </div>
+      </div>
+      <div class="center-info-content">
+        <div class="info-value">正常</div>
+        <div class="info-label">火灾安全等级</div>
+      </div>
+      <div class="right-info-content">
+        <div class="right-block block1">
+          <div class="info-value">0</div>
+          <div class="info-label">指标预警</div>
+        </div>
+        <div class="right-block block2">
+          <div class="info-value">无</div>
+          <div class="info-label">预警等级</div>
+        </div>
+        <div class="right-block block3">
+          <div class="info-value">无</div>
+          <div class="info-label">升温预警</div>
+        </div>
+      </div>
+    </div>
+    <!-- 渲染所有模块 -->
+    <ModuleCommon 
+      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" />
+    <ModuleCommonDual
+      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"
+      :common-title="commonTitle"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleBDDual from './components/ModuleBDDual.vue';
+import { getDisHome } from './configurable.api';
+import { testConfigTSFire } from './configurable.data.tashan';
+import ModuleCommon from './components/ModuleCommon.vue';
+import ModuleCommonDual from './components/ModuleCommonDual.vue';
+
+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;
+const commonTitle = "实时监测与预警"
+onMounted(() => {
+  fetchConfigs('ts_fire').then(() => {
+    configs.value = testConfigTSFire;
+    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-fire-title: url(/@/assets/images/vent/vent-header1.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: #09172c;
+
+  .top-bg {
+    width: 100%;
+    height: 73px;
+    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: relative;
+    top: 75px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 900px;
+    height: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: url('@/assets/images/home-container/configurable/tashanhome/center-bar-bg.png') no-repeat center;
+
+    .center-info-content {
+      position: relative;
+      top: 15px;
+      background: url('@/assets/images/home-container/configurable/tashanhome/center-bar-circle.png') no-repeat center;
+      width: 160px;
+      height: 160px;
+      text-align: center;
+      .info-value {
+        position: absolute;
+        top: 34%;
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: 'douyuFont';
+        font-size: 25px;
+        color: #2cffdd;
+      }
+      .info-label {
+        width: 100%;
+        position: absolute;
+        bottom: 25px;
+        font-size: 17px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+    .left-info-content {
+      position: relative;
+      text-align: right;
+      .left-block {
+        position: absolute;
+        width: 190px;
+        height: 55px;
+        background: url('@/assets/images/home-container/configurable/tashanhome/leftbar-bg1.png') no-repeat right;
+        padding-right: 52px;
+        .info-value {
+          height: 28px;
+          line-height: 28px;
+          font-family: 'douyuFont';
+          font-size: 12px;
+          color: var(--vent-gas-primary-text);
+        }
+        .info-label {
+          height: 28px;
+          line-height: 28px;
+        }
+      }
+      .block1 {
+        top: -70px;
+        right: -5px;
+      }
+      .block2 {
+        top: -15px;
+        left: -280px;
+        background: url('@/assets/images/home-container/configurable/tashanhome/leftbar-bg2.png') no-repeat right;
+        .info-value {
+          color: #2cffdd;
+        }
+      }
+      .block3 {
+        top: 40px;
+        right: -5px;
+      }
+    }
+    .right-info-content {
+      position: relative;
+      .right-block {
+        position: absolute;
+        width: 190px;
+        height: 55px;
+        background: url('@/assets/images/home-container/configurable/tashanhome/rightbar-bg1.png') no-repeat left;
+        padding-left: 52px;
+        .info-value {
+          height: 28px;
+          line-height: 28px;
+          font-family: 'douyuFont';
+          font-size: 12px;
+          color: var(--vent-gas-primary-text);
+        }
+        .info-label {
+          height: 28px;
+          line-height: 28px;
+        }
+      }
+      .block1 {
+        top: -70px;
+        left: -5px;
+      }
+      .block2 {
+        top: -15px;
+        right: -280px;
+        background: url('@/assets/images/home-container/configurable/tashanhome/rightbar-bg2.png') no-repeat left;
+        .info-value {
+          color: #2cffdd;
+        }
+      }
+      .block3 {
+        top: 40px;
+        left: -5px;
+      }
+    }
+  }
+
+  ::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: 10px 35px;
+    }
+
+  }
+  ::v-deep .table__content .table__content_list {
+    width: 95%;  
+  }
+  ::v-deep .table__content .table__content_label {
+    width: 95%;
+  }
+}
+</style>