[Wip 0000] 喷淋监测页面开发

src/views/vent/comment/components/bottomMenu.vue

@@ -20,7 +20,6 @@
 </template>
 <script lang="ts">
   import { ref, defineComponent } from 'vue';
-  import { string } from 'vue-types';
   type navListType = { title: string; pathName: string; isHover: Boolean };
 
   export default defineComponent({

src/views/vent/monitorManager/comment/comment.api.ts

@@ -1,6 +1,7 @@
 import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
+  getDevice = '/monitor/device', //实时数据
   edit = '/safety/ventanalyDeviceInfo/edit',
   list = '/safety/ventanalyDeviceInfo/list',
   input = '/safety/ventanalyDeviceInfo/input',
@@ -33,3 +34,4 @@ export const getAllFileList = (params) => defHttp.get({ url: Api.getFileList, pa
 export const getGasDeviceInfo = (params) => defHttp.post({ url: Api.getGasDeviceInfo, params });
 export const getHistoryData = (params) => defHttp.post({ url: Api.getHistoryData, params });
 export const listdays = (params) => defHttp.get({ url: Api.listdays, params });
+export const getDevice = (params) => defHttp.post({ url: Api.getDevice, params });

src/views/vent/monitorManager/sprayMonitor/component.vue

@@ -0,0 +1,273 @@
+<template>
+  <customHeader
+    :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }"
+    :options="options"
+    :optionValue="optionValue"
+    @change="changeSelectRow"
+  >
+    {{ mainTitle }}
+  </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="model3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+    <slot name="monitorSlot3D"></slot>
+  </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">
+          <HistoryTable
+            v-if="activeKey == 'monitor_history'"
+            class="vent-margin-t-20"
+            :columns-type="`${deviceType}`"
+            :device-type="deviceType"
+            :sysId="optionValue"
+            :scroll="{ y: 650 }"
+            :only-bouned-devices="onlyBounedDevices"
+            :show-history-curve="showHistoryCurve"
+          />
+          <HandlerHistoryTable
+            v-if="activeKey == 'handler_history'"
+            class="vent-margin-t-20"
+            columns-type="operator_history"
+            :deviceType="deviceType"
+            :device-list-api="getHandlerList"
+          />
+
+          <balancePressHandleHistoryVue :deviceId="optionValue" :device-type="deviceType" />
+          <balancePressAlarmHistory v-if="activeKey == 'faultRecord'" 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 { ref, onMounted, onUnmounted } from 'vue';
+  import { getDevice, sysList } from '../comment/comment.api';
+  import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
+  import balancePressHome from './components/balancePressHome.vue';
+  import balancePressAlarmHistory from './components/balancePressAlarmHistory.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import { useRouter } from 'vue-router';
+  import { Config } from '../../deviceManager/configurationTable/types';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+  const props = withDefaults(
+    defineProps<{
+      mainTitle: string;
+      /** 获取各表格配置时依赖的设备类型 */
+      deviceType: string;
+      /** 主要模块配置 */
+      mainConfig: {
+        configs: Config[];
+      };
+      /** 历史数据配置 */
+      monitorHistoryConfig: {
+        /** 请求历史数据时传入的类型字符 */
+        historyColumns: string;
+        /** 仅展示已绑定设备，选择是则从系统中获取sysId下已绑定设备。仅能查询到已绑定设备的历史数据 */
+        onlyBounedDevices: boolean;
+        /** 显示历史数据曲线图 */
+        showHistoryCurve: boolean;
+      };
+      /** 操作历史配置 */
+      handlerHistoryConfig: {
+        /** 请求操作历史时传入的类型字符 */
+        handlerColumns: string;
+      };
+      /** 报警历史配置 */
+      alarmHistoryConfig: {};
+      /** 请求场景数据传入的类型字符 */
+      strtype: string;
+      /** 请求场景数据传入的页面类型字符 */
+      pagetype: string;
+    }>(),
+    {
+      pagetype: 'normal',
+      onlyBounedDevices: false,
+      showHistoryCurve: false,
+    }
+  );
+
+  const { currentRoute } = useRouter();
+  const loading = ref(false);
+
+  const activeKey = ref('monitor');
+
+  function changeActive(activeValue) {
+    activeKey.value = activeValue;
+  }
+
+  const options = ref([]);
+  const optionValue = ref('');
+
+  async function getSysDataSource() {
+    const res = await sysList({ strtype: props.strtype, pagetype: props.pagetype });
+    // 初始时选择第一条数据
+    options.value = res.records || [];
+    if (!optionValue.value) {
+      changeSelectRow(options.value[0]['id']);
+    }
+  }
+
+  // 切换检测数据
+  function changeSelectRow(deviceID) {
+    optionValue.value = deviceID;
+    getDeviceList();
+  }
+
+  //关联设备
+  const deviceList = ref<DeviceType[]>([]);
+  const deviceActive = ref('');
+  const deviceType = ref('');
+
+  function deviceChange(index) {
+    deviceType.value = deviceList.value[index].deviceType;
+    deviceActive.value = deviceList.value[index].deviceType;
+  }
+
+  // 查询关联设备列表
+  async function getDeviceList() {
+    const { msgTxt = [] } = await getDevice({ devicetype: 'sys', systemID: optionValue.value });
+
+    deviceList.value = msgTxt.reduce((arr, item) => {
+      const data = item.datalist.forEach((data: any) => {
+        return Object.assign(data, data.readData);
+      });
+      // sys代表场景本身，应该过滤掉去处理该场景下的关联设备
+      if (item.type != 'sys') {
+        arr.unshift({
+          deviceType: item.type,
+          deviceName: item.typeName || item.datalist[0].typeName,
+          datalist: data,
+        });
+      }
+
+      return arr;
+    });
+    if (!deviceActive.value) {
+      deviceChange(0);
+    }
+  }
+
+  /** 获取操作历史 */
+  function getHandlerList() {
+    return sysList({ strtype: props.deviceType });
+  }
+
+  onMounted(() => {
+    if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
+      optionValue.value = currentRoute.value['query']['id'] as string;
+    }
+    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 {
+        pointer-events: auto;
+        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>

src/views/vent/monitorManager/sprayMonitor/index.vue

@@ -0,0 +1,223 @@
+<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/balancePressHome.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>