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.
714 lines
20 KiB
714 lines
20 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="" |
|
/> |
|
<img |
|
class="title-right" |
|
src="../../../assets/images/title-right.png" |
|
alt="" |
|
/> |
|
<div class="sys-title">空调风柜监控系统</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="app-container"> |
|
<div class="left-tree"> |
|
<!-- 为 el-tree 设置一个固定的高度和滚动条 --> |
|
<div class="tree-div"> |
|
<el-tree |
|
ref="tree" |
|
:data="treeData" |
|
node-key="id" |
|
:default-expand-all="false" |
|
:default-expanded-keys="expandedKeys" |
|
:auto-expand-parent="true" |
|
icon-class="none" |
|
@node-expand="handleNodeExpand" |
|
@node-collapse="handleNodeCollapse" |
|
:highlight-current="true" |
|
@node-click="handleNodeClick" |
|
> |
|
<template #default="{ node }"> |
|
<span class="custom-tree-node"> |
|
<!-- 根据节点状态动态设置图标类名 --> |
|
<div class="tree-left"> |
|
<i :class="getIconClass(node)" class="custom-tree-icon"></i> |
|
<span class="tree-label">{{ node.label }}</span> |
|
</div> |
|
</span> |
|
</template> |
|
</el-tree> |
|
</div> |
|
</div> |
|
<damper-monitor |
|
:currentId="currentId" |
|
:currentName="currentName" |
|
ref="damperMonitorRef" |
|
v-if="isShowdamper" |
|
></damper-monitor> |
|
<normal-monitor |
|
:currentId="currentId" |
|
:currentName="currentName" |
|
ref="normalMonitorRef" |
|
v-else |
|
></normal-monitor> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { runTime } from "@/api/centerairC/sysMonitor"; |
|
import { alarmRecordList } from "@/api/alarm/alarmRecord"; |
|
import { getDay } from "@/utils/datetime"; |
|
import { spaceTree } from "@/api/region"; |
|
import damperMonitor from "./components/damperMonitor.vue"; |
|
import normalMonitor from "./components/normalMonitor.vue"; |
|
export default { |
|
components: { damperMonitor, normalMonitor }, |
|
name: "asSysMonitorDetails", |
|
data() { |
|
return { |
|
loading: false, |
|
currentDate: new Date(), |
|
nowTimer: null, |
|
isShowWarning: false, //是否有报警 |
|
dayData: "", //监测天数 |
|
treeData: [], |
|
defaultProps: { |
|
children: "children", |
|
label: "label", |
|
}, |
|
deviceList: [], |
|
expandedKeys: [], |
|
currentId: "", //当前选中高亮的id |
|
currentName: "", //当前选中的名称 |
|
currentLevel: "", //当前节点的层级 |
|
currentParentId: "", //当前节点的上级的id |
|
|
|
backwaterObj: {}, //回水温度 |
|
airValveObj: {}, //风阀调节 |
|
airValveBackObj: {}, //风阀反馈 |
|
waterValveObj: {}, //水阀调节 |
|
startControlObj: {}, //启停控制 |
|
runStatusObj: {}, //运行状态 |
|
airSupplyObj: {}, //送风温度 |
|
pressureObj: {}, //压差 |
|
automaticObj: {}, //手自动状态 |
|
backAirObj: {}, //回风温度 |
|
faultAlarmObj: {}, //故障报警 |
|
waterSupplyObj: {}, //供水温度 |
|
|
|
tableData: [], //系统状态表格数据 |
|
temValue: "℃", //回风温度 |
|
valvePercent: "%", //阀比例 |
|
runStatus: false, //运行状态 |
|
autoStatus: false, //手自动状态 |
|
startStatus: false, //启停控制 |
|
frequency: "v", |
|
isOpenTimeSwitch: false, |
|
delayList: [], |
|
currentWeekday: "", |
|
|
|
isShowdamper: false, |
|
}; |
|
}, |
|
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}`; |
|
}, |
|
}, |
|
watch: { |
|
temValue(newVal) { |
|
let valueWithoutTem = newVal.replace(/℃/g, ""); |
|
if (valueWithoutTem === "") { |
|
this.temValue = "℃"; |
|
} else { |
|
this.temValue = valueWithoutTem + "℃"; |
|
} |
|
}, |
|
valvePercent(newVal) { |
|
// 去除输入值中的 % |
|
let valueWithoutPercent = newVal.replace(/%/g, ""); |
|
// 如果输入值为空，保持 % |
|
if (valueWithoutPercent === "") { |
|
this.temValue = "%"; |
|
} else { |
|
// 否则在输入值后面添加 % |
|
this.temValue = valueWithoutPercent + "%"; |
|
} |
|
}, |
|
frequency(newVal) { |
|
let valueWithoutFrequency = newVal.replace(/v/g, ""); |
|
if (valueWithoutFrequency === "") { |
|
this.temValue = "v"; |
|
} else { |
|
this.temValue = valueWithoutFrequency + "v"; |
|
} |
|
}, |
|
}, |
|
created() { |
|
const weekdays = [ |
|
"星期日", |
|
"星期一", |
|
"星期二", |
|
"星期三", |
|
"星期四", |
|
"星期五", |
|
"星期六", |
|
]; |
|
const date = new Date(); |
|
const dayIndex = date.getDay(); |
|
this.currentWeekday = weekdays[dayIndex]; |
|
console.log("今天是星期几", this.currentWeekday); |
|
}, |
|
mounted() { |
|
this.requestFullscreen(); |
|
// 首次进入页面时执行 |
|
this.getSysBuild(); |
|
this.getAlarnStatus(); |
|
this.getDayData(); |
|
// 每秒更新一次时间 |
|
this.nowTimer = setInterval(() => { |
|
this.currentDate = new Date(); |
|
}, 1000); |
|
}, |
|
beforeDestroy() { |
|
// 组件销毁前清除定时器 |
|
if (this.nowTimer) { |
|
clearInterval(this.nowTimer); |
|
} |
|
}, |
|
methods: { |
|
// 全屏操作 |
|
requestFullscreen() { |
|
const element = document.documentElement; |
|
console.log("全屏了吗"); |
|
if (element.requestFullscreen) { |
|
element.requestFullscreen(); |
|
} else if (element.mozRequestFullScreen) { |
|
// Firefox |
|
element.mozRequestFullScreen(); |
|
} else if (element.webkitRequestFullscreen) { |
|
// Chrome, Safari and Opera |
|
element.webkitRequestFullscreen(); |
|
} else if (element.msRequestFullscreen) { |
|
// IE/Edge |
|
element.msRequestFullscreen(); |
|
} |
|
}, |
|
// 退出全屏 |
|
exitFullscreen() { |
|
if (document.exitFullscreen) { |
|
document.exitFullscreen(); |
|
} else if (document.mozCancelFullScreen) { |
|
// Firefox |
|
document.mozCancelFullScreen(); |
|
} else if (document.webkitExitFullscreen) { |
|
// Chrome, Safari and Opera |
|
document.webkitExitFullscreen(); |
|
} else if (document.msExitFullscreen) { |
|
// IE/Edge |
|
document.msExitFullscreen(); |
|
} |
|
}, |
|
// 进入系统首页 |
|
goSys() { |
|
this.exitFullscreen(); |
|
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.exitFullscreen(); |
|
this.$router.push("/alarm/alarmRecord"); |
|
}, |
|
// 判断对象是否有效（不为空且不为 undefined） |
|
isObjectValid(obj) { |
|
return obj && Object.keys(obj).length > 0; |
|
}, |
|
getSysBuild() { |
|
spaceTree().then((res) => { |
|
if (res.code == 200) { |
|
// 只需要保留热水的系统 |
|
console.log("楼栋返回值", res); |
|
let newRes = { ...res }; |
|
|
|
if (newRes.data && newRes.data[0] && newRes.data[0].children) { |
|
newRes.data[0].children = newRes.data[0].children.filter((item) => { |
|
// 假设子项有一个 label属性，用于检查是否包含 "热水" |
|
return item.label && item.label.includes("空调风柜"); |
|
}); |
|
} |
|
// 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 5 级 |
|
const targetLevel = 5; |
|
// 从 data[0] 开始处理，当前层级为 1 |
|
if (newRes.data[0]) { |
|
this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel); |
|
} |
|
console.log("筛选后的新结果", newRes); |
|
this.treeData = newRes.data; |
|
this.$nextTick(() => { |
|
// 默认展开节点 |
|
this.getExpandedKeys(this.treeData, 1); |
|
if (this.treeData.length > 0) { |
|
// 找到最后一层的第一个子节点 |
|
const lastLevelFirstChild = this.findLastLevelFirstChild( |
|
this.treeData[0] |
|
); |
|
// this.$refs.tree.setCurrentKey( |
|
// this.treeData[0].children[0].children[0].children[0].id |
|
// ); |
|
// 设置当前选中的节点,默认高亮 |
|
this.$refs.tree.setCurrentKey(lastLevelFirstChild.id); |
|
// 更新当前节点的信息 |
|
this.currentId = lastLevelFirstChild.id; |
|
this.currentLevel = lastLevelFirstChild.level; |
|
this.currentName = lastLevelFirstChild.label; |
|
console.log("当前选中节点ID", this.currentId); |
|
console.log("当前选中节点层级", this.currentLevel); |
|
console.log("当前选中节点名称", this.currentName); |
|
// 传给子组件,触发子组件getWindList() |
|
if (this.currentName.includes("新风阀")) { |
|
this.isShowdamper = true; |
|
this.$nextTick(() => { |
|
this.$refs.damperMonitorRef.getWindList(); |
|
}); |
|
} else { |
|
this.isShowdamper = false; |
|
this.$nextTick(() => { |
|
this.$refs.normalMonitorRef.getWindList(); |
|
}); |
|
} |
|
} |
|
}); |
|
} |
|
}); |
|
}, |
|
// 递归函数，用于去除指定层级往后的 children 数据 |
|
removeChildrenAfterLevel(obj, currentLevel, targetLevel) { |
|
if (currentLevel >= targetLevel) { |
|
// 当达到指定层级时，将 children 属性置为空数组 |
|
obj.children = []; |
|
return; |
|
} |
|
if (obj.children && obj.children.length > 0) { |
|
// 若存在 children 数组，则递归处理每个子项 |
|
for (let i = 0; i < obj.children.length; i++) { |
|
this.removeChildrenAfterLevel( |
|
obj.children[i], |
|
currentLevel + 1, |
|
targetLevel |
|
); |
|
} |
|
} |
|
}, |
|
// 递归函数，找到最后一层的第一个子节点 |
|
findLastLevelFirstChild(node, level = 1) { |
|
if (!node.children || node.children.length === 0) { |
|
return { |
|
id: node.id, |
|
level, |
|
label: node.label, |
|
}; |
|
} |
|
return this.findLastLevelFirstChild(node.children[0], level + 1); |
|
}, |
|
// 默认只展示一二级菜单 |
|
getExpandedKeys(nodes, level) { |
|
nodes.forEach((node) => { |
|
if (level <= this.currentId + 4) { |
|
this.expandedKeys.push(node.id); |
|
} |
|
if (node.children) { |
|
this.getExpandedKeys(node.children, level + 1); |
|
} |
|
}); |
|
}, |
|
// 更换图标 |
|
getIconClass(node) { |
|
// console.log("当前图标的节点内容", node); |
|
if (node.level === 5) { |
|
// 5级菜单时的图标 |
|
if (node.expanded) { |
|
return "el-icon-document-opened"; // 5级菜单展开时的图标类名 |
|
} |
|
return "el-icon-document"; // 5级菜单收缩时的图标类名 |
|
} |
|
if (node.expanded) { |
|
return "el-icon-folder-opened"; // 非5级菜单展开时的图标类名 |
|
} |
|
return "el-icon-folder-add"; // 非5级菜单收缩时的图标类名 |
|
}, |
|
handleNodeExpand(node) { |
|
// 节点展开时触发 |
|
}, |
|
handleNodeCollapse(node) { |
|
// 节点收缩时触发 |
|
}, |
|
// 点击当前节点，保存节点内容 |
|
handleNodeClick(node, data) { |
|
console.log("点击的当前节点", node, data); |
|
if (data.level !== 5) { |
|
console.log("不是第5层000"); |
|
// 设置当前选中的节点,默认高亮 |
|
this.$refs.tree.setCurrentKey(this.currentId); |
|
console.log("当前选中节点ID", this.currentId); |
|
console.log("当前选中节点层级", this.currentLevel); |
|
console.log("当前选中节点名称", this.currentName); |
|
} else { |
|
console.log("第5层111"); |
|
this.currentId = node.id; |
|
this.currentLevel = data.level; |
|
this.currentName = node.label; |
|
// 设置当前选中的节点,默认高亮 |
|
this.$refs.tree.setCurrentKey(this.currentId); |
|
console.log("当前选中节点ID", this.currentId); |
|
console.log("当前选中节点层级", this.currentLevel); |
|
console.log("当前选中节点名称", this.currentName); |
|
// 传给子组件,触发子组件getWindList() |
|
if (this.currentName.includes("新风阀")) { |
|
this.isShowdamper = true; |
|
this.$nextTick(() => { |
|
this.$refs.damperMonitorRef.getWindList(); |
|
}); |
|
} else { |
|
this.isShowdamper = false; |
|
this.$nextTick(() => { |
|
this.$refs.normalMonitorRef.getWindList(); |
|
}); |
|
} |
|
} |
|
}, |
|
}, |
|
}; |
|
</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.69rem; |
|
} |
|
.title-right { |
|
width: 5.04rem; |
|
height: 0.61rem; |
|
} |
|
.sys-title { |
|
position: absolute; |
|
top: 40%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
font-size: 0.28rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
z-index: 100; |
|
} |
|
.nowTime { |
|
position: absolute; |
|
top: 0.3rem; |
|
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.33rem; |
|
right: 4.4rem; |
|
z-index: 10; |
|
width: 0.3rem; |
|
height: 0.27rem; |
|
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.33rem; |
|
right: 4rem; |
|
z-index: 10; |
|
width: 0.3rem; |
|
height: 0.27rem; |
|
margin: 0 0.2rem 0 0.27rem; |
|
cursor: pointer; |
|
} |
|
.back-icon { |
|
position: absolute; |
|
top: 0.33rem; |
|
right: 3.7rem; |
|
z-index: 10; |
|
width: 0.3rem; |
|
height: 0.27rem; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
.app-container { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: stretch; |
|
height: 100%; |
|
padding: 0.3rem 0.2rem 0 0.35rem; |
|
width: 100%; |
|
.left-tree { |
|
width: 256px; |
|
padding: 15px 10px 10px 10px; |
|
border: 1px solid #004b8c; |
|
.tree-div { |
|
height: 7rem; |
|
overflow-y: auto; |
|
} |
|
.status { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
flex-wrap: wrap; |
|
margin-top: 20px; |
|
.status-li { |
|
width: 50%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
margin-bottom: 15px; |
|
} |
|
.status1, |
|
.status2, |
|
.status3, |
|
.status4 { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
margin-bottom: 5px; |
|
} |
|
.status1::before { |
|
content: ""; |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background-color: #00d2ff; |
|
margin-right: 5px; |
|
} |
|
.status2::before { |
|
content: ""; |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background-color: #ff2f2f; |
|
margin-right: 5px; |
|
} |
|
.status3::before { |
|
content: ""; |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background-color: #ff9908; |
|
margin-right: 5px; |
|
} |
|
.status4::before { |
|
content: ""; |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background-color: #7398c7; |
|
margin-right: 5px; |
|
} |
|
} |
|
} |
|
.right-monitor { |
|
width: calc(100% - 280px); |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-start; |
|
} |
|
} |
|
.tree-container { |
|
height: 300px; /* 设置固定高度 */ |
|
overflow-y: auto; /* 启用垂直滚动条 */ |
|
} |
|
// 滚动条 |
|
:-webkit-scrollbar { |
|
width: 10px; /* 滚动条宽度 */ |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
background: transparent !important; /* 滚动条轨道背景色 */ |
|
} |
|
.custom-tree-node { |
|
flex: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
font-size: 14px; |
|
padding-right: 8px; |
|
.tree-left { |
|
.custom-tree-icon { |
|
margin-right: 5px; |
|
} |
|
} |
|
} |
|
.highlight { |
|
background-color: #003863 !important; /* 定义高亮的背景颜色 */ |
|
color: #ffffff !important; |
|
font-weight: bold; |
|
} |
|
// 手机端样式 |
|
@media (min-width: 0px) and (max-width: 990px) { |
|
.app-container { |
|
padding: 0rem 0.2rem 0 0.35rem !important; |
|
} |
|
.app-container .left-tree { |
|
width: 200px !important; |
|
min-height: 340px !important; |
|
padding: 0.15rem 0 !important; |
|
} |
|
.app-container .tree-div { |
|
height: 300px !important; |
|
width: 100%; |
|
overflow-x: hidden !important; |
|
} |
|
.app-container .right-monitor { |
|
width: calc(100% - 210px) !important; |
|
} |
|
.custom-tree-node { |
|
font-size: 12px !important; |
|
} |
|
} |
|
</style> |
|
<style scoped> |
|
/* 自定义高亮颜色 */ |
|
.left-tree |
|
>>> .el-tree--highlight-current |
|
.el-tree-node.is-current |
|
> .el-tree-node__content { |
|
background-color: #285b9e !important; |
|
/* color: #f56c6c; */ |
|
color: #25f1f8; |
|
} |
|
/* 手机端样式 */ |
|
@media (min-width: 0px) and (max-width: 990px) { |
|
.left-tree >>> .el-tree-node__content > .el-tree-node__expand-icon { |
|
padding: 3px !important; |
|
} |
|
} |
|
</style>
|
|
|