|
@@ -106,7 +106,8 @@
|
|
</template>
|
|
</template>
|
|
<!-- <div class="button-box" v-for="(item, index) in modalTypeArr.centerBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div> -->
|
|
<!-- <div class="button-box" v-for="(item, index) in modalTypeArr.centerBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div> -->
|
|
</div>
|
|
</div>
|
|
- <div class="data-show-box">
|
|
|
|
|
|
+
|
|
|
|
+ <div v-if="!faultShow" class="data-show-box">
|
|
<div class="data-item">
|
|
<div class="data-item">
|
|
<div class="item-header">设备监测</div>
|
|
<div class="item-header">设备监测</div>
|
|
<div class="item-container">
|
|
<div class="item-container">
|
|
@@ -161,16 +162,6 @@
|
|
>
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="container-group">
|
|
<div class="container-group">
|
|
- <div class="warning-header">
|
|
|
|
- <!-- <div class="header-item">
|
|
|
|
- <div class="header-title">报警总数</div>
|
|
|
|
- <div class="header-value">0</div>
|
|
|
|
- </div> -->
|
|
|
|
- <div class="header-item">
|
|
|
|
- <div class="header-title"> 未处理数</div>
|
|
|
|
- <div class="header-value">{{ selectData['warnLogNotOkCount'] }} </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
<div class="warning-group">
|
|
<div class="warning-group">
|
|
<template v-if="deviceType">
|
|
<template v-if="deviceType">
|
|
<div class="warning-item" v-for="(state, index) in rightColumns" :key="index">
|
|
<div class="warning-item" v-for="(state, index) in rightColumns" :key="index">
|
|
@@ -249,10 +240,75 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll, 0)">
|
|
|
|
- <!-- 摄像头显示隐藏图标 -->
|
|
|
|
- <VideoCameraOutlined class="video-icon" :class="{ 'no-play': !showPlay }" @click="changePlay" />
|
|
|
|
|
|
|
|
|
|
+ <div v-else class="data-show-box fault-box">
|
|
|
|
+ <div class="data-item">
|
|
|
|
+ <div class="item-header">一级电机监测</div>
|
|
|
|
+ <div class="item-container">
|
|
|
|
+ <div class="tab">
|
|
|
|
+ <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"
|
|
|
|
+ >1#风机</div
|
|
|
|
+ >
|
|
|
|
+ <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }" @click="selectDevice('dataMonitorRowIndex', 1)"
|
|
|
|
+ >2#风机</div
|
|
|
|
+ >
|
|
|
|
+ </div>
|
|
|
|
+ <div class="container-group fault-container-group">
|
|
|
|
+ <div class="electric-box">
|
|
|
|
+ <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">{{ item.title }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="fault-group">
|
|
|
|
+ <template v-if="deviceType">
|
|
|
|
+ <template v-for="(faultItem, faultIndex) in faultData" :key="faultIndex">
|
|
|
|
+ <div
|
|
|
|
+ class="fault-item"
|
|
|
|
+ v-if="faultItem['valueCode'].startsWith(warningMonitorRowIndex === 0 ? 'faultEqu1_electric1' : 'faultEqu2_electric1')"
|
|
|
|
+ >
|
|
|
|
+ <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">{{
|
|
|
|
+ faultItem[item.code]
|
|
|
|
+ }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </template>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="data-item">
|
|
|
|
+ <div class="item-header">二级电机监测</div>
|
|
|
|
+ <div class="item-container">
|
|
|
|
+ <div class="tab">
|
|
|
|
+ <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
|
|
|
|
+ >1#风机</div
|
|
|
|
+ >
|
|
|
|
+ <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }" @click="selectDevice('warningMonitorRowIndex', 1)"
|
|
|
|
+ >2#风机</div
|
|
|
|
+ >
|
|
|
|
+ </div>
|
|
|
|
+ <div class="container-group fault-container-group">
|
|
|
|
+ <div class="electric-box">
|
|
|
|
+ <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">{{ item.title }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="fault-group">
|
|
|
|
+ <template v-if="deviceType">
|
|
|
|
+ <template v-for="(faultItem, faultIndex) in faultData" :key="faultIndex">
|
|
|
|
+ <div
|
|
|
|
+ class="fault-item"
|
|
|
|
+ v-if="faultItem['valueCode'].startsWith(warningMonitorRowIndex === 0 ? 'faultEqu1_electric2' : 'faultEqu2_electric2')"
|
|
|
|
+ >
|
|
|
|
+ <div class="item" v-for="(item, index) in faultDeviceHeader" :key="index" :style="{ width: item.width }">{{
|
|
|
|
+ faultItem[item.code]
|
|
|
|
+ }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </template>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll, 0)">
|
|
<!-- 保德视频及系统外界,保德特有 -->
|
|
<!-- 保德视频及系统外界,保德特有 -->
|
|
<div v-if="sysOrgCode === 'sdmtjtbdmk'" class="bd-control">
|
|
<div v-if="sysOrgCode === 'sdmtjtbdmk'" class="bd-control">
|
|
<div class="button-box" @click="goOutLink('1')">视频查看</div>
|
|
<div class="button-box" @click="goOutLink('1')">视频查看</div>
|
|
@@ -366,7 +422,6 @@
|
|
<div style="z-index: -1; position: absolute; top: -100px; right: 10px; width: 300px; height: 280px; margin: auto" class="palyer">
|
|
<div style="z-index: -1; position: absolute; top: -100px; right: 10px; width: 300px; height: 280px; margin: auto" class="palyer">
|
|
<LivePlayer id="main-player1" ref="player1" :videoUrl="flvURL1()" muted loop loading controls />
|
|
<LivePlayer id="main-player1" ref="player1" :videoUrl="flvURL1()" muted loop loading controls />
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
<div
|
|
<div
|
|
v-show="showPlay"
|
|
v-show="showPlay"
|
|
ref="playerRef"
|
|
ref="playerRef"
|
|
@@ -476,6 +531,14 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</a-modal>
|
|
|
|
+ <!-- 在线监测和故障诊断 -->
|
|
|
|
+ <div v-if="sysOrgCode === 'sdmtjtbdmk'" class="monitor-tab" @click="showFault">
|
|
|
|
+ <div class="item" :class="{ 'item-active': !faultShow }">风机监测</div>
|
|
|
|
+ <div class="item" :class="{ 'item-active': faultShow }">在线故障诊断监测</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 摄像头显示隐藏图标 -->
|
|
|
|
+ <VideoCameraOutlined class="video-icon" :class="{ 'no-play': !showPlay }" @click="changePlay" />
|
|
<!-- 工况辅助决策 -->
|
|
<!-- 工况辅助决策 -->
|
|
<ConditionAssistance @register="registerModal" :deviceType="deviceType" :selectData="selectData" />
|
|
<ConditionAssistance @register="registerModal" :deviceType="deviceType" :selectData="selectData" />
|
|
<DeviceBaseInfo @register="registerModalDeviceEdit" :device-type="selectData['deviceType']" />
|
|
<DeviceBaseInfo @register="registerModalDeviceEdit" :device-type="selectData['deviceType']" />
|
|
@@ -492,12 +555,12 @@
|
|
// import HistoryTable from '../../../vent/comment/history/HistoryTable.vue';
|
|
// import HistoryTable from '../../../vent/comment/history/HistoryTable.vue';
|
|
import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
|
|
import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
|
|
import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
|
|
import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
|
|
- import { modalTypeArr, fbmControlData } from './main.data';
|
|
|
|
|
|
+ import { modalTypeArr, fbmControlData, faultDeviceHeader, PointMonitorType } from './main.data';
|
|
import { deviceControlApi } from '/@/api/vent/index';
|
|
import { deviceControlApi } from '/@/api/vent/index';
|
|
import { mountedThree, destroy, addText, setModelType, playAnimate, resetEcharts } from './main.threejs';
|
|
import { mountedThree, destroy, addText, setModelType, playAnimate, resetEcharts } from './main.threejs';
|
|
import LivePlayer from '@liveqing/liveplayer-v3';
|
|
import LivePlayer from '@liveqing/liveplayer-v3';
|
|
import { SvgIcon } from '/@/components/Icon';
|
|
import { SvgIcon } from '/@/components/Icon';
|
|
- import { list } from './main.api';
|
|
|
|
|
|
+ import { list, pointMonitor } from './main.api';
|
|
import { list as baseList } from '../../deviceManager/fanTabel/fan.api';
|
|
import { list as baseList } from '../../deviceManager/fanTabel/fan.api';
|
|
import { getTableList } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
|
|
import { getTableList } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
|
|
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
@@ -553,6 +616,10 @@
|
|
const dataMonitorRowIndex = ref(0);
|
|
const dataMonitorRowIndex = ref(0);
|
|
// 默认数据右边监测的是1#风机
|
|
// 默认数据右边监测的是1#风机
|
|
const warningMonitorRowIndex = ref(0);
|
|
const warningMonitorRowIndex = ref(0);
|
|
|
|
+ const faultData = ref<PointMonitorType[]>([]); // 存放故障点位监测数据(查的点表)
|
|
|
|
+ const explosionDoorData = ref<PointMonitorType[]>([]); // 存放防爆门点位监测数据(查的点表)
|
|
|
|
+
|
|
|
|
+ const faultShow = ref(false);
|
|
let headElHeight = ref(0);
|
|
let headElHeight = ref(0);
|
|
|
|
|
|
// 监测数据
|
|
// 监测数据
|
|
@@ -566,6 +633,7 @@
|
|
deviceType: '',
|
|
deviceType: '',
|
|
Fan2FanPre: '-',
|
|
Fan2FanPre: '-',
|
|
Fan1FanPre: '-',
|
|
Fan1FanPre: '-',
|
|
|
|
+ otherDevice: '',
|
|
});
|
|
});
|
|
|
|
|
|
const deviceType = ref(selectData.deviceType);
|
|
const deviceType = ref(selectData.deviceType);
|
|
@@ -659,6 +727,9 @@
|
|
|
|
|
|
const { getCamera, removeCamera } = useCamera();
|
|
const { getCamera, removeCamera } = useCamera();
|
|
|
|
|
|
|
|
+ const showFault = () => {
|
|
|
|
+ faultShow.value = !faultShow.value;
|
|
|
|
+ };
|
|
const tabChange = (activeKeyVal) => {
|
|
const tabChange = (activeKeyVal) => {
|
|
activeKey.value = activeKeyVal;
|
|
activeKey.value = activeKeyVal;
|
|
// MonitorDataTable.value.setSelectedRowKeys(selectData.deviceID);
|
|
// MonitorDataTable.value.setSelectedRowKeys(selectData.deviceID);
|
|
@@ -693,9 +764,34 @@
|
|
echartsDataList.value = dataList;
|
|
echartsDataList.value = dataList;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ await getPointData();
|
|
return selectData;
|
|
return selectData;
|
|
};
|
|
};
|
|
|
|
+
|
|
|
|
+ const getPointData = async () => {
|
|
|
|
+ const otherDevice = selectData.otherDevice;
|
|
|
|
+ let faultDevice, doorDevice;
|
|
|
|
+ if (otherDevice) {
|
|
|
|
+ //
|
|
|
|
+ const linkDevices: { deviceType: string; deviceId: string }[] = JSON.parse(otherDevice);
|
|
|
|
+ linkDevices.filter((item) => {
|
|
|
|
+ if (item.deviceType == 'faultEqu') {
|
|
|
|
+ faultDevice = item;
|
|
|
|
+ } else if (item.deviceType == 'explosionproof') {
|
|
|
|
+ doorDevice = item;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ if (faultDevice) {
|
|
|
|
+ const result = await pointMonitor({ ids: faultDevice.deviceId });
|
|
|
|
+ faultData.value = result['valueList'] || [];
|
|
|
|
+ }
|
|
|
|
+ if (doorDevice) {
|
|
|
|
+ const result = await pointMonitor({ ids: doorDevice.deviceId });
|
|
|
|
+ explosionDoorData.value = result['valueList'] || [];
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
// https获取监测数据
|
|
// https获取监测数据
|
|
let timer: null | NodeJS.Timeout = null;
|
|
let timer: null | NodeJS.Timeout = null;
|
|
const getMonitor = (flag?) => {
|
|
const getMonitor = (flag?) => {
|
|
@@ -1314,7 +1410,6 @@
|
|
|
|
|
|
.data-show-box {
|
|
.data-show-box {
|
|
position: relative;
|
|
position: relative;
|
|
-
|
|
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
@@ -1329,7 +1424,7 @@
|
|
.item-header {
|
|
.item-header {
|
|
width: 374px;
|
|
width: 374px;
|
|
background: url('/@/assets/images/vent/lr-top-bg.png') no-repeat;
|
|
background: url('/@/assets/images/vent/lr-top-bg.png') no-repeat;
|
|
- background-size: auto;
|
|
|
|
|
|
+ background-size: cover;
|
|
height: 32px;
|
|
height: 32px;
|
|
text-align: center;
|
|
text-align: center;
|
|
line-height: 34px;
|
|
line-height: 34px;
|
|
@@ -1348,6 +1443,7 @@
|
|
.tab {
|
|
.tab {
|
|
width: 323px;
|
|
width: 323px;
|
|
background: url('/@/assets/images/vent/lr-tab-bg.png') no-repeat;
|
|
background: url('/@/assets/images/vent/lr-tab-bg.png') no-repeat;
|
|
|
|
+ background-size: cover;
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
|
.tab-item {
|
|
.tab-item {
|
|
@@ -1364,7 +1460,7 @@
|
|
}
|
|
}
|
|
|
|
|
|
.tab-item-active-l {
|
|
.tab-item-active-l {
|
|
- color: #ffffff;
|
|
|
|
|
|
+ color: #aff3ff;
|
|
background-image: url('/@/assets/images/vent/l-tab-active.png');
|
|
background-image: url('/@/assets/images/vent/l-tab-active.png');
|
|
background-repeat: no-repeat;
|
|
background-repeat: no-repeat;
|
|
background-size: auto;
|
|
background-size: auto;
|
|
@@ -1372,7 +1468,7 @@
|
|
}
|
|
}
|
|
|
|
|
|
.tab-item-active-r {
|
|
.tab-item-active-r {
|
|
- color: #ffffff;
|
|
|
|
|
|
+ color: #aff3ff;
|
|
background-image: url('/@/assets/images/vent/r-tab-active.png');
|
|
background-image: url('/@/assets/images/vent/r-tab-active.png');
|
|
background-repeat: no-repeat;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 3px;
|
|
background-position: 0 3px;
|
|
@@ -1492,7 +1588,9 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ .fault-container-group {
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
.warning-group {
|
|
.warning-group {
|
|
padding: 0 10px;
|
|
padding: 0 10px;
|
|
position: relative;
|
|
position: relative;
|
|
@@ -1539,9 +1637,47 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .electric-box {
|
|
|
|
+ display: flex;
|
|
|
|
+ .item {
|
|
|
|
+ text-align: center;
|
|
|
|
+ color: #aff3ffee;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .fault-group {
|
|
|
|
+ height: 425px;
|
|
|
|
+ margin-top: 5px;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ .fault-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ padding: 3px 0px;
|
|
|
|
+ border-bottom: 1px solid #ffffff22;
|
|
|
|
+ .item {
|
|
|
|
+ padding: 0 2px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ &:nth-child(odd) {
|
|
|
|
+ background-color: #c3fdff05;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .fault-box {
|
|
|
|
+ .item-header {
|
|
|
|
+ width: 394px !important;
|
|
|
|
+ }
|
|
|
|
+ .item-container {
|
|
|
|
+ width: 366px !important;
|
|
|
|
+ .tab {
|
|
|
|
+ width: 343px !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .container-group {
|
|
|
|
+ width: 334px !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
.scene-box .bottom-tabs-box {
|
|
.scene-box .bottom-tabs-box {
|
|
height: 280px;
|
|
height: 280px;
|
|
@@ -1558,14 +1694,33 @@
|
|
top: 10px;
|
|
top: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ // 保德在线监测和故障诊断切换组件
|
|
|
|
+ .monitor-tab {
|
|
|
|
+ display: flex;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 600px;
|
|
|
|
+ left: 395px;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .item {
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ padding: 0 5px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ .item-active {
|
|
|
|
+ transform: skew(-15deg, 0);
|
|
|
|
+ color: #00f5fe;
|
|
|
|
+ border-bottom: 1px solid #00f5fe;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.video-icon {
|
|
.video-icon {
|
|
width: 30px;
|
|
width: 30px;
|
|
height: 38px;
|
|
height: 38px;
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: -40px;
|
|
|
|
- right: 390px;
|
|
|
|
|
|
+ top: 600px;
|
|
|
|
+ right: 395px;
|
|
color: #fff;
|
|
color: #fff;
|
|
- z-index: 99999;
|
|
|
|
|
|
+ z-index: 1;
|
|
font-size: 28px;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
.no-play {
|
|
.no-play {
|