<template>
|
<div class="container">
|
<div class="center" >
|
<!-- 地图窗口 -->
|
<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>
|
<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" v-if="warnList?.length > 0">
|
<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, onUnmounted, ref} from "vue";
|
import {getPumpData, getPumpWarning} from '@/api/screen/index.js'
|
import { ElMessageBox } from 'element-plus'
|
|
const tucengVal = ref(0);
|
const warnList = ref([])
|
const showMsg = ref(0)
|
const pointList = ref([])
|
const dislogOpen = ref(false)
|
let timer = null;
|
|
const warnCode = ['B001StartNumber', 'B002StartNumber', 'B003StartNumber', 'B004StartNumber']
|
|
const clickMsgFun = (index: number) => {
|
showMsg.value = showMsg.value === index ? null : index;
|
}
|
|
// 获取报警数据
|
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: 84, top: 28,
|
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 gongdainStatus = (n1, n2, n3) => {
|
if ((n1 > 350 && n1 < 400) && (n2 > 350 && n2 < 400) && (n3 > 350 && n3 < 400)) {
|
return true
|
} else {
|
return false
|
}
|
}
|
|
onMounted(() => {
|
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;
|
|
.center {
|
width: 80%;
|
display: flex;
|
flex-direction: column;
|
.map {
|
height: 100%;
|
.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;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.right {
|
width: 20%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.js-box{
|
height: 40%;
|
&:hover{
|
.jiankong{
|
transform: translateX(0);
|
}
|
}
|
}
|
.jiankong {
|
height: 100%;
|
background-image: url('@/assets/images_lc/realTimeMonitoring.png');
|
backdrop-filter: blur(3px);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
transform: translateX(100%);
|
transition: all .5s;
|
&-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>
|
