<template>
|
<div class="container">
|
<div class="left">
|
<div class="warn">
|
<div class="warn-t">报警次数排名</div>
|
<div class="warn-c">
|
<div class="warnCharts" ref="warnChart"></div>
|
</div>
|
</div>
|
<div class="pumpList">
|
<div class="pumpList-t">泵站列表</div>
|
<div class="pumpList-c">
|
<div class="list">
|
<div class="listItem">
|
<div class="name">西南楼新风井泵房</div>
|
<div class="value default">正常运行</div>
|
</div>
|
<div class="listItem">
|
<div class="name">西南楼新风井泵房</div>
|
<div class="value default">正常运行</div>
|
</div>
|
<div class="listItem">
|
<div class="name">西南楼新风井泵房</div>
|
<div class="value error">异常运行</div>
|
</div>
|
<div class="listItem">
|
<div class="name">西南楼新风井泵房</div>
|
<div class="value default">正常运行</div>
|
</div>
|
<div class="listItem">
|
<div class="name">西南楼新风井泵房</div>
|
<div class="value offline">离线断开</div>
|
</div>
|
<div class="listItem">
|
<div class="name">西南楼新风井泵房</div>
|
<div class="value default">正常运行</div>
|
</div>
|
<div class="listItem">
|
<div class="name">西南楼新风井泵房</div>
|
<div class="value default">正常运行</div>
|
</div>
|
<div class="listItem">
|
<div class="name">西南楼新风井泵房</div>
|
<div class="value default">正常运行</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="center" >
|
<div class="info">
|
<div class="infoItem" :class="{active: openStatus.bengfang}" @click="setOpenStatus('bengfang')">
|
<div class="infoItem-t">泵房数目</div>
|
<div class="infoItem-c" v-if="openStatus.bengfang"><span>36</span>个</div>
|
</div>
|
<div class="infoItem" :class="{active: openStatus.shuibeng}" @click="setOpenStatus('shuibeng')">
|
<div class="infoItem-t">水泵数量</div>
|
<div class="infoItem-c" v-if="openStatus.shuibeng"><span>44</span>个</div>
|
</div>
|
<div class="infoItem" :class="{active: openStatus.liuliangji}" @click="setOpenStatus('liuliangji')">
|
<div class="infoItem-t">流量计个数</div>
|
<div class="infoItem-c" v-if="openStatus.liuliangji"><span>25</span>个</div>
|
</div>
|
<div class="infoItem" :class="{active: openStatus.shuijin}" @click="setOpenStatus('shuijin')">
|
<div class="infoItem-t">水浸传感器数量</div>
|
<div class="infoItem-c" v-if="openStatus.shuijin"><span>25</span>个</div>
|
</div>
|
</div>
|
<!-- 地图窗口 -->
|
<div class="map">
|
<div class="point-box" v-if="tucengVal === 0">
|
<div class="apoint" v-for="(item, index) in pointList" :key="index"
|
:style="`left: ${item?.left}%; top: ${item?.top}%`" @click="clickMsgFun(index)">
|
<img src="../../../assets/images_lc/a-point.png" alt="" />
|
<div class="message" v-show="showMsg === index">
|
<div class="message-item">
|
<span class="name">泵房名称:</span>
|
<span class="val">下瓦房新风井泵房</span>
|
</div>
|
<div class="message-item">
|
<span class="name">水浸状态:</span>
|
<span :class="item.shuijin === '正常' ? 'val-status' : 'err-status'">{{item.shuijin}}</span>
|
</div>
|
<div class="message-item">
|
<span class="name">工作状态:</span>
|
<span :class="item.status === '排水' ? 'val-status' : 'err-status'">{{item.status}}</span>
|
</div>
|
<div class="message-item">
|
<span class="name">供电状态:</span>
|
<span :class="item.gongdain ? 'val-status' : 'err-status'">{{item.gongdain ? '正常' : '异常'}}</span>
|
</div>
|
<div class="message-item">
|
<span class="name">总运行时长:</span>
|
<span class="val-status">{{item.totalTime}}</span>
|
</div>
|
<div class="message-item">
|
<span class="name">其他详细信息:</span>
|
<router-link class="val" to="/screen/pumpInfo">点击跳转</router-link>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="yunxing">
|
<div class="yunxing-t">运行情况统计</div>
|
<div class="yunxing-c">
|
<div class="list">
|
<div class="item">
|
<div class="item-t">
|
<div class="type">运行正常</div>
|
<div class="num default">68</div>
|
</div>
|
<div class="item-c">
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="item-t">
|
<div class="type">运行异常</div>
|
<div class="num error">8</div>
|
</div>
|
<div class="item-c">
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="item-t">
|
<div class="type">离线断开</div>
|
<div class="num offline">16</div>
|
</div>
|
<div class="item-c">
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
<div class="name">西风楼新风井泵房</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right">
|
<!-- 实时监控 -->
|
<div class="js-box">
|
<div class="jiankong">
|
<div class="jiankong-t">实时监控</div>
|
<div class="jiankong-c">
|
<div class="switch">
|
<div class="switch-l">泵房监控</div>
|
</div>
|
<div class="video-box">
|
<router-link to="/screen/monitor" class="item">
|
<el-icon><VideoPlay /></el-icon>
|
</router-link>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 报警记录 -->
|
<div class="warnRecord">
|
<div class="warnRecord-title">报警记录</div>
|
<div class="warnRecord-info">
|
<div class="into-t">报警信息</div>
|
<div class="info-list">
|
<div class="item" v-for="(item, index) in warnList" :key="index">
|
<el-tooltip
|
effect="dark"
|
:content="item.facilityName"
|
placement="top"
|
>
|
{{item.facilityName}}
|
</el-tooltip>
|
<el-tooltip
|
effect="dark"
|
:content="item.description"
|
placement="top"
|
>
|
{{item.description}}
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {onMounted, reactive, onUnmounted, ref} from "vue";
|
import {getPumpData, getPumpWarning} from '@/api/screen/index.js'
|
import { ElMessageBox } from 'element-plus'
|
import * as echarts from 'echarts/core';
|
import { GridComponent, TooltipComponent } from 'echarts/components';
|
import { BarChart } from 'echarts/charts';
|
import { CanvasRenderer } from 'echarts/renderers';
|
echarts.use([GridComponent, TooltipComponent, BarChart, CanvasRenderer]);
|
|
|
const warnChart = ref(null)
|
const tucengVal = ref(0);
|
const warnList = ref([])
|
const showMsg = ref(0)
|
const pointList = ref([])
|
const dislogOpen = ref(false)
|
let timer = null;
|
let warnCharts = null
|
|
const openStatus = reactive({
|
bengfang: false,
|
shuibeng: false,
|
liuliangji: false,
|
shuijin: false
|
})
|
|
const warnCode = ['B001StartNumber', 'B002StartNumber', 'B003StartNumber', 'B004StartNumber']
|
|
const clickMsgFun = (index: number) => {
|
showMsg.value = showMsg.value === index ? null : index;
|
}
|
|
const setOpenStatus = (type: string) => {
|
switch (type) {
|
case "bengfang":
|
openStatus.bengfang = openStatus.bengfang ? false : true;
|
break;
|
case "shuibeng":
|
openStatus.shuibeng = openStatus.shuibeng ? false : true;
|
break;
|
case "liuliangji":
|
openStatus.liuliangji = openStatus.liuliangji ? false : true;
|
break
|
case "shuijin":
|
openStatus.shuijin = openStatus.shuijin ? false : true;
|
break
|
default:
|
break;
|
}
|
}
|
|
// 获取报警数据
|
const getWarning = () => {
|
getPumpWarning({limit: 10, page:1}).then(res => {
|
warnList.value = res.data.list
|
const warnDialogList = res.data.list.filter(el => warnCode.includes(el.code))
|
if(!dislogOpen.value && warnDialogList.length > 0) {
|
dislogOpen.value=true
|
ElMessageBox.confirm(warnDialogList[0].facilityName, warnDialogList[0].description, {
|
showCancelButton: false,
|
confirmButtonText: '关闭',
|
type: 'error'
|
}).then(() => {
|
console.log('关闭')
|
})
|
}
|
})
|
}
|
|
// 获取泵房信息
|
const getPumpInfo = () => {
|
const pump = []
|
getPumpData().then(res => {
|
res.data.forEach((el, index) => {
|
const shuijin = el.parameterVOList.find(item => item.columnsCode === 'SQ')
|
const status = el.parameterVOList.find(item => item.columnsCode === '1012')
|
const v1 = el.parameterVOList.find(item => item.columnsCode === '2001A')
|
const v2 = el.parameterVOList.find(item => item.columnsCode === '2001B')
|
const v3 = el.parameterVOList.find(item => item.columnsCode === '2001C')
|
pump.push({
|
left: 80, top: 20,
|
name: el.facilityName,
|
totalTime: el.totalTime,
|
gongdain: gongdainStatus(Number(v1.columnValue), Number(v2.columnValue), Number(v3.columnValue)),
|
shuijin: !Number(shuijin.columnValue) ? '正常' : '异常',
|
status: Number(status.columnValue) < 0 ? '吸水' : '排水',
|
})
|
})
|
|
pointList.value = pump
|
})
|
}
|
|
const initWarnCharts = () => {
|
if(warnChart.value) {
|
warnCharts = echarts.init(warnChart.value);
|
const option = {
|
grid: {
|
top: '10%',
|
bottom: '10%',
|
left: '12%'
|
},
|
tooltip: {
|
trigger: 'item',
|
},
|
xAxis: {
|
type: 'category',
|
data: ['西南楼', '文化中心', '天津宾馆', '体育中心'],
|
axisLabel: {
|
color: '#fff',
|
fontSize: '0.8rem'
|
},
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
color: '#fff',
|
fontSize: '0.8rem'
|
},
|
},
|
series: [
|
{
|
data: [120, 200, 150, 80],
|
type: 'bar',
|
itemStyle: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0, color: '#ff0000' // 0% 处的颜色
|
}, {
|
offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
|
}],
|
}
|
}
|
}
|
]
|
}
|
warnCharts.setOption(option);
|
}
|
}
|
|
|
const gongdainStatus = (n1, n2, n3) => {
|
if ((n1 > 350 && n1 < 400) && (n2 > 350 && n2 < 400) && (n3 > 350 && n3 < 400)) {
|
return true
|
} else {
|
return false
|
}
|
}
|
|
onMounted(() => {
|
initWarnCharts()
|
getPumpInfo()
|
getWarning()
|
// 定时获取报警信息
|
timer = setInterval(() => {
|
getWarning()
|
}, 5000)
|
})
|
onUnmounted(() => {
|
if(timer){
|
clearInterval(timer)
|
}
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
background-image: url("@/assets/images_lc/map.png");
|
background-size: 100%;
|
background-repeat: no-repeat;
|
background-position: 50% 50%;
|
transition: background-size 0.3s ease;
|
}
|
.homeSelectName{
|
.el-radio-group{
|
flex-direction: column;
|
align-items: flex-start;
|
.el-radio{
|
font-size: 1rem;
|
}
|
}
|
.clear{
|
margin: 5px 30px 10px 20px;
|
text-align: right;
|
color: #3aa8ef;
|
font-size: 0.8rem;
|
cursor: pointer;
|
}
|
}
|
|
.container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
color: white;
|
overflow: hidden;
|
gap: 1rem;
|
.left{
|
width: 20%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.warn{
|
height: 40%;
|
background-image: url('@/assets/images_lc/realTimeMonitoring.png');
|
backdrop-filter: blur(3px);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
&-t {
|
background-image: url('@/assets/images_lc/title_font.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding-left: 16%;
|
font-size: 1.2rem;
|
}
|
|
&-c {
|
height: 90%;
|
.warnCharts{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.pumpList{
|
height: 58%;
|
background-image: url('@/assets/images_lc/warnRecord.png');
|
backdrop-filter: blur(3px);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
&-t{
|
background-image: url('@/assets/images_lc/title_font.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding-left: 16%;
|
font-size: 1.3rem;
|
}
|
&-c{
|
height: 90%;
|
padding: 1rem;
|
.list{
|
height: 100%;
|
overflow-y: scroll;
|
&::-webkit-scrollbar{
|
display: none;
|
}
|
.listItem{
|
width: 100%;
|
padding: 1rem 0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.value{
|
padding: 0.5rem 1rem;
|
border-radius: 0.5rem;
|
}
|
.default{
|
background-color: #1ab394;
|
}
|
.error{
|
background-color: #d53333;
|
}
|
.offline{
|
background-color: #aaaaaa;
|
}
|
}
|
}
|
}
|
}
|
}
|
.center {
|
width: 58%;
|
display: flex;
|
flex-direction: column;
|
.info{
|
height: 17%;
|
display: flex;
|
justify-content: space-between;
|
.infoItem{
|
width: 18%;
|
height: 3.5rem;
|
background: url("@/assets/images_lc/data_info_bg.png") no-repeat;
|
background-size: 100% 100%;
|
overflow: hidden;
|
position: relative;
|
cursor: pointer;
|
&-t{
|
font-size: 1.3rem;
|
width: 100%;
|
height: 3rem;
|
line-height: 3rem;
|
text-align: center;
|
}
|
&-c{
|
width: 100%;
|
text-align: center;
|
position: absolute;
|
bottom: 20%;
|
span{
|
font-size:2rem;
|
}
|
}
|
&.active{
|
width: 18%;
|
height: 8.6rem;
|
background: url("@/assets/images_lc/data_info_bg_zk.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
.map {
|
height: 53%;
|
.point-box{
|
width: 100%;
|
height: 100%;
|
position: relative;
|
.apoint{
|
position: absolute;
|
img{
|
width: 1.5rem;
|
height: 3rem
|
}
|
.message{
|
width: 12rem;
|
height: 12rem;
|
background: url("@/assets/images_lc/point-message.png") no-repeat;
|
backdrop-filter: blur(3px);
|
background-size: 100% 100%;
|
padding: 0 0.2rem;
|
position: absolute;
|
right: 2rem;
|
top: 0;
|
z-index: 100;
|
.message-item{
|
font-size: 0.7rem;
|
padding: 0.5rem 0 0.5rem 0.9rem;
|
.name{
|
margin-right: 0.5rem;
|
}
|
.val-status{
|
color: #22E195;
|
}
|
.err-status{
|
color: red;
|
}
|
}
|
}
|
}
|
}
|
}
|
.yunxing{
|
height: 30%;
|
background-image: url('@/assets/images_lc/yunxing-statis.png');
|
backdrop-filter: blur(3px);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
&-t{
|
background-image: url('@/assets/images_lc/title_font.png');
|
background-repeat: no-repeat;
|
background-size: 40% 100%;
|
padding-left: 6%;
|
font-size: 1.3rem;
|
}
|
&-c{
|
height: 90%;
|
.list{
|
height: 100%;
|
width: 100%;
|
display: flex;
|
padding-left: 1rem;
|
.item{
|
width: 33%;
|
&-t{
|
display: flex;
|
align-items: center;
|
height: 20%;
|
.type{
|
width: 50%;
|
}
|
.num{
|
font-size: 1.3rem;
|
}
|
.default{
|
color: #1ab394;
|
}
|
.error{
|
color: #f61731;
|
}
|
.offline{
|
color: #acacac;
|
}
|
}
|
&-c{
|
height: 70%;
|
display: flex;
|
flex-wrap: wrap;
|
overflow-y: scroll;
|
&::-webkit-scrollbar{
|
display: none;
|
}
|
.name{
|
width: 50%;
|
padding-top: 1rem;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.right {
|
width: 20%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.js-box{
|
height: 40%;
|
}
|
.jiankong {
|
height: 100%;
|
background-image: url('@/assets/images_lc/realTimeMonitoring.png');
|
backdrop-filter: blur(3px);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
&-t {
|
background-image: url('@/assets/images_lc/title_font.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding-left: 16%;
|
font-size: 1.2rem;
|
}
|
|
&-c {
|
height: 90%;
|
.switch {
|
height: 15%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 1.5rem;
|
|
.switch-l {
|
font-weight: 700;
|
}
|
.switch-r{
|
display: flex;
|
gap: 1rem;
|
}
|
.more {
|
width: 6rem;
|
height: 1.5rem;
|
line-height: 1.5rem;
|
text-align: center;
|
background-image: url('@/assets/images_lc/switch.png');
|
background-size: 100% 100%;
|
color: #cfcfcf;
|
font-size: 0.9rem;
|
}
|
|
.single {
|
width: 6rem;
|
height: 1.5rem;
|
line-height: 1.5rem;
|
text-align: center;
|
background-image: url('@/assets/images_lc/switch.png');
|
background-size: 100% 100%;
|
color: #cfcfcf;
|
font-size: 0.9rem;
|
}
|
.active{
|
color: #fff;
|
}
|
}
|
.video-box{
|
height: 80%;
|
padding: 0 1rem;
|
.item{
|
height: 100%;
|
background-color: #000;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 3rem;
|
}
|
}
|
}
|
}
|
|
.warnRecord {
|
height: 58%;
|
background-image: url('@/assets/images_lc/warnRecord.png');
|
backdrop-filter: blur(3px);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
flex-direction: column;
|
.warnRecord-title {
|
background-image: url('@/assets/images_lc/title_font.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding-left: 16%;
|
font-size: 1.3rem;
|
}
|
.warnRecord-info {
|
width: 90%;
|
height: 90%;
|
margin: auto;
|
overflow-y: scroll;
|
&::-webkit-scrollbar{
|
display: none;
|
}
|
.into-t{
|
height: 10%;
|
font-size: 1.2rem;
|
padding-top: 0.3rem;
|
}
|
.info-list{
|
height: 90%;
|
.item{
|
padding: 0.5rem 0;
|
display: flex;
|
justify-content: space-between;
|
font-size: 0.8rem;
|
:deep(.el-only-child__content){
|
width: 50%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
.warnRecord-datashow {
|
height: 50%;
|
.warning {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
