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

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

@@ -55,7 +55,7 @@ export interface ModuleData {
     link: string;
   };
   /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
-  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'gallery_list' | 'blast_delta')[];
+  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'gallery_list' | 'blast_delta' | 'measure_detail')[];
   /** 模块内容的分区 */
   slice: {
     /** 分区方向 */
@@ -124,7 +124,7 @@ export interface ModuleDataList {
 
 export interface ModuleDataGallery {
   /** 画廊预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
   /** 核心配置，每个画廊项对应一项 */
@@ -167,7 +167,7 @@ export interface ModuleDataGalleryList {
 
 export interface ModuleDataChart {
   /** 图表类型，一个类型对应一种图表预设 */
-  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth' | 'line_smooth_complex';
+  type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth' | 'line_smooth_complex' | 'bar_stack';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。应该指到数组上 */
   readFrom: string;
   /** 排序依据，该项应配置将配合 readFrom 使用 */

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

@@ -66,6 +66,15 @@
         <template v-if="config.key === 'blast_delta'">
           <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
         </template>
+        <template v-if="config.key === 'measure_detail'">
+          <MeasureDetail
+            class="content__module"
+            :show-title="false"
+            :composite-data="config.data"
+            :topconfig="config.config.topconfig"
+            :btnconfig="config.config.btnconfig"
+          />
+        </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
       </template>
@@ -97,6 +106,7 @@
   import { get, clone } from 'lodash-es';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+  import MeasureDetail from './preset/MeasureDetail.vue';
   // import FIreWarn from './preset/FIreWarn.vue';
   // import FIreControl from './preset/FIreControl.vue';
 

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

@@ -190,7 +190,7 @@
   .list-item_C {
     position: relative;
     height: 140px;
-    width: 210px;
+    width: 200px;
     background-repeat: no-repeat;
     background-image: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
     background-size: 100% 100%;

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

@@ -343,6 +343,65 @@
       };
     }
 
+    // 堆叠柱状图
+    if (type === 'bar_stack') {
+      return {
+        textStyle,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        grid: {
+          top: 50,
+          bottom: 30,
+        },
+        legend: {
+          textStyle,
+          show: legend.show,
+        },
+        xAxis: xAxis.map((e) => {
+          return {
+            ...e,
+            type: 'category',
+          };
+        }),
+        yAxis: yAxis.map((e) => {
+          return {
+            ...e,
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(21,80,126,0.3)',
+                type: 'dashed',
+              },
+            },
+          };
+        }),
+        series: baseSeries.map((serie) => {
+          return {
+            ...serie,
+            type: 'bar',
+            stack: 'stackME',
+            barMaxWidth: '24',
+            emphasis: {
+              focus: 'series',
+            },
+            label: {
+              show: true,
+              position: 'top', //在上方显示
+              textStyle: {
+                //数值样式
+                color: '#fff',
+                fontSize: 14,
+              },
+            },
+          };
+        }),
+        color: ['#F56731', '#00E8FF'],
+      };
+    }
+
     return {};
   };
 

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

@@ -331,6 +331,98 @@
     transform: scale(0.7);
   }
 
+  .gallery_H {
+    background-image: url('/@/assets/images/vent/alarm/bottom1.png'), url('/@/assets/images/vent/alarm/center-bg.png');
+    background-repeat: no-repeat, no-repeat;
+    background-size:
+      auto 90%,
+      auto 90%;
+    // background-size: contain;
+    background-position: center, center;
+    position: relative;
+  }
+
+  .gallery > .gallery-item_H {
+    width: 100px;
+    height: 70px;
+    display: flex;
+    position: absolute;
+    text-align: center;
+    justify-content: space-evenly;
+    background-repeat: no-repeat;
+  }
+  .gallery > .gallery-item_H:nth-child(2) {
+    top: 0%;
+    left: calc(50% - 150px);
+    width: 300px;
+    height: 200px;
+    padding-top: 50px;
+    background-image: url(/@/assets/images/vent/alarm/warning-icon-bg1.png), url(/@/assets/images/vent/alarm/warning-icon-bg-a1.png);
+    background-size:
+      auto 100%,
+      auto 46%;
+    background-position:
+      center top,
+      center 28%;
+    display: block;
+  }
+  .gallery > .gallery-item_H:nth-child(3) {
+    top: calc(50% - 60px);
+    left: calc(50% - 170px);
+    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-vent.svg),
+      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-size:
+      100% auto,
+      auto 46%,
+      50% 20%;
+    background-position:
+      center top,
+      center 80%,
+      center bottom;
+  }
+  .gallery > .gallery-item_H:nth-child(4) {
+    top: calc(50% + 10px);
+    left: calc(50% - 170px);
+    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-device.svg),
+      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-size:
+      100% auto,
+      auto 46%,
+      50% 20%;
+    background-position:
+      center top,
+      center 80%,
+      center bottom;
+  }
+  .gallery > .gallery-item_H:nth-child(5) {
+    top: calc(50% - 60px);
+    right: calc(50% - 170px);
+    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-dust.svg),
+      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-size:
+      100% auto,
+      auto 46%,
+      50% 20%;
+    background-position:
+      center top,
+      center 80%,
+      center bottom;
+  }
+  .gallery > .gallery-item_H:nth-child(6) {
+    top: calc(50% + 10px);
+    right: calc(50% - 170px);
+    background-image: url(/@/assets/images/vent/alarm/data-bg.png), url(/@/assets/images/vent/alarm/icon-gas.svg),
+      url(/@/assets/images/vent/alarm/icon-bg.png);
+    background-size:
+      100% auto,
+      auto 46%,
+      50% 20%;
+    background-position:
+      center top,
+      center 80%,
+      center bottom;
+  }
+
   .gallery-item__value_red {
     color: red;
   }

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

@@ -1,11 +1,11 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <!-- Header部分 -->
-  <div v-if="headerConfig.show" class="w-100% flex content__header">
+  <div v-if="headerConfig.show" class="w-100% flex costume-header">
     <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
     <Dropdown
       v-if="headerConfig.showSelector"
-      class="flex-grow-1 content__header_left"
+      class="flex-grow-1 costume-header_left"
       :trigger="['click']"
       :bordered="false"
       @open-change="visible = $event"
@@ -27,7 +27,7 @@
       </template>
     </Dropdown>
     <template v-if="headerConfig.showSlot">
-      <div class="flex flex-items-center flex-grow-1 content__header_right">
+      <div class="flex flex-items-center flex-grow-1 costume-header_right">
         <SwapOutlined class="w-30px" />
         <div class="flex-grow-1">
           {{ selectedDeviceSlot }}
@@ -40,7 +40,8 @@
   import { onMounted, onUnmounted, ref } from 'vue';
   import { Config } from '../../../deviceManager/configurationTable/types';
   import { useInitDevices } from '../hooks/useInit';
-  import { MenuItem } from 'ant-design-vue';
+  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
 
   const props = defineProps<{
     moduleData: Config['moduleData'];
@@ -59,11 +60,13 @@
 
   function selectHandler({ key }) {
     selectedDeviceID.value = key;
-    emit('select', selectedDevice);
+    emit('select', selectedDevice.value);
   }
 
   onMounted(() => {
-    fetchDevices({ init: true });
+    fetchDevices({ init: true }).then(() => {
+      selectHandler({ key: selectedDeviceID.value });
+    });
     interval = setInterval(() => {
       fetchDevices();
     }, 600000);
@@ -74,17 +77,17 @@
   });
 </script>
 <style scoped>
-  .costume-header__header {
+  .costume-header {
     height: 30px;
     background-image: linear-gradient(90deg, #3df6ff44, transparent 20%, transparent 80%, #3df6ff44);
   }
-  .costume-header__header_left {
+  .costume-header_left {
     border-left: 3px solid;
     border-right: 3px solid;
     border-image-source: linear-gradient(to top, #185f7188, #3df6ff, #185f7188);
     border-image-slice: 1;
   }
-  .costume-header__header_right {
+  .costume-header_right {
     border-right: 3px solid;
     border-image-source: linear-gradient(to top, #185f7188, #3df6ff, #185f7188);
     border-image-slice: 1;

src/views/vent/home/configurable/components/preset/MeasureDetail.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="content-box">
+    <div class="dust-scroll-content">
+      <a-carousel dot-position="left" dotsClass="dots-class" :dots="true" :autoplay="true">
+        <template v-for="(data, selectIndex) in selectData" :key="selectIndex">
+          <div class="monitor-item">
+            <div class="title-box">{{ data['devicePos'] }}</div>
+            <div class="monitor-content-top">
+              <div v-for="(dustItem, index) in topConfig" :key="index" class="top-item-box" :class="`top-item-box-${index + 1}`">
+                <div class="item-top-title">{{ dustItem.title }}</div>
+                <div class="item-top-value">{{ data[dustItem.code] }}</div>
+              </div>
+            </div>
+            <div class="monitor-content-bottom">
+              <div v-for="(dustItem, index) in btnConfig" :key="index" class="bottom-item-box" :class="`bottom-item-box-${index + 1}`">
+                <div class="item-bottom-title">{{ dustItem.title }}</div>
+                <div class="item-bottom-value">{{ data[dustItem.code] }}</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </a-carousel>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineProps, watch } from 'vue';
+  import { dustMonitorColumnTop, dustMonitorColumnBootom } from '../../../clique/dust.data';
+
+  let props = defineProps({
+    compositeData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    topconfig: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    btnconfig: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  });
+  const selectData = ref<any>([]);
+  const topConfig: any = props.topconfig.length ? props.topconfig : dustMonitorColumnTop;
+  const btnConfig: any = props.btnconfig.length ? props.btnconfig : dustMonitorColumnBootom;
+  watch(
+    () => props.compositeData,
+    (newS) => {
+      console.log('debug', newS);
+      selectData.value = newS;
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
+
+  .content-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    .dust-scroll-content {
+      width: 400px;
+      height: 420px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      .monitor-item {
+        margin-bottom: 15px;
+        .title-box {
+          color: #fff;
+          width: 100%;
+          height: 40px;
+          margin-left: 5px;
+          margin-top: 00px;
+          margin-bottom: 5px;
+          padding-left: 40px;
+          padding-top: 6px;
+          background: url('/@/assets//images//company//lentj.png') no-repeat;
+          background-size: 199px 100%;
+          font-size: 15px;
+          font-weight: 600;
+        }
+        .monitor-content-top {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          color: #fff;
+          .top-item-box {
+            width: 193px;
+            height: 64px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 28px;
+          }
+          .top-item-box-1 {
+            background: url('/@/assets//images//company//dust//tip-bg-1.png');
+          }
+          .top-item-box-2 {
+            background: url('/@/assets//images//company//dust//tip-bg-2.png');
+          }
+          .top-item-box-3 {
+            background: url('/@/assets//images//company//dust//tip-bg-3.png');
+          }
+          .top-item-box-4 {
+            background: url('/@/assets//images//company//dust//tip-bg-4.png');
+          }
+        }
+        .monitor-content-bottom {
+          padding: 0 20px;
+          color: #fff;
+          .bottom-item-box {
+            width: 358px;
+            height: 43px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 14px;
+            position: relative;
+            .item-bottom-title {
+              margin-left: 65px;
+            }
+            .item-bottom-value {
+              margin-right: 20px;
+            }
+          }
+          .bottom-item-box-1 {
+            background: url('/@/assets//images//company//dust//tip-bg1-1.png');
+            &::after {
+              content: '';
+              width: 25px;
+              height: 25px;
+              position: absolute;
+              left: 13px;
+              top: 7px;
+              background: url('/@/assets//images//company//dust//dustCon-icon.png');
+            }
+          }
+          .bottom-item-box-2 {
+            background: url('/@/assets//images//company//dust//tip-bg1-2.png');
+            &::after {
+              content: '';
+              width: 25px;
+              height: 25px;
+              position: absolute;
+              left: 12px;
+              top: 6px;
+              background: url('/@/assets//images//company//dust//respirableDustCon-icon.png');
+            }
+          }
+          .bottom-item-box-3 {
+            background: url('/@/assets//images//company//dust//tip-bg1-1.png');
+            &::after {
+              content: '';
+              width: 28px;
+              height: 22px;
+              position: absolute;
+              left: 10px;
+              top: 7px;
+              background: url('/@/assets//images//company//dust//SiO2Content-icon.png');
+            }
+          }
+          .bottom-item-box-4 {
+            background: url('/@/assets//images//company//dust//tip-bg1-2.png');
+            &::after {
+              content: '';
+              width: 26px;
+              height: 20px;
+              position: absolute;
+              left: 11px;
+              top: 8px;
+              background: url('/@/assets//images//company//dust//respirableDustRatio-icon.png');
+            }
+          }
+        }
+      }
+    }
+  }
+  .dots-class {
+    width: 8px;
+  }
+  ::v-deep .slick-dots-left {
+    left: 0 !important;
+  }
+  ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector {
+    height: 24px;
+  }
+
+  ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-search-input {
+    height: 24px;
+  }
+
+  ::v-deep .zxm-select-selection-placeholder {
+    color: #fff !important;
+    line-height: 22px !important;
+  }
+
+  ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector::after {
+    line-height: 24px;
+  }
+
+  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+    background-color: transparent;
+    border-top: 0px;
+    border-bottom: 0px;
+    border-left: 2px solid;
+    border-right: 2px solid;
+    border-image: linear-gradient(to bottom, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
+  }
+
+  ::v-deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+
+  ::v-deep .zxm-select-selection-item {
+    color: #fff !important;
+  }
+
+  ::v-deep .zxm-select-single .zxm-select-selector .zxm-select-selection-item {
+    line-height: 24px !important;
+  }
+</style>

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

@@ -1837,6 +1837,26 @@ const BDfireMock = {
         warnLevel: '低风险', //预警级别
         maxVal: '1.88', //最高温度
       },
+      {
+        sysNamme: '工作面名称3', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高温度
+      },
+      {
+        sysNamme: '工作面名称4', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高温度
+      },
+      {
+        sysNamme: '工作面名称5', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高温度
+      },
+      {
+        sysNamme: '工作面名称6', //工作面名称
+        warnLevel: '低风险', //预警级别
+        maxVal: '1.88', //最高温度
+      },
     ],
   },
   obfObj: {
@@ -3107,6 +3127,7 @@ export const testConfigBDNew: Config[] = [
       },
       slice: {
         direction: 'row',
+        ignoreOverflow: true,
         basis: ['65%', '35%'],
       },
       layout: ['list', 'blast_delta'],
@@ -3186,8 +3207,8 @@ export const testConfigBDNew: Config[] = [
     // },
     showStyle: {
       size: 'width:1000px;height:280px;',
-      version: '保德',
-      position: 'top:350px;left:460px',
+      version: '新版',
+      position: 'top:350px;left:460px;',
     },
   },
   {
@@ -3292,16 +3313,16 @@ export const testConfigBDNew: Config[] = [
     },
   },
   {
-    deviceType: '',
-    moduleName: '光纤测温',
+    deviceType: 'btArray',
+    moduleName: '工作面束管监测',
     pageType: '',
     moduleData: {
       header: {
-        show: true,
-        showSelector: true,
+        show: false,
+        showSelector: false,
         showSlot: false,
         selector: {
-          value: '',
+          value: '${systemname}',
         },
         slot: {
           value: '',
@@ -3314,122 +3335,33 @@ export const testConfigBDNew: Config[] = [
       },
       slice: {
         direction: 'row',
-        basis: ['50%', '50%'],
+        basis: ['100%'],
       },
-      layout: ['list', 'chart'],
+      layout: ['chart'],
       board: [],
       chart: [
         {
-          type: 'line',
-          readFrom: 'btArray',
-          legend: { show: false },
+          type: 'bar_stack',
+          readFrom: 'chartMock',
+          legend: { show: true },
           xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '值', position: 'left' }],
-          series: [{ label: '', readFrom: '', xprop: 'value', yprop: 'pos' }],
-        },
-      ],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [
-        {
-          type: 'G',
-          readFrom: 'dsArray',
-          items: [
-            {
-              label: 'CO',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
-            {
-              label: 'CO₂',
-              value: '--',
-              color: 'blue',
-              info: '--',
-            },
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
+          series: [
             {
-              label: 'CH₄',
-              value: '--',
-              color: 'blue',
-              info: '--',
+              label: '${name1}',
+              readFrom: 'data1',
+              xprop: 'pos',
+              yprop: 'val',
             },
             {
-              label: 'C₂H₂',
-              value: '--',
-              color: 'blue',
-              info: '--',
+              label: '${name2}',
+              readFrom: 'data2',
+              xprop: 'pos',
+              yprop: 'val',
             },
-            // {
-            //   label: 'C₂H₄',
-            //   value: '--',
-            //   color: 'blue',
-            //   info: '--',
-            // },
-            // {
-            //   label: 'O₂',
-            //   value: '--',
-            //   color: 'blue',
-            //   info: '--',
-            // },
-            // {
-            //   label: '温度',
-            //   value: '--',
-            //   color: 'blue',
-            //   info: '--',
-            // },
-            // {
-            //   label: '风险',
-            //   value: '--',
-            //   color: 'blue',
-            //   info: '--',
-            // },
           ],
         },
       ],
-      complex_list: [],
-      preset: [],
-      // mock: BDfireMock,
-    },
-    // showStyle: {
-    //   size: 'width:450px;height:760px;',
-    //   version: '保德',
-    //   position: 'top:160px;left:0;',
-    // },
-    showStyle: {
-      size: 'width:1000px;height:280px;',
-      version: '保德',
-      position: 'top:640px;left:460px',
-    },
-  },
-  {
-    deviceType: 'btArray',
-    moduleName: '工作面束管监测',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: true,
-        showSelector: true,
-        showSlot: false,
-        selector: {
-          value: '${systemname}',
-        },
-        slot: {
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      slice: {
-        direction: 'row',
-        basis: ['100%'],
-      },
-      layout: ['complex_list'],
-      board: [],
-      chart: [],
       gallery: [],
       gallery_list: [],
       table: [],
@@ -3582,12 +3514,232 @@ export const testConfigBDNew: Config[] = [
         },
       ],
       preset: [],
-      // mock: BDfireMock,
+      mock: {
+        chartMock: {
+          name1: 'A',
+          data1: [
+            { val: 1, pos: '1' },
+            { val: 2, pos: '2' },
+            { val: 3, pos: '3' },
+            { val: 4, pos: '4' },
+          ],
+          name2: 'B',
+          data2: [
+            { val: 4, pos: '4' },
+            { val: 3, pos: '3' },
+            { val: 2, pos: '2' },
+            { val: 1, pos: '1' },
+          ],
+        },
+      },
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
       version: '保德',
-      position: 'top:640px;left:460px',
+      position: 'top:640px;left:460px;',
+    },
+  },
+  {
+    deviceType: 'mockPath',
+    moduleName: '测试右上',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: true,
+        showSelector: true,
+        showSlot: false,
+        selector: {
+          value: '${orgname}',
+        },
+        slot: {
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      layout: ['measure_detail'],
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'dust_data',
+        },
+      ],
+      mock: {
+        mockPath: [
+          {
+            orgname: '布尔台煤矿',
+            orgcode: 'sdmtjtbetmk',
+            dust_data: [
+              {
+                devicePos: '布尔台煤矿掘进工作面',
+                dustType: '煤',
+                fireLen: '',
+                isBlast: '无',
+                airQuantity: '1208.00',
+                dustCon: '8.00',
+                respirableDustCon: '3.90',
+                SiO2Content: '28.00',
+                respirableDustRatio: '68.00',
+              },
+              {
+                devicePos: '布尔台煤矿综放工作面',
+                dustType: '煤',
+                fireLen: '',
+                isBlast: '无',
+                airQuantity: '708.00',
+                dustCon: '3.17',
+                respirableDustCon: '1.65',
+                SiO2Content: '18.00',
+                respirableDustRatio: '48.00',
+              },
+            ],
+          },
+          {
+            orgname: '大柳塔井',
+            orgcode: 'sdmtjtdltmk',
+            dust_data: [
+              {
+                devicePos: '22煤主运大巷掘进工作面',
+                dustType: '煤',
+                fireLen: '',
+                isBlast: '无',
+                airQuantity: '',
+                dustCon: '8.00',
+                respirableDustCon: '3.90',
+                SiO2Content: '28.00',
+                respirableDustRatio: '68.00',
+              },
+              {
+                devicePos: '42205综放工作面',
+                dustType: '煤',
+                fireLen: '',
+                isBlast: '无',
+                airQuantity: '',
+                dustCon: '3.17',
+                respirableDustCon: '1.65',
+                SiO2Content: '18.00',
+                respirableDustRatio: '48.00',
+              },
+            ],
+          },
+        ],
+      },
+    },
+    showStyle: {
+      size: 'width:450px;height:570px;',
+      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: '',
+      },
+      slice: {
+        direction: 'row',
+        basis: ['100%'],
+      },
+      // layout: ['table'],
+      layout: ['gallery'],
+      board: [],
+      chart: [],
+      gallery: [
+        {
+          type: 'H',
+          readFrom: '',
+          items: [
+            {
+              label: '一氧化碳',
+              value: '${coVal}',
+              color: 'blue',
+            },
+            {
+              label: '二氧化碳',
+              value: '${co2Val}',
+              color: 'blue',
+            },
+            {
+              label: '氧气',
+              value: '${o2Val}',
+              color: 'blue',
+            },
+            {
+              label: '温度',
+              value: '${tempVal}',
+              color: 'blue',
+            },
+            {
+              label: '乙烯',
+              value: '${c2h4Val}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
+      gallery_list: [],
+      table: [
+        {
+          type: 'A',
+          readFrom: 'aqjkArray',
+          columns: [
+            {
+              name: '测点位置',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '温度',
+              prop: 'nowVal',
+            },
+            {
+              name: '预警级别',
+              prop: 'warnLevel',
+            },
+            // {
+            //   name: '时间',
+            //   prop: 'time',
+            // },
+          ],
+        },
+      ],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '保德',
+      position: 'top:640px;right:0;',
     },
   },
 ];

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

@@ -15,106 +15,96 @@
     </a-dropdown> -->
     <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
 
-    <div class="left-t">
-      <div class="tcontent-area">
-        <div class="tcontent-l">
-          <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"
+      />
+    </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"
+      />
+    </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"
+        @close="cfg.visible = false"
+      />
+      <!-- 下面是用于呼出已隐藏的模块的按钮 -->
+      <div class="pos-absolute top-70px left-460px">
+        <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
+          <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
-        <div class="tcontent-c">
-          <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
-            {{ homedata.allMineWarn }}
-          </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>
-      </div>
-      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
-        <div>智能</div>
-        <div>注氮系统</div>
       </div>
-    </div>
-    <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"
-      :page-type="pageType"
-    />
-    <ModuleBDDual
-      :show-style="configA.showStyle"
-      :module-data-a="configA.moduleData"
-      :module-name-a="configA.moduleName"
-      :device-type-a="configA.deviceType"
-      :module-data-b="configB.moduleData"
-      :module-name-b="configB.moduleName"
-      :device-type-b="configB.deviceType"
-      :visible="true"
-      :page-type="pageType"
-    />
-    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <VentModal />
-    </div>
+    </template>
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
+  import { computed, onMounted, ref } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  // import { useInitConfigs } 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 { getBDFireData } from './configurable.api';
+  import { useInitConfigs } from './hooks/useInit';
+  import { Config } from '../../deviceManager/configurationTable/types';
+  import ModuleEnhanced from './components/ModuleEnhanced.vue';
+  import ModuleOriginal from './components/ModuleOriginal.vue';
+  import ModuleCommon from './components/ModuleCommon.vue';
+  import { testConfigBDNew } from './configurable.data';
+  import { useRoute } from 'vue-router';
+
+  interface EnhancedConfig extends Config {
+    visible: boolean;
+  }
 
-  const mainTitle = ref('保德煤矿火灾预警系统');
-  const pageType = 'BD_fire';
+  const mainTitle = ref('智能通风管控系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const configs = ref(
-    testConfigBDFire.filter(({ moduleName }) => {
-      return moduleName !== '工作面光纤监测' && moduleName !== '工作面束管监测';
-    })
-  );
-  const configA = ref<any>(
-    testConfigBDFire.find(({ moduleName }) => {
-      return moduleName === '工作面束管监测';
-    })
-  );
-  const configB = ref<any>(
-    testConfigBDFire.find(({ moduleName }) => {
-      return moduleName === '工作面光纤监测';
-    })
-  );
-  // const { configs, fetchConfigs } = useInitConfigs();
+  const enhancedConfigs = ref<EnhancedConfig[]>([]);
 
-  const homedata = ref<any>({});
+  const hiddenList = computed(() => {
+    return enhancedConfigs.value.filter((e) => e.visible === false);
+  });
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
+    const query = useRoute().query;
+    if (query.fire) {
+      mainTitle.value = '智能火灾管控系统';
+    }
+    if (query.gas) {
+      mainTitle.value = '智能瓦斯管控系统';
+    }
     // configs.value = testConfigB;
-    getBDFireData({}).then((r) => {
-      homedata.value = r;
+    fetchConfigs('configurable_home').then(() => {
+      configs.value = testConfigBDNew;
+      // configs.value.push(...testConfigBDNew);
+      enhancedConfigs.value = configs.value.map((c) => {
+        return {
+          visible: true,
+          ...c,
+        };
+      });
     });
-    // fetchConfigs(pageType);
   });
-
-  function redirectTo(url) {
-    window.open(url);
-  }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -131,14 +121,14 @@
 
     .top-bg {
       width: 100%;
-      height: 86px;
+      height: 56px;
       background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
-        height: 86px;
+        height: 56px;
         font-family: 'douyuFont';
-        font-size: 26px;
+        font-size: 20px;
         letter-spacing: 2px;
         display: flex;
         justify-content: center;
@@ -188,123 +178,4 @@
       border-bottom: 2px solid #3df6ff;
     }
   }
-
-  .left-t {
-    position: absolute;
-    height: 115px;
-    top: 30px;
-    width: 450px;
-    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: 0;
-    top: 40px;
-    width: 450px;
-    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/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: 35px;
-      line-height: 40px;
-    }
-    .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-repeat: no-repeat;
-      background-position:
-        center,
-        center top;
-      text-align: center;
-      padding-top: 35px;
-      line-height: 40px;
-    }
-  }
-
-  :deep(.loading-box) {
-    position: unset;
-  }
 </style>