|
|
@@ -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>
|
