[Feat 0000]火灾新首页开发

src/views/vent/dust/dustMonitorTable/index.vue

@@ -143,7 +143,7 @@ const computedColumns = computed(() => {
       return Swcolumns; // 上湾对应的列配置
     case 'sdmtjtdltmkhjtj':
       return Hjtcolumns; // 活鸡兔对应的列配置
-    case 'sdmtjtBdmk':
+    case 'sdmtjtbdmk':
       return Bdcolumns; // 保德对应的列配置
     case 'sdmtjtbltmk':
       return Bltcolumns; // 补连塔对应的列配置
@@ -177,7 +177,7 @@ const AllDataComputedColumns = computed(() => {
       return AllDataSwColumns; // 上湾对应的列配置
     case 'sdmtjtdltmkhjtj':
       return AllDataHjtColumns; // 活鸡兔对应的列配置
-    case 'sdmtjtBdmk':
+    case 'sdmtjtbdmk':
       return AllDataBdColumns; // 保德对应的列配置
     case 'sdmtjtbltmk':
       return AllDataBltColumns; // 补连塔对应的列配置
@@ -211,7 +211,7 @@ const DataComputedColumns = computed(() => {
       return dataSwColumns; // 上湾对应的列配置
     case 'sdmtjtdltmkhjtj':
       return dataHjtColumns; // 活鸡兔对应的列配置
-    case 'sdmtjtBdmk':
+    case 'sdmtjtbdmk':
       return dataBdColumns; // 保德对应的列配置
     case 'sdmtjtbltmk':
       return dataBltColumns; // 补连塔对应的列配置
@@ -445,7 +445,7 @@ function processTableData(data: any) {
         return SwMaxValues; // 上湾对应的列配置
       case 'sdmtjtdltmkhjtj':
         return HjtMaxValues; // 活鸡兔对应的列配置
-      case 'sdmtjtBdmk':
+      case 'sdmtjtbdmk':
         return BdMaxValues; // 保德对应的列配置
       case 'sdmtjtbltmk':
         return BltMaxValues; // 补连塔对应的列配置
@@ -639,7 +639,7 @@ function processTableData(data: any) {
         return overallSwMaxValues; // 上湾对应的列配置
       case 'sdmtjtdltmkhjtj':
         return overallHjtMaxValues; // 活鸡兔对应的列配置
-      case 'sdmtjtBdmk':
+      case 'sdmtjtbdmk':
         return overallBdMaxValues; // 保德对应的列配置
       case 'sdmtjtbltmk':
         return overallBltMaxValues; // 补连塔对应的列配置

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

@@ -21,36 +21,18 @@
         <div v-if="header.show && header.slot.show">
           {{ getFormattedText(selectedDevice, header.slot.value) }}
         </div>
-        <!-- 日期组件 -->
-        <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
-          <a-range-picker
-            size="small"
-            style="width: 140px"
-            :show-time="{ format: 'HH:mm' }"
-            format="YYYY-MM-DD HH:mm"
-            :placeholder="['开始时间', '结束时间']"
-            @change="onChange"
-            @ok="onOk"
-          />
-        </div> -->
-        <!-- 开关组件 -->
-        <!-- <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
-            <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
-            <a-switch v-model:checked="checked" />
-            <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
-          </div> -->
       </div>
     </div>
     <div class="dane-content">
       <slot>
-        <Content style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
+        <ContentNew style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
       </slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Content from './content.vue';
+import ContentNew from './content-New.vue';
 import { defineProps, defineEmits, computed, watch } from 'vue';
 import { useInitModule } from '../hooks/useInit';
 import { getFormattedText } from '../hooks/helper';

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

@@ -1,15 +1,16 @@
 <template>
-  <div class="dane-bd" :style="style">
-    <div v-if="moduleName" class="dane-title" :class="daneClass">
+  <div class="dane-bd" :style="style" :class="daneClass">
+    <div v-if="moduleName" class="dane-title">
       <div class="common-navL" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo"
         ><span class="title">{{ moduleName }}</span></div
       >
-
+    </div>
+    <div class="dane-content">
       <div class="common-navR">
         <!-- 下拉框 -->
         <div class="common-navR-select" v-if="header.show && header.selector.show">
           <a-select
-            style="width: 140px"
+            style="width: 350px; font-size: 16px"
             size="small"
             placeholder="请选择"
             v-model:value="selectedDeviceID"
@@ -21,36 +22,16 @@
         <div v-if="header.show && header.slot.show">
           {{ getFormattedText(selectedDevice, header.slot.value) }}
         </div>
-        <!-- 日期组件 -->
-        <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
-          <a-range-picker
-            size="small"
-            style="width: 140px"
-            :show-time="{ format: 'HH:mm' }"
-            format="YYYY-MM-DD HH:mm"
-            :placeholder="['开始时间', '结束时间']"
-            @change="onChange"
-            @ok="onOk"
-          />
-        </div> -->
-        <!-- 开关组件 -->
-        <!-- <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
-            <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
-            <a-switch v-model:checked="checked" />
-            <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
-          </div> -->
       </div>
-    </div>
-    <div class="dane-content">
       <slot>
-        <Content style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
+        <ContentFireNew style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
       </slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Content from './content.vue';
+import ContentFireNew from './content-FireNew.vue';
 import { defineProps, defineEmits, computed, watch } from 'vue';
 import { useInitModule } from '../hooks/useInit';
 import { getFormattedText } from '../hooks/helper';
@@ -83,37 +64,19 @@ const style = computed(() => {
 
 // 根据配置里的定位判断应该使用哪个module组件
 const daneClass = computed(() => {
-  const headerPosition = props.showStyle.headerPosition;
+  const position = props.showStyle.position;
   const size = props.showStyle.size;
   const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  // if (position.includes('bottom') || parseInt(width) > 800) {
-  //   return 'dane-w';
-  // }
-  // if (position.includes('left')) {
-  //   return 'dane-m';
-  // }
-  // if (position.includes('right')) {
-  //   return 'dane-m';
-  // }
-  // return 'dane-m';
-  if (headerPosition === 'leftTop') {
-    return 'left-1';
+  if (position.includes('bottom') || parseInt(width) > 800) {
+    return 'dane-w';
   }
-  if (headerPosition === 'leftCenter') {
-    return 'left-2';
+  if (position.includes('left')) {
+    return 'dane-m';
   }
-  if (headerPosition === 'leftBottom') {
-    return 'left-3';
-  }
-  if (headerPosition === 'rightTop') {
-    return 'right-1';
-  }
-  if (headerPosition === 'rightCenter') {
-    return 'right-1';
-  }
-  if (headerPosition === 'rightBottom') {
-    return 'right-3';
+  if (position.includes('right')) {
+    return 'dane-m';
   }
+  // return 'dane-m';
   return 'dane-m'; // 默认返回顶部模块
 });
 
@@ -152,50 +115,37 @@ watch(
 
 <style scoped lang="less">
 @import '/@/design/theme.less';
-
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
 @{theme-deepblue} {
   .dane-bd {
-    --image-Left1: url('@/assets/images/vent/homeNew/left1.png');
-    --image-Left2: url('@/assets/images/vent/homeNew/left2.png');
-    --image-Left3: url('@/assets/images/vent/homeNew/left3.png');
-    --image-Right1: url('@/assets/images/vent/homeNew/right1.png');
-    --image-Right2: url('@/assets/images/vent/homeNew/right2.png');
-    --image-Right3: url('@/assets/images/vent/homeNew/right3.png');
+    --image-Content: url('@/assets/images/fireNew/4-3.png');
+    --image-Select: url('@/assets/images/fireNew/5.png');
   }
 }
 
 .dane-bd {
-  --image-Left1: url('@/assets/images/vent/homeNew/left1.png');
-  --image-Left2: url('@/assets/images/vent/homeNew/left2.png');
-  --image-Left3: url('@/assets/images/vent/homeNew/left3.png');
-  --image-Right1: url('@/assets/images/vent/homeNew/right1.png');
-  --image-Right2: url('@/assets/images/vent/homeNew/right2.png');
-  --image-Right3: url('@/assets/images/vent/homeNew/right3.png');
+  --image-Select: url('@/assets/images/fireNew/5.png');
+  --image-Content: url('@/assets/images/fireNew/4-3.png');
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 2;
 
   .dane-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     width: 100%;
     height: 40px;
-    padding: 0 40px 15px 20px;
+    text-align: center;
+    padding-top: 9px;
 
     .common-navL {
-      display: flex;
       position: relative;
       align-items: center;
       color: #fff;
-      font-size: 14px;
-    }
-
-    .common-navR {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
+      font-size: 15px;
+      font-family: 'douyuFont';
     }
   }
 
@@ -203,30 +153,19 @@ watch(
     height: calc(100% - 38px);
     box-sizing: border-box;
     border-top: none;
+    .common-navR {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--image-Select) no-repeat;
+      background-size: 100% 100%;
+      width: 87%;
+      margin-left: 30px;
+    }
   }
 }
-.left-1 {
-  background: var(--image-Left1) no-repeat;
-  background-size: 100% 100%;
-}
-.left-2 {
-  background: var(--image-Left2) no-repeat;
-  background-size: 100% 100%;
-}
-.left-3 {
-  background: var(--image-Left3) no-repeat;
-  background-size: 100% 100%;
-}
-.right-1 {
-  background: var(--image-Right1) no-repeat;
-  background-size: 100% 100%;
-}
-.right-2 {
-  background: var(--image-Right2) no-repeat;
-  background-size: 100% 100%;
-}
-.right-3 {
-  background: var(--image-Right3) no-repeat;
+.dane-m {
+  background: var(--image-Content) no-repeat;
   background-size: 100% 100%;
 }
 :deep(.zxm-select-selector) {

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="dane-bd" :style="style">
-    <div class="dane-title" :class="daneClass">
+  <div class="dane-bd" :style="style" :class="daneClass">
+    <div class="dane-title">
       <div class="common-navL">
         <span :class="{ deactived: index === 1 }" @click="index = 0">
           {{ moduleNameA }}
@@ -15,7 +15,7 @@
         <!-- 下拉框 -->
         <div class="common-navR-select" v-if="index === 0 && headerA.show && headerA.selector.show">
           <a-select
-            style="width: 140px"
+            style="width: 160px"
             size="small"
             placeholder="请选择"
             v-model:value="selectedDeviceIDA"
@@ -26,7 +26,7 @@
         </div>
         <div class="common-navR-select" v-if="index === 1 && headerB.show && headerB.selector.show">
           <a-select
-            style="width: 140px"
+            style="width: 160px"
             size="small"
             placeholder="请选择"
             v-model:value="selectedDeviceIDB"
@@ -35,24 +35,6 @@
             @change="selectHandlerB"
           />
         </div>
-        <!-- 日期组件 -->
-        <!-- <div class="common-navR-date" v-if="header.show && header.showSlot">
-          <a-range-picker
-            size="small"
-            style="width: 140px"
-            :show-time="{ format: 'HH:mm' }"
-            format="YYYY-MM-DD HH:mm"
-            :placeholder="['开始时间', '结束时间']"
-            @change="onChange"
-            @ok="onOk"
-          />
-        </div> -->
-        <!-- 开关组件 -->
-        <!-- <div class="common-navR-switch" v-if="commonTitle == 'switchs'">
-            <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
-            <a-switch v-model:checked="checked" />
-            <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
-          </div> -->
       </div>
     </div>
     <div class="dane-content">
@@ -163,14 +145,18 @@ watch(
 <style scoped lang="less">
 @import '/@/design/theme.less';
 
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
 @{theme-deepblue} {
   .dane-bd {
-    --image-CenterBottom: url('@/assets/images/vent/homeNew/center-Bottom.png');
+    --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
   }
 }
 
 .dane-bd {
-  --image-CenterBottom: url('@/assets/images/vent/homeNew/center-Bottom.png');
+  --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
   position: absolute;
   width: 100%;
   height: 100%;
@@ -185,26 +171,29 @@ watch(
     justify-content: space-between;
     width: 100%;
     height: 34px;
-    padding: 0 40px 15px 20px;
+    padding: 20px 173px 15px 133px;
     .common-navL {
       display: flex;
       position: relative;
       align-items: center;
       color: #fff;
-      font-size: 14px;
+      font-size: 15px;
+      font-family: 'douyuFont';
 
       .common-navR {
         display: flex;
         align-items: center;
         justify-content: flex-end;
+        .common-navR-select {
+          background: url('@/assets/images/fireNew/4-1.png') no-repeat;
+          background-size: 100% 100%;
+        }
       }
     }
   }
   .dane-content {
     height: calc(100% - 34px);
     box-sizing: border-box;
-    background: url('@/assets/images/vent/homeNew/bottomBg.png') no-repeat;
-    background-size: 100% 100%;
     border-top: none;
   }
 }

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

@@ -0,0 +1,464 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 主体内容部分 -->
+  <div class="content">
+    <!-- 背景 -->
+    <img v-if="background.show && background.type === 'image'" class="content__background image__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
+    >
+      <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 ? 'auto' : 'none' }">
+        <!-- 告示板部分 -->
+        <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"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </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" />
+        </template>
+        <!-- 通常列表部分 -->
+        <template v-if="config.name === 'list'">
+          <template v-if="config.type === 'timeline'">
+            <TimelineList class="content__module" :list-config="config.items" />
+          </template>
+          <template v-else-if="config.type === 'timelineNew'">
+            <TimelineListNew class="content__module" :list-config="config.items" />
+          </template>
+          <template v-else>
+            <CustomList class="content__module" :type="config.type" :list-config="config.items" />
+          </template>
+        </template>
+        <template v-if="config.name === 'fireList'">
+          <CustomList class="content__module" :type="config.type" :list-config="config.items" />
+        </template>
+        <!-- 画廊部分 -->
+        <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>
+        <!-- 复杂列表部分 -->
+        <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" :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" />
+        </template>
+        <template v-if="config.name === 'blast_delta'">
+          <BlastDelta
+            v-if="config.pageType === 'New_fire'"
+            class="content__moduleFire"
+            :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }"
+          />
+          <BlastDelta v-else class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
+        </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" />
+        </template>
+        <template v-if="config.name === 'ai_chat'">
+          <AIChat class="content__module" />
+        </template>
+        <template v-if="config.name === 'device_alarm'">
+          <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"
+          />
+        </template>
+        <!-- <template v-if="config.key === 'fire_control'">
+        <FIreControl class="content__module" />
+      </template>
+      <template v-if="config.key === 'fire_warn'">
+        <FIreWarn class="content__module" />
+      </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-FireNew.vue';
+import TimelineList from './detail/TimelineList.vue';
+import TimelineListNew from './detail/TimelineListNew.vue';
+import CustomList from './detail/CustomList-fire.vue';
+import CustomGallery from './detail/CustomGallery.vue';
+import ComplexList from './detail/ComplexList-FireNew.vue';
+import GalleryList from './detail/GalleryList.vue';
+import CustomTable from './detail/CustomTable-fire.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 MiniBoardNew from './detail/MiniBoard-New.vue';
+// import FIreWarn from './preset/FIreWarn.vue';
+// import FIreControl from './preset/FIreControl.vue';
+
+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];
+      return {
+        ...item,
+        label: getFormattedText(data, item.label, item.trans),
+        value: getFormattedText(data, item.value, item.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,
+          ...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);
+
+        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);
+
+        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: 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];
+          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({
+          ...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;
+      }
+    }
+    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;
+}
+.content__background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+}
+.image__background {
+  width: 35%;
+  height: 61%;
+  left: 30%;
+}
+.content__module {
+  // margin-top: 5px;
+  // margin-bottom: 5px;
+  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__moduleFire {
+  width: 100%;
+  height: 100%;
+  margin-left: -24% !important;
+}
+.content__module_dust {
+  background: url('@/assets/images/vent/homeNew/bottomBg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+}
+// .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;
+}
+
+: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-selection-item) {
+  color: #fff !important;
+}
+:deep(.zxm-select-selection-placeholder) {
+  color: #fff !important;
+}
+:deep(.dialog-overlay) {
+  width: 100%;
+  height: 100%;
+  position: unset;
+  box-shadow: unset;
+}
+
+::-webkit-scrollbar {
+  width: 5px !important;
+}
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
+</style>

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

@@ -0,0 +1,498 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 主体内容部分 -->
+  <div class="content">
+    <!-- 背景 -->
+    <img v-if="background.show && background.type === 'image'" class="content__background image__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
+    >
+      <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 ? 'auto' : 'none' }">
+        <!-- 告示板部分 -->
+        <template v-if="config.name === 'board'">
+          <div
+            v-if="config.pageType == 'vent_New'"
+            style="padding-top: 11%"
+            class="content__module content__module1 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"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </div>
+          <div v-else-if="config.pageType === 'New_fire'" class="content__module flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoardNew
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </div>
+          <div v-else 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"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </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" />
+        </template>
+        <!-- 通常列表部分 -->
+        <template v-if="config.name === 'list'">
+          <template v-if="config.type === 'timeline'">
+            <TimelineList class="content__module" :list-config="config.items" />
+          </template>
+          <template v-else-if="config.type === 'timelineNew'">
+            <TimelineListNew class="content__module" :list-config="config.items" />
+          </template>
+          <template v-else>
+            <CustomList class="content__module" :type="config.type" :list-config="config.items" />
+          </template>
+        </template>
+        <template v-if="config.name === 'fireList'">
+          <CustomList class="content__module" :type="config.type" :list-config="config.items" />
+        </template>
+        <!-- 画廊部分 -->
+        <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>
+        <!-- 复杂列表部分 -->
+        <template v-if="config.name === 'complex_list'">
+          <ComplexListNew v-if="config.pageType === 'New_dust'" class="content__module" :type="config.type" :list-config="config.items" />
+          <ComplexList v-else class="content__module" :type="config.type" :list-config="config.items" />
+        </template>
+        <!-- 表格部分，这部分通常是占一整个模块的 -->
+        <template v-if="config.name === 'table'">
+          <CustomTableNew
+            v-if="config.pageType === 'New_dust' || config.pageType === 'New_fire'"
+            class="content__module1 text-center overflow-auto"
+            :type="config.type"
+            :columns="config.columns"
+            :data="config.data"
+          />
+          <CustomTable v-else 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" />
+        </template>
+        <template v-if="config.name === 'blast_delta'">
+          <BlastDelta
+            v-if="config.pageType === 'New_fire'"
+            class="content__moduleFire"
+            :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }"
+          />
+          <BlastDelta v-else class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
+        </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" />
+        </template>
+        <template v-if="config.name === 'ai_chat'">
+          <AIChat class="content__module" />
+        </template>
+        <template v-if="config.name === 'device_alarm'">
+          <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"
+          />
+        </template>
+        <!-- <template v-if="config.key === 'fire_control'">
+        <FIreControl class="content__module" />
+      </template>
+      <template v-if="config.key === 'fire_warn'">
+        <FIreWarn class="content__module" />
+      </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 ComplexListNew from './detail/ComplexList-New.vue';
+import GalleryList from './detail/GalleryList.vue';
+import CustomTable from './detail/CustomTable-New.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 MiniBoardNew from './detail/MiniBoard-New.vue';
+import CustomTableNew from './detail/CustomTable-New.vue';
+// import FIreWarn from './preset/FIreWarn.vue';
+// import FIreControl from './preset/FIreControl.vue';
+
+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];
+      return {
+        ...item,
+        label: getFormattedText(data, item.label, item.trans),
+        value: getFormattedText(data, item.value, item.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,
+          ...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);
+
+        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);
+
+        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: 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];
+          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({
+          ...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;
+      }
+    }
+    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;
+}
+.content__background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+}
+.image__background {
+  width: 35%;
+  height: 61%;
+  left: 30%;
+}
+.content__module {
+  // margin-top: 5px;
+  // margin-bottom: 5px;
+  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__moduleFire {
+  width: 100%;
+  height: 100%;
+  margin-left: -24% !important;
+}
+.content__module_dust {
+  background: url('@/assets/images/vent/homeNew/bottomBg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+}
+// .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;
+}
+
+: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-selection-item) {
+  color: #fff !important;
+}
+:deep(.zxm-select-selection-placeholder) {
+  color: #fff !important;
+}
+:deep(.dialog-overlay) {
+  width: 100%;
+  height: 100%;
+  position: unset;
+  box-shadow: unset;
+}
+
+::-webkit-scrollbar {
+  width: 5px !important;
+}
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
+</style>

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

@@ -35,6 +35,16 @@
               :layout="config.layout"
             />
           </div>
+          <div v-else-if="config.pageType == 'New_fire'" class="content__module flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoardNew
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </div>
           <div v-else class="content__module flex flex-justify-around flex-items-center flex-wrap">
             <MiniBoard
               v-for="item in config.items"
@@ -150,6 +160,7 @@ 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 MiniBoardNew from './detail/MiniBoard-New.vue';
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
 

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

@@ -0,0 +1,497 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
+  <div class="list flex items-center" :class="`list_${type}`">
+    <!-- 部分类型的列表需要加一张图片 -->
+    <div :class="`list__image_${type}`"></div>
+    <!-- 剩下的部分填充剩余宽度 -->
+    <div class="flex-grow h-full" :class="`list__wrapper_${type}`">
+      <div v-for="(item, i) in listConfig" :key="`vvhccdcl${i}`" :class="`list-item_${type}`">
+        <!-- 列表项前面的图标 -->
+        <div :class="`list-item__title_${type}`">{{ item.title }}</div>
+        <!-- 列表项的具体内容填充剩余宽度 -->
+        <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
+          <div class="list-item__label">{{ ctx.label }}</div>
+          <div class="list-item__info" :class="`list-item__info_${ctx.color}`">{{ ctx.info }}</div>
+          <div class="list-item__value" :class="`list-item__value_${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;
+      }[];
+    }[];
+    /** A B */
+    type: string;
+  }>(),
+  {
+    listConfig: () => [],
+    type: 'A',
+  }
+);
+
+//   defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+    @import '@/design/theme.less';
+    @import '@/design/theme.less';
+    /* Timeline 相关的样式 */
+
+    @{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');
+  }
+}
+
+.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_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;
+
+      .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
+        // 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;
+      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;
+      // font-size: 14px;
+      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 {
+        // 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: 99px;
+      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 {
+      background-image: var(--image-ListArea);
+      background-size: 100% auto;
+      background-position: center;
+      background-repeat: no-repeat;
+      position: relative;
+       height: 130px;
+      width: 179px;
+       text-align: center;
+       margin-left: 15px;
+       margin-right: 12px;
+       margin-top: 13px;
+    }
+    .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;
+    }
+  }
+  .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 {
+    // 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-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;
+      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-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_white {
+      color: white;
+    }
+    .gallery-item__value_lightblue {
+      color: @vent-configurable-home-light-border;
+    }
+</style>

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

@@ -0,0 +1,490 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
+  <div class="list flex items-center" :class="`list_${type}`">
+    <!-- 部分类型的列表需要加一张图片 -->
+    <div :class="`list__image_${type}`"></div>
+    <!-- 剩下的部分填充剩余宽度 -->
+    <div class="flex-grow h-full" :class="`list__wrapper_${type}`">
+      <div v-for="(item, i) in listConfig" :key="`vvhccdcl${i}`" :class="`list-item_${type}`">
+        <!-- 列表项前面的图标 -->
+        <div :class="`list-item__title_${type}`">{{ item.title }}</div>
+        <!-- 列表项的具体内容填充剩余宽度 -->
+        <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
+          <div class="list-item__label">{{ ctx.label }}</div>
+          <div class="list-item__info" :class="`list-item__info_${ctx.color}`">{{ ctx.info }}</div>
+          <div class="list-item__value" :class="`list-item__value_${ctx.color} list-item__value_${type}`">{{ ctx.value }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    listConfig: {
+      title: string;
+      contents: {
+        value: string;
+        color: string;
+        label: string;
+        info: string;
+      }[];
+    }[];
+    /** A B */
+    type: string;
+  }>(),
+  {
+    listConfig: () => [],
+    type: 'A',
+  }
+);
+
+//   defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+    @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/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-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;
+
+      .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
+        // 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;
+      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;
+      // font-size: 14px;
+      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 {
+        // 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: 99px;
+      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: 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__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 18px;
+      }
+    }
+
+  .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 {
+    // 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-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;
+      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-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_white {
+      color: white;
+    }
+    .gallery-item__value_lightblue {
+      color: @vent-configurable-home-light-border;
+    }
+</style>

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

@@ -0,0 +1,474 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
+  <div class="list flex items-center" :class="`list_${type}`">
+    <!-- 部分类型的列表需要加一张图片 -->
+    <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 :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>
+      </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']);
+</script>
+<style lang="less" scoped>
+@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_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/fireNew/9-1.png');
+    --image-list_bg_h1: url('/@/assets/images/fireNew/9-2.png');
+    --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.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_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/fireNew/9-1.png');
+  --image-list_bg_h1: url('/@/assets/images/fireNew/9-2.png');
+  --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
+  --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
+  --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
+  padding: 5px 20px;
+  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_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 {
+  margin-bottom: 20px;
+  background: none;
+}
+.list-item_H {
+  align-items: center;
+  text-align: center;
+  margin: 5px 10px;
+  &:nth-child(2n) {
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-image: var(--image-list_bg_h1);
+  }
+  &:nth-child(2n + 1) {
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-image: var(--image-list_bg_h);
+  }
+}
+.list-item__content_H {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  line-height: 68px;
+}
+.list-item__content_H > div {
+  flex-basis: 33%;
+}
+.list-item__content_H > .list-item__label {
+  flex-basis: 33%;
+  margin-left: 20px;
+}
+.list-item__content_H > .list-item__info {
+  flex-basis: 22%;
+}
+.list-item__content_H > .list-item__value {
+  flex-basis: 45%;
+}
+.list-item__value_H {
+  font-size: 16px;
+  font-weight: bold;
+  color: #bbffff;
+}
+.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;
+  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;
+  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_I {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.list-item__content_I > .list-item__label {
+  width: 60px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  font-size: 20px;
+  line-height: 63px;
+  color: #009bff;
+}
+.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__value {
+    flex-basis: unset;
+  }
+  .list-item__label {
+    flex-basis: unset;
+  }
+  .list-item__info {
+    display: none;
+  }
+}
+
+.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_white {
+  color: white;
+}
+.gallery-item__value_lightblue {
+  color: @vent-configurable-home-light-border;
+}
+</style>

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

@@ -285,7 +285,7 @@ withDefaults(
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  margin-left: 70px;
+  margin-left: 86px;
 }
 .list-item_fireList {
   width: 167px;

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

@@ -0,0 +1,153 @@
+<template>
+  <div class="table__content">
+    <div class="table__content_label" :class="`table__content_label_${type}`">
+      <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
+    </div>
+    <div class="table__content_list" :class="`table__content_list_${type}`">
+      <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
+        <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }" :class="`table__content__list_item_${type}`">
+          <slot :name="t.prop" :scope="item">
+            <span>{{ get(item, t.prop) }}</span>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+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: '-',
+  }
+);
+
+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;
+}
+</script>
+<style lang="less" scoped>
+@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;
+  }
+  .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);
+    }
+  }
+
+  .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/CustomTable-fire.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="table__content">
+    <div class="table__content_label" :class="`table__content_label_${type}`">
+      <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
+    </div>
+    <div class="table__content_list" :class="`table__content_list_${type}`">
+      <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
+        <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }" :class="`table__content__list_item_${type}`">
+          <slot :name="t.prop" :scope="item">
+            <span>{{ get(item, t.prop) }}</span>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+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: '-',
+  }
+);
+
+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;
+}
+</script>
+<style lang="less" scoped>
+@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/fireNew/11-1.png');
+    --image-content-back: url('/@/assets/images/fireNew/11-2.png');
+    --image-content-text: url('/@/assets/images/fireNew/11-3.png');
+  }
+}
+
+.table__content {
+  --image-content-label: url('/@/assets/images/fireNew/11-1.png');
+  --image-content-back: url('/@/assets/images/fireNew/11-2.png');
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 5px 0;
+
+  .table__content_label {
+    width: 400px;
+    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;
+    margin-top: 10px;
+  }
+  .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-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-image: var(--image-content-label);
+    margin-top: 10px;
+    .label-t {
+    }
+  }
+
+  .table__content_list {
+    height: calc(100% - 50px);
+    width: 380px;
+    display: flex;
+    flex-direction: column;
+    padding: 5px 0;
+    box-sizing: border-box;
+    overflow-y: auto;
+    background-image: var(--image-content-back);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    .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 {
+      &:nth-child(2n) {
+        background: #0b2d3d;
+      }
+      &:nth-child(2n + 1) {
+        background: transparent;
+      }
+    }
+  }
+  .table__content_list_C {
+    .table__content_list_row {
+      &:nth-child(2n) {
+        background: #0b2d3d;
+      }
+      &:nth-child(2n + 1) {
+        background: transparent;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,161 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="mini-board" :class="`mini-board_${type} mini-board_${type}_${getValueDecoClass(value)}`">
+    <template v-if="layout === 'new-top'">
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
+      </slot>
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </slot>
+    </template>
+    <template v-if="layout === 'val-top'">
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">
+          {{ value }}
+        </div>
+      </slot>
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">
+          {{ label }}
+        </div>
+      </slot>
+    </template>
+    <template v-if="layout === 'label-top'">
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">
+          {{ label }}
+        </div>
+      </slot>
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">
+          {{ value }}
+        </div>
+      </slot>
+    </template>
+  </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']);
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
+@{theme-deepblue} {
+  .mini-board {
+    --image-areaNew: url('/@/assets/images/fireNew/6-1.png');
+    --image-areaNew1: url('/@/assets/images/fireNew/6-2.png');
+    --image-areaNew2: url('/@/assets/images/fireNew/8.png');
+  }
+}
+
+.mini-board {
+  --image-areaNew: url('/@/assets/images/fireNew/6-1.png');
+  --image-areaNew1: url('/@/assets/images/fireNew/6-2.png');
+  --image-areaNew2: url('/@/assets/images/fireNew/8.png');
+  height: 50px;
+  line-height: 25px;
+  width: 130px;
+  padding: 0 5px 0 5px;
+  text-align: center;
+  background-size: 100% 100%;
+  position: relative;
+}
+.mini-board_H {
+  width: 174px;
+  height: 104px;
+  background-image: var(--image-areaNew);
+  background-size: 100% auto;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  padding: 33px 0 0 82px;
+}
+
+.mini-board__value_H {
+  font-size: 16px;
+  font-weight: bold;
+  height: 23px;
+  line-height: 50px;
+  margin-top: 2px;
+  font-family: 'douyuFont';
+}
+.mini-board__label_H {
+  line-height: 20px;
+  height: 20px;
+}
+.mini-board_E:nth-child(1) {
+  .mini-board__label_E {
+    background-image: var(--image-hycd);
+  }
+}
+.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:nth-child(1) {
+  background-image: var(--image-areaNew);
+}
+.mini-board_H_low_risk:nth-child(2) {
+  background-image: var(--image-areaNew1);
+}
+
+.mini-board_F {
+  width: 100px;
+  height: 60px;
+  background-image: var(--image-areaNew2);
+  background-size: 100% 100%;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+.mini-board__value_F {
+  font-size: 15px;
+  color: @vent-gas-primary-text;
+}
+.mini-board__label_F {
+  line-height: 17px;
+}
+</style>

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

@@ -0,0 +1,419 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="mini-board" :class="`mini-board_${type} mini-board_${type}_${getValueDecoClass(value)}`">
+    <template v-if="layout === 'val-top'">
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">
+          {{ value }}
+        </div>
+      </slot>
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">
+          {{ label }}
+        </div>
+      </slot>
+    </template>
+    <template v-if="layout === 'label-top'">
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">
+          {{ label }}
+        </div>
+      </slot>
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">
+          {{ value }}
+        </div>
+      </slot>
+    </template>
+    <template v-if="layout === 'new-top'">
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
+      </slot>
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </slot>
+    </template>
+    <template v-if="layout === 'new1-top'">
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
+      </slot>
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </slot>
+    </template>
+    <template v-if="layout === 'new2-top'">
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </slot>
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
+      </slot>
+    </template>
+    <template v-if="layout === 'new3-top'">
+      <div v-if="label === '进风(m³/min)'" class="mini-board_New3_jin">
+        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </div>
+      <div v-if="label === '回风(m³/min)'" class="mini-board_New3_hui">
+        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </div>
+      <!-- <slot name="value">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
+      </slot> -->
+      <!-- <slot name="lable">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </slot> -->
+    </template>
+  </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']);
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+@import '/@/design/theme.less';
+
+@{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-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+    --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+    --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.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-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+  --image-area3: url('/@/assets/images/company/area3.png');
+  --image-value-bg: url('/@/assets/images/vent/value-bg.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-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_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_New3_jin {
+  background-image: var(--image-areaNew3);
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.mini-board_New3_hui {
+  background-image: var(--image-areaNew4);
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.mini-board_A {
+  width: 120px;
+  height: 60px;
+  background-image: var(--image-area3);
+  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_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: 120px;
+  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__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_A {
+  color: @vent-gas-primary-text;
+  font-size: 20px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+}
+
+.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: 20px;
+  font-weight: bold;
+}
+.mini-board__label_E {
+  line-height: 20px;
+  height: 90px;
+  padding-top: 30%;
+  background-repeat: no-repeat;
+  background-position: center top;
+}
+
+.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_E:nth-child(1) {
+  .mini-board__label_E {
+    background-image: var(--image-hycd);
+  }
+}
+.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/detail/MiniBoard.vue

@@ -165,7 +165,7 @@ defineEmits(['click']);
   background-size: 100% 100%;
 }
 .mini-board_New1 {
-  width: 119px;
+  width: 118px;
   height: 60px;
   background-image: var(--image-areaNew1);
   background-size: 100% 100%;

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

@@ -0,0 +1,125 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="timeline">
+    <div v-for="item in listConfig" :key="item.prop" class="flex items-center timeline-item">
+      <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`"></div><div class="timeline-item__dot"></div>
+      <div class="timeline-item__label">{{ item.label }}</div>
+      <div :class="`timeline-item__value_${item.color}`">
+        {{ item.value }}
+      </div>
+    </div>
+    <div class="timeline-component"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        value: string;
+        color: string;
+        label: string;
+        prop: string;
+      }[];
+    }>(),
+    {
+      listConfig: () => [],
+    }
+  );
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @import '@/design/theme.less';
+  /* Timeline 相关的样式 */
+
+  @{theme-deepblue} {
+    .timeline-item {
+      --image-warn_icon_5: url('/@/assets/images/themify/deepblue/home-container/configurable/warn_icon_5.png');
+      --image-warn_icon_4: url('/@/assets/images/themify/deepblue/home-container/configurable/warn_icon_4.png');
+      --image-warn_icon_3: url('/@/assets/images/themify/deepblue/home-container/configurable/warn_icon_3.png');
+      --image-warn_icon_2: url('/@/assets/images/themify/deepblue/home-container/configurable/warn_icon_2.png');
+      --image-warn_icon_1: url('/@/assets/images/themify/deepblue/home-container/configurable/warn_icon_1.png');
+    }
+  }
+
+  .timeline-item {
+    --image-warn_icon_5: url('/@/assets/images/home-container/configurable/warn_icon_5.png');
+    --image-warn_icon_4: url('/@/assets/images/home-container/configurable/warn_icon_4.png');
+    --image-warn_icon_3: url('/@/assets/images/home-container/configurable/warn_icon_3.png');
+    --image-warn_icon_2: url('/@/assets/images/home-container/configurable/warn_icon_2.png');
+    --image-warn_icon_1: url('/@/assets/images/home-container/configurable/warn_icon_1.png');
+    height: 20%;
+  }
+  .timeline-item__icon_red {
+    background-image: var(--image-warn_icon_5);
+  }
+  .timeline-item__icon_orange {
+    background-image: var(--image-warn_icon_4);
+  }
+  .timeline-item__icon_yellow {
+    background-image: var(--image-warn_icon_3);
+  }
+  .timeline-item__icon_green {
+    background-image: var(--image-warn_icon_2);
+  }
+  .timeline-item__icon_blue {
+    background-image: var(--image-warn_icon_1);
+  }
+  .timeline-item__icon {
+    width: 33px;
+    height: 35px;
+    margin-left: 50px;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  .timeline-item__dot {
+    width: 10px;
+    height: 10px;
+    margin-left: 70px;
+    background-color: @vent-gas-primary-bg;
+    border-radius: 5px;
+    position: relative;
+  }
+  .timeline-item__dot::before {
+    content: '';
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    border: 1px solid @vent-gas-tab-border;
+  }
+  .timeline-item__label {
+    width: 100px;
+    margin-left: 70px;
+  }
+  .timeline-item__value_red {
+    color: red;
+  }
+  .timeline-item__value_orange {
+    color: orange;
+  }
+  .timeline-item__value_yellow {
+    color: yellow;
+  }
+  .timeline-item__value_green {
+    color: yellowgreen;
+  }
+  .timeline-item__value_blue {
+    color: lightblue;
+  }
+
+  .timeline {
+    height: 220px;
+    padding: 5px;
+    position: relative;
+  }
+  .timeline-component {
+    position: absolute;
+    width: 2px;
+    height: 180px;
+    top: 20px;
+    left: 162px;
+    background-image: @vent-configurable-home-timeline;
+  }
+</style>

src/views/vent/home/configurable/components/originalNew/NewNav.vue

@@ -27,7 +27,11 @@
       </div>
       <div class="nav-menu-right">
         <div v-for="(item, index) in rightMenus" :key="index + 4">
-          <div :class="activeIndex == index + 4 ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index + 4" @click="menuClick(index + 4)">
+          <div
+            :class="activeIndex == index + 4 ? 'nav-menu-active' : 'nav-menu-unactive'"
+            :key="index + 4"
+            @click="menuClick({ item, index: index + 4 })"
+          >
             <div style="color: #ddd">{{ item.name }}</div>
             <div v-if="activeIndex == index + 4 && isShowMenuItem" class="nav-menu-item">
               <div class="nav-menu-content">
@@ -46,14 +50,11 @@
         </div>
       </div>
     </div>
-    <!-- <div class="userInfo">
-      <div class="userName">admin</div>
-    </div> -->
   </div>
 </template>
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 let props = defineProps({
   Title: {
     type: String,
@@ -85,6 +86,7 @@ let menuList = ref<any[]>([
 ]); //一级菜单列表
 let activeIndex = ref(0); //当前激活menu索引
 const router = useRouter();
+const route = useRoute();
 let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
 let menuItemActive = ref(0); //menuItem当前激活选项
 const leftMenus = computed(() => menuList.value.slice(0, 4));
@@ -98,6 +100,34 @@ function menuItemClick(index) {
   menuItemActive.value = index;
   isShowMenuItem.value = false;
 }
+function updateActiveState(path: string) {
+  menuList.value.forEach((menu, index) => {
+    // 处理有直接链接的菜单项
+    if (menu.targatUrl === path) {
+      activeIndex.value = index;
+      isShowMenuItem.value = false;
+      return;
+    }
+    // 处理有子菜单的菜单项
+    if (menu.MenuItemList) {
+      const itemIndex = menu.MenuItemList.findIndex((item) => item.targatUrl === path);
+      if (itemIndex !== -1) {
+        activeIndex.value = index;
+        menuItemActive.value = itemIndex;
+        isShowMenuItem.value = true;
+      }
+    }
+  });
+}
+watch(
+  () => route.path,
+  (newPath) => {
+    updateActiveState(newPath);
+  }
+);
+onMounted(() => {
+  updateActiveState(route.path);
+});
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';

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

@@ -32,6 +32,7 @@ export const testConfigNewDust: Config[] = [
           {
             name: 'complex_list',
             basis: '70%',
+            pageType: 'New_dust',
           },
         ],
       },
@@ -102,7 +103,7 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:493px;',
+      size: 'width:410px;height:493px;',
       version: '保德',
       position: 'top:65px;left:10px;',
       headerPosition: 'leftTop',
@@ -172,7 +173,7 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:415px;height:360px;',
+      size: 'width:370px;height:360px;',
       version: '保德',
       position: 'bottom:40px;left:10px;',
       headerPosition: 'leftBottom',
@@ -236,9 +237,9 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:930px;height:280px;',
+      size: 'width:1000px;height:280px;',
       version: '保德',
-      position: 'bottom:8px;left:497px',
+      position: 'bottom:8px;left:455px',
       headerPosition: 'centerBottom',
     },
   },
@@ -311,7 +312,7 @@ export const testConfigNewDust: Config[] = [
       to: 'http://10.248.210.154:8801',
     },
     showStyle: {
-      size: 'width:440px;height:300px;',
+      size: 'width:415px;height:300px;',
       version: '保德',
       position: 'top:60px;right:10px;',
       headerPosition: 'rightTop',
@@ -378,7 +379,7 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:425px;height:260px;',
+      size: 'width:378px;height:260px;',
       version: '保德',
       position: 'top:370px;right:10px;',
       headerPosition: 'rightCenter',
@@ -444,7 +445,7 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:430px;height:280px;',
+      size: 'width:385px;height:280px;',
       version: '保德',
       position: 'bottom:20px;right:10px;',
       headerPosition: 'rightBottom',
@@ -480,11 +481,11 @@ export const testConfigNewFire: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '50%',
+            basis: '40%',
           },
           {
             name: 'complex_list',
-            basis: '50%',
+            basis: '60%',
           },
         ],
       },
@@ -492,7 +493,7 @@ export const testConfigNewFire: Config[] = [
         {
           type: 'H',
           readFrom: 'fireManageInfo',
-          layout: 'label-top',
+          layout: 'new-top',
           items: [
             {
               label: '内因风险等级',
@@ -539,23 +540,22 @@ export const testConfigNewFire: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:430px;height:280px;',
-      version: '原版',
+      size: 'width:440px;height:300px;',
+      version: '保德',
       position: 'top:60px;left:0;',
-      headerPosition: 'leftTop',
     },
   },
   {
-    deviceType: '',
-    moduleName: '开采煤层自燃发火特性',
+    deviceType: 'pdArray',
+    moduleName: '带式输送机防灭火监控系统',
     pageType: 'New_fire',
     moduleData: {
       header: {
-        show: false,
+        show: true,
         readFrom: '',
         selector: {
-          show: false,
-          value: '',
+          show: true,
+          value: '${systemname}',
         },
         slot: {
           show: false,
@@ -568,74 +568,80 @@ export const testConfigNewFire: Config[] = [
         link: '',
       },
       layout: {
-        direction: 'row',
+        direction: 'column',
         items: [
           {
-            name: 'table',
-            basis: '100%',
+            name: 'board',
+            basis: '30%',
+          },
+          {
+            name: 'chart',
+            basis: '70%',
           },
         ],
       },
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [
+      board: [
         {
-          type: 'A',
-          readFrom: 'mockTable',
-          columns: [
+          type: 'F',
+          layout: 'val-top',
+          readFrom: 'arrayCount',
+          items: [
             {
-              name: '煤层',
-              prop: 'a',
+              label: '光纤预警',
+              value: '${[0].val}℃',
             },
             {
-              name: '自燃倾向性',
-              prop: 'b',
+              label: '一氧化碳预警',
+              value: '${[1].val}ppm',
             },
             {
-              name: '最短发火期',
-              prop: 'c',
+              label: '烟雾预警',
+              value: '${[2].val}',
             },
+          ],
+        },
+      ],
+      chart: [
+        {
+          type: 'line_smooth',
+          readFrom: 'arrayFiber',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          series: [
             {
-              name: '最小推进速度',
-              prop: 'd',
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
             },
           ],
         },
       ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
       list: [],
       complex_list: [],
       preset: [],
-      mock: {
-        mockTable: [
-          {
-            a: '8煤',
-            b: '自燃',
-            c: '123天',
-            d: '0.87md',
-          },
-        ],
-      },
     },
     showStyle: {
-      size: 'width:417px;height:280px;',
-      version: '原版',
-      position: 'top:350px;left:0;',
-      headerPosition: 'leftCenter',
+      size: 'width:440px;height:280px;',
+      version: '保德',
+      position: 'top:360px;left:0;',
     },
   },
   {
-    deviceType: 'pdArray',
-    moduleName: '带式输送机防灭火监控系统',
+    deviceType: 'obfObj',
+    moduleName: '密闭采空区监测区域',
     pageType: 'New_fire',
     moduleData: {
       header: {
         show: true,
-        readFrom: '',
+        readFrom: 'obfObjModded',
         selector: {
           show: true,
-          value: '${systemname}',
+          value: '${objType}',
         },
         slot: {
           show: false,
@@ -648,52 +654,28 @@ export const testConfigNewFire: Config[] = [
         link: '',
       },
       layout: {
-        direction: 'column',
+        direction: 'row',
         items: [
           {
-            name: 'board',
-            basis: '35%',
-          },
-          {
             name: 'chart',
-            basis: '65%',
+            basis: '90%',
           },
         ],
       },
-      board: [
-        {
-          type: 'F',
-          layout: 'val-top',
-          readFrom: 'arrayCount',
-          items: [
-            {
-              label: '光纤预警',
-              value: '${[0].val}℃',
-            },
-            {
-              label: '一氧化碳预警',
-              value: '${[1].val}ppm',
-            },
-            {
-              label: '烟雾预警',
-              value: '${[2].val}',
-            },
-          ],
-        },
-      ],
+      board: [],
       chart: [
         {
-          type: 'line_smooth',
-          readFrom: 'arrayFiber',
-          legend: { show: true },
+          type: 'bar_cylinder',
+          readFrom: '',
+          legend: { show: false },
           xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          yAxis: [{ show: true, name: '', position: 'left' }],
           series: [
             {
-              label: '${strinstallpos}',
-              readFrom: 'fibreTemperatureArr',
-              xprop: 'pos',
-              yprop: 'value',
+              readFrom: 'arrayDev',
+              xprop: 'strinstallpos',
+              yprop: 'val',
+              label: '',
             },
           ],
         },
@@ -705,11 +687,11 @@ export const testConfigNewFire: Config[] = [
       complex_list: [],
       preset: [],
     },
+
     showStyle: {
-      size: 'width:430px;height:280px;',
-      version: '新版',
+      size: 'width:440px;height:280px;',
+      version: '保德',
       position: 'top:640px;left:0;',
-      headerPosition: 'leftBottom',
     },
   },
   {
@@ -738,14 +720,12 @@ export const testConfigNewFire: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'list',
-            basis: '60%',
-            pageType: 'New_fire',
-          },
-          {
             name: 'blast_delta',
             basis: '40%',
-            pageType: 'New_fire',
+          },
+          {
+            name: 'list',
+            basis: '60%',
           },
         ],
       },
@@ -756,7 +736,7 @@ export const testConfigNewFire: Config[] = [
       table: [],
       list: [
         {
-          type: 'fireList',
+          type: 'I',
           readFrom: '',
           items: [
             {
@@ -820,9 +800,9 @@ export const testConfigNewFire: Config[] = [
       ],
     },
     showStyle: {
-      size: 'width:920px;height:310px;',
+      size: 'width:980px;height:300px;',
       version: '保德',
-      position: 'bottom:8px;left:500px',
+      position: 'bottom:8px;left:470px',
       headerPosition: 'centerBottom',
     },
   },
@@ -883,23 +863,23 @@ export const testConfigNewFire: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:920px;height: 310px;',
+      size: 'width:980px;height:280px;',
       version: '保德',
-      position: 'bottom:8px;left:500px',
+      position: 'bottom:8px;left:470px',
       headerPosition: 'centerBottom',
     },
   },
   {
-    deviceType: 'obfObj',
-    moduleName: '密闭采空区监测区域',
+    deviceType: 'dsArray',
+    moduleName: '变电硐室防灭火监控系统',
     pageType: 'New_fire',
     moduleData: {
       header: {
         show: true,
-        readFrom: 'obfObjModded',
+        readFrom: '',
         selector: {
           show: true,
-          value: '${objType}',
+          value: '${systemname}',
         },
         slot: {
           show: false,
@@ -915,54 +895,62 @@ export const testConfigNewFire: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'chart',
+            name: 'list',
             basis: '100%',
           },
         ],
       },
       board: [],
-      chart: [
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
         {
-          type: 'bar_cylinder',
-          readFrom: '',
-          legend: { show: false },
-          xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '', position: 'left' }],
-          series: [
+          type: 'H',
+          readFrom: 'arrayCount',
+          items: [
             {
-              readFrom: 'arrayDev',
-              xprop: 'strinstallpos',
-              yprop: 'val',
-              label: '',
+              label: '光纤预警',
+              info: '最高温度',
+              value: '${[0].val}℃',
+              color: '',
+            },
+            {
+              label: '一氧化碳预警',
+              info: '最高浓度',
+              value: '${[1].val}ppm',
+              color: '',
+            },
+            {
+              label: '烟雾预警',
+              info: '最高浓度',
+              value: '${[2].val}',
+              color: '',
             },
           ],
         },
       ],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
       complex_list: [],
       preset: [],
     },
     showStyle: {
-      size: 'width:430px;height:280px;',
-      version: '原版',
+      size: 'width:440px;height: 290px;',
+      version: '保德',
       position: 'top:60px;right:0;',
-      headerPosition: 'rightTop',
     },
   },
   {
-    deviceType: 'dsArray',
-    moduleName: '变电硐室防灭火监控系统',
+    deviceType: '',
+    moduleName: '开采煤层自燃发火特性',
     pageType: 'New_fire',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
-          show: true,
-          value: '${systemname}',
+          show: false,
+          value: '',
         },
         slot: {
           show: false,
@@ -978,81 +966,57 @@ export const testConfigNewFire: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'list',
+            name: 'table',
             basis: '100%',
           },
         ],
       },
       board: [],
       chart: [],
-      // chart: [
-      //   {
-      //     type: 'line_bar',
-      //     readFrom: 'dsArray',
-      //     xAxis: [
-      //       {
-      //         label: 'null',
-      //       },
-      //     ],
-      //     yAxis: [
-      //       {
-      //         label: 'A',
-      //         align: 'left',
-      //       },
-      //       {
-      //         label: 'A',
-      //         align: 'left',
-      //       },
-      //     ],
-      //     series: [
-      //       {
-      //         label: 'A',
-      //         prop: 'top',
-      //       },
-      //       {
-      //         label: 'B',
-      //         prop: 'bot',
-      //       },
-      //     ],
-      //   },
-      // ],
       gallery: [],
       gallery_list: [],
-      table: [],
-      list: [
+      table: [
         {
-          type: 'H',
-          readFrom: 'arrayCount',
-          items: [
+          type: 'A',
+          readFrom: 'mockTable',
+          columns: [
             {
-              label: '光纤预警',
-              info: '最高温度',
-              value: '${[0].val}℃',
-              color: 'blue',
+              name: '煤层',
+              prop: 'a',
             },
             {
-              label: '一氧化碳预警',
-              info: '最高浓度',
-              value: '${[1].val}ppm',
-              color: 'blue',
+              name: '自燃倾向性',
+              prop: 'b',
             },
             {
-              label: '烟雾预警',
-              info: '最高浓度',
-              value: '${[2].val}',
-              color: 'blue',
+              name: '最短发火期',
+              prop: 'c',
+            },
+            {
+              name: '最小推进速度',
+              prop: 'd',
             },
           ],
         },
       ],
+      list: [],
       complex_list: [],
       preset: [],
+      mock: {
+        mockTable: [
+          {
+            a: '8煤',
+            b: '自燃',
+            c: '123天',
+            d: '0.87md',
+          },
+        ],
+      },
     },
     showStyle: {
-      size: 'width:425px;height:280px;',
-      version: '新版',
+      size: 'width:440px;height:280px;',
+      version: '保德',
       position: 'top:350px;right:0;',
-      headerPosition: 'rightCenter',
     },
   },
   {
@@ -1119,10 +1083,9 @@ export const testConfigNewFire: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:430px;height:280px;',
-      version: '新版',
+      size: 'width:440px;height:280px;',
+      version: '保德',
       position: 'top:640px;right:0;',
-      headerPosition: 'rightBottom',
     },
   },
 ];

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

@@ -3030,15 +3030,19 @@ export const testConfigVentNew: Config[] = [
           items: [
             {
               label: '风量(m³/min)',
-              value: '${flow_merge}',
+              value: '${m3}',
             },
             {
-              label: '负压(Pa)',
-              value: '${fy_merge}',
+              label: '风压(Pa)',
+              value: '${DataPa}',
+              // trans: {
+              //   '1': '${Fan1FreqHz}',
+              //   '0': '${Fan1FreqHz}',
+              // },
             },
             {
               label: '漏风率(%)',
-              value: '${leakage}',
+              value: '-',
             },
           ],
         },
@@ -3082,7 +3086,6 @@ export const testConfigVentNew: Config[] = [
         },
       },
       background: {
-        // show: true,
         show: true,
         type: 'video',
         link: '/video/gate.mp4',
@@ -3305,16 +3308,16 @@ export const testConfigVentNew: Config[] = [
           value: '${strinstallpos}',
         },
         slot: {
-          show: false,
+          show: true,
           value: '运行风机：${readData.Fan1StartStatus}',
           trans: {
-            '1': '一号',
-            '0': '二号',
+            '1': '1#风机',
+            '0': '2#风机',
           },
         },
       },
       background: {
-        show: true,
+        show: false,
         type: 'video',
         link: '/video/fanLocal.mp4',
       },
@@ -3323,7 +3326,11 @@ export const testConfigVentNew: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '40%',
+            basis: '25%',
+          },
+          {
+            name: 'chart',
+            basis: '75%',
           },
         ],
       },
@@ -3349,7 +3356,16 @@ export const testConfigVentNew: Config[] = [
         },
       ],
       list: [],
-      chart: [],
+      chart: [
+        {
+          type: 'bar_cylinder_wide',
+          readFrom: '',
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '(m³/min)', position: 'left' }],
+          series: [{ readFrom: 'chartData', xprop: 'x', yprop: 'y', label: '风量' }],
+        },
+      ],
       table: [],
       gallery: [],
       complex_list: [],
@@ -3358,7 +3374,7 @@ export const testConfigVentNew: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanlocal',
     },
     showStyle: {
-      size: 'width:377px;height:280px;',
+      size: 'width:390px;height:324px;',
       version: '原版',
       position: 'top:60px;right:0;',
       headerPosition: 'rightTop',
@@ -3392,7 +3408,7 @@ export const testConfigVentNew: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '30%',
+            basis: '100%',
             pageType: 'vent_New',
           },
         ],

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

@@ -129,14 +129,14 @@ function redirectTo(url) {
   }
   .left-t {
     position: absolute;
-    width: 33%;
+    width: 28%;
     height: 100%;
     background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
     z-index: 0;
   }
   .right-t {
     position: absolute;
-    width: 167%;
+    width: 172%;
     height: 100%;
     background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
     z-index: 0;

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

@@ -17,8 +17,6 @@
       <!-- <div class="main-title">{{ mainTitle }}</div> -->
       <NewNav :Title="mainTitle" />
     </div>
-    <div class="left-t"> </div>
-    <div class="right-t"> </div>
     <ModuleFireNew
       v-for="cfg in cfgs"
       :key="cfg.deviceType"
@@ -104,17 +102,17 @@ function redirectTo(url) {
 
 @{theme-deepblue} {
   .company-home {
-    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+    --image-modal-top: url('@/assets/images/fireNew/1.png');
   }
 }
 
 .company-home {
-  --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+  --image-modal-top: url('@/assets/images/fireNew/1.png');
   width: 100%;
   height: 100%;
   color: @white;
   position: relative;
-  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+  background: url('@/assets/images/fireNew/FireBj.png') no-repeat center;
 
   .top-bg {
     width: 100%;
@@ -142,14 +140,14 @@ function redirectTo(url) {
   }
   .left-t {
     position: absolute;
-    width: 33%;
+    width: 28%;
     height: 100%;
     background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
     z-index: 0;
   }
   .right-t {
     position: absolute;
-    width: 167%;
+    width: 172%;
     height: 100%;
     background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
     z-index: 0;