Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

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

@@ -16,7 +16,7 @@ export const ModuleSizeOptions = _.map(ModuleSizeMap, (v, k) => ({
 }));
 
 /** 默认的模块版本选项，即外边框样式 */
-export const ModuleVersionOptions = _.map(['原版', '新版'], (k) => ({
+export const ModuleVersionOptions = _.map(['原版', '新版', '保德'], (k) => ({
   value: k,
   label: k,
 }));

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

@@ -74,11 +74,11 @@ export interface ModuleData {
 
 export interface ShowStyle {
   /** 模块的宽高，特殊情况下可以自定义宽高 */
-  size: keyof typeof ModuleSizeMap;
+  size: string;
   /** 模块的版本，除了新版，只要有一个模块指定为旧版或其他版本，那么整个页面风格将变更为对应版本，优先级 旧版 > 普通版 > 新版 */
   version: '原版' | '新版' | '普通版' | '保德';
   /** 模块的位置，即定位，特殊情况下可以自定义定位 */
-  position: keyof typeof ModulePositionMap;
+  position: string;
 }
 
 export interface ModuleDataBoard {
@@ -117,7 +117,7 @@ export interface ModuleDataList {
 
 export interface ModuleDataGallery {
   /** 画廊预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
   /** 核心配置，每个画廊项对应一项 */
@@ -160,7 +160,7 @@ export interface ModuleDataGalleryList {
 
 export interface ModuleDataChart {
   /** 图表类型，一个类型对应一种图表预设 */
-  type: 'pie' | 'bar' | 'line' | 'line_area';
+  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。特别的是，pie 类型的图表应将路径指到对象上，其他的图表应该指到数组上 */
   readFrom: string;
   /** 排序依据，该项应配置将配合 readFrom 使用 */

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

@@ -36,9 +36,11 @@
           </div> -->
       </div>
     </div>
-    <slot>
-      <Content :style="{ height: '100%' }" :moduleData="moduleData" :data="selectedDevice" />
-    </slot>
+    <div class="dane-content">
+      <slot>
+        <Content style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
+      </slot>
+    </div>
   </div>
 </template>
 
@@ -70,9 +72,6 @@
   // 根据配置里的定位判断应该使用哪个module组件
   const daneClass = computed(() => {
     const position = props.showStyle.position;
-    if (!props.moduleName) {
-      return 'dane-s';
-    }
     if (position.includes('left:0')) {
       return 'dane-m';
     }
@@ -107,6 +106,10 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    background-image: url(/home/zekong/mky-vent-base/src/assets/images/home-container/configurable/firehome/module-title.png);
+    background-repeat: no-repeat;
+    background-position: center top;
+    background-size: 100% auto;
 
     .dane-title {
       display: flex;
@@ -115,7 +118,7 @@
       justify-content: space-between;
       width: 100%;
       height: 34px;
-      padding: 0 30px 0 50px;
+      padding: 0 40px 0 50px;
 
       .common-navL {
         display: flex;
@@ -150,10 +153,16 @@
     }
 
     .dane-content {
-      position: relative;
+      height: calc(100% - 34px);
+      // border-image: linear-gradient(#1dabeb, #1dabeb22);
+      border-image: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723) 30;
+      // border-left: 1px;
+      // border-right: 1px;
+      border-width: 2px;
+      border-style: solid;
       box-sizing: border-box;
-      width: 100%;
-      padding: 10px;
+      border-top: none;
+      background-image: linear-gradient(#000723 94%, #1dabeb11);
     }
   }
 
@@ -163,7 +172,7 @@
   }
 
   .dane-m {
-    background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
+    // background: url('@/assets/images/home-container/configurable/firehome/common-border1.png') no-repeat;
     background-size: 100% auto;
   }
 
@@ -173,11 +182,11 @@
   }
 
   .dane-w {
-    background: url('@/assets/images/home-container/configurable/firehome/common-border3.png') no-repeat;
-    background-size: 100% auto;
+    background-image: url(/home/zekong/mky-vent-base/src/assets/images/home-container/configurable/firehome/module-title-long.png);
+    background-size: 100% 37px;
   }
 
-  :deep(.vMonitor-select-selector) {
+  :deep(.zxm-select-selector) {
     height: 22px !important;
     border: none !important;
     // background-color: rgb(15 64 88) !important;
@@ -185,47 +194,51 @@
     color: #8087a1 !important;
   }
 
-  :deep(.vMonitor-select-selection-placeholder) {
+  :deep(.zxm-select-selection-placeholder) {
     color: #8087a1 !important;
   }
 
-  :deep(.vMonitor-select-arrow) {
+  :deep(.zxm-select-arrow) {
     color: #8087a1 !important;
   }
 
-  :deep(.vMonitor-picker) {
+  :deep(.zxm-picker) {
     border: none !important;
     background-color: rgb(15 64 88) !important;
     box-shadow: none;
     color: #a1dff8 !important;
   }
 
-  :deep(.vMonitor-picker-input > input) {
+  :deep(.zxm-picker-input > input) {
     color: #a1dff8 !important;
     text-align: center !important;
   }
 
-  :deep(.vMonitor-picker-separator) {
+  :deep(.zxm-picker-separator) {
     color: #a1dff8 !important;
   }
 
-  :deep(.vMonitor-picker-active-bar) {
+  :deep(.zxm-picker-active-bar) {
     display: none !important;
   }
 
-  :deep(.vMonitor-picker-suffix) {
+  :deep(.zxm-picker-suffix) {
     color: #a1dff8 !important;
   }
 
-  :deep(.vMonitor-switch) {
+  :deep(.zxm-switch) {
     min-width: 48px !important;
   }
 
-  :deep(.vMonitor-switch-checked) {
+  :deep(.zxm-switch-checked) {
     background-color: rgb(15 64 89) !important;
   }
 
-  :deep(.vMonitor-switch-handle::before) {
+  :deep(.zxm-switch-handle::before) {
     background-color: rgb(33 179 247) !important;
   }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
 </style>

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

@@ -54,19 +54,7 @@
       </template>
       <!-- 表格部分，这部分通常是占一整个模块的 -->
       <template v-if="config.key === 'table'">
-        <CommonTable
-          v-if="config.type === 'A'"
-          :columns="config.columns"
-          :data="config.data"
-          class="content__module text-center flex-grow overflow-auto"
-        />
-        <CustomTable
-          v-else
-          :type="config.type"
-          :columns="config.columns"
-          :data="config.data"
-          class="content__module text-center flex-grow overflow-auto"
-        />
+        <CustomTable :type="config.type" :columns="config.columns" :data="config.data" class="content__module text-center flex-grow overflow-auto" />
       </template>
       <template v-if="config.key === 'blast_delta'">
         <BlastDelta class="content__module" :pos-monitor="config.config.mock" :canvas-size="{ width: 250, height: 137 }" />
@@ -100,7 +88,6 @@
   import CustomChart from './detail/CustomChart.vue';
   import { get, clone } from 'lodash-es';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
-  import CommonTable from '../../billboard/components/CommonTable.vue';
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
   import FIreWarn from './preset/FIreWarn.vue';
   import FIreControl from './preset/FIreControl.vue';
@@ -245,7 +232,7 @@
           arr.push({
             key,
             config: cfg,
-            data: get(data, cfg.readFrom, []),
+            data,
           });
           break;
         }
@@ -258,7 +245,7 @@
             ...cfg,
             key,
             columns: cfg.columns,
-            data: get(data, cfg.readFrom, []),
+            data,
           });
           break;
         }

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

@@ -55,13 +55,15 @@
 
   .list-item_A {
     position: relative;
-    height: 155px;
+    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: 35%;
+    left: 41%;
     font-size: 20px;
     top: 15px;
   }
@@ -75,13 +77,13 @@
   .list-item__content_A:nth-of-type(2) {
     position: absolute;
     top: 15px;
-    left: 5%;
+    left: 14%;
     width: 22%;
     text-align: center;
     display: block;
 
     .list-item__label {
-      font-size: 20px;
+      font-size: 18px;
       margin-bottom: 25px;
     }
     .list-item__info {
@@ -93,7 +95,7 @@
   }
   .list-item__content_A:nth-of-type(3) {
     position: absolute;
-    left: 35%;
+    left: 41%;
     top: 55px;
 
     .list-item__info {
@@ -105,7 +107,7 @@
   }
   .list-item__content_A:nth-of-type(4) {
     position: absolute;
-    left: 60%;
+    left: 66%;
     top: 55px;
 
     .list-item__info {
@@ -141,13 +143,19 @@
     align-items: center;
     justify-content: space-between;
     text-align: center;
-    padding-right: 20px;
-    margin-bottom: 10px;
+    padding-right: 50px;
+    margin-top: 15px;
+    height: 40px;
 
     .list-item__label {
-      font-size: 12px;
+      font-size: 11px;
+    }
+    .list-item__value {
+      font-size: 21px;
+      margin-left: 5px;
     }
     .list-item__content_B {
+      height: 100%;
       display: flex;
       align-items: center;
     }
@@ -181,7 +189,7 @@
     color: yellowgreen;
   }
   .list-item__value_blue {
-    color: lightblue;
+    color: #009bff;
   }
   .list-item__value_white {
     color: white;

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

@@ -45,7 +45,7 @@
             data: series.map((serie) => {
               return {
                 name: serie.label,
-                value: getFormattedText(props.chartData, serie.prop, 0),
+                value: get(props.chartData, serie.prop, 0),
                 labelLine: { show: false },
                 label: { show: false },
                 itemStyle: {
@@ -110,7 +110,7 @@
           const data = sorttedData.map((d) => {
             return {
               name: serie.label,
-              value: getFormattedText(d, serie.prop, 0),
+              value: get(d, serie.prop, 0),
             };
           });
           curr.push({
@@ -192,7 +192,7 @@
           const data = sorttedData.map((d) => {
             return {
               name: serie.label,
-              value: getFormattedText(d, serie.prop, 0),
+              value: get(d, serie.prop, 0),
             };
           });
 
@@ -246,7 +246,7 @@
           const data = sorttedData.map((d) => {
             return {
               name: serie.label,
-              value: getFormattedText(d, serie.prop, 0),
+              value: get(d, serie.prop, 0),
             };
           });
 
@@ -268,9 +268,73 @@
           };
         }),
       };
+    }
 
-      return {};
+    if (type === 'line_bar') {
+      return {
+        legend: {
+          top: 10,
+          right: 10,
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        // backgroundColor: '#081f33',
+        textStyle: {
+          color: '#fff',
+        },
+        grid: {
+          left: 40,
+          top: 50,
+          right: 40,
+          bottom: 10,
+          show: false,
+        },
+        xAxis: xAxis.map(() => {
+          return {
+            type: 'category',
+            show: false,
+          };
+        }),
+        yAxis: yAxis.map(() => {
+          return {
+            show: false,
+            // name: e.label,
+            // position: e.align,
+          };
+        }),
+        series: series.map((serie, i) => {
+          const data = sorttedData.map((d) => {
+            return {
+              name: serie.label,
+              value: get(d, serie.prop, 0),
+              label: {
+                show: true,
+                position: 'top',
+                borderWidth: 0,
+                color: '#fff',
+              },
+              itemStyle: {
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#66ffff' },
+                  { offset: 0.2, color: '#66ffff' },
+                  { offset: 1, color: '#66ffff22' },
+                ]),
+              },
+            };
+          });
+
+          return {
+            type: i % 2 ? 'line' : 'bar',
+            smooth: true,
+            data,
+            barWidth: 20,
+          };
+        }),
+      };
     }
+
+    return {};
   };
 
   watch(

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

@@ -152,7 +152,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: auto;
+    height: 100px;
   }
   .gallery-item_center_D {
     background: url(/@/assets/images/home-container/configurable/firehome/img-2.png) no-repeat;
@@ -162,12 +162,13 @@
   }
   .gallery > .gallery-item_D {
     background-image: url(/@/assets/images/home-container/configurable/firehome/img-1.png);
-    background-size: auto 100%;
+    background-size: 100% auto;
     width: 213px;
     height: 87px;
-    align-items: center;
     text-align: center;
-    line-height: 35px;
+    // line-height: 35px;
+    padding-top: 17px;
+    padding-left: 40px;
     display: none;
 
     .gallery-item__value {
@@ -237,7 +238,7 @@
   // }
   .gallery > .gallery-item_F {
     width: 120px;
-    height: 65px;
+    height: 60px;
     position: absolute;
     text-align: center;
     padding-left: 20px;
@@ -252,10 +253,10 @@
   }
   .gallery > .gallery-item_F:nth-child(2) {
     top: 10px;
-    left: 10px;
-    width: 150px;
-    height: 150px;
-    line-height: 150px;
+    left: 30px;
+    width: 130px;
+    height: 130px;
+    line-height: 130px;
     padding: 0;
     background-image: url(/@/assets/images/home-container/configurable/dusthome/img-7.png);
 
@@ -264,22 +265,22 @@
     }
   }
   .gallery > .gallery-item_F:nth-child(3) {
-    top: 10px;
+    top: 15px;
     left: 160px;
     padding-top: 5px;
   }
   .gallery > .gallery-item_F:nth-child(4) {
-    top: 10px;
+    top: 15px;
     left: 280px;
     padding-top: 5px;
   }
   .gallery > .gallery-item_F:nth-child(5) {
-    top: 90px;
+    top: 80px;
     left: 160px;
     padding-top: 5px;
   }
   .gallery > .gallery-item_F:nth-child(6) {
-    top: 90px;
+    top: 80px;
     left: 280px;
     padding-top: 5px;
   }
@@ -317,23 +318,23 @@
     transform: scale(0.7);
   }
   .gallery > .gallery-item_G:nth-child(5) {
-    top: 15px;
-    left: 30px;
+    top: 10px;
+    left: 0px;
     transform: scale(0.5);
   }
   .gallery > .gallery-item_G:nth-child(6) {
-    bottom: 15px;
-    left: 30px;
+    bottom: 10px;
+    left: 0px;
     transform: scale(0.5);
   }
   .gallery > .gallery-item_G:nth-child(7) {
-    top: 15px;
-    right: 30px;
+    top: 10px;
+    right: 0px;
     transform: scale(0.5);
   }
   .gallery > .gallery-item_G:nth-child(8) {
-    bottom: 15px;
-    right: 30px;
+    bottom: 10px;
+    right: 0px;
     transform: scale(0.5);
   }
 
@@ -350,7 +351,7 @@
     color: yellowgreen;
   }
   .gallery-item__value_blue {
-    color: lightblue;
+    color: #009bff;
   }
   .gallery-item__value_white {
     color: white;

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

@@ -174,7 +174,7 @@
     background-position: center;
     background-size: 100% auto;
     background-image: url(/@/assets/images/home-container/configurable/firehome/list.png);
-    margin-bottom: 10px;
+    margin-top: 10px;
     text-align: center;
   }
   .list-item__content_F > div {
@@ -242,7 +242,7 @@
     color: yellowgreen;
   }
   .list-item__value_blue {
-    color: lightblue;
+    color: #009bff;
   }
   .list-item__value_white {
     color: white;

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

@@ -1,16 +1,14 @@
 <template>
-  <div class="table">
-    <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 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>
@@ -60,6 +58,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 5px 0;
 
     .table__content_label {
       width: 400px;
@@ -74,6 +73,13 @@
         font-size: 14px;
       }
     }
+    .table__content_label_A {
+      // border: 1px solid @vent-gas-tab-border;
+      background-image: url(@/assets/images/company/content-label.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      color: #31b9ef;
+    }
     .table__content_label_B {
       // border: 1px solid @vent-gas-tab-border;
       background-image: linear-gradient(to top, #04698c, #04698c00);
@@ -102,18 +108,14 @@
       width: 400px;
       display: flex;
       flex-direction: column;
-      // justify-content: space-around;
-      justify-content: flex-start;
-      padding: 5px 0px;
+      padding: 5px 0;
       box-sizing: border-box;
       overflow-y: auto;
       .table__content_list_row {
         width: 100%;
-        height: 28px;
         display: flex;
         justify-content: space-around;
-        align-items: flex-start;
-        // background: url('@/assets/images/company/content-text.png') no-repeat;
+        align-items: center;
         color: #fff;
         margin-bottom: 5px;
         span {
@@ -127,11 +129,21 @@
       // }
     }
 
+    .table__content_list_A {
+      .table__content_list_row {
+        // background-position: center;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-image: url('@/assets/images/company/content-text.png');
+      }
+    }
     .table__content_list_C {
       .table__content_list_row {
         // background-position: center;
         background-size: 100% auto;
         background-repeat: no-repeat;
+        background-position: center bottom;
         background-image: url('@/assets/images/company/content-text.png');
       }
     }

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

@@ -451,7 +451,8 @@ export const testConfigA: Config[] = [
       // layout: ['list'],
       // layout: ['board'],
       // layout: ['complex_list'],
-      layout: ['gallery'],
+      layout: ['chart'],
+      // layout: ['gallery'],
       board: [
         {
           type: 'E',
@@ -473,7 +474,21 @@ export const testConfigA: Config[] = [
           ],
         },
       ],
-      chart: [],
+      chart: [
+        {
+          type: 'line_bar',
+          readFrom: 'dust',
+          xAxis: [{ label: '${name}' }],
+          yAxis: [
+            { label: 'minDust', align: 'left' },
+            { label: 'flameLength', align: 'right' },
+          ],
+          series: [
+            { label: 'minDust', prop: 'minDust' },
+            { label: 'flameLength', prop: 'flameLength' },
+          ],
+        },
+      ],
       gallery: [
         {
           type: 'G',
@@ -875,6 +890,7 @@ export const testConfigA: Config[] = [
       preset: [],
       gallery: [],
       complex_list: [],
+      gallery_list: [],
       chart: [
         {
           type: 'bar',
@@ -1011,6 +1027,7 @@ export const testConfigA: Config[] = [
       ],
       table: [],
       chart: [],
+      gallery_list: [],
       preset: [
         {
           readFrom: '',
@@ -1020,7 +1037,8 @@ export const testConfigA: Config[] = [
     showStyle: {
       size: 'width:450px;height:280px;',
       version: '新版',
-      position: 'top:60px;right:0;',
+      position: 'top:350px;left:0;',
+      // position: 'top:60px;right:0;',
     },
   },
   // {
@@ -1190,7 +1208,7 @@ export const testConfigA: Config[] = [
         type: 'video',
         link: '',
       },
-      layout: ['complex_list', 'blast_delta', 'list'],
+      layout: ['gallery_list', 'blast_delta', 'list'],
       board: [],
       gallery: [],
       list: [
@@ -1281,7 +1299,8 @@ export const testConfigA: Config[] = [
           mock: posMonitorData,
         },
       ],
-      complex_list: [
+      complex_list: [],
+      gallery_list: [
         {
           type: 'B',
           readFrom: '',
@@ -1328,3 +1347,1172 @@ export const testConfigA: Config[] = [
     },
   },
 ];
+
+const BDdustMock = {
+  // 工作面风险监测
+  worksurface: {
+    risk: [
+      {
+        name: '低风险',
+        count: 3,
+      },
+      {
+        name: '一般风险',
+        count: 0,
+      },
+      {
+        name: '较大风险',
+        count: 0,
+      },
+      {
+        name: '重大风险',
+        count: 2,
+      },
+    ],
+    count: 5,
+    contents: [
+      {
+        risk: '低',
+        name: '81202综放工作面',
+        tmax: '30',
+      },
+      {
+        risk: '低',
+        name: '81205主运掘进面',
+        tmax: '30',
+      },
+      {
+        risk: '低',
+        name: '81202综放工作面',
+        tmax: '30',
+      },
+      {
+        risk: '低',
+        name: '81205主运掘进面',
+        tmax: '30',
+      },
+      {
+        risk: '低',
+        name: '81202综放工作面',
+        tmax: '30',
+      },
+    ],
+  },
+  // 粉尘浓度
+  dust: [
+    {
+      name: '82101综放',
+      deviceID: '82101',
+      history: [
+        {
+          val: '40',
+        },
+        {
+          val: '30',
+        },
+        {
+          val: '40',
+        },
+        {
+          val: '50',
+        },
+        {
+          val: '20',
+        },
+        {
+          val: '30',
+        },
+        {
+          val: '50',
+        },
+      ],
+    },
+  ],
+  // 降尘装置
+  jczz: {
+    devicetotal: '10',
+    forgetotal: '10',
+    onlinetotal: '24',
+    offlinetotal: '0',
+  },
+  // 粉尘关联指标
+  glzb: [
+    {
+      pos: '81202综采工作面隅角',
+      temp: '20',
+      ws: '1.8',
+      status: '打开',
+    },
+    {
+      pos: '81202综采工作面隅角',
+      temp: '20',
+      ws: '1.8',
+      status: '打开',
+    },
+    {
+      pos: '81202综采工作面隅角',
+      temp: '20',
+      ws: '1.8',
+      status: '打开',
+    },
+    {
+      pos: '81202综采工作面隅角',
+      temp: '20',
+      ws: '1.8',
+      status: '打开',
+    },
+  ],
+  // 静态指标
+  statics: [
+    {
+      name: '10#煤层',
+      flameLength: '400',
+      min: '75',
+      con: '有爆炸性',
+      deviceID: '1',
+    },
+  ],
+};
+export const testConfigBDDust: Config[] = [
+  {
+    deviceType: '',
+    moduleName: '工作面风险监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['gallery', 'complex_list'],
+      board: [],
+      chart: [],
+      gallery: [
+        {
+          type: 'F',
+          readFrom: 'worksurface',
+          items: [
+            {
+              label: '',
+              value: '${count}',
+              color: 'blue',
+            },
+            {
+              label: '${risk[0].name}',
+              value: '${risk[0].count}',
+              color: 'blue',
+            },
+            {
+              label: '${risk[1].name}',
+              value: '${risk[1].count}',
+              color: 'blue',
+            },
+            {
+              label: '${risk[2].name}',
+              value: '${risk[2].count}',
+              color: 'blue',
+            },
+            {
+              label: '${risk[3].name}',
+              value: '${risk[3].count}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [
+        {
+          type: 'A',
+          readFrom: 'worksurface.contents',
+          items: [
+            {
+              title: '${[0].name}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${[0].risk}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '温度最大值',
+                  value: '${[0].tmax}℃',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+            {
+              title: '${[1].name}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${[1].risk}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '温度最大值',
+                  value: '${[1].tmax}℃',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+            {
+              title: '${[2].name}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${[2].risk}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '温度最大值',
+                  value: '${[2].tmax}℃',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+            {
+              title: '${[3].name}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${[3].risk}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '温度最大值',
+                  value: '${[3].tmax}℃',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      preset: [],
+      mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:760px;',
+      version: '保德',
+      position: 'top:160px;left:0;',
+    },
+  },
+  {
+    deviceType: 'dust',
+    moduleName: '综放工作面粉尘浓度',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '${name}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [
+        {
+          type: 'line_area',
+          readFrom: 'history',
+          xAxis: [
+            {
+              label: 'null',
+            },
+          ],
+          yAxis: [
+            {
+              label: 'A',
+              align: 'left',
+            },
+          ],
+          series: [
+            {
+              label: 'A',
+              prop: 'val',
+            },
+          ],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:1000px;height:280px;',
+      version: '保德',
+      position: 'top:640px;left:460px',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '智能喷雾降尘装置',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['gallery'],
+      board: [],
+      chart: [],
+      gallery: [
+        {
+          type: 'E',
+          readFrom: 'jczz',
+          items: [
+            {
+              label: '设备总数',
+              value: '${devicetotal}',
+              color: 'blue',
+            },
+            {
+              label: '喷雾开启数',
+              value: '${forgetotal}',
+              color: 'blue',
+            },
+            {
+              label: '连网数量',
+              value: '${onlinetotal}',
+              color: 'blue',
+            },
+            {
+              label: '断网数量',
+              value: '${offlinetotal}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '保德',
+      position: 'top:60px;right:0;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '粉尘关联指标',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['table'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          readFrom: 'glzb',
+          columns: [
+            {
+              name: '类别',
+              prop: 'pos',
+            },
+            {
+              name: '温度',
+              prop: 'temp',
+            },
+            {
+              name: '风速',
+              prop: 'ws',
+            },
+            {
+              name: '状态',
+              prop: 'status',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '保德',
+      position: 'top:350px;right:0;',
+    },
+  },
+  {
+    deviceType: 'statics',
+    moduleName: '粉尘静态指标',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '${name}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['board'],
+      board: [
+        {
+          type: 'E',
+          readFrom: '',
+          layout: 'label-top',
+          items: [
+            {
+              label: '火焰长度',
+              value: '>${flameLength}mm',
+            },
+            {
+              label: '抑制煤层爆炸最低岩粉量',
+              value: '${min}%',
+            },
+            {
+              label: '鉴定结论',
+              value: '${con}',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: BDdustMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '保德',
+      position: 'top:640px;right:0;',
+    },
+  },
+];
+
+const BDfireMock = {
+  // 工作面风险监测
+  worksurface: {
+    risk: '低',
+    count: 3,
+    contents: [
+      {
+        risk: '低',
+        name: '81202综放工作面',
+        tmax: '30',
+        gaserr: '0',
+        riskarea: '散热带、氧化带',
+      },
+      {
+        risk: '低',
+        name: '81205主运掘进面',
+        tmax: '30',
+        gaserr: '0',
+        riskarea: '全部',
+      },
+    ],
+  },
+  // 采空区
+  ckq: [
+    {
+      name: '全部',
+      co2: '30',
+      co: '100',
+      temp: '90',
+      gas: '200',
+      windspeed: '1',
+      m3: '20',
+      // 馈电器
+      kdq: '8',
+      deviceID: '1',
+    },
+  ],
+  // 束管监测 | 光纤监测
+  fiber: {
+    contents: [
+      {
+        name: '氧气',
+        max: '20',
+        pos: '81202综采工作面隅角',
+        time: '2024-08-13 12:00:00',
+      },
+      {
+        name: '一氧化碳',
+        max: '20',
+        pos: '81202综采工作面隅角',
+        time: '2024-08-13 12:00:00',
+      },
+      {
+        name: '甲烷',
+        max: '20',
+        pos: '81202综采工作面隅角',
+        time: '2024-08-13 12:00:00',
+      },
+      {
+        name: '二氧化碳',
+        max: '20',
+        pos: '81202综采工作面隅角',
+        time: '2024-08-13 12:00:00',
+      },
+    ],
+  },
+  // 带式传输机
+  csj: [
+    {
+      name: '全部',
+      max1: '35',
+      max2: '24',
+      max3: '无烟',
+      deviceID: '1',
+    },
+  ],
+  // 防灭火
+  fmh: {
+    history: [
+      {
+        top: '40',
+        bot: '20',
+      },
+      {
+        top: '30',
+        bot: '20',
+      },
+      {
+        top: '40',
+        bot: '30',
+      },
+      {
+        top: '50',
+        bot: '20',
+      },
+      {
+        top: '20',
+        bot: '20',
+      },
+      {
+        top: '30',
+        bot: '30',
+      },
+      {
+        top: '50',
+        bot: '10',
+      },
+    ],
+  },
+  // 安全监控
+  safty: [
+    {
+      pos: '81202综采',
+      temp: '20',
+      level: '低',
+      time: '2024-09-06 00:00:00',
+    },
+    {
+      pos: '81202综采',
+      temp: '20',
+      level: '低',
+      time: '2024-09-06 00:00:00',
+    },
+    {
+      pos: '81202综采',
+      temp: '20',
+      level: '低',
+      time: '2024-09-06 00:00:00',
+    },
+    {
+      pos: '81202综采',
+      temp: '20',
+      level: '低',
+      time: '2024-09-06 00:00:00',
+    },
+  ],
+};
+export const testConfigBDFire: Config[] = [
+  {
+    deviceType: '',
+    moduleName: '工作面风险监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['gallery', 'complex_list'],
+      board: [],
+      chart: [],
+      gallery: [
+        {
+          type: 'D',
+          readFrom: 'worksurface',
+          items: [
+            {
+              label: '${risk}风险',
+              value: '${count}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [
+        {
+          type: 'A',
+          readFrom: 'worksurface.contents',
+          items: [
+            {
+              title: '${[0].name}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${[0].risk}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '温度最大值',
+                  value: '${[0].tmax}℃',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '气体异常值',
+                  value: '${[0].gaserr}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+            {
+              title: '${[1].name}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${[1].risk}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '温度最大值',
+                  value: '${[1].tmax}℃',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '气体异常值',
+                  value: '${[1].gaserr}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      preset: [],
+      mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:470px;',
+      version: '保德',
+      position: 'top:160px;left:0;',
+    },
+  },
+  {
+    deviceType: 'ckq',
+    moduleName: '密闭采空区监测区域',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '${name}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['gallery'],
+      board: [],
+      chart: [],
+      gallery: [
+        {
+          type: 'G',
+          readFrom: '',
+          items: [
+            {
+              label: '一氧化碳',
+              value: '${co}',
+              color: 'blue',
+            },
+            {
+              label: '二氧化碳',
+              value: '${co2}',
+              color: 'blue',
+            },
+            {
+              label: '温度',
+              value: '${temp}',
+              color: 'blue',
+            },
+            {
+              label: '风速',
+              value: '${windspeed}',
+              color: 'blue',
+            },
+            {
+              label: '风量',
+              value: '${m3}',
+              color: 'blue',
+            },
+            {
+              label: '馈电器',
+              value: '${kdq}',
+              color: 'blue',
+            },
+            {
+              label: '瓦斯',
+              value: '${gas}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '保德',
+      position: 'top:640px;left:0;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '工作面束管监测 | 工作面光纤监测',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['complex_list'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [
+        {
+          type: 'B',
+          readFrom: 'fiber.contents',
+          items: [
+            {
+              title: '${[0].name}',
+              contents: [
+                {
+                  label: '最大浓度',
+                  value: '${[0].max}%',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '位置',
+                  value: '${[0].pos}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '时间',
+                  value: '${[0].time}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+            {
+              title: '${[1].name}',
+              contents: [
+                {
+                  label: '最大浓度',
+                  value: '${[1].max}%',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '位置',
+                  value: '${[1].pos}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '时间',
+                  value: '${[1].time}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+            {
+              title: '${[2].name}',
+              contents: [
+                {
+                  label: '最大浓度',
+                  value: '${[2].max}%',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '位置',
+                  value: '${[2].pos}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '时间',
+                  value: '${[2].time}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+            {
+              title: '${[3].name}',
+              contents: [
+                {
+                  label: '最大浓度',
+                  value: '${[3].max}%',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '位置',
+                  value: '${[3].pos}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '时间',
+                  value: '${[3].time}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      preset: [],
+      mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:1000px;height:280px;',
+      version: '保德',
+      position: 'top:640px;left:460px',
+    },
+  },
+  {
+    deviceType: 'csj',
+    moduleName: '带式输送机防灭火监控系统',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '${name}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['list'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [
+        {
+          type: 'F',
+          readFrom: '',
+          items: [
+            {
+              label: '光纤预警',
+              info: '最高温度',
+              value: '${max1}℃',
+              color: 'blue',
+            },
+            {
+              label: '一氧化碳预警',
+              info: '最高浓度',
+              value: '${max2}ppm',
+              color: 'blue',
+            },
+            {
+              label: '烟雾预警',
+              info: '状态',
+              value: '${max3}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      complex_list: [],
+      preset: [],
+      mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:230px;',
+      version: '保德',
+      position: 'top:210px;right:0;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '变电硐室防灭火监控系统',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['chart'],
+      board: [],
+      chart: [
+        {
+          type: 'line_bar',
+          readFrom: 'fmh.history',
+          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: [],
+      complex_list: [],
+      preset: [],
+      mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:230px;',
+      version: '保德',
+      position: 'top:450px;right:0;',
+    },
+  },
+  {
+    deviceType: '',
+    moduleName: '安全监控系统',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: false,
+        selector: {
+          value: '',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['table'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [
+        {
+          type: 'C',
+          readFrom: 'safty',
+          columns: [
+            {
+              name: '测点位置',
+              prop: 'pos',
+            },
+            {
+              name: '温度',
+              prop: 'temp',
+            },
+            {
+              name: '预警级别',
+              prop: 'level',
+            },
+            {
+              name: '时间',
+              prop: 'time',
+            },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:230px;',
+      version: '保德',
+      position: 'top:690px;right:0;',
+    },
+  },
+];

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

@@ -14,29 +14,65 @@
       </template>
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+
+    <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">低风险</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('https://bing.cn')">
+        <div>智能</div>
+        <div>灌浆系统</div>
+      </div>
+      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>注氟系统</div>
+      </div>
+    </div> -->
     <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"
         :visible="true"
-        @click="redirectTo(cfg)"
-      >
-        <Content v-bind="cfg" />
-      </ModuleOriginal>
+      />
     </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"
         :visible="true"
-        @click="redirectTo(cfg)"
-      >
-        <Content v-bind="cfg" />
-      </ModuleCommon>
+      />
+    </template>
+    <template v-else-if="isBD">
+      <ModuleBD
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
     </template>
     <template v-else>
       <!-- 下面是正常展示的各新版模块 -->
@@ -45,12 +81,11 @@
         :key="cfg.deviceType"
         :visible="cfg.visible"
         :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
         @close="cfg.visible = false"
-        @click="redirectTo(cfg)"
-      >
-        <Content v-bind="cfg" />
-      </ModuleEnhanced>
+      />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
       <div class="pos-absolute top-70px left-460px">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
@@ -69,16 +104,14 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import Content from './components/content.vue';
-  import { testConfigA } from './configurable.data';
-  import { useRoute } from 'vue-router';
-  import { openWindow } from '/@/utils';
+  import ModuleBD from './components/ModuleBD.vue';
+  import { testConfigBDDust } from './configurable.data';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
   }
 
-  const mainTitle = ref('智能通风管控系统');
+  const mainTitle = ref('保德煤矿粉尘灾害预警系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
@@ -87,25 +120,13 @@
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-
-  function redirectTo(config: Config) {
-    const { to } = config.moduleData;
-    if (!to) return;
-    openWindow(to);
-  }
+  const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
-    const query = useRoute().query;
-    if (query.fire) {
-      mainTitle.value = '智能火灾管控系统';
-    }
-    if (query.gas) {
-      mainTitle.value = '智能瓦斯管控系统';
-    }
     // configs.value = testConfigB;
     fetchConfigs().then(() => {
-      configs.value.push(...testConfigA);
+      configs.value = testConfigBDDust;
+      // configs.value.push(...testConfigBDDust);
       enhancedConfigs.value = configs.value.map((c) => {
         return {
           visible: true,
@@ -114,6 +135,10 @@
       });
     });
   });
+
+  // function redirectTo(url) {
+  //   window.open(url);
+  // }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -126,11 +151,12 @@
     height: 100%;
     color: @white;
     position: relative;
+    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
 
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
+      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -186,4 +212,111 @@
       border-bottom: 2px solid #3df6ff;
     }
   }
+
+  .left-t {
+    position: absolute;
+    height: 115px;
+    top: 30px;
+    width: 450px;
+    background: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png') no-repeat 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: 200px;
+    right: 0;
+    margin-bottom: 10px;
+    width: 450px;
+    background: url('/@/assets/images/home-container/configurable/firehome/common-border2.png') no-repeat center;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .tcontent-l {
+      flex: 1;
+      height: 70%;
+      font-size: 20px;
+      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-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
+    .tcontent-r {
+      flex: 1;
+      height: 70%;
+      font-size: 20px;
+      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-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
+  }
 </style>

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

@@ -15,24 +15,32 @@
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
 
-    <!-- <div class="left-t">
+    <div class="left-t">
       <div class="tcontent-area">
         <div class="tcontent-l">
-          <div>全矿井</div>
-          <div>监测区域</div>
+          <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"> 低风险</div>
+          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">低风险</div>
           <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div>
         </div>
-        <div class="tcontent-r">火灾风险</div>
+        <div class="tcontent-r">
+          <div>火灾</div>
+          <div>风险</div>
+        </div>
       </div>
     </div>
     <div class="right-t">
-      <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }" :bgSize="'small'">
-        <systemJc />
-      </DanelBd>
-    </div> -->
+      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>灌浆系统</div>
+      </div>
+      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>注氟系统</div>
+      </div>
+    </div>
     <template v-if="isOriginal">
       <ModuleOriginal
         v-for="cfg in configs"
@@ -55,6 +63,17 @@
         :visible="true"
       />
     </template>
+    <template v-else-if="isBD">
+      <ModuleBD
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
+    </template>
     <template v-else>
       <!-- 下面是正常展示的各新版模块 -->
       <ModuleEnhanced
@@ -85,14 +104,14 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import { testConfigA } from './configurable.data';
-  import { useRoute } from 'vue-router';
+  import ModuleBD from './components/ModuleBD.vue';
+  import { testConfigBDFire } from './configurable.data';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
   }
 
-  const mainTitle = ref('智能通风管控系统');
+  const mainTitle = ref('保德煤矿火灾预警系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
@@ -101,20 +120,13 @@
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
-    const query = useRoute().query;
-    if (query.fire) {
-      mainTitle.value = '智能火灾管控系统';
-    }
-    if (query.gas) {
-      mainTitle.value = '智能瓦斯管控系统';
-    }
     // configs.value = testConfigB;
     fetchConfigs().then(() => {
-      configs.value = testConfigA;
-      // configs.value.push(...testConfigA);
+      configs.value = testConfigBDFire;
+      // configs.value.push(...testConfigBDFire);
       enhancedConfigs.value = configs.value.map((c) => {
         return {
           visible: true,
@@ -123,6 +135,10 @@
       });
     });
   });
+
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -135,11 +151,12 @@
     height: 100%;
     color: @white;
     position: relative;
+    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
 
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
+      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -199,9 +216,9 @@
   .left-t {
     position: absolute;
     height: 115px;
-    margin-bottom: 25px;
+    top: 30px;
     width: 450px;
-    background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+    background: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png') no-repeat center;
     background-size: 100% 100%;
 
     .tcontent-area {
@@ -255,6 +272,51 @@
   }
   .right-t {
     position: absolute;
+    height: 160px;
+    right: 0;
+    top: 40px;
     width: 450px;
+    background: url('/@/assets/images/home-container/configurable/firehome/common-border2.png') no-repeat center;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .tcontent-l {
+      flex: 1;
+      height: 70%;
+      font-size: 20px;
+      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-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
+    .tcontent-r {
+      flex: 1;
+      height: 70%;
+      font-size: 20px;
+      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-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
   }
 </style>

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

@@ -40,8 +40,8 @@ export function useInitConfigs() {
     });
   });
 
-  function fetchConfigs() {
-    return cfgList({}).then(({ records }) => {
+  function fetchConfigs(pageType?: string) {
+    return cfgList({ pageType }).then(({ records }) => {
       configs.value = records;
     });
   }

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

@@ -37,6 +37,17 @@
         :visible="true"
       />
     </template>
+    <template v-else-if="isBD">
+      <ModuleBD
+        v-for="cfg in configs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :visible="true"
+      />
+    </template>
     <template v-else>
       <!-- 下面是正常展示的各新版模块 -->
       <ModuleEnhanced
@@ -67,7 +78,8 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import { testConfigA } from './configurable.data';
+  import ModuleBD from './components/ModuleBD.vue';
+  import { testConfigBDDust } from './configurable.data';
   import { useRoute } from 'vue-router';
 
   interface EnhancedConfig extends Config {
@@ -83,7 +95,7 @@
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
     const query = useRoute().query;
@@ -94,9 +106,9 @@
       mainTitle.value = '智能瓦斯管控系统';
     }
     // configs.value = testConfigB;
-    fetchConfigs().then(() => {
-      configs.value = testConfigA;
-      // configs.value.push(...testConfigA);
+    fetchConfigs('configurable_home').then(() => {
+      configs.value = testConfigBDDust;
+      // configs.value.push(...testConfigBDDust);
       enhancedConfigs.value = configs.value.map((c) => {
         return {
           visible: true,
@@ -117,11 +129,12 @@
     height: 100%;
     color: @white;
     position: relative;
+    background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
 
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('/@/assets/images/home-container/configurable/firehome/fire-title.png') no-repeat center;
+      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {

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

@@ -15,24 +15,32 @@
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
 
-    <!-- <div class="left-t">
+    <div class="left-t">
       <div class="tcontent-area">
         <div class="tcontent-l">
-          <div>全矿井</div>
-          <div>监测区域</div>
+          <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"> 低风险</div>
+          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">低风险</div>
           <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div>
         </div>
-        <div class="tcontent-r">火灾风险</div>
+        <div class="tcontent-r">
+          <div>火灾</div>
+          <div>风险</div>
+        </div>
       </div>
     </div>
     <div class="right-t">
-      <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }" :bgSize="'small'">
-        <systemJc />
-      </DanelBd>
-    </div> -->
+      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>灌浆系统</div>
+      </div>
+      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
+        <div>智能</div>
+        <div>注氟系统</div>
+      </div>
+    </div>
     <template v-if="isOriginal">
       <ModuleOriginal
         v-for="cfg in configs"
@@ -97,14 +105,13 @@
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
   import ModuleBD from './components/ModuleBD.vue';
-  import { testConfigA } from './configurable.data';
-  import { useRoute } from 'vue-router';
+  import { testConfigBDFire } from './configurable.data';
 
   interface EnhancedConfig extends Config {
     visible: boolean;
   }
 
-  const mainTitle = ref('智能通风管控系统');
+  const mainTitle = ref('保德煤矿火灾预警系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
@@ -116,17 +123,10 @@
   const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
-    const query = useRoute().query;
-    if (query.fire) {
-      mainTitle.value = '智能火灾管控系统';
-    }
-    if (query.gas) {
-      mainTitle.value = '智能瓦斯管控系统';
-    }
     // configs.value = testConfigB;
     fetchConfigs().then(() => {
-      configs.value = testConfigA;
-      // configs.value.push(...testConfigA);
+      configs.value = testConfigBDFire;
+      // configs.value.push(...testConfigBDFire);
       enhancedConfigs.value = configs.value.map((c) => {
         return {
           visible: true,
@@ -135,6 +135,10 @@
       });
     });
   });
+
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -152,7 +156,7 @@
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
+      background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
@@ -212,9 +216,9 @@
   .left-t {
     position: absolute;
     height: 115px;
-    margin-bottom: 25px;
+    top: 30px;
     width: 450px;
-    background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+    background: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png') no-repeat center;
     background-size: 100% 100%;
 
     .tcontent-area {
@@ -268,6 +272,51 @@
   }
   .right-t {
     position: absolute;
+    height: 160px;
+    right: 0;
+    top: 40px;
     width: 450px;
+    background: url('/@/assets/images/home-container/configurable/firehome/common-border2.png') no-repeat center;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .tcontent-l {
+      flex: 1;
+      height: 70%;
+      font-size: 20px;
+      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-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
+    .tcontent-r {
+      flex: 1;
+      height: 70%;
+      font-size: 20px;
+      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-repeat: no-repeat;
+      background-position:
+        center,
+        center top;
+      text-align: center;
+      padding-top: 40px;
+      line-height: 50px;
+    }
   }
 </style>

src/views/vent/monitorManager/safetyMonitor/index.vue

@@ -299,8 +299,11 @@
       if (deviceType.value == 'safetymonitor') {
         // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
         let dictCodes = getDictItemsByCode('safetynormal');
+        console.log(dictCodes,'111-----------')
         const searchForm = formData.getFieldsValue();
-        if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length > 0) {
+      
+        if (searchForm && searchForm['dataTypeName'] && dictCodes && dictCodes.length > 0) {
+          console.log(searchForm,'000---------')
           const tempData = [];
           const tempData1 = [];
           for (let i = 0; i < dataArr.length; i++) {