光伏综合看板优化

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

@@ -11,10 +11,11 @@
             >
               <div class="chart-card-header">
                 <div class="meta">
-                  <span class="chart-card-title">电站数量</span>
+                  <div class="img"></div>
+                  <span class="chart-card-title" style="display: flex; align-items: center;">电站数量</span>
                 </div>
                 <div class="total">
-                  <span>2 个</span>
+                  <span style="display: flex; align-items: center;">2 个</span>
                 </div>
               </div>
             </a-card>
@@ -27,10 +28,11 @@
             >
               <div class="chart-card-header">
                 <div class="meta">
-                  <span class="chart-card-title">电站装机容量</span>
+                  <div class="img2"></div>
+                  <span class="chart-card-title" style="display: flex; align-items: center;">电站装机容量</span>
                 </div>
                 <div class="total">
-                  <span>{{elecdetail.fInstalledCapacity}} kW</span>
+                  <span style="display: flex; align-items: center;">{{elecdetail.fInstalledCapacity}} kW</span>
                 </div>
               </div>
             </a-card>
@@ -43,10 +45,11 @@
             >
               <div class="chart-card-header">
                 <div class="meta">
-                  <span class="chart-card-title">当前发电功率</span>
+                  <div class="img3"></div>
+                  <span class="chart-card-title" style="display: flex; align-items: center;">当前发电功率</span>
                 </div>
                 <div class="total">
-                  <span>{{elecdetail.realGeneratingPower}} kwh</span>
+                  <span style="display: flex; align-items: center;">{{elecdetail.realGeneratingPower}} kwh</span>
                 </div>
               </div>
             </a-card>
@@ -63,47 +66,93 @@
         <a-row>
           <a-col :span="24">
             <a-card :loading="loading" :body-style="{ padding: '10px 8px 8px' }" :bordered="false">
+              <span class="leftHeader"></span>
               <span class="head-title">发电量信息</span>
               <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>
+                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByDay}} kW·h</p>
                   </div>
                 </a-col>
                 <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="img5"></div>
+                      <span>月发电量</span>
+                    </div>
+                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByMonth}} kW·h</p>
                   </div>
+                  <!-- <div class="head-info" :class="center && 'center'">
+                    <span>月发电量</span>
+                    <p>{{elecdetail.powerByMonth}} kW·h</p>
+                  </div> -->
                 </a-col>
                 <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="img6"></div>
+                      <span>年发电量</span>
+                    </div>
+                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByYear}} kW·h</p>
                   </div>
+                  <!-- <div class="head-info" :class="center && 'center'">
+                    <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>
+                    <div style="height:46px; width:130%; display: flex; align-items: center;">
+                      <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'">
+                    <span>日收益</span>
+                    <p>{{elecdetail.powerByDayProfit}} 元</p>
+                  </div> -->
                 </a-col>
                 <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="img8"></div>
+                      <span>月收益</span>
+                    </div>
+                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByMonthProfit}} 元</p>
                   </div>
+                  <!-- <div class="head-info" :class="center && 'center'">
+                    <span>月收益</span>
+                    <p>{{elecdetail.powerByMonthProfit}} 元</p>
+                  </div> -->
                 </a-col>
                 <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="img9"></div>
+                      <span>年收益</span>
+                    </div>
+                    <!-- <span>日发电量</span> -->
                     <p>{{elecdetail.powerByYearProfit}} 元</p>
                   </div>
+                  <!-- <div class="head-info" :class="center && 'center'">
+                    <span>年收益</span>
+                    <p>{{elecdetail.powerByYearProfit}} 元</p>
+                  </div> -->
                 </a-col>
               </a-row>
             </a-card>
@@ -114,9 +163,10 @@
             :loading="loading"
             :body-style="{ padding: '10px 8px 8px' }"
             :bordered="false"
-            title="当年社会效益"
-            style="margin-top: 12px"
+            style="margin-top: 12px;height:266px;"
           >
+            <span class="leftHeader"></span>
+            <span class="head-title">当年社会效益</span>
             <div class="chart-card-header">
               <div class="societyTree">
                 <div class="societyTreeFont Cleft">
@@ -133,11 +183,12 @@
         </a-row>
         <a-row>
           <a-card
-            :body-style="{ padding: '0px 8px 8px' }"
+            :body-style="{ padding: '10px 8px 8px' }"
             :bordered="false"
-            title="年发电量"
             style="margin-top: 12px;height:300px;"
           >
+            <span class="leftHeader"></span>
+            <span class="head-title">年发电量</span>
             <div class="totalEle-trend" ref="yearElec"></div>
           </a-card>
         </a-row>
@@ -206,18 +257,58 @@ export default {
       var option
 
       option = {
+        grid: {
+          top: '25%',
+          left: '15%',
+          // right: '2%',
+          // bottom: '14%',
+        },
+        toolbox: {
+          show: true,
+          feature: {
+              mark: {show: true},
+              saveAsImage: {show: true},
+          }
+        },
         xAxis: {
           type: 'category',
           data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          axisLine: {
+              lineStyle: {
+                  color: '#3FA7DA',
+              },
+          },
+          axisLabel: {
+              textStyle: {
+                  color: '#3FA7DA',
+                  fontSize: 12,
+              },
+          },
         },
         yAxis: {
           type: 'value',
           name: '电量(kW·h)',
+          axisLine: {
+              lineStyle: {
+                  color: '#3FA7DA',
+              },
+          },
+          axisLabel: {
+              textStyle: {
+                  color: '#3FA7DA',
+                  fontSize: 12,
+              },
+          },
         },
         series: [
           {
             data: _this.yearElecList,
             type: 'bar',
+            itemStyle: {
+                        normal: {
+                            color: '#1FD09D'
+                        },
+                    },
           },
         ],
       }
@@ -234,22 +325,52 @@ export default {
 
 <style lang="less" scoped>
 .chart-card-header {
-  position: relative;
-  overflow: hidden;
+  // position: relative;
+  // overflow: hidden;
   width: 100%;
   height: 50px;
+  // border: 1px solid #148cb1;
 
   .meta {
-    position: relative;
-    overflow: hidden;
-    //   width: 100%;
+    // position: relative;
+    // overflow: hidden;
+      width: 52%;
+      height: 100%;
+    // border: 1px solid #148cb1;
     color: #ffffff;
     font-size: 20px;
-    line-height: 38px;
+    // line-height: 40px;
     float: left;
+    display: flex;
+    // justify-items: center;
+  }
+
+  .img {
+    width: 40%;
+    background: url('../../../../assets/images/dianZhan.png') no-repeat center center;
+    background-size: 68%;
+  }
+  .img2 {
+    width: 40%;
+    background: url('../../../../assets/images/dianRong.png') no-repeat center center;
+    background-size: 70%;
+  }
+  .img3 {
+    width: 40%;
+    background: url('../../../../assets/images/gongLv.png') no-repeat center center;
+    background-size: 70%;
   }
 }
 
+.leftHeader{
+  height: 100%;
+  // width: 100%;
+  // background-image: linear-gradient(150deg, #01ADA8, #80D6D3);
+  border: 2px solid #01ADA8;
+  margin-left: 2%;
+  margin-right: 3%;
+}
+
 .chart-card-action {
   cursor: pointer;
   position: absolute;
@@ -295,10 +416,11 @@ export default {
   white-space: nowrap;
   color: #ffffff;
   // margin-top: 4px;
-  margin-bottom: 0;
+  // margin-bottom: 0;
   font-size: 30px;
-  line-height: 38px;
-  height: 38px;
+  // line-height: 38px;
+  // height: 38px;
+  height: 100%;
   float: right;
 }
 .circle-cust {
@@ -326,6 +448,8 @@ export default {
   text-align: center;
   padding: 0 32px 0 0;
   min-width: 125px;
+  height: 100%;
+  // border: 1px solid #148cb1;
 
   &.center {
     text-align: center;
@@ -338,10 +462,12 @@ export default {
     font-size: 0.95rem;
     line-height: 42px;
     margin-bottom: 4px;
+    // font-weight: bold;
   }
   p {
     line-height: 42px;
-    margin: 0;
+    margin: 0 0 0 5%;
+    font-weight: bold;
     a {
       font-weight: 600;
       font-size: 1rem;
@@ -351,6 +477,42 @@ export default {
     width: 100%;
     height: 300px;
   }
+  .img4 {
+    background: url('../../../../assets/images/Rd.png') no-repeat center center;
+    background-size: 90%;
+    margin-left: 10%;
+    margin-right: 3%;
+  }
+  .img5 {
+    background: url('../../../../assets/images/Yd.png') no-repeat center center;
+    background-size: 90%;
+    margin-left: 3%;
+    margin-right: 3%;
+  }
+  .img6 {
+    background: url('../../../../assets/images/Nd.png') no-repeat center center;
+    background-size: 90%;
+    margin-left: 3%;
+    margin-right: 3%;
+  }
+  .img7 {
+    background: url('../../../../assets/images/Rs.png') no-repeat center center;
+    background-size: 90%;
+    margin-left: 10%;
+    margin-right: 2%;
+  }
+  .img8 {
+    background: url('../../../../assets/images/Ys.png') no-repeat center center;
+    background-size: 90%;
+    margin-left: 4%;
+    margin-right: 3%;
+  }
+  .img9 {
+    background: url('../../../../assets/images/Ns.png') no-repeat center center;
+    background-size: 90%;
+    margin-left: 4%;
+    margin-right: 3%;
+  }
 }
 .head-title {
   font-size: 18px;
@@ -374,11 +536,11 @@ export default {
     }
   }
   .Cleft {
-    top: 74%;
+    top: 63%;
     left: 22%;
   }
   .Cright {
-    top: 62%;
+    top: 52%;
     left: 46%;
     font-size: 14px;
   }