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