lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
楼宇能效监测控制系统
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.
115 Commits
2 Branches
0 Tags
90 MiB
 
 
 
 
 
Tree: 914dba815c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '914dba815c'
${ noResults }
eemcs_ui/src/views/centerairC/sysMonitor/performance.vue

736 lines
22 KiB
Raw Blame History

<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"
@click="goSys"
alt=""
/>
<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="host-detail">
<div class="detail-top">
<div class="detail-top-left">
<div class="host-li">
<img
class="host-img"
src="../../../assets/images/host-img4.png"
alt=""
/>
<div class="host-name">1号螺旋机</div>
<div class="detail-data hostparams">
<div class="detail-data-top">
<title-img></title-img>
<div class="details-title">冷机性能</div>
<title-img></title-img>
</div>
<div class="detail-data-bottom">
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>实时EER:</span>
<span class="dotData">10.365</span>
<span class="dotUnit">kw/kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>实时功率:</span>
<span class="dotData">126</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>实时冷量:</span>
<span class="dotData">1306</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
<div class="detail-data-li year-data">
<div class="rightDot">
<div class="leftDot">
<span>全年EER:</span>
<span class="dotData">0.000</span>
<span class="dotUnit">kw/kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>全年用电:</span>
<span class="dotData">64098</span>
<span class="dotUnit">kw/H</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>全年供电:</span>
<span class="dotData">101365</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="host-li">
<img
class="host-img"
src="../../../assets/images/host-img4.png"
alt=""
/>
<div class="host-name">2号螺旋机</div>
<div class="detail-data hostparams">
<div class="detail-data-top">
<title-img></title-img>
<div class="details-title">冷机性能</div>
<title-img></title-img>
</div>
<div class="detail-data-bottom">
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>实时EER:</span>
<span class="dotData">10.365</span>
<span class="dotUnit">kw/kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>实时功率:</span>
<span class="dotData">126</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>实时冷量:</span>
<span class="dotData">1306</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
<div class="detail-data-li year-data">
<div class="rightDot">
<div class="leftDot">
<span>全年EER:</span>
<span class="dotData">0.000</span>
<span class="dotUnit">kw/kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>全年用电:</span>
<span class="dotData">64098</span>
<span class="dotUnit">kw/H</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>全年供电:</span>
<span class="dotData">101365</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="host-li">
<img
class="host-img"
src="../../../assets/images/host-img3.png"
alt=""
/>
<div class="host-name">3号磁悬浮机</div>
<div class="detail-data hostparams">
<div class="detail-data-top">
<title-img></title-img>
<div class="details-title">冷机性能</div>
<title-img></title-img>
</div>
<div class="detail-data-bottom">
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>实时EER:</span>
<span class="dotData">10.365</span>
<span class="dotUnit">kw/kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>实时功率:</span>
<span class="dotData">126</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>实时冷量:</span>
<span class="dotData">1306</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
<div class="detail-data-li year-data">
<div class="rightDot">
<div class="leftDot">
<span>全年EER:</span>
<span class="dotData">0.000</span>
<span class="dotUnit">kw/kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>全年用电:</span>
<span class="dotData">64098</span>
<span class="dotUnit">kw/H</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>全年供电:</span>
<span class="dotData">101365</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="detail-top-right">
<div class="detail-data hostparams">
<div class="detail-data-top">
<title-img></title-img>
<div class="details-title">系统性能</div>
<title-img></title-img>
</div>
<div class="detail-data-bottom">
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>今日EER:</span>
<span class="dotData">6.531</span>
<span class="dotUnit">kw/kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>今日用电:</span>
<span class="dotData">367</span>
<span class="dotUnit">kw/H</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>今日供冷:</span>
<span class="dotData">2397</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
<div class="detail-data-li year-data">
<div class="rightDot">
<div class="leftDot">
<span>当月EER:</span>
<span class="dotData">6.131</span>
<span class="dotUnit">kw/kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>今月用电:</span>
<span class="dotData">27840</span>
<span class="dotUnit">kw/H</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>当月供冷:</span>
<span class="dotData">172069</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
<div class="detail-data-li year-data">
<div class="rightDot">
<div class="leftDot">
<span>当年EER:</span>
<span class="dotData">6.531</span>
<span class="dotUnit">kw/kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>当年用电:</span>
<span class="dotData">105771</span>
<span class="dotUnit">kw/H</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span>当年供冷:</span>
<span class="dotData">744519</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
<div class="detail-data-li year-data">
<div class="rightDot">
<div class="leftDot">
<span class="dotTitle">累计EER:</span>
<span class="dotData">5.531</span>
<span class="dotUnit">kw/kw</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span class="dotTitle">累计用电:</span>
<span class="dotData">1096628</span>
<span class="dotUnit">kw/H</span>
</div>
</div>
</div>
<div class="detail-data-li">
<div class="rightDot">
<div class="leftDot">
<span class="dotTitle">累计供冷:</span>
<span class="dotData">6107983</span>
<span class="dotUnit">kw</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="detail-bottom">
<performance-chart :temArray="temArray"></performance-chart>
</div>
</div>
</div>
</template>
<script>
import {
hostDetailsData,
hostTemData,
runTime,
} from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import titleImg from "./components/titleImg.vue";
import { format } from "@/utils/datetime";
import PerformanceChart from "./components/performanceChart.vue";
export default {
name: "sysControl",
components: { titleImg, PerformanceChart },
data() {
return {
loading: false,
currentDate: new Date(),
nowTimer: null,
deviceName: "", //主机名称
hostData: [], //冷机性能
rightHostData: [], //右
automaticObj: {}, //手自动状态
localObj: {}, //本地远程状态
badObj: {}, //故障状态
timeObj: {}, //累计运行时间
compressorData: [], //压缩机参数
temArray: [], //冷冻冷却水温度
isMagnetic: false,
isShowWarning: false, //是否有报警
dayData: "", //监测天数
};
},
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() {},
mounted() {
this.getHostDetailsData();
this.getDayData();
// 在组件挂载后尝试进入全屏
setTimeout(() => {
this.requestFullscreen();
}, 100); // 延迟 100 毫秒执行全屏操作
},
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() {
this.$router.back();
},
getHostDetailsData() {
// 请求数据
// this.getHostParams(deviceLedgerId);
},
// 监测天数
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");
},
},
};
</script>
<style lang="scss" scoped>
.monitor {
width: 100%;
min-height: 100vh;
height: auto;
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.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;
}
}
.host-detail {
padding: 0.2rem;
width: 100%;
display: flex;
flex-direction: column;
.detail-top {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.detail-top-left {
width: 14rem;
// background-color: aquamarine;
position: relative;
display: flex;
flex-direction: row;
align-items: flex-start;
.host-li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 0.3rem;
position: relative;
.host-img {
width: 3.5rem;
height: 2.6rem;
margin-bottom: 0.1rem;
}
.host-name {
position: absolute;
top: 0.8rem;
left: 1.6rem;
color: #3520f8;
font-size: 0.18rem;
font-weight: bold;
}
}
}
.detail-top-right {
width: calc(100% - 14rem);
display: flex;
flex-direction: column;
align-items: center;
}
.detail-data {
display: flex;
flex-direction: column;
width: 4.5rem;
position: relative;
.detail-data-top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: #c0dffc;
font-weight: bold;
font-size: 0.18rem;
width: 100%;
text-align: center;
z-index: 10;
.details-title {
margin: 0 0.15rem;
}
}
.detail-data-bottom {
width: 100%;
padding: 0rem 0.3rem;
z-index: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
.line1 {
position: absolute;
top: 0.53rem;
}
}
}
.detail-bottom {
// margin: 0.3rem 0.5rem 0 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 3rem;
// background-color: #217df5;
}
}
}
</style>