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

@@ -87,6 +87,7 @@ export interface ModuleData {
         | 'gallery'
         | 'complex_list'
         | 'gallery_list'
+        | 'tabs'
         | 'blast_delta'
         | 'measure_detail'
         | 'qh_curve'
@@ -103,6 +104,7 @@ export interface ModuleData {
   gallery_list?: ModuleDataGalleryList[];
   chart?: ModuleDataChart[];
   table?: ModuleDataTable[];
+  tabs?: ModuleDataTabs[];
   preset?: ModuleDataPreset[];
   complex_list?: ModuleDataComplexList[];
   /** 如果目前没有数据可以对接，可使用模拟数据先行展示 */
@@ -303,3 +305,25 @@ export interface ModuleDataComplexList extends ReadFrom {
     >;
   }[];
 }
+
+export interface ModuleDataTabs extends ReadFrom {
+  /** 列表预设的背景类型 */
+  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K';
+  /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
+  mapFromData?: boolean;
+  /** 核心配置，每个列表项对应一项 */
+  items: {
+    /** 列表项标题，formatter 格式 */
+    title: string;
+    /** 翻译依据，formatter 格式 */
+    trans?: Record<string, string>;
+    contents: Array<
+      {
+        /** 列表项指定颜色，根据类型不同会有各自的样式 */
+        color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'white' | 'lightblue';
+        /** 针对列表项说明的额外信息，部分类型的列表项会使用 */
+        info?: string;
+      } & CommonItem
+    >;
+  }[];
+}

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

@@ -6,7 +6,7 @@
     </template>
     <template #container>
       <slot>
-        <Header style="pointer-events: auto" :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
+        <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
         <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
       </slot>
     </template>
@@ -43,7 +43,7 @@
   const style = computed(() => {
     const size = props.showStyle.size;
     const position = props.showStyle.position;
-    return size + position + 'position: absolute;';
+    return size + position + 'position: absolute; pointer-events: auto;';
   });
 
   // 根据配置里的定位判断应该使用哪个class

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

@@ -64,6 +64,9 @@
         <template v-if="config.name === 'table'">
           <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
         </template>
+        <template v-if="config.name === 'tabs'">
+          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
+        </template>
         <template v-if="config.name === 'blast_delta'">
           <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
         </template>
@@ -120,6 +123,7 @@
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
   import QHCurve from './preset/QHCurve.vue';
   import MeasureDetail from './preset/MeasureDetail.vue';
+  import CustomTabs from './preset/CustomTabs.vue';
   import AIChat from '/@/components/AIChat/MiniChat.vue';
   import DeviceAlarm from './preset/DeviceAlarm.vue';
   // import FIreWarn from './preset/FIreWarn.vue';
@@ -166,6 +170,7 @@
     const gallery = clone(props.moduleData.gallery) || [];
     const complex_list = clone(props.moduleData.complex_list) || [];
     const gallery_list = clone(props.moduleData.gallery_list) || [];
+    const tabs = clone(props.moduleData.tabs) || [];
     const chart = clone(props.moduleData.chart) || [];
     const table = clone(props.moduleData.table) || [];
     const preset = clone(props.moduleData.preset) || [];
@@ -270,6 +275,51 @@
           });
           break;
         }
+        case 'tabs': {
+          const cfg = tabs.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
+          if (cfg.mapFromData) {
+            const firstListItem = cfg.items[0];
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: (data || []).map((d) => {
+                return {
+                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                  contents: firstListItem.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(d, e.label, e.trans),
+                      value: getFormattedText(d, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          } else {
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: cfg.items.map((i) => {
+                return {
+                  title: getFormattedText(data, i.title, i.trans),
+                  contents: i.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(data, e.label, e.trans),
+                      value: getFormattedText(data, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          }
+          break;
+        }
         case 'chart': {
           const cfg = chart.shift();
           if (!cfg) break;

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

@@ -6,7 +6,7 @@
     <div :class="`list__image_${type}`"></div>
     <!-- 剩下的部分填充剩余宽度 -->
     <div class="flex-grow" :class="`list__wrapper_${type}`">
-      <div v-for="item in listConfig" :key="item.prop" class="flex items-center" :class="`list-item_${type}`">
+      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="flex items-center" :class="`list-item_${type}`">
         <!-- 列表项前面的图标 -->
         <div :class="`list-item__icon_${type}`"></div>
         <!-- 列表项的具体内容填充剩余宽度 -->
@@ -26,7 +26,6 @@
         value: string;
         color: string;
         label: string;
-        prop: string;
         info: string;
       }[];
       /** A B C D E F G */
@@ -348,13 +347,26 @@
     background: unset;
     padding: 0 5px 0 10px;
   }
+  .list__wrapper_K {
+    height: 100%;
+  }
   .list-item__content_K {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 4px;
+    padding: 5px;
     margin: 4px 0;
     background-image: var(--image-linear-gradient-3);
+
+    .list-item__value {
+      flex-basis: unset;
+    }
+    .list-item__label {
+      flex-basis: unset;
+    }
+    .list-item__info {
+      display: none;
+    }
   }
 
   .list-item__label {

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

@@ -67,9 +67,7 @@
     () => props.data,
     (d) => {
       init(d);
-      // if (!selectedDeviceID.value) {
-      selectHandler({ key: options.value[0]?.value });
-      // }
+      emit('select', selectedDevice.value);
     },
     {
       immediate: true,

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

@@ -0,0 +1,48 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
+  <div>
+    <BaseTab :tabs="tabs" v-model:id="actived" class="mb-5px" />
+    <CustomList :list-config="listConfig" :type="type" :style="{ height: 'calc(100% - 45px)', overflow: overflow ? 'auto' : 'none' }" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import BaseTab from '/@/views/vent/gas/components/tab/baseTab.vue';
+  import CustomList from '../detail/CustomList.vue';
+  import { computed, ref } from 'vue';
+  import { get } from 'lodash-es';
+
+  const props = withDefaults(
+    defineProps<{
+      tabConfig: {
+        title: string;
+        contents: {
+          value: string;
+          color: string;
+          label: string;
+          info: string;
+        }[];
+      }[];
+      type: string;
+      overflow: boolean;
+    }>(),
+    {
+      listConfig: () => [],
+      type: 'A',
+    }
+  );
+
+  const actived = ref(0);
+
+  const tabs = computed(() => {
+    return props.tabConfig.map((e, id) => {
+      return { name: e.title, id };
+    });
+  });
+
+  const listConfig = computed(() => {
+    return get(props.tabConfig, actived.value).contents;
+  });
+  //   defineEmits(['click']);
+</script>
+<style lang="less" scoped></style>

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

@@ -274,6 +274,9 @@ export function useInitModule(deviceType: Config['deviceType'], moduleData: Conf
         },
       ];
     }
+    if (!selectedDeviceID.value) {
+      selectedDeviceID.value = options.value[0]?.value;
+    }
   }
 
   return {

src/views/vent/monitorManager/balancePressMonitor/components/balancePressHome2.vue

@@ -19,6 +19,7 @@
   import { list } from '../balancePress.api';
   import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
   import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
+  import { useGlobSetting } from '/@/hooks/setting';
   // import { Config } from '../../../deviceManager/configurationTable/types';
 
   const props = defineProps({
@@ -28,6 +29,8 @@
     },
   });
 
+  const { sysOrgCode } = useGlobSetting();
+
   const loading = ref(false);
 
   // 监测数据
@@ -58,17 +61,52 @@
 
   async function getDataSource(systemID) {
     const res = await list({ devicetype: 'sys', systemID });
-    const result = Array.from(res.msgTxt).reduce((obj: any, e: any) => {
-      obj[e.type] = e;
-      return obj;
-    }, {});
+
+    const result = Array.from(res.msgTxt).reduce(
+      (obj: any, e: any) => {
+        obj[e.type] = e;
+
+        // if (true) {
+        if (sysOrgCode === 'sdmtjtswmk') {
+          if (e.type.startsWith('fanlocal')) {
+            obj.fanlocal.datalist.push(...e.datalist);
+          }
+          if (e.type.startsWith('safetymonitor')) {
+            e.datalist.forEach((ele) => {
+              if (ele.strinstallpos.includes('风门')) {
+                obj.gate.datalist.push(ele);
+              } else if (ele.strinstallpos.includes('风窗')) {
+                obj.window.datalist.push(ele);
+              } else if (ele.strinstallpos.includes('工作面')) {
+                obj.work_surface.datalist.push(ele);
+              } else {
+                obj.others.datalist.push(ele);
+              }
+            });
+          }
+        }
+
+        return obj;
+      },
+      {
+        /** 用于归类fanlocal */
+        fanlocal: { datalist: [] },
+        /** 用于归类gate */
+        gate: { datalist: [] },
+        /** 用于归类window */
+        window: { datalist: [] },
+        /** 用于归类work_surface */
+        work_surface: { datalist: [] },
+        others: { datalist: [] },
+      }
+    );
 
     return result;
   }
 
   // const configs = ref<Config[]>([
   //   {
-  //     deviceType: 'fanlocal_steml_zj',
+  //     deviceType: 'fanlocal',
   //     moduleName: '局部风机',
   //     pageType: 'balancePressHome',
   //     moduleData: {
@@ -77,19 +115,15 @@
   //         readFrom: 'datalist',
   //         selector: {
   //           show: true,
-  //           value: '${deviceId}',
+  //           value: '${deviceID}',
   //           trans: {
-  //             11111002: '主机',
-  //             11111001: '备机',
+  //             '1910221332833665026': '主机',
+  //             '1910221283626090497': '备机',
   //           },
   //         },
   //         slot: {
-  //           show: true,
-  //           value: '${readData.Fan1StartStatus}',
-  //           trans: {
-  //             '1': '电机1',
-  //             '0': '电机2',
-  //           },
+  //           show: false,
+  //           value: '',
   //         },
   //       },
   //       background: {
@@ -101,7 +135,7 @@
   //         direction: 'column',
   //         items: [
   //           {
-  //             name: 'list',
+  //             name: 'tabs',
   //             basis: '100%',
   //           },
   //         ],
@@ -110,24 +144,52 @@
   //       chart: [],
   //       table: [],
   //       gallery: [],
-  //       list: [
+  //       list: [],
+  //       tabs: [
   //         {
   //           type: 'K',
   //           readFrom: '',
+  //           mapFromData: false,
   //           items: [
   //             {
-  //               label: '工作面温度',
-  //               value: '${readData.Fan1StartStatus}',
-  //               trans: {
-  //                 '1': '${readData.windSpeed1}',
-  //                 '0': '${readData.windSpeed2}',
-  //               },
-  //               color: 'blue',
+  //               title: '电机1',
+  //               contents: [
+  //                 {
+  //                   label: '输出功率',
+  //                   value: '${readData.Fan1StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //                 {
+  //                   label: '输出电压',
+  //                   value: '${readData.Fan1StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //               ],
   //             },
   //             {
-  //               label: '测试字段',
-  //               value: '--',
-  //               color: 'blue',
+  //               title: '电机2',
+  //               contents: [
+  //                 {
+  //                   label: '输出功率',
+  //                   value: '${readData.Fan2StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //                 {
+  //                   label: '输出电压',
+  //                   value: '${readData.Fan2StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //                 {
+  //                   label: '输出电压',
+  //                   value: '${readData.Fan2StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //                 {
+  //                   label: '输出电压',
+  //                   value: '${readData.Fan2StartStatus}',
+  //                   color: 'blue',
+  //                 },
+  //               ],
   //             },
   //           ],
   //         },
@@ -137,7 +199,7 @@
   //       to: '',
   //     },
   //     showStyle: {
-  //       size: 'width:470px;height:230px;',
+  //       size: 'width:470px;height:260px;',
   //       version: '原版',
   //       position: 'top:20px;left:0;',
   //     },
@@ -176,19 +238,21 @@
   //       complex_list: [
   //         {
   //           type: 'G',
-  //           readFrom: 'gate_qd.datalist',
+  //           readFrom: 'gate.datalist',
   //           mapFromData: true,
   //           items: [
   //             {
-  //               title: '${deviceId}',
+  //               title: '${deviceID}',
   //               trans: {
-  //                 1364413501780168700: '这是1364413501780168700的翻译文本',
-  //                 1364413472814305300: '1364413472814305300的新翻译文本',
+  //                 '1915631893453004802': '22107胶运顺槽入口自动风门2',
+  //                 '1915631893478170626': '22107胶运顺槽入口自动风门1',
+  //                 '1915631897043329025': '22107辅回撤通道自动风门1',
+  //                 '1915631895088783362': '22107辅回撤通道自动风门2',
   //               },
   //               contents: [
   //                 {
-  //                   label: '风量',
-  //                   value: '${readData.m3}',
+  //                   label: '状态',
+  //                   value: '${readData.V}',
   //                   color: 'blue',
   //                 },
   //               ],
@@ -205,14 +269,14 @@
   //       to: '',
   //     },
   //     showStyle: {
-  //       size: 'width:470px;height:230px;',
+  //       size: 'width:470px;height:320px;',
   //       version: '原版',
-  //       position: 'top:260px;left:0;',
+  //       position: 'top:290px;left:0;',
   //     },
   //   },
   //   {
   //     deviceType: '',
-  //     moduleName: '掘进工作面',
+  //     moduleName: '综采工作面推进度',
   //     pageType: 'balancePressHome',
   //     moduleData: {
   //       header: {
@@ -251,8 +315,13 @@
   //           readFrom: '',
   //           items: [
   //             {
-  //               label: '待定',
-  //               value: '--',
+  //               label: '进度',
+  //               value: '50%',
+  //               color: 'blue',
+  //             },
+  //             {
+  //               label: '埋深',
+  //               value: '2000km',
   //               color: 'blue',
   //             },
   //           ],
@@ -263,9 +332,9 @@
   //       to: '',
   //     },
   //     showStyle: {
-  //       size: 'width:470px;height:230px;',
+  //       size: 'width:470px;height:130px;',
   //       version: '原版',
-  //       position: 'top:500px;left:0;',
+  //       position: 'top:620px;left:0;',
   //     },
   //   },
   //   {
@@ -302,15 +371,15 @@
   //       complex_list: [
   //         {
   //           type: 'G',
-  //           readFrom: 'windrect_ds_two.datalist',
+  //           readFrom: 'avgpressure_lowoxygen_normal.datalist',
   //           mapFromData: true,
   //           items: [
   //             {
-  //               title: '${strinstallpos}（假设两头对射为重点）',
+  //               title: '${strinstallpos}',
   //               contents: [
   //                 {
-  //                   label: '风量',
-  //                   value: '${readData.m3}',
+  //                   label: '网络状态',
+  //                   value: '${readData.netStatus_str}',
   //                   color: 'blue',
   //                 },
   //               ],
@@ -366,15 +435,15 @@
   //       complex_list: [
   //         {
   //           type: 'G',
-  //           readFrom: 'windrect_ds_four.datalist',
+  //           readFrom: 'others.datalist',
   //           mapFromData: true,
   //           items: [
   //             {
-  //               title: '${strinstallpos}（假设四头对射为辅助）',
+  //               title: '${strinstallpos}',
   //               contents: [
   //                 {
-  //                   label: '风量',
-  //                   value: '${readData.m3}',
+  //                   label: '网络状态',
+  //                   value: '${readData.netStatus_str}',
   //                   color: 'blue',
   //                 },
   //               ],
@@ -452,7 +521,7 @@
   //       to: '',
   //     },
   //     showStyle: {
-  //       size: 'width:470px;height:230px;',
+  //       size: 'width:470px;height:250px;',
   //       version: '原版',
   //       position: 'top:500px;right:0;',
   //     },

src/views/vent/monitorManager/balancePressMonitor/index3.vue

@@ -6,7 +6,7 @@
     :optionValue="optionValue"
     >均压与低氧管控</customHeader
   >
-  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; z-index: 0">
     <a-spin :spinning="loading" />
     <div id="balancePress3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">