You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1432 lines
42 KiB
1432 lines
42 KiB
<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 class="monitor-content"> |
|
<!-- 整体图 --> |
|
<img |
|
class="monitor-img" |
|
src="../../../assets/images/steamHeating.png" |
|
alt="" |
|
/> |
|
<!-- 箭头 --> |
|
<img class="in-arrow" src="../../../assets/images/in-arrow.png" alt="" /> |
|
<img |
|
class="out-arrow" |
|
src="../../../assets/images/out-arrow.png" |
|
alt="" |
|
/> |
|
<!-- 采暖锅炉温度 --> |
|
<div class="performance-div"> |
|
<div |
|
class="performance" |
|
v-for="(item, index) in steamHeatingFire" |
|
:key="index" |
|
> |
|
<div class="title">{{ item.deviceName }}</div> |
|
<div class="perdformance-bg"> |
|
<div class="weather-li"> |
|
<span>出水温度：</span> |
|
<span class="deepColor">{{ |
|
getTemperature(item.properties, "出水温度") |
|
}}</span> |
|
<span>℃</span> |
|
</div> |
|
<div class="weather-li"> |
|
<span>回水温度：</span> |
|
<span class="deepColor">{{ |
|
getTemperature(item.properties, "回水温度") |
|
}}</span> |
|
<span>℃</span> |
|
</div> |
|
<div class="weather-li"> |
|
<span>炉水温度：</span> |
|
<span class="deepColor">{{ |
|
getTemperature(item.properties, "炉水温度") |
|
}}</span> |
|
<span>℃</span> |
|
</div> |
|
<div class="weather-li"> |
|
<span>烟道温度：</span> |
|
<span class="deepColor">{{ |
|
getTemperature(item.properties, "烟道温度") |
|
}}</span> |
|
<span>℃</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 采暖锅炉名称 --> |
|
<div |
|
class="steamHeatingBoiler1" |
|
v-if="steamHeatingFire.length > 0 && steamHeatingFire[0].deviceName" |
|
:title="`${steamHeatingFire[0].deviceName}详情`" |
|
@click="goBoilerDetail(steamHeatingFire[0], false)" |
|
> |
|
{{ steamHeatingFire[0].deviceName }} |
|
</div> |
|
<div |
|
class="steamHeatingBoiler2" |
|
v-if="steamHeatingFire.length > 1 && steamHeatingFire[0].deviceName" |
|
:title="`${steamHeatingFire[1].deviceName}详情`" |
|
@click="goBoilerDetail(steamHeatingFire[1], false)" |
|
> |
|
{{ steamHeatingFire[1].deviceName }} |
|
</div> |
|
<!-- 采暖锅炉点击跳转 --> |
|
<div |
|
class="steamHeatingBoiler-main1" |
|
v-if="steamHeatingFire.length > 0 && steamHeatingFire[0].deviceName" |
|
:title="`${steamHeatingFire[0].deviceName}详情`" |
|
@click="goBoilerDetail(steamHeatingFire[0], false)" |
|
></div> |
|
<div |
|
class="steamHeatingBoiler-main2" |
|
v-if="steamHeatingFire.length > 1 && steamHeatingFire[1].deviceName" |
|
:title="`${steamHeatingFire[1].deviceName}详情`" |
|
@click="goBoilerDetail(steamHeatingFire[1], false)" |
|
></div> |
|
<!-- 采暖锅炉运行状态 --> |
|
<img |
|
class="steamHeatingBoiler-img1" |
|
src="../../../assets/images/fan-img.png" |
|
alt="" |
|
v-if="steamHeatingBoilerRunClass(1)" |
|
:class="{ moveClass2: steamHeatingBoilerRunClass(1) }" |
|
/> |
|
<img |
|
class="steamHeatingBoiler-img2" |
|
src="../../../assets/images/fan-img.png" |
|
alt="" |
|
v-if="steamHeatingBoilerRunClass(2)" |
|
:class="{ moveClass2: steamHeatingBoilerRunClass(2) }" |
|
/> |
|
<!-- 采暖泵名称 --> |
|
<div |
|
class="steamHeatingPump1" |
|
v-if=" |
|
steamHeatingHzAndRun.length > 0 && steamHeatingHzAndRun[0].deviceName |
|
" |
|
:title="`${steamHeatingHzAndRun[0].deviceName}详情`" |
|
@click="goPumpDetail(steamHeatingHzAndRun[0], false)" |
|
> |
|
1# |
|
</div> |
|
<div |
|
class="steamHeatingPump2" |
|
v-if=" |
|
steamHeatingHzAndRun.length > 1 && steamHeatingHzAndRun[0].deviceName |
|
" |
|
:title="`${steamHeatingHzAndRun[1].deviceName}详情`" |
|
@click="goPumpDetail(steamHeatingHzAndRun[1], false)" |
|
> |
|
2# |
|
</div> |
|
<div |
|
class="steamHeatingPump3" |
|
v-if=" |
|
steamHeatingHzAndRun.length > 2 && steamHeatingHzAndRun[0].deviceName |
|
" |
|
:title="`${steamHeatingHzAndRun[2].deviceName}详情`" |
|
@click="goPumpDetail(steamHeatingHzAndRun[2], false)" |
|
> |
|
3# |
|
</div> |
|
<!-- 采暖泵点击跳转 --> |
|
<div |
|
class="steamHeatingPump-main1" |
|
v-if=" |
|
steamHeatingHzAndRun.length > 0 && steamHeatingHzAndRun[0].deviceName |
|
" |
|
:title="`${steamHeatingHzAndRun[0].deviceName}详情`" |
|
@click="goPumpDetail(steamHeatingHzAndRun[0], false)" |
|
></div> |
|
<div |
|
class="steamHeatingPump-main2" |
|
v-if=" |
|
steamHeatingHzAndRun.length > 1 && steamHeatingHzAndRun[1].deviceName |
|
" |
|
:title="`${steamHeatingHzAndRun[1].deviceName}详情`" |
|
@click="goPumpDetail(steamHeatingHzAndRun[1], false)" |
|
></div> |
|
<div |
|
class="steamHeatingPump-main3" |
|
v-if=" |
|
steamHeatingHzAndRun.length > 2 && steamHeatingHzAndRun[2].deviceName |
|
" |
|
:title="`${steamHeatingHzAndRun[2].deviceName}详情`" |
|
@click="goPumpDetail(steamHeatingHzAndRun[2], false)" |
|
></div> |
|
<!-- 采暖泵运行状态 --> |
|
<img |
|
class="steamHeatingPump-img1" |
|
src="../../../assets/images/fan-img.png" |
|
alt="" |
|
v-if="steamHeatingPumpRunClass(1)" |
|
:class="{ moveClass2: steamHeatingPumpRunClass(1) }" |
|
/> |
|
<img |
|
class="steamHeatingPump-img2" |
|
src="../../../assets/images/fan-img.png" |
|
alt="" |
|
v-if="steamHeatingPumpRunClass(2)" |
|
:class="{ moveClass2: steamHeatingPumpRunClass(2) }" |
|
/> |
|
<img |
|
class="steamHeatingPump-img3" |
|
src="../../../assets/images/fan-img.png" |
|
alt="" |
|
v-if="steamHeatingPumpRunClass(3)" |
|
:class="{ moveClass2: steamHeatingPumpRunClass(3) }" |
|
/> |
|
<!-- 采暖泵频率反馈 --> |
|
<div |
|
class="steamHeatingPump-hz1" |
|
v-if="steamHeatingPumpHz(1) && steamHeatingPumpRunClass(1)" |
|
> |
|
{{ steamHeatingPumpHz1 }}Hz |
|
</div> |
|
<div |
|
class="steamHeatingPump-hz2" |
|
v-if="steamHeatingPumpHz(2) && steamHeatingPumpRunClass(2)" |
|
> |
|
{{ steamHeatingPumpHz2 }}Hz |
|
</div> |
|
<div |
|
class="steamHeatingPump-hz3" |
|
v-if="steamHeatingPumpHz(3) && steamHeatingPumpRunClass(3)" |
|
> |
|
{{ steamHeatingPumpHz3 }}Hz |
|
</div> |
|
<!-- 热量计供回水温度 --> |
|
<div class="steamHeatingInTem">{{ steamHeatingInTem }}℃</div> |
|
<div class="steamHeatingOutTem">{{ steamHeatingOutTem }}℃</div> |
|
<!--供暖区进水阀 --> |
|
<div class="hotOut-vavle"> |
|
<div class="water-flow-li"> |
|
<span |
|
@click="goControlList(hotInletBuild, null, '裙楼供暖进水阀')" |
|
style="cursor: pointer" |
|
>裙楼供暖进水阀:</span |
|
> |
|
<span |
|
class="break" |
|
:class="{ connect: hostAndCoolingControlClass(this.hotInletBuild) }" |
|
></span> |
|
<div class="outInre"> |
|
{{ getValueByType(this.hotInletBuild, "13") }}bar |
|
</div> |
|
</div> |
|
<div class="water-flow-li"> |
|
<span |
|
@click="goControlList(hotInletGuest, null, '客房供暖进水阀')" |
|
style="cursor: pointer" |
|
>客房供暖进水阀:</span |
|
> |
|
<span |
|
class="break" |
|
:class="{ connect: hostAndCoolingControlClass(this.hotInletGuest) }" |
|
></span> |
|
<div class="outInre"> |
|
{{ getValueByType(this.hotInletGuest, "13") }}bar |
|
</div> |
|
</div> |
|
</div> |
|
<line-children |
|
:angle1="-75" |
|
:angle2="0" |
|
:lineWidth1="280" |
|
:lineWidth2="240" |
|
class="hotOut-line" |
|
></line-children> |
|
<!--供暖区出水阀 --> |
|
<div class="hotIn-vavle"> |
|
<div class="water-flow-li"> |
|
<span |
|
@click="goControlList(hotOutletBuild, null, '裙楼供暖出水阀')" |
|
style="cursor: pointer" |
|
>裙楼供暖出水阀:</span |
|
> |
|
<span |
|
class="break" |
|
:class="{ |
|
connect: hostAndCoolingControlClass(this.hotOutletBuild), |
|
}" |
|
></span> |
|
<div class="outInre"> |
|
{{ getValueByType(this.hotOutletBuild, "13") }}bar |
|
</div> |
|
</div> |
|
<div class="water-flow-li"> |
|
<span |
|
@click="goControlList(hotOutletGuest, null, '客房供暖出水阀')" |
|
style="cursor: pointer" |
|
>客房供暖出水阀:</span |
|
> |
|
<span |
|
class="break" |
|
:class="{ |
|
connect: hostAndCoolingControlClass(this.hotOutletGuest), |
|
}" |
|
></span> |
|
<div class="outInre"> |
|
{{ getValueByType(this.hotOutletGuest, "13") }}bar |
|
</div> |
|
</div> |
|
</div> |
|
<line-children |
|
:angle1="-75" |
|
:angle2="0" |
|
:lineWidth1="330" |
|
:lineWidth2="240" |
|
class="hotIn-line" |
|
></line-children> |
|
<!-- 采暖监测设备报警信息 --> |
|
<div class="alarm"> |
|
<div class="special-div one"> |
|
<div class="special-top"> |
|
<div class="special-title"> |
|
<div class="title-left"> |
|
<div>采暖报警信息</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="pumpli-monitor"> |
|
<div class="pumpli-li"> |
|
<div class="pumpli-li-text">报警位置</div> |
|
<div class="pumpli-li-text">报警时间</div> |
|
</div> |
|
<template v-if="alarmList && alarmList.length > 0"> |
|
<div |
|
class="pumpli-li" |
|
v-for="(item, index) in alarmList" |
|
:key="index + 3" |
|
> |
|
<div class="pumpli-li-text">{{ item.otherName }}</div> |
|
<div class="pumpli-li-text">{{ item.curTime }}</div> |
|
</div> |
|
</template> |
|
<template v-else><div class="none-data">暂无数据</div></template> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { runTime } from "@/api/centerairC/sysMonitor"; |
|
import LineChildren from "./components/lineChildren.vue"; |
|
import { alarmRecordList } from "@/api/alarm/alarmRecord"; |
|
import { monitorList } from "@/api/centerairC/sysMonitor"; |
|
import { heatPumpAlarmList } from "@/api/boiler/heatingPump"; |
|
import { getDay } from "@/utils/datetime"; |
|
export default { |
|
name: "boilerMonitorDetails", |
|
components: { LineChildren }, |
|
data() { |
|
return { |
|
loading: false, |
|
currentDate: new Date(), |
|
nowTimer: null, |
|
timer: null, // 用于存储定时器 ID |
|
isShowWarning: false, //是否有报警 |
|
dayData: "", //监测天数 |
|
currentWeekday: "", |
|
// 频率反馈 |
|
steamHeatingPumpHz1: "", |
|
steamHeatingPumpHz2: "", |
|
steamHeatingPumpHz3: "", |
|
hotOutletBuild: [], //裙楼供暖出水阀 |
|
hotInletBuild: [], //裙楼供暖进水阀 |
|
hotOutletGuest: [], //客房供暖出水阀 |
|
hotInletGuest: [], //客房供暖进水阀 |
|
steamHeatingHzAndRun: [], //运行和频率 |
|
steamHeatingFire: [], //热水锅炉火力 |
|
steamHeatingTem: [], //热量计供回水温度数组 |
|
steamHeatingInTem: "", //回水温度 |
|
steamHeatingOutTem: "", //供水温度 |
|
// 报警列表 |
|
alarmList: [], |
|
}; |
|
}, |
|
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(); |
|
this.getMonitorList(); |
|
// 设置定时器，每 10 秒执行一次 |
|
this.timer = setInterval(() => { |
|
this.getAlarnStatus(); |
|
this.getDayData(); |
|
// 获取当蒸汽采暖数据 |
|
this.getSteamHeatingData(); |
|
this.getMonitorList(); |
|
}, 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.steamHeatingHzAndRun = []; //频率和运行状态 |
|
this.steamHeatingFire = []; //热水锅炉火力 |
|
this.steamHeatingTem = []; //热量计供回水温度 |
|
res.rows.forEach((row) => { |
|
switch (row.name) { |
|
case "11": |
|
this.steamHeatingHzAndRun = this.processDeviceList(row.values); |
|
console.log( |
|
"裙蒸汽锅炉频率和运行状态", |
|
this.steamHeatingHzAndRun |
|
); |
|
break; |
|
case "25": |
|
this.steamHeatingFire = this.processDeviceList(row.values); |
|
console.log("裙蒸汽锅炉火力", this.steamHeatingFire); |
|
|
|
break; |
|
case "6": |
|
this.steamHeatingTem = row.values; |
|
console.log("裙蒸汽锅炉热量计供回水温度", this.steamHeatingTem); |
|
this.steamHeatingTem.forEach((element) => { |
|
if ( |
|
element.collectName.includes("回水温度") && |
|
element.paramType == "12" |
|
) { |
|
this.steamHeatingInTem = element.collectValue; |
|
} |
|
if ( |
|
element.collectName.includes("供水温度") && |
|
element.paramType == "12" |
|
) { |
|
this.steamHeatingOutTem = element.collectValue; |
|
} |
|
}); |
|
break; |
|
default: |
|
break; |
|
} |
|
}); |
|
} |
|
}); |
|
}, |
|
getMonitorList() { |
|
monitorList({ systemType: 0 }).then((res) => { |
|
if (res.code === 200) { |
|
console.log("设备监测列表返回", res); |
|
|
|
// 初始化各个设备列表 |
|
this.hotOutletBuild = []; //裙楼供暖出水阀 |
|
this.hotInletBuild = []; //裙楼供暖进水阀 |
|
this.hotOutletGuest = []; //客房供暖出水阀 |
|
this.hotInletGuest = []; //客房供暖进水阀 |
|
|
|
res.rows.forEach((row) => { |
|
switch (row.name) { |
|
case "18": |
|
let buildInData = row.values; |
|
buildInData.forEach((item) => { |
|
if (item.deviceName.includes("供暖")) { |
|
this.hotInletBuild.push(item); |
|
} |
|
}); |
|
console.log("裙楼供暖进水阀", this.hotInletBuild); |
|
break; |
|
case "19": |
|
let buildOutData = row.values; |
|
buildOutData.forEach((item) => { |
|
if (item.deviceName.includes("供暖")) { |
|
this.hotOutletBuild.push(item); |
|
} |
|
}); |
|
console.log("裙楼供暖出水阀", this.hotOutletBuild); |
|
break; |
|
case "20": |
|
let guestInData = row.values; |
|
guestInData.forEach((item) => { |
|
if (item.deviceName.includes("供暖")) { |
|
this.hotInletGuest.push(item); |
|
} |
|
}); |
|
console.log("客房供暖进水阀", this.hotInletGuest); |
|
break; |
|
case "21": |
|
let guestOutData = row.values; |
|
guestOutData.forEach((item) => { |
|
if (item.deviceName.includes("供暖")) { |
|
this.hotOutletGuest.push(item); |
|
} |
|
}); |
|
console.log("客房供暖出水阀", this.hotOutletGuest); |
|
break; |
|
default: |
|
break; |
|
} |
|
}); |
|
this.getHotPumpAlarmList(); |
|
} |
|
}); |
|
}, |
|
// 封装一个通用函数来处理设备列表 |
|
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); |
|
}, |
|
// 裙楼-客房进出水阀启停状态 |
|
hostAndCoolingControlClass(item) { |
|
// 检查数组中是否存在 paramType 为 "7" 的对象 |
|
const hasParamType7 = item.some((obj) => obj.paramType === "7"); |
|
|
|
if (!hasParamType7) { |
|
// 如果没有 paramType 为 "7" 的对象 |
|
for (let i = 0; i < item.length; i++) { |
|
if (item[i].paramType === "2") { |
|
if (Number(item[i].collectValue) !== 0) { |
|
return true; |
|
} |
|
} |
|
} |
|
} else { |
|
// 如果有 paramType 为 "7" 的对象 |
|
for (let i = 0; i < item.length; i++) { |
|
if (item[i].paramType === "7") { |
|
const { collectName, collectValue } = item[i]; |
|
if ( |
|
(collectName.includes("开到位") && Number(collectValue) === 1) || |
|
(collectName.includes("关到位") && Number(collectValue) === 0) |
|
) { |
|
return true; |
|
} |
|
} |
|
} |
|
} |
|
return false; |
|
}, |
|
// 裙楼、客房的进出水压力 |
|
getValueByType(arr, targetType) { |
|
const targetItem = arr.find((item) => item.paramType === targetType); |
|
return targetItem ? targetItem.collectValue : 0; |
|
}, |
|
// 采暖泵运行状态 |
|
steamHeatingPumpRunClass(index) { |
|
// 从 this.steamHeatingHzAndRun 中查找 deviceName 包含与 index 相同数字的对象 |
|
let targetDevice = null; |
|
for (let i = 0; i < this.steamHeatingHzAndRun.length; i++) { |
|
const device = this.steamHeatingHzAndRun[i]; |
|
const indexStr = index.toString(); |
|
const deviceName = device.deviceName.toString(); |
|
for (let j = 0; j < indexStr.length; j++) { |
|
if (deviceName.includes(indexStr[j])) { |
|
targetDevice = device; |
|
break; |
|
} |
|
} |
|
if (targetDevice) { |
|
break; |
|
} |
|
} |
|
// 如果未找到匹配的设备，返回 false |
|
if (!targetDevice) { |
|
return false; |
|
} |
|
// 获取匹配设备的 properties 数组 |
|
const properties = targetDevice.properties; |
|
|
|
// 检查 properties 数组是否存在 |
|
if (!properties || properties.length === 0) { |
|
return false; |
|
} |
|
|
|
// 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行 |
|
for (let i = 0; i < properties.length; i++) { |
|
const item = properties[i]; |
|
if (item.paramType === "1" && Number(item.collectValue) == !0) { |
|
return true; |
|
} |
|
} |
|
// 否则代表运行状态中的不运行 |
|
return false; |
|
}, |
|
// 采暖泵频率 |
|
steamHeatingPumpHz(index) { |
|
// 从 this.steamHeatingHzAndRun 中查找 deviceName 包含与 index 相同数字的对象 |
|
let targetDevice = null; |
|
for (let i = 0; i < this.steamHeatingHzAndRun.length; i++) { |
|
const device = this.steamHeatingHzAndRun[i]; |
|
const indexStr = index.toString(); |
|
const deviceName = device.deviceName.toString(); |
|
for (let j = 0; j < indexStr.length; j++) { |
|
if (deviceName.includes(indexStr[j])) { |
|
targetDevice = device; |
|
break; |
|
} |
|
} |
|
if (targetDevice) { |
|
break; |
|
} |
|
} |
|
// 如果未找到匹配的设备，返回 false |
|
if (!targetDevice) { |
|
return false; |
|
} |
|
// 获取匹配设备的 properties 数组 |
|
const properties = targetDevice.properties; |
|
|
|
// 检查 properties 数组是否存在 |
|
if (!properties || properties.length === 0) { |
|
return false; |
|
} |
|
// 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈 |
|
for (let i = 0; i < properties.length; i++) { |
|
const item = properties[i]; |
|
if (item.paramType === "4") { |
|
// 动态构造属性名 |
|
const propertyName = `steamHeatingPumpHz${index}`; |
|
// 使用方括号语法动态设置属性值 |
|
this[propertyName] = item.collectValue; |
|
// this.steamHeatingPumpHz[index] = item.collectValue; |
|
return true; |
|
} |
|
} |
|
// 否则代表运行状态中的不运行 |
|
return false; |
|
}, |
|
// 采暖锅炉运行状态 |
|
steamHeatingBoilerRunClass(index) { |
|
// 从 this.steamHeatingFire 中查找 deviceName 包含与 index 相同数字的对象 |
|
let targetDevice = null; |
|
for (let i = 0; i < this.steamHeatingFire.length; i++) { |
|
const device = this.steamHeatingFire[i]; |
|
const indexStr = index.toString(); |
|
const deviceName = device.deviceName.toString(); |
|
for (let j = 0; j < indexStr.length; j++) { |
|
if (deviceName.includes(indexStr[j])) { |
|
targetDevice = device; |
|
break; |
|
} |
|
} |
|
if (targetDevice) { |
|
break; |
|
} |
|
} |
|
// 如果未找到匹配的设备，返回 false |
|
if (!targetDevice) { |
|
return false; |
|
} |
|
// 获取匹配设备的 properties 数组 |
|
const properties = targetDevice.properties; |
|
|
|
// 检查 properties 数组是否存在 |
|
if (!properties || properties.length === 0) { |
|
return false; |
|
} |
|
|
|
// console.log("锅炉列表111", properties); |
|
// 遍历 properties 数组，如果当前对象paramType === 45并且item.collectValue !== "0.00"则便是运行状态中的运行 |
|
for (let i = 0; i < properties.length; i++) { |
|
const item = properties[i]; |
|
if ( |
|
item.paramType === "45" && |
|
item.collectName.includes("火力") && |
|
Number(item.collectValue) !== 0 |
|
) { |
|
return true; |
|
} |
|
} |
|
// 否则代表运行状态中的不运行 |
|
return false; |
|
}, |
|
// 采暖锅炉温度 |
|
getTemperature(values, targetName) { |
|
// console.log("values和targetName", values, targetName); |
|
const targetItem = values.find((item) => |
|
item.collectName.includes(targetName) |
|
); |
|
// console.log("得到的targetItem", targetItem.collectValue); |
|
return targetItem ? targetItem.collectValue : ""; |
|
}, |
|
// 采暖锅炉跳转 |
|
goBoilerDetail(item, val) { |
|
// console.log("item", item); |
|
// let hostId = item.properties[0].deviceLedgerId; |
|
this.$router.push({ |
|
path: "/hotWaterBoilerDetails", |
|
// query: { |
|
// hostId: hostId, |
|
// hostName: item.deviceName, |
|
// isMagnetic: val, |
|
// }, |
|
}); |
|
}, |
|
// 采暖泵跳转 |
|
goPumpDetail() { |
|
this.$router.push({ |
|
path: "/heatingPumpDetails", |
|
}); |
|
}, |
|
// 采暖泵报警数据 |
|
getHotPumpAlarmList() { |
|
let queryParams = { |
|
systemType: "3", |
|
type: "0", |
|
}; |
|
heatPumpAlarmList(queryParams).then((res) => { |
|
if (res.code == 200 && res.rows.length > 0) { |
|
console.log("采暖泵报警数据", res.rows); |
|
this.alarmList = res.rows; |
|
// 上面只是采暖泵报警信息，再处理采暖锅炉报警信息，添加在this.alarmList 最后一行 |
|
this.getBoilerAlarmObj(this.alarmList); |
|
} else { |
|
this.alarmList = []; |
|
this.getBoilerAlarmObj(this.alarmList); |
|
} |
|
}); |
|
}, |
|
// 采暖锅炉报警数据 |
|
getBoilerAlarmObj(alarmList) { |
|
this.steamHeatingFire.forEach((item) => { |
|
item.properties.forEach((prop) => { |
|
if ( |
|
prop.paramType === "5" && |
|
prop.collectName.includes("故障报警") && |
|
Number(prop.collectValue) !== 0 |
|
) { |
|
const newAlarmItem = { |
|
otherName: prop.collectName, |
|
curTime: prop.collectTime, |
|
}; |
|
alarmList.push(newAlarmItem); |
|
} |
|
}); |
|
}); |
|
this.alarmList = alarmList; |
|
}, |
|
}, |
|
}; |
|
</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; |
|
} |
|
} |
|
.monitor-content { |
|
width: 100%; |
|
min-height: calc(10.74rem - 1rem); |
|
position: relative; |
|
.monitor-img { |
|
position: absolute; |
|
top: 1rem; |
|
left: calc((100% - 12.4rem) / 2); |
|
// left:1rem; |
|
width: 12.4rem; |
|
height: 7.25rem; |
|
z-index: 1; |
|
} |
|
.in-arrow { |
|
position: absolute; |
|
top: 3.46rem; |
|
right: 6.95rem; |
|
transform: rotate(180deg); |
|
width: 0.3rem; |
|
height: 0.45rem; |
|
z-index: 10; |
|
} |
|
.out-arrow { |
|
position: absolute; |
|
top: 3.35rem; |
|
right: 7.25rem; |
|
width: 0.3rem; |
|
height: 0.45rem; |
|
z-index: 10; |
|
} |
|
.performance-div { |
|
position: absolute; |
|
top: 1.1rem !important; |
|
left: 0.5rem !important; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
justify-content: flex-start; |
|
font-size: 0.16rem; |
|
} |
|
.performance { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
justify-content: flex-start; |
|
font-size: 0.16rem; |
|
margin-top: 0.55rem; |
|
.perdformance-bg { |
|
width: 2.85rem; |
|
z-index: 10; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
justify-content: flex-start; |
|
font-size: 0.2rem; |
|
color: #ffffff; |
|
background-image: url(../../../assets/images/border4.png); |
|
background-size: 100% 100%; |
|
background-repeat: no-repeat; |
|
padding: 0.15rem 0.1rem 0.25rem 0rem; |
|
} |
|
.title { |
|
z-index: 10; |
|
width: 100%; |
|
background-image: url(../../../assets/images/text_img_title.png); |
|
background-repeat: no-repeat; |
|
background-repeat: no-repeat; |
|
background-size: 2rem 0.45rem; |
|
background-position: bottom left; |
|
font-family: SourceHanSansCN-Medium; |
|
font-size: 0.2rem; |
|
font-style: italic; |
|
font-weight: bold; |
|
line-height: 0.6rem; |
|
color: #ffffff; |
|
padding-left: 0.5rem; |
|
margin-bottom: 0.01rem; |
|
margin-left: 0.4rem; |
|
} |
|
.weather { |
|
min-width: 2.85rem; |
|
min-height: 1.6rem; |
|
z-index: 10; |
|
position: absolute; |
|
top: 0.8rem; |
|
left: 0rem; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
justify-content: flex-start; |
|
font-size: 0.2rem; |
|
// color: rgb(18, 155, 209); |
|
// color: rgb(147, 204, 236); |
|
color: #ffffff; |
|
background-image: url(../../../assets/images/border1.png); |
|
background-size: 100% 100%; |
|
background-repeat: no-repeat; |
|
padding: 0.15rem 0.1rem 0.25rem 0rem; |
|
} |
|
.weather-li { |
|
width: 100%; |
|
padding: 0.05rem 0 0.05rem 0.3rem; |
|
/* 初始设置上下边框宽度为 1px，颜色和样式可以先设为透明，后续由 border-image 覆盖 */ |
|
border-top: 1px solid transparent; |
|
border-bottom: 1px dashed #1a3f8f; |
|
position: relative; |
|
.deepColor { |
|
display: inline-block; |
|
margin: 0 0.1rem 0 0.05rem; |
|
// color: #20ebfa; |
|
// color: #18f13c; |
|
// color: #6cf02f; |
|
color: #6cf02f; |
|
font-weight: bold; |
|
font-family: DIN; |
|
font-size: 0.25rem; |
|
} |
|
} |
|
} |
|
.steamHeatingBoiler1 { |
|
border-bottom: 1px solid rgba(0, 255, 255, 1); |
|
z-index: 10; |
|
font-size: 0.22rem; |
|
font-weight: bold; |
|
color: aqua; |
|
position: absolute; |
|
cursor: pointer; |
|
top: 5rem; |
|
left: 7.5rem; |
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(40deg); /* 分别在 X、Y、Z 轴上旋转 */ |
|
transform-origin: bottom center; /* 设置旋转的基点为底部中心 */ |
|
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */ |
|
} |
|
.steamHeatingBoiler2 { |
|
border-bottom: 1px solid rgba(0, 255, 255, 1); |
|
z-index: 10; |
|
font-size: 0.22rem; |
|
font-weight: bold; |
|
color: aqua; |
|
position: absolute; |
|
cursor: pointer; |
|
top: 5.8rem; |
|
left: 9rem; |
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(38deg); /* 分别在 X、Y、Z 轴上旋转 */ |
|
transform-origin: bottom center; /* 设置旋转的基点为底部中心 */ |
|
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */ |
|
} |
|
.steamHeatingBoiler-main1 { |
|
z-index: 100; |
|
position: absolute; |
|
top: 4.6rem; |
|
left: 8.6rem; |
|
width: 0.7rem; |
|
height: 0.7rem; |
|
// background-color: #007bff; |
|
cursor: pointer; |
|
opacity: 0.4; |
|
transform-style: preserve-3d; |
|
} |
|
.steamHeatingBoiler-main2 { |
|
z-index: 100; |
|
position: absolute; |
|
top: 5.25rem; |
|
left: 10.2rem; |
|
width: 0.7rem; |
|
height: 0.7rem; |
|
// background-color: #007bff; |
|
cursor: pointer; |
|
opacity: 0.4; |
|
transform-style: preserve-3d; |
|
} |
|
.steamHeatingBoiler-img1 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.42rem; |
|
left: 8.95rem; |
|
width: 0.35rem; |
|
height: 0.35rem; |
|
transform-style: preserve-3d; |
|
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); |
|
} |
|
.steamHeatingBoiler-img2 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 5.12rem; |
|
left: 10.55rem; |
|
width: 0.35rem; |
|
height: 0.35rem; |
|
transform-style: preserve-3d; |
|
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); |
|
} |
|
.steamHeatingPump1 { |
|
cursor: pointer; |
|
z-index: 10; |
|
font-size: 0.15rem; |
|
font-weight: bold; |
|
color: #46f1e3; |
|
position: absolute; |
|
top: 4.7rem; |
|
left: 9.85rem; |
|
} |
|
.steamHeatingPump2 { |
|
cursor: pointer; |
|
z-index: 10; |
|
font-size: 0.15rem; |
|
font-weight: bold; |
|
color: #46f1e3; |
|
position: absolute; |
|
top: 4.9rem; |
|
left: 10.5rem; |
|
} |
|
.steamHeatingPump3 { |
|
cursor: pointer; |
|
z-index: 10; |
|
font-size: 0.15rem; |
|
font-weight: bold; |
|
color: #46f1e3; |
|
position: absolute; |
|
top: 5.2rem; |
|
left: 11.1rem; |
|
} |
|
.steamHeatingPump-main1 { |
|
z-index: 100; |
|
position: absolute; |
|
top: 4.35rem; |
|
left: 9.77rem; |
|
width: 0.3rem; |
|
height: 0.55rem; |
|
// background-color: #007bff; |
|
cursor: pointer; |
|
opacity: 0.4; |
|
transform-style: preserve-3d; |
|
} |
|
.steamHeatingPump-main2 { |
|
z-index: 100; |
|
position: absolute; |
|
top: 4.6rem; |
|
left: 10.4rem; |
|
width: 0.3rem; |
|
height: 0.55rem; |
|
// background-color: #007bff; |
|
cursor: pointer; |
|
opacity: 0.4; |
|
transform-style: preserve-3d; |
|
} |
|
.steamHeatingPump-main3 { |
|
z-index: 100; |
|
position: absolute; |
|
top: 4.85rem; |
|
left: 11rem; |
|
width: 0.3rem; |
|
height: 0.55rem; |
|
// background-color: #007bff; |
|
cursor: pointer; |
|
opacity: 0.4; |
|
transform-style: preserve-3d; |
|
} |
|
.steamHeatingPump-img1 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.23rem; |
|
left: 9.96rem; |
|
width: 0.35rem; |
|
height: 0.35rem; |
|
transform-style: preserve-3d; |
|
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); |
|
} |
|
.steamHeatingPump-img2 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.46rem; |
|
left: 10.59rem; |
|
width: 0.35rem; |
|
height: 0.35rem; |
|
transform-style: preserve-3d; |
|
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); |
|
} |
|
.steamHeatingPump-img3 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.7rem; |
|
left: 11.2rem; |
|
width: 0.35rem; |
|
height: 0.35rem; |
|
transform-style: preserve-3d; |
|
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); |
|
} |
|
.steamHeatingPump-hz1 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.15rem; |
|
left: 9.7rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
.steamHeatingPump-hz2 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.4rem; |
|
left: 10.35rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
.steamHeatingPump-hz3 { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.64rem; |
|
left: 11rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
.steamHeatingInTem { |
|
z-index: 10; |
|
position: absolute; |
|
top: 5.3rem; |
|
right: 6.5rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
.steamHeatingOutTem { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.9rem; |
|
right: 7.1rem; |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
} |
|
.hotIn-vavle { |
|
z-index: 10; |
|
position: absolute; |
|
top: 1rem; |
|
right: 4.14rem; |
|
font-size: 0.16rem; |
|
} |
|
.hotIn-line { |
|
z-index: 10; |
|
position: absolute; |
|
top: 3.82rem; |
|
right: 8.3rem; |
|
font-size: 0.16rem; |
|
} |
|
.hotOut-vavle { |
|
z-index: 10; |
|
position: absolute; |
|
top: 2rem; |
|
right: 3rem; |
|
font-size: 0.16rem; |
|
} |
|
.hotOut-line { |
|
z-index: 10; |
|
position: absolute; |
|
top: 4.35rem; |
|
right: 7rem; |
|
font-size: 0.16rem; |
|
} |
|
.outInre { |
|
font-size: 0.16rem; |
|
font-weight: bold; |
|
color: #ffffff; |
|
margin-left: 0.1rem; |
|
} |
|
.water-flow-li { |
|
margin-bottom: 0.04rem; |
|
color: #46f1e3; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
span { |
|
background-color: rgba(0, 255, 255, 0.2); |
|
border-radius: 0.1rem; |
|
padding: 0.01rem 0.03rem; |
|
} |
|
.break { |
|
margin-left: 0.07rem; |
|
display: inline-block; |
|
width: 0.18rem; |
|
height: 0.18rem; |
|
border-radius: 50%; |
|
border: 1px solid #46f1e3; |
|
background-color: transparent !important; |
|
} |
|
.connect { |
|
animation: blink 1s infinite; |
|
background-color: #38fc52 !important; |
|
} |
|
} |
|
.moveClass { |
|
animation: host 2s linear infinite; |
|
} |
|
.moveClass2 { |
|
animation: fan 2s linear infinite; |
|
} |
|
/* 定义 fan 动画关键帧 */ |
|
@keyframes fan { |
|
0% { |
|
/* 修改初始旋转角度 */ |
|
transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); |
|
} |
|
100% { |
|
/* 修改结束旋转角度 */ |
|
transform: translateX(-50%) rotateX(60deg) rotateZ(360deg); |
|
} |
|
} |
|
.startClass { |
|
/* 应用动画 */ |
|
animation: blink 1s infinite; |
|
background-color: #38fc52 !important; |
|
} |
|
.alarm { |
|
position: absolute; |
|
top: 6.3rem; |
|
right: 0.5rem; |
|
width: 3.7rem; |
|
.pumpli-monitor { |
|
margin-top: 0.2rem; |
|
display: flex; |
|
flex-direction: column; |
|
width: 100%; |
|
height: 2rem; |
|
overflow-y: auto; |
|
.pumpli-li { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 0.1rem 0; |
|
background-color: rgba(0, 71, 125, 0.2); |
|
border-bottom: 1px solid #00264f !important; |
|
.pumpli-li-text { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
width: 50%; |
|
font-size: 0.14rem !important; |
|
} |
|
} |
|
.none-data { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 0.1rem 0; |
|
background-color: rgba(0, 71, 125, 0.2); |
|
border-bottom: 1px solid #00264f !important; |
|
width: 100%; |
|
font-size: 0.14rem !important; |
|
} |
|
.pumpli-li:nth-child(1) { |
|
font-size: 0.13rem !important; |
|
height: 0.4rem !important; |
|
background-color: #00477d !important; |
|
color: #b5dfff !important; |
|
position: sticky; |
|
top: 0; |
|
z-index: 1; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style> |
|
<style scoped> |
|
.special-div .special-title { |
|
padding-left: 0.36rem !important; |
|
font-size: 0.2rem !important; |
|
line-height: 0.23rem !important; |
|
background-size: 1.4rem 0.35rem !important; |
|
background-position: 0px -0.03rem !important; |
|
} |
|
.special-div .special-top { |
|
padding: 0.04rem 0.26rem 0.04rem 0px; |
|
min-height: 0.37rem; |
|
} |
|
</style>
|
|
|