[Feat 0000] 新增皮带预警监测功能

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

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

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

@@ -102,7 +102,11 @@ export interface ModuleData {
         | 'generalist'
         | 'nitrogenBtnList'
         | 'complex_list1'
-        | 'gateBoard';
+        | 'gateBoard'
+        | 'sensor_status'
+        | 'fire_sensor_analysis'
+        | 'warning_result'
+        | 'vehicle_co_analysis';
       /** 分区大小 */
       basis: string;
       overflow?: boolean;

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

@@ -0,0 +1,311 @@
+<!-- belt-new.vue -->
+<template>
+  <div class="company-home">
+    <!-- 顶部标题栏 + 下拉选择 -->
+    <!-- <div class="header-container">
+      <customHeader> 皮带巷智能管控 </customHeader>
+    </div> -->
+
+    <!-- 主体区域 -->
+    <div class="border">
+      <!-- 配置模块区 -->
+      <ModuleCommon
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :page-type="cfg.pageType"
+        :data="readData"
+        :visible="true"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  // import customHeader from './components/customHeader-belt.vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import { testBeltNew } from './configurable.data';
+  import ModuleCommon from './components/ModuleCommon.vue';
+  import { is } from '/@/utils/is';
+
+  // 初始化配置
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { updateEnhancedConfigs, updateData } = useInitPage('皮带巷智能管控');
+
+  // 下拉框选项
+  const beltOptions = [
+    { id: '1', beltName: '主运巷皮带 1' },
+    { id: '2', beltName: '主运巷皮带 2' },
+  ];
+
+  const selectedBeltId = ref('1');
+
+  // 模拟数据
+  const readData = {
+    fmhjcInfo: [
+      {
+        beltName: '主运巷皮带1',
+        wz: { strtype: 'wz', avg: '111', max: '222', min: '333', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+        hcl: { strtype: 'HCl', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+        gx: { strtype: 'gx', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+        co: { strtype: 'CO', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: true, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+        wd: { strtype: 'wd', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+      },
+    ],
+    pdhzfxInfo: [
+      {
+        beltName: '主运巷皮带1',
+        warningLevel: '一般风险',
+        sysList: [
+          {
+            time: '2026-03-21 13:23:34',
+            area: '3#皮带区域',
+            type: 'CO浓度异常',
+            status: '三级预警',
+            advice: '立即检查该区域设备，启动应急预案',
+            action: '启动喷淋',
+          },
+          {
+            time: '2026-03-21 13:23:34',
+            area: '3#皮带区域',
+            type: 'CO浓度异常',
+            status: '三级预警',
+            advice: '立即检查该区域设备，启动应急预案',
+            action: '启动喷淋',
+          },
+          {
+            time: '2026-03-21 13:23:34',
+            area: '3#皮带区域',
+            type: 'CO浓度异常',
+            status: '三级预警',
+            advice: '立即检查该区域设备，启动应急预案',
+            action: '启动喷淋',
+          },
+        ],
+      },
+    ],
+    sensorAnalysis: {
+      hy: { name: '火焰传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
+      wd: { name: '温度传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
+      yw: { name: '烟雾传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
+    },
+    vehicleCOAnalysis: {
+      isRisk: true,
+      activityList: [
+        {
+          pos: '1#皮带区域',
+          vehicle: '车辆23425',
+          status: '0',
+          // vehicle2: '车辆53456',
+          // vehicle3: '未通过车辆',
+          // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
+          // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
+          // possibleCause: '皮带摩擦过热或电器设备故障',
+          // recommendation: '立即检查3#皮带区域设备',
+        },
+        {
+          pos: '2#皮带区域',
+          vehicle: '车辆53456',
+          status: '1',
+        },
+        {
+          pos: '3#皮带区域',
+          vehicle: '未通过车辆',
+          status: '0',
+        },
+      ],
+      analysisList: [
+        {
+          pos: '1#皮带区域',
+          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
+        },
+        {
+          pos: '1#皮带区域',
+          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
+        },
+      ],
+      possibleCause: '皮带摩擦过热或电器设备故障',
+      recommendation: '立即检查3#皮带区域设备',
+    },
+  };
+
+  // 下拉框切换处理
+  function handleBeltChange(id: string) {
+    selectedBeltId.value = id;
+    refresh();
+  }
+
+  // 风险等级样式映射
+  function getLevelClass(level: string) {
+    switch (level) {
+      case '重大风险':
+        return 'level-critical';
+      case '高风险':
+        return 'level-high';
+      case '一般风险':
+        return 'level-normal';
+      default:
+        return '';
+    }
+  }
+
+  // 刷新数据
+  function refresh() {
+    fetchConfigs('belt').then(() => {
+      configs.value = testBeltNew;
+      Promise.resolve(readData).then(updateData);
+      updateEnhancedConfigs(configs.value);
+    });
+  }
+
+  // 定时刷新
+  function initInterval() {
+    setInterval(() => {
+      refresh();
+    }, 60000);
+  }
+
+  onMounted(() => {
+    refresh();
+    initInterval();
+  });
+</script>
+
+<style lang="less" scoped>
+  .company-home {
+    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
+    width: 100%;
+    height: 100%;
+    color: @white;
+    position: relative;
+    font-family: 'Microsoft YaHei', sans-serif;
+
+    .header-container {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      z-index: 10;
+    }
+
+    .border {
+      width: 100%;
+      height: 94%;
+      background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
+      background-size: 100% 100%;
+      margin-top: 55px;
+      position: relative;
+      overflow: hidden;
+
+      .box-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    // 中间预警结果区
+    .center-warning-container {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 50%;
+      width: 600px;
+      height: 200px;
+      background-color: rgba(0, 0, 0, 0.7);
+      border-radius: 10px;
+      padding: 15px;
+      box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+      z-index: 5;
+      color: #fff;
+
+      .warning-header {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        color: #ff6b6b;
+      }
+
+      .warning-list {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .warning-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px;
+        background-color: rgba(0, 0, 0, 0.5);
+        border-radius: 5px;
+        border-left: 4px solid #ff6b6b;
+
+        .warning-time {
+          font-size: 14px;
+          color: #ccc;
+        }
+
+        .warning-level {
+          font-size: 14px;
+          font-weight: bold;
+          padding: 4px 8px;
+          border-radius: 4px;
+          &.level-critical {
+            background-color: #ff6b6b;
+            color: white;
+          }
+          &.level-high {
+            background-color: #ffcc00;
+            color: black;
+          }
+          &.level-normal {
+            background-color: #66cc66;
+            color: white;
+          }
+        }
+
+        .warning-action {
+          .btn-start-spray {
+            background-color: #00e1ff;
+            color: #000;
+            border: none;
+            padding: 4px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 12px;
+            transition: all 0.3s;
+            &:hover {
+              background-color: #00c3e6;
+            }
+          }
+        }
+      }
+    }
+
+    // 巷道示意图
+    .belt-diagram {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 50px;
+      width: 800px;
+      height: 100px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+</style>

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

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

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

@@ -24,78 +24,78 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import customHeader from './components/customHeader-belt.vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import { testYjkf } from './configurable.data';
-import ModuleCommon from './components/ModuleCommonBelt.vue';
-import { getHomeData, sysList, list } from './configurable.api';
-import { message, Modal } from 'ant-design-vue';
-import BeltNav from './components/BeltNav.vue';
-import { doorMock } from './mock.ts';
+  import { onMounted, ref } from 'vue';
+  import customHeader from './components/customHeader-belt.vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import { testYjkf } from './configurable.data';
+  import ModuleCommon from './components/ModuleCommonBelt.vue';
+  import { getHomeData, sysList, list } from './configurable.api';
+  import { message, Modal } from 'ant-design-vue';
+  import BeltNav from './components/BeltNav.vue';
+  import { doorMock } from './mock.ts';
 
-// import { BDFireMock } from './mock';
-const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, data, updateData } = useInitPage('皮带巷智能管控');
-function refresh() {
-  fetchConfigs('belt').then(() => {
-    configs.value = testYjkf;
-    // Promise.resolve(doorMock).then(updateData);
-    // getHomeData({}).then(updateData);
-    // getDataSource();
+  // import { BDFireMock } from './mock';
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { updateEnhancedConfigs, data, updateData } = useInitPage('皮带巷智能管控');
+  function refresh() {
+    fetchConfigs('belt').then(() => {
+      configs.value = testYjkf;
+      // Promise.resolve(doorMock).then(updateData);
+      // getHomeData({}).then(updateData);
+      // getDataSource();
+    });
+  }
+  function initInterval() {
+    setInterval(() => {
+      // getHomeData({}).then(updateData);
+    }, 60000);
+  }
+  onMounted(async () => {
+    refresh();
+    initInterval();
   });
-}
-function initInterval() {
-  setInterval(() => {
-    // getHomeData({}).then(updateData);
-  }, 60000);
-}
-onMounted(async () => {
-  refresh();
-  initInterval();
-});
 </script>
 
 <style lang="less" scoped>
-.spray-wrapper {
-  width: 100%;
-  height: 100%;
-  background-image: url('/@/assets/images/beltFire/baseMap.png');
-  background-size: cover;
-}
+  .spray-wrapper {
+    width: 100%;
+    height: 100%;
+    background-image: url('/@/assets/images/beltFire/baseMap.png');
+    background-size: cover;
+  }
 
-#spray3D {
-  pointer-events: all;
-}
+  #spray3D {
+    pointer-events: all;
+  }
 
-.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
-}
-.spray-wrapper :deep(.list-item_N:nth-child(1)) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
-}
-.spray-wrapper :deep(.list-item_N:nth-child(2)) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
-}
-.company-home {
-  background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  .border {
-    width: 100%;
-    height: 94%;
-    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
-    background-size: 100% 100%;
-    margin-top: 55px;
+  .spray-wrapper :deep(.list-item_L .list-item__icon_L) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
+  }
+  .spray-wrapper :deep(.list-item_N:nth-child(1)) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
+  }
+  .spray-wrapper :deep(.list-item_N:nth-child(2)) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
   }
-  .top-bg {
+  .company-home {
+    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
     width: 100%;
-    height: 56px;
-    position: absolute;
-    margin-top: -20px;
-    z-index: 1;
+    height: 100%;
+    color: @white;
+    position: relative;
+    .border {
+      width: 100%;
+      height: 94%;
+      background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
+      background-size: 100% 100%;
+      margin-top: 55px;
+    }
+    .top-bg {
+      width: 100%;
+      height: 56px;
+      position: absolute;
+      margin-top: -20px;
+      z-index: 1;
+    }
   }
-}
 </style>

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

@@ -24,107 +24,107 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import customHeader from './components/customHeader-belt.vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import { testYjkf } from './configurable.data';
-import ModuleCommon from './components/ModuleCommonBelt.vue';
-import { getHomeData, sysList, list } from './configurable.api';
-import { message, Modal } from 'ant-design-vue';
-import BeltNav from './components/BeltNav.vue';
-import { doorMock } from './mock.ts';
+  import { onMounted, ref } from 'vue';
+  import customHeader from './components/customHeader-belt.vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import { testYjkf } from './configurable.data';
+  import ModuleCommon from './components/ModuleCommonBelt.vue';
+  import { getHomeData, sysList, list } from './configurable.api';
+  import { message, Modal } from 'ant-design-vue';
+  import BeltNav from './components/BeltNav.vue';
+  import { doorMock } from './mock.ts';
 
-// import { BDFireMock } from './mock';
-const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, data, updateData } = useInitPage('皮带巷智能管控');
-const readData = ref([
-  {
-    id: 1,
-    position: '16联巷短路风门',
-    frontStatus: '关闭',
-    backStatus: '关闭',
-    networkStatus: '在线',
-    modelImg: '',
-    open: true,
-  },
-  {
-    id: 2,
-    position: '18联巷短路风门',
-    frontStatus: '打开',
-    backStatus: '打开',
-    networkStatus: '在线',
-    modelImg: '',
-    open: true,
-  },
-  {
-    id: 3,
-    position: '23联巷短路风门',
-    frontStatus: '关闭',
-    backStatus: '关闭',
-    networkStatus: '在线',
-    modelImg: '',
-    open: false,
-  },
-]);
-function refresh() {
-  fetchConfigs('belt').then(() => {
-    configs.value = testYjkf;
-    Promise.resolve(doorMock).then(updateData);
-    // getHomeData({}).then(updateData);
-    // getDataSource();
+  // import { BDFireMock } from './mock';
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { updateEnhancedConfigs, data, updateData } = useInitPage('皮带巷智能管控');
+  const readData = ref([
+    {
+      id: 1,
+      position: '16联巷短路风门',
+      frontStatus: '关闭',
+      backStatus: '关闭',
+      networkStatus: '在线',
+      modelImg: '',
+      open: true,
+    },
+    {
+      id: 2,
+      position: '18联巷短路风门',
+      frontStatus: '打开',
+      backStatus: '打开',
+      networkStatus: '在线',
+      modelImg: '',
+      open: true,
+    },
+    {
+      id: 3,
+      position: '23联巷短路风门',
+      frontStatus: '关闭',
+      backStatus: '关闭',
+      networkStatus: '在线',
+      modelImg: '',
+      open: false,
+    },
+  ]);
+  function refresh() {
+    fetchConfigs('belt').then(() => {
+      configs.value = testYjkf;
+      Promise.resolve(doorMock).then(updateData);
+      // getHomeData({}).then(updateData);
+      // getDataSource();
+    });
+  }
+  function initInterval() {
+    setInterval(() => {
+      // getHomeData({}).then(updateData);
+    }, 60000);
+  }
+  onMounted(async () => {
+    refresh();
+    initInterval();
   });
-}
-function initInterval() {
-  setInterval(() => {
-    // getHomeData({}).then(updateData);
-  }, 60000);
-}
-onMounted(async () => {
-  refresh();
-  initInterval();
-});
 </script>
 
 <style lang="less" scoped>
-.spray-wrapper {
-  width: 100%;
-  height: 100%;
-  background-image: url('/@/assets/images/beltFire/baseMap.png');
-  background-size: cover;
-}
+  .spray-wrapper {
+    width: 100%;
+    height: 100%;
+    background-image: url('/@/assets/images/beltFire/baseMap.png');
+    background-size: cover;
+  }
 
-#spray3D {
-  pointer-events: all;
-}
+  #spray3D {
+    pointer-events: all;
+  }
 
-.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
-}
-.spray-wrapper :deep(.list-item_N:nth-child(1)) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
-}
-.spray-wrapper :deep(.list-item_N:nth-child(2)) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
-}
-.company-home {
-  background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  .border {
-    width: 100%;
-    height: 94%;
-    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
-    background-size: 100% 100%;
-    margin-top: 55px;
+  .spray-wrapper :deep(.list-item_L .list-item__icon_L) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
+  }
+  .spray-wrapper :deep(.list-item_N:nth-child(1)) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
+  }
+  .spray-wrapper :deep(.list-item_N:nth-child(2)) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
   }
-  .top-bg {
+  .company-home {
+    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
     width: 100%;
-    height: 56px;
-    position: absolute;
-    margin-top: -20px;
-    z-index: 1;
+    height: 100%;
+    color: @white;
+    position: relative;
+    .border {
+      width: 100%;
+      height: 94%;
+      background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
+      background-size: 100% 100%;
+      margin-top: 55px;
+    }
+    .top-bg {
+      width: 100%;
+      height: 56px;
+      position: absolute;
+      margin-top: -20px;
+      z-index: 1;
+    }
   }
-}
 </style>

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

@@ -28,156 +28,156 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-const router = useRouter();
-const route = useRoute();
+  import { ref, onMounted } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  const router = useRouter();
+  const route = useRoute();
 
-// 当前激活菜单
-const activeIndex = ref(0);
+  // 当前激活菜单
+  const activeIndex = ref(0);
 
-const menuList = ref([
-  {
-    name: '防灭火监测与预警',
-    targatUrl: '/BeltMonitorWarn/index',
-    position: 'left',
-  },
-  {
-    name: '喷淋系统管控',
-    targatUrl: '/SprySystem/index',
-    position: 'center',
-  },
-  {
-    name: '应急控风减灾',
-    targatUrl: '/micro-vent-3dModal/beltYjkf/index',
-    position: 'right',
-  },
-]);
+  const menuList = ref([
+    {
+      name: '防灭火监测与预警',
+      targatUrl: '/BeltMonitorWarn/index',
+      position: 'left',
+    },
+    {
+      name: '喷淋系统管控',
+      targatUrl: '/SprySystem/index',
+      position: 'center',
+    },
+    {
+      name: '应急控风减灾',
+      targatUrl: '/micro-vent-3dModal/beltYjkf/index',
+      position: 'right',
+    },
+  ]);
 
-// 点击事件
-function handleNavClick(data: any) {
-  activeIndex.value = data.index;
-  router.push({ path: data.item.targatUrl });
-}
+  // 点击事件
+  function handleNavClick(data: any) {
+    activeIndex.value = data.index;
+    router.push({ path: data.item.targatUrl });
+  }
 
-onMounted(() => {
-  const currentPath = route.path;
-  const idx = menuList.value.findIndex((item) => item.targatUrl === currentPath);
-  if (idx !== -1) activeIndex.value = idx;
-});
+  onMounted(() => {
+    const currentPath = route.path;
+    const idx = menuList.value.findIndex((item) => item.targatUrl === currentPath);
+    if (idx !== -1) activeIndex.value = idx;
+  });
 </script>
 
 <style scoped lang="less">
-.tech-nav-container {
-  width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 60px;
-  position: relative;
-  box-sizing: border-box;
-  height: 50px;
-}
-
-/* 左侧图标容器 */
-.icon-left,
-.icon-right {
-  width: 50px;
-  height: 50px;
-  position: relative;
-  z-index: 2; /* 关键：设置为最高层级，确保浮在背景图之上 */
-  flex-shrink: 0; /* 防止被压缩 */
-  margin-top: 12px;
-  .icon-circle {
+  .tech-nav-container {
     width: 100%;
-    height: 100%;
-    background: url('/@/assets/images/beltFire/yjkf/1-3.png') center / 100% 100% no-repeat;
+    max-width: 800px;
+    margin: 0 auto;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+    padding: 12px 60px;
+    position: relative;
+    box-sizing: border-box;
+    height: 50px;
+  }
 
-    .icon {
-      margin-top: 2px;
-      width: 18px;
-      height: 18px;
-      background-size: contain;
-      background-repeat: no-repeat;
+  /* 左侧图标容器 */
+  .icon-left,
+  .icon-right {
+    width: 50px;
+    height: 50px;
+    position: relative;
+    z-index: 2; /* 关键：设置为最高层级，确保浮在背景图之上 */
+    flex-shrink: 0; /* 防止被压缩 */
+    margin-top: 12px;
+    .icon-circle {
+      width: 100%;
+      height: 100%;
+      background: url('/@/assets/images/beltFire/yjkf/1-3.png') center / 100% 100% no-repeat;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        margin-top: 2px;
+        width: 18px;
+        height: 18px;
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
     }
   }
-}
 
-.icon-left .icon {
-  background-image: url('/@/assets/images/beltFire/yjkf/3D.svg');
-}
-.icon-right .icon {
-  background-image: url('/@/assets/images/beltFire/yjkf/yjkz.svg');
-}
+  .icon-left .icon {
+    background-image: url('/@/assets/images/beltFire/yjkf/3D.svg');
+  }
+  .icon-right .icon {
+    background-image: url('/@/assets/images/beltFire/yjkf/yjkz.svg');
+  }
 
-/* 中间按钮组容器 - 核心修改区 */
-.nav-buttons {
-  display: flex;
-  margin-left: 50px;
-  align-items: center;
-  gap: 5px;
-  position: relative;
-  z-index: 1;
-  flex: 1;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-.top-img {
-  width: 100%;
-  height: 100px;
-  background: url('/@/assets/images/beltFire/yjkf/1-2.png') no-repeat center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1; /* 确保背景图在按钮下方 */
-}
-/* 按钮基础样式 */
-.nav-menu-item,
-.nav-menu-active {
-  height: 80%;
-  line-height: 35px;
-  padding: 0 20px;
-  font-size: 15px;
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
+  /* 中间按钮组容器 - 核心修改区 */
+  .nav-buttons {
+    display: flex;
+    margin-left: 50px;
+    align-items: center;
+    gap: 5px;
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    padding: 0 20px;
+    box-sizing: border-box;
+  }
+  .top-img {
+    width: 100%;
+    height: 100px;
+    background: url('/@/assets/images/beltFire/yjkf/1-2.png') no-repeat center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1; /* 确保背景图在按钮下方 */
+  }
+  /* 按钮基础样式 */
+  .nav-menu-item,
+  .nav-menu-active {
+    height: 80%;
+    line-height: 35px;
+    padding: 0 20px;
+    font-size: 15px;
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
 
-.nav-menu-item {
-  color: #59acc7;
-}
-.nav-menu-item:hover {
-  color: #fff;
-}
+  .nav-menu-item {
+    color: #59acc7;
+  }
+  .nav-menu-item:hover {
+    color: #fff;
+  }
 
-.nav-menu-active {
-  color: #fff !important;
-  font-weight: 500;
-}
+  .nav-menu-active {
+    color: #fff !important;
+    font-weight: 500;
+  }
 
-/* 按钮背景 */
-.btn-left {
-  background: url('/@/assets/images/beltFire/yjkf/navBtnLeft-2.png') center / 100% 100% no-repeat;
-}
-.btn-center {
-  background: url('/@/assets/images/beltFire/yjkf/navBtnCenter-2.png') center / 100% 100% no-repeat;
-}
-.btn-right {
-  background: url('/@/assets/images/beltFire/yjkf/navBtnRight-2.png') center / 100% 100% no-repeat;
-}
-.btn-left.nav-menu-active {
-  background-image: url('/@/assets/images/beltFire/yjkf/navBtnLeft-1.png');
-}
-.btn-center.nav-menu-active {
-  background-image: url('/@/assets/images/beltFire/yjkf/navBtnCenter-1.png');
-}
-.btn-right.nav-menu-active {
-  background-image: url('/@/assets/images/beltFire/yjkf/navBtnRight-1.png');
-}
-</style>
+  /* 按钮背景 */
+  .btn-left {
+    background: url('/@/assets/images/beltFire/yjkf/navBtnLeft-2.png') center / 100% 100% no-repeat;
+  }
+  .btn-center {
+    background: url('/@/assets/images/beltFire/yjkf/navBtnCenter-2.png') center / 100% 100% no-repeat;
+  }
+  .btn-right {
+    background: url('/@/assets/images/beltFire/yjkf/navBtnRight-2.png') center / 100% 100% no-repeat;
+  }
+  .btn-left.nav-menu-active {
+    background-image: url('/@/assets/images/beltFire/yjkf/navBtnLeft-1.png');
+  }
+  .btn-center.nav-menu-active {
+    background-image: url('/@/assets/images/beltFire/yjkf/navBtnCenter-1.png');
+  }
+  .btn-right.nav-menu-active {
+    background-image: url('/@/assets/images/beltFire/yjkf/navBtnRight-1.png');
+  }
+</style>

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

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

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

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

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

@@ -1,3 +1,4 @@
+import { title } from 'process';
 import { Config } from '../../deviceManager/configurationTable/types';
 // 皮带巷三级防灭火首页
 export const testBeltLaneFire: Config[] = [
@@ -311,7 +312,7 @@ export const testBeltLaneFire: Config[] = [
 ];
 export const testYjkf: Config[] = [
   {
-    deviceType: 'plmhInfo',
+    deviceType: 'plmhInfo', //
     moduleName: '',
     pageType: 'beltYjkf1',
     moduleData: {
@@ -741,3 +742,553 @@ export const testJcyj: Config[] = [
     },
   },
 ];
+
+/**
+ * 皮带巷火灾监测预警系统 - 新版配置数据
+ * 完全匹配 UI 图 4a7o4k9i.png
+ */
+export const testBeltNew: Config[] = [
+  // ==================== 左侧栏：火灾监测设备状态 ====================
+  {
+    deviceType: 'fmhjcInfo',
+    moduleName: '火灾监测设备报警与分析',
+    pageType: 'beltNew',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${beltName}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'sensor_status',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      complex_list: [],
+      list: [
+        {
+          title: '微震测声传感器',
+          readFrom: 'wz',
+          contentTop: [
+            {
+              label: '平均值',
+              code: 'avg',
+              color: 'white',
+            },
+            {
+              label: '最大值',
+              code: 'max',
+              color: 'white',
+            },
+            {
+              label: '最小值',
+              code: 'min',
+              color: 'white',
+            },
+          ],
+          contents: [
+            {
+              label: '是否报警',
+              code: 'alarm',
+              trans: {
+                true: '报警',
+                false: '正常',
+              },
+              color: 'green',
+            },
+            {
+              label: '最大值产生于',
+              code: 'maxTime',
+              color: 'white',
+            },
+          ],
+        },
+        {
+          title: 'HCl传感器',
+          readFrom: 'hcl',
+          contentTop: [
+            {
+              label: '平均值',
+              code: 'avg',
+              color: 'white',
+            },
+            {
+              label: '最大值',
+              code: 'max',
+              color: 'white',
+            },
+            {
+              label: '最小值',
+              code: 'min',
+              color: 'white',
+            },
+          ],
+          contents: [
+            {
+              label: '是否报警',
+              code: 'alarm',
+              trans: {
+                true: '报警',
+                false: '正常',
+              },
+              color: 'green',
+            },
+            {
+              label: '最大值产生于',
+              code: 'maxTime',
+              color: 'white',
+              info: {
+                code: 'pos',
+              },
+            },
+          ],
+        },
+        {
+          title: '光纤测温传感器',
+          readFrom: 'gx',
+          contentTop: [
+            {
+              label: '平均值',
+              code: 'avg',
+              color: 'white',
+            },
+            {
+              label: '最大值',
+              code: 'max',
+              color: 'white',
+            },
+            {
+              label: '最小值',
+              code: 'min',
+              color: 'white',
+            },
+          ],
+          contents: [
+            {
+              label: '是否报警',
+              code: 'alarm',
+              trans: {
+                true: '报警',
+                false: '正常',
+              },
+              color: 'green',
+            },
+            {
+              label: '最大值产生于',
+              code: 'maxTime',
+              color: 'white',
+              info: {
+                code: 'pos',
+              },
+            },
+          ],
+        },
+        {
+          title: 'CO传感器',
+          readFrom: 'co',
+          contentTop: [
+            {
+              label: '平均值',
+              code: 'avg',
+              color: 'white',
+            },
+            {
+              label: '最大值',
+              code: 'max',
+              color: 'white',
+            },
+            {
+              label: '最小值',
+              code: 'min',
+              color: 'white',
+            },
+          ],
+          contents: [
+            {
+              label: '是否报警',
+              code: 'alarm',
+              trans: {
+                true: '报警',
+                false: '正常',
+              },
+              color: 'green',
+            },
+            {
+              label: '最大值产生于',
+              code: 'maxTime',
+              color: 'white',
+              info: {
+                code: 'pos',
+              },
+            },
+          ],
+        },
+        {
+          title: '温度传感器',
+          readFrom: 'wd',
+          contentTop: [
+            {
+              label: '平均值',
+              code: 'avg',
+              color: 'white',
+            },
+            {
+              label: '最大值',
+              code: 'max',
+              color: 'white',
+            },
+            {
+              label: '最小值',
+              code: 'min',
+              color: 'white',
+            },
+          ],
+          contents: [
+            {
+              label: '是否报警',
+              code: 'alarm',
+              trans: {
+                true: '报警',
+                false: '正常',
+              },
+              color: 'green',
+            },
+            {
+              label: '最大值产生于',
+              code: 'maxTime',
+              color: 'white',
+              info: {
+                code: 'pos',
+              },
+            },
+          ],
+        },
+      ],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:400px;height:825px;',
+      version: '原版',
+      position: 'top:20px;left:25px;',
+    },
+  },
+
+  // ==================== 中央中部：预警结果列表 ====================
+  {
+    deviceType: 'pdhzfxInfo',
+    moduleName: '预警结果',
+    pageType: 'beltNew',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${beltName}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'warning_result',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          tableReadFrom: 'sysList',
+          columns: [
+            {
+              name: '时间',
+              prop: 'time',
+              width: '120px',
+            },
+            {
+              name: '区域',
+              prop: 'area',
+              width: '120px',
+            },
+            {
+              name: '预警类型',
+              prop: 'type',
+            },
+            {
+              name: '状态',
+              prop: 'status',
+            },
+            {
+              name: '处置意见',
+              prop: 'advice',
+            },
+            {
+              name: '操作',
+              prop: 'action',
+              render: (row: any) => {
+                return `<button class="btn-start-spray">启动喷淋</button>`;
+              },
+            },
+          ],
+          otherProps: {
+            title: '火灾风险预警',
+            prop: 'warningLevel',
+          },
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:1030px;height:300px;',
+      version: '原版',
+      position: 'bottom:25px;left:445px;',
+    },
+  },
+
+  {
+    deviceType: 'sensorAnalysis',
+    moduleName: '火灾监测设备状态',
+    pageType: 'beltNew',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${beltName}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'fire_sensor_analysis',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          title: '火焰传感器', // 对应 UI 图中的组标题
+          readFrom: 'hy',
+          items: [
+            {
+              label: '是否报警',
+              code: 'isAlarm', // 占位符
+              status: 'isAlarm', // 状态映射逻辑 (0:正常, 1:报警)
+            },
+            {
+              label: '最大值产生于',
+              code: 'maxTime',
+              info: '1521胶运顺槽600m',
+            },
+          ],
+        },
+        {
+          title: '温度传感器',
+          readFrom: 'wd',
+          items: [
+            {
+              label: '是否报警',
+              code: 'isAlarm', // 占位符
+              status: 'isAlarm', // 状态映射逻辑 (0:正常, 1:报警)
+            },
+            {
+              label: '最大值产生于',
+              code: 'maxTime',
+              info: '1521胶运顺槽600m',
+            },
+          ],
+        },
+        {
+          title: '烟雾传感器',
+          readFrom: 'yw',
+          items: [
+            {
+              label: '是否报警',
+              code: 'isAlarm', // 占位符
+              status: 'isAlarm', // 状态映射逻辑 (0:正常, 1:报警)
+            },
+            {
+              label: '最大值产生于',
+              code: 'maxTime',
+              info: '1521胶运顺槽600m',
+            },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:400px;height:400px;',
+      version: '原版',
+      position: 'top:20px;right:25px;',
+    },
+  },
+
+  // ==================== 右侧下部：车辆定位与CO浓度关联分析 ====================
+  {
+    deviceType: 'vehicleCOAnalysis',
+    moduleName: '车辆定位与CO浓度关联分析',
+    pageType: 'beltNew',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${beltName}',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'vehicle_co_analysis',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          type: 'control',
+          title: '车辆干扰排除',
+          layout: 'horizontal',
+          readFrom: '',
+          items: [
+            {
+              label: '状态',
+              code: 'isRisk',
+              trans: {
+                true: '开启',
+                false: '关闭',
+              },
+            },
+          ],
+        },
+        {
+          type: 'activity',
+          title: '最近车辆活动',
+          readFrom: 'activityList',
+          items: [
+            {
+              label: '',
+              code: 'pos',
+            },
+            {
+              label: '',
+              code: 'vehicle',
+            },
+            {
+              label: '',
+              code: 'status', // 状态映射逻辑 (0:已排除, 1:预警)
+            },
+          ],
+        },
+        {
+          type: 'analysis',
+          title: 'CO浓度异常分析',
+          readFrom: 'analysisList',
+          items: [
+            {
+              label: '',
+              code: 'pos',
+            },
+            {
+              label: '',
+              code: 'analysisText',
+            },
+          ],
+        },
+        {
+          type: 'reasonAnalysis',
+          title: '',
+          readFrom: '',
+          items: [
+            {
+              label: '可能原因',
+              code: 'possibleCause',
+            },
+            {
+              label: '建议',
+              code: 'recommendation',
+            },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:400px;height:410px;',
+      version: '原版',
+      position: 'top:435px;right:25px;',
+    },
+  },
+];

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

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

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

@@ -0,0 +1,227 @@
+<template>
+  <div class="fire-safety-panel">
+    <!-- 数据列表容器 -->
+    <div class="sensor-list">
+      <!-- 循环渲染分组 -->
+      <div v-for="(group, index) in config.list" :key="index" class="sensor-group">
+        <!-- 组标题 -->
+        <div class="group-title">{{ group.title }}</div>
+
+        <!-- 循环渲染组内项 -->
+        <div v-for="(item, itemIndex) in group.items" :key="itemIndex" class="sensor-item">
+          <template v-if="item.status !== undefined">
+            <div class="item-label">{{ item.label }}：</div>
+            <span v-if="item.status !== undefined" class="status-dot" :class="parseStatus(item.status)"></span>
+          </template>
+          <template v-else>
+            <div class="item-label">{{ item.label }}：</div>
+            <div class="item-content">
+              <!-- 主要数值/状态 -->
+              <span class="item-value">{{ parseValue(item.code, group.readFrom) }} 时刻 {{ item.info }} </span>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps, computed } from 'vue';
+
+  const props = defineProps<{
+    config: {
+      list: Array<{
+        title: string;
+        readFrom: string;
+        items: Array<{
+          label: string;
+          code: string;
+          status?: string;
+          info?: string;
+        }>;
+      }>;
+      data: {
+        [key: string]: any;
+      };
+    };
+  }>();
+
+  /**
+   * 解析 ${} 占位符的函数
+   * @param str - 原始字符串，如 "${[0].avg}"
+   */
+  const parseValue = (str: string, readFrom: string) => {
+    try {
+      // 简单的字符串替换逻辑
+      // 匹配 ${[索引].属性名} 格式
+      if (str.includes('${')) {
+        const regex = /\$\{\[(\d+)\]\.(\w+)\}/;
+
+        const match = str.match(regex);
+        if (match) {
+          const index = match[1]; // 获取索引，例如 "0"
+          const key = match[2]; // 获取属性名，例如 "max"
+          // 安全读取数据
+          if (props.config.data[index] !== undefined) {
+            return props.config.data[index][key];
+          }
+        }
+      } else {
+        if (readFrom) {
+          return props.config.data[readFrom][str];
+        } else {
+          return props.config.data[str];
+        }
+      }
+
+      return '数据未找到';
+      return 'N/A';
+    } catch (e) {
+      return 'Error';
+    }
+  };
+
+  /**
+   * 解析状态并返回对应的 CSS 类名
+   */
+  const parseStatus = (statusStr: string) => {
+    const statusVal = parseValue(statusStr);
+    // 假设 0 为正常，1 为报警
+    return statusVal === '1' ? 'status-danger' : 'status-normal';
+  };
+</script>
+
+<style scoped lang="less">
+  /* 全局面板样式 */
+  .fire-safety-panel {
+    background-color: #0f2130; /* 深蓝背景 */
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 0 15px rgba(0, 225, 255, 0.2);
+    color: #fff;
+    font-family: 'Microsoft YaHei', sans-serif;
+    padding-top: 30px;
+  }
+
+  .panel-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #00e1ff;
+    border-bottom: 1px solid #00aacc;
+    padding-bottom: 8px;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+  }
+
+  /* 列表容器 */
+  .sensor-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px; /* 组间距 */
+  }
+
+  /* 分组卡片 */
+  .sensor-group {
+    background: rgba(0, 30, 50, 0.6);
+    border: 1px solid #00aacc;
+    border-radius: 6px;
+    padding: 10px 15px;
+    transition: all 0.3s;
+
+    &:hover {
+      background: rgba(0, 40, 60, 0.8);
+      transform: translateY(-1px);
+    }
+  }
+
+  /* 组标题 */
+  .group-title {
+    color: #ffcc00;
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 8px;
+    padding-left: 10px;
+    border-left: 3px solid #ffcc00;
+  }
+
+  /* 列表项 */
+  .sensor-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+    font-size: 13px;
+    color: #c0d0e0;
+  }
+
+  .item-label {
+    // width: 70px; /* 标签宽度 */
+    text-align: right;
+    margin-right: 10px;
+    color: #889db0;
+  }
+
+  .item-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .item-value {
+    margin-right: 10px;
+    color: #ffffff;
+  }
+
+  .item-info {
+    color: #889db0;
+    font-size: 12px;
+  }
+
+  /* 状态指示灯 */
+  .status-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-left: 5px;
+    animation: pulse 2s infinite;
+
+    &.status-normal {
+      background-color: #00ff00;
+    }
+
+    &.status-danger {
+      background-color: #ff4d4d;
+      animation: flash 1s infinite;
+    }
+  }
+
+  /* 动画效果 */
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.2);
+      opacity: 0.8;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes flash {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+</style>

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

@@ -0,0 +1,281 @@
+<template>
+  <div class="sensor-analysis-board">
+    <!-- 根据布局方向渲染，这里假设是垂直列 -->
+    <div class="sensor-group">
+      <!-- 循环渲染每一个传感器卡片 -->
+      <div v-for="(sensor, index) in config.list" :key="index" class="sensor-card">
+        <div class="sensor-header">
+          <h3 class="sensor-title">{{ sensor.title }}</h3>
+        </div>
+
+        <!-- 上半部分：三列数值 -->
+        <div class="sensor-values">
+          <div class="value-item">
+            <span class="label">{{ sensor.contentTop[0].label }}</span>
+            <span class="value" :style="{ color: sensor.contentTop[0].color }">
+              {{ parseTemplate(sensor.contentTop[0].code, sensor.readFrom) }}
+            </span>
+          </div>
+          <div class="value-item">
+            <span class="label">{{ sensor.contentTop[1].label }}</span>
+            <span class="value" :style="{ color: sensor.contentTop[1].color }">
+              {{ parseTemplate(sensor.contentTop[1].code, sensor.readFrom) }}
+            </span>
+          </div>
+          <div class="value-item">
+            <span class="label">{{ sensor.contentTop[2].label }}</span>
+            <span class="value" :style="{ color: sensor.contentTop[2].color }">
+              {{ parseTemplate(sensor.contentTop[2].code, sensor.readFrom) }}
+            </span>
+          </div>
+        </div>
+
+        <!-- 下半部分：折叠面板 -->
+        <div class="sensor-details">
+          <div class="detail-row" @click="toggleCollapse(index)" :class="{ 'is-collapsed': collapsedIndex === index }">
+            <div class="row-label">
+              <span class="arrow-icon">▶</span>
+              <span> {{ sensor.contents[0].label }}: </span>
+            </div>
+            <div
+              class="row-value"
+              :style="{
+                color: getAlarmColor(parseTemplate(sensor.contents[0].code, sensor.readFrom)),
+              }"
+            >
+              {{ getAlarmText(parseTemplate(sensor.contents[0].code, sensor.readFrom)) }}
+            </div>
+          </div>
+
+          <!-- 折叠内容 -->
+          <transition name="fade">
+            <div v-show="collapsedIndex === index" class="collapse-content">
+              <div class="detail-row">
+                <span class="row-label">{{ sensor.contents[1].label }}: </span>
+                <div class="row-value" :style="{ color: sensor.contents[1].color }">
+                  <span>{{ parseTemplate(sensor.contents[1].code, sensor.readFrom) }} 时刻</span>
+                  <span v-if="sensor.contents[1].info" class="info">{{ parseTemplate(sensor.contents[1].info['code'], sensor.readFrom) }}</span>
+                </div>
+              </div>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+
+  const props = defineProps<{
+    config: {
+      list: Array<{
+        readFrom: string;
+        title: string;
+        contentTop: {
+          code: string;
+          color: string;
+          label?: string;
+        }[];
+        contents: {
+          code: string;
+          color: string;
+          label?: string;
+          info?: string;
+        }[];
+      }>;
+      data: {
+        [key: string]: any;
+      };
+    };
+  }>();
+
+  /**
+   * 解析模板字符串并返回值
+   * @param {String} templateStr - 例如: '${[0].max}'
+   */
+  function parseTemplate(str, readFrom) {
+    try {
+      // 简单的字符串替换逻辑
+      // 匹配 ${[索引].属性名} 格式
+      if (str.includes('${')) {
+        const regex = /\$\{\[(\d+)\]\.(\w+)\}/;
+
+        const match = str.match(regex);
+        if (match) {
+          const index = match[1]; // 获取索引，例如 "0"
+          const key = match[2]; // 获取属性名，例如 "max"
+          // 安全读取数据
+          if (props.config.data[index] !== undefined) {
+            return props.config.data[index][key];
+          }
+        }
+      } else {
+        if (readFrom) {
+          return props.config.data[readFrom][str];
+        } else {
+          return props.config.data[str];
+        }
+      }
+
+      return '数据未找到';
+      return 'N/A';
+    } catch (e) {
+      return 'Error';
+    }
+  }
+
+  // --- 3. 交互逻辑 ---
+  const collapsedIndex = ref(null);
+
+  const toggleCollapse = (index) => {
+    collapsedIndex.value = collapsedIndex.value === index ? null : index;
+  };
+
+  // --- 4. 状态判断方法 ---
+  const getAlarmColor = (value) => {
+    // 根据 trans 规则判断颜色
+    if (value === true || value == 1) return 'red';
+    if (value === false || value == 0) return 'green';
+    return 'white';
+  };
+
+  const getAlarmText = (value) => {
+    if (value === true) return '报警';
+    if (value === false) return '正常';
+    return value;
+  };
+</script>
+
+<style scoped>
+  .sensor-analysis-board {
+    background: linear-gradient(180deg, #0b2b4a 0%, #020f1a 100%);
+    color: #fff;
+    font-family: 'Microsoft YaHei', sans-serif;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  }
+
+  .sensor-group {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .sensor-card {
+    background: rgba(0, 40, 70, 0.6);
+    border: 1px solid #00bfff;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: inset 0 0 10px rgba(0, 191, 255, 0.3);
+  }
+
+  .sensor-header {
+    border-bottom: 1px solid #00bfff;
+    padding-bottom: 8px;
+    margin-bottom: 10px;
+  }
+
+  .sensor-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #00bfff;
+    margin: 0;
+  }
+
+  .sensor-values {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 15px;
+    text-align: center;
+  }
+
+  .value-item {
+    flex: 1;
+    padding: 5px;
+  }
+
+  .label {
+    display: block;
+    font-size: 14px;
+    color: #8ecfff;
+    margin-bottom: 5px;
+  }
+
+  .value {
+    font-size: 24px;
+    font-weight: bold;
+    color: #fff;
+  }
+
+  .sensor-details {
+    background: rgba(0, 20, 40, 0.8);
+    border-radius: 6px;
+    padding: 10px;
+  }
+
+  .detail-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    cursor: pointer;
+    border-bottom: 1px solid rgba(142, 207, 255, 0.3);
+    transition: background 0.3s;
+  }
+
+  .detail-row:last-child {
+    border-bottom: none;
+  }
+
+  .detail-row:hover {
+    background: rgba(0, 100, 200, 0.3);
+  }
+
+  .row-label {
+    font-size: 15px;
+    color: #a0daff;
+    display: flex;
+    align-items: center;
+  }
+
+  .row-value {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .arrow-icon {
+    transition: transform 0.3s;
+    margin-right: 5px;
+    font-size: 12px;
+  }
+
+  .is-collapsed .arrow-icon {
+    transform: rotate(90deg);
+  }
+
+  .collapse-content {
+    padding-top: 10px;
+    animation: fadeIn 0.5s ease-in-out;
+  }
+
+  /* 折叠动画 */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  /* 模拟图片中的样式 */
+  @media (max-width: 600px) {
+    .sensor-values {
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+</style>

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

@@ -0,0 +1,333 @@
+<template>
+  <div class="monitor-container">
+    <!-- 1. 车辆干扰排除 (Control Section) -->
+
+    <div class="section" v-for="item in filteredList('control')" :key="item.type">
+      <div class="control-row">
+        <span class="label">车辆干扰排除</span>
+        <div class="toggle-switch" :class="{ 'is-on': monitData.isRisk }">
+          <span class="text">{{ monitData.isRisk ? '开启' : '关闭' }}</span>
+          <div class="slider"></div>
+          <span class="text">{{ monitData.isRisk ? '关闭' : '开启' }}</span>
+        </div>
+        <button class="btn-history">历史分析记录</button>
+      </div>
+    </div>
+
+    <!-- 2. 最近车辆活动 (Activity Section) -->
+    <div class="section" v-for="item in filteredList('activity')" :key="item.type">
+      <div class="section-title">{{ item.title }}</div>
+      <div class="activity-list">
+        <div class="activity-item" v-for="(act, idx) in monitData.activityList" :key="idx">
+          <span class="pos">{{ act.pos }}</span>
+          <span class="vehicle">{{ act.vehicle }}</span>
+          <span class="status" :class="getStatusClass(act.status)">
+            {{ getStatusText(act.status) }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 3. CO浓度异常分析 (Analysis Section) -->
+    <div class="section" v-for="item in filteredList('analysis')" :key="item.type">
+      <div class="section-title">{{ item.title }}</div>
+      <div class="analysis-list">
+        <div class="analysis-item" v-for="(ana, idx) in monitData.analysisList" :key="idx">
+          <span class="label">{{ ana.pos }}</span>
+          <span class="text">{{ ana.analysisText }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 4. 可能原因与建议 (Reason Section) -->
+    <div class="section" v-for="item in filteredList('reasonAnalysis')" :key="item.type">
+      <div class="reason-item">
+        <span class="label">{{ item.items[0].label }}：</span>
+        <span class="value">{{ monitData.possibleCause }}</span>
+      </div>
+      <div class="reason-item">
+        <span class="label">{{ item.items[1].label }}：</span>
+        <span class="value recommendation">{{ monitData.recommendation }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+
+  // 定义 Props，接收配置和模拟数据
+  interface ConfigItem {
+    type: string;
+    title: string;
+    readFrom?: string;
+    items?: Array<{ label: string; code?: string; trans?: any }>;
+  }
+
+  const props = withDefaults(
+    defineProps<{
+      list: ConfigItem[];
+      data: {
+        isRisk: boolean;
+        activityList: Array<{ pos: string; vehicle: string; status: string }>;
+        analysisList: Array<{ pos: string; analysisText: string }>;
+        possibleCause: string;
+        recommendation: string;
+      };
+    }>(),
+    {
+      list: () => [],
+      data: () => ({
+        isRisk: false,
+        activityList: [],
+        analysisList: [],
+        possibleCause: '',
+        recommendation: '',
+      }),
+    }
+  );
+
+  const monitData = computed(() => props.data);
+  // --- 计算属性：根据 type 筛选配置项 ---
+  const filteredList = (type: string) => {
+    return props.list.filter((item) => item.type === type);
+  };
+
+  // --- 方法：获取状态类名和文本 ---
+  const getStatusClass = (status: string) => {
+    if (status === '0') return 'status-excluded';
+    if (status === '1') return 'status-warning';
+    return '';
+  };
+
+  const getStatusText = (status: string) => {
+    if (status === '0') return '已排除';
+    if (status === '1') return '预警';
+    return '未知';
+  };
+</script>
+
+<style scoped>
+  /* 基础样式重置 */
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .monitor-container {
+    width: 400px;
+    height: 410px;
+    background: linear-gradient(180deg, #0d213f 0%, #0a162a 100%);
+    border: 1px solid #1a3b5d;
+    color: #fff;
+    font-family: 'Microsoft YaHei', sans-serif;
+    padding: 10px 15px;
+    position: relative;
+    /* overflow: hidden; */
+  }
+
+  /* 顶部标题样式 (虽然图里有，但数据配置里没单独标题，这里用 CSS 模拟顶部栏) */
+  .monitor-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #00c6ff, #0072ff);
+  }
+
+  /* 通用区块样式 */
+  .section {
+    margin-bottom: 15px;
+  }
+
+  .section-title {
+    font-size: 12px;
+    color: #4fd1ff;
+    font-weight: bold;
+    border-left: 3px solid #00c6ff;
+    padding-left: 8px;
+    margin-bottom: 8px;
+    letter-spacing: 1px;
+  }
+
+  /* 1. 控制区样式 (开关) */
+  .control-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(0, 0, 0, 0.2);
+    padding: 5px 10px;
+    border-radius: 4px;
+    margin-bottom: 15px;
+  }
+
+  .label {
+    font-size: 13px;
+    color: #fff;
+    text-align: left;
+  }
+
+  .toggle-switch {
+    display: flex;
+    align-items: center;
+    width: 120px;
+    height: 26px;
+    background: #1a2b42;
+    border-radius: 13px;
+    padding: 2px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .toggle-switch.is-on {
+    background: #00c6ff;
+  }
+
+  .toggle-switch .text {
+    flex: 1;
+    text-align: center;
+    font-size: 11px;
+    color: #7f9cb3;
+    transition: color 0.2s;
+  }
+
+  .toggle-switch.is-on .text {
+    color: #fff;
+  }
+
+  .toggle-switch .text:first-child {
+    color: #fff;
+  }
+
+  .toggle-switch.is-on .text:first-child {
+    color: #000;
+  }
+
+  .slider {
+    width: 22px;
+    height: 22px;
+    background: #fff;
+    border-radius: 50%;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.2s ease;
+  }
+
+  .toggle-switch.is-on .slider {
+    transform: translateX(64px);
+    background: #fff;
+  }
+
+  .btn-history {
+    background: rgba(0, 198, 255, 0.1);
+    border: 1px solid #00c6ff;
+    color: #00c6ff;
+    font-size: 11px;
+    padding: 2px 8px;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+
+  .btn-history:hover {
+    background: rgba(0, 198, 255, 0.2);
+  }
+
+  /* 2. 车辆活动列表 */
+  .activity-list {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    padding: 8px 0;
+  }
+
+  .activity-item {
+    display: flex;
+    padding: 4px 10px;
+    font-size: 12px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .activity-item:last-child {
+    border-bottom: none;
+  }
+
+  .pos {
+    flex: 1;
+    color: #a0cfff;
+  }
+
+  .vehicle {
+    flex: 2;
+    color: #fff;
+  }
+
+  .status {
+    padding: 2px 6px;
+    border-radius: 2px;
+    font-size: 10px;
+    font-weight: bold;
+    color: #fff;
+    min-width: 40px;
+    text-align: center;
+  }
+
+  .status-excluded {
+    background: #00c853;
+  }
+
+  .status-warning {
+    background: #ff5252;
+  }
+
+  /* 3. CO浓度分析列表 */
+  .analysis-list {
+    font-size: 12px;
+    line-height: 1.6;
+  }
+
+  .analysis-item {
+    margin-bottom: 8px;
+  }
+
+  .analysis-item .label {
+    color: #ff9800;
+    font-weight: bold;
+  }
+
+  .analysis-item .text {
+    color: #fff;
+    margin-left: 5px;
+  }
+
+  /* 4. 原因与建议 */
+  .reason-item {
+    display: flex;
+    align-items: flex-start;
+    font-size: 12px;
+    line-height: 1.6;
+    margin-bottom: 8px;
+  }
+
+  .reason-item .label {
+    color: #ff9800;
+    font-weight: bold;
+    width: 55px;
+    text-align: left;
+    margin-right: 10px;
+    white-space: nowrap;
+  }
+
+  .reason-item .value {
+    flex: 1;
+    color: #fff;
+  }
+
+  .recommendation {
+    color: #ff5252;
+    font-weight: bold;
+  }
+</style>

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

@@ -0,0 +1,202 @@
+<template>
+  <div class="warning-result-panel">
+    <!-- 顶部标题栏 -->
+    <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>
+      <div class="header-right">
+        <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>
+          <span class="risk-text">{{ config.data[config.otherProps.prop] }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格主体 -->
+    <div class="table-container">
+      <table class="warning-table">
+        <thead>
+          <tr>
+            <th v-for="col in config.columns" :key="col.prop" :style="{ width: col.width }">
+              {{ col.name }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) in config.data[config.tableReadFrom]" :key="index" class="table-row">
+            <td v-for="col in config.columns" :key="col.prop" class="table-cell">
+              <!-- 如果是 render 函数，且需要渲染 HTML，使用 v-html -->
+              <span v-if="col.render" v-html="col.render(row)"></span>
+              <span v-else>{{ row[col.prop] }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</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;
+      };
+    };
+  }>();
+</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;
+  }
+
+  .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); // 悬停高亮
+    }
+  }
+
+  .table-cell {
+    padding: 12px 15px;
+    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);
+    }
+  }
+</style>

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

@@ -69,7 +69,7 @@
             />
           </div>
         </template>
-        <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
+        <!-- 图表部分 -->
         <template v-if="config.name === 'chart'">
           <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config" :chart-data="config.data" />
           <CustomChart v-else class="content__module" :chart-config="config.config" :chart-data="config.data" />
@@ -93,7 +93,7 @@
         <template v-if="config.name === 'gallery'">
           <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
         </template>
-        <!-- 复杂列表部分 -->
+        <!-- 画廊列表部分 -->
         <template v-if="config.name === 'gallery_list'">
           <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
         </template>
@@ -101,7 +101,7 @@
         <template v-if="config.name === 'complex_list'">
           <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
         </template>
-        <!-- 表格部分，这部分通常是占一整个模块的 -->
+        <!-- 表格部分 -->
         <template v-if="config.name === 'table'">
           <CustomTable
             class="content__module text-center overflow-auto"
@@ -181,423 +181,454 @@
       <template v-if="config.key === 'fire_warn'">
         <FIreWarn class="content__module" />
       </template> -->
+
+        <!-- ==================== 新增皮带巷火灾监测模块 ==================== -->
+
+        <!-- 1. 传感器状态面板 -->
+        <template v-if="config.name === 'sensor_status'">
+          <SensorStatusPanel class="content__module" :config="config" />
+        </template>
+
+        <!-- 3. 火灾监测设备分析 -->
+        <template v-if="config.name === 'fire_sensor_analysis'">
+          <FireSensorAnalysis class="content__module" :config="config" />
+        </template>
+
+        <!-- 4. 预警结果列表 -->
+        <template v-if="config.name === 'warning_result'">
+          <WarningResultList class="content__module" :config="config" />
+        </template>
+
+        <!-- 5. 车辆定位与 CO 浓度关联分析 -->
+        <template v-if="config.name === 'vehicle_co_analysis'">
+          <VehicleCOAnalysis class="content__module" :list="config.list" :data="config.data" />
+        </template>
       </div>
     </div>
   </div>
 </template>
+
 <script lang="ts" setup>
-import { computed } from 'vue';
-import {
-  CommonItem,
-  Config,
-  // ModuleDataBoard,
-  // ModuleDataChart,
-  // ModuleDataList,
-  // ModuleDataPreset,
-  // ModuleDataTable,
-} from '../../../deviceManager/configurationTable/types';
-import MiniBoard from './detail/MiniBoard.vue';
-import TimelineList from './detail/TimelineList.vue';
-import TimelineListNew from './detail/TimelineListNew.vue';
-import CustomList from './detail/CustomList.vue';
-import CustomGallery from './detail/CustomGallery.vue';
-import ComplexList from './detail/ComplexList.vue';
-import GalleryList from './detail/GalleryList.vue';
-import CustomTable from './detail/CustomTable.vue';
-import CustomChart from './detail/CustomChart.vue';
-import { clone } from 'lodash-es';
-import { getData, getFormattedText } from '../hooks/helper';
-import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-import QHCurve from './preset/QHCurve.vue';
-import MeasureDetail from './preset/MeasureDetail.vue';
-import CustomTabs from './preset/CustomTabs.vue';
-import AIChat from '/@/components/AIChat/MiniChat.vue';
-import DeviceAlarm from './preset/DeviceAlarm.vue';
-import SelectCs from './preset/SelectCs.vue';
-import MiniBoardNew from './detail/MiniBoard-New.vue';
-import Partition from './preset/partition.vue';
-import SelectorDualChart from './preset/selectorDualChart.vue';
-import RadioLabel from './preset/radioLabel.vue';
-import ButtonList from './preset/buttonList.vue';
-import NitrogenBtnList from './preset/nitrogenBtnList.vue';
-import cardList from './preset/cardList.vue';
-import generalList from './preset/generalList.vue';
-import GateBoard from '../belt/components/detail/gateBoard.vue';
-// import FIreWarn from './preset/FIreWarn.vue';
-// import FIreControl from './preset/FIreControl.vue';
+  import { computed, ref } from 'vue';
+  import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
+  import MiniBoard from './detail/MiniBoard.vue';
+  import TimelineList from './detail/TimelineList.vue';
+  import TimelineListNew from './detail/TimelineListNew.vue';
+  import CustomList from './detail/CustomList.vue';
+  import CustomGallery from './detail/CustomGallery.vue';
+  import ComplexList from './detail/ComplexList.vue';
+  import GalleryList from './detail/GalleryList.vue';
+  import CustomTable from './detail/CustomTable.vue';
+  import CustomChart from './detail/CustomChart.vue';
+  import { clone } from 'lodash-es';
+  import { getData, getFormattedText } from '../hooks/helper';
+  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+  import QHCurve from './preset/QHCurve.vue';
+  import MeasureDetail from './preset/MeasureDetail.vue';
+  import CustomTabs from './preset/CustomTabs.vue';
+  import AIChat from '/@/components/AIChat/MiniChat.vue';
+  import DeviceAlarm from './preset/DeviceAlarm.vue';
+  import SelectCs from './preset/SelectCs.vue';
+  import MiniBoardNew from './detail/MiniBoard-New.vue';
+  import Partition from './preset/partition.vue';
+  import SelectorDualChart from './preset/selectorDualChart.vue';
+  import RadioLabel from './preset/radioLabel.vue';
+  import ButtonList from './preset/buttonList.vue';
+  import NitrogenBtnList from './preset/nitrogenBtnList.vue';
+  import cardList from './preset/cardList.vue';
+  import generalList from './preset/generalList.vue';
+  import GateBoard from '../belt/components/detail/gateBoard.vue';
+  // ==================== 新增皮带巷火灾监测组件 ====================
+  import SensorStatusPanel from './belt/SensorStatusPanel.vue';
+  import FireSensorAnalysis from './belt/FireSensorAnalysis.vue';
+  import WarningResultList from './belt/WarningResultList.vue';
+  import VehicleCOAnalysis from './belt/VehicleCOAnalysis.vue';
 
-const props = defineProps<{
-  data: any;
-  moduleData: Config['moduleData'];
-  chartData: any;
-}>();
+  const props = defineProps<{
+    data: any;
+    moduleData: Config['moduleData'];
+    chartData: any;
+  }>();
 
-const { background, layout } = props.moduleData;
+  const emit = defineEmits<{
+    (e: 'start-spray', data: any): void;
+    (e: 'emergency-action', action: string, data: any): void;
+  }>();
 
-// 获取当原始配置带 items 项时的最终 items 配置
-function getItems(raw, items: CommonItem[]) {
-  return items.map((i) => {
-    return {
-      ...i,
-      label: getFormattedText(raw, i.label, i.trans),
-      value: getFormattedText(raw, i.value, i.trans),
-    };
-  });
-}
+  const { background, layout } = props.moduleData;
 
-// 获取当 List 组件配置带 items 项时的最终 items 配置
-function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-  if (mapFromData && Array.isArray(raw)) {
-    return raw.map((data) => {
-      const item = items[0];
+  // 获取当原始配置带 items 项时的最终 items 配置
+  function getItems(raw: any, items: CommonItem[]) {
+    return items.map((i) => {
       return {
-        ...item,
-        label: getFormattedText(data, item.label, item.trans),
-        value: getFormattedText(data, item.value, item.trans),
+        ...i,
+        label: getFormattedText(raw, i.label, i.trans),
+        value: getFormattedText(raw, i.value, i.trans),
       };
     });
   }
-  return getItems(raw, items);
-}
 
-/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
-const layoutConfig = computed(() => {
-  const refData = props.data;
-  const board = clone(props.moduleData.board) || [];
-  const list = clone(props.moduleData.list) || [];
-  const gallery = clone(props.moduleData.gallery) || [];
-  const complex_list = clone(props.moduleData.complex_list) || [];
-  const gallery_list = clone(props.moduleData.gallery_list) || [];
-  const tabs = clone(props.moduleData.tabs) || [];
-  const chart = clone(props.moduleData.chart) || [];
-  const table = clone(props.moduleData.table) || [];
-  const preset = clone(props.moduleData.preset) || [];
-  const partition = clone(props.moduleData.partition) || [];
-  const mockData = clone(props.chartData) || [];
-  return layout.items.reduce((arr: any[], item) => {
-    switch (item.name) {
-      case 'board': {
-        const cfg = board.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          overflow: true,
+  // 获取当 List 组件配置带 items 项时的最终 items 配置
+  function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+    if (mapFromData && Array.isArray(raw)) {
+      return raw.map((data) => {
+        const item = items[0];
+        return {
           ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'list': {
-        const cfg = list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          label: getFormattedText(data, item.label, item.trans),
+          value: getFormattedText(data, item.value, item.trans),
+        };
+      });
+    }
+    return getItems(raw, items);
+  }
 
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getListItems(data, cfg.items, cfg.mapFromData),
-        });
-        break;
-      }
-      case 'gallery': {
-        const cfg = gallery.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+  /** 根据配置里的 layout 将配置格式化为带 key 的具体配置 */
+  const layoutConfig = computed(() => {
+    const refData = props.data;
+    const board = clone(props.moduleData.board) || [];
+    const list = clone(props.moduleData.list) || [];
+    const gallery = clone(props.moduleData.gallery) || [];
+    const complex_list = clone(props.moduleData.complex_list) || [];
+    const gallery_list = clone(props.moduleData.gallery_list) || [];
+    const tabs = clone(props.moduleData.tabs) || [];
+    const chart = clone(props.moduleData.chart) || [];
+    const table = clone(props.moduleData.table) || [];
+    const preset = clone(props.moduleData.preset) || [];
+    const partition = clone(props.moduleData.partition) || [];
 
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'complex_list': {
-        const cfg = complex_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+    const mockData = clone(props.chartData) || [];
 
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
+    return layout.items.reduce((arr: any[], item) => {
+      switch (item.name) {
+        case 'board': {
+          const cfg = board.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: (data || []).map((d) => {
-              return {
-                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                contents: firstListItem.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(d, e.label, e.trans),
-                    value: getFormattedText(d, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
-        } else {
+          break;
+        }
+        case 'list': {
+          const cfg = list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: cfg.items.map((i) => {
-              return {
-                title: getFormattedText(data, i.title, i.trans),
-                contents: i.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label, e.trans),
-                    value: getFormattedText(data, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getListItems(data, cfg.items, cfg.mapFromData),
           });
+          break;
         }
-        break;
-      }
-      case 'gallery_list': {
-        const cfg = gallery_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-          galleryItems: getItems(data, cfg.galleryItems),
-        });
-        break;
-      }
-      case 'tabs': {
-        const cfg = tabs.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
+        case 'gallery': {
+          const cfg = gallery.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: (data || []).map((d) => {
-              return {
-                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                contents: firstListItem.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(d, e.label, e.trans),
-                    value: getFormattedText(d, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
-        } else {
+          break;
+        }
+        case 'complex_list': {
+          const cfg = complex_list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+          if (cfg.mapFromData) {
+            const firstListItem = cfg.items[0];
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: (data || []).map((d: any) => {
+                return {
+                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                  contents: firstListItem.contents.map((e: any) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(d, e.label, e.trans),
+                      value: getFormattedText(d, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          } else {
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: cfg.items.map((i: any) => {
+                return {
+                  title: getFormattedText(data, i.title, i.trans),
+                  contents: i.contents.map((e: any) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(data, e.label, e.trans),
+                      value: getFormattedText(data, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          }
+          break;
+        }
+        case 'gallery_list': {
+          const cfg = gallery_list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: cfg.items.map((i) => {
-              return {
-                title: getFormattedText(data, i.title, i.trans),
-                contents: i.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label, e.trans),
-                    value: getFormattedText(data, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
+            galleryItems: getItems(data, cfg.galleryItems),
           });
+          break;
         }
-        break;
-      }
-      case 'chart': {
-        const cfg = chart.shift();
-        if (cfg?.type == 'scatter') {
+        case 'tabs': {
+          const cfg = tabs.shift();
           if (!cfg) break;
-          const data = getData(mockData, cfg.readFrom, cfg.parser);
-
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+          if (cfg.mapFromData) {
+            const firstListItem = cfg.items[0];
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: (data || []).map((d: any) => {
+                return {
+                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                  contents: firstListItem.contents.map((e: any) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(d, e.label, e.trans),
+                      value: getFormattedText(d, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          } else {
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: cfg.items.map((i: any) => {
+                return {
+                  title: getFormattedText(data, i.title, i.trans),
+                  contents: i.contents.map((e: any) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(data, e.label, e.trans),
+                      value: getFormattedText(data, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          }
+          break;
+        }
+        case 'chart': {
+          const cfg = chart.shift();
+          if (!cfg) break;
+          const data = cfg?.type == 'scatter' ? getData(mockData, cfg.readFrom, cfg.parser) : getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             ...item,
             config: cfg,
             data,
           });
           break;
-        } else {
+        }
+        case 'table': {
+          const cfg = table.shift();
+          if (!cfg) break;
+          // const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            ...cfg,
+            ...item,
+            columns: cfg.columns,
+            data: refData,
+          });
+          break;
+        }
+        case 'partition': {
+          const cfg = partition.shift();
           if (!cfg) break;
           const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
+            overflow: true,
             ...item,
-            config: cfg,
             data,
+            ...cfg,
           });
           break;
         }
-      }
-      case 'table': {
-        const cfg = table.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...cfg,
-          ...item,
-          columns: cfg.columns,
-          data,
-        });
-        break;
-      }
-      case 'partition': {
-        const cfg = partition.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-        arr.push({
-          overflow: true,
-          ...item,
-          data,
-          ...cfg,
-        });
-        break;
-      }
-      default: {
-        const cfg = preset.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+        // ==================== 新增皮带巷模块配置处理 ====================
+        // 火灾监测设备报警与分析
+        case 'sensor_status': {
+          arr.push({
+            overflow: true,
+            ...item,
+            list: list,
+            data: refData,
+          });
+          break;
+        }
+        //火灾监测设备状态
+        case 'fire_sensor_analysis': {
+          arr.push({
+            overflow: true,
+            ...item,
+            list: list,
+            data: refData,
+          });
+          break;
+        }
 
-        arr.push({
-          ...item,
-          data,
-          config: cfg,
-        });
-        break;
+        case 'warning_result': {
+          const cfg = table.shift();
+          if (!cfg) break;
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            columns: cfg.columns,
+            data: refData,
+          });
+          break;
+        }
+
+        case 'vehicle_co_analysis': {
+          arr.push({
+            overflow: true,
+            ...item,
+            list: list,
+            data: refData,
+          });
+          break;
+        }
+
+        default: {
+          const cfg = preset.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            ...item,
+            data,
+            config: cfg,
+          });
+          break;
+        }
       }
-    }
-    console.log(arr, 'arr---');
-    return arr;
-  }, []);
-});
+      return arr;
+    }, []);
+  });
 </script>
 <style lang="less" scoped>
-@import '@/design/theme.less';
-
-.content {
-  height: calc(100% - 30px);
-  position: relative;
-  // z-index: -2;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto; // 这里会导致样式无故添加滚动条
-  overflow-x: hidden;
-}
-
-.content__background {
-  width: 100%;
-  // height: 100%;
-  height: calc(100% - 65px);
-  position: absolute;
-  top: 65px;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-  padding: 5px;
-  box-sizing: border-box;
-}
-.content__background_1 {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-}
-
-.image__background {
-  width: 35%;
-  height: 61%;
-  left: 30%;
-}
+  @import '@/design/theme.less';
 
-.content__module {
-  // margin-top: 5px;
-  // margin-bottom: 5px;
-  width: 100%;
-  height: 100%;
-}
+  .content {
+    height: calc(100% - 30px);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .content__background {
+    width: 100%;
+    // height: 100%;
+    height: calc(100% - 65px);
+    position: absolute;
+    top: 65px;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+    padding: 5px;
+    box-sizing: border-box;
+  }
+  .content__background_1 {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+  }
 
-.content__module1 {
-  background: url('@/assets/images/vent/homeNew/databg/4.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  height: 129px;
-  margin-top: 20%;
-}
+  .image__background {
+    width: 35%;
+    height: 61%;
+    left: 30%;
+  }
 
-.content__moduleFire {
-  width: 100%;
-  height: 100%;
-  margin-left: -24% !important;
-}
+  .content__module {
+    width: 100%;
+    height: 100%;
+  }
 
-.content__module_dust {
-  background: url('@/assets/images/vent/homeNew/bottomBg.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-}
+  .content__module1 {
+    background: url('@/assets/images/vent/homeNew/databg/4.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    height: 129px;
+    margin-top: 20%;
+  }
 
-// .content__module:first-of-type {
-//   margin-top: 0;
-// }
-// .content__module:last-of-type {
-//   margin-bottom: 0;
-// }
-::-webkit-scrollbar {
-  width: 5px !important;
-}
+  .content__moduleFire {
+    width: 100%;
+    height: 100%;
+    margin-left: -24% !important;
+  }
 
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
+  .content__module_dust {
+    background: url('@/assets/images/vent/homeNew/bottomBg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+  }
 
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  /* background-color: transparent; */
-  color: #fff;
-}
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
 
-:deep(.zxm-select-arrow) {
-  color: #fff;
-}
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
 
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    color: #fff;
+  }
 
-:deep(.zxm-select-selection-placeholder) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-arrow) {
+    color: #fff;
+  }
 
-:deep(.dialog-overlay) {
-  width: 100%;
-  height: 100%;
-  position: unset;
-  box-shadow: unset;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
 
-::-webkit-scrollbar {
-  width: 5px !important;
-}
+  :deep(.zxm-select-selection-placeholder) {
+    color: #fff !important;
+  }
 
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
+  :deep(.dialog-overlay) {
+    width: 100%;
+    height: 100%;
+    position: unset;
+    box-shadow: unset;
+  }
 </style>

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

@@ -16,116 +16,116 @@
 </template>
 
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    listConfig: {
-      title: string;
-      contents: {
-        value: string;
-        color: string;
-        label?: string;
-        info?: string;
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        title: string;
+        contents: {
+          value: string;
+          color: string;
+          label?: string;
+          info?: string;
+        }[];
       }[];
-    }[];
-    type: string;
-  }>(),
-  {
-    listConfig: () => [],
-    type: 'C',
-  }
-);
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      type: 'C',
+    }
+  );
 
-const getBgClass = (riskLevel: string) => {
-  switch (riskLevel) {
-    case '低风险':
-      return 'bg-lowRisk';
-    case '一般风险':
-      return 'bg-normalRisk';
-    case '较大风险':
-      return 'bg-greaterRisk ';
-    case '重大风险':
-      return 'bg-majorRisk';
-    case '报警':
-      return 'bg-warning';
-    default:
-      return 'bg-lowRisk';
-  }
-};
+  const getBgClass = (riskLevel: string) => {
+    switch (riskLevel) {
+      case '低风险':
+        return 'bg-lowRisk';
+      case '一般风险':
+        return 'bg-normalRisk';
+      case '较大风险':
+        return 'bg-greaterRisk ';
+      case '重大风险':
+        return 'bg-majorRisk';
+      case '报警':
+        return 'bg-warning';
+      default:
+        return 'bg-lowRisk';
+    }
+  };
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-.list {
-  padding-left: 20px;
-  background-repeat: no-repeat;
-  position: relative;
-  display: flex;
-  align-items: center;
-  list-style: none;
-}
+  .list {
+    padding-left: 20px;
+    background-repeat: no-repeat;
+    position: relative;
+    display: flex;
+    align-items: center;
+    list-style: none;
+  }
 
-.list-item_A {
-  align-items: center;
-  text-align: center;
-  margin: 10px 10px 17px 10px;
-  display: flex;
-  flex-direction: column; /* 竖排 */
-  gap: 5px; /* 间距 */
-}
-.list-item__content_A {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 35px;
-  padding: 0 12px;
-  color: #ffffff;
-  font-size: 13px;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-.list-item__content_A > .list-item__label {
-  padding-left: 40px;
-}
-.list-item__content_A > .list-item__value {
-  padding-right: 30px;
-  font-weight: bold;
-  font-style: italic;
-}
-.bg-lowRisk {
-  background-image: url('/@/assets/images/beltFire/lowRisk.png');
-}
-.bg-normalRisk {
-  background-image: url('/@/assets/images/beltFire/normalRisk.png');
-}
-.bg-greaterRisk {
-  background-image: url('/@/assets/images/beltFire/greaterRisk.png');
-}
-.bg-warning {
-  background-image: url('/@/assets/images/beltFire/warning.png');
-}
-.bg-majorRisk {
-  background-image: url('/@/assets/images/beltFire/majorRisk.png');
-}
+  .list-item_A {
+    align-items: center;
+    text-align: center;
+    margin: 10px 10px 17px 10px;
+    display: flex;
+    flex-direction: column; /* 竖排 */
+    gap: 5px; /* 间距 */
+  }
+  .list-item__content_A {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 35px;
+    padding: 0 12px;
+    color: #ffffff;
+    font-size: 13px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .list-item__content_A > .list-item__label {
+    padding-left: 40px;
+  }
+  .list-item__content_A > .list-item__value {
+    padding-right: 30px;
+    font-weight: bold;
+    font-style: italic;
+  }
+  .bg-lowRisk {
+    background-image: url('/@/assets/images/beltFire/lowRisk.png');
+  }
+  .bg-normalRisk {
+    background-image: url('/@/assets/images/beltFire/normalRisk.png');
+  }
+  .bg-greaterRisk {
+    background-image: url('/@/assets/images/beltFire/greaterRisk.png');
+  }
+  .bg-warning {
+    background-image: url('/@/assets/images/beltFire/warning.png');
+  }
+  .bg-majorRisk {
+    background-image: url('/@/assets/images/beltFire/majorRisk.png');
+  }
 
-.list-item__content_A.bg-lowRisk .list-item__value {
-  color: #32ddff;
-}
+  .list-item__content_A.bg-lowRisk .list-item__value {
+    color: #32ddff;
+  }
 
-.list-item__content_A.bg-normalRisk .list-item__value {
-  color: #ffff00;
-}
+  .list-item__content_A.bg-normalRisk .list-item__value {
+    color: #ffff00;
+  }
 
-.list-item__content_A.bg-greaterRisk .list-item__value {
-  color: #ff9d17;
-}
+  .list-item__content_A.bg-greaterRisk .list-item__value {
+    color: #ff9d17;
+  }
 
-.list-item__content_A.bg-warning .list-item__value {
-  color: #ff0000;
-}
+  .list-item__content_A.bg-warning .list-item__value {
+    color: #ff0000;
+  }
 
-.list-item__content_A.bg-majorRisk .list-item__value {
-  color: #ff3823;
-}
-</style>
+  .list-item__content_A.bg-majorRisk .list-item__value {
+    color: #ff3823;
+  }
+</style>

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

@@ -23,490 +23,490 @@
 </template>
 
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    listConfig: {
-      title: string;
-      contents: {
-        value: string;
-        color: string;
-        label: string;
-        info: string;
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        title: string;
+        contents: {
+          value: string;
+          color: string;
+          label: string;
+          info: string;
+        }[];
       }[];
-    }[];
-    /** 列表样式类型：A/B/C/D/E/F/G */
-    type: string;
-  }>(),
-  {
-    listConfig: () => [],
-    type: 'A',
-  }
-);
+      /** 列表样式类型：A/B/C/D/E/F/G */
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      type: 'A',
+    }
+  );
 
-// defineEmits(['click']);
+  // defineEmits(['click']);
 </script>
 
 <style lang="less" scoped>
-@import '@/design/theme.less';
+  @import '@/design/theme.less';
+
+  // 图片变量定义
+  @{theme-deepblue} {
+    .list {
+      --image-title: url('/@/assets/images/fireNew/7-1.png');
+      --image-ListArea: url('/@/assets/images/fireNew/7-2.png');
+      --image-ValueBg: url('/@/assets/images/fireNew/7-3.png');
+    }
+  }
 
-// 图片变量定义
-@{theme-deepblue} {
+  // 基础样式
   .list {
     --image-title: url('/@/assets/images/fireNew/7-1.png');
     --image-ListArea: url('/@/assets/images/fireNew/7-2.png');
     --image-ValueBg: url('/@/assets/images/fireNew/7-3.png');
+    padding: 5px 20px;
+    position: relative;
+    width: 100%;
+    height: 100%;
   }
-}
-
-// 基础样式
-.list {
-  --image-title: url('/@/assets/images/fireNew/7-1.png');
-  --image-ListArea: url('/@/assets/images/fireNew/7-2.png');
-  --image-ValueBg: url('/@/assets/images/fireNew/7-3.png');
-  padding: 5px 20px;
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-// 颜色样式
-.list-item__value_red {
-  color: red;
-}
-.list-item__value_orange {
-  color: orange;
-}
-.list-item__value_yellow {
-  color: yellow;
-}
-.list-item__value_green {
-  color: yellowgreen;
-}
-.list-item__value_blue {
-  color: @vent-table-action-link;
-}
-.list-item__value_white {
-  color: white;
-}
-.gallery-item__value_lightblue {
-  color: @vent-configurable-home-light-border;
-}
-
-// 类型A样式
-.list-item_A {
-  position: relative;
-  height: 140px;
-  background-repeat: no-repeat;
-  background-image: var(--image-img-3);
-  background-size: auto 100%;
-  background-position: center;
-}
-
-.list-item__title_A {
-  position: absolute;
-  left: 41%;
-  top: 15px;
-}
-
-.list-item__content_A:nth-of-type(2) {
-  position: absolute;
-  top: 15px;
-  left: 14%;
-  width: 22%;
-  text-align: center;
-  display: block;
-
-  .list-item__label {
-    font-size: 18px;
-    margin-bottom: 25px;
-  }
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 24px;
-  }
-}
-
-.list-item__content_A:nth-of-type(3) {
-  position: absolute;
-  left: 41%;
-  top: 55px;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 20px;
-  }
-}
-
-.list-item__content_A:nth-of-type(4) {
-  position: absolute;
-  left: 66%;
-  top: 55px;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 20px;
-  }
-}
-
-.list-item__content_A:nth-of-type(5) {
-  position: absolute;
-  left: 35%;
-  bottom: 10px;
-  display: flex;
-  align-items: center;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 20px;
-    margin-left: 5px;
+
+  // 颜色样式
+  .list-item__value_red {
+    color: red;
+  }
+  .list-item__value_orange {
+    color: orange;
+  }
+  .list-item__value_yellow {
+    color: yellow;
+  }
+  .list-item__value_green {
+    color: yellowgreen;
+  }
+  .list-item__value_blue {
+    color: @vent-table-action-link;
+  }
+  .list-item__value_white {
+    color: white;
+  }
+  .gallery-item__value_lightblue {
+    color: @vent-configurable-home-light-border;
   }
-}
 
-// 类型B样式
-.list-item_B {
-  background-repeat: no-repeat;
-  background-size: 87% auto;
-  background-position: center;
-  background-image: var(--image-img-7);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-align: center;
-  padding: 0 10%;
-  margin-top: 5px;
-  height: 33px;
+  // 类型A样式
+  .list-item_A {
+    position: relative;
+    height: 140px;
+    background-repeat: no-repeat;
+    background-image: var(--image-img-3);
+    background-size: auto 100%;
+    background-position: center;
+  }
 
-  .list-item__label {
-    font-size: 11px;
+  .list-item__title_A {
+    position: absolute;
+    left: 41%;
+    top: 15px;
   }
 
-  .list-item__value {
-    font-size: 18px;
-    margin-left: 5px;
+  .list-item__content_A:nth-of-type(2) {
+    position: absolute;
+    top: 15px;
+    left: 14%;
+    width: 22%;
+    text-align: center;
+    display: block;
+
+    .list-item__label {
+      font-size: 18px;
+      margin-bottom: 25px;
+    }
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 24px;
+    }
   }
 
-  .list-item__content_B {
-    height: 100%;
+  .list-item__content_A:nth-of-type(3) {
+    position: absolute;
+    left: 41%;
+    top: 55px;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 20px;
+    }
+  }
+
+  .list-item__content_A:nth-of-type(4) {
+    position: absolute;
+    left: 66%;
+    top: 55px;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 20px;
+    }
+  }
+
+  .list-item__content_A:nth-of-type(5) {
+    position: absolute;
+    left: 35%;
+    bottom: 10px;
     display: flex;
     align-items: center;
-    flex-basis: 100px;
-    flex-grow: 1;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 20px;
+      margin-left: 5px;
+    }
   }
 
-  .list-item__title_B {
-    width: 40px;
+  // 类型B样式
+  .list-item_B {
+    background-repeat: no-repeat;
+    background-size: 87% auto;
+    background-position: center;
+    background-image: var(--image-img-7);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     text-align: center;
-    margin-right: 50px;
-  }
-
-  .list-item__info {
-    display: none;
-  }
-}
-
-// 类型C样式
-.list_C {
-  padding: 5px 10px;
-}
-
-.list__wrapper_C {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-
-.list-item_C {
-  position: relative;
-  height: 140px;
-  width: 200px;
-  background-repeat: no-repeat;
-  background-image: var(--image-img-8);
-  background-size: 100% 100%;
-  background-position: left center;
-}
-
-.list-item__title_C {
-  position: absolute;
-  left: 99px;
-  top: 15px;
-}
-
-.list-item__content_C:nth-of-type(2) {
-  position: absolute;
-  top: 15px;
-  left: 19px;
-  width: 30%;
-  text-align: center;
-  display: block;
-
-  .list-item__label {
-    margin-bottom: 25px;
-  }
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 18px;
-  }
-}
-
-.list-item__content_C:nth-of-type(3) {
-  position: absolute;
-  left: 99px;
-  top: 55px;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 18px;
-  }
-}
-
-// 类型D样式
-.list_D {
-  padding: 5px 10px;
-}
-
-.list__wrapper_D {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  overflow: auto;
-  scrollbar-width: none;
-}
-
-.list__wrapper_D::-webkit-scrollbar {
-  display: flex;
-  width: 0;
-  height: 0;
-}
-
-.list-item_D {
-  background-image: var(--image-ListArea);
-  background-size: 100% auto;
-  background-position: center;
-  background-repeat: no-repeat;
-  position: relative;
-  height: 130px;
-  width: 175px;
-  text-align: center;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-.list-item_D:nth-child(odd) {
-  margin-left: 25px;
-  margin-right: 5px;
-}
-
-.list-item_D:nth-child(even) {
-  margin-right: 25px;
-  margin-left: 5px;
-}
-
-.list-item__title_D {
-  background-image: var(--image-title);
-  background-size: 100% auto;
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 100%;
-  bottom: 0;
-  font-size: 16px;
-}
-
-.list-item__content_D:nth-of-type(2) {
-  background-image: var(--image-ValueBg);
-  background-size: 100% auto;
-  background-position: center;
-  background-repeat: no-repeat;
-  display: flex;
-  justify-content: space-between;
-  top: 30%;
-  left: 10%;
-  width: 88%;
-  position: absolute;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    margin-right: 10px;
-    font-size: 13px;
-    color: #a9e0eb;
-  }
-}
-
-.list-item__content_D:nth-of-type(3) {
-  background-image: var(--image-ValueBg);
-  background-size: 100% auto;
-  background-position: center;
-  background-repeat: no-repeat;
-  display: flex;
-  justify-content: space-between;
-  top: 62%;
-  left: 10%;
-  width: 77%;
-  position: absolute;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 13px;
-    margin-right: 10px;
-    color: #a9e0eb;
-  }
-}
-
-// 类型E样式
-.list_E {
-  padding: 5px 10px;
-}
-
-.list__wrapper_E {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0 10px;
-}
-
-.list-item_E {
-  position: relative;
-  height: 100px;
-  width: 170px;
-  background-repeat: no-repeat;
-  background-image: var(--image-list_bg_1);
-  background-size: 100% auto;
-  background-position: center top;
-  text-align: center;
-  margin-bottom: 20px;
-  margin-left: 5px;
-}
-
-.list-item__title_E {
-  width: 100%;
-  font-size: 16px;
-  font-weight: bold;
-  margin-top: 10px;
-}
-
-.list-item__content_E:nth-of-type(2) {
-  position: absolute;
-  top: 40%;
-  left: 5%;
-  text-align: left;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 16px;
+    padding: 0 10%;
+    margin-top: 5px;
+    height: 33px;
+
+    .list-item__label {
+      font-size: 11px;
+    }
+
+    .list-item__value {
+      font-size: 18px;
+      margin-left: 5px;
+    }
+
+    .list-item__content_B {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-basis: 100px;
+      flex-grow: 1;
+    }
+
+    .list-item__title_B {
+      width: 40px;
+      text-align: center;
+      margin-right: 50px;
+    }
+
+    .list-item__info {
+      display: none;
+    }
   }
-}
 
-.list-item__content_E:nth-of-type(3) {
-  position: absolute;
-  top: 40%;
-  right: 5%;
-  text-align: right;
+  // 类型C样式
+  .list_C {
+    padding: 5px 10px;
+  }
 
-  .list-item__info {
-    display: none;
+  .list__wrapper_C {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
   }
 
-  .list-item__value {
-    font-size: 16px;
+  .list-item_C {
+    position: relative;
+    height: 140px;
+    width: 200px;
+    background-repeat: no-repeat;
+    background-image: var(--image-img-8);
+    background-size: 100% 100%;
+    background-position: left center;
+  }
+
+  .list-item__title_C {
+    position: absolute;
+    left: 99px;
+    top: 15px;
+  }
+
+  .list-item__content_C:nth-of-type(2) {
+    position: absolute;
+    top: 15px;
+    left: 19px;
+    width: 30%;
+    text-align: center;
+    display: block;
+
+    .list-item__label {
+      margin-bottom: 25px;
+    }
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 18px;
+    }
+  }
+
+  .list-item__content_C:nth-of-type(3) {
+    position: absolute;
+    left: 99px;
+    top: 55px;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 18px;
+    }
   }
-}
 
-// 类型F样式
-.list-item_F {
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  background-position: center;
-  background-image: @vent-gas-list-item-bg-img;
-  display: flex;
-  align-items: center;
-  padding: 0 5%;
-  margin-top: 5px;
-  height: 50px;
+  // 类型D样式
+  .list_D {
+    padding: 5px 10px;
+  }
 
-  .list-item__title_F {
-    flex-basis: 25%;
+  .list__wrapper_D {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    overflow: auto;
+    scrollbar-width: none;
   }
 
-  .list-item__content_F {
-    flex-basis: 25%;
+  .list__wrapper_D::-webkit-scrollbar {
     display: flex;
-    align-items: center;
+    width: 0;
+    height: 0;
   }
 
-  .list-item__label::after {
-    content: '：';
+  .list-item_D {
+    background-image: var(--image-ListArea);
+    background-size: 100% auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: relative;
+    height: 130px;
+    width: 175px;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
   }
 
-  .list-item__value {
-    font-size: 18px;
+  .list-item_D:nth-child(odd) {
+    margin-left: 25px;
+    margin-right: 5px;
+  }
+
+  .list-item_D:nth-child(even) {
+    margin-right: 25px;
     margin-left: 5px;
-    font-weight: bold;
   }
 
-  .list-item__info {
-    display: none;
+  .list-item__title_D {
+    background-image: var(--image-title);
+    background-size: 100% auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 100%;
+    bottom: 0;
+    font-size: 16px;
   }
-}
 
-// 类型G样式
-.list-item_G {
-  margin-top: 5px;
+  .list-item__content_D:nth-of-type(2) {
+    background-image: var(--image-ValueBg);
+    background-size: 100% auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: space-between;
+    top: 30%;
+    left: 10%;
+    width: 88%;
+    position: absolute;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      margin-right: 10px;
+      font-size: 13px;
+      color: #a9e0eb;
+    }
+  }
+
+  .list-item__content_D:nth-of-type(3) {
+    background-image: var(--image-ValueBg);
+    background-size: 100% auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: space-between;
+    top: 62%;
+    left: 10%;
+    width: 77%;
+    position: absolute;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 13px;
+      margin-right: 10px;
+      color: #a9e0eb;
+    }
+  }
+
+  // 类型E样式
+  .list_E {
+    padding: 5px 10px;
+  }
+
+  .list__wrapper_E {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 10px;
+  }
 
-  .list-item__title_G {
+  .list-item_E {
     position: relative;
+    height: 100px;
+    width: 170px;
+    background-repeat: no-repeat;
+    background-image: var(--image-list_bg_1);
+    background-size: 100% auto;
+    background-position: center top;
+    text-align: center;
+    margin-bottom: 20px;
+    margin-left: 5px;
+  }
+
+  .list-item__title_E {
     width: 100%;
-    height: 16px;
+    font-size: 16px;
+    font-weight: bold;
     margin-top: 10px;
-    margin-bottom: 5px;
-    padding-left: 8px;
-    top: -2px;
-    background-image: var(--image-linear-gradient-1);
-
-    &::before {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: 100%;
-      top: 4px;
-      left: 0;
-      background-image: var(--image-linear-gradient-2);
+  }
+
+  .list-item__content_E:nth-of-type(2) {
+    position: absolute;
+    top: 40%;
+    left: 5%;
+    text-align: left;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 16px;
+    }
+  }
+
+  .list-item__content_E:nth-of-type(3) {
+    position: absolute;
+    top: 40%;
+    right: 5%;
+    text-align: right;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 16px;
     }
   }
 
-  .list-item__content_G {
+  // 类型F样式
+  .list-item_F {
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+    background-image: @vent-gas-list-item-bg-img;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 4px;
-    margin: 8px 0;
-    background-image: var(--image-linear-gradient-3);
+    padding: 0 5%;
+    margin-top: 5px;
+    height: 50px;
+
+    .list-item__title_F {
+      flex-basis: 25%;
+    }
+
+    .list-item__content_F {
+      flex-basis: 25%;
+      display: flex;
+      align-items: center;
+    }
+
+    .list-item__label::after {
+      content: '：';
+    }
+
+    .list-item__value {
+      font-size: 18px;
+      margin-left: 5px;
+      font-weight: bold;
+    }
+
+    .list-item__info {
+      display: none;
+    }
+  }
+
+  // 类型G样式
+  .list-item_G {
+    margin-top: 5px;
+
+    .list-item__title_G {
+      position: relative;
+      width: 100%;
+      height: 16px;
+      margin-top: 10px;
+      margin-bottom: 5px;
+      padding-left: 8px;
+      top: -2px;
+      background-image: var(--image-linear-gradient-1);
+
+      &::before {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: 100%;
+        top: 4px;
+        left: 0;
+        background-image: var(--image-linear-gradient-2);
+      }
+    }
+
+    .list-item__content_G {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px;
+      margin: 8px 0;
+      background-image: var(--image-linear-gradient-3);
+    }
   }
-}
-</style>
+</style>

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

@@ -27,519 +27,519 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { SvgIcon } from '/@/components/Icon';
-withDefaults(
-  defineProps<{
-    listConfig: {
-      title: string;
-      contents: {
-        value: string;
-        color: string;
-        label: string;
-        info: string;
+  import { SvgIcon } from '/@/components/Icon';
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        title: string;
+        contents: {
+          value: string;
+          color: string;
+          label: string;
+          info: string;
+        }[];
       }[];
-    }[];
-    /** A B */
-    type: string;
-  }>(),
-  {
-    listConfig: () => [],
-    type: 'A',
-  }
-);
+      /** A B */
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      type: 'A',
+    }
+  );
 
-//   defineEmits(['click']);
+  //   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-@import '@/design/theme.less';
-@import '@/design/theme.less';
-/* Timeline 相关的样式 */
-@{theme-green} {
-  .list {
-    --image-img-9: url(/@/assets/images/themify/green/home-container/configurable/firehome/img-9.png);
-    --image-list_bg_1: url(/@/assets/images/themify/green/home-container/configurable/dusthome/list_bg_1.png);
+  @import '@/design/theme.less';
+  @import '@/design/theme.less';
+  /* Timeline 相关的样式 */
+  @{theme-green} {
+    .list {
+      --image-img-9: url(/@/assets/images/themify/green/home-container/configurable/firehome/img-9.png);
+      --image-list_bg_1: url(/@/assets/images/themify/green/home-container/configurable/dusthome/list_bg_1.png);
+    }
   }
-}
-@{theme-deepblue} {
-  .list {
-    --image-img-3: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-3.png);
-    --image-img-7: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-7.png);
-    --image-img-8: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-8.png);
-    --image-img-9: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-9.png);
-    --image-list_bg_1: url(/@/assets/images/themify/deepblue/home-container/configurable/dusthome/list_bg_1.png);
+  @{theme-deepblue} {
+    .list {
+      --image-img-3: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-3.png);
+      --image-img-7: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-7.png);
+      --image-img-8: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-8.png);
+      --image-img-9: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-9.png);
+      --image-list_bg_1: url(/@/assets/images/themify/deepblue/home-container/configurable/dusthome/list_bg_1.png);
+    }
   }
-}
 
-.list {
-  --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
-  --image-img-7: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
-  --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);
-  --image-linear-gradient-4: linear-gradient(to right, #091d34, #0b223b);
-  padding: 5px 20px;
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
+  .list {
+    --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
+    --image-img-7: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
+    --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);
+    --image-linear-gradient-4: linear-gradient(to right, #091d34, #0b223b);
+    padding: 5px 20px;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
 
-.list-item_A {
-  position: relative;
-  height: 140px;
-  background-repeat: no-repeat;
-  background-image: var(--image-img-3);
-  background-size: auto 100%;
-  background-position: center;
-}
-.list-item__title_A {
-  position: absolute;
-  left: 41%;
-  // font-size: 14px;
-  top: 15px;
-}
-.list-item__content_A:nth-of-type(2) {
-  position: absolute;
-  top: 15px;
-  left: 14%;
-  width: 22%;
-  text-align: center;
-  display: block;
+  .list-item_A {
+    position: relative;
+    height: 140px;
+    background-repeat: no-repeat;
+    background-image: var(--image-img-3);
+    background-size: auto 100%;
+    background-position: center;
+  }
+  .list-item__title_A {
+    position: absolute;
+    left: 41%;
+    // font-size: 14px;
+    top: 15px;
+  }
+  .list-item__content_A:nth-of-type(2) {
+    position: absolute;
+    top: 15px;
+    left: 14%;
+    width: 22%;
+    text-align: center;
+    display: block;
 
-  .list-item__label {
-    font-size: 18px;
-    margin-bottom: 25px;
-  }
-  .list-item__info {
-    display: none;
-  }
-  .list-item__value {
-    font-size: 24px;
+    .list-item__label {
+      font-size: 18px;
+      margin-bottom: 25px;
+    }
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 24px;
+    }
   }
-}
-.list-item__content_A:nth-of-type(3) {
-  position: absolute;
-  left: 41%;
-  top: 55px;
+  .list-item__content_A:nth-of-type(3) {
+    position: absolute;
+    left: 41%;
+    top: 55px;
 
-  .list-item__info {
-    display: none;
-  }
-  .list-item__value {
-    font-size: 20px;
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 20px;
+    }
   }
-}
-.list-item__content_A:nth-of-type(4) {
-  position: absolute;
-  left: 66%;
-  top: 55px;
-
-  .list-item__info {
-    display: none;
-  }
-  .list-item__value {
-    font-size: 20px;
-  }
-}
-.list-item__content_A:nth-of-type(5) {
-  position: absolute;
-  left: 35%;
-  bottom: 10px;
-  display: flex;
-  align-items: center;
+  .list-item__content_A:nth-of-type(4) {
+    position: absolute;
+    left: 66%;
+    top: 55px;
 
-  .list-item__info {
-    display: none;
-  }
-  .list-item__value {
-    font-size: 20px;
-    margin-left: 5px;
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 20px;
+    }
   }
-}
-
-.list-item_B {
-  background-repeat: no-repeat;
-  background-size: 87% auto;
-  background-position: center;
-  background-image: var(--image-img-7);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-align: center;
-  padding: 0 10%;
-  margin-top: 5px;
-  height: 33px;
+  .list-item__content_A:nth-of-type(5) {
+    position: absolute;
+    left: 35%;
+    bottom: 10px;
+    display: flex;
+    align-items: center;
 
-  .list-item__label {
-    font-size: 11px;
-  }
-  .list-item__value {
-    font-size: 18px;
-    margin-left: 5px;
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 20px;
+      margin-left: 5px;
+    }
   }
-  .list-item__content_B {
-    height: 100%;
+
+  .list-item_B {
+    background-repeat: no-repeat;
+    background-size: 87% auto;
+    background-position: center;
+    background-image: var(--image-img-7);
     display: flex;
     align-items: center;
-    flex-basis: 100px;
-    flex-grow: 1;
-  }
-  .list-item__title_B {
-    width: 40px;
+    justify-content: space-between;
     text-align: center;
-    margin-right: 50px;
+    padding: 0 10%;
+    margin-top: 5px;
+    height: 33px;
+
+    .list-item__label {
+      font-size: 11px;
+    }
+    .list-item__value {
+      font-size: 18px;
+      margin-left: 5px;
+    }
+    .list-item__content_B {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-basis: 100px;
+      flex-grow: 1;
+    }
+    .list-item__title_B {
+      width: 40px;
+      text-align: center;
+      margin-right: 50px;
+    }
+    .list-item__info {
+      display: none;
+    }
   }
-  .list-item__info {
-    display: none;
+
+  .list_C {
+    padding: 5px 10px;
   }
-}
 
-.list_C {
-  padding: 5px 10px;
-}
+  .list__wrapper_C {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
 
-.list__wrapper_C {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
+  .list-item_C {
+    position: relative;
+    height: 140px;
+    width: 200px;
+    background-repeat: no-repeat;
+    background-image: var(--image-img-8);
+    background-size: 100% 100%;
+    background-position: left center;
+  }
+  .list-item__title_C {
+    position: absolute;
+    left: 99px;
+    top: 15px;
+  }
+  .list-item__content_C:nth-of-type(2) {
+    position: absolute;
+    top: 15px;
+    left: 19px;
+    width: 30%;
+    text-align: center;
+    display: block;
 
-.list-item_C {
-  position: relative;
-  height: 140px;
-  width: 200px;
-  background-repeat: no-repeat;
-  background-image: var(--image-img-8);
-  background-size: 100% 100%;
-  background-position: left center;
-}
-.list-item__title_C {
-  position: absolute;
-  left: 99px;
-  top: 15px;
-}
-.list-item__content_C:nth-of-type(2) {
-  position: absolute;
-  top: 15px;
-  left: 19px;
-  width: 30%;
-  text-align: center;
-  display: block;
+    .list-item__label {
+      margin-bottom: 25px;
+    }
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 18px;
+    }
+  }
+  .list-item__content_C:nth-of-type(3) {
+    position: absolute;
+    left: 99px;
+    top: 55px;
 
-  .list-item__label {
-    margin-bottom: 25px;
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 18px;
+    }
   }
-  .list-item__info {
-    display: none;
+
+  .list_D {
+    padding: 5px 10px;
   }
-  .list-item__value {
-    font-size: 18px;
+
+  .list__wrapper_D {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
   }
-}
-.list-item__content_C:nth-of-type(3) {
-  position: absolute;
-  left: 99px;
-  top: 55px;
 
-  .list-item__info {
-    display: none;
+  .list-item_D {
+    position: relative;
+    height: 110px;
+    width: 200px;
+    background-repeat: no-repeat;
+    background-image: var(--image-img-9);
+    background-size: 100% auto;
+    background-position: center top;
+    text-align: center;
+    margin-bottom: 20px;
   }
-  .list-item__value {
-    font-size: 18px;
+  .list-item__title_D {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    font-size: 16px;
+    font-weight: bold;
   }
-}
-
-.list_D {
-  padding: 5px 10px;
-}
-
-.list__wrapper_D {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-
-.list-item_D {
-  position: relative;
-  height: 110px;
-  width: 200px;
-  background-repeat: no-repeat;
-  background-image: var(--image-img-9);
-  background-size: 100% auto;
-  background-position: center top;
-  text-align: center;
-  margin-bottom: 20px;
-}
-.list-item__title_D {
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  font-size: 16px;
-  font-weight: bold;
-}
-.list-item__content_D:nth-of-type(2) {
-  position: absolute;
-  top: 10%;
-  left: 10%;
-  width: 30%;
-  text-align: center;
-
-  .list-item__info {
-    display: none;
-  }
-  .list-item__value {
-    font-size: 18px;
-  }
-}
-.list-item__content_D:nth-of-type(3) {
-  position: absolute;
-  top: 10%;
-  right: 10%;
-  width: 30%;
-  text-align: center;
+  .list-item__content_D:nth-of-type(2) {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    width: 30%;
+    text-align: center;
 
-  .list-item__info {
-    display: none;
-  }
-  .list-item__value {
-    font-size: 18px;
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 18px;
+    }
   }
-}
+  .list-item__content_D:nth-of-type(3) {
+    position: absolute;
+    top: 10%;
+    right: 10%;
+    width: 30%;
+    text-align: center;
 
-.list_E {
-  padding: 5px 10px;
-}
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 18px;
+    }
+  }
 
-.list__wrapper_E {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  padding: 0 10px;
-}
+  .list_E {
+    padding: 5px 10px;
+  }
 
-.list-item_E {
-  position: relative;
-  height: 104px;
-  width: 188px;
-  background-repeat: no-repeat;
-  background-image: var(--image-list_bg_1);
-  background-size: 100% auto;
-  background-position: center top;
-  text-align: center;
-  margin-bottom: 20px;
-}
-.list-item__title_E {
-  width: 100%;
-  font-size: 16px;
-  font-weight: bold;
-  margin-top: 10px;
-}
-.list-item__content_E:nth-of-type(2) {
-  position: absolute;
-  top: 40%;
-  left: 5%;
-  text-align: left;
+  .list__wrapper_E {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 0 10px;
+  }
 
-  .list-item__info {
-    display: none;
+  .list-item_E {
+    position: relative;
+    height: 104px;
+    width: 188px;
+    background-repeat: no-repeat;
+    background-image: var(--image-list_bg_1);
+    background-size: 100% auto;
+    background-position: center top;
+    text-align: center;
+    margin-bottom: 20px;
   }
-  .list-item__value {
+  .list-item__title_E {
+    width: 100%;
     font-size: 16px;
+    font-weight: bold;
+    margin-top: 10px;
   }
-}
-.list-item__content_E:nth-of-type(3) {
-  position: absolute;
-  top: 40%;
-  right: 5%;
-  text-align: right;
+  .list-item__content_E:nth-of-type(2) {
+    position: absolute;
+    top: 40%;
+    left: 5%;
+    text-align: left;
 
-  .list-item__info {
-    display: none;
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 16px;
+    }
   }
-  .list-item__value {
-    font-size: 16px;
+  .list-item__content_E:nth-of-type(3) {
+    position: absolute;
+    top: 40%;
+    right: 5%;
+    text-align: right;
+
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 16px;
+    }
   }
-}
 
-.list-item_F {
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  // background-size: auto 100%;
-  background-position: center;
-  background-image: @vent-gas-list-item-bg-img;
-  display: flex;
-  align-items: center;
-  padding: 0 5%;
-  margin-top: 5px;
-  height: 50px;
+  .list-item_F {
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    // background-size: auto 100%;
+    background-position: center;
+    background-image: @vent-gas-list-item-bg-img;
+    display: flex;
+    align-items: center;
+    padding: 0 5%;
+    margin-top: 5px;
+    height: 50px;
 
-  .list-item__title_F {
-    flex-basis: 25%;
+    .list-item__title_F {
+      flex-basis: 25%;
+    }
+    .list-item__content_F {
+      flex-basis: 25%;
+    }
+    .list-item__label::after {
+      content: '：';
+    }
+    .list-item__value {
+      font-size: 18px;
+      margin-left: 5px;
+      font-weight: bold;
+    }
+    .list-item__content_F {
+      display: flex;
+      align-items: center;
+    }
+    .list-item__info {
+      display: none;
+    }
   }
-  .list-item__content_F {
-    flex-basis: 25%;
+
+  .list-item_G {
+    margin-top: 5px;
+
+    .list-item__title_G {
+      position: relative;
+      width: 100%;
+      height: 16px;
+      margin-top: 10px;
+      margin-bottom: 5px;
+      padding-left: 8px;
+      top: -2px;
+      background-image: var(--image-linear-gradient-1);
+      &::before {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: 100%;
+        top: 4px;
+        left: 0;
+        background-image: var(--image-linear-gradient-2);
+      }
+    }
+    .list-item__content_G {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px;
+      margin: 8px 0;
+      background-image: var(--image-linear-gradient-3);
+    }
   }
-  .list-item__label::after {
-    content: '：';
+  .list_H {
+    padding: 0 10px;
   }
-  .list-item__value {
-    font-size: 18px;
-    margin-left: 5px;
-    font-weight: bold;
+
+  .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_F {
+
+  .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__info {
-    display: none;
+  .list-item_I {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 5px;
   }
-}
-
-.list-item_G {
-  margin-top: 5px;
-
-  .list-item__title_G {
+  .list-item__title_I {
     position: relative;
     width: 100%;
-    height: 16px;
+    height: 25px;
     margin-top: 10px;
     margin-bottom: 5px;
     padding-left: 8px;
     top: -2px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .list-item__title_I.bg-1 {
     background-image: var(--image-linear-gradient-1);
-    &::before {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: 100%;
-      top: 4px;
-      left: 0;
-      background-image: var(--image-linear-gradient-2);
-    }
   }
-  .list-item__content_G {
+  .list-item__title_I.bg-2 {
+    background-image: var(--image-linear-gradient-2);
+  }
+  .list-item__title_I .icon {
+    display: inline-block;
+    flex-shrink: 0;
+    vertical-align: middle;
+  }
+  .list-item__title_I > div {
+    flex: 1;
+    line-height: 25px;
+    font-size: 14px;
+  }
+  .list-item__content_I {
+    width: 50%;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
     padding: 4px;
     margin: 8px 0;
-    background-image: var(--image-linear-gradient-3);
+    background-image: var(--image-linear-gradient-4);
+  }
+  .list-item__value_red {
+    color: red;
+  }
+  .list-item__value_orange {
+    color: orange;
+  }
+  .list-item__value_yellow {
+    color: yellow;
+  }
+  .list-item__value_green {
+    color: yellowgreen;
+  }
+  .list-item__value_blue {
+    color: @vent-table-action-link;
+  }
+  .list-item__value_white {
+    color: white;
+  }
+  .gallery-item__value_lightblue {
+    color: @vent-configurable-home-light-border;
   }
-}
-.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_I {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 5px;
-}
-.list-item__title_I {
-  position: relative;
-  width: 100%;
-  height: 25px;
-  margin-top: 10px;
-  margin-bottom: 5px;
-  padding-left: 8px;
-  top: -2px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.list-item__title_I.bg-1 {
-  background-image: var(--image-linear-gradient-1);
-}
-.list-item__title_I.bg-2 {
-  background-image: var(--image-linear-gradient-2);
-}
-.list-item__title_I .icon {
-  display: inline-block;
-  flex-shrink: 0;
-  vertical-align: middle;
-}
-.list-item__title_I > div {
-  flex: 1;
-  line-height: 25px;
-  font-size: 14px;
-}
-.list-item__content_I {
-  width: 50%;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 4px;
-  margin: 8px 0;
-  background-image: var(--image-linear-gradient-4);
-}
-.list-item__value_red {
-  color: red;
-}
-.list-item__value_orange {
-  color: orange;
-}
-.list-item__value_yellow {
-  color: yellow;
-}
-.list-item__value_green {
-  color: yellowgreen;
-}
-.list-item__value_blue {
-  color: @vent-table-action-link;
-}
-.list-item__value_white {
-  color: white;
-}
-.gallery-item__value_lightblue {
-  color: @vent-configurable-home-light-border;
-}
 </style>

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

@@ -15,139 +15,139 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, defineProps } from 'vue';
-import _ from 'lodash';
+  import { computed, defineProps } from 'vue';
+  import _ from 'lodash';
 
-let props = withDefaults(
-  defineProps<{
-    /** B | C */
-    type: string;
-    /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
-    columns: { prop: string; name: string }[];
-    data: any[];
-    defaultValue: string;
-  }>(),
-  {
-    type: 'B',
-    columns: () => [],
-    data: () => [],
-    defaultValue: '-',
-  }
-);
+  let props = withDefaults(
+    defineProps<{
+      /** B | C */
+      type: string;
+      /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
+      columns: { prop: string; name: string }[];
+      data: any[];
+      defaultValue: string;
+    }>(),
+    {
+      type: 'B',
+      columns: () => [],
+      data: () => [],
+      defaultValue: '-',
+    }
+  );
 
-const flexBasis = computed(() => {
-  return Math.fround(100 / props.columns.length) + '%';
-});
+  const flexBasis = computed(() => {
+    return Math.fround(100 / props.columns.length) + '%';
+  });
 
-function get(o, p) {
-  const d = _.get(o, p);
-  return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
-}
+  function get(o, p) {
+    const d = _.get(o, p);
+    return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '@/design/theme.less';
+  @import '/@/design/theme.less';
+  @import '@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-
-@{theme-deepblue} {
-  .table__content {
-    --image-content-label: url(/@/assets/images/themify/deepblue/company/content-label.png);
-    --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
-    --image-list-head: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/list-head.png');
-  }
-}
-
-.table__content {
-  --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');
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 5px 0;
-
-  .table__content_label {
-    width: 355px;
-    height: 32px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .label-t {
-      text-align: center;
-      font-size: 14px;
-    }
-  }
-  .table__content_label_A {
-    background-image: var(--image-content-label);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    color: #31b9ef;
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
-  .table__content_label_B {
-    background-image: linear-gradient(to top, #04698c, #04698c00);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    color: #31b9ef;
-  }
-  .table__content_label_C {
-    background-position: center 100%;
-    background-size: 100% 25px;
-    background-repeat: no-repeat;
-    background-image: var(--image-content-text);
-    height: 40px;
 
-    .label-t {
-      background-repeat: no-repeat;
-      background-size: 80% auto;
-      background-position: center;
-      background-image: var(--image-list-head);
+  @{theme-deepblue} {
+    .table__content {
+      --image-content-label: url(/@/assets/images/themify/deepblue/company/content-label.png);
+      --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
+      --image-list-head: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/list-head.png');
     }
   }
 
-  .table__content_list {
-    height: calc(100% - 32px);
-    width: 380px;
+  .table__content {
+    --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');
+    height: 100%;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
+    align-items: center;
     padding: 5px 0;
-    box-sizing: border-box;
-    overflow-y: auto;
-    .table__content_list_row {
-      width: 100%;
+
+    .table__content_label {
+      width: 355px;
+      height: 32px;
       display: flex;
       justify-content: space-around;
       align-items: center;
-      color: #fff;
-      margin-bottom: 5px;
-      span {
-        display: inline-block;
+      .label-t {
         text-align: center;
+        font-size: 14px;
       }
     }
-  }
-
-  .table__content_list_A {
-    .table__content_list_row {
-      background-size: 100% auto;
+    .table__content_label_A {
+      background-image: var(--image-content-label);
+      background-size: 100% 100%;
       background-repeat: no-repeat;
-      background-position: center bottom;
-      background-image: var(--image-content-text);
+      color: #31b9ef;
     }
-  }
-  .table__content_list_C {
-    .table__content_list_row {
-      min-height: 50px;
-      background-size: 100% auto;
+    .table__content_label_B {
+      background-image: linear-gradient(to top, #04698c, #04698c00);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      color: #31b9ef;
+    }
+    .table__content_label_C {
+      background-position: center 100%;
+      background-size: 100% 25px;
       background-repeat: no-repeat;
-      background-position: center bottom;
       background-image: var(--image-content-text);
+      height: 40px;
+
+      .label-t {
+        background-repeat: no-repeat;
+        background-size: 80% auto;
+        background-position: center;
+        background-image: var(--image-list-head);
+      }
+    }
+
+    .table__content_list {
+      height: calc(100% - 32px);
+      width: 380px;
+      display: flex;
+      flex-direction: column;
+      padding: 5px 0;
+      box-sizing: border-box;
+      overflow-y: auto;
+      .table__content_list_row {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        margin-bottom: 5px;
+        span {
+          display: inline-block;
+          text-align: center;
+        }
+      }
+    }
+
+    .table__content_list_A {
+      .table__content_list_row {
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-image: var(--image-content-text);
+      }
+    }
+    .table__content_list_C {
+      .table__content_list_row {
+        min-height: 50px;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-image: var(--image-content-text);
+      }
     }
   }
-}
 </style>

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

@@ -68,102 +68,128 @@
   </div>
 </template>
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    label: string;
-    value?: string;
-    // 告示牌布局，类型为：'val-top' | 'label-top'
-    layout: string;
-    // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
-    type?: string;
-  }>(),
-  {
-    value: '/',
-    type: 'A',
-    layout: 'val-top',
-  }
-);
-
-// 获取某些 value 对应的特殊的 装饰用的类名
-function getValueDecoClass(value) {
-  switch (value) {
-    case '低风险':
-      return 'low_risk';
-    case '一般风险':
-      return 'risk';
-    case '较大风险':
-      return 'high_risk';
-    case '报警':
-      return 'warning';
-    default:
-      return '';
-  }
-}
-
-defineEmits(['click']);
+  withDefaults(
+    defineProps<{
+      label: string;
+      value?: string;
+      // 告示牌布局，类型为：'val-top' | 'label-top'
+      layout: string;
+      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
+      type?: string;
+    }>(),
+    {
+      value: '/',
+      type: 'A',
+      layout: 'val-top',
+    }
+  );
+
+  // 获取某些 value 对应的特殊的 装饰用的类名
+  function getValueDecoClass(value) {
+    switch (value) {
+      case '低风险':
+        return 'low_risk';
+      case '一般风险':
+        return 'risk';
+      case '较大风险':
+        return 'high_risk';
+      case '报警':
+        return 'warning';
+      default:
+        return '';
+    }
+  }
+
+  defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @{theme-green} {
+    .mini-board {
+      // --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
+      // --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
+      // --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
+      // --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
+      // --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+      // --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+      // --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
+      // --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
+      // --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+      // --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
+      // --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+      // --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
+      // --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
+      --image-miehuo: url(/@/assets/images/themify/green/home-container/configurable/firehome/miehuo.png);
+      // --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
+      // --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
+      // --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
+      // --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
+      // --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
+      --image-hycd: url(/@/assets/images/themify/green/home-container/configurable/dusthome/hycd.png);
+      --image-dyfl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/dyfl.png);
+      --image-jdjl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/jdjl.png);
+    }
 
-@{theme-green} {
-  .mini-board {
-    // --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
-    // --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
-    // --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
-    // --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
-    // --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-    // --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
-    // --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
-    // --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
-    // --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-    // --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
-    // --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-    // --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
-    // --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
-    --image-miehuo: url(/@/assets/images/themify/green/home-container/configurable/firehome/miehuo.png);
-    // --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
-    // --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
-    // --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
-    // --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
-    // --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
-    --image-hycd: url(/@/assets/images/themify/green/home-container/configurable/dusthome/hycd.png);
-    --image-dyfl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/dyfl.png);
-    --image-jdjl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/jdjl.png);
-  }
-
-  // type E 专用样式调整
-  .mini-board_E .mini-board__label {
-    height: 100px;
-    white-space: normal;
-  }
+    // type E 专用样式调整
+    .mini-board_E .mini-board__label {
+      height: 100px;
+      white-space: normal;
+    }
 
-  .mini-board_E:nth-child(1) {
-    background-image: var(--image-hycd);
+    .mini-board_E:nth-child(1) {
+      background-image: var(--image-hycd);
 
-    .mini-board__label_E {
-      background-image: none;
+      .mini-board__label_E {
+        background-image: none;
+      }
     }
-  }
 
-  .mini-board_E:nth-child(2) {
-    background-image: var(--image-dyfl);
+    .mini-board_E:nth-child(2) {
+      background-image: var(--image-dyfl);
 
-    .mini-board__label_E {
-      background-image: none;
+      .mini-board__label_E {
+        background-image: none;
+      }
     }
-  }
 
-  .mini-board_E:nth-child(3) {
-    background-image: var(--image-jdjl);
+    .mini-board_E:nth-child(3) {
+      background-image: var(--image-jdjl);
 
-    .mini-board__label_E {
-      background-image: none;
+      .mini-board__label_E {
+        background-image: none;
+      }
+    }
+  }
+
+  @{theme-deepblue} {
+    .mini-board {
+      --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
+      --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
+      --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
+      --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
+      --image-areaNew66: url('/@/assets/images/vent/homeNew/databg/3-1.png');
+      --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+      --image-areaNew88: url('/@/assets/images/vent/homeNew/databg/7.png');
+      --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+      --image-areaQ: url('/@/assets/images/themify/deepblue/company/area-q.png');
+      --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
+      --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
+      --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+      --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
+      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+      --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
+      --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
+      --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
+      --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
+      --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
+      --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
+      --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
+      --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
     }
   }
-}
 
-@{theme-deepblue} {
   .mini-board {
     --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
     --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
@@ -171,661 +197,635 @@ defineEmits(['click']);
     --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
     --image-areaNew66: url('/@/assets/images/vent/homeNew/databg/3-1.png');
     --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-    --image-areaNew88: url('/@/assets/images/vent/homeNew/databg/7.png');
-    --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
-    --image-areaQ: url('/@/assets/images/themify/deepblue/company/area-q.png');
-    --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
-    --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
-    --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-    --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
-    --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-    --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
-    --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
-    --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
-    --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
-    --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
-    --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
-    --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
-    --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
-  }
-}
-
-.mini-board {
-  --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
-  --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
-  --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
-  --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
-  --image-areaNew66: url('/@/assets/images/vent/homeNew/databg/3-1.png');
-  --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-  --image-areaNew88: url('/@/assets/images/vent/homeNew/databg/3-2.png');
-  --image-area3: url('/@/assets/images/company/area3.png');
-  --image-areaQ: url('/@/assets/images/company/area-q.png');
-  --image-areaT: url('/@/assets/images/company/areaT.png');
-  --image-areaR: url('/@/assets/images/company/areaR.png');
-  --image-value-bg: url('/@/assets/images/vent/value-bg.png');
-  --image-value-S: url('/@/assets/images/vent/value-S.png');
-  --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
-  --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
-  --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
-  --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
-  --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
-  --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
-  --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
-  --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-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-board_bg_7: url('/@/assets/images/home-container/configurable/board_bg_7.png');
-  --image-board_bg_8: url('/@/assets/images/home-container/configurable/board_bg_8.png');
-  --image-board_bg_9: url('/@/assets/images/home-container/configurable/board_bg_9.png');
-  --image-board_bg_10: url('/@/assets/images/home-container/configurable/board_bg_10.png');
-
-  --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
-  --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
-  --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
-  height: 50px;
-  line-height: 25px;
-  width: 130px;
-  padding: 0 5px 0 5px;
-  text-align: center;
-  background-size: 100% 100%;
-  position: relative;
-}
-
-.mini-board__label {
-  white-space: nowrap;
-}
-
-.mini-board__value {
-  white-space: nowrap;
-}
-
-.mini-board_New {
-  width: 120px;
-  height: 60px;
-  background-image: var(--image-areaNew);
-  background-size: 100% 100%;
-}
-
-.mini-board_New1 {
-  width: 118px;
-  height: 60px;
-  background-image: var(--image-areaNew1);
-  background-size: 100% 100%;
-}
-
-.mini-board_New2 {
-  width: 93px;
-  height: 60px;
-  margin: 0px;
-  background-image: var(--image-areaNew2);
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-
-.mini-board_New3 {
-  margin-bottom: 0;
-  width: 170px;
-  height: 50px;
-}
-
-.mini-board_New4 {
-  margin-bottom: 0;
-  width: 179px;
-  height: 48px;
-}
-
-.mini-board_New3_jin {
-  background-image: var(--image-areaNew66);
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  padding-left: 55px;
-}
-
-.mini-board_New3_hui {
-  background-image: var(--image-areaNew88);
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  padding-left: 55px;
-}
-
-.mini-board_A {
-  width: 120px;
-  height: 60px;
-  background-image: var(--image-area3);
-  background-size: 100% 100%;
-}
-
-.mini-board_Q {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 116px;
-  height: 55px;
-  background-image: var(--image-areaQ);
-  background-size: 100% 100%;
-}
-
-.mini-board_B {
-  width: 131px;
-  height: 64px;
-  background-image: var(--image-value-bg);
-  background-size: auto 40px;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-
-.mini-board_R {
-  width: 120px;
-  height: 90px;
-  background-image: var(--image-areaR);
-  background-size: 100% 100%;
-  position: relative;
-
-  .mini-board__value_R {
-    position: absolute;
-    left: 30%;
-    top: 30%;
+    --image-areaNew88: url('/@/assets/images/vent/homeNew/databg/3-2.png');
+    --image-area3: url('/@/assets/images/company/area3.png');
+    --image-areaQ: url('/@/assets/images/company/area-q.png');
+    --image-areaT: url('/@/assets/images/company/areaT.png');
+    --image-areaR: url('/@/assets/images/company/areaR.png');
+    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+    --image-value-S: url('/@/assets/images/vent/value-S.png');
+    --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
+    --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
+    --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
+    --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
+    --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
+    --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+    --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
+    --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-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-board_bg_7: url('/@/assets/images/home-container/configurable/board_bg_7.png');
+    --image-board_bg_8: url('/@/assets/images/home-container/configurable/board_bg_8.png');
+    --image-board_bg_9: url('/@/assets/images/home-container/configurable/board_bg_9.png');
+    --image-board_bg_10: url('/@/assets/images/home-container/configurable/board_bg_10.png');
+
+    --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
+    --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
+    --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
+    height: 50px;
+    line-height: 25px;
+    width: 130px;
+    padding: 0 5px 0 5px;
+    text-align: center;
+    background-size: 100% 100%;
+    position: relative;
+  }
+
+  .mini-board__label {
+    white-space: nowrap;
+  }
+
+  .mini-board__value {
+    white-space: nowrap;
+  }
+
+  .mini-board_New {
+    width: 120px;
+    height: 60px;
+    background-image: var(--image-areaNew);
+    background-size: 100% 100%;
+  }
+
+  .mini-board_New1 {
+    width: 118px;
+    height: 60px;
+    background-image: var(--image-areaNew1);
+    background-size: 100% 100%;
+  }
+
+  .mini-board_New2 {
+    width: 93px;
+    height: 60px;
+    margin: 0px;
+    background-image: var(--image-areaNew2);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+
+  .mini-board_New3 {
+    margin-bottom: 0;
+    width: 170px;
+    height: 50px;
+  }
+
+  .mini-board_New4 {
+    margin-bottom: 0;
+    width: 179px;
+    height: 48px;
+  }
+
+  .mini-board_New3_jin {
+    background-image: var(--image-areaNew66);
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding-left: 55px;
+  }
+
+  .mini-board_New3_hui {
+    background-image: var(--image-areaNew88);
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding-left: 55px;
+  }
+
+  .mini-board_A {
+    width: 120px;
+    height: 60px;
+    background-image: var(--image-area3);
+    background-size: 100% 100%;
+  }
+
+  .mini-board_Q {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 116px;
+    height: 55px;
+    background-image: var(--image-areaQ);
+    background-size: 100% 100%;
+  }
+
+  .mini-board_B {
+    width: 131px;
+    height: 64px;
+    background-image: var(--image-value-bg);
+    background-size: auto 40px;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+
+  .mini-board_R {
+    width: 120px;
+    height: 90px;
+    background-image: var(--image-areaR);
+    background-size: 100% 100%;
+    position: relative;
+
+    .mini-board__value_R {
+      position: absolute;
+      left: 30%;
+      top: 30%;
+      font-family: 'douyuFont';
+      color: @vent-gas-primary-text;
+    }
+
+    .mini-board__label_R {
+      position: absolute;
+      right: 0;
+      bottom: 20px;
+      font-size: 15px;
+    }
+  }
+
+  .mini-board_S {
+    width: 131px;
+    height: 64px;
+    background-image: var(--image-value-S);
+    background-size: auto 40px;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+
+  .mini-board_T {
+    width: 120px;
+    height: 80px;
+    background-image: var(--image-areaT);
+    background-size: 100% 100%;
+  }
+
+  .mini-board__label_T {
+    margin-top: 15px;
+  }
+
+  .mini-board__value_T {
     font-family: 'douyuFont';
     color: @vent-gas-primary-text;
+    font-size: 12px;
+    height: 30px;
+    line-height: 30px;
   }
 
-  .mini-board__label_R {
-    position: absolute;
-    right: 0;
-    bottom: 20px;
+  .mini-board_C {
+    width: 121px;
+    height: 69px;
+    background-image: var(--image-vent-param-bg);
+  }
+
+  .mini-board_D {
+    // width: 105px;
+    height: 58px;
+    background-image: var(--image-mini-board-1);
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+
+  .mini-board_E {
+    width: 30%;
+    height: 180px;
+    padding: 20px 5px;
+    background-image: var(--image-board_bg_1);
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .mini-board_F {
+    width: 140px;
+    height: 70px;
+    background-image: var(--image-miehuo);
+    background-size: 100% 80%;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+
+  .mini-board_G {
+    width: 98px;
+    height: 70px;
+    background-image: var(--image-value-bg-2);
+    background-size: 100% auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+
+  .mini-board_H {
+    width: 174px;
+    height: 104px;
+    background-image: var(--image-board_bg_3);
+    background-size: 100% auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    padding: 45px 0 0 0;
+  }
+
+  .mini-board_I {
+    width: 139px;
+    height: 67px;
+    background-image: var(--image-board_bg_6);
+    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_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%;
+    margin: 5px 0 15px 0;
+  }
+
+  .mini-board_M:nth-child(2),
+  .mini-board_M:nth-child(3),
+  .mini-board_M:nth-child(6),
+  .mini-board_M:nth-child(7) {
+    background-image: var(--image-board-bg-m2);
+
+    .mini-board__value_M {
+      color: #27cab7;
+    }
+  }
+
+  .mini-board_N {
+    width: 200px;
+    height: 68px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 25px 0 20px;
+    margin-top: -15px;
+    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) {
+    background-image: var(--image-board-bg-nl2);
+  }
+
+  .mini-board_N:nth-child(4) {
+    background-image: var(--image-board-bg-nr2);
+  }
+
+  .mini-board_N:nth-child(5) {
+    background-image: var(--image-board-bg-nl1);
+  }
+
+  .mini-board_N:nth-child(6) {
+    background-image: var(--image-board-bg-nr1);
+  }
+
+  .mini-board_O {
+    width: 110px;
+    height: 50px;
+    background-image: var(--image-board-bg-o);
+    background-size: 100% 100%;
+  }
+
+  .mini-board_P {
+    width: 97px;
+    height: 170px;
+    padding-top: 105px;
+    background-image: var(--image-board_bg_7), var(--image-board_bg_10);
+    background-size:
+      97px 105px,
+      100% 40px;
+    background-repeat: no-repeat;
+    background-position:
+      center top,
+      center bottom;
+  }
+
+  .mini-board_P:nth-of-type(2) {
+    width: 97px;
+    height: 170px;
+    padding-top: 105px;
+    background-image: var(--image-board_bg_8), var(--image-board_bg_9);
+    background-size:
+      97px 105px,
+      100% 40px;
+    background-repeat: no-repeat;
+    background-position:
+      center top,
+      center bottom;
+  }
+
+  .mini-board__value_New {
+    color: @vent-gas-primary-text;
     font-size: 15px;
+    float: left;
+    margin: 0 0 0 13px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
   }
-}
-
-.mini-board_S {
-  width: 131px;
-  height: 64px;
-  background-image: var(--image-value-S);
-  background-size: auto 40px;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-
-.mini-board_T {
-  width: 120px;
-  height: 80px;
-  background-image: var(--image-areaT);
-  background-size: 100% 100%;
-}
-
-.mini-board__label_T {
-  margin-top: 15px;
-}
-
-.mini-board__value_T {
-  font-family: 'douyuFont';
-  color: @vent-gas-primary-text;
-  font-size: 12px;
-  height: 30px;
-  line-height: 30px;
-}
-
-.mini-board_C {
-  width: 121px;
-  height: 69px;
-  background-image: var(--image-vent-param-bg);
-}
-
-.mini-board_D {
-  // width: 105px;
-  height: 58px;
-  background-image: var(--image-mini-board-1);
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-
-.mini-board_E {
-  width: 30%;
-  height: 180px;
-  padding: 20px 5px;
-  background-image: var(--image-board_bg_1);
-  background-position: center bottom;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.mini-board_F {
-  width: 140px;
-  height: 70px;
-  background-image: var(--image-miehuo);
-  background-size: 100% 80%;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-
-.mini-board_G {
-  width: 98px;
-  height: 70px;
-  background-image: var(--image-value-bg-2);
-  background-size: 100% auto;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-
-.mini-board_H {
-  width: 174px;
-  height: 104px;
-  background-image: var(--image-board_bg_3);
-  background-size: 100% auto;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-  padding: 45px 0 0 0;
-}
-
-.mini-board_I {
-  width: 139px;
-  height: 67px;
-  background-image: var(--image-board_bg_6);
-  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_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%;
-  margin: 5px 0 15px 0;
-}
-
-.mini-board_M:nth-child(2),
-.mini-board_M:nth-child(3),
-.mini-board_M:nth-child(6),
-.mini-board_M:nth-child(7) {
-  background-image: var(--image-board-bg-m2);
 
-  .mini-board__value_M {
-    color: #27cab7;
-  }
-}
-
-.mini-board_N {
-  width: 200px;
-  height: 68px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 25px 0 20px;
-  margin-top: -15px;
-  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) {
-  background-image: var(--image-board-bg-nl2);
-}
-
-.mini-board_N:nth-child(4) {
-  background-image: var(--image-board-bg-nr2);
-}
-
-.mini-board_N:nth-child(5) {
-  background-image: var(--image-board-bg-nl1);
-}
-
-.mini-board_N:nth-child(6) {
-  background-image: var(--image-board-bg-nr1);
-}
-
-.mini-board_O {
-  width: 110px;
-  height: 50px;
-  background-image: var(--image-board-bg-o);
-  background-size: 100% 100%;
-}
-
-.mini-board_P {
-  width: 97px;
-  height: 170px;
-  padding-top: 105px;
-  background-image: var(--image-board_bg_7), var(--image-board_bg_10);
-  background-size:
-    97px 105px,
-    100% 40px;
-  background-repeat: no-repeat;
-  background-position:
-    center top,
-    center bottom;
-}
-
-.mini-board_P:nth-of-type(2) {
-  width: 97px;
-  height: 170px;
-  padding-top: 105px;
-  background-image: var(--image-board_bg_8), var(--image-board_bg_9);
-  background-size:
-    97px 105px,
-    100% 40px;
-  background-repeat: no-repeat;
-  background-position:
-    center top,
-    center bottom;
-}
-
-.mini-board__value_New {
-  color: @vent-gas-primary-text;
-  font-size: 15px;
-  float: left;
-  margin: 0 0 0 13px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-}
-
-.mini-board__lable_New {
-  line-height: 24px;
-  height: 24px;
-}
-
-.mini-board__value_New1 {
-  color: @vent-gas-primary-text;
-  font-size: 16px;
-  float: left;
-  margin: 0 0 0 45%;
-  height: 30px;
-  line-height: 30px;
-}
-
-.mini-board__lable_New1 {
-  line-height: 24px;
-  height: 24px;
-}
-
-.mini-board__value_New2 {
-  color: @vent-gas-primary-text;
-  font-size: 15px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-}
-
-.mini-board__lable_New2 {
-  line-height: 24px;
-  height: 24px;
-}
-
-.mini-board__value_New3 {
-  color: #afe6f2;
-  font-size: 15px;
-  font-weight: bold;
-  margin-left: 10px;
-}
-
-.mini-board__lable_New3 {
-  color: #afe6f2;
-  height: 30px;
-  font-size: 10px;
-}
-
-.mini-board__value_New4 {
-  font-size: 12px;
-  font-family: 'douyuFont';
-  position: absolute;
-  left: 76px;
-  top: 4px;
-}
-
-.mini-board__label_New4 {
-  position: absolute;
-  left: 76px;
-  bottom: -2px;
-}
-
-.mini-board__value_A {
-  color: @vent-gas-primary-text;
-  font-size: 20px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-}
-
-.mini-board__value_Q {
-  color: #b7f1fd;
-  font-size: 12px;
-  font-family: 'douyuFont';
-}
-
-.mini-board__value_B {
-  color: @vent-gas-primary-text;
-  font-size: 20px;
-  font-weight: bold;
-  height: 40px;
-  line-height: 40px;
-}
-
-.mini-board__label_B {
-  line-height: 24px;
-  height: 24px;
-}
-
-.mini-board__value_C {
-  color: @vent-gas-primary-text;
-  height: 40px;
-  line-height: 40px;
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.mini-board__value_D {
-  font-size: 20px;
-  font-weight: bold;
-  height: 40px;
-  line-height: 40px;
-}
-
-.mini-board__label_D {
-  line-height: 17px;
-  height: 17px;
-}
-
-.mini-board__value_E {
-  font-size: 19px;
-  font-weight: bold;
-}
-
-.mini-board__label_E {
-  line-height: 20px;
-  height: 90px;
-  padding-top: 30%;
-  background-repeat: no-repeat;
-  background-position: center top;
-  white-space: normal;
-}
-
-.mini-board__value_F {
-  font-size: 20px;
-  font-weight: bold;
-  color: @vent-gas-primary-text;
-}
-
-.mini-board__label_F {
-  line-height: 50px;
-}
-
-.mini-board__value_G {
-  color: @vent-gas-primary-text;
-  font-size: 20px;
-  font-weight: bold;
-  height: 42px;
-  line-height: 42px;
-}
-
-.mini-board__label_G {
-  line-height: 20px;
-  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__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_O {
-  font-family: 'douyuFont';
-  font-size: 11px;
-  color: @vent-gas-primary-text;
-}
-
-.mini-board__value_P {
-  font-family: 'douyuFont';
-  font-size: 20px;
-  margin-top: 10px;
-}
-
-.mini-board_E:nth-child(1) {
-  .mini-board__label_E {
-    background-image: var(--image-hycd);
+  .mini-board__lable_New {
+    line-height: 24px;
+    height: 24px;
   }
-}
 
-.mini-board_E:nth-child(2) {
-  .mini-board__label_E {
-    background-image: var(--image-dyfl);
+  .mini-board__value_New1 {
+    color: @vent-gas-primary-text;
+    font-size: 16px;
+    float: left;
+    margin: 0 0 0 45%;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .mini-board__lable_New1 {
+    line-height: 24px;
+    height: 24px;
+  }
+
+  .mini-board__value_New2 {
+    color: @vent-gas-primary-text;
+    font-size: 15px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .mini-board__lable_New2 {
+    line-height: 24px;
+    height: 24px;
+  }
+
+  .mini-board__value_New3 {
+    color: #afe6f2;
+    font-size: 15px;
+    font-weight: bold;
+    margin-left: 10px;
+  }
+
+  .mini-board__lable_New3 {
+    color: #afe6f2;
+    height: 30px;
+    font-size: 10px;
+  }
+
+  .mini-board__value_New4 {
+    font-size: 12px;
+    font-family: 'douyuFont';
+    position: absolute;
+    left: 76px;
+    top: 4px;
+  }
+
+  .mini-board__label_New4 {
+    position: absolute;
+    left: 76px;
+    bottom: -2px;
+  }
+
+  .mini-board__value_A {
+    color: @vent-gas-primary-text;
+    font-size: 20px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .mini-board__value_Q {
+    color: #b7f1fd;
+    font-size: 12px;
+    font-family: 'douyuFont';
+  }
+
+  .mini-board__value_B {
+    color: @vent-gas-primary-text;
+    font-size: 20px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+  }
+
+  .mini-board__label_B {
+    line-height: 24px;
+    height: 24px;
+  }
+
+  .mini-board__value_C {
+    color: @vent-gas-primary-text;
+    height: 40px;
+    line-height: 40px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .mini-board__value_D {
+    font-size: 20px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+  }
+
+  .mini-board__label_D {
+    line-height: 17px;
+    height: 17px;
+  }
+
+  .mini-board__value_E {
+    font-size: 19px;
+    font-weight: bold;
   }
-}
 
-.mini-board_E:nth-child(3) {
   .mini-board__label_E {
-    background-image: var(--image-jdjl);
+    line-height: 20px;
+    height: 90px;
+    padding-top: 30%;
+    background-repeat: no-repeat;
+    background-position: center top;
+    white-space: normal;
+  }
+
+  .mini-board__value_F {
+    font-size: 20px;
+    font-weight: bold;
+    color: @vent-gas-primary-text;
+  }
+
+  .mini-board__label_F {
+    line-height: 50px;
+  }
+
+  .mini-board__value_G {
+    color: @vent-gas-primary-text;
+    font-size: 20px;
+    font-weight: bold;
+    height: 42px;
+    line-height: 42px;
+  }
+
+  .mini-board__label_G {
+    line-height: 20px;
+    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__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_H_low_risk {
-  background-image: var(--image-board_bg_3);
-}
+  .mini-board__value_O {
+    font-family: 'douyuFont';
+    font-size: 11px;
+    color: @vent-gas-primary-text;
+  }
 
-.mini-board_H_risk {
-  background-image: var(--image-board_bg_2);
-}
+  .mini-board__value_P {
+    font-family: 'douyuFont';
+    font-size: 20px;
+    margin-top: 10px;
+  }
 
-.mini-board_H_high_risk {
-  background-image: var(--image-board_bg_5);
-}
+  .mini-board_E:nth-child(1) {
+    .mini-board__label_E {
+      background-image: var(--image-hycd);
+    }
+  }
 
-.mini-board_H_warning {
-  background-image: var(--image-board_bg_4);
-}
+  .mini-board_E:nth-child(2) {
+    .mini-board__label_E {
+      background-image: var(--image-dyfl);
+    }
+  }
+
+  .mini-board_E:nth-child(3) {
+    .mini-board__label_E {
+      background-image: var(--image-jdjl);
+    }
+  }
+
+  .mini-board_H_low_risk {
+    background-image: var(--image-board_bg_3);
+  }
+
+  .mini-board_H_risk {
+    background-image: var(--image-board_bg_2);
+  }
+
+  .mini-board_H_high_risk {
+    background-image: var(--image-board_bg_5);
+  }
+
+  .mini-board_H_warning {
+    background-image: var(--image-board_bg_4);
+  }
 </style>

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

@@ -1,18 +1,23 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div id="three3D"></div>
+  <a-spin class="spin" :spinning="spinning" tip="正在加载，请稍等..." />
+  <div id="three3D"> </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch, onMounted, onUnmounted } from 'vue';
+  import { ref, watch, onMounted, onUnmounted, defineEmits, nextTick } from 'vue';
   import UseThree from '/@/utils/threejs/useThree';
   import { animateCamera } from '/@/utils/threejs/util';
   import * as THREE from 'three';
-  import useEvent from '/@/utils/threejs/useEvent';
+  import { e } from 'unocss';
 
   const props = defineProps<{
     modalName: string;
   }>();
 
+  const emit = defineEmits(['success']);
+
+  const spinning = ref(true);
+
   let modal, modalGroup;
 
   const mouseEvent = () => {
@@ -36,12 +41,24 @@
           newP: { x: -2.211555197992825, y: 27.130029732875393, z: 2.3018919451652007 },
           newT: { x: -2.211555197992825, y: -8.604453425019353, z: 2.301856157557903 },
         },
+        zhuqi: {
+          render: null,
+          group: modalGroup ? modalGroup : null,
+          newP: { x: -45.69228602978097, y: 49.59721939545517, z: 2.6454258202266985 },
+          newT: { x: 9.289291846942458, y: -21.608842010051386, z: 2.7675348357947906 },
+        },
         jdds: {
           render: null,
           group: modalGroup ? modalGroup : null,
           newP: { x: 0.22197787154285728, y: 29.010792085965782, z: 2.477736279196267 },
           newT: { x: 0.22197787154285728, y: -8.604453177192061, z: 2.477698375233975 },
         },
+        pidai: {
+          render: null,
+          group: modalGroup ? modalGroup : null,
+          newP: { x: -0.2434227102934745, y: 33.049017194608794, z: -3.7074883293849323 },
+          newT: { x: -0.24342271027624807, y: -8.62992463364641, z: -3.7074466439636744 },
+        },
       };
       await initModal();
       if (modalConfigurations[props.modalName]) {
@@ -52,17 +69,15 @@
           await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, config.newP, config.newT, modal);
           modal.scene?.add(modalGroup);
           resolve(null);
+          emit('success', modal);
         }, 1000);
       }
     });
   };
 
   const customModal = () => {
-    if (props.modalName == 'workFace11') {
-      const DiXing = modalGroup.getObjectByName('PouMian01')?.getObjectByName('DiXing')?.getObjectByName('DiXing_1');
-      if (DiXing) {
-        DiXing.visible = false;
-      }
+    if (props.modalName == 'zhuqi') {
+      //
     }
   };
 
@@ -76,16 +91,27 @@
         customModal();
         modal.animate();
         addMouseEvent();
+        debugger;
         // this.group.name = this.modelName;
         // setModalCenter(this.group);
         // this.group.scale.set(2.5, 2.5, 2.5);
         // this.setThreePlane();
         // this.setControls();
+
         resolve(null);
+        spinning.value = false;
       });
     });
   };
 
+  const resizeRenderer = () => {
+    if (modal) modal.resizeRenderer();
+  };
+
+  const getModal = () => {
+    return modal;
+  };
+
   watch(
     () => props.modalName,
     async (val) => {
@@ -112,6 +138,8 @@
     modalGroup = null;
     modal = null;
   });
+
+  defineExpose({ resizeRenderer, getModal });
 </script>
 <style lang="less" scoped>
   #three3D {
@@ -122,4 +150,11 @@
     left: 0;
     z-index: 0;
   }
+  .spin {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 0;
+  }
 </style>

src/views/vent/home/configurable/green/components/ComplexList-green.vue

@@ -13,531 +13,530 @@
         <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 class="list-item__value" :class="`list-item__value_${ctx.color} list-item__value_${type}`">{{ ctx.value }}</div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    listConfig: {
-      title: string;
-      contents: {
-        value: string;
-        color: string;
-        label: string;
-        info: string;
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        title: string;
+        contents: {
+          value: string;
+          color: string;
+          label: string;
+          info: string;
+        }[];
       }[];
-    }[];
-    /** A B */
-    type: string;
-  }>(),
-  {
-    listConfig: () => [],
-    type: 'A',
-  }
-);
+      /** A B */
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      type: 'A',
+    }
+  );
 
-//   defineEmits(['click']);
+  //   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-@import '@/design/theme.less';
-@import '@/design/theme.less';
-/* Timeline 相关的样式 */
+  @import '@/design/theme.less';
+  @import '@/design/theme.less';
+  /* Timeline 相关的样式 */
+
+  @{theme-deepblue} {
+    .list {
+      --image-img-3: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-3.png);
+      --image-img-7: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-7.png);
+      --image-img-8: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-8.png);
+      --image-img-9: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-3.png);
+      --image-list_bg_1: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/2-3.png);
+    }
+  }
 
-@{theme-deepblue} {
   .list {
-    --image-img-3: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-3.png);
-    --image-img-7: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-7.png);
-    --image-img-8: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-8.png);
-    --image-img-9: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-3.png);
-    --image-list_bg_1: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/2-3.png);
-  }
-}
-
-.list {
-  --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
-  --image-img-7: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
-  --image-img-8: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
-  --image-img-9: url(/@/assets/images/home-container/configurable/firehome/1-3.png);
-  --image-list_bg_1: url(/@/assets/images/home-container/configurable/firehome/2-3.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);
-  padding: 5px 20px;
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.list-item_A {
-  position: relative;
-  height: 140px;
-  background-repeat: no-repeat;
-  background-image: var(--image-img-3);
-  background-size: auto 100%;
-  background-position: center;
-}
-
-.list-item__title_A {
-  position: absolute;
-  left: 41%;
-  // font-size: 14px;
-  top: 15px;
-}
-
-// .list-item__content_A {
-//   position: absolute;
-//   left: 35%;
-//   top: 55px;
-//   display: flex;
-//   justify-content: space-evenly;
-// }
-.list-item__content_A:nth-of-type(2) {
-  position: absolute;
-  top: 15px;
-  left: 14%;
-  width: 22%;
-  text-align: center;
-  display: block;
-
-  .list-item__label {
-    font-size: 18px;
-    margin-bottom: 25px;
-  }
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 24px;
-  }
-}
-
-.list-item__content_A:nth-of-type(3) {
-  position: absolute;
-  left: 41%;
-  top: 55px;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 20px;
-  }
-}
-
-.list-item__content_A:nth-of-type(4) {
-  position: absolute;
-  left: 66%;
-  top: 55px;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 20px;
-  }
-}
-
-.list-item__content_A:nth-of-type(5) {
-  position: absolute;
-  left: 35%;
-  bottom: 10px;
-  display: flex;
-  align-items: center;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 20px;
-    margin-left: 5px;
-  }
-}
-
-.list-item_B {
-  // height: 155px;
-  background-repeat: no-repeat;
-  // background-size: 100% 100%;
-  // background-size: auto 100%;
-  background-size: 87% auto;
-  background-position: center;
-  background-image: var(--image-img-7);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-align: center;
-  padding: 0 10%;
-  margin-top: 5px;
-  height: 33px;
+    --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
+    --image-img-7: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
+    --image-img-8: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
+    --image-img-9: url(/@/assets/images/home-container/configurable/firehome/1-3.png);
+    --image-list_bg_1: url(/@/assets/images/home-container/configurable/firehome/2-3.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);
+    padding: 5px 20px;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .list-item_A {
+    position: relative;
+    height: 140px;
+    background-repeat: no-repeat;
+    background-image: var(--image-img-3);
+    background-size: auto 100%;
+    background-position: center;
+  }
+
+  .list-item__title_A {
+    position: absolute;
+    left: 41%;
+    // font-size: 14px;
+    top: 15px;
+  }
+
+  // .list-item__content_A {
+  //   position: absolute;
+  //   left: 35%;
+  //   top: 55px;
+  //   display: flex;
+  //   justify-content: space-evenly;
+  // }
+  .list-item__content_A:nth-of-type(2) {
+    position: absolute;
+    top: 15px;
+    left: 14%;
+    width: 22%;
+    text-align: center;
+    display: block;
+
+    .list-item__label {
+      font-size: 18px;
+      margin-bottom: 25px;
+    }
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 24px;
+    }
+  }
 
-  .list-item__label {
-    font-size: 11px;
+  .list-item__content_A:nth-of-type(3) {
+    position: absolute;
+    left: 41%;
+    top: 55px;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 20px;
+    }
   }
 
-  .list-item__value {
-    font-size: 18px;
-    margin-left: 5px;
+  .list-item__content_A:nth-of-type(4) {
+    position: absolute;
+    left: 66%;
+    top: 55px;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 20px;
+    }
   }
 
-  .list-item__content_B {
-    height: 100%;
+  .list-item__content_A:nth-of-type(5) {
+    position: absolute;
+    left: 35%;
+    bottom: 10px;
     display: flex;
     align-items: center;
-    flex-basis: 100px;
-    flex-grow: 1;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 20px;
+      margin-left: 5px;
+    }
   }
 
-  .list-item__title_B {
-    width: 40px;
+  .list-item_B {
+    // height: 155px;
+    background-repeat: no-repeat;
+    // background-size: 100% 100%;
+    // background-size: auto 100%;
+    background-size: 87% auto;
+    background-position: center;
+    background-image: var(--image-img-7);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     text-align: center;
-    margin-right: 50px // height: 30px;
-      // background-size: auto 80%;
-      // background-position: center;
-      // background-repeat: no-repeat;
-  }
-
-  .list-item__info {
-    display: none;
-  }
-}
-
-.list_C {
-  padding: 5px 10px;
-}
-
-.list__wrapper_C {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-
-.list-item_C {
-  position: relative;
-  height: 140px;
-  //   width: 200px;
-  width: 100%;
-  margin: 15px 0px;
-  background-repeat: no-repeat;
-  background-image: var(--image-img-8);
-  background-size: 100% 100%;
-  background-position: left center;
-}
-
-.list-item__title_C {
-  position: absolute;
-  //   left: 99px;
-  left: 178px;
-  // font-size: 14px;
-  top: 15px;
-}
-
-.list-item__content_C:nth-of-type(2) {
-  position: absolute;
-  top: 18px;
-  left: 28px;
-  width: 30%;
-  text-align: center;
-  display: block;
-
-  .list-item__label {
-    // font-size: 18px;
-    margin-bottom: 25px;
-  }
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 18px;
-  }
-}
-
-.list-item__content_C:nth-of-type(3) {
-  position: absolute;
-  left: 178px;
-  top: 55px;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 18px;
-  }
-}
-
-
-.list_D {
-  padding: 5px 10px;
-}
-
-.list__wrapper_D {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-
-.list-item_D {
-  position: relative;
-  height: 108px;
-  width: 182px;
-  color: #fff;
-  background-repeat: no-repeat;
-  background-image: var(--image-img-9);
-  background-size: 100% auto;
-  background-position: center top;
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.list-item__title_D {
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  font-size: 16px;
-  font-weight: bold;
-}
-
-.list-item__content_D:nth-of-type(2) {
-  position: absolute;
-  top: 10%;
-  left: 10%;
-  width: 32%;
-  text-align: center;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 16px;
-  }
-}
+    padding: 0 10%;
+    margin-top: 5px;
+    height: 33px;
 
-.list-item__content_D:nth-of-type(3) {
-  position: absolute;
-  top: 10%;
-  right: 10%;
-  width: 32%;
-  text-align: center;
+    .list-item__label {
+      font-size: 11px;
+    }
+
+    .list-item__value {
+      font-size: 18px;
+      margin-left: 5px;
+    }
 
-  .list-item__info {
-    display: none;
+    .list-item__content_B {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-basis: 100px;
+      flex-grow: 1;
+    }
+
+    .list-item__title_B {
+      width: 40px;
+      text-align: center;
+      margin-right: 50px // height: 30px;
+        // background-size: auto 80%;
+        // background-position: center;
+        // background-repeat: no-repeat;
+    }
+
+    .list-item__info {
+      display: none;
+    }
   }
 
-  .list-item__value {
-    font-size: 16px;
+  .list_C {
+    padding: 5px 10px;
   }
-}
-
-.list_E {
-  padding: 5px 10px;
-}
-
-.list__wrapper_E {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  // padding: 0 10px;
-}
-
-.list-item_E {
-  position: relative;
-  height: 104px;
-  width: 180px;
-  background-repeat: no-repeat;
-  background-image: var(--image-list_bg_1);
-  background-size: 100% auto;
-  background-position: center top;
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.list-item__title_E {
-  // position: absolute;
-  width: 100%;
-  // top: 0;
-  font-size: 16px;
-  font-weight: bold;
-  margin-top: 10px;
-}
-
-.list-item__content_E:nth-of-type(2) {
-  position: absolute;
-  top: 40%;
-  left: 5%;
-  text-align: left;
-
-  .list-item__info {
-    display: none;
-  }
-
-  .list-item__value {
-    font-size: 16px;
+
+  .list__wrapper_C {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
   }
-}
 
-.list-item__content_E:nth-of-type(3) {
-  position: absolute;
-  top: 40%;
-  right: 5%;
-  text-align: right;
+  .list-item_C {
+    position: relative;
+    height: 140px;
+    //   width: 200px;
+    width: 100%;
+    margin: 15px 0px;
+    background-repeat: no-repeat;
+    background-image: var(--image-img-8);
+    background-size: 100% 100%;
+    background-position: left center;
+  }
+
+  .list-item__title_C {
+    position: absolute;
+    //   left: 99px;
+    left: 178px;
+    // font-size: 14px;
+    top: 15px;
+  }
+
+  .list-item__content_C:nth-of-type(2) {
+    position: absolute;
+    top: 18px;
+    left: 28px;
+    width: 30%;
+    text-align: center;
+    display: block;
 
-  .list-item__info {
-    display: none;
+    .list-item__label {
+      // font-size: 18px;
+      margin-bottom: 25px;
+    }
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 18px;
+    }
   }
 
-  .list-item__value {
-    font-size: 16px;
+  .list-item__content_C:nth-of-type(3) {
+    position: absolute;
+    left: 178px;
+    top: 55px;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 18px;
+    }
   }
-}
 
-.list-item_F {
-  // height: 155px;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  // background-size: auto 100%;
-  background-position: center;
-  background-image: @vent-gas-list-item-bg-img;
-  display: flex;
-  align-items: center;
-  // justify-content: space-between;
-  // text-align: center;
-  padding: 0 5%;
-  margin-top: 5px;
-  height: 50px;
 
-  .list-item__title_F {
-    flex-basis: 25%;
+  .list_D {
+    padding: 5px 10px;
   }
 
-  .list-item__content_F {
-    flex-basis: 25%;
+  .list__wrapper_D {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
   }
 
-  .list-item__label::after {
-    content: '：';
+  .list-item_D {
+    position: relative;
+    height: 108px;
+    width: 182px;
+    color: #fff;
+    background-repeat: no-repeat;
+    background-image: var(--image-img-9);
+    background-size: 100% auto;
+    background-position: center top;
+    text-align: center;
+    margin-bottom: 20px;
   }
 
-  .list-item__value {
-    font-size: 18px;
-    margin-left: 5px;
+  .list-item__title_D {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    font-size: 16px;
     font-weight: bold;
   }
 
-  .list-item__content_F {
-    display: flex;
-    align-items: center;
+  .list-item__content_D:nth-of-type(2) {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    width: 32%;
+    text-align: center;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 16px;
+    }
+  }
+
+  .list-item__content_D:nth-of-type(3) {
+    position: absolute;
+    top: 10%;
+    right: 10%;
+    width: 32%;
+    text-align: center;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 16px;
+    }
   }
 
-  .list-item__info {
-    display: none;
+  .list_E {
+    padding: 5px 10px;
   }
-}
 
-.list-item_G {
-  // height: 155px;
-  // background-repeat: no-repeat;
-  // background-size: 100% 100%;
-  // background-position: center;
-  // justify-content: space-between;
-  // text-align: center;
-  margin-top: 5px;
+  .list__wrapper_E {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    // padding: 0 10px;
+  }
 
-  .list-item__title_G {
+  .list-item_E {
     position: relative;
+    height: 104px;
+    width: 180px;
+    background-repeat: no-repeat;
+    background-image: var(--image-list_bg_1);
+    background-size: 100% auto;
+    background-position: center top;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .list-item__title_E {
+    // position: absolute;
     width: 100%;
-    height: 16px;
+    // top: 0;
+    font-size: 16px;
+    font-weight: bold;
     margin-top: 10px;
-    margin-bottom: 5px;
-    padding-left: 8px;
-    top: -2px;
-    background-image: var(--image-linear-gradient-1);
-
-    &::before {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: 100%;
-      top: 4px;
-      left: 0;
-      background-image: var(--image-linear-gradient-2);
+  }
+
+  .list-item__content_E:nth-of-type(2) {
+    position: absolute;
+    top: 40%;
+    left: 5%;
+    text-align: left;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 16px;
     }
   }
 
-  .list-item__content_G {
+  .list-item__content_E:nth-of-type(3) {
+    position: absolute;
+    top: 40%;
+    right: 5%;
+    text-align: right;
+
+    .list-item__info {
+      display: none;
+    }
+
+    .list-item__value {
+      font-size: 16px;
+    }
+  }
+
+  .list-item_F {
+    // height: 155px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    // background-size: auto 100%;
+    background-position: center;
+    background-image: @vent-gas-list-item-bg-img;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 4px;
-    margin: 8px 0;
-    background-image: var(--image-linear-gradient-3);
-  }
-}
-
-// .list-item__title_B_O2 {
-//   background-image: url(/@/assets/images/home-container/configurable/firehome/O₂.png);
-// }
-// .list-item__title_B_CH4 {
-//   background-image: url(/@/assets/images/home-container/configurable/firehome/CH₄.png);
-// }
-// .list-item__title_B_CO {
-//   background-image: url(/@/assets/images/home-container/configurable/firehome/CO.png);
-// }
-// .list-item__title_B_CO2 {
-//   background-image: url(/@/assets/images/home-container/configurable/firehome/CO₂.png);
-// }
-
-// .list-item__label {
-//   flex-basis: 55%;
-// }
-// .list-item__info {
-//   flex-grow: 1;
-// }
-// .list-item__value {
-//   flex-basis: 30%;
-// }
-.list-item__value_red {
-  color: red;
-}
-
-.list-item__value_orange {
-  color: orange;
-}
-
-.list-item__value_yellow {
-  color: yellow;
-}
-
-.list-item__value_green {
-  color: yellowgreen;
-}
-
-.list-item__value_blue {
-  color: @vent-table-action-link;
-}
-
-.list-item__value_lightgreen {
-  color: #b9ffde
-}
-
-;
-
-.list-item__value_white {
-  color: white;
-}
-
-.gallery-item__value_lightblue {
-  color: @vent-configurable-home-light-border;
-}
+    // justify-content: space-between;
+    // text-align: center;
+    padding: 0 5%;
+    margin-top: 5px;
+    height: 50px;
+
+    .list-item__title_F {
+      flex-basis: 25%;
+    }
+
+    .list-item__content_F {
+      flex-basis: 25%;
+    }
+
+    .list-item__label::after {
+      content: '：';
+    }
+
+    .list-item__value {
+      font-size: 18px;
+      margin-left: 5px;
+      font-weight: bold;
+    }
+
+    .list-item__content_F {
+      display: flex;
+      align-items: center;
+    }
+
+    .list-item__info {
+      display: none;
+    }
+  }
+
+  .list-item_G {
+    // height: 155px;
+    // background-repeat: no-repeat;
+    // background-size: 100% 100%;
+    // background-position: center;
+    // justify-content: space-between;
+    // text-align: center;
+    margin-top: 5px;
+
+    .list-item__title_G {
+      position: relative;
+      width: 100%;
+      height: 16px;
+      margin-top: 10px;
+      margin-bottom: 5px;
+      padding-left: 8px;
+      top: -2px;
+      background-image: var(--image-linear-gradient-1);
+
+      &::before {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: 100%;
+        top: 4px;
+        left: 0;
+        background-image: var(--image-linear-gradient-2);
+      }
+    }
+
+    .list-item__content_G {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px;
+      margin: 8px 0;
+      background-image: var(--image-linear-gradient-3);
+    }
+  }
+
+  // .list-item__title_B_O2 {
+  //   background-image: url(/@/assets/images/home-container/configurable/firehome/O₂.png);
+  // }
+  // .list-item__title_B_CH4 {
+  //   background-image: url(/@/assets/images/home-container/configurable/firehome/CH₄.png);
+  // }
+  // .list-item__title_B_CO {
+  //   background-image: url(/@/assets/images/home-container/configurable/firehome/CO.png);
+  // }
+  // .list-item__title_B_CO2 {
+  //   background-image: url(/@/assets/images/home-container/configurable/firehome/CO₂.png);
+  // }
+
+  // .list-item__label {
+  //   flex-basis: 55%;
+  // }
+  // .list-item__info {
+  //   flex-grow: 1;
+  // }
+  // .list-item__value {
+  //   flex-basis: 30%;
+  // }
+  .list-item__value_red {
+    color: red;
+  }
+
+  .list-item__value_orange {
+    color: orange;
+  }
+
+  .list-item__value_yellow {
+    color: yellow;
+  }
+
+  .list-item__value_green {
+    color: yellowgreen;
+  }
+
+  .list-item__value_blue {
+    color: @vent-table-action-link;
+  }
+
+  .list-item__value_lightgreen {
+    color: #b9ffde
+  }
+
+  ;
+
+  .list-item__value_white {
+    color: white;
+  }
+
+  .gallery-item__value_lightblue {
+    color: @vent-configurable-home-light-border;
+  }
 </style>

src/views/vent/home/configurable/green/components/CustomList-green.vue

@@ -6,815 +6,813 @@
     <div :class="`list__image_${type}`"></div>
     <!-- 剩下的部分填充剩余宽度 -->
     <div class="flex-grow" :class="`list__wrapper_${type}`">
-      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="flex items-center"
-        :class="`list-item_${type}`">
+      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="flex items-center" :class="`list-item_${type}`">
         <!-- 列表项前面的图标 -->
         <div :class="`list-item__icon_${type}`"></div>
         <!-- 列表项的具体内容填充剩余宽度 -->
         <div class="flex-grow" :class="`list-item__content_${type}`">
           <div class="list-item__label">{{ item.label }}</div>
           <div class="list-item__info" :class="`list-item__info_${item.color}`">{{ item.info }}</div>
-          <div class="list-item__value" :class="`list-item__value_${item.color} list-item__value_${type}`">{{ item.value
-            }}</div>
+          <div class="list-item__value" :class="`list-item__value_${item.color} list-item__value_${type}`">{{ item.value }}</div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    listConfig: {
-      value: string;
-      color: string;
-      label: string;
-      info: string;
-    }[];
-    /** A B C D E F G */
-    type: string;
-  }>(),
-  {
-    listConfig: () => [],
-    type: 'A',
-  }
-);
-
-//   defineEmits(['click']);
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        value: string;
+        color: string;
+        label: string;
+        info: string;
+      }[];
+      /** A B C D E F G */
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      type: 'A',
+    }
+  );
+
+  //   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '/@/design/theme.less';
-/* Timeline 相关的样式 */
+  @import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+  /* Timeline 相关的样式 */
+
+  @{theme-deepblue} {
+    .list {
+      --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
+      --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
+      --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
+      --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
+      --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
+      --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
+      --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
+      --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
+      --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
+      --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
+      --image-list_bg_h: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-9.png);
+      --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-10.png');
+      --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
+    }
+  }
 
-@{theme-deepblue} {
   .list {
-    --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
-    --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
-    --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
-    --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
-    --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
-    --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
-    --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
-    --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
-    --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
-    --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
-    --image-list_bg_h: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-9.png);
-    --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-10.png');
-    --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
-  }
-}
-
-.list {
-  --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
-  --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
-  --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
-  --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
-  --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
-  --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
-  --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
-  --image-list_bg_s: url(/@/assets/images/home-container/configurable/list_bg_s.png);
-  --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
-  --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
-  --image-list_bg_h: url(/@/assets/images/home-container/configurable/firehome/1-9.png);
-  --image-list_bg_r: url(/@/assets/images/home-container/configurable/list_bg_r.png);
-  --image-list_bg_r_icon1: url(/@/assets/images/home-container/configurable/list_bg_r_icon1.png);
-  --image-list_bg_r_icon2: url(/@/assets/images/home-container/configurable/list_bg_r_icon2.png);
-  --image-list_bg_i: url('/@/assets/images/home-container/configurable/firehome/1-10.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');
-  --image-list_bg_n1: url('/@/assets/images/home-container/configurable/minehome/list-bg-n1.png');
-  --image-list_bg_n2: url('/@/assets/images/home-container/configurable/minehome/list-bg-n2.png');
-  --image-list_bg_n3: url('/@/assets/images/home-container/configurable/minehome/list-bg-n3.png');
-  --image-list_bg_n4: url('/@/assets/images/home-container/configurable/minehome/list-bg-n4.png');
-  position: relative;
-  background-repeat: no-repeat;
-  width: 100%;
-  height: 100%;
-  background-size: 100% 100%;
-  background-image: var(--image-list_bg_default);
-}
-
-.list_A {
-  padding-left: 5px;
-}
-
-.list-item__content_A {
-  background-repeat: no-repeat;
-  background-image: @vent-gas-list-item-bg-img;
-  // padding: 5px 10px;
-  display: flex;
-}
-
-.list-item__icon_A {
-  background-repeat: no-repeat;
-  width: 25px;
-  height: 29px;
-  background-image: var(--image-triangle_icon);
-}
-
-.list-item__content_B {
-  background-repeat: no-repeat;
-  padding: 5px 10px 10px 10px;
-  display: flex;
-  background-position: left bottom;
-  background-size: 100% auto;
-  background-image: var(--image-list_bg_b);
-}
-
-.list__image_B {
-  width: 77px;
-  height: 77px;
-  background-repeat: no-repeat;
-  background-image: var(--image-deco_1);
-  background-size: auto;
-  margin-right: 20px;
-}
-
-.list_C {
-  background: none;
-}
-
-.list-item__content_C {
-  height: 60px;
-  background-repeat: no-repeat;
-  padding: 25px 50px 0 50px;
-  display: flex;
-  background-position: center;
-  background-size: 100% 100%;
-  background-image: var(--image-list_bg_c);
-  margin-bottom: 10px;
-  text-align: center;
-}
-
-.list-item__content_C>div {
-  flex-basis: 33.3%;
-}
-
-.list_D {
-  background-image: var(--image-list_bg_defflip);
-}
-
-.list__wrapper_D {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.list-item__icon_D {
-  display: none;
-}
-
-.list-item_D {
-  flex-basis: 25%;
-  height: 60px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: auto 100%;
-  background-image: var(--image-list_bg_d);
-  text-align: center;
-  margin-bottom: 10px;
-}
-
-.list-item__content_D {
-  line-height: 30px;
-}
-
-.list-item__value_D {
-  font-weight: bold;
-}
-
-.list_S {
-  background: none;
-}
-
-.list__wrapper_S {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  /* 2列均等 */
-  gap: 10px;
-}
-
-.list-item_S {
-  height: 45px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
-  background-image: var(--image-list_bg_s);
-  text-align: center;
-  padding: 0 7px;
-}
-
-.list-item__content_S {
-  display: flex;
-}
-
-.list-item__value_S {
-  font-family: 'douyuFont';
-  font-size: 13px;
-  color: @vent-gas-primary-text;
-  padding-top: 3px;
-}
-
-.list_E {
-  background-image: var(--image-list_bg_defflip);
-}
-
-.list__wrapper_E {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.list-item__icon_E {
-  display: none;
-}
-
-.list-item_E {
-  flex-basis: 25%;
-  height: 70px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: auto 100%;
-  background-image: var(--image-list_bg_e);
-  text-align: center;
-  margin: 5px 0px;
-  padding-top: 32px;
-  font-size: 12px;
-}
-
-.list_F {
-  background: none;
-}
-
-.list-item__content_F {
-  height: 40px;
-  background-repeat: no-repeat;
-  padding: 0 50px 0 50px;
-  display: flex;
-  background-position: center;
-  background-size: 100% auto;
-  background-image: var(--image-list);
-  margin-top: 10px;
-  text-align: center;
-}
-
-.list-item__content_F>div {
-  flex-basis: 33.3%;
-}
-
-.list_G {
-  background: none;
-}
-
-.list__wrapper_G {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.list-item_G {
-  width: 130px;
-  height: 80px;
-  align-items: center;
-  text-align: center;
-  border: 1px solid rgba(25, 237, 255, 0.4);
-  box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
-  background: rgba(0, 0, 0, 0.1);
-  margin: 5px 10px;
-}
-
-.list-item__content_G {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.list-item__content_G>.list-item__label {
-  width: 60px;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  font-size: 20px;
-  line-height: 80px;
-}
-
-.list-item__content_G>.list-item__info {
-  width: 70px;
-  height: 30px;
-  line-height: 30px;
-  right: 0;
-  position: absolute;
-}
-
-.list-item__content_G>.list-item__value {
-  width: 70px;
-  height: 50px;
-  line-height: 50px;
-  top: 30px;
-  right: 0;
-  position: absolute;
-  text-shadow: 0 0 25px #00fbfe;
-  background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-  font-style: normal;
-  background-size: cover;
-  font-family: electronicFont;
-  font-size: 30px;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 18px;
-  color: aliceblue;
-}
-
-.list_H {
-  background: none;
-}
-
-.list-item__content_H {
-  height: 50px;
-  color: #fff;
-  background-repeat: no-repeat;
-  padding: 20px 50px 0 50px;
-  display: flex;
-  background-position: bottom;
-  background-size: 100% auto;
-  background-image: var(--image-list_bg_h);
-  margin-bottom: 10px;
-  text-align: center;
-}
-
-.list-item__content_H>div {
-  flex-basis: 33.3%;
-}
-
-.list-item__icon_R {
-  width: 24px;
-  height: 25px;
-  background-image: var(--image-list_bg_r_icon1);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  margin-bottom: 5px;
-  position: absolute;
-  left: 35px;
-}
-
-.list-item_R:last-of-type .list-item__icon_R {
-  background-image: var(--image-list_bg_r_icon2);
-}
-
-.list_R {
-  background: none;
-}
-
-.list-item__content_R {
-  height: 52px;
-  background-repeat: no-repeat;
-  padding: 0 30px;
-  display: flex;
-  background-position: bottom;
-  background-size: 100% 100%;
-  background-image: var(--image-list_bg_r);
-  text-align: center;
-  align-items: center;
+    --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
+    --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
+    --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
+    --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
+    --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
+    --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
+    --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
+    --image-list_bg_s: url(/@/assets/images/home-container/configurable/list_bg_s.png);
+    --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
+    --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
+    --image-list_bg_h: url(/@/assets/images/home-container/configurable/firehome/1-9.png);
+    --image-list_bg_r: url(/@/assets/images/home-container/configurable/list_bg_r.png);
+    --image-list_bg_r_icon1: url(/@/assets/images/home-container/configurable/list_bg_r_icon1.png);
+    --image-list_bg_r_icon2: url(/@/assets/images/home-container/configurable/list_bg_r_icon2.png);
+    --image-list_bg_i: url('/@/assets/images/home-container/configurable/firehome/1-10.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');
+    --image-list_bg_n1: url('/@/assets/images/home-container/configurable/minehome/list-bg-n1.png');
+    --image-list_bg_n2: url('/@/assets/images/home-container/configurable/minehome/list-bg-n2.png');
+    --image-list_bg_n3: url('/@/assets/images/home-container/configurable/minehome/list-bg-n3.png');
+    --image-list_bg_n4: url('/@/assets/images/home-container/configurable/minehome/list-bg-n4.png');
+    position: relative;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    background-image: var(--image-list_bg_default);
+  }
 
-  .list-item__label {
-    font-size: 15px;
+  .list_A {
+    padding-left: 5px;
   }
 
-  .list-item__value_R {
-    font-family: 'douyuFont';
-    font-size: 15px;
-    padding-top: 5px;
-    color: #00bfff;
-  }
-}
-
-.list-item__content_R>div {
-  flex-basis: 33.3%;
-}
-
-.list_fireList {
-  background: none;
-}
-
-.list__wrapper_fireList {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-left: 86px;
-}
-
-.list-item_fireList {
-  width: 167px;
-  height: 58px;
-  color: #000;
-  align-items: center;
-  text-align: center;
-  background-image: var(--image-list_bg_i);
-  background-repeat: no-repeat;
-  background-size: auto 100%;
-  margin: 5px 10px;
-}
-
-.list-item__content_fireList {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.list-item__content_fireList>.list-item__label {
-  width: 60px;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  font-size: 20px;
-  line-height: 63px;
-  color: #009bff;
-}
-
-.list-item__content_fireList>.list-item__info {
-  height: 50%;
-  left: 70px;
-  position: absolute;
-}
-
-.list-item__content_fireList>.list-item__value {
-  top: 50%;
-  height: 50%;
-  left: 70px;
-  position: absolute;
-  font-size: 18px;
-}
-
-.list_I {
-  background: none;
-}
-
-.list__wrapper_I {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
-.list-item_I {
-  width: 160px;
-  height: 63px;
-  color: #fff;
-  align-items: center;
-  text-align: center;
-  background-image: var(--image-list_bg_i);
-  background-repeat: no-repeat;
-  background-size: auto 100%;
-  margin: 8px 10px;
-}
-
-.list-item__content_I {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.list-item__content_I>.list-item__label {
-  width: 60px;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  font-size: 16px;
-  line-height: 63px;
-  color: #2f836e;
-}
-
-.list-item__content_I>.list-item__info {
-  height: 50%;
-  left: 70px;
-  position: absolute;
-}
-
-.list-item__content_I>.list-item__value {
-  top: 50%;
-  height: 50%;
-  left: 70px;
-  position: absolute;
-  font-size: 18px;
-}
-
-.list_J {
-  background: unset;
-  padding: 0 5px 0 10px;
-}
-
-.list-item_J {
-  width: 312px;
-  height: 57px;
-  align-items: center;
-  text-align: center;
-  background-image: var(--image-list_bg_j);
-  background-repeat: no-repeat;
-  background-size: auto 100%;
-  margin: 5px 10px;
-}
-
-.list-item__content_J {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 20px 0 15px;
-}
-
-.list_K {
-  background: unset;
-  padding: 0 5px 0 10px;
-}
-
-.list__wrapper_K {
-  height: 100%;
-}
-
-.list-item__content_K {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px;
-  margin: 4px 0;
-  background-image: var(--image-linear-gradient-3);
+  .list-item__content_A {
+    background-repeat: no-repeat;
+    background-image: @vent-gas-list-item-bg-img;
+    // padding: 5px 10px;
+    display: flex;
+  }
 
-  .list-item__value {
-    flex-basis: unset;
+  .list-item__icon_A {
+    background-repeat: no-repeat;
+    width: 25px;
+    height: 29px;
+    background-image: var(--image-triangle_icon);
   }
 
-  .list-item__label {
-    flex-basis: unset;
+  .list-item__content_B {
+    background-repeat: no-repeat;
+    padding: 5px 10px 10px 10px;
+    display: flex;
+    background-position: left bottom;
+    background-size: 100% auto;
+    background-image: var(--image-list_bg_b);
   }
 
-  .list-item__info {
+  .list__image_B {
+    width: 77px;
+    height: 77px;
+    background-repeat: no-repeat;
+    background-image: var(--image-deco_1);
+    background-size: auto;
+    margin-right: 20px;
+  }
+
+  .list_C {
+    background: none;
+  }
+
+  .list-item__content_C {
+    height: 60px;
+    background-repeat: no-repeat;
+    padding: 25px 50px 0 50px;
+    display: flex;
+    background-position: center;
+    background-size: 100% 100%;
+    background-image: var(--image-list_bg_c);
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .list-item__content_C > div {
+    flex-basis: 33.3%;
+  }
+
+  .list_D {
+    background-image: var(--image-list_bg_defflip);
+  }
+
+  .list__wrapper_D {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .list-item__icon_D {
     display: none;
   }
-}
-
-.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_D {
+    flex-basis: 25%;
+    height: 60px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: auto 100%;
+    background-image: var(--image-list_bg_d);
+    text-align: center;
+    margin-bottom: 10px;
   }
-}
-
-.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 {
+
+  .list-item__content_D {
+    line-height: 30px;
+  }
+
+  .list-item__value_D {
+    font-weight: bold;
+  }
+
+  .list_S {
+    background: none;
+  }
+
+  .list__wrapper_S {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    /* 2列均等 */
+    gap: 10px;
+  }
+
+  .list-item_S {
+    height: 45px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    background-image: var(--image-list_bg_s);
+    text-align: center;
+    padding: 0 7px;
+  }
+
+  .list-item__content_S {
+    display: flex;
+  }
+
+  .list-item__value_S {
     font-family: 'douyuFont';
+    font-size: 13px;
+    color: @vent-gas-primary-text;
+    padding-top: 3px;
+  }
+
+  .list_E {
+    background-image: var(--image-list_bg_defflip);
+  }
+
+  .list__wrapper_E {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .list-item__icon_E {
+    display: none;
+  }
+
+  .list-item_E {
+    flex-basis: 25%;
+    height: 70px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: auto 100%;
+    background-image: var(--image-list_bg_e);
+    text-align: center;
+    margin: 5px 0px;
+    padding-top: 32px;
     font-size: 12px;
   }
-}
 
-.list_N {
-  background: none;
-  padding: 5px 10px;
-}
+  .list_F {
+    background: none;
+  }
+
+  .list-item__content_F {
+    height: 40px;
+    background-repeat: no-repeat;
+    padding: 0 50px 0 50px;
+    display: flex;
+    background-position: center;
+    background-size: 100% auto;
+    background-image: var(--image-list);
+    margin-top: 10px;
+    text-align: center;
+  }
+
+  .list-item__content_F > div {
+    flex-basis: 33.3%;
+  }
+
+  .list_G {
+    background: none;
+  }
 
-.list-item_N {
-  width: 100%;
-  height: 42px;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  margin-bottom: 15px;
-}
+  .list__wrapper_G {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
 
-/* 四个背景样式 */
-.list-item_N:nth-child(1) {
-  background-image: var(--image-list_bg_n1);
-}
+  .list-item_G {
+    width: 130px;
+    height: 80px;
+    align-items: center;
+    text-align: center;
+    border: 1px solid rgba(25, 237, 255, 0.4);
+    box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+    background: rgba(0, 0, 0, 0.1);
+    margin: 5px 10px;
+  }
 
-.list-item_N:nth-child(2) {
-  background-image: var(--image-list_bg_n2);
+  .list-item__content_G {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
 
-  .list-item__value_N {
-    color: #27cab7;
+  .list-item__content_G > .list-item__label {
+    width: 60px;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    font-size: 20px;
+    line-height: 80px;
   }
-}
 
-.list-item_N:nth-child(3) {
-  background-image: var(--image-list_bg_n3);
-}
+  .list-item__content_G > .list-item__info {
+    width: 70px;
+    height: 30px;
+    line-height: 30px;
+    right: 0;
+    position: absolute;
+  }
 
-.list-item_N:nth-child(4) {
-  background-image: var(--image-list_bg_n4);
+  .list-item__content_G > .list-item__value {
+    width: 70px;
+    height: 50px;
+    line-height: 50px;
+    top: 30px;
+    right: 0;
+    position: absolute;
+    text-shadow: 0 0 25px #00fbfe;
+    background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+    font-style: normal;
+    background-size: cover;
+    font-family: electronicFont;
+    font-size: 30px;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 18px;
+    color: aliceblue;
+  }
 
-  .list-item__value_N {
-    color: #27cab7;
+  .list_H {
+    background: none;
   }
-}
 
-.list-item__content_N {
-  display: flex;
-  text-align: center;
-  align-items: center;
+  .list-item__content_H {
+    height: 50px;
+    color: #fff;
+    background-repeat: no-repeat;
+    padding: 20px 50px 0 50px;
+    display: flex;
+    background-position: bottom;
+    background-size: 100% auto;
+    background-image: var(--image-list_bg_h);
+    margin-bottom: 10px;
+    text-align: center;
+  }
 
-  .list-item__value_N {
-    font-family: 'douyuFont';
+  .list-item__content_H > div {
+    flex-basis: 33.3%;
+  }
+
+  .list-item__icon_R {
+    width: 24px;
+    height: 25px;
+    background-image: var(--image-list_bg_r_icon1);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    margin-bottom: 5px;
+    position: absolute;
+    left: 35px;
+  }
+
+  .list-item_R:last-of-type .list-item__icon_R {
+    background-image: var(--image-list_bg_r_icon2);
+  }
+
+  .list_R {
+    background: none;
+  }
+
+  .list-item__content_R {
+    height: 52px;
+    background-repeat: no-repeat;
+    padding: 0 30px;
+    display: flex;
+    background-position: bottom;
+    background-size: 100% 100%;
+    background-image: var(--image-list_bg_r);
+    text-align: center;
+    align-items: center;
+
+    .list-item__label {
+      font-size: 15px;
+    }
+
+    .list-item__value_R {
+      font-family: 'douyuFont';
+      font-size: 15px;
+      padding-top: 5px;
+      color: #00bfff;
+    }
+  }
+
+  .list-item__content_R > div {
+    flex-basis: 33.3%;
+  }
+
+  .list_fireList {
+    background: none;
+  }
+
+  .list__wrapper_fireList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin-left: 86px;
+  }
+
+  .list-item_fireList {
+    width: 167px;
+    height: 58px;
+    color: #000;
+    align-items: center;
+    text-align: center;
+    background-image: var(--image-list_bg_i);
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    margin: 5px 10px;
+  }
+
+  .list-item__content_fireList {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .list-item__content_fireList > .list-item__label {
+    width: 60px;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    font-size: 20px;
+    line-height: 63px;
+    color: #009bff;
+  }
+
+  .list-item__content_fireList > .list-item__info {
+    height: 50%;
+    left: 70px;
+    position: absolute;
+  }
+
+  .list-item__content_fireList > .list-item__value {
+    top: 50%;
+    height: 50%;
+    left: 70px;
+    position: absolute;
+    font-size: 18px;
+  }
+
+  .list_I {
+    background: none;
+  }
+
+  .list__wrapper_I {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .list-item_I {
+    width: 160px;
+    height: 63px;
+    color: #fff;
+    align-items: center;
+    text-align: center;
+    background-image: var(--image-list_bg_i);
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    margin: 8px 10px;
+  }
+
+  .list-item__content_I {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .list-item__content_I > .list-item__label {
+    width: 60px;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    font-size: 16px;
+    line-height: 63px;
+    color: #2f836e;
+  }
+
+  .list-item__content_I > .list-item__info {
+    height: 50%;
+    left: 70px;
+    position: absolute;
+  }
+
+  .list-item__content_I > .list-item__value {
+    top: 50%;
+    height: 50%;
+    left: 70px;
+    position: absolute;
+    font-size: 18px;
+  }
+
+  .list_J {
+    background: unset;
+    padding: 0 5px 0 10px;
   }
-}
 
-.list-item__content_N>div:last-child {
-  flex-basis: 60%;
-}
+  .list-item_J {
+    width: 312px;
+    height: 57px;
+    align-items: center;
+    text-align: center;
+    background-image: var(--image-list_bg_j);
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    margin: 5px 10px;
+  }
+
+  .list-item__content_J {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px 0 15px;
+  }
+
+  .list_K {
+    background: unset;
+    padding: 0 5px 0 10px;
+  }
+
+  .list__wrapper_K {
+    height: 100%;
+  }
+
+  .list-item__content_K {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    margin: 4px 0;
+    background-image: var(--image-linear-gradient-3);
+
+    .list-item__value {
+      flex-basis: unset;
+    }
+
+    .list-item__label {
+      flex-basis: unset;
+    }
+
+    .list-item__info {
+      display: none;
+    }
+  }
+
+  .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__label {
-  flex-basis: 55%;
-}
+  .list-item_M:nth-child(3) .list-item__icon_M {
+    background-image: var(--image-list_icon_m3);
+  }
 
-.list-item__info {
-  flex-grow: 1;
-}
+  .list-item_M:nth-child(4) .list-item__icon_M {
+    background-image: var(--image-list_icon_m4);
+  }
 
-.list-item__value {
-  flex-basis: 30%;
-}
+  .list-item_M:nth-child(5) .list-item__icon_M {
+    background-image: var(--image-list_icon_m5);
+  }
 
-.list-item__value_red {
-  color: red;
-}
+  .list-item_M:nth-child(6) .list-item__icon_M {
+    background-image: var(--image-list_icon_m6);
+  }
 
-.list-item__value_orange {
-  color: orange;
-}
+  .list-item_M:nth-child(7) .list-item__icon_M {
+    background-image: var(--image-list_icon_m7);
+  }
 
-.list-item__value_yellow {
-  color: yellow;
-}
+  .list-item_M:nth-child(8) .list-item__icon_M {
+    background-image: var(--image-list_icon_m8);
+  }
 
-.list-item__value_green {
-  color: yellowgreen;
-}
+  .list-item__content_M {
+    display: flex;
+    text-align: center;
+    align-items: center;
 
-.list-item__value_blue {
-  color: @vent-table-action-link;
-}
+    .list-item__value_M {
+      font-family: 'douyuFont';
+      font-size: 12px;
+    }
+  }
+
+  .list_N {
+    background: none;
+    padding: 5px 10px;
+  }
 
-.list-item__value_lightgreen {
-  color: #b9ffde;
-}
+  .list-item_N {
+    width: 100%;
+    height: 42px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 15px;
+  }
+
+  /* 四个背景样式 */
+  .list-item_N:nth-child(1) {
+    background-image: var(--image-list_bg_n1);
+  }
 
-.list-item__value_white {
-  color: white;
-}
+  .list-item_N:nth-child(2) {
+    background-image: var(--image-list_bg_n2);
+
+    .list-item__value_N {
+      color: #27cab7;
+    }
+  }
+
+  .list-item_N:nth-child(3) {
+    background-image: var(--image-list_bg_n3);
+  }
+
+  .list-item_N:nth-child(4) {
+    background-image: var(--image-list_bg_n4);
+
+    .list-item__value_N {
+      color: #27cab7;
+    }
+  }
+
+  .list-item__content_N {
+    display: flex;
+    text-align: center;
+    align-items: center;
+
+    .list-item__value_N {
+      font-family: 'douyuFont';
+    }
+  }
+
+  .list-item__content_N > div:last-child {
+    flex-basis: 60%;
+  }
 
-.gallery-item__value_lightblue {
-  color: @vent-configurable-home-light-border;
-}
+  .list-item__label {
+    flex-basis: 55%;
+  }
+
+  .list-item__info {
+    flex-grow: 1;
+  }
+
+  .list-item__value {
+    flex-basis: 30%;
+  }
+
+  .list-item__value_red {
+    color: red;
+  }
+
+  .list-item__value_orange {
+    color: orange;
+  }
+
+  .list-item__value_yellow {
+    color: yellow;
+  }
+
+  .list-item__value_green {
+    color: yellowgreen;
+  }
+
+  .list-item__value_blue {
+    color: @vent-table-action-link;
+  }
+
+  .list-item__value_lightgreen {
+    color: #b9ffde;
+  }
+
+  .list-item__value_white {
+    color: white;
+  }
+
+  .gallery-item__value_lightblue {
+    color: @vent-configurable-home-light-border;
+  }
 </style>

src/views/vent/home/configurable/green/components/center-area-green.vue

@@ -1,205 +1,217 @@
 <template>
-    <div class="center-area-green">
-        <div class="container">
-            <div class="risk-score">
-                <div class="item-label">风险得分</div>
-                <div class="item-val">{{ paramDatas.riskLevel !== undefined && paramDatas.riskLevel !== null ?
-                    paramDatas.riskLevel
-                    : '-' }}</div>
-            </div>
-            <div class="dust-warn">
-                <div class="dust-icon"></div>
-                <div class="item-content" @click="showModal('dust')">
-                    <div class="ite-label">粉尘监测预警</div>
-                    <div class="ite-val">{{ paramDatas.fc == 0
-                        ? '低风险'
-                        : paramDatas.fc == 101
-                            ? '低风险'
-                            : paramDatas.fc == 102
-                                ? '一般风险'
-                                : paramDatas.fc == 103
-                                    ? '较大风险'
-                                    : paramDatas.fc == 104
-                                        ? '重大风险'
-                                        : paramDatas.fc == 201
-                                            ? '报警'
-                                            : paramDatas.fc }}</div>
-                </div>
-            </div>
-            <div class="vent-warn">
-                <div class="vent-icon"></div>
-                <div class="item-content" @click="showModal('vent')">
-                    <div class="ite-label">通风监测预警</div>
-                    <div class="ite-val">{{ paramDatas.tf == 0
-                        ? '低风险'
-                        : paramDatas.tf == 101
-                            ? '低风险'
-                            : paramDatas.tf == 102
-                                ? '一般风险'
-                                : paramDatas.tf == 103
-                                    ? '较大风险'
-                                    : paramDatas.tf == 104
-                                        ? '重大风险'
-                                        : paramDatas.tf == 201
-                                            ? '报警'
-                                            : paramDatas.tf }}</div>
-                </div>
-            </div>
-            <div class="gas-warn">
-                <div class="gas-icon"></div>
-                <div class="item-content1">
-                    <div class="ite-content" @click="showModal('gas')">
-                        <div class="ite-label">瓦斯监测预警</div>
-                        <div class="ite-val">{{ paramDatas.ws == 0
-                            ? '低风险'
-                            : paramDatas.ws == 101
-                                ? '低风险'
-                                : paramDatas.ws == 102
-                                    ? '一般风险'
-                                    : paramDatas.ws == 103
-                                        ? '较大风险'
-                                        : paramDatas.ws == 104
-                                            ? '重大风险'
-                                            : paramDatas.ws == 201
-                                                ? '报警'
-                                                : paramDatas.ws }}</div>
-                    </div>
-                    <div class="ite-content">
-                        <div class="ite-label">矿井瓦斯等级鉴定</div>
-                        <div class="ite-val">{{ sysOrgCode == 'sdmtjtbdmk' ? '高瓦斯' : '低瓦斯' }}</div>
-                    </div>
-                </div>
-            </div>
-            <div class="device-warn">
-                <div class="device-icon"></div>
-                <div class="item-content" @click="showModal('sbyj')">
-                    <div class="ite-label">设备监测预警</div>
-                    <div class="ite-val">{{ paramDatas.sb == 0
-                        ? '低风险'
-                        : paramDatas.sb == 101
-                            ? '低风险'
-                            : paramDatas.sb == 102
-                                ? '一般风险'
-                                : paramDatas.sb == 103
-                                    ? '较大风险'
-                                    : paramDatas.sb == 104
-                                        ? '重大风险'
-                                        : paramDatas.sb == 201
-                                            ? '报警'
-                                            : paramDatas.sb }}</div>
-                </div>
-            </div>
-            <div class="fire-warn">
-                <div class="fire-icon"></div>
-                <div class="item-content" @click="showModal('fire')">
-                    <div class="ite-label">火灾监测预警</div>
-                    <div class="ite-val">{{ paramDatas.fire == 0
-                        ? '低风险'
-                        : paramDatas.fire == 101
-                            ? '低风险'
-                            : paramDatas.fire == 102
-                                ? '一般风险'
-                                : paramDatas.fire == 103
-                                    ? '较大风险'
-                                    : paramDatas.fire == 104
-                                        ? '重大风险'
-                                        : paramDatas.fire == 201
-                                            ? '报警'
-                                            : paramDatas.fire }}</div>
-                </div>
-            </div>
-            <div class="db-warn">
-                <div class="db-icon"></div>
-                <div class="item-content" @click="showModal('Minepressure')">
-                    <div class="ite-label">顶板</div>
-                    <div class="ite-val">低风险</div>
-                </div>
-            </div>
-            <div class="sz-warn">
-                <div class="sz-icon"></div>
-                <div class="item-content" @click="showModal('waterLevel')">
-                    <div class="ite-label">水灾</div>
-                    <div class="ite-val">低风险</div>
-                </div>
-            </div>
-            <div class="risk-echartbox">
-                <RiskWarnLevel :echartData="paramDatas.riskData"></RiskWarnLevel>
-            </div>
+  <div class="center-area-green">
+    <div class="container">
+      <div class="risk-score">
+        <div class="item-label">风险得分</div>
+        <div class="item-val">{{ paramDatas.riskLevel !== undefined && paramDatas.riskLevel !== null ? paramDatas.riskLevel : '-' }}</div>
+      </div>
+      <div class="dust-warn">
+        <div class="dust-icon"></div>
+        <div class="item-content" @click="showModal('dust')">
+          <div class="ite-label">粉尘监测预警</div>
+          <div class="ite-val">{{
+            paramDatas.fc == 0
+              ? '低风险'
+              : paramDatas.fc == 101
+                ? '低风险'
+                : paramDatas.fc == 102
+                  ? '一般风险'
+                  : paramDatas.fc == 103
+                    ? '较大风险'
+                    : paramDatas.fc == 104
+                      ? '重大风险'
+                      : paramDatas.fc == 201
+                        ? '报警'
+                        : paramDatas.fc
+          }}</div>
         </div>
+      </div>
+      <div class="vent-warn">
+        <div class="vent-icon"></div>
+        <div class="item-content" @click="showModal('vent')">
+          <div class="ite-label">通风监测预警</div>
+          <div class="ite-val">{{
+            paramDatas.tf == 0
+              ? '低风险'
+              : paramDatas.tf == 101
+                ? '低风险'
+                : paramDatas.tf == 102
+                  ? '一般风险'
+                  : paramDatas.tf == 103
+                    ? '较大风险'
+                    : paramDatas.tf == 104
+                      ? '重大风险'
+                      : paramDatas.tf == 201
+                        ? '报警'
+                        : paramDatas.tf
+          }}</div>
+        </div>
+      </div>
+      <div class="gas-warn">
+        <div class="gas-icon"></div>
+        <div class="item-content1">
+          <div class="ite-content" @click="showModal('gas')">
+            <div class="ite-label">瓦斯监测预警</div>
+            <div class="ite-val">{{
+              paramDatas.ws == 0
+                ? '低风险'
+                : paramDatas.ws == 101
+                  ? '低风险'
+                  : paramDatas.ws == 102
+                    ? '一般风险'
+                    : paramDatas.ws == 103
+                      ? '较大风险'
+                      : paramDatas.ws == 104
+                        ? '重大风险'
+                        : paramDatas.ws == 201
+                          ? '报警'
+                          : paramDatas.ws
+            }}</div>
+          </div>
+          <div class="ite-content">
+            <div class="ite-label">矿井瓦斯等级鉴定</div>
+            <div class="ite-val">{{ sysOrgCode == 'sdmtjtbdmk' ? '高瓦斯' : '低瓦斯' }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="device-warn">
+        <div class="device-icon"></div>
+        <div class="item-content" @click="showModal('sbyj')">
+          <div class="ite-label">设备监测预警</div>
+          <div class="ite-val">{{
+            paramDatas.sb == 0
+              ? '低风险'
+              : paramDatas.sb == 101
+                ? '低风险'
+                : paramDatas.sb == 102
+                  ? '一般风险'
+                  : paramDatas.sb == 103
+                    ? '较大风险'
+                    : paramDatas.sb == 104
+                      ? '重大风险'
+                      : paramDatas.sb == 201
+                        ? '报警'
+                        : paramDatas.sb
+          }}</div>
+        </div>
+      </div>
+      <div class="fire-warn">
+        <div class="fire-icon"></div>
+        <div class="item-content" @click="showModal('fire')">
+          <div class="ite-label">火灾监测预警</div>
+          <div class="ite-val">{{
+            paramDatas.fire == 0
+              ? '低风险'
+              : paramDatas.fire == 101
+                ? '低风险'
+                : paramDatas.fire == 102
+                  ? '一般风险'
+                  : paramDatas.fire == 103
+                    ? '较大风险'
+                    : paramDatas.fire == 104
+                      ? '重大风险'
+                      : paramDatas.fire == 201
+                        ? '报警'
+                        : paramDatas.fire
+          }}</div>
+        </div>
+      </div>
+      <div class="db-warn">
+        <div class="db-icon"></div>
+        <div class="item-content" @click="showModal('Minepressure')">
+          <div class="ite-label">顶板</div>
+          <div class="ite-val">低风险</div>
+        </div>
+      </div>
+      <div class="sz-warn">
+        <div class="sz-icon"></div>
+        <div class="item-content" @click="showModal('waterLevel')">
+          <div class="ite-label">水灾</div>
+          <div class="ite-val">低风险</div>
+        </div>
+      </div>
+      <div class="risk-echartbox">
+        <RiskWarnLevel :echartData="paramDatas.riskData" />
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, watch } from 'vue'
-import { useRouter } from 'vue-router';
-import { useGlobSetting } from '/@/hooks/setting';
-import RiskWarnLevel from './dz-risk.vue'
-let props = defineProps({
+  import { reactive, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import RiskWarnLevel from './dz-risk.vue';
+  let props = defineProps({
     paramData: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    }
-})
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  });
 
-let router = useRouter();
-let paramDatas = reactive<any>({})
-const { sysOrgCode, sysDataType } = useGlobSetting();
+  let router = useRouter();
+  let paramDatas = reactive<any>({});
+  const { sysOrgCode, sysDataType } = useGlobSetting();
 
-//跳转详情
-function showModal(data) {
+  //跳转详情
+  function showModal(data) {
     switch (data) {
-        case 'vent':
-            router.push('/ventilate/warn/home');
-            break;
-        case 'fire':
-            router.push('/fire/warn/home');
-            break;
-        case 'dust':
-            router.push('/dust/warn/home');
-            break;
-        case 'waterLevel':
-            console.log('waterLevel');
-            router.push('/warn/waterLevel/home');
-            break;
-        case 'gas':
-            router.push('/gas/warn/home');
-            break;
-        case 'sbyj':
-            router.push('/device/warn/home');
-            break;
-        case 'Minepressure':
-            router.push('/monitorChannel/monitor-Minepressure');
-            break;
+      case 'vent':
+        router.push('/ventilate/warn/home');
+        break;
+      case 'fire':
+        router.push('/fire/warn/home');
+        break;
+      case 'dust':
+        router.push('/dust/warn/home');
+        break;
+      case 'waterLevel':
+        console.log('waterLevel');
+        router.push('/warn/waterLevel/home');
+        break;
+      case 'gas':
+        router.push('/gas/warn/home');
+        break;
+      case 'sbyj':
+        router.push('/device/warn/home');
+        break;
+      case 'Minepressure':
+        router.push('/monitorChannel/monitor-Minepressure');
+        break;
     }
-}
+  }
 
-watch(() => props.paramData, (newV, oldV) => {
-    paramDatas = newV
-}, { immediate: true, deep: true })
+  watch(
+    () => props.paramData,
+    (newV, oldV) => {
+      paramDatas = newV;
+    },
+    { immediate: true, deep: true }
+  );
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@{theme-deepblue} {
+  @{theme-deepblue} {
     .center-area-green {
-        --image-model_container_img: url('@/assets/images/themify/deepblue/home-container/configurable/1-1.png');
-        --image-model_risk_score: url('@/assets/images/themify/deepblue/home-container/configurable/1-2.png');
-        --image-model_dust_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-7.png');
-        --image-model_vent_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-5.png');
-        --image-model_gas_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-3.png');
-        --image-model_device_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-6.png');
-        --image-model_fire_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-4.png');
-        --image-model_db_warn: url('@/assets/images/themify/deepblue/home-container/configurable/db-green.png');
-        --image-model_sz_warn: url('@/assets/images/themify/deepblue/home-container/configurable/sz-green.png');
-        --image-model_item_content: url('@/assets/images/themify/deepblue/home-container/configurable/1-8.png');
-        --image-model_item_content1: url('@/assets/images/themify/deepblue/home-container/configurable/1-9.png');
+      --image-model_container_img: url('@/assets/images/themify/deepblue/home-container/configurable/1-1.png');
+      --image-model_risk_score: url('@/assets/images/themify/deepblue/home-container/configurable/1-2.png');
+      --image-model_dust_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-7.png');
+      --image-model_vent_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-5.png');
+      --image-model_gas_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-3.png');
+      --image-model_device_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-6.png');
+      --image-model_fire_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-4.png');
+      --image-model_db_warn: url('@/assets/images/themify/deepblue/home-container/configurable/db-green.png');
+      --image-model_sz_warn: url('@/assets/images/themify/deepblue/home-container/configurable/sz-green.png');
+      --image-model_item_content: url('@/assets/images/themify/deepblue/home-container/configurable/1-8.png');
+      --image-model_item_content1: url('@/assets/images/themify/deepblue/home-container/configurable/1-9.png');
     }
-}
+  }
 
-.center-area-green {
+  .center-area-green {
     --image-model_container_img: url('@/assets/images/home-green/1-1.png');
     --image-model_risk_score: url('@/assets/images/home-green/1-2.png');
     --image-model_dust_warn: url('@/assets/images/home-green/1-7.png');
@@ -214,156 +226,155 @@ watch(() => props.paramData, (newV, oldV) => {
     height: 100%;
 
     .container {
-        position: relative;
-        width: 100%;
-        height: calc(100% - 30px);
-        margin-top: 60px;
-        background: var(--image-model_container_img) no-repeat center;
-        background-size: 100% 100%;
+      position: relative;
+      width: 100%;
+      height: calc(100% - 30px);
+      margin-top: 60px;
+      background: var(--image-model_container_img) no-repeat center;
+      background-size: 100% 100%;
     }
 
     .risk-echartbox {
-        position: absolute;
-        left: 0px;
-        top: -72px;
-        width: 220px;
-        height: 170px;
+      position: absolute;
+      left: 0px;
+      top: -72px;
+      width: 220px;
+      height: 170px;
     }
 
     .risk-score {
-        position: absolute;
-        left: 50%;
-        top: -65px;
-        transform: translate(-44%, 0);
-        width: 206px;
-        height: 60px;
-        font-size: 18px;
-        color: #fff;
-        background: var(--image-model_risk_score) no-repeat;
-        background-size: 100% 100%;
+      position: absolute;
+      left: 50%;
+      top: -65px;
+      transform: translate(-44%, 0);
+      width: 206px;
+      height: 60px;
+      font-size: 18px;
+      color: #fff;
+      background: var(--image-model_risk_score) no-repeat;
+      background-size: 100% 100%;
 
-        .item-label {
-            text-align: center;
-            margin-bottom: 5px;
-
-        }
+      .item-label {
+        text-align: center;
+        margin-bottom: 5px;
+      }
 
-        .item-val {
-            text-align: center;
-            font-family: 'douyuFont';
-        }
+      .item-val {
+        text-align: center;
+        font-family: 'douyuFont';
+      }
     }
 
     .dust-warn {
-        position: absolute;
-        left: 242px;
-        top: 52px;
-        width: 132px;
-        height: 108px;
-        background: var(--image-model_dust_warn) no-repeat;
-        background-size: 100% 100%;
+      position: absolute;
+      left: 242px;
+      top: 52px;
+      width: 132px;
+      height: 108px;
+      background: var(--image-model_dust_warn) no-repeat;
+      background-size: 100% 100%;
     }
 
     .vent-warn {
-        position: absolute;
-        left: 200px;
-        top: 334px;
-        width: 132px;
-        height: 108px;
-        background: var(--image-model_vent_warn) no-repeat;
-        background-size: 100% 100%;
+      position: absolute;
+      left: 200px;
+      top: 334px;
+      width: 132px;
+      height: 108px;
+      background: var(--image-model_vent_warn) no-repeat;
+      background-size: 100% 100%;
     }
 
     .gas-warn {
-        position: absolute;
-        left: 420px;
-        top: 436px;
-        width: 132px;
-        height: 108px;
-        background: var(--image-model_gas_warn) no-repeat;
-        background-size: 100% 100%;
+      position: absolute;
+      left: 420px;
+      top: 436px;
+      width: 132px;
+      height: 108px;
+      background: var(--image-model_gas_warn) no-repeat;
+      background-size: 100% 100%;
     }
 
     .device-warn {
-        position: absolute;
-        right: 196px;
-        top: 340px;
-        width: 132px;
-        height: 108px;
-        background: var(--image-model_device_warn) no-repeat;
-        background-size: 100% 100%;
+      position: absolute;
+      right: 196px;
+      top: 340px;
+      width: 132px;
+      height: 108px;
+      background: var(--image-model_device_warn) no-repeat;
+      background-size: 100% 100%;
     }
 
     .fire-warn {
-        position: absolute;
-        right: 178px;
-        top: 58px;
-        width: 132px;
-        height: 108px;
-        background: var(--image-model_fire_warn) no-repeat;
-        background-size: 100% 100%;
+      position: absolute;
+      right: 178px;
+      top: 58px;
+      width: 132px;
+      height: 108px;
+      background: var(--image-model_fire_warn) no-repeat;
+      background-size: 100% 100%;
     }
 
     .db-warn {
-        position: absolute;
-        left: 42px;
-        top: 182px;
-        width: 132px;
-        height: 108px;
-        background: var(--image-model_db_warn) no-repeat;
-        background-size: 100% 100%;
+      position: absolute;
+      left: 42px;
+      top: 182px;
+      width: 132px;
+      height: 108px;
+      background: var(--image-model_db_warn) no-repeat;
+      background-size: 100% 100%;
     }
 
     .sz-warn {
-        position: absolute;
-        right: 34px;
-        top: 136px;
-        width: 132px;
-        height: 108px;
-        background: var(--image-model_sz_warn) no-repeat;
-        background-size: 100% 100%;
+      position: absolute;
+      right: 34px;
+      top: 136px;
+      width: 132px;
+      height: 108px;
+      background: var(--image-model_sz_warn) no-repeat;
+      background-size: 100% 100%;
     }
 
     .item-content {
-        position: absolute;
-        left: -4px;
-        top: -54px;
-        width: 127px;
-        height: 56px;
-        background: var(--image-model_item_content) no-repeat;
-        background-size: 100% 100%;
-        color: #fff;
+      position: absolute;
+      left: -4px;
+      top: -54px;
+      width: 127px;
+      height: 56px;
+      background: var(--image-model_item_content) no-repeat;
+      background-size: 100% 100%;
+      color: #fff;
     }
 
     .item-content1 {
-        display: flex;
-        position: absolute;
-        left: -60px;
-        top: -54px;
-        width: 258px;
-        height: 56px;
-        background: var(--image-model_item_content1) no-repeat;
-        background-size: 100% 100%;
+      display: flex;
+      position: absolute;
+      left: -60px;
+      top: -54px;
+      width: 258px;
+      height: 56px;
+      background: var(--image-model_item_content1) no-repeat;
+      background-size: 100% 100%;
     }
 
     .ite-label {
-        text-align: center;
-        margin-bottom: 10px;
-        padding-top: 4px;
-        font-size: 12px;
+      text-align: center;
+      margin-bottom: 10px;
+      padding-top: 4px;
+      font-size: 12px;
     }
 
     .ite-val {
-        width: 100%;
-        text-align: center;
-        font-family: 'douyuFont';
-        font-size: 12px;
+      width: 100%;
+      text-align: center;
+      font-family: 'douyuFont';
+      font-size: 12px;
     }
 
     .ite-content {
-        width: 50%;
-        height: 100%;
-        color: #fff;
+      width: 50%;
+      height: 100%;
+      color: #fff;
     }
-}
+  }
 </style>

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

@@ -4,19 +4,33 @@
   <div class="content">
     <!-- 背景 -->
     <img v-if="background.show && background.type === 'image'" class="content__background" :src="background.link" />
-    <video v-if="background.show && background.type === 'video'" class="content__background content__background_video"
-      width="100%" autoplay loop muted disablepictureinpicture playsinline>
+    <video
+      v-if="background.show && background.type === 'video'"
+      class="content__background content__background_video"
+      width="100%"
+      autoplay
+      loop
+      muted
+      disablepictureinpicture
+      playsinline
+    >
       <source :src="background.link" />
       Not Supportted Link Or Browser
     </video>
     <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
-      <div v-for="config in layoutConfig" :key="config.name"
-        :style="{ flexBasis: config.basis, overflow: config.overflow ? 'hidden' : 'hidden' }">
+      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'hidden' : 'hidden' }">
         <!-- 告示板部分 -->
         <template v-if="config.name === 'board'">
           <div class="content__module flex flex-justify-around flex-items-center flex-wrap">
-            <MiniBoard v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
-              :dw="item.dw" :type="config.type" :layout="config.layout" />
+            <MiniBoard
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :dw="item.dw"
+              :type="config.type"
+              :layout="config.layout"
+            />
           </div>
         </template>
 
@@ -42,8 +56,7 @@
         </template>
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'gallery_list'">
-          <GalleryList class="content__module" :type="config.type" :list-config="config.items"
-            :gallery-config="config.galleryItems" />
+          <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
         </template>
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'complex_list'">
@@ -51,19 +64,16 @@
         </template>
         <!-- 表格部分，这部分通常是占一整个模块的 -->
         <template v-if="config.name === 'table'">
-          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns"
-            :data="config.data" />
+          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
         </template>
         <template v-if="config.name === 'tabs'">
-          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items"
-            :overflow="config.overflow" />
+          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
         </template>
         <template v-if="config.name === 'blast_delta'">
           <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 178 }" />
         </template>
         <template v-if="config.name === 'qh_curve'">
-          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop"
-            :fan2-prop="config.config.fan2Prop" />
+          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
         </template>
         <template v-if="config.name === 'ai_chat'">
           <AIChat class="content__module" />
@@ -72,371 +82,369 @@
           <DeviceAlarm class="content__module" :devicedata="config.data" />
         </template>
         <template v-if="config.name === 'measure_detail'">
-          <MeasureDetail class="content__module" :show-title="false" :composite-data="config.data"
-            :topconfig="config.config.topconfig" :btnconfig="config.config.btnconfig" />
+          <MeasureDetail
+            class="content__module"
+            :show-title="false"
+            :composite-data="config.data"
+            :topconfig="config.config.topconfig"
+            :btnconfig="config.config.btnconfig"
+          />
         </template>
         <!-- lxh -->
         <template v-if="config.name === 'dz_chart'">
-          <DzChart :echartOption="config.config.echartOption" :echartData="config.data"></DzChart>
+          <DzChart :echartOption="config.config.echartOption" :echartData="config.data" />
         </template>
         <template v-if="config.name === 'dz_list'">
-          <DzList :listOption="config.config.listOption" :listData="config.data"></DzList>
+          <DzList :listOption="config.config.listOption" :listData="config.data" />
         </template>
         <template v-if="config.name === 'dz_card'">
-          <DzCard :titleLeft="config.config.leftTitle" :titleRight="config.config.rightTitle" :paramData="config.data"></DzCard>
+          <DzCard :titleLeft="config.config.leftTitle" :titleRight="config.config.rightTitle" :paramData="config.data" />
         </template>
         <template v-if="config.name === 'dz_dust'">
-          <DzDust :echartOption="config.config" :paramData="config.data"></DzDust>
+          <DzDust :echartOption="config.config" :paramData="config.data" />
         </template>
         <template v-if="config.name === 'dz_gas'">
-          <DzGas :type="config.config.type" :titleData="config.config.titleData" :gasData="config.data"></DzGas>
+          <DzGas :type="config.config.type" :titleData="config.config.titleData" :gasData="config.data" />
         </template>
-      
-
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue';
-import {
-  CommonItem,
-  Config,
-} from '../../../../deviceManager/configurationTable/types';
-import MiniBoard from './MiniBoard-green.vue';
-import ComplexList from './ComplexList-green.vue';
-import CustomTable from './CustomTable-green.vue';
-import CustomList from './CustomList-green.vue';
-import CustomGallery from './CustomGallery-green.vue';
-import DzChart from './dz-chart.vue'
-import DzList from './dz-list.vue'
-import DzCard from './dz-card.vue'
-import DzDust from './dz-dust.vue'
-import DzGas from './dz-gas.vue'
-import DzRisk from './dz-risk.vue'
-import TimelineList from '../../components/detail/TimelineList.vue';
-import TimelineListNew from '../../components/detail/TimelineListNew.vue';
-
-
-import GalleryList from '../../components/detail/GalleryList.vue';
-import CustomChart from '../../components/detail/CustomChart.vue';
-import { clone } from 'lodash-es';
-import { getData, getFormattedText } from '../../hooks/helper';
-import BlastDelta from '../../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-import QHCurve from '../../components/preset/QHCurve.vue';
-import MeasureDetail from '../../components/preset/MeasureDetail.vue';
-import CustomTabs from '../../components/preset/CustomTabs.vue';
-import AIChat from '/@/components/AIChat/MiniChat.vue';
-import DeviceAlarm from '../../components/preset/DeviceAlarm.vue';
-import { config } from 'dotenv';
-
-
-const props = defineProps<{
-  data: any;
-  moduleData: Config['moduleData'];
-}>();
-
-const { background, layout } = props.moduleData;
-
-// 获取当原始配置带 items 项时的最终 items 配置
-function getItems(raw, items: CommonItem[]) {
-  return items.map((i) => {
-    return {
-      ...i,
-      label: getFormattedText(raw, i.label, i.trans),
-      value: getFormattedText(raw, i.value, i.trans),
-    };
-  });
-}
-
-// 获取当 List 组件配置带 items 项时的最终 items 配置
-function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-  if (mapFromData && Array.isArray(raw)) {
-    return raw.map((data) => {
-      const item = items[0];
+  import { computed } from 'vue';
+  import { CommonItem, Config } from '../../../../deviceManager/configurationTable/types';
+  import MiniBoard from './MiniBoard-green.vue';
+  import ComplexList from './ComplexList-green.vue';
+  import CustomTable from './CustomTable-green.vue';
+  import CustomList from './CustomList-green.vue';
+  import CustomGallery from './CustomGallery-green.vue';
+  import DzChart from './dz-chart.vue';
+  import DzList from './dz-list.vue';
+  import DzCard from './dz-card.vue';
+  import DzDust from './dz-dust.vue';
+  import DzGas from './dz-gas.vue';
+  import DzRisk from './dz-risk.vue';
+  import TimelineList from '../../components/detail/TimelineList.vue';
+  import TimelineListNew from '../../components/detail/TimelineListNew.vue';
+
+  import GalleryList from '../../components/detail/GalleryList.vue';
+  import CustomChart from '../../components/detail/CustomChart.vue';
+  import { clone } from 'lodash-es';
+  import { getData, getFormattedText } from '../../hooks/helper';
+  import BlastDelta from '../../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+  import QHCurve from '../../components/preset/QHCurve.vue';
+  import MeasureDetail from '../../components/preset/MeasureDetail.vue';
+  import CustomTabs from '../../components/preset/CustomTabs.vue';
+  import AIChat from '/@/components/AIChat/MiniChat.vue';
+  import DeviceAlarm from '../../components/preset/DeviceAlarm.vue';
+  import { config } from 'dotenv';
+
+  const props = defineProps<{
+    data: any;
+    moduleData: Config['moduleData'];
+  }>();
+
+  const { background, layout } = props.moduleData;
+
+  // 获取当原始配置带 items 项时的最终 items 配置
+  function getItems(raw, items: CommonItem[]) {
+    return items.map((i) => {
       return {
-        ...item,
-        label: getFormattedText(data, item.label, item.trans),
-        value: getFormattedText(data, item.value, item.trans),
+        ...i,
+        label: getFormattedText(raw, i.label, i.trans),
+        value: getFormattedText(raw, i.value, i.trans),
       };
     });
   }
-  return getItems(raw, items);
-}
-
-/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
-const layoutConfig = computed(() => {
-  const refData = props.data;
-  const board = clone(props.moduleData.board) || [];
-  const list = clone(props.moduleData.list) || [];
-  const gallery = clone(props.moduleData.gallery) || [];
-  const complex_list = clone(props.moduleData.complex_list) || [];
-  const gallery_list = clone(props.moduleData.gallery_list) || [];
-  const tabs = clone(props.moduleData.tabs) || [];
-  const chart = clone(props.moduleData.chart) || [];
-  const table = clone(props.moduleData.table) || [];
-  const preset = clone(props.moduleData.preset) || [];
-
-  return layout.items.reduce((arr: any[], item) => {
-    switch (item.name) {
-      case 'board': {
-        const cfg = board.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'list': {
-        const cfg = list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          overflow: true,
+  // 获取当 List 组件配置带 items 项时的最终 items 配置
+  function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+    if (mapFromData && Array.isArray(raw)) {
+      return raw.map((data) => {
+        const item = items[0];
+        return {
           ...item,
-          ...cfg,
-          items: getListItems(data, cfg.items, cfg.mapFromData),
-        });
-        break;
-      }
-      case 'gallery': {
-        const cfg = gallery.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          label: getFormattedText(data, item.label, item.trans),
+          value: getFormattedText(data, item.value, item.trans),
+        };
+      });
+    }
+    return getItems(raw, items);
+  }
 
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'complex_list': {
-        const cfg = complex_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+  /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
+  const layoutConfig = computed(() => {
+    const refData = props.data;
+    const board = clone(props.moduleData.board) || [];
+    const list = clone(props.moduleData.list) || [];
+    const gallery = clone(props.moduleData.gallery) || [];
+    const complex_list = clone(props.moduleData.complex_list) || [];
+    const gallery_list = clone(props.moduleData.gallery_list) || [];
+    const tabs = clone(props.moduleData.tabs) || [];
+    const chart = clone(props.moduleData.chart) || [];
+    const table = clone(props.moduleData.table) || [];
+    const preset = clone(props.moduleData.preset) || [];
+
+    return layout.items.reduce((arr: any[], item) => {
+      switch (item.name) {
+        case 'board': {
+          const cfg = board.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: (data || []).map((d) => {
-              return {
-                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                contents: firstListItem.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(d, e.label, e.trans),
-                    value: getFormattedText(d, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
-        } else {
+          break;
+        }
+        case 'list': {
+          const cfg = list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: cfg.items.map((i) => {
-              return {
-                title: getFormattedText(data, i.title, i.trans),
-                contents: i.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label, e.trans),
-                    value: getFormattedText(data, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getListItems(data, cfg.items, cfg.mapFromData),
           });
+          break;
         }
-        break;
-      }
-      case 'gallery_list': {
-        const cfg = gallery_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-          galleryItems: getItems(data, cfg.galleryItems),
-        });
-        break;
-      }
-      case 'tabs': {
-        const cfg = tabs.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+        case 'gallery': {
+          const cfg = gallery.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: (data || []).map((d) => {
-              return {
-                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                contents: firstListItem.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(d, e.label, e.trans),
-                    value: getFormattedText(d, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
-        } else {
+          break;
+        }
+        case 'complex_list': {
+          const cfg = complex_list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
+          if (cfg.mapFromData) {
+            const firstListItem = cfg.items[0];
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: (data || []).map((d) => {
+                return {
+                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                  contents: firstListItem.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(d, e.label, e.trans),
+                      value: getFormattedText(d, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          } else {
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: cfg.items.map((i) => {
+                return {
+                  title: getFormattedText(data, i.title, i.trans),
+                  contents: i.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(data, e.label, e.trans),
+                      value: getFormattedText(data, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          }
+          break;
+        }
+        case 'gallery_list': {
+          const cfg = gallery_list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: cfg.items.map((i) => {
-              return {
-                title: getFormattedText(data, i.title, i.trans),
-                contents: i.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(data, e.label, e.trans),
-                    value: getFormattedText(data, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
+            galleryItems: getItems(data, cfg.galleryItems),
           });
+          break;
         }
-        break;
-      }
-      case 'chart': {
-        const cfg = chart.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+        case 'tabs': {
+          const cfg = tabs.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
+          if (cfg.mapFromData) {
+            const firstListItem = cfg.items[0];
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: (data || []).map((d) => {
+                return {
+                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                  contents: firstListItem.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(d, e.label, e.trans),
+                      value: getFormattedText(d, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          } else {
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: cfg.items.map((i) => {
+                return {
+                  title: getFormattedText(data, i.title, i.trans),
+                  contents: i.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(data, e.label, e.trans),
+                      value: getFormattedText(data, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          }
+          break;
+        }
+        case 'chart': {
+          const cfg = chart.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...item,
-          config: cfg,
-          data,
-        });
-        break;
-      }
-      case 'table': {
-        const cfg = table.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            ...item,
+            config: cfg,
+            data,
+          });
+          break;
+        }
+        case 'table': {
+          const cfg = table.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...cfg,
-          ...item,
-          columns: cfg.columns,
-          data,
-        });
-        break;
-      }
-      default: {
-        const cfg = preset.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            ...cfg,
+            ...item,
+            columns: cfg.columns,
+            data,
+          });
+          break;
+        }
+        default: {
+          const cfg = preset.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...item,
-          data,
-          config: cfg,
-        });
-        break;
+          arr.push({
+            ...item,
+            data,
+            config: cfg,
+          });
+          break;
+        }
       }
-    }
-    return arr;
-  }, []);
-});
+      return arr;
+    }, []);
+  });
 </script>
 <style lang="less" scoped>
-@import '@/design/theme.less';
-
-.content {
-  height: calc(100% - 30px);
-  position: relative;
-  // z-index: -2;
-  display: flex;
-  flex-direction: column;
-}
+  @import '@/design/theme.less';
+
+  .content {
+    height: calc(100% - 30px);
+    position: relative;
+    // z-index: -2;
+    display: flex;
+    flex-direction: column;
+  }
 
-.content__background {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-}
+  .content__background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+  }
 
-.content__module {
-  // margin-top: 5px;
-  // margin-bottom: 5px;
-  width: 100%;
-  height: 100%;
-  color: #fff;
-  overflow-y: auto;
-}
+  .content__module {
+    // margin-top: 5px;
+    // margin-bottom: 5px;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    overflow-y: auto;
+  }
 
-// .content__module:first-of-type {
-//   margin-top: 0;
-// }
-// .content__module:last-of-type {
-//   margin-bottom: 0;
-// }
-::-webkit-scrollbar {
-  width: 5px !important;
-}
+  // .content__module:first-of-type {
+  //   margin-top: 0;
+  // }
+  // .content__module:last-of-type {
+  //   margin-bottom: 0;
+  // }
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
 
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
 
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  /* background-color: transparent; */
-  color: #fff;
-}
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    /* background-color: transparent; */
+    color: #fff;
+  }
 
-:deep(.zxm-select-arrow) {
-  color: #fff;
-}
+  :deep(.zxm-select-arrow) {
+    color: #fff;
+  }
 
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
 
-:deep(.zxm-select-selection-placeholder) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-selection-placeholder) {
+    color: #fff !important;
+  }
 
-:deep(.dialog-overlay) {
-  width: 100%;
-  height: 100%;
-  position: unset;
-  box-shadow: unset;
-}
+  :deep(.dialog-overlay) {
+    width: 100%;
+    height: 100%;
+    position: unset;
+    box-shadow: unset;
+  }
 
-::-webkit-scrollbar {
-  width: 5px !important;
-}
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
 
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
 </style>

src/views/vent/home/configurable/green/components/dz-chart.vue

@@ -1,302 +1,302 @@
 <template>
-    <div class="dz_chart">
-        <div ref="chartRef" class="chartRef"></div>
-    </div>
+  <div class="dz_chart">
+    <div ref="chartRef" class="chartRef"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted, nextTick } from 'vue'
-import * as echarts from 'echarts';
-import warnLevel1 from '@/assets/images/home-green/300.png'
-import warnLevel2 from '@/assets/images/home-green/400.png'
-import warnLevel3 from '@/assets/images/home-green/500.png'
-import warnLevel4 from '@/assets/images/home-green/600.png'
-import warnLevel5 from '@/assets/images/home-green/700.png'
+  import { ref, reactive, watch, onMounted, nextTick } from 'vue';
+  import * as echarts from 'echarts';
+  import warnLevel1 from '@/assets/images/home-green/300.png';
+  import warnLevel2 from '@/assets/images/home-green/400.png';
+  import warnLevel3 from '@/assets/images/home-green/500.png';
+  import warnLevel4 from '@/assets/images/home-green/600.png';
+  import warnLevel5 from '@/assets/images/home-green/700.png';
 
-let props = defineProps({
+  let props = defineProps({
     echartOption: {
-        type: Object,
-        default: () => {
-            return {}
-        }
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
     echartData: {
-        type: Array,
-        default: () => {
-            return []
-        }
-    }
-})
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  });
 
-//获取dom元素节点
-let chartRef = ref<any>();
-// 类别
-let category = ref<any[]>([])
-let echartY=ref<any[]>([])
-function getOption() {
+  //获取dom元素节点
+  let chartRef = ref<any>();
+  // 类别
+  let category = ref<any[]>([]);
+  let echartY = ref<any[]>([]);
+  function getOption() {
     let myChart = echarts.init(chartRef.value);
     let option = {
-        xAxis: {
-            max: 10,
-            splitLine: {
-                show: false
-            },
-            axisLine: {
-                show: false
-            },
-            axisLabel: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
+      xAxis: {
+        max: 10,
+        splitLine: {
+          show: false,
         },
-        grid: {
-            left: 10,
-            top: 10, // 设置条形图的边距
-            right: 10,
-            bottom: 0
+        axisLine: {
+          show: false,
         },
-        yAxis: [{
-            type: "category",
-            inverse: false,
-            data: category.value,
-            axisLine: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
-            axisLabel: {
-                show: false
+        axisLabel: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      grid: {
+        left: 10,
+        top: 10, // 设置条形图的边距
+        right: 10,
+        bottom: 0,
+      },
+      yAxis: [
+        {
+          type: 'category',
+          inverse: false,
+          data: category.value,
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          // 内
+          type: 'bar',
+          barWidth: 18,
+          silent: true,
+          itemStyle: {
+            normal: {
+              color: function (param) {
+                const colors = ['#ff0000', '#ff7700', '#d8b66f', '#dbbf2e', '#61b4c5'];
+                return colors[param.dataIndex % colors.length];
+              },
             },
-        }],
-        series: [
-            {
-                // 内
-                type: "bar",
-                barWidth: 18,
-                silent: true,
-                itemStyle: {
-                    normal: {
-                        color: function (param) {
-                            const colors = ['#ff0000', '#ff7700', '#d8b66f', '#dbbf2e', '#61b4c5',];
-                            return colors[param.dataIndex % colors.length];
-                        }
-                    }
+          },
+          label: {
+            normal: {
+              formatter: (params) => {
+                let text;
+                if (params.dataIndex == 0) {
+                  text = `{warnLevel5|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                } else if (params.dataIndex == 1) {
+                  text = `{warnLevel4|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                } else if (params.dataIndex == 2) {
+                  text = `{warnLevel3|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                } else if (params.dataIndex == 3) {
+                  text = `{warnLevel2|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                } else if (params.dataIndex == 4) {
+                  text = `{warnLevel1|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                }
+                return text;
+              },
+              textStyle: {
+                color: '#fff',
+                fontSize: 12,
+              },
+              position: [0, -22],
+              show: true,
+              rich: {
+                //富文本
+                warnLevel1: {
+                  backgroundColor: {
+                    image: warnLevel1,
+                  },
+                  height: 16,
+                  width: 16,
                 },
-                label: {
-                    normal: {
-                        formatter: (params) => {
-                            let text;
-                            if (params.dataIndex == 0) {
-                                text = `{warnLevel5|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
-                            } else if (params.dataIndex == 1) {
-                                text = `{warnLevel4|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
-                            } else if (params.dataIndex == 2) {
-                                text = `{warnLevel3|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
-                            } else if (params.dataIndex == 3) {
-                                text = `{warnLevel2|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
-                            } else if (params.dataIndex == 4) {
-                                text = `{warnLevel1|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
-                            }
-                            return text;
-                        },
-                        textStyle: {
-                            color: "#fff",
-                            fontSize: 12
-                        },
-                        position: [0, -22],
-                        show: true,
-                        rich: { //富文本
-                            warnLevel1: {
-                                backgroundColor: {
-                                    image: warnLevel1,
-                                },
-                                height: 16,
-                                width: 16,
-                            },
-                            warnLevel2: {
-                                backgroundColor: { //这里可以添加你想自定义的图片
-                                    image: warnLevel2,
-                                },
-                                height: 16,
-                                width: 16,
-                            },
-                            warnLevel3: {
-                                backgroundColor: {
-                                    image: warnLevel3,
-                                },
-                                height: 16,
-                                width: 16,
-                            },
-                            warnLevel4: {
-                                backgroundColor: { //这里可以添加你想自定义的图片
-                                    image: warnLevel4,
-                                },
-                                height: 16,
-                                width: 16,
-                            },
-                            warnLevel5: {
-                                backgroundColor: { //这里可以添加你想自定义的图片
-                                    image: warnLevel5,
-                                },
-                                height: 16,
-                                width: 16,
-                            },
-
-                        },
-
-                    }
+                warnLevel2: {
+                  backgroundColor: {
+                    //这里可以添加你想自定义的图片
+                    image: warnLevel2,
+                  },
+                  height: 16,
+                  width: 16,
                 },
-                data: category.value,
-                z: 1,
-                animationEasing: "elasticOut"
-            },
-
-            {
-                // 分隔
-                type: "pictorialBar",
-                itemStyle: {
-                    normal: {
-                        color: "rgba(28, 48, 52)"
-                    }
+                warnLevel3: {
+                  backgroundColor: {
+                    image: warnLevel3,
+                  },
+                  height: 16,
+                  width: 16,
                 },
-                symbolRepeat: "fixed",
-                symbolMargin: 3,
-                symbol: "rect",
-                symbolClip: true,
-                symbolSize: [10, 24],
-                symbolPosition: "start",
-                symbolOffset: [1, -4],
-                symbolBoundingData: 10,
-                data: [10, 10, 10, 10, 10],
-                z: 2,
-                animationEasing: "elasticOut",
-
-
-            },
-            {
-                // label
-                type: "pictorialBar",
-                symbolBoundingData: 10,
-                itemStyle: {
-                    normal: {
-                        color: "none"
-                    }
+                warnLevel4: {
+                  backgroundColor: {
+                    //这里可以添加你想自定义的图片
+                    image: warnLevel4,
+                  },
+                  height: 16,
+                  width: 16,
                 },
-                label: {
-                    normal: {
-                        formatter: (params) => {
-                            let text;
-                            if (params.dataIndex == 0) {
-                                text = '{a| ' + params.data + '个}';
-                            } else if (params.dataIndex == 1) {
-                                text = '{b| ' + params.data + '个}';
-                            } else if (params.dataIndex == 2) {
-                                text = '{c| ' + params.data + '个}';
-                            } else if (params.dataIndex == 3) {
-                                text = '{d| ' + params.data + '个}';
-                            } else if (params.dataIndex == 4) {
-                                text = '{e| ' + params.data + '个}';
-                            } else {
-                                text = '{f| ' + params.data + '个}';
-                            }
-
-                            return text;
-                        },
-                        rich: {
-                            a: {
-                                color: "#ff0000"
-                            },
-                            b: {
-                                color: "#ff7700"
-                            },
-                            c: {
-                                color: "#d8b66f"
-                            },
-                            d: {
-                                color: "#dbbf2e"
-                            },
-                            e: {
-                                color: "#61b4c5"
-                            },
-                            f: {
-                                color: "#fff"
-                            },
-                        },
-                        position: [350, -12],
-                        show: true
-                    }
+                warnLevel5: {
+                  backgroundColor: {
+                    //这里可以添加你想自定义的图片
+                    image: warnLevel5,
+                  },
+                  height: 16,
+                  width: 16,
                 },
-                data: echartY.value,
-                z: 0,
-
+              },
             },
+          },
+          data: category.value,
+          z: 1,
+          animationEasing: 'elasticOut',
+        },
 
-            {
-                name: "外框",
-                type: "bar",
-                barGap: "-130%", // 设置外框粗细
-                data: [10, 10, 10, 10, 10],
-
-                barWidth: 29,
-                itemStyle: {
-                    normal: {
-                        barBorderRadius: [0, 0, 0, 0],
-                        color: "transparent", // 填充色
-                        barBorderColor: "#3ecca7", // 边框色
-                        barBorderWidth: 1, // 边框宽度
+        {
+          // 分隔
+          type: 'pictorialBar',
+          itemStyle: {
+            normal: {
+              color: 'rgba(28, 48, 52)',
+            },
+          },
+          symbolRepeat: 'fixed',
+          symbolMargin: 3,
+          symbol: 'rect',
+          symbolClip: true,
+          symbolSize: [10, 24],
+          symbolPosition: 'start',
+          symbolOffset: [1, -4],
+          symbolBoundingData: 10,
+          data: [10, 10, 10, 10, 10],
+          z: 2,
+          animationEasing: 'elasticOut',
+        },
+        {
+          // label
+          type: 'pictorialBar',
+          symbolBoundingData: 10,
+          itemStyle: {
+            normal: {
+              color: 'none',
+            },
+          },
+          label: {
+            normal: {
+              formatter: (params) => {
+                let text;
+                if (params.dataIndex == 0) {
+                  text = '{a| ' + params.data + '个}';
+                } else if (params.dataIndex == 1) {
+                  text = '{b| ' + params.data + '个}';
+                } else if (params.dataIndex == 2) {
+                  text = '{c| ' + params.data + '个}';
+                } else if (params.dataIndex == 3) {
+                  text = '{d| ' + params.data + '个}';
+                } else if (params.dataIndex == 4) {
+                  text = '{e| ' + params.data + '个}';
+                } else {
+                  text = '{f| ' + params.data + '个}';
+                }
 
-                    }
+                return text;
+              },
+              rich: {
+                a: {
+                  color: '#ff0000',
+                },
+                b: {
+                  color: '#ff7700',
+                },
+                c: {
+                  color: '#d8b66f',
+                },
+                d: {
+                  color: '#dbbf2e',
                 },
+                e: {
+                  color: '#61b4c5',
+                },
+                f: {
+                  color: '#fff',
+                },
+              },
+              position: [350, -12],
+              show: true,
+            },
+          },
+          data: echartY.value,
+          z: 0,
+        },
+
+        {
+          name: '外框',
+          type: 'bar',
+          barGap: '-130%', // 设置外框粗细
+          data: [10, 10, 10, 10, 10],
 
-                z: 2
+          barWidth: 29,
+          itemStyle: {
+            normal: {
+              barBorderRadius: [0, 0, 0, 0],
+              color: 'transparent', // 填充色
+              barBorderColor: '#3ecca7', // 边框色
+              barBorderWidth: 1, // 边框宽度
             },
-            {
-                type: 'scatter',
-                name: '条形',
-                symbol: 'roundRect',
-                symbolSize: [6, 14],
-                symbolOffset: [3, -3],
-                symbolKeepAspect: true,
-                itemStyle: {
-                    normal: {
-                        color: "#3ecca7"
-                    }
-                },
-                data: [10, 10, 10, 10, 10],
-            }
+          },
 
-        ]
-    }
+          z: 2,
+        },
+        {
+          type: 'scatter',
+          name: '条形',
+          symbol: 'roundRect',
+          symbolSize: [6, 14],
+          symbolOffset: [3, -3],
+          symbolKeepAspect: true,
+          itemStyle: {
+            normal: {
+              color: '#3ecca7',
+            },
+          },
+          data: [10, 10, 10, 10, 10],
+        },
+      ],
+    };
     myChart.setOption(option);
     window.onresize = function () {
-        myChart.resize();
+      myChart.resize();
     };
-
-}
-
-watch(() => props.echartData, (newV, oldV) => {
-  if(newV.length){
-    category.value=newV
-    echartY.value=newV.map((el:any)=>el.value)
-    getOption()
   }
-}, { immediate: true,  })
 
+  watch(
+    () => props.echartData,
+    (newV, oldV) => {
+      if (newV.length) {
+        category.value = newV;
+        echartY.value = newV.map((el: any) => el.value);
+        getOption();
+      }
+    },
+    { immediate: true }
+  );
 </script>
 
 <style lang="less" scoped>
-.dz_chart {
+  .dz_chart {
     position: relative;
     padding-top: 10px;
     height: 100%;
 
     .chartRef {
-        width: 100%;
-        height: 100%;
+      width: 100%;
+      height: 100%;
     }
-
-}
-</style>
+  }
+</style>

src/views/vent/home/configurable/hooks/helper.ts

@@ -40,7 +40,7 @@ export function getRawProp(formatter: string): string {
 // 获取模块所依赖的数据的方法
 export function getData(raw, readFrom, parser?) {
   const result = readFrom ? get(raw, readFrom) : raw;
-  console.log()
+  console.log();
   if (!result) return result;
   switch (parser) {
     case 'json':

src/views/vent/home/configurable/hooks/useInit.ts

@@ -222,16 +222,16 @@ export function useInitConfigs() {
  */
 export function useInitModule(deviceType: Config['deviceType'], moduleData: Config['moduleData']) {
   const { header, mock } = moduleData;
-  const devices = ref<Record<string, any>[]>([]);
+  const devices = ref<Record<string, any>[] | Record<string, any>>();
   const options = ref<{ label: string; value: string }[]>([]);
   const selectedDeviceID = ref<string>('');
 
   const selectedDevice = computed(() => {
-    return (
-      devices.value.find((e) => {
-        return e.id === selectedDeviceID.value;
-      }) || {}
-    );
+    return Array.isArray(devices.value)
+      ? devices.value.find((e) => {
+          return e.id === selectedDeviceID.value;
+        }) || {}
+      : devices.value;
   });
   const selectedDeviceLabel = computed(() => {
     const res = options.value.find((e) => {
@@ -247,19 +247,25 @@ export function useInitModule(deviceType: Config['deviceType'], moduleData: Conf
     const result = mock || data;
     if (header.show && header.selector.show) {
       // 如果配置里指明需要 header，检验后初始化设备信息
-      const records: Record<string, any>[] = getData(get(result, deviceType, []), header.readFrom) || [];
-      devices.value = records.map((e, i) => {
-        return {
-          id: i,
-          ...e,
-        };
-      });
-      options.value = devices.value.map((e) => {
-        return {
-          label: getFormattedText(e, header.selector.value, header.selector.trans),
-          value: e.id,
-        };
-      });
+      const records: Record<string, any>[] | Record<string, any> = getData(get(result, deviceType, []), header.readFrom) || [];
+      debugger;
+
+      if (Array.isArray(devices.value)) {
+        devices.value = records.map((e, i) => {
+          return {
+            id: i,
+            ...e,
+          };
+        });
+        options.value = devices.value.map((e) => {
+          return {
+            label: getFormattedText(e, header.selector.value, header.selector.trans),
+            value: e.id,
+          };
+        });
+      } else {
+        devices.value = records;
+      }
     } else {
       // 没有的话按默认的，将返回结果直接作为一整个设备信息供模块使用
       const record = {

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHome2.vue

@@ -15,587 +15,587 @@
   ></a-spin>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, defineProps } from 'vue';
-import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
-import { list, getO2PressData } from '../balancePress.api';
-import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
-import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
-import { useGlobSetting } from '/@/hooks/setting';
-import ventBox1 from '/@/components/vent/ventBox1.vue';
-import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
-import { PressO2Option, mockData1 } from '../balancePressO2.data';
-// import { Config } from '../../../deviceManager/configurationTable/types';
+  import { ref, onMounted, onUnmounted, defineProps } from 'vue';
+  import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
+  import { list, getO2PressData } from '../balancePress.api';
+  import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
+  import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
+  import { PressO2Option, mockData1 } from '../balancePressO2.data';
+  // import { Config } from '../../../deviceManager/configurationTable/types';
 
-const props = defineProps({
-  deviceId: {
-    type: String,
-    require: true,
-  },
-});
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+  });
 
-const { sysOrgCode } = useGlobSetting();
+  const { sysOrgCode } = useGlobSetting();
 
-const loading = ref(false);
+  const loading = ref(false);
 
-// 监测数据
-const selectData = ref();
-const mockData = ref<{ chartData: { dateTime: string; o2Val: string; pressureVal: string }[] }>({
-  chartData: [],
-});
-const O2PressDataFetched = ref(false);
-const modelsensorO2Data = ref<any[]>([]);
+  // 监测数据
+  const selectData = ref();
+  const mockData = ref<{ chartData: { dateTime: string; o2Val: string; pressureVal: string }[] }>({
+    chartData: [],
+  });
+  const O2PressDataFetched = ref(false);
+  const modelsensorO2Data = ref<any[]>([]);
 
-// https获取监测数据
-let timer: any = null;
-function getMonitor(flag?) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(
-      async () => {
-        if (props.deviceId) {
-          const data = await getDataSource(props.deviceId);
-          // Object.assign(selectData, data);
-          updateText(selectData);
-          selectData.value = data;
-        }
-        if (timer) {
-          timer = null;
-        }
-        await getMonitor();
-        loading.value = false;
-      },
-      flag ? 0 : 1000
-    );
+  // https获取监测数据
+  let timer: any = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource(props.deviceId);
+            // Object.assign(selectData, data);
+            updateText(selectData);
+            selectData.value = data;
+          }
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
   }
-}
 
-async function getDataSource(systemID) {
-  const res = await list({ devicetype: 'sys', systemID });
-  const result = Array.from(res.msgTxt).reduce(
-    (obj: any, e: any) => {
-      // if (true) {
-      modelsensorO2Data.value = [];
-      if (sysOrgCode === 'sdmtjtswmk') {
-        if (e.type.startsWith('fanlocal')) {
-          obj.fanlocal.datalist.push(...e.datalist);
-        }
-        if (e.type.startsWith('safetymonitor')) {
-          e.datalist.forEach((ele) => {
-            if (ele.strinstallpos.includes('风门')) {
-              obj.gate.datalist.push(ele);
-            } else if (ele.strinstallpos.includes('风窗')) {
-              obj.window.datalist.push(ele);
-            } else if (ele.strinstallpos.includes('工作面')) {
-              obj.work_surface.datalist.push(ele);
-            } else {
-              obj.others.datalist.push(ele);
-            }
-          });
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: 'sys', systemID });
+    const result = Array.from(res.msgTxt).reduce(
+      (obj: any, e: any) => {
+        // if (true) {
+        modelsensorO2Data.value = [];
+        if (sysOrgCode === 'sdmtjtswmk') {
+          if (e.type.startsWith('fanlocal')) {
+            obj.fanlocal.datalist.push(...e.datalist);
+          }
+          if (e.type.startsWith('safetymonitor')) {
+            e.datalist.forEach((ele) => {
+              if (ele.strinstallpos.includes('风门')) {
+                obj.gate.datalist.push(ele);
+              } else if (ele.strinstallpos.includes('风窗')) {
+                obj.window.datalist.push(ele);
+              } else if (ele.strinstallpos.includes('工作面')) {
+                obj.work_surface.datalist.push(ele);
+              } else {
+                obj.others.datalist.push(ele);
+              }
+            });
+          }
+          if (e.type.startsWith('avgpressure_lowoxygen')) {
+            e.datalist.forEach((ele) => {
+              ele.strinstallpos = ele.strinstallpos.replaceAll(' ', '');
+              ele.strname = ele.strname.replaceAll(' ', '');
+            });
+          }
         }
-        if (e.type.startsWith('avgpressure_lowoxygen')) {
-          e.datalist.forEach((ele) => {
-            ele.strinstallpos = ele.strinstallpos.replaceAll(' ', '');
-            ele.strname = ele.strname.replaceAll(' ', '');
-          });
-        }
-      }
-      if (e.type.includes('modelsensor_o2')) {
-        modelsensorO2Data.value.push(...e.datalist);
-        console.log(modelsensorO2Data.value, '氧气数据');
-        if (!O2PressDataFetched.value) {
-          O2PressDataFetched.value = true;
-          getO2Press(modelsensorO2Data.value);
+        if (e.type.includes('modelsensor_o2')) {
+          modelsensorO2Data.value.push(...e.datalist);
+          console.log(modelsensorO2Data.value, '氧气数据');
+          if (!O2PressDataFetched.value) {
+            O2PressDataFetched.value = true;
+            getO2Press(modelsensorO2Data.value);
+          }
         }
+        obj[e.type] = e;
+        return obj;
+      },
+      {
+        /** 用于归类fanlocal */
+        fanlocal: { datalist: [] },
+        /** 用于归类gate */
+        gate: { datalist: [] },
+        /** 用于归类window */
+        window: { datalist: [] },
+        /** 用于归类work_surface */
+        work_surface: { datalist: [] },
+        others: { datalist: [] },
       }
-      obj[e.type] = e;
-      return obj;
-    },
-    {
-      /** 用于归类fanlocal */
-      fanlocal: { datalist: [] },
-      /** 用于归类gate */
-      gate: { datalist: [] },
-      /** 用于归类window */
-      window: { datalist: [] },
-      /** 用于归类work_surface */
-      work_surface: { datalist: [] },
-      others: { datalist: [] },
-    }
-  );
-  return result;
-}
+    );
+    return result;
+  }
 
-// const configs = ref<Config[]>([
-//   {
-//     deviceType: 'fanlocal',
-//     moduleName: '局部风机',
-//     pageType: 'balancePressHome',
-//     moduleData: {
-//       header: {
-//         show: true,
-//         readFrom: 'datalist',
-//         selector: {
-//           show: true,
-//           value: '${deviceID}',
-//           trans: {
-//             '1910221332833665026': '主机',
-//             '1910221283626090497': '备机',
-//           },
-//         },
-//         slot: {
-//           show: false,
-//           value: '',
-//         },
-//       },
-//       background: {
-//         show: false,
-//         type: 'image',
-//         link: '',
-//       },
-//       layout: {
-//         direction: 'column',
-//         items: [
-//           {
-//             name: 'tabs',
-//             basis: '100%',
-//           },
-//         ],
-//       },
-//       complex_list: [],
-//       chart: [],
-//       table: [],
-//       gallery: [],
-//       list: [],
-//       tabs: [
-//         {
-//           type: 'K',
-//           readFrom: '',
-//           mapFromData: false,
-//           items: [
-//             {
-//               title: '电机1',
-//               contents: [
-//                 {
-//                   label: '输出功率',
-//                   value: '${readData.Fan1StartStatus}',
-//                   color: 'blue',
-//                 },
-//                 {
-//                   label: '输出电压',
-//                   value: '${readData.Fan1StartStatus}',
-//                   color: 'blue',
-//                 },
-//               ],
-//             },
-//             {
-//               title: '电机2',
-//               contents: [
-//                 {
-//                   label: '输出功率',
-//                   value: '${readData.Fan2StartStatus}',
-//                   color: 'blue',
-//                 },
-//                 {
-//                   label: '输出电压',
-//                   value: '${readData.Fan2StartStatus}',
-//                   color: 'blue',
-//                 },
-//                 {
-//                   label: '输出电压',
-//                   value: '${readData.Fan2StartStatus}',
-//                   color: 'blue',
-//                 },
-//                 {
-//                   label: '输出电压',
-//                   value: '${readData.Fan2StartStatus}',
-//                   color: 'blue',
-//                 },
-//               ],
-//             },
-//           ],
-//         },
-//       ],
-//       gallery_list: [],
-//       preset: [],
-//       to: '',
-//     },
-//     showStyle: {
-//       size: 'width:470px;height:260px;',
-//       version: '原版',
-//       position: 'top:20px;left:0;',
-//     },
-//   },
-//   {
-//     deviceType: '',
-//     moduleName: '风门',
-//     pageType: 'balancePressHome',
-//     moduleData: {
-//       header: {
-//         show: false,
-//         readFrom: '',
-//         selector: {
-//           show: false,
-//           value: '',
-//         },
-//         slot: {
-//           show: false,
-//           value: '',
-//         },
-//       },
-//       background: {
-//         show: false,
-//         type: 'image',
-//         link: '',
-//       },
-//       layout: {
-//         direction: 'column',
-//         items: [
-//           {
-//             name: 'complex_list',
-//             basis: '100%',
-//           },
-//         ],
-//       },
-//       complex_list: [
-//         {
-//           type: 'G',
-//           readFrom: 'gate.datalist',
-//           mapFromData: true,
-//           items: [
-//             {
-//               title: '${deviceID}',
-//               trans: {
-//                 '1915631893453004802': '22107胶运顺槽入口自动风门2',
-//                 '1915631893478170626': '22107胶运顺槽入口自动风门1',
-//                 '1915631897043329025': '22107辅回撤通道自动风门1',
-//                 '1915631895088783362': '22107辅回撤通道自动风门2',
-//               },
-//               contents: [
-//                 {
-//                   label: '状态',
-//                   value: '${readData.V}',
-//                   color: 'blue',
-//                 },
-//               ],
-//             },
-//           ],
-//         },
-//       ],
-//       chart: [],
-//       table: [],
-//       gallery: [],
-//       list: [],
-//       gallery_list: [],
-//       preset: [],
-//       to: '',
-//     },
-//     showStyle: {
-//       size: 'width:470px;height:320px;',
-//       version: '原版',
-//       position: 'top:290px;left:0;',
-//     },
-//   },
-//   {
-//     deviceType: '',
-//     moduleName: '综采工作面推进度',
-//     pageType: 'balancePressHome',
-//     moduleData: {
-//       header: {
-//         show: false,
-//         readFrom: '',
-//         selector: {
-//           show: false,
-//           value: '',
-//         },
-//         slot: {
-//           show: false,
-//           value: '',
-//         },
-//       },
-//       background: {
-//         show: false,
-//         type: 'image',
-//         link: '',
-//       },
-//       layout: {
-//         direction: 'column',
-//         items: [
-//           {
-//             name: 'list',
-//             basis: '100%',
-//           },
-//         ],
-//       },
-//       complex_list: [],
-//       chart: [],
-//       table: [],
-//       gallery: [],
-//       list: [
-//         {
-//           type: 'K',
-//           readFrom: '',
-//           items: [
-//             {
-//               label: '进度',
-//               value: '50%',
-//               color: 'blue',
-//             },
-//             {
-//               label: '埋深',
-//               value: '2000km',
-//               color: 'blue',
-//             },
-//           ],
-//         },
-//       ],
-//       gallery_list: [],
-//       preset: [],
-//       to: '',
-//     },
-//     showStyle: {
-//       size: 'width:470px;height:130px;',
-//       version: '原版',
-//       position: 'top:620px;left:0;',
-//     },
-//   },
-//   {
-//     deviceType: '',
-//     moduleName: '重点监控传感器',
-//     pageType: 'balancePressHome',
-//     moduleData: {
-//       header: {
-//         show: false,
-//         readFrom: '',
-//         selector: {
-//           show: false,
-//           value: '',
-//         },
-//         slot: {
-//           show: false,
-//           value: '',
-//         },
-//       },
-//       background: {
-//         show: false,
-//         type: 'image',
-//         link: '',
-//       },
-//       layout: {
-//         direction: 'column',
-//         items: [
-//           {
-//             name: 'complex_list',
-//             basis: '100%',
-//           },
-//         ],
-//       },
-//       complex_list: [
-//         {
-//           type: 'G',
-//           readFrom: 'avgpressure_lowoxygen_normal.datalist',
-//           mapFromData: true,
-//           items: [
-//             {
-//               title: '${strinstallpos}',
-//               contents: [
-//                 {
-//                   label: '网络状态',
-//                   value: '${readData.netStatus_str}',
-//                   color: 'blue',
-//                 },
-//               ],
-//             },
-//           ],
-//         },
-//       ],
-//       chart: [],
-//       table: [],
-//       gallery: [],
-//       list: [],
-//       gallery_list: [],
-//       preset: [],
-//       to: '',
-//     },
-//     showStyle: {
-//       size: 'width:470px;height:230px;',
-//       version: '原版',
-//       position: 'top:20px;right:0;',
-//     },
-//   },
-//   {
-//     deviceType: '',
-//     moduleName: '辅助巡检传感器',
-//     pageType: 'balancePressHome',
-//     moduleData: {
-//       header: {
-//         show: false,
-//         readFrom: '',
-//         selector: {
-//           show: false,
-//           value: '',
-//         },
-//         slot: {
-//           show: false,
-//           value: '',
-//         },
-//       },
-//       background: {
-//         show: false,
-//         type: 'image',
-//         link: '',
-//       },
-//       layout: {
-//         direction: 'column',
-//         items: [
-//           {
-//             name: 'complex_list',
-//             basis: '100%',
-//           },
-//         ],
-//       },
-//       complex_list: [
-//         {
-//           type: 'G',
-//           readFrom: 'others.datalist',
-//           mapFromData: true,
-//           items: [
-//             {
-//               title: '${strinstallpos}',
-//               contents: [
-//                 {
-//                   label: '网络状态',
-//                   value: '${readData.netStatus_str}',
-//                   color: 'blue',
-//                 },
-//               ],
-//             },
-//           ],
-//         },
-//       ],
-//       chart: [],
-//       table: [],
-//       gallery: [],
-//       list: [],
-//       gallery_list: [],
-//       preset: [],
-//       to: '',
-//     },
-//     showStyle: {
-//       size: 'width:470px;height:230px;',
-//       version: '原版',
-//       position: 'top:260px;right:0;',
-//     },
-//   },
-//   {
-//     deviceType: '',
-//     moduleName: '地面大气压',
-//     pageType: 'balancePressHome',
-//     moduleData: {
-//       header: {
-//         show: false,
-//         readFrom: '',
-//         selector: {
-//           show: false,
-//           value: '',
-//         },
-//         slot: {
-//           show: false,
-//           value: '',
-//         },
-//       },
-//       background: {
-//         show: false,
-//         type: 'image',
-//         link: '',
-//       },
-//       layout: {
-//         direction: 'column',
-//         items: [
-//           {
-//             name: 'chart',
-//             basis: '100%',
-//           },
-//         ],
-//       },
-//       complex_list: [],
-//       chart: [
-//         {
-//           type: 'line_smooth',
-//           readFrom: 'surface_history.datalist',
-//           legend: { show: true },
-//           xAxis: [{ show: true }],
-//           yAxis: [
-//             { show: true, name: '压力1(Pa)', position: 'left' },
-//             { show: true, name: '压力2(Pa)', position: 'right' },
-//           ],
-//           series: [
-//             { readFrom: '', xprop: 'time', yprop: 'pressure1', label: '压力1' },
-//             // { readFrom: 'datalist', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
-//           ],
-//         },
-//       ],
-//       table: [],
-//       gallery: [],
-//       list: [],
-//       gallery_list: [],
-//       preset: [],
-//       to: '',
-//     },
-//     showStyle: {
-//       size: 'width:470px;height:250px;',
-//       version: '原版',
-//       position: 'top:500px;right:0;',
-//     },
-//   },
-// ]);
+  // const configs = ref<Config[]>([
+  //   {
+  //     deviceType: 'fanlocal',
+  //     moduleName: '局部风机',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: true,
+  //         readFrom: 'datalist',
+  //         selector: {
+  //           show: true,
+  //           value: '${deviceID}',
+  //           trans: {
+  //             '1910221332833665026': '主机',
+  //             '1910221283626090497': '备机',
+  //           },
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'tabs',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [],
+  //       tabs: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           mapFromData: false,
+  //           items: [
+  //             {
+  //               title: '电机1',
+  //               contents: [
+  //                 {
+  //                   label: '输出功率',
+  //                   value: '${readData.Fan1StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //                 {
+  //                   label: '输出电压',
+  //                   value: '${readData.Fan1StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //               ],
+  //             },
+  //             {
+  //               title: '电机2',
+  //               contents: [
+  //                 {
+  //                   label: '输出功率',
+  //                   value: '${readData.Fan2StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //                 {
+  //                   label: '输出电压',
+  //                   value: '${readData.Fan2StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //                 {
+  //                   label: '输出电压',
+  //                   value: '${readData.Fan2StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //                 {
+  //                   label: '输出电压',
+  //                   value: '${readData.Fan2StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //               ],
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:260px;',
+  //       version: '原版',
+  //       position: 'top:20px;left:0;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '',
+  //     moduleName: '风门',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'complex_list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [
+  //         {
+  //           type: 'G',
+  //           readFrom: 'gate.datalist',
+  //           mapFromData: true,
+  //           items: [
+  //             {
+  //               title: '${deviceID}',
+  //               trans: {
+  //                 '1915631893453004802': '22107胶运顺槽入口自动风门2',
+  //                 '1915631893478170626': '22107胶运顺槽入口自动风门1',
+  //                 '1915631897043329025': '22107辅回撤通道自动风门1',
+  //                 '1915631895088783362': '22107辅回撤通道自动风门2',
+  //               },
+  //               contents: [
+  //                 {
+  //                   label: '状态',
+  //                   value: '${readData.V}',
+  //                   color: 'blue',
+  //                 },
+  //               ],
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:320px;',
+  //       version: '原版',
+  //       position: 'top:290px;left:0;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '',
+  //     moduleName: '综采工作面推进度',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '进度',
+  //               value: '50%',
+  //               color: 'blue',
+  //             },
+  //             {
+  //               label: '埋深',
+  //               value: '2000km',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:130px;',
+  //       version: '原版',
+  //       position: 'top:620px;left:0;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '',
+  //     moduleName: '重点监控传感器',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'complex_list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [
+  //         {
+  //           type: 'G',
+  //           readFrom: 'avgpressure_lowoxygen_normal.datalist',
+  //           mapFromData: true,
+  //           items: [
+  //             {
+  //               title: '${strinstallpos}',
+  //               contents: [
+  //                 {
+  //                   label: '网络状态',
+  //                   value: '${readData.netStatus_str}',
+  //                   color: 'blue',
+  //                 },
+  //               ],
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:230px;',
+  //       version: '原版',
+  //       position: 'top:20px;right:0;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '',
+  //     moduleName: '辅助巡检传感器',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'complex_list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [
+  //         {
+  //           type: 'G',
+  //           readFrom: 'others.datalist',
+  //           mapFromData: true,
+  //           items: [
+  //             {
+  //               title: '${strinstallpos}',
+  //               contents: [
+  //                 {
+  //                   label: '网络状态',
+  //                   value: '${readData.netStatus_str}',
+  //                   color: 'blue',
+  //                 },
+  //               ],
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:230px;',
+  //       version: '原版',
+  //       position: 'top:260px;right:0;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '',
+  //     moduleName: '地面大气压',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'chart',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [
+  //         {
+  //           type: 'line_smooth',
+  //           readFrom: 'surface_history.datalist',
+  //           legend: { show: true },
+  //           xAxis: [{ show: true }],
+  //           yAxis: [
+  //             { show: true, name: '压力1(Pa)', position: 'left' },
+  //             { show: true, name: '压力2(Pa)', position: 'right' },
+  //           ],
+  //           series: [
+  //             { readFrom: '', xprop: 'time', yprop: 'pressure1', label: '压力1' },
+  //             // { readFrom: 'datalist', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
+  //           ],
+  //         },
+  //       ],
+  //       table: [],
+  //       gallery: [],
+  //       list: [],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:250px;',
+  //       version: '原版',
+  //       position: 'top:500px;right:0;',
+  //     },
+  //   },
+  // ]);
 
-async function getO2Press(params) {
-  console.log(params[0]?.deviceID, 'ID数据');
-  const deviceID = params[0]?.deviceID;
-  const param = {
-    deviceId: deviceID,
-  };
-  const res = await getO2PressData(param);
-  const chartData = [...res?.o2HistoryDataList, ...res?.o2List];
-  mockData.value = { chartData };
-  O2PressDataFetched.value = true;
-}
-const { configs, fetchConfigs } = useInitConfigs();
+  async function getO2Press(params) {
+    console.log(params[0]?.deviceID, 'ID数据');
+    const deviceID = params[0]?.deviceID;
+    const param = {
+      deviceId: deviceID,
+    };
+    const res = await getO2PressData(param);
+    const chartData = [...res?.o2HistoryDataList, ...res?.o2List];
+    mockData.value = { chartData };
+    O2PressDataFetched.value = true;
+  }
+  const { configs, fetchConfigs } = useInitConfigs();
 
-onMounted(async () => {
-  // getMonitor()
-  fetchConfigs('balancePressHome');
-  loading.value = true;
-  // mountedThree().then(async () => {
-  //   await setModelType('balancePressTun'); //balancePressBase
-  //   loading.value = false;
-  //   timer = null;
-  //   await getMonitor(true);
-  //   play('startSmoke', 'top', 30, 'open', 0);
-  // });
-  timer = null;
-  await getMonitor(true);
-  loading.value = false;
-});
+  onMounted(async () => {
+    // getMonitor()
+    fetchConfigs('balancePressHome');
+    loading.value = true;
+    // mountedThree().then(async () => {
+    //   await setModelType('balancePressTun'); //balancePressBase
+    //   loading.value = false;
+    //   timer = null;
+    //   await getMonitor(true);
+    //   play('startSmoke', 'top', 30, 'open', 0);
+    // });
+    timer = null;
+    await getMonitor(true);
+    loading.value = false;
+  });
 
-onUnmounted(() => {
-  destroy();
-  if (timer) {
-    clearTimeout(timer);
-  }
-});
+  onUnmounted(() => {
+    destroy();
+    if (timer) {
+      clearTimeout(timer);
+    }
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/vent/modal.less';
-@import '../../comment/less/workFace.less';
-@ventSpace: zxm;
-.monitor-container {
-  margin-top: 60px;
-}
-.lr {
-  width: 340px !important;
-}
-.fix-box {
-  margin-right: 19% !important;
-  margin-top: 1% !important;
-}
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
+  .monitor-container {
+    margin-top: 60px;
+  }
+  .lr {
+    width: 340px !important;
+  }
+  .fix-box {
+    margin-right: 19% !important;
+    margin-top: 1% !important;
+  }
 </style>

src/views/vent/monitorManager/mainFanMonitor/main.data.ts

@@ -1442,10 +1442,59 @@ export const initData = (deviceType?) => {
     return initDataHsw();
   } else if (sysOrgCode == 'nxnyjfmk') {
     return initDataJf(deviceType);
+  } else if (sysOrgCode == 'gsgszdek') {
+    return initDataZdek();
   } else {
     return initData1();
   }
 };
+
+// 准东二矿
+const initDataZdek = () => {
+  const data: any[] = [];
+  data.push({
+    angle: 30,
+    Hz: 30,
+    a: -0.2522,
+    b: 1.6432,
+    c: 3622,
+    min: 90,
+    max: 130,
+  });
+
+  data.push({
+    angle: 35,
+    Hz: 35,
+    a: -0.245,
+    b: 21.145,
+    c: 3198,
+    min: 130,
+    max: 160,
+  });
+
+  data.push({
+    angle: 40,
+    Hz: 40,
+    a: -0.0047,
+    b: -14.084,
+    c: 3912,
+    min: 100,
+    max: 190,
+  });
+
+  data.push({
+    angle: 45,
+    Hz: 45,
+    a: -0.1372,
+    b: 0.0584,
+    c: 7437,
+    min: 170,
+    max: 200,
+  });
+
+  return data;
+};
+
 // 柳塔
 const initDataLt = () => {
   const data: any[] = [];