[Feat 0000] 保德首页开发

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/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 {
@@ -160,10 +160,13 @@
       height: 100%;
       display: flex;
       align-items: center;
+      flex-basis: 140px;
+      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/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: '',
@@ -1522,7 +1522,7 @@ export const testConfigBDDust: Config[] = [
         },
       ],
       preset: [],
-      mock: BDdustMock,
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:450px;height:760px;',
@@ -1582,7 +1582,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDdustMock,
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
@@ -1647,7 +1647,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDdustMock,
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -1708,7 +1708,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDdustMock,
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -1766,7 +1766,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDdustMock,
+      // mock: BDdustMock,
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -1776,106 +1776,106 @@ 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', //最高温度
-      },
-      {
-        sysNamme: '工作面名称2', //工作面名称
-        warnLevel: '低风险', //预警级别
-        maxVal: '1.88', //最高温度
-      },
-    ],
-  },
-  obfObj: {
-    //密闭采空区监测系统
-    maxC2H4: '', //乙烯最高值
-    maxDp: '', //压差最大值
-    maxTemperature: '', //温度最大值
-    maxCo: '', //一氧化碳最大值
-    maxCo2: '', //二氧化碳最大值
-    maxCh4: '', //甲烷最大值
-    maxC2h2: '', //乙炔最大值
-    maxO2: '', //氧气最大值
-  },
-  btArray: [
-    //工作面束管监测
-    {
-      name: 'CO', //数据名称（前端自己处理化学方程式的标识符）
-      val: '0.2', //最大值
-      strinstallpos: '位置1', //安装位置
-      time: '2024-09-12 15:33:50',
-    },
-    {
-      name: 'CO2', //数据名称（前端自己处理化学方程式的标识符）
-      val: '0.3', //最大值
-      strinstallpos: '位置1', //安装位置
-      time: '2024-09-12 15:33:50',
-    },
-  ],
-  pdArray: [
-    //带式输送机防灭火监控系统
-    {
-      name: '光纤预警', //设备名称
-      type: '最高温度', //参数类型
-      val: '35.2', //参数值
-    },
-    {
-      name: '一氧化碳预警',
-      type: '最高浓度',
-      val: '2.3',
-    },
-    {
-      name: '烟雾预警',
-      type: '最高浓度',
-      val: '2.4',
-    },
-  ],
-  dsArray: [
-    //变电硐室防灭火监控系统
-    {
-      name: '光纤预警', //设备名称
-      type: '最高温度', //参数类型
-      val: '35.2', //参数值
-    },
-    {
-      name: '一氧化碳预警',
-      type: '最高浓度',
-      val: '2.3',
-    },
-    {
-      name: '烟雾预警',
-      type: '最高浓度',
-      val: '2.4',
-    },
-  ],
-  aqjkArray: [
-    //安全监控系统
-    {
-      strinstallpos: '位置1', //安装位置
-      nowVal: '25.0', //温度
-      warnLevel: '低风险', //预警级别
-      time: '2024-09-12 15:33:50', //时间
-    },
-    {
-      strinstallpos: '位置2', //安装位置
-      nowVal: '25.0', //温度
-      warnLevel: '低风险', //预警级别
-      time: '2024-09-12 15:33:50', //时间
-    },
-  ],
-};
+// const BDfireMock = {
+//   allMineWarn: '低风险', //全矿井风险级别
+//   fireManageInfo: {
+//     //工作面风险监测
+//     totalNum: '5', //工作面总数
+//     dfxNum: '5', //工作面低风险数
+//     ybNum: '5', //工作面一般风险数
+//     jdNum: '5', //工作面较大风险数
+//     zdNum: '5', //工作面重大风险
+//     sysList: [
+//       {
+//         sysNamme: '工作面名称1', //工作面名称
+//         warnLevel: '低风险', //预警级别
+//         maxVal: '1.88', //最高温度
+//       },
+//       {
+//         sysNamme: '工作面名称2', //工作面名称
+//         warnLevel: '低风险', //预警级别
+//         maxVal: '1.88', //最高温度
+//       },
+//     ],
+//   },
+//   obfObj: {
+//     //密闭采空区监测系统
+//     maxC2H4: '', //乙烯最高值
+//     maxDp: '', //压差最大值
+//     maxTemperature: '', //温度最大值
+//     maxCo: '', //一氧化碳最大值
+//     maxCo2: '', //二氧化碳最大值
+//     maxCh4: '', //甲烷最大值
+//     maxC2h2: '', //乙炔最大值
+//     maxO2: '', //氧气最大值
+//   },
+//   btArray: [
+//     //工作面束管监测
+//     {
+//       name: 'CO', //数据名称（前端自己处理化学方程式的标识符）
+//       val: '0.2', //最大值
+//       strinstallpos: '位置1', //安装位置
+//       time: '2024-09-12 15:33:50',
+//     },
+//     {
+//       name: 'CO2', //数据名称（前端自己处理化学方程式的标识符）
+//       val: '0.3', //最大值
+//       strinstallpos: '位置1', //安装位置
+//       time: '2024-09-12 15:33:50',
+//     },
+//   ],
+//   pdArray: [
+//     //带式输送机防灭火监控系统
+//     {
+//       name: '光纤预警', //设备名称
+//       type: '最高温度', //参数类型
+//       val: '35.2', //参数值
+//     },
+//     {
+//       name: '一氧化碳预警',
+//       type: '最高浓度',
+//       val: '2.3',
+//     },
+//     {
+//       name: '烟雾预警',
+//       type: '最高浓度',
+//       val: '2.4',
+//     },
+//   ],
+//   dsArray: [
+//     //变电硐室防灭火监控系统
+//     {
+//       name: '光纤预警', //设备名称
+//       type: '最高温度', //参数类型
+//       val: '35.2', //参数值
+//     },
+//     {
+//       name: '一氧化碳预警',
+//       type: '最高浓度',
+//       val: '2.3',
+//     },
+//     {
+//       name: '烟雾预警',
+//       type: '最高浓度',
+//       val: '2.4',
+//     },
+//   ],
+//   aqjkArray: [
+//     //安全监控系统
+//     {
+//       strinstallpos: '位置1', //安装位置
+//       nowVal: '25.0', //温度
+//       warnLevel: '低风险', //预警级别
+//       time: '2024-09-12 15:33:50', //时间
+//     },
+//     {
+//       strinstallpos: '位置2', //安装位置
+//       nowVal: '25.0', //温度
+//       warnLevel: '低风险', //预警级别
+//       time: '2024-09-12 15:33:50', //时间
+//     },
+//   ],
+// };
 export const testConfigBDFire: Config[] = [
   {
     deviceType: '',
@@ -1960,7 +1960,7 @@ export const testConfigBDFire: Config[] = [
         },
       ],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:450px;height:470px;',
@@ -2040,7 +2040,7 @@ export const testConfigBDFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -2131,7 +2131,7 @@ export const testConfigBDFire: Config[] = [
         },
       ],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
@@ -2194,7 +2194,7 @@ export const testConfigBDFire: Config[] = [
       ],
       complex_list: [],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:450px;height:230px;',
@@ -2225,6 +2225,7 @@ export const testConfigBDFire: Config[] = [
       },
       layout: ['list'],
       board: [],
+      chart: [],
       // chart: [
       //   {
       //     type: 'line_bar',
@@ -2287,7 +2288,7 @@ export const testConfigBDFire: Config[] = [
       ],
       complex_list: [],
       preset: [],
-      mock: BDfireMock,
+      // mock: BDfireMock,
     },
     showStyle: {
       size: 'width:450px;height:230px;',
@@ -2348,7 +2349,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,44 @@
         <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"
+    />
+    <VentModal style="width: 100%; height: 100%; position: absolute; z-index: -1" />
   </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) {
@@ -314,6 +252,7 @@
       text-align: center;
       padding-top: 40px;
       line-height: 50px;
+      cursor: pointer;
     }
     .tcontent-r {
       flex: 1;
@@ -332,6 +271,7 @@
       text-align: center;
       padding-top: 40px;
       line-height: 50px;
+      cursor: pointer;
     }
   }
 </style>

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

@@ -34,115 +34,54 @@
       </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"
+    />
+    <VentModal style="width: 100%; height: 100%; position: absolute; z-index: -1" />
   </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) {
@@ -296,6 +235,7 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
+    z-index: 1;
 
     .tcontent-l {
       flex: 1;

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,44 @@
         <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"
+    />
+    <VentModal style="width: 100%; height: 100%; position: absolute; z-index: -1" />
   </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) {
@@ -314,6 +252,7 @@
       text-align: center;
       padding-top: 40px;
       line-height: 50px;
+      cursor: pointer;
     }
     .tcontent-r {
       flex: 1;
@@ -332,6 +271,7 @@
       text-align: center;
       padding-top: 40px;
       line-height: 50px;
+      cursor: pointer;
     }
   }
 </style>