From 7885ad510c6246a35ba14faff7cfdbc066e269cd Mon Sep 17 00:00:00 2001 From: web <candymxq888@outlook.com> Date: 星期四, 17 四月 2025 14:51:30 +0800 Subject: [PATCH] feat: 添加报表,报警,首页 --- src/views/screen/home/index.vue | 689 +++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 501 insertions(+), 188 deletions(-) diff --git a/src/views/screen/home/index.vue b/src/views/screen/home/index.vue index 601b0fa..e4cd659 100644 --- a/src/views/screen/home/index.vue +++ b/src/views/screen/home/index.vue @@ -1,6 +1,71 @@ <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"> @@ -10,23 +75,23 @@ <div class="message" v-show="showMsg === index"> <div class="message-item"> <span class="name">泵房名称:</span> - <span class="val">{{item.name}}</span> + <span class="val">下瓦房新风井泵房</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> + <span :class="item.shuijin === '正常' ? 'val-status' : 'err-status'">{{item.shuijin}}</span> </div> <div class="message-item"> <span class="name">工作状态:</span> - <span class="val-status">{{}}</span> + <span :class="item.status === '排水' ? 'val-status' : 'err-status'">{{item.status}}</span> </div> <div class="message-item"> - <span class="name">水池水位:</span> - <span class="val-status">{{item.yewei}}</span> + <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> @@ -36,71 +101,119 @@ </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="right-box"> - <!-- 实时监控 --> + <!-- 实时监控 --> + <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 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> + <router-link to="/screen/monitor" class="item"> + <el-icon><VideoPlay /></el-icon> + </router-link> </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 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 class="warnRecord-datashow"> - <div ref="warningRef" class="warning" /> </div> </div> </div> @@ -109,103 +222,73 @@ </template> <script setup lang="ts"> -import { use } from "echarts/core"; +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, 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"; +import { GridComponent, TooltipComponent } from 'echarts/components'; +import { BarChart } from 'echarts/charts'; +import { CanvasRenderer } from 'echarts/renderers'; +echarts.use([GridComponent, TooltipComponent, BarChart, CanvasRenderer]); -use([ - GridComponent, - LineChart, - CanvasRenderer, - UniversalTransition, - TooltipComponent, - LegendComponent, - PieChart, - CanvasRenderer, - LabelLayout, -]); - -const warningRef = ref(); -let warningCharts = null; - +const warnChart = ref(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 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 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 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 = () => { - 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) + 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 getVideo = async (id) => { - if(id) { - getVideoList({pointId: id}).then(res => { - videoList.value = res.data; - changeType(selectType.value) - }) - } } // 获取泵房信息 @@ -213,13 +296,18 @@ 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') + 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, + left: 80, top: 20, name: el.facilityName, - yewei: yewei.columnValue + yewei?.columnsUnits, + totalTime: el.totalTime, + gongdain: gongdainStatus(Number(v1.columnValue), Number(v2.columnValue), Number(v3.columnValue)), shuijin: !Number(shuijin.columnValue) ? '正常' : '异常', + status: Number(status.columnValue) < 0 ? '吸水' : '排水', }) }) @@ -227,9 +315,80 @@ }) } +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() + getWarning() + // 定时获取报警信息 + timer = setInterval(() => { + getWarning() + }, 5000) +}) +onUnmounted(() => { + if(timer){ + clearInterval(timer) + } }) </script> @@ -265,13 +424,123 @@ justify-content: space-between; color: white; overflow: hidden; - - .center { - width: 80%; + 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: 100%; + height: 53%; .point-box{ width: 100%; height: 100%; @@ -284,7 +553,7 @@ } .message{ width: 12rem; - height: 14rem; + height: 12rem; background: url("@/assets/images_lc/point-message.png") no-repeat; backdrop-filter: blur(3px); background-size: 100% 100%; @@ -302,6 +571,68 @@ .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; + } } } } @@ -311,27 +642,23 @@ .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; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + .js-box{ + height: 40%; } .jiankong { - height: 45%; + 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; } @@ -378,38 +705,22 @@ } } .video-box{ - height: 85%; + height: 80%; padding: 0 1rem; - .two{ - width: 100%; + .item{ height: 100%; + background-color: #000; 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; - } + justify-content: center; + font-size: 3rem; } } } } .warnRecord { - height: 55%; + height: 58%; background-image: url('@/assets/images_lc/warnRecord.png'); backdrop-filter: blur(3px); background-repeat: no-repeat; @@ -418,31 +729,33 @@ 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: 50%; + height: 90%; margin: auto; overflow-y: scroll; &::-webkit-scrollbar{ display: none; } .into-t{ - height: 15%; + height: 10%; font-size: 1.2rem; padding-top: 0.3rem; } .info-list{ - height: 85%; + height: 90%; .item{ padding: 0.5rem 0; display: flex; justify-content: space-between; font-size: 0.8rem; :deep(.el-only-child__content){ - width: 30%; + width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -- Gitblit v1.9.3