逆变器运行监控优化

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

@@ -7,17 +7,31 @@
             <div class="item-content" ref="itemFlexDiv" cl>
               <!-- <div class="item-title">{{ invInfo[0].fInvertername }}</div> -->
               <div style="width: 100%">
-                <div class="item-inv"></div>
-                <div class="item-cc">
-                  <div class="item-title"></div>
-                  <!-- <div>厂家：{{ invInfo[0].fManufacturername }}</div>
-                <div>设备型号：{{ invInfo[0].fProductmodel }}</div>
-                <div>状态：{{ invInfo[0].state }}</div>
-                <div>额定交流功率：{{ invInfo[0].fRatedoutputpower }} kW</div>
-                <div>实时发电功率：{{ invInfo[0].realGeneratingPower }} kW</div>
-                <div>当日发电量：{{ invInfo[0].powerByDay }} kW·h</div>
-                <div>组件峰值功率：{{ invInfo[0].fComponentpeakpower }} kWp</div> -->
-                </div>
+                <a-row :gutter="24">
+                  <a-col :span="12">
+                    <div class="item-inv"></div>
+                  </a-col>
+                  <a-col :span="12">
+                    <div style="text-align: left;">
+                      <span>并网电价：{{ stationInfo.fSubsidyprice }} 元/kW·h</span>
+                    </div>
+                    <div style="text-align: left">
+                      <span>电站装机容量：{{ stationInfo.fInstalledcapacity }} kW</span>
+                    </div>
+                    <div style="text-align: left">
+                      <span>逆变器数量：{{ stationInfo.inverterNum }} 个</span>
+                    </div>
+                    <div style="text-align: left">
+                      <span>并网电压：{{ stationInfo.fGridvoltage }} V</span>
+                    </div>
+                    <div style="text-align: left">
+                      <span>年利用小时数：{{ elecdetail.effectiveHours }} h</span>
+                    </div>
+                    <div style="text-align: left">
+                      <span>总发电量：{{ totalEpiValue }} kWh</span>
+                    </div>
+                  </a-col>
+                </a-row>
               </div>
             </div>
           </div>
@@ -38,18 +52,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>{{ elecdetail.powerByDay }} kW·h</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>{{ elecdetail.powerByMonth }} kW·h</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>{{ elecdetail.powerByYear }} kW·h</p>
                   </div>
@@ -72,18 +95,27 @@
             <a-row>
               <a-col :span="8">
                 <div class="head-info" :class="center && 'center'">
+                  <div class="i rs">
+                    <div style="height:90%; width:90%;" class="img4"></div>
+                  </div>
                   <span>日收益</span>
                   <p>{{ elecdetail.powerByDayProfit }} 元</p>
                 </div>
               </a-col>
               <a-col :span="8">
                 <div class="head-info" :class="center && 'center'">
-                  <span>日收益</span>
+                  <div class="i ys">
+                    <div style="height:90%; width:90%;" class="img5"></div>
+                  </div>
+                  <span>月收益</span>
                   <p>{{ elecdetail.powerByMonthProfit }} 元</p>
                 </div>
               </a-col>
               <a-col :span="8">
                 <div class="head-info" :class="center && 'center'">
+                  <div class="i ns">
+                    <div style="height:90%; width:90%;" class="img6"></div>
+                  </div>
                   <span>年收益</span>
                   <p>{{ elecdetail.powerByYearProfit }} 元</p>
                 </div>
@@ -339,10 +371,59 @@ export default {
               show: true,
             },
             detail: {
+              // 仪表盘展示文字
+              // show: false,
               formatter: '{value}',
+              fontSize: '18',
+              color: "#838383"
             },
             radius: '100%', // 仪表盘放大/缩小
-            axisLine: { lineStyle: { width: 5 } }, // 修改线段宽度
+            // axisLine: { lineStyle: { width: 5 } }, // 修改线段宽度
+            axisLine: { lineStyle: {
+                color: [[1, '#1FD09D']],
+                width: 10
+            } },
+            axisLabel: {
+                textStyle: {
+                    color: "#1FD09D"
+                }
+            },
+            // 分隔线
+              splitLine: {
+                show: true,
+                // 这里刻度线长短
+                // length: 12,
+                lineStyle: {
+                  width: 2,
+                  color: '#1FD09D'
+                }
+              },
+              // 刻度线
+              axisTick: {
+                show: true,
+                splitNumber: 5,
+                length: 10,
+                lineStyle: {
+                  color: '#B0B0B0',
+                  width: 1,
+                },
+              },
+              // 刻度标签(数字)
+              axisLabel: {
+                // distance: 2,
+                fontSize: '10',
+                color: '#B0B0B0',
+              },
+              // 仪表盘指针
+              pointer: {
+                show: true,
+                length: '65%',
+                width: 5 // 指针粗细
+              },
+              // 仪表盘指针样式
+              itemStyle: {
+                color: '#1FD09D',
+              },
             data: [
               {
                 value: _this.stationInfo.realPower,
@@ -418,7 +499,7 @@ export default {
             symbol: 'none',
             sampling: 'lttb',
             itemStyle: {
-              color: '#91CC75',
+              color: '#2FC9CB',
             },
             markPoint: {
               data: [
@@ -435,7 +516,7 @@ export default {
             sampling: 'lttb',
             yAxisIndex: 1, // 依据哪儿个y周坐标显示数据
             itemStyle: {
-              color: '#EE6666',
+              color: '#B6A2DE',
             },
             markPoint: {
               data: [
@@ -566,7 +647,7 @@ export default {
     margin-bottom: 4px;
   }
   p {
-    line-height: 42px;
+    line-height: 38px;
     margin: 0;
     a {
       font-weight: 600;
@@ -577,6 +658,67 @@ export default {
     width: 100%;
     height: 300px;
   }
+
+  .img1 {
+    background: url('../../../../assets/images/rf2.png') no-repeat center center;
+    background-size: 70%;
+  }
+  .img2 {
+    background: url('../../../../assets/images/yf2.png') no-repeat center center;
+    background-size: 70%;
+  }
+  .img3 {
+    background: url('../../../../assets/images/nf2.png') no-repeat center center;
+    background-size: 70%;
+  }
+  .img4 {
+    background: url('../../../../assets/images/rs2.png') no-repeat center center;
+    background-size: 70%;
+  }
+  .img5 {
+    background: url('../../../../assets/images/ys2.png') no-repeat center center;
+    background-size: 70%;
+  }
+  .img6 {
+    background: url('../../../../assets/images/ns2.png') no-repeat center center;
+    background-size: 70%;
+  }
+  
+  .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);
+  }
+  .rs{
+    margin: 15% 0 7% 22%;
+    background-image: linear-gradient(240deg, #92e2fc, #43A3F7);
+  }
+  .ys{
+    margin: 15% 0 7% 22%;
+    background-image: linear-gradient(240deg, #6fe69c, #2ACAA1);
+  }
+  .ns{
+    margin: 15% 0 7% 22%;
+    background-image: linear-gradient(240deg, #fdcb4a, #FCA413);
+  }
 }
 .head-title {
   font-size: 15px;