5 changed files with 835 additions and 358 deletions
@ -0,0 +1,27 @@ |
|||||||
|
import request from "@/utils/request"; |
||||||
|
|
||||||
|
// 采暖泵列表
|
||||||
|
export function heatPumpList(query) { |
||||||
|
return request({ |
||||||
|
url: "/device/heatPump/list", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
|
// 采暖泵在线情况
|
||||||
|
export function heatPumpOnlineList(query) { |
||||||
|
return request({ |
||||||
|
url: "/device/heatPump/online", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
|
// 采暖泵报警列表
|
||||||
|
export function heatPumpAlarmList(query) { |
||||||
|
return request({ |
||||||
|
url: "/device/heatPump/alarmList", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,20 @@ |
|||||||
|
<template> |
||||||
|
<div></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
created() { |
||||||
|
this.toPage(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toPage() { |
||||||
|
console.log("需要跳转的") |
||||||
|
// 跳转到展示 |
||||||
|
this.$router.push("/steamHeatingDetails") |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style></style> |
||||||
@ -0,0 +1,420 @@ |
|||||||
|
<template> |
||||||
|
<div class="monitor" v-loading="loading"> |
||||||
|
<div class="monitor-top"> |
||||||
|
<img |
||||||
|
class="title-left" |
||||||
|
src="../../../assets/images/title-left.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<img |
||||||
|
class="title-center" |
||||||
|
src="../../../assets/images/title-center.png" |
||||||
|
alt="" |
||||||
|
@click="goSys" |
||||||
|
/> |
||||||
|
<img |
||||||
|
class="title-right" |
||||||
|
src="../../../assets/images/title-right.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<div class="sys-title" @click="goSys">蒸汽采暖系统运行监测</div> |
||||||
|
<!-- logo --> |
||||||
|
<img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" /> |
||||||
|
<div class="nowTime">{{ formattedDate }}</div> |
||||||
|
<div class="monitor-time">已监测时长:{{ dayData }}天</div> |
||||||
|
<img |
||||||
|
class="icon_warning" |
||||||
|
src="../../../assets/images/warning.png" |
||||||
|
title="报警记录" |
||||||
|
@click="goWarning" |
||||||
|
v-if="isShowWarning" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<img |
||||||
|
class="icon_home" |
||||||
|
src="../../../assets/images/icon_home.png" |
||||||
|
title="首页" |
||||||
|
@click="goSys" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<img |
||||||
|
class="back-icon" |
||||||
|
src="../../../assets/images/back-icon.png" |
||||||
|
title="返回" |
||||||
|
@click="goBack" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { runTime } from "@/api/centerairC/sysMonitor"; |
||||||
|
import { alarmRecordList } from "@/api/alarm/alarmRecord"; |
||||||
|
import { monitorList } from "@/api/centerairC/sysMonitor"; |
||||||
|
import { getDay } from "@/utils/datetime"; |
||||||
|
export default { |
||||||
|
name: "boilerMonitorDetails", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: false, |
||||||
|
currentDate: new Date(), |
||||||
|
nowTimer: null, |
||||||
|
timer: null, // 用于存储定时器 ID |
||||||
|
isShowWarning: false, //是否有报警 |
||||||
|
dayData: "", //监测天数 |
||||||
|
currentWeekday: "", |
||||||
|
// 蒸汽锅炉数据 |
||||||
|
steamHeatingData: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
formattedDate() { |
||||||
|
const year = this.currentDate.getFullYear(); |
||||||
|
const month = String(this.currentDate.getMonth() + 1).padStart(2, "0"); |
||||||
|
const day = String(this.currentDate.getDate()).padStart(2, "0"); |
||||||
|
const hours = String(this.currentDate.getHours()).padStart(2, "0"); |
||||||
|
const minutes = String(this.currentDate.getMinutes()).padStart(2, "0"); |
||||||
|
const seconds = String(this.currentDate.getSeconds()).padStart(2, "0"); |
||||||
|
const weekDays = [ |
||||||
|
"星期日", |
||||||
|
"星期一", |
||||||
|
"星期二", |
||||||
|
"星期三", |
||||||
|
"星期四", |
||||||
|
"星期五", |
||||||
|
"星期六", |
||||||
|
]; |
||||||
|
const weekDay = weekDays[this.currentDate.getDay()]; |
||||||
|
return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`; |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
const weekdays = [ |
||||||
|
"星期日", |
||||||
|
"星期一", |
||||||
|
"星期二", |
||||||
|
"星期三", |
||||||
|
"星期四", |
||||||
|
"星期五", |
||||||
|
"星期六", |
||||||
|
]; |
||||||
|
const date = new Date(); |
||||||
|
const dayIndex = date.getDay(); |
||||||
|
this.currentWeekday = weekdays[dayIndex]; |
||||||
|
console.log("今天是星期几", this.currentWeekday); |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getAlarnStatus(); |
||||||
|
this.getDayData(); |
||||||
|
// 获取当蒸汽采暖数据 |
||||||
|
this.getSteamHeatingData(); |
||||||
|
// 设置定时器，每 10 秒执行一次 |
||||||
|
this.timer = setInterval(() => { |
||||||
|
this.getAlarnStatus(); |
||||||
|
this.getDayData(); |
||||||
|
// 获取当蒸汽采暖数据 |
||||||
|
this.getSteamHeatingData(); |
||||||
|
}, 10000); |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
// 组件销毁前清除定时器 |
||||||
|
if (this.timer) { |
||||||
|
clearInterval(this.timer); |
||||||
|
} |
||||||
|
// 组件销毁前清除定时器 |
||||||
|
if (this.nowTimer) { |
||||||
|
clearInterval(this.nowTimer); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 进入系统首页 |
||||||
|
goSys() { |
||||||
|
this.$router.push("/"); |
||||||
|
}, |
||||||
|
// 返回上一页 |
||||||
|
goBack() { |
||||||
|
window.history.go(-2); |
||||||
|
}, |
||||||
|
// 监测天数 |
||||||
|
getDayData() { |
||||||
|
runTime().then((res) => { |
||||||
|
if (res.code == 200) { |
||||||
|
this.dayData = res.data.runTime; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 报警列表 |
||||||
|
getAlarnStatus() { |
||||||
|
let data = { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
status: "0", |
||||||
|
}; |
||||||
|
let timeArr = [getDay(0), getDay(0)]; |
||||||
|
alarmRecordList(this.addDateRange(data, timeArr)).then((res) => { |
||||||
|
if (res.code == 200 && res.rows.length > 0) { |
||||||
|
this.isShowWarning = true; |
||||||
|
} else { |
||||||
|
this.isShowWarning = false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
goWarning() { |
||||||
|
this.$router.push("/alarm/alarmRecord"); |
||||||
|
}, |
||||||
|
// 获取蒸汽锅炉运行监测数据 |
||||||
|
getSteamHeatingData() { |
||||||
|
monitorList({ systemType: 3 }).then((res) => { |
||||||
|
if (res.code === 200) { |
||||||
|
console.log("设备监测列表返回", res); |
||||||
|
|
||||||
|
// 初始化各个设备列表 |
||||||
|
this.hostList = []; |
||||||
|
this.coolingPump = []; |
||||||
|
this.freezingPump = []; |
||||||
|
this.coolingTower = []; |
||||||
|
this.frozenValve = []; |
||||||
|
this.coolingValue = []; |
||||||
|
this.coolingTowerInlet = []; |
||||||
|
this.coolingTowerOutlet = []; |
||||||
|
this.freezingManifold = []; |
||||||
|
this.coolingOutletBuild = []; //裙楼供冷出水阀 |
||||||
|
this.coolingInletBuild = []; //裙楼供冷进水阀 |
||||||
|
this.coolingOutletGuest = []; //客房供冷出水阀 |
||||||
|
this.coolingInletGuest = []; //客房供冷进水阀 |
||||||
|
this.hotOutletBuild = []; //裙楼供暖出水阀 |
||||||
|
this.hotInletBuild = []; //裙楼供暖进水阀 |
||||||
|
this.hotOutletGuest = []; //客房供暖出水阀 |
||||||
|
this.hotInletGuest = []; //客房供暖进水阀 |
||||||
|
|
||||||
|
res.rows.forEach((row) => { |
||||||
|
switch (row.name) { |
||||||
|
case "0": |
||||||
|
this.hostList = this.processDeviceList(row.values); |
||||||
|
console.log("主机列表", this.hostList); |
||||||
|
break; |
||||||
|
case "1": |
||||||
|
this.coolingPump = this.processDeviceList(row.values); |
||||||
|
console.log("冷却泵列表", this.coolingPump); |
||||||
|
break; |
||||||
|
case "2": |
||||||
|
this.freezingPump = this.processDeviceList(row.values); |
||||||
|
console.log("冷冻泵列表", this.freezingPump); |
||||||
|
break; |
||||||
|
case "3": |
||||||
|
this.coolingTower = this.processDeviceList(row.values); |
||||||
|
console.log("冷却塔列表", this.coolingTower); |
||||||
|
break; |
||||||
|
case "4": |
||||||
|
this.frozenValve = this.processDeviceList(row.values); |
||||||
|
console.log("冷冻蝶阀列表", this.frozenValve); |
||||||
|
break; |
||||||
|
case "7": |
||||||
|
this.coolingValue = this.processDeviceList(row.values); |
||||||
|
console.log("冷却蝶阀列表", this.coolingValue); |
||||||
|
break; |
||||||
|
case "8": |
||||||
|
this.coolingTowerInlet = this.processDeviceList(row.values); |
||||||
|
console.log("冷却塔进水阀列表", this.coolingTowerInlet); |
||||||
|
break; |
||||||
|
case "9": |
||||||
|
this.coolingTowerOutlet = this.processDeviceList(row.values); |
||||||
|
console.log("冷却塔出水阀列表", this.coolingTowerOutlet); |
||||||
|
break; |
||||||
|
case "15": |
||||||
|
this.freezingManifold = row.values; |
||||||
|
console.log("冷冻总管", this.freezingManifold); |
||||||
|
break; |
||||||
|
case "18": |
||||||
|
let buildInData = row.values; |
||||||
|
buildInData.forEach((item) => { |
||||||
|
if (item.deviceName.includes("供冷")) { |
||||||
|
this.coolingInletBuild.push(item); |
||||||
|
} |
||||||
|
if (item.deviceName.includes("供暖")) { |
||||||
|
this.hotInletBuild.push(item); |
||||||
|
} |
||||||
|
}); |
||||||
|
console.log("裙楼供冷进水阀", this.coolingInletBuild); |
||||||
|
console.log("裙楼供暖进水阀", this.hotInletBuild); |
||||||
|
break; |
||||||
|
case "19": |
||||||
|
let buildOutData = row.values; |
||||||
|
buildOutData.forEach((item) => { |
||||||
|
if (item.deviceName.includes("供冷")) { |
||||||
|
this.coolingOutletBuild.push(item); |
||||||
|
} |
||||||
|
if (item.deviceName.includes("供暖")) { |
||||||
|
this.hotOutletBuild.push(item); |
||||||
|
} |
||||||
|
}); |
||||||
|
console.log("裙楼供冷出水阀", this.coolingOutletBuild); |
||||||
|
console.log("裙楼供暖出水阀", this.hotOutletBuild); |
||||||
|
break; |
||||||
|
case "20": |
||||||
|
let guestInData = row.values; |
||||||
|
guestInData.forEach((item) => { |
||||||
|
if (item.deviceName.includes("供冷")) { |
||||||
|
this.coolingInletGuest.push(item); |
||||||
|
} |
||||||
|
if (item.deviceName.includes("供暖")) { |
||||||
|
this.hotInletGuest.push(item); |
||||||
|
} |
||||||
|
}); |
||||||
|
console.log("客房供冷进水阀", this.coolingInletGuest); |
||||||
|
console.log("客房供暖进水阀", this.hotInletGuest); |
||||||
|
break; |
||||||
|
case "21": |
||||||
|
let guestOutData = row.values; |
||||||
|
guestOutData.forEach((item) => { |
||||||
|
if (item.deviceName.includes("供冷")) { |
||||||
|
this.coolingOutletGuest.push(item); |
||||||
|
} |
||||||
|
if (item.deviceName.includes("供暖")) { |
||||||
|
this.hotOutletGuest.push(item); |
||||||
|
} |
||||||
|
}); |
||||||
|
console.log("客房供冷出水阀", this.coolingOutletGuest); |
||||||
|
console.log("客房供暖出水阀", this.hotOutletGuest); |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 封装一个通用函数来处理设备列表 |
||||||
|
processDeviceList(values) { |
||||||
|
const deviceList = []; |
||||||
|
// 遍历每个设备属性 |
||||||
|
values.forEach((item) => { |
||||||
|
// 提取设备编号 |
||||||
|
const match = item.deviceName.match(/(\d+)号/); |
||||||
|
if (match) { |
||||||
|
const deviceNumber = parseInt(match[1]); |
||||||
|
// 如果 deviceList 中对应编号的对象还不存在，则创建一个新对象 |
||||||
|
if (!deviceList[deviceNumber - 1]) { |
||||||
|
deviceList[deviceNumber - 1] = { |
||||||
|
deviceName: item.deviceName, |
||||||
|
properties: [], |
||||||
|
}; |
||||||
|
} |
||||||
|
// 将当前属性添加到对应设备的 properties 数组中 |
||||||
|
deviceList[deviceNumber - 1].properties.push(item); |
||||||
|
} |
||||||
|
}); |
||||||
|
// 过滤掉 deviceList 中可能存在的空元素 |
||||||
|
return deviceList.filter((item) => item); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.monitor { |
||||||
|
width: 100%; |
||||||
|
min-height: 100vh; |
||||||
|
background-color: black; |
||||||
|
color: #fff; |
||||||
|
.monitor-top { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: nowrap; |
||||||
|
padding: 0.1rem 0.2rem; |
||||||
|
position: relative; |
||||||
|
.title-left { |
||||||
|
width: 3.41rem; |
||||||
|
height: 0.8rem; |
||||||
|
} |
||||||
|
.title-center { |
||||||
|
width: 9.46rem; |
||||||
|
height: 0.8rem; |
||||||
|
} |
||||||
|
.title-right { |
||||||
|
width: 5.04rem; |
||||||
|
height: 0.78rem; |
||||||
|
} |
||||||
|
.sys-title { |
||||||
|
position: absolute; |
||||||
|
top: 40%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
font-size: 0.28rem; |
||||||
|
color: #ffffff; |
||||||
|
font-weight: bold; |
||||||
|
z-index: 100; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.nowTime { |
||||||
|
position: absolute; |
||||||
|
top: 0.37rem; |
||||||
|
right: 0.6rem; |
||||||
|
font-size: 0.18rem; |
||||||
|
color: #ffffff; |
||||||
|
font-weight: bold; |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
.sys-logo { |
||||||
|
width: 1.8rem; |
||||||
|
height: 0.5rem; |
||||||
|
position: absolute; |
||||||
|
top: 0.26rem; |
||||||
|
left: 0.8rem; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
.monitor-time { |
||||||
|
position: absolute; |
||||||
|
top: 0.44rem; |
||||||
|
left: 4.2rem; |
||||||
|
z-index: 10; |
||||||
|
font-size: 0.18rem; |
||||||
|
color: #ffffff; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.icon_warning { |
||||||
|
position: absolute; |
||||||
|
top: 0.39rem; |
||||||
|
right: 4.4rem; |
||||||
|
z-index: 10; |
||||||
|
width: 0.35rem; |
||||||
|
height: 0.32rem; |
||||||
|
margin: 0 0.25rem 0 0.27rem; |
||||||
|
cursor: pointer; |
||||||
|
/* 添加闪烁动画 */ |
||||||
|
animation: blink 1s infinite; |
||||||
|
} |
||||||
|
@keyframes blink { |
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
50% { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.icon_home { |
||||||
|
position: absolute; |
||||||
|
top: 0.39rem; |
||||||
|
right: 4rem; |
||||||
|
z-index: 10; |
||||||
|
width: 0.35rem; |
||||||
|
height: 0.32rem; |
||||||
|
margin: 0 0.2rem 0 0.27rem; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.back-icon { |
||||||
|
position: absolute; |
||||||
|
top: 0.39rem; |
||||||
|
right: 3.7rem; |
||||||
|
z-index: 10; |
||||||
|
width: 0.35rem; |
||||||
|
height: 0.32rem; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue