|
|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
<customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
|
|
|
<div class="ventilateWarn">
|
|
|
- <div v-if="showToggle=='all'" class="icon-toggle" @click="handlerToggle">
|
|
|
- <img v-if="monitor" src="@/assets/images/vent/monitor-toggle.png" alt="">
|
|
|
- <img v-else src="@/assets/images/vent/report-toggle.png" alt="">
|
|
|
- </div>
|
|
|
+ <div v-if="showToggle == 'all'" class="icon-toggle" @click="handlerToggle">
|
|
|
+ <img v-if="monitor" src="@/assets/images/vent/monitor-toggle.png" alt="" />
|
|
|
+ <img v-else src="@/assets/images/vent/report-toggle.png" alt="" />
|
|
|
+ </div>
|
|
|
<div class="ventilate-top">
|
|
|
<a-button
|
|
|
v-if="!hasPermission('ventilateWarn:return')"
|
|
|
@@ -25,39 +25,51 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ventilate-content">
|
|
|
- <div class="work-nav">
|
|
|
- <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
|
|
|
- <div class="pic" v-if="item.imgSrc"></div>
|
|
|
- <div class="content" v-if="item.label && item.value">
|
|
|
- <span>{{ item.label }}</span>
|
|
|
- <span>{{ item.value }}</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- :style="{ color: item.text == '正常' ? 'var(--vent-table-action-link)' : '#ff2313' }"
|
|
|
- style="width: 100%; padding: 0px 10px; text-align: center; font-weight: bold"
|
|
|
- v-if="item.text"
|
|
|
- >
|
|
|
- {{ item.text }}
|
|
|
- </div>
|
|
|
- <div class="percent" v-if="item.list.length != 0">
|
|
|
- <div class="title">{{ item.label }}</div>
|
|
|
- <div class="value">
|
|
|
- <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
|
|
|
- <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
|
|
|
- <span style="color: var(--vent-table-action-link); margin-left: 10px">{{ items.value }}</span>
|
|
|
+ <a-spin :spinning="loading">
|
|
|
+ <div class="work-nav">
|
|
|
+ <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
|
|
|
+ <div class="pic" v-if="item.imgSrc"></div>
|
|
|
+ <div class="content" v-if="item.label && item.value">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <span>{{ item.value }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :style="{ color: item.text == '正常' ? 'var(--vent-table-action-link)' : '#ff2313' }"
|
|
|
+ style="width: 100%; padding: 0px 10px; text-align: center; font-weight: bold"
|
|
|
+ v-if="item.text"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
+ </div>
|
|
|
+ <div class="percent" v-if="item.list.length != 0">
|
|
|
+ <div class="title">{{ item.label }}</div>
|
|
|
+ <div class="value">
|
|
|
+ <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
|
|
|
+ <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
|
|
|
+ <span style="color: var(--vent-table-action-link); margin-left: 10px">{{ items.value }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="bot-area">
|
|
|
- <div class="title-t">
|
|
|
- <div class="text-t">通风信息状态监测</div>
|
|
|
- </div>
|
|
|
- <div class="echart-boxd">
|
|
|
- <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
|
|
|
+ <div class="bot-area">
|
|
|
+ <div class="title-t">
|
|
|
+ <div class="text-t">通风信息状态监测</div>
|
|
|
+ </div>
|
|
|
+ <div class="echart-boxd">
|
|
|
+ <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </a-spin>
|
|
|
+ </div>
|
|
|
+ <div class="tun-box">
|
|
|
+ <MonitorTable
|
|
|
+ ref="tunMonitorRef"
|
|
|
+ :columns="ventTunColumns"
|
|
|
+ :dataSource="ventTunDataSource"
|
|
|
+ :isShowSelect="false"
|
|
|
+ :scroll="{ y: 300 }"
|
|
|
+ title="巷道阻力分析"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ventilate-bottom">
|
|
|
@@ -69,28 +81,34 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, reactive, onMounted, onUnmounted,computed } from 'vue';
|
|
|
+ import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
|
|
|
import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
|
|
|
import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
import { useGlobSetting } from '/@/hooks/setting';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
|
|
|
import { ventilateTopList } from '../common.data';
|
|
|
+ import MonitorTable from '../../comment/MonitorTable.vue';
|
|
|
import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
|
import echartLine from '../common/echartLine.vue';
|
|
|
import MeasurePoint from '../common/measurePoint.vue';
|
|
|
+ import { ventTunColumns } from '../alarm.data';
|
|
|
+ import { realTimeNetCal } from '../alarm.api';
|
|
|
// import moment from 'moment';
|
|
|
|
|
|
- let monitor=ref(true)
|
|
|
- let toggleData=reactive<any>({})
|
|
|
+ let monitor = ref(true);
|
|
|
+ let toggleData = reactive<any>({});
|
|
|
const { hasPermission } = usePermission();
|
|
|
const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
|
|
|
let router = useRouter();
|
|
|
//左侧数据列表
|
|
|
let menuList = reactive<any[]>([]);
|
|
|
+ const ventTunDataSource = ref([]);
|
|
|
//当前左侧激活菜单的索引
|
|
|
let activeIndex1 = ref(0);
|
|
|
let maxY = ref<any>(0);
|
|
|
+ const loading = ref(false);
|
|
|
+ const currentDeviceId = ref('');
|
|
|
let echartDw = ref('(m³/min)');
|
|
|
//通风图表数据
|
|
|
const echartDataFc1 = reactive<any>({
|
|
|
@@ -110,43 +128,40 @@
|
|
|
});
|
|
|
let cardListTf = ref<any[]>([]);
|
|
|
const chartListTf = ref<any[]>([]);
|
|
|
- let showToggle=ref('')
|
|
|
+ let showToggle = ref('');
|
|
|
//点击切换实时\报表数据
|
|
|
- let handlerToggle=()=>{
|
|
|
- monitor.value=!monitor.value
|
|
|
- ventilateTopList[0].value =monitor.value ? toggleData.jin : toggleData.faceIntM3;
|
|
|
- ventilateTopList[1].value = monitor.value ? toggleData.hui : toggleData.faceRetM3 ;
|
|
|
- if(monitor.value && toggleData.history.length != 0){
|
|
|
- toggleData.history.forEach((v) => {
|
|
|
- echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
- echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
- if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
- echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
- } else {
|
|
|
- echartDataFc1.aveValue.data.push(0);
|
|
|
- }
|
|
|
- echartDataFc1.xData.push(v.time);
|
|
|
- });
|
|
|
- }else {
|
|
|
- toggleData.history_report.forEach((v) => {
|
|
|
- echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
|
|
|
- echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
|
|
|
- echartDataFc1.aveValue.data.push(0);
|
|
|
- echartDataFc1.xData.push(v.time);
|
|
|
- });
|
|
|
+ let handlerToggle = () => {
|
|
|
+ monitor.value = !monitor.value;
|
|
|
+ ventilateTopList[0].value = monitor.value ? toggleData.jin : toggleData.faceIntM3;
|
|
|
+ ventilateTopList[1].value = monitor.value ? toggleData.hui : toggleData.faceRetM3;
|
|
|
+ if (monitor.value && toggleData.history.length != 0) {
|
|
|
+ toggleData.history.forEach((v) => {
|
|
|
+ echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
+ echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
+ if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
+ echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
+ } else {
|
|
|
+ echartDataFc1.aveValue.data.push(0);
|
|
|
}
|
|
|
- }
|
|
|
+ echartDataFc1.xData.push(v.time);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ toggleData.history_report.forEach((v) => {
|
|
|
+ echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
|
|
|
+ echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
|
|
|
+ echartDataFc1.aveValue.data.push(0);
|
|
|
+ echartDataFc1.xData.push(v.time);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
// https获取监测数据
|
|
|
let timer: null | NodeJS.Timeout = null;
|
|
|
- function getMonitor(deviceID, flag?) {
|
|
|
+ function getMonitor(flag?) {
|
|
|
timer = setTimeout(
|
|
|
async () => {
|
|
|
- await getSysWarnList(deviceID, 'vent');
|
|
|
+ await getSysWarnList(currentDeviceId.value, 'vent');
|
|
|
await getWindDeviceList();
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- getMonitor(deviceID);
|
|
|
+ getMonitor(false);
|
|
|
},
|
|
|
flag ? 0 : 1000
|
|
|
);
|
|
|
@@ -168,14 +183,19 @@
|
|
|
strtype: el.deviceType,
|
|
|
});
|
|
|
});
|
|
|
- getMonitor(menuList[0].deviceID, true);
|
|
|
+ currentDeviceId.value = menuList[0].deviceID;
|
|
|
+ // getMonitor(, true);
|
|
|
}
|
|
|
}
|
|
|
//菜单选项切换
|
|
|
function cardClick(ind, item) {
|
|
|
activeIndex1.value = ind;
|
|
|
- clearTimeout(timer);
|
|
|
- getMonitor(item.deviceID, true);
|
|
|
+ if (timer) clearTimeout(timer);
|
|
|
+ loading.value = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ currentDeviceId.value = item.deviceID;
|
|
|
+ getMonitor(true);
|
|
|
+ }, 1000);
|
|
|
}
|
|
|
//获取预警详情弹窗右侧数据
|
|
|
function getSysWarnList(id, type) {
|
|
|
@@ -185,57 +205,57 @@
|
|
|
echartDataFc1.aveValue.data.length = 0;
|
|
|
echartDataFc1.xData.length = 0;
|
|
|
if (JSON.stringify(res) != '{}') {
|
|
|
- toggleData=Object.assign({},res)
|
|
|
+ toggleData = Object.assign({}, res);
|
|
|
ventilateTopList[2].value = res.xufengliang || '--';
|
|
|
ventilateTopList[3].text = res.warnFlag ? res.warnDes : '正常';
|
|
|
- if(showToggle.value=='monitor'){
|
|
|
- ventilateTopList[0].value =res.jin
|
|
|
- ventilateTopList[1].value =res.hui
|
|
|
- if(res.history.length != 0){
|
|
|
- res.history.forEach((v) => {
|
|
|
- echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
- echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
- if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
- echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
- } else {
|
|
|
- echartDataFc1.aveValue.data.push(0);
|
|
|
- }
|
|
|
- echartDataFc1.xData.push(v.time);
|
|
|
- });
|
|
|
- }
|
|
|
- }else if(showToggle.value=='report'){
|
|
|
- ventilateTopList[0].value =res.faceIntM3;
|
|
|
- ventilateTopList[1].value =res.faceRetM3 ;
|
|
|
- if(res.history_report.length != 0){
|
|
|
+ if (showToggle.value == 'monitor') {
|
|
|
+ ventilateTopList[0].value = res.jin;
|
|
|
+ ventilateTopList[1].value = res.hui;
|
|
|
+ if (res.history.length != 0) {
|
|
|
+ res.history.forEach((v) => {
|
|
|
+ echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
+ echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
+ if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
+ echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
+ } else {
|
|
|
+ echartDataFc1.aveValue.data.push(0);
|
|
|
+ }
|
|
|
+ echartDataFc1.xData.push(v.time);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else if (showToggle.value == 'report') {
|
|
|
+ ventilateTopList[0].value = res.faceIntM3;
|
|
|
+ ventilateTopList[1].value = res.faceRetM3;
|
|
|
+ if (res.history_report.length != 0) {
|
|
|
res.history_report.forEach((v) => {
|
|
|
- echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
|
|
|
- echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
|
|
|
- echartDataFc1.aveValue.data.push(0);
|
|
|
- echartDataFc1.xData.push(v.time);
|
|
|
- });
|
|
|
+ echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
|
|
|
+ echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
|
|
|
+ echartDataFc1.aveValue.data.push(0);
|
|
|
+ echartDataFc1.xData.push(v.time);
|
|
|
+ });
|
|
|
}
|
|
|
- }else {
|
|
|
- ventilateTopList[0].value =monitor.value ? res.jin : res.faceIntM3;
|
|
|
- ventilateTopList[1].value = monitor.value ? res.hui : res.faceRetM3 ;
|
|
|
- if(monitor.value && res.history.length != 0){
|
|
|
- res.history.forEach((v) => {
|
|
|
- echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
- echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
- if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
- echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
- } else {
|
|
|
+ } else {
|
|
|
+ ventilateTopList[0].value = monitor.value ? res.jin : res.faceIntM3;
|
|
|
+ ventilateTopList[1].value = monitor.value ? res.hui : res.faceRetM3;
|
|
|
+ if (monitor.value && res.history.length != 0) {
|
|
|
+ res.history.forEach((v) => {
|
|
|
+ echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
+ echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
+ if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
+ echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
+ } else {
|
|
|
+ echartDataFc1.aveValue.data.push(0);
|
|
|
+ }
|
|
|
+ echartDataFc1.xData.push(v.time);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ res.history_report.forEach((v) => {
|
|
|
+ echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
|
|
|
+ echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
|
|
|
echartDataFc1.aveValue.data.push(0);
|
|
|
- }
|
|
|
- echartDataFc1.xData.push(v.time);
|
|
|
- });
|
|
|
- }else {
|
|
|
- res.history_report.forEach((v) => {
|
|
|
- echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
|
|
|
- echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
|
|
|
- echartDataFc1.aveValue.data.push(0);
|
|
|
- echartDataFc1.xData.push(v.time);
|
|
|
- });
|
|
|
- }
|
|
|
+ echartDataFc1.xData.push(v.time);
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
|
|
|
@@ -307,10 +327,17 @@
|
|
|
chartListTf.value = chartTfList;
|
|
|
}
|
|
|
}
|
|
|
+ function getRealTimeNetData() {
|
|
|
+ const res = realTimeNetCal({ modelID: '8110' });
|
|
|
+ if (res && res['result']) ventTunDataSource.value = res['result']['tuns'];
|
|
|
+ }
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
const { sysOrgCode, sysDataType } = useGlobSetting();
|
|
|
- showToggle.value=sysDataType
|
|
|
+ showToggle.value = sysDataType;
|
|
|
getMenuList();
|
|
|
+ getMonitor();
|
|
|
+ getRealTimeNetData();
|
|
|
});
|
|
|
onUnmounted(() => {
|
|
|
if (timer) {
|
|
|
@@ -345,28 +372,29 @@
|
|
|
--image-xufengliang: url('/@/assets/images/fire/xufengliang.png');
|
|
|
--border-image-1: linear-gradient(to bottom, #2d74a0, #2d74a0, #2d74a0);
|
|
|
--border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
|
|
|
- position:reactive;
|
|
|
+ position: reactive;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 80px 10px 15px 10px;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.ventilate-top {
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
height: 50%;
|
|
|
margin-bottom: 15px;
|
|
|
background: var(--image-border) no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
-
|
|
|
+ padding-right: 15px;
|
|
|
.alarm-menu {
|
|
|
height: 100%;
|
|
|
- width: 15%;
|
|
|
+ // width: 200px;
|
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.card-btn {
|
|
|
- width: 100%;
|
|
|
+ width: 240px;
|
|
|
height: 100%;
|
|
|
overflow-y: auto;
|
|
|
|
|
|
@@ -440,9 +468,10 @@
|
|
|
|
|
|
.ventilate-content {
|
|
|
height: 100%;
|
|
|
- width: 85%;
|
|
|
+ width: 1300px;
|
|
|
padding: 10px 0px;
|
|
|
box-sizing: border-box;
|
|
|
+ margin-right: 10px;
|
|
|
|
|
|
.work-nav {
|
|
|
height: 30%;
|
|
|
@@ -490,7 +519,7 @@
|
|
|
border-image: var(--border-image-2) 1 1 1;
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
&:nth-child(5) {
|
|
|
flex: 1.4;
|
|
|
height: 100%;
|
|
|
@@ -524,8 +553,8 @@
|
|
|
}*/
|
|
|
|
|
|
.pic {
|
|
|
- width: 30%;
|
|
|
- height: 82%;
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
@@ -591,12 +620,15 @@
|
|
|
|
|
|
.echart-boxd {
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 30px);
|
|
|
+ height: 250px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ .tun-box {
|
|
|
+ width: 600px;
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
.ventilate-bottom {
|
|
|
height: calc(50% - 15px);
|
|
|
background: var(--image-border) no-repeat center;
|
|
|
@@ -612,15 +644,15 @@
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
- .icon-toggle{
|
|
|
- position: absolute;
|
|
|
- right: 220px;
|
|
|
- top: 17px;
|
|
|
- img{
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- cursor: pointer;
|
|
|
+ .icon-toggle {
|
|
|
+ position: absolute;
|
|
|
+ right: 220px;
|
|
|
+ top: 17px;
|
|
|
+ img {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
</style>
|
hongrunxia