[Wip 0000] 可配置版均压页面开发

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

@@ -10,9 +10,8 @@
         :device-type="cfg.deviceType"
         :data="selectData"
         :visible="true"
-      />
-    </div>
-  </a-spin>
+      /> </div
+  ></a-spin>
 </template>
 <script setup lang="ts">
   import { ref, onMounted, onUnmounted, defineProps } from 'vue';
@@ -20,6 +19,7 @@
   import { list } from '../balancePress.api';
   import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
   import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
+  // import { Config } from '../../../deviceManager/configurationTable/types';
 
   const props = defineProps({
     deviceId: {
@@ -63,23 +63,96 @@
       return obj;
     }, {});
 
-    console.log('debug', result);
-
     return result;
   }
 
-  // const configs: Config[] = [
+  // const configs = ref<Config[]>([
+  //   {
+  //     deviceType: 'fanlocal_steml_zj',
+  //     moduleName: '局部风机',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: true,
+  //         readFrom: 'datalist',
+  //         selector: {
+  //           show: true,
+  //           value: '${deviceId}',
+  //           trans: {
+  //             11111002: '主机',
+  //             11111001: '备机',
+  //           },
+  //         },
+  //         slot: {
+  //           show: true,
+  //           value: '${readData.Fan1StartStatus}',
+  //           trans: {
+  //             '1': '电机1',
+  //             '0': '电机2',
+  //           },
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '工作面温度',
+  //               value: '${readData.Fan1StartStatus}',
+  //               trans: {
+  //                 '1': '${readData.windSpeed1}',
+  //                 '0': '${readData.windSpeed2}',
+  //               },
+  //               color: 'blue',
+  //             },
+  //             {
+  //               label: '测试字段',
+  //               value: '--',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:230px;',
+  //       version: '原版',
+  //       position: 'top:20px;left:0;',
+  //     },
+  //   },
   //   {
   //     deviceType: '',
-  //     moduleName: 'CO与O2监测',
-  //     pageType: '',
+  //     moduleName: '风门',
+  //     pageType: 'balancePressHome',
   //     moduleData: {
   //       header: {
   //         show: false,
   //         readFrom: '',
   //         selector: {
   //           show: false,
-  //           value: '${strinstallpos}',
+  //           value: '',
   //         },
   //         slot: {
   //           show: false,
@@ -103,25 +176,205 @@
   //       complex_list: [
   //         {
   //           type: 'G',
-  //           readFrom: 'fanlocal_steml_zj.datalist',
+  //           readFrom: 'gate_qd.datalist',
   //           mapFromData: true,
   //           items: [
   //             {
-  //               title: 'datalist细则',
+  //               title: '${deviceId}',
+  //               trans: {
+  //                 1364413501780168700: '这是1364413501780168700的翻译文本',
+  //                 1364413472814305300: '1364413472814305300的新翻译文本',
+  //               },
   //               contents: [
   //                 {
-  //                   label: '阀门2开度',
-  //                   value: '${readData.Fan1fI}',
+  //                   label: '风量',
+  //                   value: '${readData.m3}',
   //                   color: 'blue',
   //                 },
+  //               ],
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:230px;',
+  //       version: '原版',
+  //       position: 'top:260px;left:0;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '',
+  //     moduleName: '掘进工作面',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '待定',
+  //               value: '--',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:230px;',
+  //       version: '原版',
+  //       position: 'top:500px;left:0;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '',
+  //     moduleName: '重点监控传感器',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'complex_list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [
+  //         {
+  //           type: 'G',
+  //           readFrom: 'windrect_ds_two.datalist',
+  //           mapFromData: true,
+  //           items: [
+  //             {
+  //               title: '${strinstallpos}（假设两头对射为重点）',
+  //               contents: [
   //                 {
-  //                   label: '阀门3开度',
-  //                   value: '${readData.Fan1fI}',
+  //                   label: '风量',
+  //                   value: '${readData.m3}',
   //                   color: 'blue',
   //                 },
+  //               ],
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:230px;',
+  //       version: '原版',
+  //       position: 'top:20px;right:0;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '',
+  //     moduleName: '辅助巡检传感器',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'complex_list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [
+  //         {
+  //           type: 'G',
+  //           readFrom: 'windrect_ds_four.datalist',
+  //           mapFromData: true,
+  //           items: [
+  //             {
+  //               title: '${strinstallpos}（假设四头对射为辅助）',
+  //               contents: [
   //                 {
-  //                   label: '阀门1开度',
-  //                   value: '${readData.Fan1fI}',
+  //                   label: '风量',
+  //                   value: '${readData.m3}',
   //                   color: 'blue',
   //                 },
   //               ],
@@ -138,12 +391,73 @@
   //       to: '',
   //     },
   //     showStyle: {
-  //       size: 'width:344px;height:490px;',
+  //       size: 'width:470px;height:230px;',
+  //       version: '原版',
+  //       position: 'top:260px;right:0;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '',
+  //     moduleName: '地面大气压',
+  //     pageType: 'balancePressHome',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'chart',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [
+  //         {
+  //           type: 'line_smooth',
+  //           readFrom: 'surface_history.datalist',
+  //           legend: { show: true },
+  //           xAxis: [{ show: true }],
+  //           yAxis: [
+  //             { show: true, name: '压力1(Pa)', position: 'left' },
+  //             { show: true, name: '压力2(Pa)', position: 'right' },
+  //           ],
+  //           series: [
+  //             { readFrom: '', xprop: 'time', yprop: 'pressure1', label: '压力1' },
+  //             // { readFrom: 'datalist', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
+  //           ],
+  //         },
+  //       ],
+  //       table: [],
+  //       gallery: [],
+  //       list: [],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:470px;height:230px;',
   //       version: '原版',
-  //       position: 'top:80px;right:10px;',
+  //       position: 'top:500px;right:0;',
   //     },
   //   },
-  // ];
+  // ]);
 
   const { configs, fetchConfigs } = useInitConfigs();
 

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

@@ -0,0 +1,248 @@
+<template>
+  <customHeader
+    :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
+    :options="options"
+    @change="getSelectRow"
+    :optionValue="optionValue"
+    >均压与低氧管控</customHeader
+  >
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+    <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;">
+      <div>
+        <div ref="elementContent" class="elementContent">
+          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
+          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
+          <p><span class="data-title">故障诊断：</span>
+            <i
+              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
+            ></i>{{selectData.fault}}</p>
+        </div>
+      </div>
+    </div> -->
+  </div>
+  <div class="scene-box">
+    <div class="center-container">
+      <balancePressHome v-if="activeKey == 'monitor'" :deviceId="optionValue" />
+      <div v-else class="history-group">
+        <div class="device-button-group" v-if="deviceList.length > 0">
+          <div
+            class="device-button"
+            :class="{ 'device-active': deviceActive == device.deviceType }"
+            v-for="(device, index) in deviceList"
+            :key="index"
+            @click="deviceChange(index)"
+            >{{ device.deviceName }}</div
+          >
+        </div>
+        <div class="history-container">
+          <balancePressHistory
+            v-if="activeKey == 'monitor_history'"
+            ref="historyTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+          <balancePressHandleHistoryVue
+            v-if="activeKey == 'handler_history'"
+            ref="alarmHistoryTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+          <balancePressAlarmHistory
+            v-if="activeKey == 'faultRecord'"
+            ref="handlerHistoryTable"
+            class="vent-margin-t-20"
+            :deviceId="optionValue"
+            :device-type="deviceType"
+          />
+        </div>
+      </div>
+    </div>
+    <BottomMenu @change="changeActive" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw } from 'vue';
+  import { list, getTableList } from './balancePress.api';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import balancePressHome from './components/balancePressHome2.vue';
+  import balancePressHistory from './components/balancePressHistory.vue';
+  import balancePressHandleHistoryVue from './components/balancePressHandleHistory.vue';
+  import balancePressAlarmHistory from './components/balancePressAlarmHistory.vue';
+  import { useRouter } from 'vue-router';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+  const { currentRoute } = useRouter();
+  const activeKey = ref('monitor');
+  const loading = ref(false);
+
+  const historyTable = ref();
+  const alarmHistoryTable = ref();
+  const handlerHistoryTable = ref();
+
+  //关联设备
+  const deviceList = ref<DeviceType[]>([]);
+  const deviceActive = ref('');
+  const deviceType = ref('');
+
+  const options = ref();
+  const optionValue = ref('');
+
+  function changeActive(activeValue) {
+    activeKey.value = activeValue;
+  }
+
+  function deviceChange(index) {
+    deviceActive.value = deviceType.value = deviceList.value[index].deviceType;
+  }
+
+  // 查询关联设备列表
+  async function getDeviceList() {
+    const res = await list({ devicetype: 'sys', systemID: optionValue.value });
+
+    const result = res.msgTxt;
+    const deviceArr = <DeviceType[]>[];
+    result.forEach((item) => {
+      const data = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      });
+      if (item.type != 'sys') {
+        deviceArr.unshift({
+          deviceType: item.type,
+          deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
+          datalist: data,
+        });
+      }
+    });
+    deviceList.value = deviceArr;
+    deviceActive.value = deviceArr[0].deviceType;
+    deviceChange(0);
+  }
+
+  async function getSysDataSource() {
+    const res = await getTableList({ strtype: 'sys_surface_junya', pagetype: 'normal' });
+    if (!options.value) {
+      // 初始时选择第一条数据
+      options.value = res.records || [];
+      if (!optionValue.value) {
+        optionValue.value = options.value[0]['id'];
+        getDeviceList();
+      }
+    }
+  }
+
+  // 切换检测数据
+  function getSelectRow(deviceID) {
+    // const currentData = options.value.find((item: any) => {
+    //   return item.id == deviceID
+    // })
+    optionValue.value = deviceID;
+    getDeviceList();
+  }
+
+  onBeforeMount(() => {});
+
+  onMounted(async () => {
+    if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) optionValue.value = currentRoute.value['query']['id'];
+    await getSysDataSource();
+  });
+
+  onUnmounted(() => {});
+</script>
+<style lang="less" scoped>
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+  .scene-box {
+    margin-top: 20px;
+    pointer-events: none;
+    .history-group {
+      padding: 0 20px;
+      .history-container {
+        position: relative;
+        background: #6195af1a;
+        width: calc(100% + 10px);
+        top: 0px;
+        left: -10px;
+        border: 1px solid #00fffd22;
+        padding: 10px 0;
+        box-shadow: 0 0 20px #44b4ff33 inset;
+      }
+    }
+    .device-button-group {
+      // margin: 0 20px;
+      display: flex;
+      pointer-events: auto;
+      position: relative;
+      margin-top: 90px;
+      &::after {
+        position: absolute;
+        content: '';
+        width: calc(100% + 10px);
+        height: 2px;
+        top: 30px;
+        left: -10px;
+        border-bottom: 1px solid #0efcff;
+      }
+      .device-button {
+        padding: 4px 15px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+
+        color: #fff;
+        cursor: pointer;
+        margin: 0 3px;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border: 1px solid #6176af;
+          transform: skewX(-38deg);
+          background-color: rgba(0, 77, 103, 85%);
+          z-index: -1;
+        }
+      }
+      .device-active {
+        // color: #0efcff;
+        &::before {
+          border-color: #0efcff;
+          box-shadow: 1px 1px 3px 1px #0efcff inset;
+        }
+      }
+    }
+  }
+  .center-container {
+    width: 100%;
+    height: calc(100% - 200px);
+  }
+
+  .input-box {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+
+    .input-title {
+      color: #73e8fe;
+      width: auto;
+    }
+
+    .@{ventSpace}-input-number {
+      border-color: #ffffff88 !important;
+    }
+
+    margin-right: 10px;
+  }
+</style>