电站运行监控优化

src/views/module_ems/photovoltaic/pvDashboard/index.vue

@@ -75,7 +75,6 @@
                       <div style="height:50%; width:15%;" class="img4"></div>
                       <span>日发电量</span>
                     </div>
-                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByDay}} kW·h</p>
                   </div>
                 </a-col>
@@ -85,7 +84,6 @@
                       <div style="height:50%; width:15%;" class="img5"></div>
                       <span>月发电量</span>
                     </div>
-                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByMonth}} kW·h</p>
                   </div>
                   <!-- <div class="head-info" :class="center && 'center'">
@@ -99,7 +97,6 @@
                       <div style="height:50%; width:15%;" class="img6"></div>
                       <span>年发电量</span>
                     </div>
-                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByYear}} kW·h</p>
                   </div>
                   <!-- <div class="head-info" :class="center && 'center'">
@@ -118,7 +115,6 @@
                       <div style="height:50%; width:15%;" class="img7"></div>
                       <span>日收益</span>
                     </div>
-                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByDayProfit}} 元</p>
                   </div>
                   <!-- <div class="head-info" :class="center && 'center'">
@@ -132,7 +128,6 @@
                       <div style="height:50%; width:15%;" class="img8"></div>
                       <span>月收益</span>
                     </div>
-                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByMonthProfit}} 元</p>
                   </div>
                   <!-- <div class="head-info" :class="center && 'center'">
@@ -146,7 +141,6 @@
                       <div style="height:50%; width:15%;" class="img9"></div>
                       <span>年收益</span>
                     </div>
-                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByYearProfit}} 元</p>
                   </div>
                   <!-- <div class="head-info" :class="center && 'center'">

src/views/module_ems/photovoltaic/stationMonitor/index.vue

@@ -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), /*左侧阴影*/