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.
428 lines
11 KiB
428 lines
11 KiB
<template>
|
|
<div class="home">
|
|
<div class="header">
|
|
<h2>电能替代分布式控制试验平台</h2>
|
|
<router-link :to="{path:'control/manual'}" tag="div" class="back">返回后台</router-link>
|
|
</div>
|
|
<div class="main">
|
|
<div class="left">
|
|
<div class="left_top bgimg">
|
|
<div class="title">电磁锅炉</div>
|
|
<div class="info_box">
|
|
<div class="dev_img">
|
|
<img src="../../assets/images/dcgl.png" alt="">
|
|
</div>
|
|
<div class="dev_data">
|
|
<p>当前状态：<span class="now_tatus">开启</span></p>
|
|
<p>进水温度：<span class="enter_t"><span>25</span>℃</span></p>
|
|
<p>出水温度：<span class="leave_t"><span>85</span>℃</span></p>
|
|
<p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="chart_box">
|
|
<div class="dev_chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="left_bottom bgimg">
|
|
<div class="title">蓄热锅炉</div>
|
|
<div class="info_box">
|
|
<div class="dev_img">
|
|
<img src="../../assets/images/蓄热锅炉.png" alt="">
|
|
</div>
|
|
<div class="dev_data">
|
|
<p>当前状态：<span class="now_tatus">开启</span></p>
|
|
<p>进水温度：<span class="enter_t"><span>25</span>℃</span></p>
|
|
<p>出水温度：<span class="leave_t"><span>85</span>℃</span></p>
|
|
<p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="chart_box">
|
|
<div class="dev_chart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle">
|
|
<div class="middle_top">
|
|
<div class="now_power">
|
|
<div class="data">35kW</div>
|
|
<div class="bg_img"></div>
|
|
<div class="txt">当前功率</div>
|
|
</div>
|
|
<div class="my3D_img">
|
|
<img src="../../assets/images/3Dimg.png" alt="">
|
|
</div>
|
|
<div class="now_ele">
|
|
<div class="data">16446kWh</div>
|
|
<div class="bg_img"></div>
|
|
<div class="txt">总用电量</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle_bottom">
|
|
<div class="chart_box bgimg">
|
|
<div class="title">当前功率</div>
|
|
<div class="nowPower_chart"></div>
|
|
</div>
|
|
<div class="wendu_box">
|
|
<div class="item">
|
|
<div class="dev_name">温度传感器1</div>
|
|
<div class="line"></div>
|
|
<div class="data">26℃</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="dev_name">温度传感器2</div>
|
|
<div class="line"></div>
|
|
<div class="data">26℃</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="dev_name">温度传感器3</div>
|
|
<div class="line"></div>
|
|
<div class="data">26℃</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="dev_name">温度传感器4</div>
|
|
<div class="line"></div>
|
|
<div class="data">26℃</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="dev_name">温度传感器5</div>
|
|
<div class="line"></div>
|
|
<div class="data">26℃</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="dev_name">温度传感器6</div>
|
|
<div class="line"></div>
|
|
<div class="data">26℃</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="dev_name">温度传感器7</div>
|
|
<div class="line"></div>
|
|
<div class="data">26℃</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="dev_name">温度传感器8</div>
|
|
<div class="line"></div>
|
|
<div class="data">26℃</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="right_top bgimg">
|
|
<div class="title">空气源热泵</div>
|
|
<div class="info_box">
|
|
<div class="dev_img">
|
|
<img src="../../assets/images/空气源热泵.png" alt="">
|
|
</div>
|
|
<div class="dev_data">
|
|
<p>当前状态：<span class="now_tatus">开启</span></p>
|
|
<p>进水温度：<span class="enter_t"><span>25</span>℃</span></p>
|
|
<p>出水温度：<span class="leave_t"><span>85</span>℃</span></p>
|
|
<p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="chart_box">
|
|
<div class="dev_chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="right_bottom bgimg">
|
|
<div class="title">发热电缆</div>
|
|
<div class="info_box">
|
|
<div class="dev_img">
|
|
<img src="../../assets/images/发热电缆.png" alt="">
|
|
</div>
|
|
<div class="dev_data">
|
|
<p>当前状态：<span class="now_tatus">开启</span></p>
|
|
<p>当前温度：<span class="now_t"><span>25</span>℃</span></p>
|
|
<p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="chart_box">
|
|
<div class="dev_chart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="Index">
|
|
// import {ref,reactive} from 'vue'
|
|
import {getTemperature} from '../../api/bigview/bigview'
|
|
|
|
// getWendu();
|
|
|
|
// const wendi1 = ref(0)
|
|
// function getWendu(){
|
|
// getTemperature().then((res)=>{
|
|
// console.log(res.data.data)
|
|
// })
|
|
// }
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.home{
|
|
height: 100%;
|
|
background-image: url("../../assets/images/bg.png");
|
|
background-size: 100% 100%;
|
|
.header{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 70px;
|
|
background-image: url("../../assets/images/headtitle.png");
|
|
background-size: 100% 100%;
|
|
h2{
|
|
font-size: 36px;
|
|
color: #AFEAFF;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 70px;
|
|
}
|
|
.back{
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 20px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
padding: 8px 15px;
|
|
background-color: #2c3e50;
|
|
}
|
|
}
|
|
.main{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
padding: 0 20px 20px 20px;
|
|
width: 100%;
|
|
height: calc(100% - 70px);
|
|
.left{
|
|
width: 24%;
|
|
height: 100%;
|
|
.left_top{
|
|
width: 100%;
|
|
height: 49%;
|
|
margin-bottom: 4%;
|
|
}
|
|
.left_bottom{
|
|
width: 100%;
|
|
height: 49%;
|
|
}
|
|
}
|
|
.middle{
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 50.5%;
|
|
height: 100%;
|
|
.middle_top{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
flex: 2;
|
|
width: 100%;
|
|
height: 67%;
|
|
padding-bottom: 20px;
|
|
.now_power{
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
width: 112px;
|
|
height: 110px;
|
|
.data{
|
|
color: #F5901A;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.bg_img{
|
|
width: 112px;
|
|
height: 62px;
|
|
background-image: url("../../assets/images/footer.png");
|
|
background-size: 100% 100%;
|
|
margin-top: -10px;
|
|
}
|
|
.txt{
|
|
color: #1AC4F5;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.now_ele{
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 112px;
|
|
height: 110px;
|
|
.data{
|
|
color: #128DFF;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.bg_img{
|
|
width: 112px;
|
|
height: 62px;
|
|
background-image: url("../../assets/images/footer.png");
|
|
background-size: 100% 100%;
|
|
margin-top: -10px;
|
|
}
|
|
.txt{
|
|
color: #1AC4F5;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.my3D_img{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px 60px 0 60px;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: .85;
|
|
}
|
|
}
|
|
}
|
|
.middle_bottom{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
height: 33%;
|
|
width: 100%;
|
|
.chart_box{
|
|
width: 49.5%;
|
|
height: 100%;
|
|
.nowPower_chart{
|
|
width: 100%;
|
|
height: 81%;
|
|
border: 1px solid #fff;
|
|
}
|
|
}
|
|
.wendu_box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
width: 49%;
|
|
height: 100%;
|
|
.item{
|
|
width: 24%;
|
|
height: 48.5%;
|
|
padding: 0 10px;
|
|
border: 1px solid #1085B6;
|
|
&:first-child{
|
|
margin-bottom: 8px;
|
|
}
|
|
.dev_name{
|
|
color: #19C3F4;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
}
|
|
.line{
|
|
width: 100%;
|
|
height: 1px;
|
|
background-image: url("../../assets/images/line.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.data{
|
|
color: #F5901A;
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
width: 24%;
|
|
height: 100%;
|
|
.right_top{
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 49%;
|
|
margin-bottom: 4%;
|
|
}
|
|
.right_bottom{
|
|
width: 100%;
|
|
height: 49%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.title{
|
|
width: 45%;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin: 0 auto 20px auto;
|
|
color: #19C3F4;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
background-image: url("../../assets/images/wrappertitle.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.info_box{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 44%;
|
|
padding: 10px;
|
|
.dev_img{
|
|
width: 50%;
|
|
height: 100%;
|
|
//border: 1px solid #fff;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.dev_data{
|
|
width: 50%;
|
|
height: 100%;
|
|
//border: 1px solid #fff;
|
|
margin-left: 10px;
|
|
p{
|
|
font-size: 16px;
|
|
line-height: 40px;
|
|
}
|
|
.now_tatus{
|
|
color: #14FF00;
|
|
}
|
|
.enter_t{
|
|
color: #F5901A;
|
|
}
|
|
.leave_t{
|
|
color: #F5901A;
|
|
}
|
|
.today_tce{
|
|
color: #128DFF;
|
|
}
|
|
.now_t{
|
|
color: #F5901A;
|
|
}
|
|
}
|
|
}
|
|
.chart_box{
|
|
width: 100%;
|
|
height: 44%;
|
|
padding: 0 10px 10px 10px;
|
|
.dev_chart{
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #fff;
|
|
}
|
|
}
|
|
.bgimg{
|
|
background-image: url("../../assets/images/wrapperbox.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|
|
|
|
|