hwj_system
/
scmy
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11

Browse Source
master
wj 2 years ago
parent 70b850dff6
commit 8cb913af88
3 changed files with 192 additions and 25 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      psdc-ui/src/assets/images/3Dimg.png
  2. BIN
      psdc-ui/src/assets/images/footer.png
  3. 217
      psdc-ui/src/views/bigview/index.vue

BIN
psdc-ui/src/assets/images/3Dimg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 697 KiB

BIN
psdc-ui/src/assets/images/footer.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

217
psdc-ui/src/views/bigview/index.vue
Unescape View File

@ -12,7 +12,12 @@
<div class="dev_img"> <div class="dev_img">
<img src="../../assets/images/电磁锅炉.png" alt=""> <img src="../../assets/images/电磁锅炉.png" alt="">
</div> </div>
<div class="dev_data"></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>
<div class="chart_box"> <div class="chart_box">
<div class="dev_chart"></div> <div class="dev_chart"></div>
@ -24,7 +29,12 @@
<div class="dev_img"> <div class="dev_img">
<img src="../../assets/images/蓄热锅炉.png" alt=""> <img src="../../assets/images/蓄热锅炉.png" alt="">
</div> </div>
<div class="dev_data"></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>
<div class="chart_box"> <div class="chart_box">
<div class="dev_chart"></div> <div class="dev_chart"></div>
@ -33,21 +43,66 @@
</div> </div>
<div class="middle"> <div class="middle">
<div class="middle_top"> <div class="middle_top">
<div class="important_data"></div> <div class="now_power">
<div class="my3D_img"></div> <div class="data">35kW</div>
<div class="important_data"></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>
<div class="middle_bottom"> <div class="middle_bottom">
<div class="chart_box bgimg"></div> <div class="chart_box bgimg">
<div class="title">当前功率</div>
<div class="nowPower_chart"></div>
</div>
<div class="wendu_box"> <div class="wendu_box">
<div class="item"></div> <div class="item">
<div class="item"></div> <div class="dev_name">温度传感器1</div>
<div class="item"></div> <div class="line"></div>
<div class="item"></div> <div class="data">26℃</div>
<div class="item"></div> </div>
<div class="item"></div> <div class="item">
<div class="item"></div> <div class="dev_name">温度传感器2</div>
<div class="item"></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>
</div> </div>
@ -58,7 +113,12 @@
<div class="dev_img"> <div class="dev_img">
<img src="../../assets/images/空气源热泵.png" alt=""> <img src="../../assets/images/空气源热泵.png" alt="">
</div> </div>
<div class="dev_data"></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>
<div class="chart_box"> <div class="chart_box">
<div class="dev_chart"></div> <div class="dev_chart"></div>
@ -70,7 +130,11 @@
<div class="dev_img"> <div class="dev_img">
<img src="../../assets/images/发热电缆.png" alt=""> <img src="../../assets/images/发热电缆.png" alt="">
</div> </div>
<div class="dev_data"></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>
<div class="chart_box"> <div class="chart_box">
<div class="dev_chart"></div> <div class="dev_chart"></div>
@ -141,32 +205,95 @@
width: 50.5%; width: 50.5%;
height: 100%; height: 100%;
.middle_top{ .middle_top{
position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: nowrap; flex-wrap: nowrap;
flex: 2; flex: 2;
width: 100%; width: 100%;
height: 67%;
padding-bottom: 20px; padding-bottom: 20px;
.important_data{ .now_power{
width: 14%; position: absolute;
height: 100%; bottom: 20px;
border: 1px solid #fff; 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{ .my3D_img{
width: 72%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #fff; border: 1px solid #fff;
padding: 20px 60px 0 60px;
img{
width: 100%;
height: 100%;
opacity: .85;
}
} }
} }
.middle_bottom{ .middle_bottom{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: nowrap; flex-wrap: nowrap;
flex: 1; height: 33%;
width: 100%; width: 100%;
.chart_box{ .chart_box{
width: 49.5%; width: 49.5%;
height: 100%; height: 100%;
border: 1px solid #fff;
.nowPower_chart{
width: 100%;
height: 81%;
border: 1px solid #fff;
}
} }
.wendu_box{ .wendu_box{
display: flex; display: flex;
@ -177,10 +304,30 @@
.item{ .item{
width: 24%; width: 24%;
height: 48.5%; height: 48.5%;
background-color: #1ab394; padding: 0 10px;
border: 1px solid #1085B6;
&:first-child{ &:first-child{
margin-bottom: 8px; 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;
}
} }
} }
} }
@ -222,7 +369,7 @@
.dev_img{ .dev_img{
width: 50%; width: 50%;
height: 100%; height: 100%;
border: 1px solid #fff; //border: 1px solid #fff;
img{ img{
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -231,7 +378,27 @@
.dev_data{ .dev_data{
width: 50%; width: 50%;
height: 100%; height: 100%;
border: 1px solid #fff; //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{ .chart_box{

Write Preview
Loading…
Cancel
Save