<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">{{item.name}}</span>
|
</div>
|
<div class="message-item">
|
<span class="name">水浸状态:</span>
|
<span class="val-status">{{item.shuijin}}</span>
|
</div>
|
<div class="message-item">
|
<span class="name">运行时长:</span>
|
<span class="val-status">{{}}</span>
|
</div>
|
<div class="message-item">
|
<span class="name">工作状态:</span>
|
<span class="val-status">{{}}</span>
|
</div>
|
<div class="message-item">
|
<span class="name">水池水位:</span>
|
<span class="val-status">{{item.yewei}}</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="right-box">
|
<!-- 实时监控 -->
|
<div class="jiankong">
|
<div class="jiankong-t">实时监控</div>
|
<div class="jiankong-c">
|
<div class="switch">
|
<div class="switch-l">泵房监控</div>
|
<div class="switch-r">
|
<div class="more" :class="{active: selectType==='two'}" @click="changeType('two')">多屏模式 </div>
|
<div class="single" :class="{active: selectType==='single'}" @click="changeType('single')">单屏模式</div>
|
</div>
|
</div>
|
<div class="video-box">
|
<div class="two" v-if="selectType==='two'">
|
<div class="list" v-for="(item, index) in showList" :key="index">
|
<div class="item" v-if="item?.deviceId">
|
<VideoPlayer :item="item" />
|
</div>
|
<div v-else class="item"></div>
|
</div>
|
</div>
|
<div class="single" v-else>
|
<div class="item" v-if="showList[0]?.deviceId">
|
<VideoPlayer :item="showList[0]" />
|
</div>
|
<div v-else class="item"></div>
|
</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.pointName"
|
placement="top"
|
>
|
{{item.pointName}}
|
</el-tooltip>
|
<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 class="warnRecord-datashow">
|
<div ref="warningRef" class="warning" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { use } from "echarts/core";
|
import * as echarts from 'echarts/core';
|
import {GridComponent, TooltipComponent, LegendComponent} from "echarts/components";
|
import { LineChart, PieChart } from "echarts/charts";
|
import { UniversalTransition, LabelLayout } from "echarts/features";
|
import { CanvasRenderer } from "echarts/renderers";
|
import {onMounted, reactive, ref} from "vue";
|
import {getPumpData} from '@/api/screen/index.js'
|
import {getVideoList} from '@/api/screen/video.js'
|
import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
|
|
|
use([
|
GridComponent,
|
LineChart,
|
CanvasRenderer,
|
UniversalTransition,
|
TooltipComponent,
|
LegendComponent,
|
PieChart,
|
CanvasRenderer,
|
LabelLayout,
|
]);
|
|
const warningRef = ref();
|
let warningCharts = null;
|
|
const tucengVal = ref(0);
|
const selectType = ref('single')
|
const videoList = ref([])
|
const showList = ref([])
|
const warnList = ref([])
|
const showMsg = ref(0)
|
const pointList = ref([])
|
|
const clickMsgFun = (index: number) => {
|
showMsg.value = showMsg.value === index ? null : index;
|
}
|
|
const setWarningCharts = (data) => {
|
if(warningRef.value) {
|
warningCharts = echarts.init(warningRef.value);
|
const option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: '50%',
|
data: data,
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
}
|
warningCharts.setOption(option);
|
}
|
}
|
|
// 切换播放模式
|
const changeType = (type) => {
|
selectType.value = type
|
showList.value = []
|
if(type === 'two') {
|
showList.value = videoList.value.slice(0, 2).concat(Array(2 - videoList.value.length).fill(null))
|
} else {
|
showList.value = videoList.value.slice(0, 1)
|
}
|
}
|
|
// 获取报警数据
|
const getWarning = () => {
|
getHomeWarning().then(res => {
|
warnList.value = res.data.alarmHistoryVOList
|
let data = [
|
{ value: res.data.facilityCount, name: '设备启动异常' },
|
{ value: res.data.waterEnterCount, name: '进水压力异常' },
|
{ value: res.data.waterOutCount, name: '出口压力异常' },
|
]
|
setWarningCharts(data)
|
})
|
}
|
|
// 获取视频列表
|
const getVideo = async (id) => {
|
if(id) {
|
getVideoList({pointId: id}).then(res => {
|
videoList.value = res.data;
|
changeType(selectType.value)
|
})
|
}
|
}
|
|
// 获取泵房信息
|
const getPumpInfo = () => {
|
const pump = []
|
getPumpData().then(res => {
|
res.data.forEach((el, index) => {
|
const yewei = el.parameterVOList.find(item => item.columnsCode === '1001')
|
const shuijin = el.parameterVOList.find(item => item.columnsCode === 'SQ')
|
pump.push({
|
left: 84, top: 28,
|
name: el.facilityName,
|
yewei: yewei.columnValue + yewei?.columnsUnits,
|
shuijin: !Number(shuijin.columnValue) ? '正常' : '异常',
|
})
|
})
|
|
pointList.value = pump
|
})
|
}
|
|
onMounted(() => {
|
getPumpInfo()
|
// getWarning()
|
})
|
</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: 14rem;
|
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;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.right {
|
width: 20%;
|
&:hover{
|
.right-box{
|
transform: translateX(0);
|
}
|
}
|
.right-box{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
gap: 1rem;
|
transform: translateX(100%);
|
transition: all .5s;
|
}
|
.jiankong {
|
height: 45%;
|
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');
|
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: 85%;
|
padding: 0 1rem;
|
.two{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.list{
|
width: 100%;
|
height: 48%;
|
.item{
|
height: 100%;
|
background-color: #000;
|
}
|
}
|
}
|
.single{
|
width: 100%;
|
height: 100%;
|
.item{
|
height: 95%;
|
width: 100%;
|
background-color: #000;
|
}
|
}
|
}
|
}
|
}
|
|
.warnRecord {
|
height: 55%;
|
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');
|
padding-left: 16%;
|
font-size: 1.3rem;
|
}
|
.warnRecord-info {
|
width: 90%;
|
height: 50%;
|
margin: auto;
|
overflow-y: scroll;
|
&::-webkit-scrollbar{
|
display: none;
|
}
|
.into-t{
|
height: 15%;
|
font-size: 1.2rem;
|
padding-top: 0.3rem;
|
}
|
.info-list{
|
height: 85%;
|
.item{
|
padding: 0.5rem 0;
|
display: flex;
|
justify-content: space-between;
|
font-size: 0.8rem;
|
:deep(.el-only-child__content){
|
width: 30%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
.warnRecord-datashow {
|
height: 50%;
|
.warning {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
