[Feat 0000] 添加gallery、list、board等子模块，修改保德首页配置

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

@@ -127,7 +127,7 @@ export interface CommonItem {
 
 export interface ModuleDataBoard extends ReadFrom {
   /** 展示牌预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top';
   /** 核心配置，每个展示牌对应一项 */
@@ -136,14 +136,14 @@ export interface ModuleDataBoard extends ReadFrom {
 
 export interface ModuleDataList extends ReadFrom {
   /** 列表预设的背景类型 */
-  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
+  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */
   items: Array<
     {
       /** 列表项指定颜色，根据类型不同会有各自的样式 */
-      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
+      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white' | 'lightblue';
       /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
       info?: string;
     } & CommonItem
@@ -152,12 +152,12 @@ export interface ModuleDataList extends ReadFrom {
 
 export interface ModuleDataGallery extends ReadFrom {
   /** 画廊预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
   /** 核心配置，每个画廊项对应一项 */
   items: Array<
     {
       /** 画廊项指定颜色，根据类型不同会有各自的样式 */
-      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
+      color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white' | 'lightblue';
     } & CommonItem
   >;
 }
@@ -185,7 +185,7 @@ export interface ModuleDataGalleryList extends ReadFrom {
 
 export interface ModuleDataChart extends ReadFrom {
   /** 图表类型，一个类型对应一种图表预设 */
-  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth' | 'line_smooth_complex' | 'bar_stack';
+  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth' | 'line_smooth_complex' | 'bar_stack' | 'bar_cylinder';
   /** 排序依据，该项应配置将配合 readFrom 使用 */
   sortBy?: string;
   /** 排序规则，desc降序，asc升序 */
@@ -244,7 +244,7 @@ export interface ModuleDataPreset extends ReadFrom {
 
 export interface ModuleDataComplexList extends ReadFrom {
   /** 列表预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D';
+  type: 'A' | 'B' | 'C' | 'D' | 'E';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */
@@ -254,7 +254,7 @@ export interface ModuleDataComplexList extends ReadFrom {
     contents: Array<
       {
         /** 列表项指定颜色，根据类型不同会有各自的样式 */
-        color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white';
+        color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white' | 'lightblue';
         /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
         info?: string;
       } & CommonItem

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

@@ -82,13 +82,16 @@
   // 根据配置里的定位判断应该使用哪个module组件
   const daneClass = computed(() => {
     const position = props.showStyle.position;
-    if (position.includes('left:0')) {
+    if (position.includes('bottom')) {
+      return 'dane-w';
+    }
+    if (position.includes('left')) {
       return 'dane-m';
     }
-    if (position.includes('right:0')) {
+    if (position.includes('right')) {
       return 'dane-m';
     }
-    return 'dane-w';
+    return 'dane-m';
   });
 
   //切换时间选项
@@ -142,7 +145,7 @@
       align-items: center;
       justify-content: space-between;
       width: 100%;
-      height: 34px;
+      height: 38px;
       padding: 0 40px 0 50px;
 
       .common-navL {
@@ -178,7 +181,7 @@
     }
 
     .dane-content {
-      height: calc(100% - 34px);
+      height: calc(100% - 38px);
       // border-image: linear-gradient(#1dabeb, #1dabeb22);
       border-image: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723) 30;
       // border-left: 1px;

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

@@ -110,13 +110,16 @@
   // 根据配置里的定位判断应该使用哪个module组件
   const daneClass = computed(() => {
     const position = props.showStyle.position;
-    if (position.includes('left:0')) {
+    if (position.includes('bottom')) {
+      return 'dane-w';
+    }
+    if (position.includes('left')) {
       return 'dane-m';
     }
-    if (position.includes('right:0')) {
+    if (position.includes('right')) {
       return 'dane-m';
     }
-    return 'dane-w';
+    return 'dane-m';
   });
 
   //切换时间选项

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

@@ -50,13 +50,16 @@
 
   // 根据配置里的定位判断应该使用哪个module组件
   function getModuleComponent(position) {
-    if (position.includes('left:0')) {
+    if (position.includes('bottom')) {
+      return ModuleBottom;
+    }
+    if (position.includes('left')) {
       return ModuleLeft;
     }
-    if (position.includes('right:0')) {
+    if (position.includes('right')) {
       return ModuleRight;
     }
-    return ModuleBottom;
+    return ModuleLeft;
   }
 
   function redirectTo() {

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

@@ -49,10 +49,13 @@
 
   // 根据配置里的定位判断应该使用哪个module组件
   function getModuleComponent(position) {
-    if (position.includes('left:0')) {
+    if (position.includes('bottom')) {
+      return ModuleBottom;
+    }
+    if (position.includes('left')) {
       return ModuleLeft;
     }
-    if (position.includes('right:0')) {
+    if (position.includes('right')) {
       return ModuleLeft;
     }
     return ModuleBottom;

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

@@ -43,230 +43,288 @@
   //   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '@/design/vent/color.less';
-  /* Timeline 相关的样式 */
+    @import '@/design/vent/color.less';
+    /* Timeline 相关的样式 */
 
-  .list {
-    padding: 5px 20px;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  .list-item_A {
-    position: relative;
-    height: 140px;
-    background-repeat: no-repeat;
-    background-image: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
-    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 {
+      padding: 5px 20px;
+      position: relative;
+      width: 100%;
+      height: 100%;
     }
-  }
-  .list-item__content_A:nth-of-type(3) {
-    position: absolute;
-    left: 41%;
-    top: 55px;
 
-    .list-item__info {
-      display: none;
+    .list-item_A {
+      position: relative;
+      height: 140px;
+      background-repeat: no-repeat;
+      background-image: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
+      background-size: auto 100%;
+      background-position: center;
     }
-    .list-item__value {
-      font-size: 20px;
+    .list-item__title_A {
+      position: absolute;
+      left: 41%;
+      // font-size: 14px;
+      top: 15px;
     }
-  }
-  .list-item__content_A:nth-of-type(4) {
-    position: absolute;
-    left: 66%;
-    top: 55px;
+    // .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__info {
-      display: none;
+      .list-item__label {
+        font-size: 18px;
+        margin-bottom: 25px;
+      }
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 24px;
+      }
     }
-    .list-item__value {
-      font-size: 20px;
+    .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(5) {
-    position: absolute;
-    left: 35%;
-    bottom: 10px;
-    display: flex;
-    align-items: center;
+    .list-item__content_A:nth-of-type(4) {
+      position: absolute;
+      left: 66%;
+      top: 55px;
 
-    .list-item__info {
-      display: none;
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 20px;
+      }
     }
-    .list-item__value {
-      font-size: 20px;
-      margin-left: 5px;
+    .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: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    text-align: center;
-    padding: 0 10%;
-    margin-top: 5px;
-    height: 33px;
+    .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: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
+      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__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-item__value {
-      font-size: 18px;
-      margin-left: 5px;
+
+    .list_C {
+      padding: 5px 10px;
     }
-    .list-item__content_B {
-      height: 100%;
+
+    .list__wrapper_C {
       display: flex;
-      align-items: center;
-      flex-basis: 100px;
-      flex-grow: 1;
+      justify-content: space-between;
+      flex-wrap: wrap;
     }
-    .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_C {
+      position: relative;
+      height: 140px;
+      width: 200px;
+      background-repeat: no-repeat;
+      background-image: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
+      background-size: 100% 100%;
+      background-position: left center;
     }
-    .list-item__info {
-      display: none;
+    .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_C {
-    padding: 5px 10px;
-  }
+      .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__wrapper_C {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 18px;
+      }
+    }
 
-  .list-item_C {
-    position: relative;
-    height: 140px;
-    width: 200px;
-    background-repeat: no-repeat;
-    background-image: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
-    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_D {
+      padding: 5px 10px;
     }
-    .list-item__value {
-      font-size: 18px;
+
+    .list__wrapper_D {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
     }
-  }
-  .list-item__content_C:nth-of-type(3) {
-    position: absolute;
-    left: 99px;
-    top: 55px;
 
-    .list-item__info {
-      display: none;
+    .list-item_D {
+      position: relative;
+      height: 110px;
+      width: 200px;
+      background-repeat: no-repeat;
+      background-image: url(/@/assets/images/home-container/configurable/firehome/img-9.png);
+      background-size: 100% auto;
+      background-position: center top;
+      text-align: center;
+      margin-bottom: 20px;
     }
-    .list-item__value {
-      font-size: 18px;
+    .list-item__title_D {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      font-size: 20px;
     }
-  }
+    .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: 19px;
+      }
+    }
+    .list-item__content_D:nth-of-type(3) {
+      position: absolute;
+      top: 10%;
+      right: 10%;
+      width: 30%;
+      text-align: center;
 
-  .list_D {
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 19px;
+      }
+    }
+
+  .list_E {
     padding: 5px 10px;
   }
 
-  .list__wrapper_D {
+  .list__wrapper_E {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
+    padding: 0 10px;
   }
 
-  .list-item_D {
+  .list-item_E {
     position: relative;
-    height: 100px;
-    width: 200px;
+    height: 104px;
+    width: 188px;
     background-repeat: no-repeat;
-    background-image: url(/@/assets/images/home-container/configurable/firehome/img-9.png);
+    background-image: url(/@/assets/images/home-container/configurable/dusthome/list_bg_1.png);
     background-size: 100% auto;
     background-position: center top;
     text-align: center;
     margin-bottom: 20px;
   }
-  .list-item__title_D {
-    position: absolute;
+  .list-item__title_E {
+    // position: absolute;
     width: 100%;
-    bottom: 0;
+    // top: 0;
+    font-size: 18px;
+    margin-top: 10px;
   }
-  .list-item__content_D:nth-of-type(2) {
+  .list-item__content_E:nth-of-type(2) {
     position: absolute;
-    top: 10%;
-    left: 10%;
-    width: 30%;
-    text-align: center;
+    top: 40%;
+    left: 5%;
+    text-align: left;
 
     .list-item__info {
       display: none;
@@ -275,12 +333,11 @@
       font-size: 18px;
     }
   }
-  .list-item__content_D:nth-of-type(3) {
+  .list-item__content_E:nth-of-type(3) {
     position: absolute;
-    top: 10%;
-    right: 10%;
-    width: 30%;
-    text-align: center;
+    top: 40%;
+    right: 5%;
+    text-align: right;
 
     .list-item__info {
       display: none;
@@ -290,44 +347,47 @@
     }
   }
 
-  // .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__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: #009bff;
-  }
-  .list-item__value_white {
-    color: white;
-  }
+    // .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: #009bff;
+    }
+    .list-item__value_white {
+      color: white;
+    }
+    .gallery-item__value_lightblue {
+      color: @vent-configurable-home-light-border;
+    }
 </style>

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

@@ -411,6 +411,95 @@
       };
     }
 
+    // 柱状图，圆柱形样式
+    if (type === 'bar_cylinder') {
+      return {
+        textStyle,
+        grid: {
+          top: 40,
+          bottom: 50,
+        },
+        legend: {
+          textStyle,
+          show: legend.show,
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        xAxis: xAxis.map((e) => {
+          return {
+            ...e,
+            type: 'category',
+            axisLabel: {
+              interval: 0,
+              width: 800 / get(baseSeries, '[0].data.length', 1),
+              overflow: 'break',
+            },
+          };
+        }),
+        yAxis: yAxis.map((e) => {
+          return {
+            ...e,
+            splitLine: {
+              lineStyle: {
+                opacity: 0.1,
+              },
+            },
+          };
+        }),
+        series: baseSeries.reduce((curr: EChartsOption[], serie, index) => {
+          const colors = ['#66ffff', '#00ff66', '#ffff66'];
+          if (baseSeries.length === 1) {
+            curr.push({
+              ...serie,
+              type: 'pictorialBar',
+              symbol: 'circle',
+              symbolPosition: 'end',
+              symbolSize: [20, 10],
+              symbolOffset: [0, -5],
+              barGap: '-100%',
+              yAxisIndex: index,
+              itemStyle: {
+                color: ({ dataIndex }) => colors[dataIndex % colors.length],
+              },
+            });
+            curr.push({
+              ...serie,
+              type: 'pictorialBar',
+              symbol: 'circle',
+              symbolPosition: 'start',
+              symbolSize: [20, 10],
+              symbolOffset: [0, 5],
+              barGap: '-100%',
+              yAxisIndex: index,
+              itemStyle: {
+                color: ({ dataIndex }) => colors[dataIndex % colors.length],
+              },
+            });
+          }
+          curr.push({
+            ...serie,
+            type: 'bar',
+            silent: true,
+            yAxisIndex: index,
+            barWidth: 20,
+            barGap: '100%',
+            itemStyle: {
+              color: ({ dataIndex }) =>
+                new graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: `${colors[dataIndex % colors.length]}44` },
+                  { offset: 0.5, color: colors[dataIndex % colors.length] },
+                  { offset: 1, color: colors[dataIndex % colors.length] },
+                ]),
+              borderRadius: [5, 5, 0, 0],
+            },
+          });
+
+          return curr;
+        }, []),
+      };
+    }
+
     return {};
   };
 

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

@@ -423,6 +423,58 @@
       center bottom;
   }
 
+  .gallery > .gallery-item_I {
+    width: 120px;
+    height: 30px;
+    position: absolute;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    background-image: url(/@/assets/images/home-container/configurable/dusthome/gallery_I_2.png);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+
+    .gallery-item__value {
+      font-size: 20px;
+    }
+  }
+  .gallery > .gallery-item_I:nth-child(2) {
+    top: calc(50% - 51px);
+    left: calc(50% - 200px);
+    width: 110px;
+    height: 102px;
+    line-height: 102px;
+    padding: 0;
+    background-image: url(/@/assets/images/home-container/configurable/dusthome/gallery_I_1.png);
+
+    .gallery-item__label {
+      display: none;
+    }
+    .gallery-item__value {
+      width: 100%;
+      text-align: center;
+      font-size: 24px;
+    }
+  }
+  .gallery > .gallery-item_I:nth-child(3) {
+    top: calc(50% - 35px);
+    left: calc(50% - 70px);
+  }
+  .gallery > .gallery-item_I:nth-child(4) {
+    top: calc(50% - 35px);
+    left: calc(50% + 70px);
+  }
+  .gallery > .gallery-item_I:nth-child(5) {
+    bottom: calc(50% - 35px);
+    left: calc(50% - 70px);
+  }
+  .gallery > .gallery-item_I:nth-child(6) {
+    bottom: calc(50% - 35px);
+    left: calc(50% + 70px);
+  }
+
   .gallery-item__value_red {
     color: red;
   }
@@ -441,4 +493,7 @@
   .gallery-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

@@ -241,6 +241,71 @@
     font-size: 18px;
     color: aliceblue;
   }
+
+  .list_H {
+    background: none;
+  }
+  .list-item__content_H {
+    height: 50px;
+    background-repeat: no-repeat;
+    padding: 20px 50px 0 50px;
+    display: flex;
+    background-position: bottom;
+    background-size: 100% auto;
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_h.png);
+    margin-bottom: 10px;
+    text-align: center;
+  }
+  .list-item__content_H > div {
+    flex-basis: 33.3%;
+  }
+
+  .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: url('/@/assets/images/home-container/configurable/list_bg_i.png');
+    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;
+    // color: #00fbfe;
+    position: absolute;
+    font-size: 18px;
+  }
+
   // .list-item__icon_red {
   //   background-image: url('@/assets/images/home-container/configurable/warn_icon_5.png');
   // }
@@ -308,4 +373,7 @@
   .list-item__value_white {
     color: white;
   }
+  .gallery-item__value_lightblue {
+    color: @vent-configurable-home-light-border;
+  }
 </style>

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

@@ -16,7 +16,7 @@
 </template>
 <script lang="ts" setup>
   import { computed, defineProps } from 'vue';
-  import _ from 'lodash-es';
+  import _ from 'lodash';
 
   let props = withDefaults(
     defineProps<{
@@ -140,6 +140,7 @@
     }
     .table__content_list_C {
       .table__content_list_row {
+        min-height: 50px;
         // background-position: center;
         background-size: 100% auto;
         background-repeat: no-repeat;

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

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="mini-board" :class="`mini-board_${type}`">
+  <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}`">
@@ -44,6 +44,22 @@
     }
   );
 
+  // 获取某些 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>
@@ -88,7 +104,7 @@
   }
   .mini-board_E {
     width: 30%;
-    height: 200px;
+    height: 180px;
     padding: 20px 5px;
     background-image: url('/@/assets/images/home-container/configurable/board_bg_1.png');
     background-position: center bottom;
@@ -111,6 +127,15 @@
     background-position: center bottom;
     background-repeat: no-repeat;
   }
+  .mini-board_H {
+    width: 174px;
+    height: 104px;
+    background-image: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+    background-size: 100% auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    padding: 45px 0 0 0;
+  }
 
   .mini-board__value_A {
     color: @vent-gas-primary-text;
@@ -154,17 +179,14 @@
     line-height: 17px;
     height: 17px;
   }
-
   .mini-board__value_E {
     font-size: 20px;
     font-weight: bold;
-    margin-top: 30px;
-    // line-height: 76px;
   }
   .mini-board__label_E {
-    line-height: 17px;
-    height: 80px;
-    padding-top: 60px;
+    line-height: 20px;
+    height: 90px;
+    padding-top: 30%;
     background-repeat: no-repeat;
     background-position: center top;
   }
@@ -205,4 +227,17 @@
       background-image: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
     }
   }
+
+  .mini-board_H_low_risk {
+    background-image: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+  }
+  .mini-board_H_risk {
+    background-image: url('/@/assets/images/home-container/configurable/board_bg_2.png');
+  }
+  .mini-board_H_high_risk {
+    background-image: url('/@/assets/images/home-container/configurable/board_bg_5.png');
+  }
+  .mini-board_H_warning {
+    background-image: url('/@/assets/images/home-container/configurable/board_bg_4.png');
+  }
 </style>

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

@@ -132,6 +132,64 @@ export const getDisHome = (params) => {
         e.chval = e.chVal || 0;
       });
     }
+    if (res.obfObj) {
+      res.obfObj.obfObjModded = [
+        {
+          objType: '甲烷',
+          arrayDev: res.obfObj.arrayDev.map((e) => {
+            return {
+              strinstallpos: e.strinstallpos,
+              val: e.ch4Val || 0,
+            };
+          }),
+        },
+        {
+          objType: '一氧化碳',
+          arrayDev: res.obfObj.arrayDev.map((e) => {
+            return {
+              strinstallpos: e.strinstallpos,
+              val: e.coVal || 0,
+            };
+          }),
+        },
+        {
+          objType: '乙炔',
+          arrayDev: res.obfObj.arrayDev.map((e) => {
+            return {
+              strinstallpos: e.strinstallpos,
+              val: e.c2h2Val || 0,
+            };
+          }),
+        },
+        {
+          objType: '二氧化碳',
+          arrayDev: res.obfObj.arrayDev.map((e) => {
+            return {
+              strinstallpos: e.strinstallpos,
+              val: e.co2Val || 0,
+            };
+          }),
+        },
+        {
+          objType: '氧气',
+          arrayDev: res.obfObj.arrayDev.map((e) => {
+            return {
+              strinstallpos: e.strinstallpos,
+              val: e.o2Val || 0,
+            };
+          }),
+        },
+        {
+          objType: '乙烯',
+          arrayDev: res.obfObj.arrayDev.map((e) => {
+            return {
+              strinstallpos: e.strinstallpos,
+              val: e.c2h4Val || 0,
+            };
+          }),
+        },
+      ];
+    }
     return res;
   });
 };

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

@@ -158,11 +158,11 @@ export const testConfigBDDust: Config[] = [
         items: [
           {
             name: 'gallery',
-            basis: '20%',
+            basis: '30%',
           },
           {
             name: 'complex_list',
-            basis: '80%',
+            basis: '70%',
           },
         ],
       },
@@ -170,33 +170,33 @@ export const testConfigBDDust: Config[] = [
       chart: [],
       gallery: [
         {
-          type: 'F',
+          type: 'I',
           readFrom: 'dustManageInfo',
           items: [
             {
               label: '',
               value: '${totalNum}',
-              color: 'blue',
+              color: 'white',
             },
             {
               label: '低风险',
               value: '${dfxNum}',
-              color: 'blue',
+              color: 'lightblue',
             },
             {
               label: '一般风险',
               value: '${ybNum}',
-              color: 'blue',
+              color: 'lightblue',
             },
             {
               label: '较大风险',
               value: '${jdNum}',
-              color: 'blue',
+              color: 'lightblue',
             },
             {
               label: '重大风险',
               value: '${zdNum}',
-              color: 'blue',
+              color: 'lightblue',
             },
           ],
         },
@@ -206,7 +206,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [
         {
-          type: 'A',
+          type: 'E',
           readFrom: 'dustManageInfo.sysList',
           mapFromData: true,
           items: [
@@ -231,12 +231,81 @@ export const testConfigBDDust: Config[] = [
         },
       ],
       preset: [],
-      // mock: BDdustMock,
+      mock: BDdustMock,
     },
     showStyle: {
-      size: 'width:450px;height:750px;',
+      size: 'width:440px;height:460px;',
       version: '保德',
-      position: 'top:170px;left:0;',
+      position: 'top:170px;left:10px;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '设备信息',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'row',
+        items: [
+          {
+            name: 'table',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          readFrom: '',
+          columns: [
+            {
+              name: '设备名称',
+              prop: 'name',
+            },
+            {
+              name: '连接状态',
+              prop: 'st',
+            },
+            {
+              name: '应用场景',
+              prop: 'sc',
+            },
+            {
+              name: '喷雾状态',
+              prop: 'pw',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:440px;height:280px;',
+      version: '保德',
+      position: 'top:640px;left:10px;',
     },
   },
   {
@@ -294,12 +363,12 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: BDdustMock,
+      mock: BDdustMock,
     },
     showStyle: {
-      size: 'width:1000px;height:280px;',
+      size: 'width:980px;height:280px;',
       version: '保德',
-      position: 'top:640px;left:460px',
+      position: 'bottom:8px;left:470px',
     },
   },
   {
@@ -369,12 +438,12 @@ export const testConfigBDDust: Config[] = [
       complex_list: [],
       preset: [],
       to: 'http://10.248.210.154:8801',
-      // mock: BDdustMock,
+      mock: BDdustMock,
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
+      size: 'width:440px;height:300px;',
       version: '保德',
-      position: 'top:60px;right:0;',
+      position: 'top:60px;right:10px;',
     },
   },
   {
@@ -414,7 +483,7 @@ export const testConfigBDDust: Config[] = [
       gallery_list: [],
       table: [
         {
-          type: 'C',
+          type: 'A',
           readFrom: 'devGbsb',
           columns: [
             {
@@ -435,12 +504,12 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: BDdustMock,
+      mock: BDdustMock,
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
+      size: 'width:440px;height:280px;',
       version: '保德',
-      position: 'top:350px;right:0;',
+      position: 'top:370px;right:10px;',
     },
   },
   {
@@ -502,12 +571,12 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: BDdustMock,
+      mock: BDdustMock,
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
+      size: 'width:440px;height:260px;',
       version: '保德',
-      position: 'top:640px;right:0;',
+      position: 'top:660px;right:10px;',
     },
   },
 ];
@@ -5511,7 +5580,7 @@ export const testConfigBDFire: Config[] = [
       },
       board: [
         {
-          type: 'A',
+          type: 'H',
           readFrom: 'fireManageInfo',
           layout: 'label-top',
           items: [
@@ -5561,9 +5630,9 @@ export const testConfigBDFire: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:450px;height:310px;',
+      size: 'width:440px;height:300px;',
       version: '保德',
-      position: 'top:170px;left:0;',
+      position: 'top:170px;left:10px;',
     },
   },
   {
@@ -5640,9 +5709,9 @@ export const testConfigBDFire: Config[] = [
       },
     },
     showStyle: {
-      size: 'width:450px;height:120px;',
+      size: 'width:440px;height:130px;',
       version: '保德',
-      position: 'top:490px;left:0;',
+      position: 'top:480px;left:10px;',
     },
   },
   {
@@ -5672,11 +5741,11 @@ export const testConfigBDFire: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '30%',
+            basis: '35%',
           },
           {
             name: 'chart',
-            basis: '70%',
+            basis: '65%',
           },
         ],
       },
@@ -5727,9 +5796,9 @@ export const testConfigBDFire: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:450px;height:300px;',
+      size: 'width:440px;height:300px;',
       version: '保德',
-      position: 'top:620px;left:0;',
+      position: 'top:620px;left:10px;',
     },
   },
   {
@@ -5759,11 +5828,11 @@ export const testConfigBDFire: Config[] = [
         items: [
           {
             name: 'list',
-            basis: '65%',
+            basis: '60%',
           },
           {
             name: 'blast_delta',
-            basis: '35%',
+            basis: '40%',
           },
         ],
       },
@@ -5774,7 +5843,7 @@ export const testConfigBDFire: Config[] = [
       table: [],
       list: [
         {
-          type: 'G',
+          type: 'I',
           readFrom: '',
           items: [
             {
@@ -5839,9 +5908,9 @@ export const testConfigBDFire: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:1000px;height:300px;',
+      size: 'width:980px;height:300px;',
       version: '保德',
-      position: 'top:620px;left:460px',
+      position: 'bottom:8px;left:470px',
     },
   },
   {
@@ -5902,9 +5971,9 @@ export const testConfigBDFire: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:1000px;height:280px;',
+      size: 'width:980px;height:280px;',
       version: '保德',
-      position: 'top:640px;left:460px',
+      position: 'bottom:8px;left:470px',
     },
   },
   {
@@ -5914,10 +5983,10 @@ export const testConfigBDFire: Config[] = [
     moduleData: {
       header: {
         show: true,
-        readFrom: 'arrayDev',
+        readFrom: 'obfObjModded',
         selector: {
           show: true,
-          value: '${strinstallpos}',
+          value: '${objType}',
         },
         slot: {
           show: false,
@@ -5933,53 +6002,29 @@ export const testConfigBDFire: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'board',
+            name: 'chart',
             basis: '100%',
           },
         ],
       },
-      board: [
+      board: [],
+      chart: [
         {
-          type: 'G',
-          layout: 'label-top',
+          type: 'bar_cylinder',
           readFrom: '',
-          items: [
-            {
-              label: '一氧化碳',
-              value: '${coVal}',
-            },
-            {
-              label: '二氧化碳',
-              value: '${co2Val}',
-            },
-            {
-              label: '氧气',
-              value: '${o2Val}',
-            },
-            {
-              label: '温度',
-              value: '${tempVal}',
-            },
-            {
-              label: '乙烯',
-              value: '${c2h4Val}',
-            },
-            {
-              label: '甲烷',
-              value: '${ch4Val}',
-            },
-            {
-              label: '乙炔',
-              value: '${c2h2Val}',
-            },
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '', position: 'left' }],
+          series: [
             {
-              label: '压差',
-              value: '${dpVal}',
+              readFrom: 'arrayDev',
+              xprop: 'strinstallpos',
+              yprop: 'val',
+              label: '',
             },
           ],
         },
       ],
-      chart: [],
       gallery: [],
       gallery_list: [],
       table: [],
@@ -5989,9 +6034,9 @@ export const testConfigBDFire: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:450px;height:230px;',
+      size: 'width:440px;height:230px;',
       version: '保德',
-      position: 'top:170px;right:0;',
+      position: 'top:170px;right:10px;',
     },
   },
   {
@@ -6063,7 +6108,7 @@ export const testConfigBDFire: Config[] = [
       table: [],
       list: [
         {
-          type: 'F',
+          type: 'H',
           readFrom: 'arrayCount',
           items: [
             {
@@ -6092,9 +6137,9 @@ export const testConfigBDFire: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:450px;height:240px;',
+      size: 'width:440px;height:240px;',
       version: '保德',
-      position: 'top:410px;right:0;',
+      position: 'top:410px;right:10px;',
     },
   },
   {
@@ -6159,12 +6204,12 @@ export const testConfigBDFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: BDfireMock,
+      mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:450px;height:260px;',
+      size: 'width:440px;height:260px;',
       version: '保德',
-      position: 'top:660px;right:0;',
+      position: 'top:660px;right:10px;',
     },
   },
 ];
@@ -6267,9 +6312,9 @@ export const testConfigBDNew: Config[] = [
   //     // mock: BDfireMock,
   //   },
   //   // showStyle: {
-  //   //   size: 'width:450px;height:760px;',
+  //   //   size: 'width:440px;height:760px;',
   //   //   version: '保德',
-  //   //   position: 'top:160px;left:0;',
+  //   //   position: 'top:160px;left:10px;',
   //   // },
   //   showStyle: {
   //     size: 'width:1000px;height:280px;',
@@ -6373,9 +6418,9 @@ export const testConfigBDNew: Config[] = [
   //     // mock: BDfireMock,
   //   },
   //   showStyle: {
-  //     size: 'width:450px;height:760px;',
+  //     size: 'width:440px;height:760px;',
   //     version: '保德',
-  //     position: 'top:160px;left:0;',
+  //     position: 'top:160px;left:10px;',
   //   },
   // },
   // {
@@ -6705,7 +6750,7 @@ export const testConfigBDNew: Config[] = [
   //     },
   //   },
   //   showStyle: {
-  //     size: 'width:450px;height:570px;',
+  //     size: 'width:440px;height:570px;',
   //     version: '新版',
   //     position: 'top:60px;right:0;',
   //   },
@@ -6803,7 +6848,7 @@ export const testConfigBDNew: Config[] = [
   //     // mock: BDfireMock,
   //   },
   //   showStyle: {
-  //     size: 'width:450px;height:280px;',
+  //     size: 'width:440px;height:280px;',
   //     version: '保德',
   //     position: 'top:640px;right:0;',
   //   },

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

@@ -66,18 +66,18 @@
   import ModuleBD from './components/ModuleBD.vue';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getDisHome } from './configurable.api';
+  import { testConfigBDDust } from './configurable.data.bd';
   // import { getToken } from '/@/utils/auth';
 
   const { configs, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage('保德煤矿粉尘灾害预警系统');
+  const { mainTitle, data, updateData } = useInitPage('保德煤矿粉尘灾害预警系统');
   let interval: number | undefined;
   // function hideLoading() {
   //   loading.value = false;
   // }
   onMounted(() => {
     fetchConfigs('BD_dust').then(() => {
-      // configs.value = testConfigVent;
-      updateEnhancedConfigs(configs.value);
+      configs.value = testConfigBDDust;
 
       getDisHome({
         dataList: configs.value
@@ -177,7 +177,8 @@
     position: absolute;
     height: 115px;
     top: 50px;
-    width: 450px;
+    left: 10px;
+    width: 440px;
     background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
     background-color: #000723;
     background-repeat: no-repeat;

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

@@ -35,12 +35,10 @@
     </div>
     <div class="right-t">
       <div class="tcontent-l" @click="redirectTo('/grout-home')">
-        <div>智能</div>
-        <div>注浆系统</div>
+        <div>智能注浆系统</div>
       </div>
       <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
-        <div>智能</div>
-        <div>注氮系统</div>
+        <div>智能注氮系统</div>
       </div>
     </div>
     <ModuleBD
@@ -54,6 +52,7 @@
       :visible="true"
     />
     <ModuleBDDual
+      v-if="cfgA && cfgB"
       :show-style="cfgA.showStyle"
       :module-data-a="cfgA.moduleData"
       :module-name-a="cfgA.moduleName"
@@ -76,9 +75,9 @@
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
   import ModuleBDDual from './components/ModuleBDDual.vue';
-  // import { testConfigBDFire } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getDisHome } from './configurable.api';
+  // import { testConfigBDFire } from './configurable.data.bd';
   // import { getToken } from '/@/utils/auth';
 
   const cfgs = computed(() =>
@@ -97,15 +96,14 @@
     })
   );
   const { configs, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage('保德煤矿火灾预警系统');
+  const { mainTitle, data, updateData } = useInitPage('保德煤矿火灾预警系统');
   let interval: number | undefined;
   // function hideLoading() {
   //   loading.value = false;
   // }
   onMounted(() => {
     fetchConfigs('BD_fire').then(() => {
-      // configs.value = testConfigVent;
-      updateEnhancedConfigs(configs.value);
+      // configs.value = testConfigBDFire;
 
       getDisHome({
         dataList: configs.value
@@ -209,6 +207,7 @@
     position: absolute;
     height: 115px;
     top: 40px;
+    left: 5px;
     width: 450px;
     background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
     background-color: #000723;
@@ -269,7 +268,7 @@
     position: absolute;
     // height: 160px;
     height: 115px;
-    right: 0;
+    right: 5px;
     top: 50px;
     width: 450px;
     background-image: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
@@ -287,36 +286,24 @@
       height: 100%;
       font-size: 16px;
       font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
-        url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
-      background-size:
-        auto 100%,
-        auto auto;
+      background-image: url(/@/assets/images/home-container/configurable/firehome/znzjxt.png);
+      background-size: auto 100%;
       background-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
+      background-position: center;
       text-align: center;
-      padding-top: 35px;
-      line-height: 40px;
+      padding-top: 85px;
     }
     .tcontent-r {
       flex: 1;
       height: 100%;
       font-size: 16px;
       font-weight: bold;
-      background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
-        url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
-      background-size:
-        auto 100%,
-        auto auto;
+      background-image: url(/@/assets/images/home-container/configurable/firehome/znzdxt.png);
+      background-size: auto 100%;
       background-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
+      background-position: center;
       text-align: center;
-      padding-top: 35px;
-      line-height: 40px;
+      padding-top: 85px;
     }
   }
 

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

@@ -15,87 +15,120 @@
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
 
-    <template v-if="isOriginal">
-      <ModuleOriginal
-        v-for="cfg in configs"
-        :key="cfg.deviceType"
-        :show-style="cfg.showStyle"
-        :module-data="cfg.moduleData"
-        :module-name="cfg.moduleName"
-        :device-type="cfg.deviceType"
-        :data="data"
-        :visible="true"
-      />
-    </template>
-    <template v-else-if="isCommon">
-      <ModuleCommon
-        v-for="cfg in configs"
-        :key="cfg.deviceType"
-        :show-style="cfg.showStyle"
-        :module-data="cfg.moduleData"
-        :module-name="cfg.moduleName"
-        :device-type="cfg.deviceType"
-        :data="data"
-        :visible="true"
-      />
-    </template>
-    <template v-else>
-      <!-- 下面是正常展示的各新版模块 -->
-      <ModuleEnhanced
-        v-for="cfg in enhancedConfigs"
-        :key="cfg.deviceType"
-        :visible="cfg.visible"
-        :show-style="cfg.showStyle"
-        :module-data="cfg.moduleData"
-        :module-name="cfg.moduleName"
-        :device-type="cfg.deviceType"
-        :data="data"
-        @close="cfg.visible = false"
-      />
-      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
-        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
-          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
+    <div class="left-t">
+      <div class="tcontent-area">
+        <div class="tcontent-l">
+          <div>监测</div>
+          <div>区域</div>
         </div>
+        <div class="tcontent-c">
+          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
+            {{ data.fireAllMineWarn }}
+          </div>
+          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
+        </div>
+        <div class="tcontent-r">
+          <div>火灾</div>
+          <div>风险</div>
+        </div>
+      </div>
+    </div>
+    <div class="right-t">
+      <div class="tcontent-l" @click="redirectTo('/grout-home')">
+        <div>智能注浆系统</div>
+      </div>
+      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
+        <div>智能注氮系统</div>
       </div>
-    </template>
-    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+    </div>
+    <ModuleBD
+      v-for="cfg in cfgs"
+      :key="cfg.deviceType"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="data"
+      :visible="true"
+    />
+    <ModuleBDDual
+      v-if="cfgA && cfgB"
+      :show-style="cfgA.showStyle"
+      :module-data-a="cfgA.moduleData"
+      :module-name-a="cfgA.moduleName"
+      :device-type-a="cfgA.deviceType"
+      :module-data-b="cfgB.moduleData"
+      :module-name-b="cfgB.moduleName"
+      :device-type-b="cfgB.deviceType"
+      :data="data"
+      :visible="true"
+    />
+    <div style="width: 1000px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted } from 'vue';
+  import { computed, onMounted, onUnmounted } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
-  import ModuleEnhanced from './components/ModuleEnhanced.vue';
-  import ModuleOriginal from './components/ModuleOriginal.vue';
-  import ModuleCommon from './components/ModuleCommon.vue';
-  // import { useRoute } from 'vue-router';
+  import ModuleBD from './components/ModuleBD.vue';
+  import ModuleBDDual from './components/ModuleBDDual.vue';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getHomeData } from './configurable.api';
-  import { testConfigVent } from './configurable.data';
+  import { getDisHome } from './configurable.api';
+  import { testConfigBDFire } from './configurable.data.bd';
+  // import { getToken } from '/@/utils/auth';
 
-  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能通风管控系统');
+  const cfgs = computed(() =>
+    configs.value.filter((_, index) => {
+      return index !== 4 && index !== 3;
+    })
+  );
+  const cfgA = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 3;
+    })
+  );
+  const cfgB = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 4;
+    })
+  );
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('保德煤矿火灾预警系统');
   let interval: number | undefined;
-
+  // function hideLoading() {
+  //   loading.value = false;
+  // }
   onMounted(() => {
-    // fetchConfigs('vent').then(() => {
-    configs.value = testConfigVent;
-    updateEnhancedConfigs(configs.value);
+    // fetchConfigs('BD_fire').then(() => {
+    configs.value = testConfigBDFire;
 
-    getHomeData({}).then(updateData);
+    getDisHome({
+      dataList: configs.value
+        .map((e) => e.deviceType)
+        .concat('fireAllMineWarn')
+        .join(','),
+    }).then(updateData);
     // });
-    setInterval(() => {
-      getHomeData({}).then(updateData);
-    }, 6000);
+    // setInterval(() => {
+    //   getDisHome({
+    //     dataList: configs.value
+    //       .map((e) => e.deviceType)
+    //       .concat('fireAllMineWarn')
+    //       .join(','),
+    //   }).then(updateData);
+    // }, 60000);
   });
 
   onUnmounted(() => {
     clearInterval(interval);
   });
+
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -108,18 +141,18 @@
     height: 100%;
     color: @white;
     position: relative;
-    // background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
+    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
 
     .top-bg {
       width: 100%;
-      height: 56px;
-      background: url('@/assets/images/vent/home/modal-top.png') no-repeat center;
+      height: 86px;
+      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
-        height: 56px;
+        height: 86px;
         font-family: 'douyuFont';
-        font-size: 20px;
+        font-size: 26px;
         letter-spacing: 2px;
         display: flex;
         justify-content: center;
@@ -129,13 +162,13 @@
 
     // .module-left {
     //   position: absolute;
-    //   width: 450px;
+    //   width: 440px;
     //   height: 280px;
     //   left: 0;
     // }
     // .module-right {
     //   position: absolute;
-    //   width: 450px;
+    //   width: 440px;
     //   height: 280px;
     //   right: 0;
     // }
@@ -169,6 +202,111 @@
       border-bottom: 2px solid #3df6ff;
     }
   }
+
+  .left-t {
+    position: absolute;
+    height: 115px;
+    top: 40px;
+    left: 10px;
+    width: 440px;
+    background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
+    background-color: #000723;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+
+    .tcontent-area {
+      display: flex;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      box-sizing: border-box;
+      align-items: center;
+      justify-content: space-around;
+      width: 100%;
+      height: 70px;
+      padding: 0 15px;
+      transform: translate(0, -40%);
+
+      .tcontent-l {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #9da5aa;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
+
+      .tcontent-c {
+        display: flex;
+        flex: 3;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+
+      .tcontent-r {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #9da5aa;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
+    }
+  }
+  .right-t {
+    position: absolute;
+    // height: 160px;
+    height: 115px;
+    right: 10px;
+    top: 50px;
+    width: 440px;
+    background-image: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
+    background-color: #000723;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    z-index: 1;
+
+    .tcontent-l {
+      flex: 1;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      background-image: url(/@/assets/images/home-container/configurable/firehome/znzjxt.png);
+      background-size: auto 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+      text-align: center;
+      padding-top: 85px;
+    }
+    .tcontent-r {
+      flex: 1;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      background-image: url(/@/assets/images/home-container/configurable/firehome/znzdxt.png);
+      background-size: auto 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+      text-align: center;
+      padding-top: 85px;
+    }
+  }
+
   :deep(.loading-box) {
     position: unset;
   }