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.
639 lines
18 KiB
639 lines
18 KiB
<template> |
|
<div class="loginD"> |
|
<img |
|
src="../../assets/images/index_img_top.png" |
|
class="loginD_img_top" |
|
alt="" |
|
/> |
|
<img |
|
src="../../assets/images/index_img_down.png" |
|
class="loginD_img_down" |
|
alt="" |
|
/> |
|
<div class="sys-title" @click="goSys">楼宇智慧管理系统平台</div> |
|
<!-- <div class="day">已监测100天</div> --> |
|
<div class="set"> |
|
<img src="../../assets/images/icon_time.png" class="icon_time" alt="" /> |
|
<div>{{ nowTime }}</div> |
|
<img |
|
src="../../assets/images/icon_home.png" |
|
class="icon_home" |
|
alt="" |
|
title="进入系统" |
|
@click="goSys" |
|
/> |
|
<img |
|
src="../../assets/images/icon_dianyuan.png" |
|
class="icon_dianyuan" |
|
alt="" |
|
title="退出系统" |
|
@click="logout" |
|
/> |
|
</div> |
|
<div class="screen-page"> |
|
<div class="screen-left" :class="{ collapsed: !isLeftPanelOpen }"> |
|
<div class="showLeftConent"> |
|
<div class="special-div"> |
|
<div class="special-top"> |
|
<div class="special-title"> |
|
<div class="title-left"> |
|
<div>能耗总览</div> |
|
<time-data |
|
v-model="sharedIndex" |
|
:currentIndex="sharedIndex" |
|
@update-message="handleUpdateMessage" |
|
></time-data> |
|
</div> |
|
</div> |
|
</div> |
|
<all-energy :viewMes="viewMes"></all-energy> |
|
</div> |
|
<div class="special-div"> |
|
<div class="special-top"> |
|
<div class="special-title"> |
|
<div class="title-left"> |
|
<div>冷源系统能效</div> |
|
<time-data |
|
v-model="sharedIndex" |
|
:currentIndex="sharedIndex" |
|
@update-message="handleUpdateMessage" |
|
></time-data> |
|
</div> |
|
</div> |
|
</div> |
|
<cold-sys-energy :viewMes="viewMes"></cold-sys-energy> |
|
</div> |
|
<div class="special-div"> |
|
<div class="special-top"> |
|
<div class="special-title"> |
|
<div class="title-left"> |
|
<div>生活热水系统</div> |
|
<time-data |
|
v-model="sharedIndex" |
|
:currentIndex="sharedIndex" |
|
@update-message="handleUpdateMessage" |
|
></time-data> |
|
</div> |
|
</div> |
|
</div> |
|
<water-sys-energy :viewMes="viewMes"></water-sys-energy> |
|
</div> |
|
</div> |
|
<img |
|
:src="leftIndicatorSrc" |
|
class="left-Indicator" |
|
@click="togglePanel('left')" |
|
alt="" |
|
/> |
|
</div> |
|
<div class="screen-right" :class="{ collapsed: !isRightPanelOpen }"> |
|
<div class="showRightConent"> |
|
<div class="special-div"> |
|
<div class="special-top"> |
|
<div class="special-title"> |
|
<div class="title-left"> |
|
<div>基本信息</div> |
|
<time-data |
|
v-model="sharedIndex" |
|
:currentIndex="sharedIndex" |
|
@update-message="handleUpdateMessage" |
|
></time-data> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="message"> |
|
<div class="message-li"> |
|
<img |
|
class="message-img" |
|
src="../../assets/images/message-img1.png" |
|
alt="" |
|
/> |
|
<div class="message-data">{{ viewMes.buildingArea }}m²</div> |
|
<div>建筑面积</div> |
|
</div> |
|
<div class="message-li"> |
|
<img |
|
class="message-img" |
|
src="../../assets/images/message-img3.png" |
|
alt="" |
|
/> |
|
<div class="message-data">{{ viewMes.totalEle }}kwh</div> |
|
<div>总电耗</div> |
|
</div> |
|
<div class="message-li"> |
|
<img |
|
class="message-img" |
|
src="../../assets/images/message-img4.png" |
|
alt="" |
|
/> |
|
<div class="message-data">{{ viewMes.totalWater }}t</div> |
|
<div>总水耗</div> |
|
</div> |
|
<div class="message-li"> |
|
<img |
|
class="message-img" |
|
src="../../assets/images/message-img2.png" |
|
alt="" |
|
/> |
|
<div class="message-data">{{ viewMes.totalCold }}kw</div> |
|
<div>总产冷量</div> |
|
</div> |
|
<div class="message-li"> |
|
<img |
|
class="message-img" |
|
src="../../assets/images/message-img6.png" |
|
alt="" |
|
/> |
|
<div class="message-data">{{ viewMes.totalGas }}t</div> |
|
<div>总蒸汽量</div> |
|
</div> |
|
<div class="message-li"> |
|
<img |
|
class="message-img" |
|
src="../../assets/images/message-img5.png" |
|
alt="" |
|
/> |
|
<div class="message-data">{{ viewMes.eleUnitArea }}kwh/m²</div> |
|
<div>面积电耗</div> |
|
</div> |
|
<div class="message-li"> |
|
<img |
|
class="message-img" |
|
src="../../assets/images/message-img7.png" |
|
alt="" |
|
/> |
|
<div class="message-data">{{ viewMes.waterUnitArea }}t/m²</div> |
|
<div>面积水耗</div> |
|
</div> |
|
<div class="message-li"> |
|
<img |
|
class="message-img" |
|
src="../../assets/images/message-img8.png" |
|
alt="" |
|
/> |
|
<div class="message-data">{{ viewMes.coldUnitArea }}kw/m²</div> |
|
<div>面积冷耗</div> |
|
</div> |
|
<div class="message-li"> |
|
<img |
|
class="message-img" |
|
src="../../assets/images/message-img9.png" |
|
alt="" |
|
/> |
|
<div class="message-data">{{ viewMes.gasUnitArea }}t/m²</div> |
|
<div>面积汽耗</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="special-div"> |
|
<div class="special-top"> |
|
<div class="special-title"> |
|
<div class="title-left"> |
|
<div>用电趋势</div> |
|
<time-data |
|
v-model="sharedIndex" |
|
:currentIndex="sharedIndex" |
|
@update-message="handleUpdateMessage" |
|
></time-data> |
|
</div> |
|
</div> |
|
</div> |
|
<use-elect></use-elect> |
|
</div> |
|
</div> |
|
<img |
|
:src="rightIndicatorSrc" |
|
class="right-Indicator" |
|
@click="togglePanel('right')" |
|
alt="" |
|
/> |
|
</div> |
|
</div> |
|
<div></div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import AllEnergy from "./components/allEnergy.vue"; |
|
import ColdSysEnergy from "./components/coldSysEnergy.vue"; |
|
import waterSysEnergy from "./components/waterSysEnergy.vue"; |
|
import useElect from "./components/useElect.vue"; |
|
import timeData from "./components/timeData.vue"; |
|
import { overView, getWeatherData, getRunTime } from "@/api/bigScreen"; |
|
import { getDay, getMonth, getYear } from "@/utils/datetime"; |
|
export default { |
|
name: "screen", |
|
components: { timeData, AllEnergy, ColdSysEnergy, waterSysEnergy, useElect }, |
|
data() { |
|
return { |
|
nowTime: "", |
|
sharedIndex: "0", //默认为0 |
|
queryType: "day", //默认为day |
|
isLeftPanelOpen: true, // 默认显示左边内容 |
|
isRightPanelOpen: true, // 默认显示右边内容 |
|
leftIndicatorSrc: require("@/assets/images/left-arrow.png"), |
|
rightIndicatorSrc: require("@/assets/images/right-arrow.png"), |
|
viewMes: {}, |
|
dataTime: getDay(0), //默认为今天 |
|
}; |
|
}, |
|
created() { |
|
this.nowTimes(); |
|
}, |
|
mounted() { |
|
this.getMessage(); |
|
// this.getWeather(); |
|
// this.getRunData(); |
|
}, |
|
methods: { |
|
//显示当前时间（年月日时分秒） |
|
timeFormate(timeStamp) { |
|
let hh = |
|
new Date(timeStamp).getHours() < 10 |
|
? "0" + new Date(timeStamp).getHours() |
|
: new Date(timeStamp).getHours(); |
|
let mm = |
|
new Date(timeStamp).getMinutes() < 10 |
|
? "0" + new Date(timeStamp).getMinutes() |
|
: new Date(timeStamp).getMinutes(); |
|
let ss = |
|
new Date(timeStamp).getSeconds() < 10 |
|
? "0" + new Date(timeStamp).getSeconds() |
|
: new Date(timeStamp).getSeconds(); |
|
this.nowTime = hh + ":" + mm + ":" + ss; |
|
}, |
|
nowTimes() { |
|
this.timeFormate(new Date()); |
|
setInterval(this.nowTimes, 1000); |
|
this.clear(); |
|
}, |
|
clear() { |
|
clearInterval(this.nowTimes); |
|
this.nowTimes = null; |
|
}, |
|
// 进入系统 |
|
goSys() { |
|
this.$router.push("/"); |
|
}, |
|
// 退出系统 |
|
logout() { |
|
// 清除缓存 |
|
this.$store.dispatch("LogOut").then(() => { |
|
location.href = "/index"; |
|
}); |
|
}, |
|
// 父子组件传值 |
|
handleUpdateMessage(message) { |
|
console.log("父组件接收的值", message); |
|
this.sharedIndex = message; |
|
if (this.sharedIndex === 0) { |
|
this.queryType = "day"; |
|
this.dataTime = getDay(0); |
|
} else if (this.sharedIndex === 1) { |
|
this.queryType = "month"; |
|
this.dataTime = getMonth(0); |
|
} else if (this.sharedIndex === 2) { |
|
this.queryType = "year"; |
|
this.dataTime = getYear(0); |
|
} |
|
this.getMessage(); |
|
}, |
|
togglePanel(val) { |
|
if (val === "left") { |
|
console.log("左边伸缩"); |
|
this.isLeftPanelOpen = !this.isLeftPanelOpen; |
|
// 切换图片路径，从左箭头切换到右箭头 |
|
if (this.isLeftPanelOpen) { |
|
this.leftIndicatorSrc = require("@/assets/images/left-arrow.png"); // 左 |
|
} else { |
|
this.leftIndicatorSrc = require("@/assets/images/right-arrow.png"); // 右 |
|
} |
|
} else if (val === "right") { |
|
console.log("右边伸缩"); |
|
this.indicatorSrc = require("@/assets/images/right-arrow.png"); |
|
this.isRightPanelOpen = !this.isRightPanelOpen; |
|
// 切换图片路径，从左箭头切换到右箭头 |
|
if (this.isRightPanelOpen) { |
|
this.rightIndicatorSrc = require("@/assets/images/right-arrow.png"); // 右 |
|
} else { |
|
this.rightIndicatorSrc = require("@/assets/images/left-arrow.png"); // 左 |
|
} |
|
} |
|
}, |
|
// 请求基本信息、冷源、热水系统数据 |
|
getMessage() { |
|
let data = { |
|
timeType: this.queryType, |
|
startTime: this.dataTime, |
|
endTime: this.dataTime, |
|
}; |
|
overView(data).then((res) => { |
|
console.log("基本信返回", res); |
|
if (res.code == 200) { |
|
let viewData = res.rows[0]; |
|
if (viewData.buildingArea > 10000) { |
|
let result = (viewData.buildingArea / 10000).toFixed(4); |
|
// 将结果转换为浮点数再转回字符串 |
|
result = parseFloat(result).toString(); |
|
viewData.buildingArea = result + "万"; |
|
} |
|
this.viewMes = viewData; |
|
} |
|
}); |
|
}, |
|
// 获取天气数据 |
|
getWeather() { |
|
getWeatherData().then((res) => { |
|
console.log("天气返回", res); |
|
}); |
|
}, |
|
// 获取运行时间 |
|
getRunData() { |
|
getRunTime().then((res) => { |
|
console.log("运行时间返回", res); |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style rel="stylesheet/scss" lang="scss"> |
|
/* 定义呼吸灯动画 */ |
|
@keyframes blink { |
|
0% { |
|
opacity: 0.2; |
|
} |
|
50% { |
|
opacity: 1; |
|
} |
|
100% { |
|
opacity: 0.2; |
|
} |
|
} |
|
.loginD { |
|
background-color: #062140; |
|
background-image: url("../../assets/images/bigscreen.png"); |
|
background-size: 100% 100%; |
|
background-repeat: no-repeat; |
|
width: 100%; |
|
min-height: 100vh; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
position: relative; |
|
padding-bottom: 20px; |
|
.sys-title { |
|
position: absolute; |
|
top: 0.13rem; |
|
font-family: YouSheBiaoTiHei; |
|
font-size: 0.4rem; |
|
letter-spacing: 0.03rem; |
|
text-shadow: 0px 2px 1px rgba(255, 255, 255, 0.3); |
|
background-image: linear-gradient(to bottom, #ffffff, #b0dbff); |
|
background-clip: text; |
|
-webkit-background-clip: text; |
|
color: transparent; |
|
cursor: pointer; |
|
} |
|
.day { |
|
position: absolute; |
|
top: 0.43rem; |
|
left: 5rem; |
|
color: #ffffff; |
|
font-size: 0.18rem; |
|
} |
|
.set { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-family: SourceHanSansCN-Regular; |
|
font-size: 0.24rem; |
|
font-weight: normal; |
|
font-stretch: normal; |
|
letter-spacing: 0.03rem; |
|
color: #ffffff; |
|
position: absolute; |
|
top: 0.44rem; |
|
right: 0.7rem; |
|
.icon_time { |
|
width: 0.22rem; |
|
height: 0.22rem; |
|
margin-right: 0.08rem; |
|
} |
|
.icon_home { |
|
width: 0.3rem; |
|
height: 0.27rem; |
|
margin: 0 0.25rem 0 0.27rem; |
|
cursor: pointer; |
|
} |
|
.icon_dianyuan { |
|
width: 0.24rem; |
|
height: 0.26rem; |
|
cursor: pointer; |
|
} |
|
} |
|
.loginD_img_top { |
|
position: absolute; |
|
top: 0; |
|
width: 18.27rem; |
|
height: 1.13rem; |
|
} |
|
.loginD_img_down { |
|
position: absolute; |
|
bottom: 0; |
|
width: 18.66rem; |
|
} |
|
.title-left { |
|
width: calc(100% - 30px); |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
.special-div { |
|
margin-bottom: 17px; |
|
} |
|
.screen-page { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: stretch; |
|
width: calc(100% - 122px); |
|
margin-top: 86px; |
|
.screen-left { |
|
display: flex; |
|
flex-direction: column; |
|
width: 433px; |
|
position: relative; |
|
.left-Indicator { |
|
position: absolute; |
|
right: -90px; |
|
width: 60px; |
|
height: 40px; |
|
cursor: pointer; |
|
top: 50%; /* 垂直居中对齐 */ |
|
transform: translateY(-50%); /* 调整垂直对齐 */ |
|
transition: transform 1s ease; |
|
} |
|
.left-Indicator:hover { |
|
animation: blink 1s infinite; |
|
} |
|
} |
|
.screen-right { |
|
display: flex; |
|
flex-direction: column; |
|
width: 433px; |
|
position: relative; |
|
.message { |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
justify-content: flex-start; |
|
margin-top: 29px; |
|
font-family: SourceHanSansCN-Regular; |
|
font-size: 16px; |
|
font-weight: normal; |
|
font-stretch: normal; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
.message-li { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
width: calc(33.33% - 32px); |
|
margin: 0 16px; |
|
// margin-bottom: 22px; |
|
.message-data { |
|
font-family: DIN-Bold; |
|
font-size: 20px; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
margin-bottom: 3px; |
|
} |
|
.message-img { |
|
width: 100px; |
|
height: 99px; |
|
} |
|
} |
|
} |
|
.right-Indicator { |
|
position: absolute; |
|
left: -90px; |
|
width: 60px; |
|
height: 40px; |
|
cursor: pointer; |
|
top: 50%; /* 垂直居中对齐 */ |
|
transform: translateY(-50%); /* 调整垂直对齐 */ |
|
transition: transform 1s ease; |
|
} |
|
.right-Indicator:hover { |
|
animation: blink 1s infinite; |
|
} |
|
} |
|
} |
|
} |
|
.screen-left { |
|
transition: width 0.3s ease; |
|
} |
|
|
|
.screen-left.collapsed .showLeftConent { |
|
// width: 0 !important; |
|
// overflow: hidden; |
|
display: none; |
|
} |
|
.screen-right.collapsed .showRightConent { |
|
// width: 0 !important; |
|
// overflow: hidden; |
|
display: none; |
|
} |
|
.screen-left.collapsed .left-Indicator { |
|
right: auto !important; |
|
left: 0px !important; |
|
} |
|
.screen-right.collapsed .right-Indicator { |
|
left: auto !important; |
|
right: 0px !important; |
|
} |
|
@media (max-width: 1170px) { |
|
.screen-page { |
|
width: calc(100% - 60px) !important; |
|
.screen-left { |
|
transform: scale(0.9); |
|
transform-origin: top left; |
|
} |
|
.screen-right { |
|
transform: scale(0.9); |
|
transform-origin: top right; |
|
} |
|
} |
|
} |
|
@media (max-width: 1060px) { |
|
.screen-page { |
|
width: calc(100% - 40px) !important; |
|
.screen-left { |
|
transform: scale(0.8); |
|
transform-origin: top left; |
|
} |
|
.screen-right { |
|
transform: scale(0.8); |
|
transform-origin: top right; |
|
} |
|
} |
|
} |
|
// 媒体查询，适配大于2000px分辨率的大屏样式-element样式 |
|
@media (min-width: 2000px) { |
|
.loginD { |
|
padding-bottom: 0.2rem !important; |
|
.title-left { |
|
width: calc(100% - 0.3rem) !important; |
|
} |
|
.special-div { |
|
margin-bottom: 0.17rem !important; |
|
} |
|
.screen-page { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: stretch; |
|
width: calc(100% - 1.22rem) !important; |
|
margin-top: 0.86rem !important; |
|
.screen-left { |
|
width: 30% !important; |
|
.left-Indicator { |
|
position: absolute; |
|
right: -0.9rem !important; |
|
width: 0.6rem !important; |
|
height: 0.4rem !important; |
|
} |
|
} |
|
.screen-right { |
|
width: 30% !important; |
|
.message { |
|
margin-top: 0.29rem !important; |
|
font-size: 0.16rem !important; |
|
.message-li { |
|
width: calc(33.33% - 0.32rem) !important; |
|
margin: 0 0.16rem !important; |
|
.message-data { |
|
font-size: 0.2rem !important; |
|
margin-bottom: 0.3rem !important; |
|
} |
|
.message-img { |
|
width: 1rem !important; |
|
height: 0.99rem !important; |
|
} |
|
} |
|
} |
|
.right-Indicator { |
|
position: absolute; |
|
left: -0.9rem !important; |
|
width: 0.6rem !important; |
|
height: 0.4rem !important; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|