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

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

@@ -38,7 +38,8 @@ export function getFormattedText(data: any, formatter: string, defaultValue?: an
 
   const [__, prop] = res;
   const val = defaultValue === undefined ? '-' : defaultValue;
-  return formatter.replace(exp, _.get(data, prop, val));
+  const txt = _.get(data, prop);
+  return formatter.replace(exp, _.isNil(txt) ? val : txt);
 }
 
 /** 获取 formatter 需要取的源 prop，用于在一些不支持 formatter 的组件中使用 */

src/views/vent/deviceManager/configurationTable/index.vue

@@ -148,19 +148,25 @@
   /** 更新配置详情 */
   async function handleUpdate() {
     isUpdate.value = true;
-    saveOrUpdateHandler({
-      ...formData,
-      moduleData: JSON.parse(configJSON.value),
-    })
-      .then(() => {
-        message.success('保存成功');
-      })
-      .catch(() => {
-        message.error('保存失败，请联系管理员');
+    try {
+      console.log('debug ', configJSON.value);
+      saveOrUpdateHandler({
+        ...formData,
+        moduleData: JSON.parse(configJSON.value),
       })
-      .finally(() => {
-        configModalCtx.closeModal();
-      });
+        .then(() => {
+          message.success('保存成功');
+        })
+        .catch(() => {
+          message.error('保存失败，请联系管理员');
+        })
+        .finally(() => {
+          configModalCtx.closeModal();
+        });
+    } catch (e) {
+      message.error(`无效信息：${e}`);
+      console.error(e);
+    }
   }
 </script>
 

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

@@ -1,5 +1,3 @@
-import { ModulePositionMap, ModuleSizeMap } from './options';
-
 export interface Config {
   /** 模块的名称 */
   moduleName: string;
@@ -99,7 +97,7 @@ export interface ModuleDataBoard {
 
 export interface ModuleDataList {
   /** 列表预设的背景类型 */
-  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
+  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
   /** 核心配置，每个列表项对应一项 */

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

@@ -617,7 +617,7 @@ export const DEFAULT_TEST_DATA = {
       },
     },
   },
-  warningInfo: {
+  warnInfo: {
     total: 5,
     vent: 1,
     ventRisk: '低风险',

src/views/vent/home/billboard/components/Warning.vue

@@ -41,7 +41,7 @@
   });
 
   function fetchData() {
-    const info = props.data.warningInfo;
+    const info = props.data.warnInfo;
     if (!info) return;
     warnData.value = info;
   }

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

@@ -48,7 +48,7 @@
   import Content from './content.vue';
   import { defineProps, defineEmits, computed, onMounted, onUnmounted } from 'vue';
   import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
-  import { useInitDevices } from '../hooks/useInit';
+  import { useInitDevicesBD } from '../hooks/useInit';
 
   const props = defineProps<{
     moduleData: ModuleData;
@@ -56,12 +56,13 @@
     moduleName: string;
     deviceType: string;
     visible: boolean;
+    pageType: string;
   }>();
   const emit = defineEmits(['close', 'select']);
 
   const { header } = props.moduleData;
 
-  const { selectedDeviceID, selectedDevice, options, fetchDevicesBD } = useInitDevices(props.deviceType, props.moduleData);
+  const { selectedDeviceID, selectedDevice, options, fetchDevices } = useInitDevicesBD(props.deviceType, props.pageType, props.moduleData);
 
   const style = computed(() => {
     const size = props.showStyle.size;
@@ -98,9 +99,9 @@
   }
 
   onMounted(() => {
-    fetchDevicesBD({ init: true });
+    fetchDevices({ init: true });
     interval = setInterval(() => {
-      fetchDevicesBD();
+      fetchDevices();
     }, 600000);
   });
 

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

@@ -64,7 +64,7 @@
   .list-item__title_A {
     position: absolute;
     left: 41%;
-    font-size: 20px;
+    // font-size: 14px;
     top: 15px;
   }
   // .list-item__content_A {
@@ -146,8 +146,8 @@
     justify-content: space-between;
     text-align: center;
     padding: 0 10%;
-    margin-top: 15px;
-    height: 40px;
+    margin-top: 5px;
+    height: 33px;
 
     .list-item__label {
       font-size: 11px;
@@ -160,10 +160,13 @@
       height: 100%;
       display: flex;
       align-items: center;
+      flex-basis: 100px;
+      flex-grow: 1;
     }
     .list-item__title_B {
       width: 40px;
       text-align: center;
+      margin-right: 50px
       // height: 30px;
       // background-size: auto 80%;
       // background-position: center;

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

@@ -29,7 +29,7 @@
         prop: string;
         info: string;
       }[];
-      /** A B C D E */
+      /** A B C D E F G */
       type: string;
     }>(),
     {
@@ -180,6 +180,67 @@
   .list-item__content_F > div {
     flex-basis: 33.3%;
   }
+
+  .list_G {
+    background: none;
+  }
+  .list__wrapper_G {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  .list-item_G {
+    width: 170px;
+    height: 85px;
+    align-items: center;
+    text-align: center;
+    border: 1px solid rgba(25, 237, 255, 0.4);
+    box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+    background: rgba(0, 0, 0, 0.1);
+    margin: 5px 15px;
+  }
+  .list-item__content_G {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  .list-item__content_G > .list-item__label {
+    width: 70px;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    font-size: 20px;
+    line-height: 85px;
+  }
+  .list-item__content_G > .list-item__info {
+    width: 100px;
+    height: 40px;
+    line-height: 40px;
+    right: 0;
+    position: absolute;
+  }
+  .list-item__content_G > .list-item__value {
+    width: 100px;
+    height: 40px;
+    line-height: 40px;
+    top: 40px;
+    right: 0;
+    position: absolute;
+    text-shadow: 0 0 25px #00fbfe;
+    background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+    font-style: normal;
+    background-size: cover;
+    font-family: electronicFont;
+    font-size: 30px;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    // position: relative;
+    // top: -8px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 18px;
+    color: aliceblue;
+  }
   // .list-item__icon_red {
   //   background-image: url('@/assets/images/home-container/configurable/warn_icon_5.png');
   // }

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

@@ -3,6 +3,8 @@ import { defHttp } from '/@/utils/http/axios';
 enum Api {
   list = '/safety/ventanalyDevice/homedata2',
   getHomeData = '/safety/ventanalyDevice/homedata',
+  getBDDustData = '/ventanaly-device/monitor/disaster/getDisDustHome',
+  getBDFireData = '/ventanaly-device/monitor/disaster/getDisFireHome',
 }
 
 // 搞这个缓存是由于：目前代码上的设计是多个模块发出多次请求，每个模块自己负责消费前者的响应。
@@ -27,3 +29,27 @@ export const getHomeData = (params) => {
   }
   return cache.get(key) as Promise<any>;
 };
+export const getBDDustData = (params) => {
+  const key = `${Api.getBDDustData}?${JSON.stringify(params)}`;
+  if (!cache.has(key)) {
+    cache.set(
+      key,
+      defHttp.post({ url: Api.getBDDustData, params }).finally(() => {
+        cache.delete(key);
+      })
+    );
+  }
+  return cache.get(key) as Promise<any>;
+};
+export const getBDFireData = (params) => {
+  const key = `${Api.getBDFireData}?${JSON.stringify(params)}`;
+  if (!cache.has(key)) {
+    cache.set(
+      key,
+      defHttp.post({ url: Api.getBDFireData, params }).finally(() => {
+        cache.delete(key);
+      })
+    );
+  }
+  return cache.get(key) as Promise<any>;
+};

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

@@ -1348,76 +1348,76 @@ export const testConfigA: Config[] = [
   },
 ];
 
-const BDdustMock = {
-  allMineWarn: '低风险', //全矿井风险级别
-  dustManageInfo: {
-    //工作面风险监测
-    totalNum: '5', //工作面总数
-    dfxNum: '5', //工作面低风险数
-    ybNum: '5', //工作面一般风险数
-    jdNum: '5', //工作面较大风险数
-    zdNum: '5', //工作面重大风险
-    sysList: [
-      {
-        sysNamme: '工作面名称1', //工作面名称
-        warnLevel: '低风险', //预警级别
-        maxVal: '1.88', //最高粉尘浓度
-      },
-      {
-        sysNamme: '工作面名称2', //工作面名称
-        warnLevel: '低风险', //预警级别
-        maxVal: '1.88', //最高粉尘浓度
-      },
-    ],
-  },
-  dustDustGraph: [
-    //粉尘传感器曲线图（综放工作面粉尘浓度）
-    {
-      strinstallpos: '81202工作面', //安装位置
-      historyList: [
-        //历史数据
-        {
-          dustval: '0.86', //粉尘浓度值
-          time: '2024-09-12 15:33:50', //时间
-        },
-        {
-          dustval: '0.96', //粉尘浓度值
-          time: '2024-09-12 15:34:50', //时间
-        },
-      ],
-    },
-    {
-      strinstallpos: '81203工作面', //安装位置
-      historyList: [
-        //历史数据
-        {
-          dustval: '0.86', //粉尘浓度值
-          time: '2024-09-12 15:33:50', //时间
-        },
-        {
-          dustval: '1.00', //粉尘浓度值
-          time: '2024-09-12 15:34:50', //时间
-        },
-      ],
-    },
-  ],
-  atomObj: {
-    //智能喷雾降尘装置
-    totalNum: '5', //喷雾设备总数
-    openNum: '5', //喷雾设备连接数
-    breakNum: '0', //喷雾设备断开数
-    atomOpenNum: '1', //喷雾设备开启数
-  },
-  dustRelArray: [
-    //粉尘关联指标
-    {
-      strinstallpos: '81202工作面', //安装位置
-      temp: '23.3', //温度
-      windSpeed: '10.5', //风速
-      atomState: '打开', //喷雾状态
-    },
-  ],
-};
+// const BDdustMock = {
+//   allMineWarn: '低风险', //全矿井风险级别
+//   dustManageInfo: {
+//     //工作面风险监测
+//     totalNum: '5', //工作面总数
+//     dfxNum: '5', //工作面低风险数
+//     ybNum: '5', //工作面一般风险数
+//     jdNum: '5', //工作面较大风险数
+//     zdNum: '5', //工作面重大风险
+//     sysList: [
+//       {
+//         sysNamme: '工作面名称1', //工作面名称
+//         warnLevel: '低风险', //预警级别
+//         maxVal: '1.88', //最高粉尘浓度
+//       },
+//       {
+//         sysNamme: '工作面名称2', //工作面名称
+//         warnLevel: '低风险', //预警级别
+//         maxVal: '1.88', //最高粉尘浓度
+//       },
+//     ],
+//   },
+//   dustDustGraph: [
+//     //粉尘传感器曲线图（综放工作面粉尘浓度）
+//     {
+//       strinstallpos: '81202工作面', //安装位置
+//       historyList: [
+//         //历史数据
+//         {
+//           dustval: '0.86', //粉尘浓度值
+//           time: '2024-09-12 15:33:50', //时间
+//         },
+//         {
+//           dustval: '0.96', //粉尘浓度值
+//           time: '2024-09-12 15:34:50', //时间
+//         },
+//       ],
+//     },
+//     {
+//       strinstallpos: '81203工作面', //安装位置
+//       historyList: [
+//         //历史数据
+//         {
+//           dustval: '0.86', //粉尘浓度值
+//           time: '2024-09-12 15:33:50', //时间
+//         },
+//         {
+//           dustval: '1.00', //粉尘浓度值
+//           time: '2024-09-12 15:34:50', //时间
+//         },
+//       ],
+//     },
+//   ],
+//   atomObj: {
+//     //智能喷雾降尘装置
+//     totalNum: '5', //喷雾设备总数
+//     openNum: '5', //喷雾设备连接数
+//     breakNum: '0', //喷雾设备断开数
+//     atomOpenNum: '1', //喷雾设备开启数
+//   },
+//   dustRelArray: [
+//     //粉尘关联指标
+//     {
+//       strinstallpos: '81202工作面', //安装位置
+//       temp: '23.3', //温度
+//       windSpeed: '10.5', //风速
+//       atomState: '打开', //喷雾状态
+//     },
+//   ],
+// };
 export const testConfigBDDust: Config[] = [
   {
     deviceType: '',
@@ -1518,11 +1518,28 @@ export const testConfigBDDust: Config[] = [
                 },
               ],
             },
+            {
+              title: '${[2].sysNamme}',
+              contents: [
+                {
+                  label: '风险监测',
+                  value: '${[2].warnLevel}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '最高粉尘浓度',
+                  value: '${[2].maxVal}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
           ],
         },
       ],
       preset: [],
-      mock: BDdustMock,
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:450px;height:760px;',
@@ -1559,12 +1576,12 @@ export const testConfigBDDust: Config[] = [
           readFrom: 'historyList',
           xAxis: [
             {
-              label: 'null',
+              label: '${time}',
             },
           ],
           yAxis: [
             {
-              label: 'A',
+              label: '浓度',
               align: 'left',
             },
           ],
@@ -1582,7 +1599,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDdustMock,
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
@@ -1647,7 +1664,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDdustMock,
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -1708,7 +1725,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDdustMock,
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -1766,7 +1783,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDdustMock,
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -1779,24 +1796,25 @@ export const testConfigBDDust: Config[] = [
 const BDfireMock = {
   allMineWarn: '低风险', //全矿井风险级别
   fireManageInfo: {
-    //工作面风险监测
-    totalNum: '5', //工作面总数
-    dfxNum: '5', //工作面低风险数
-    ybNum: '5', //工作面一般风险数
-    jdNum: '5', //工作面较大风险数
-    zdNum: '5', //工作面重大风险
     sysList: [
       {
-        sysNamme: '工作面名称1', //工作面名称
-        warnLevel: '低风险', //预警级别
-        maxVal: '1.88', //最高温度
+        maxVal: 20.2,
+        sysId: 1746452629872402400,
+        warnLevel: '低风险',
+        sysNamme: '81203综放工作面',
       },
       {
-        sysNamme: '工作面名称2', //工作面名称
-        warnLevel: '低风险', //预警级别
-        maxVal: '1.88', //最高温度
+        maxVal: 29.6,
+        sysId: 1834591184917872600,
+        warnLevel: '低风险',
+        sysNamme: '上仓皮带',
       },
     ],
+    totalNum: 2,
+    jdNum: 0,
+    dfxNum: 2,
+    zdNum: 0,
+    ybNum: 0,
   },
   obfObj: {
     //密闭采空区监测系统
@@ -1810,18 +1828,41 @@ const BDfireMock = {
     maxO2: '', //氧气最大值
   },
   btArray: [
-    //工作面束管监测
     {
-      name: 'CO', //数据名称（前端自己处理化学方程式的标识符）
-      val: '0.2', //最大值
-      strinstallpos: '位置1', //安装位置
-      time: '2024-09-12 15:33:50',
+      val: '0.0',
+      strinstallpos: '81202辅运1联巷',
+      name: 'CO',
+      time: '2024-09-18 16:15:40',
     },
     {
-      name: 'CO2', //数据名称（前端自己处理化学方程式的标识符）
-      val: '0.3', //最大值
-      strinstallpos: '位置1', //安装位置
-      time: '2024-09-12 15:33:50',
+      val: '0.84',
+      strinstallpos: '81202辅运1联巷',
+      name: 'CO2',
+      time: '2024-09-18 16:15:40',
+    },
+    {
+      val: '17.45',
+      strinstallpos: '81202辅运1联巷',
+      name: 'CH4',
+      time: '2024-09-18 16:15:40',
+    },
+    {
+      val: '0.0',
+      strinstallpos: '81202辅运1联巷',
+      name: 'C2H2',
+      time: '2024-09-18 16:15:40',
+    },
+    {
+      val: '0.0',
+      strinstallpos: '81202辅运1联巷',
+      name: 'C2H4',
+      time: '2024-09-18 16:15:40',
+    },
+    {
+      val: '20.35',
+      strinstallpos: '81203工作面上隅角',
+      name: 'O2',
+      time: '2024-09-18 16:15:40',
     },
   ],
   pdArray: [
@@ -1839,7 +1880,7 @@ const BDfireMock = {
     {
       name: '烟雾预警',
       type: '最高浓度',
-      val: '2.4',
+      val: null,
     },
   ],
   dsArray: [
@@ -1940,17 +1981,17 @@ export const testConfigBDFire: Config[] = [
               ],
             },
             {
-              title: '${[0].sysNamme}',
+              title: '${[1].sysNamme}',
               contents: [
                 {
                   label: '风险监测',
-                  value: '${[0].warnLevel}',
+                  value: '${[1].warnLevel}',
                   color: 'blue',
                   info: '',
                 },
                 {
                   label: '最高温度',
-                  value: '${[0].maxVal}',
+                  value: '${[1].maxVal}',
                   color: 'blue',
                   info: '',
                 },
@@ -1960,7 +2001,7 @@ export const testConfigBDFire: Config[] = [
         },
       ],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:450px;height:470px;',
@@ -1995,7 +2036,7 @@ export const testConfigBDFire: Config[] = [
       gallery: [
         {
           type: 'G',
-          readFrom: '',
+          readFrom: 'obfObj',
           items: [
             {
               label: '一氧化碳',
@@ -2040,7 +2081,7 @@ export const testConfigBDFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -2082,7 +2123,7 @@ export const testConfigBDFire: Config[] = [
           readFrom: 'btArray',
           items: [
             {
-              title: 'O₂',
+              title: 'CO',
               contents: [
                 {
                   label: '最大浓度',
@@ -2127,11 +2168,103 @@ export const testConfigBDFire: Config[] = [
                 },
               ],
             },
+            {
+              title: 'CH₄',
+              contents: [
+                {
+                  label: '最大浓度',
+                  value: '${[2].val}ppm',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '位置',
+                  value: '${[2].strinstallpos}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '时间',
+                  value: '${[2].time}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+            {
+              title: 'C₂H₂',
+              contents: [
+                {
+                  label: '最大浓度',
+                  value: '${[3].val}ppm',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '位置',
+                  value: '${[3].strinstallpos}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '时间',
+                  value: '${[3].time}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+            {
+              title: 'C₂H₄',
+              contents: [
+                {
+                  label: '最大浓度',
+                  value: '${[4].val}ppm',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '位置',
+                  value: '${[4].strinstallpos}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '时间',
+                  value: '${[4].time}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
+            {
+              title: 'O₂',
+              contents: [
+                {
+                  label: '最大浓度',
+                  value: '${[5].val}ppm',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '位置',
+                  value: '${[5].strinstallpos}',
+                  color: 'blue',
+                  info: '',
+                },
+                {
+                  label: '时间',
+                  value: '${[5].time}',
+                  color: 'blue',
+                  info: '',
+                },
+              ],
+            },
           ],
         },
       ],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
@@ -2169,7 +2302,7 @@ export const testConfigBDFire: Config[] = [
       list: [
         {
           type: 'F',
-          readFrom: 'pdArray',
+          readFrom: 'dsArray',
           items: [
             {
               label: '光纤预警',
@@ -2194,7 +2327,7 @@ export const testConfigBDFire: Config[] = [
       ],
       complex_list: [],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:450px;height:230px;',
@@ -2225,6 +2358,7 @@ export const testConfigBDFire: Config[] = [
       },
       layout: ['list'],
       board: [],
+      chart: [],
       // chart: [
       //   {
       //     type: 'line_bar',
@@ -2287,7 +2421,7 @@ export const testConfigBDFire: Config[] = [
       ],
       complex_list: [],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:450px;height:230px;',
@@ -2348,7 +2482,7 @@ export const testConfigBDFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:450px;height:230px;',

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

@@ -43,106 +43,46 @@
         <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-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
-        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>
-    </template>
-    <VentModal style="width: 100%; height: 100%; position: absolute" />
+    <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"
+    />
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+      <VentModal />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  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 { useInitConfigs } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
   import { testConfigBDDust } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getHomeData } from './configurable.api';
-
-  interface EnhancedConfig extends Config {
-    visible: boolean;
-  }
+  import { getBDDustData } from './configurable.api';
 
   const mainTitle = ref('保德煤矿粉尘灾害预警系统');
+  const pageType = 'BD_dust';
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const enhancedConfigs = ref<EnhancedConfig[]>([]);
-
-  const hiddenList = computed(() => {
-    return enhancedConfigs.value.filter((e) => e.visible === false);
-  });
-  const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
+  const configs = ref(testConfigBDDust);
+  // const { configs, fetchConfigs } = useInitConfigs();
   const homedata = ref<any>({});
 
   onMounted(() => {
     // configs.value = testConfigB;
-    getHomeData({}).then((r) => {
+    getBDDustData({}).then((r) => {
       homedata.value = r;
     });
-    fetchConfigs('BD_dust').then(() => {
-      configs.value = testConfigBDDust;
-      // // configs.value.push(...testConfigBDDust);
-      // enhancedConfigs.value = configs.value.map((c) => {
-      //   return {
-      //     visible: true,
-      //     ...c,
-      //   };
-      // });
-    });
+    // fetchConfigs(pageType);
   });
 
   // function redirectTo(url) {
@@ -164,14 +104,14 @@
 
     .top-bg {
       width: 100%;
-      height: 56px;
+      height: 86px;
       background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
-        height: 56px;
+        height: 86px;
         font-family: 'douyuFont';
-        font-size: 20px;
+        font-size: 26px;
         letter-spacing: 2px;
         display: flex;
         justify-content: center;
@@ -314,6 +254,7 @@
       text-align: center;
       padding-top: 40px;
       line-height: 50px;
+      cursor: pointer;
     }
     .tcontent-r {
       flex: 1;
@@ -332,6 +273,11 @@
       text-align: center;
       padding-top: 40px;
       line-height: 50px;
+      cursor: pointer;
     }
   }
+
+  :deep(.loading-box) {
+    position: unset;
+  }
 </style>

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

@@ -34,115 +34,56 @@
       </div>
     </div>
     <div class="right-t">
-      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
+      <div class="tcontent-l" @click="redirectTo('/grout-home')">
         <div>智能</div>
-        <div>灌浆系统</div>
+        <div>注浆系统</div>
       </div>
-      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
+      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
         <div>智能</div>
-        <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"
-      />
-    </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-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
-        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>
-    </template>
-    <VentModal style="width: 100%; height: 100%; position: absolute" />
+    <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"
+    />
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+      <VentModal />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  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 { useInitConfigs } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
   import { testConfigBDFire } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getHomeData } from './configurable.api';
-
-  interface EnhancedConfig extends Config {
-    visible: boolean;
-  }
+  import { getBDFireData } from './configurable.api';
 
   const mainTitle = ref('保德煤矿火灾预警系统');
+  const pageType = 'BD_fire';
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const enhancedConfigs = ref<EnhancedConfig[]>([]);
-
-  const hiddenList = computed(() => {
-    return enhancedConfigs.value.filter((e) => e.visible === false);
-  });
-  const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
+  const configs = ref(testConfigBDFire);
+  // const { configs, fetchConfigs } = useInitConfigs();
 
   const homedata = ref<any>({});
 
   onMounted(() => {
     // configs.value = testConfigB;
-    getHomeData({}).then((r) => {
+    getBDFireData({}).then((r) => {
       homedata.value = r;
     });
-    fetchConfigs('BD_fire').then(() => {
-      configs.value = testConfigBDFire;
-      // enhancedConfigs.value = configs.value.map((c) => {
-      //   return {
-      //     visible: true,
-      //     ...c,
-      //   };
-      // });
-    });
+    // fetchConfigs(pageType);
   });
 
   function redirectTo(url) {
@@ -164,14 +105,14 @@
 
     .top-bg {
       width: 100%;
-      height: 56px;
+      height: 86px;
       background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
-        height: 56px;
+        height: 86px;
         font-family: 'douyuFont';
-        font-size: 20px;
+        font-size: 26px;
         letter-spacing: 2px;
         display: flex;
         justify-content: center;
@@ -296,6 +237,7 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
+    z-index: 1;
 
     .tcontent-l {
       flex: 1;
@@ -334,4 +276,8 @@
       line-height: 50px;
     }
   }
+
+  :deep(.loading-box) {
+    position: unset;
+  }
 </style>

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

@@ -2,7 +2,7 @@ import { computed, ref } from 'vue';
 import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
 // import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
 import { Config } from '@/views/vent/deviceManager/configurationTable/types';
-import { getHomeData } from '../configurable.api';
+import { getBDDustData, getBDFireData, getHomeData } from '../configurable.api';
 import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
 // import mapComponent from './components/3Dmap/index.vue';
 
@@ -114,10 +114,48 @@ export function useInitDevices(devicekind: string, config: Config['moduleData'])
     });
   }
 
-  // 保德专用-获取设备数据，赋值并以选项格式返回给 Header 消费
-  function fetchDevicesBD({ init = false } = {}) {
+  return {
+    fetchDevices,
+    selectedDevice,
+    selectedDeviceID,
+    selectedDeviceSlot,
+    selectedDeviceLabel,
+    options,
+  };
+}
+
+/** 保德专用-初始化设备信息，包含了适配了 header config 的下拉框选项、已选择设备的各个详细子项等，如果模块不需要展示 header 那么会将全部信息提供给已选择设备以供消费 */
+export function useInitDevicesBD(devicekind: string, pageType: string, config: Config['moduleData']) {
+  const { header, mock } = config;
+  const devices = ref<Record<string, any>[]>([]);
+  const options = ref<{ label: string; value: string }[]>([]);
+  const selectedDeviceID = ref<string>('');
+
+  const selectedDevice = computed(() => {
+    return (
+      devices.value.find((e) => {
+        return e.id === selectedDeviceID.value;
+      }) || {}
+    );
+  });
+  const selectedDeviceLabel = computed(() => {
+    const res = options.value.find((e) => {
+      return e.value === selectedDeviceID.value;
+    });
+    return res ? res.label : '';
+  });
+  const selectedDeviceSlot = computed(() => {
+    return getFormattedText(selectedDevice.value, header.slot.value);
+  });
+
+  // 获取设备数据，赋值并以选项格式返回给 Header 消费
+  function fetchDevices({ init = false } = {}) {
     const { value } = header.selector;
-    const promise = mock ? Promise.resolve(mock) : getHomeData({});
+    const apiMap = {
+      BD_dust: getBDDustData,
+      BD_fire: getBDFireData,
+    };
+    const promise = mock ? Promise.resolve(mock) : apiMap[pageType]();
     return promise.then((result) => {
       if (header.show && header.showSelector && result[devicekind]) {
         // 如果配置里指明需要 header，检验后初始化设备信息
@@ -151,7 +189,6 @@ export function useInitDevices(devicekind: string, config: Config['moduleData'])
 
   return {
     fetchDevices,
-    fetchDevicesBD,
     selectedDevice,
     selectedDeviceID,
     selectedDeviceSlot,

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

@@ -43,106 +43,46 @@
         <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-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
-        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>
-    </template>
-    <VentModal style="width: 100%; height: 100%; position: absolute" />
+    <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"
+    />
+    <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
+      <VentModal />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
   // import { CaretDownOutlined } from '@ant-design/icons-vue';
   // import MonitorCenter from './components/MonitorCenter.vue';
-  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 { useInitConfigs } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
   import { testConfigBDDust } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getHomeData } from './configurable.api';
-
-  interface EnhancedConfig extends Config {
-    visible: boolean;
-  }
+  import { getBDDustData } from './configurable.api';
 
   const mainTitle = ref('保德煤矿粉尘灾害预警系统');
+  const pageType = 'BD_dust';
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const enhancedConfigs = ref<EnhancedConfig[]>([]);
-
-  const hiddenList = computed(() => {
-    return enhancedConfigs.value.filter((e) => e.visible === false);
-  });
-  const { configs, isOriginal, isCommon, isBD, fetchConfigs } = useInitConfigs();
+  const configs = ref(testConfigBDDust);
+  // const { configs, fetchConfigs } = useInitConfigs();
   const homedata = ref<any>({});
 
   onMounted(() => {
     // configs.value = testConfigB;
-    getHomeData({}).then((r) => {
+    getBDDustData({}).then((r) => {
       homedata.value = r;
     });
-    fetchConfigs().then(() => {
-      configs.value = testConfigBDDust;
-      // configs.value.push(...testConfigBDDust);
-      enhancedConfigs.value = configs.value.map((c) => {
-        return {
-          visible: true,
-          ...c,
-        };
-      });
-    });
+    // fetchConfigs(pageType);
   });
 
   // function redirectTo(url) {
@@ -164,14 +104,14 @@
 
     .top-bg {
       width: 100%;
-      height: 56px;
+      height: 86px;
       background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {
-        height: 56px;
+        height: 86px;
         font-family: 'douyuFont';
-        font-size: 20px;
+        font-size: 26px;
         letter-spacing: 2px;
         display: flex;
         justify-content: center;
@@ -314,6 +254,7 @@
       text-align: center;
       padding-top: 40px;
       line-height: 50px;
+      cursor: pointer;
     }
     .tcontent-r {
       flex: 1;
@@ -332,6 +273,11 @@
       text-align: center;
       padding-top: 40px;
       line-height: 50px;
+      cursor: pointer;
     }
   }
+
+  :deep(.loading-box) {
+    position: unset;
+  }
 </style>