|
|
@@ -4,7 +4,7 @@
|
|
|
<a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px' }">
|
|
|
<a-card
|
|
|
:loading="loading"
|
|
|
- :body-style="{ padding: '10px 8px 8px' }"
|
|
|
+ :body-style="{ padding: '0px 8px 8px' }"
|
|
|
class="topcard"
|
|
|
:bordered="false"
|
|
|
style="text-align: center"
|
|
|
@@ -51,7 +51,7 @@
|
|
|
<a-col :span="24">
|
|
|
<a-card
|
|
|
:loading="loading"
|
|
|
- :body-style="{ padding: '10px 8px 8px' }"
|
|
|
+ :body-style="{ padding: '5px 8px 8px' }"
|
|
|
class="topcard"
|
|
|
size="small"
|
|
|
:bordered="false"
|
|
|
@@ -60,42 +60,73 @@
|
|
|
<a-row>
|
|
|
<a-col :span="8">
|
|
|
<div class="head-info" :class="center && 'center'">
|
|
|
- <span>日发电量</span>
|
|
|
+ <div style="height:46px; width:130%; display: flex; align-items: center;">
|
|
|
+ <div style="height:50%; width:15%;" class="img4"></div>
|
|
|
+ <span>日发电量</span>
|
|
|
+ </div>
|
|
|
<p>{{ elecdetail.powerByDay }} kW·h</p>
|
|
|
+ <!-- <span>日发电量</span>
|
|
|
+ <p>{{ elecdetail.powerByDay }} kW·h</p> -->
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<a-col :span="8">
|
|
|
<div class="head-info" :class="center && 'center'">
|
|
|
- <span>月发电量</span>
|
|
|
- <p>{{ elecdetail.powerByMonth }} kW·h</p>
|
|
|
+ <div style="height:46px; width:130%; display: flex; align-items: center;">
|
|
|
+ <div style="height:50%; width:15%;" class="img5"></div>
|
|
|
+ <span>月发电量</span>
|
|
|
+ </div>
|
|
|
+ <p>{{elecdetail.powerByMonth}} kW·h</p>
|
|
|
+ <!-- <span>月发电量</span>
|
|
|
+ <p>{{ elecdetail.powerByMonth }} kW·h</p> -->
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<a-col :span="8">
|
|
|
<div class="head-info" :class="center && 'center'">
|
|
|
- <span>年发电量</span>
|
|
|
- <p>{{ elecdetail.powerByYear }} kW·h</p>
|
|
|
+ <div style="height:46px; width:130%; display: flex; align-items: center;">
|
|
|
+ <div style="height:50%; width:15%;" class="img6"></div>
|
|
|
+ <span>年发电量</span>
|
|
|
+ </div>
|
|
|
+ <p>{{elecdetail.powerByYear}} kW·h</p>
|
|
|
+ <!-- <span>年发电量</span>
|
|
|
+ <p>{{ elecdetail.powerByYear }} kW·h</p> -->
|
|
|
</div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-divider style="margin: 8px 0" />
|
|
|
+ <span class="leftHeader"></span>
|
|
|
<span class="head-title">收益信息</span>
|
|
|
<a-row>
|
|
|
<a-col :span="8">
|
|
|
<div class="head-info" :class="center && 'center'">
|
|
|
- <span>日收益</span>
|
|
|
- <p>{{ elecdetail.powerByDayProfit }} 元</p>
|
|
|
+ <div style="height:46px; width:130%; display: flex; align-items: center;">
|
|
|
+ <div style="height:50%; width:15%;" class="img7"></div>
|
|
|
+ <span>日收益</span>
|
|
|
+ </div>
|
|
|
+ <p>{{elecdetail.powerByDayProfit}} 元</p>
|
|
|
+ <!-- <span>日收益</span>
|
|
|
+ <p>{{ elecdetail.powerByDayProfit }} 元</p> -->
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<a-col :span="8">
|
|
|
<div class="head-info" :class="center && 'center'">
|
|
|
- <span>日收益</span>
|
|
|
- <p>{{ elecdetail.powerByMonthProfit }} 元</p>
|
|
|
+ <div style="height:46px; width:130%; display: flex; align-items: center;">
|
|
|
+ <div style="height:50%; width:15%;" class="img8"></div>
|
|
|
+ <span>月收益</span>
|
|
|
+ </div>
|
|
|
+ <p>{{elecdetail.powerByMonthProfit}} 元</p>
|
|
|
+ <!-- <span>月收益</span>
|
|
|
+ <p>{{ elecdetail.powerByMonthProfit }} 元</p> -->
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<a-col :span="8">
|
|
|
<div class="head-info" :class="center && 'center'">
|
|
|
- <span>年收益</span>
|
|
|
- <p>{{ elecdetail.powerByYearProfit }} 元</p>
|
|
|
+ <div style="height:46px; width:130%; display: flex; align-items: center;">
|
|
|
+ <div style="height:50%; width:15%;" class="img9"></div>
|
|
|
+ <span>年收益</span>
|
|
|
+ </div>
|
|
|
+ <p>{{elecdetail.powerByYearProfit}} 元</p>
|
|
|
+ <!-- <span>年收益</span>
|
|
|
+ <p>{{ elecdetail.powerByYearProfit }} 元</p> -->
|
|
|
</div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
@@ -130,18 +161,27 @@
|
|
|
<a-row>
|
|
|
<a-col :span="8">
|
|
|
<div class="head-info" :class="center && 'center'">
|
|
|
+ <div class="i fuzhao">
|
|
|
+ <div style="height:90%; width:90%;" class="img1"></div>
|
|
|
+ </div>
|
|
|
<span>辐照度</span>
|
|
|
<p>{{ envirInfo.irradiance }} {{ envirInfo.irradianceUnit }}</p>
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<a-col :span="8">
|
|
|
<div class="head-info" :class="center && 'center'">
|
|
|
+ <div class="i wenshi">
|
|
|
+ <div style="height:90%; width:90%;" class="img2"></div>
|
|
|
+ </div>
|
|
|
<span>环境温湿度</span>
|
|
|
<p>{{ envirInfo.temp }} {{ envirInfo.tempUnit }} / {{ envirInfo.humi }} {{ envirInfo.humiUnit }}</p>
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<a-col :span="8">
|
|
|
<div class="head-info" :class="center && 'center'">
|
|
|
+ <div class="i fengsu">
|
|
|
+ <div style="height:90%; width:90%;" class="img3"></div>
|
|
|
+ </div>
|
|
|
<span>风速</span>
|
|
|
<p>{{ envirInfo.windSpeed }} {{ envirInfo.windSpeedUnit }}</p>
|
|
|
</div>
|
|
|
@@ -325,7 +365,7 @@ export default {
|
|
|
// 刻度标签(数字)
|
|
|
axisLabel: {
|
|
|
// distance: 2,
|
|
|
- color: '#1FD09D',
|
|
|
+ color: '#B0B0B0',
|
|
|
},
|
|
|
// 仪表盘指针
|
|
|
pointer: {
|
|
|
@@ -563,7 +603,7 @@ export default {
|
|
|
position: relative;
|
|
|
text-align: center;
|
|
|
padding: 0 32px 0 0;
|
|
|
- min-width: 125px;
|
|
|
+ min-width: 15px;
|
|
|
|
|
|
&.center {
|
|
|
text-align: center;
|
|
|
@@ -575,10 +615,10 @@ export default {
|
|
|
display: inline-block;
|
|
|
font-size: 0.95rem;
|
|
|
line-height: 42px;
|
|
|
- margin-bottom: 4px;
|
|
|
+ margin-bottom: 1px;
|
|
|
}
|
|
|
p {
|
|
|
- line-height: 42px;
|
|
|
+ line-height: 32px;
|
|
|
margin: 0;
|
|
|
a {
|
|
|
font-weight: 600;
|
|
|
@@ -589,20 +629,93 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 300px;
|
|
|
}
|
|
|
+
|
|
|
+ .img1 {
|
|
|
+ background: url('../../../../assets/images/fuzhao.png') no-repeat center center;
|
|
|
+ background-size: 70%;
|
|
|
+ }
|
|
|
+ .img2 {
|
|
|
+ background: url('../../../../assets/images/wenshi.png') no-repeat center center;
|
|
|
+ margin-left: 5%;
|
|
|
+ background-size: 70%;
|
|
|
+ }
|
|
|
+ .img3 {
|
|
|
+ background: url('../../../../assets/images/fengsu.png') no-repeat center center;
|
|
|
+ background-size: 70%;
|
|
|
+ }
|
|
|
+ .img4 {
|
|
|
+ background: url('../../../../assets/images/Rd.png') no-repeat center center;
|
|
|
+ background-size: 70%;
|
|
|
+ margin-left: 10%;
|
|
|
+ margin-right: 1%;
|
|
|
+ }
|
|
|
+ .img5 {
|
|
|
+ background: url('../../../../assets/images/Yd.png') no-repeat center center;
|
|
|
+ background-size: 70%;
|
|
|
+ margin-left: 9%;
|
|
|
+ margin-right: 1%;
|
|
|
+ }
|
|
|
+ .img6 {
|
|
|
+ background: url('../../../../assets/images/Nd.png') no-repeat center center;
|
|
|
+ background-size: 70%;
|
|
|
+ margin-left: 9%;
|
|
|
+ margin-right: 1%;
|
|
|
+ }
|
|
|
+ .img7 {
|
|
|
+ background: url('../../../../assets/images/Rs.png') no-repeat center center;
|
|
|
+ background-size: 80%;
|
|
|
+ margin-left: 15%;
|
|
|
+ // margin-right: 1%;
|
|
|
+ }
|
|
|
+ .img8 {
|
|
|
+ background: url('../../../../assets/images/Ys.png') no-repeat center center;
|
|
|
+ background-size: 80%;
|
|
|
+ margin-left: 13%;
|
|
|
+ margin-right: 1%;
|
|
|
+ }
|
|
|
+ .img9 {
|
|
|
+ background: url('../../../../assets/images/Ns.png') no-repeat center center;
|
|
|
+ background-size: 80%;
|
|
|
+ margin-left: 13%;
|
|
|
+ margin-right: 1%;
|
|
|
+ }
|
|
|
+ .i{
|
|
|
+ font-size: 2vw;
|
|
|
+ border-radius: 100%;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ // text-align: center;
|
|
|
+ // line-height: 60px;
|
|
|
+ }
|
|
|
+ .fuzhao{
|
|
|
+ margin: 15% 0 7% 22%;
|
|
|
+ background-image: linear-gradient(240deg, #5eb2f77c, #8998F6);
|
|
|
+ }
|
|
|
+ .wenshi{
|
|
|
+ margin: 15% 0 7% 22%;
|
|
|
+ background-image: linear-gradient(240deg, #e5beff, #C680FD);
|
|
|
+ }
|
|
|
+ .fengsu{
|
|
|
+ margin: 15% 0 7% 22%;
|
|
|
+ background-image: linear-gradient(240deg, #56E2CE, #07B79F);
|
|
|
+ }
|
|
|
}
|
|
|
.head-title {
|
|
|
font-size: 15px;
|
|
|
- margin-left: 20px;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
.totalEle-trend {
|
|
|
height: 220px;
|
|
|
}
|
|
|
.topcard {
|
|
|
- height: 295px;
|
|
|
+ height: 245px;
|
|
|
}
|
|
|
.middlecard {
|
|
|
- height: 280px;
|
|
|
+ height: 245px;
|
|
|
}
|
|
|
// 三色灯
|
|
|
.tri-colorLight {
|
|
|
@@ -642,9 +755,16 @@ export default {
|
|
|
float: left;
|
|
|
}
|
|
|
.item-title {
|
|
|
+ width: 100%;
|
|
|
font-size: 18px;
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
font-weight: bold;
|
|
|
+ background-color: #E5F6F4;
|
|
|
+ color: #666666;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
}
|
|
|
.item-cc {
|
|
|
float: right;
|
|
|
@@ -659,6 +779,14 @@ export default {
|
|
|
margin: 10px 6px;
|
|
|
}
|
|
|
}
|
|
|
+.leftHeader{
|
|
|
+ height: 100%;
|
|
|
+ // width: 100%;
|
|
|
+ // background-image: linear-gradient(150deg, #01ADA8, #80D6D3);
|
|
|
+ border: 2px solid #01ADA8;
|
|
|
+ margin-left: 2%;
|
|
|
+ // margin-right: 3%;
|
|
|
+}
|
|
|
::v-deep .ant-card{
|
|
|
border-radius: 5px;
|
|
|
box-shadow: -1px 0 2px rgba(180, 180, 180, 0.156), /*左侧阴影*/
|
wyh
