增加电站监控界面

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

@@ -2,30 +2,36 @@
   <div class="page-header-index-wide">
     <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px' }">
-        <a-card :loading="loading" :body-style="{ padding: '10px 8px 8px' }" :bordered="false" style="height: 295px;text-align: center;">
+        <a-card
+          :loading="loading"
+          :body-style="{ padding: '10px 8px 8px' }"
+          class="topcard"
+          :bordered="false"
+          style="text-align: center"
+        >
           <a-row :gutter="24">
             <a-col :span="12">
               <div class="totalEle-trend" ref="realPowerChart"></div>
-              <span style="margin-top: 120px;">实时发电功率(kW)</span>
+              <span style="margin-top: 120px">实时发电功率(kW)</span>
             </a-col>
             <a-col :span="12">
-              <div class="head-info" style="text-align:left;margin-top:30px;">
-                <span style="line-height: 32px;">并网电价：0.67 元/kW·h</span>
+              <div class="head-info" style="text-align: left; margin-top: 30px">
+                <span style="line-height: 32px">并网电价：{{ stationInfo.fSubsidyprice }} 元/kW·h</span>
               </div>
-              <div class="head-info" style="text-align:left;">
-                <span style="line-height: 32px;">电站装机容量：121 kW</span>
+              <div class="head-info" style="text-align: left">
+                <span style="line-height: 32px">电站装机容量：{{ stationInfo.fInstalledcapacity }} kW</span>
               </div>
-              <div class="head-info" style="text-align:left;">
-                <span style="line-height: 32px;">逆变器数量：4 个</span>
+              <div class="head-info" style="text-align: left">
+                <span style="line-height: 32px">逆变器数量：{{ stationInfo.inverterNum }} 个</span>
               </div>
-              <div class="head-info" style="text-align:left;">
-                <span style="line-height: 32px;">并网电压：380 V</span>
+              <div class="head-info" style="text-align: left">
+                <span style="line-height: 32px">并网电压：{{ stationInfo.fGridvoltage }} V</span>
               </div>
-              <div class="head-info" style="text-align:left;">
-                <span style="line-height: 32px;">年利用小时数：49.27 h</span>
+              <div class="head-info" style="text-align: left">
+                <span style="line-height: 32px">年利用小时数：{{ elecdetail.effectiveHours }} h</span>
               </div>
-              <div class="head-info" style="text-align:left;">
-                <span style="line-height: 32px;">总发电量：380091.47 kWh</span>
+              <div class="head-info" style="text-align: left">
+                <span style="line-height: 32px">总发电量：{{ totalEpiValue }} kWh</span>
               </div>
             </a-col>
           </a-row>
@@ -35,7 +41,13 @@
       <a-col :sm="24" :md="12" :xl="8" :style="{ padding: '0px 12px 0px 0px' }">
         <a-row>
           <a-col :span="24">
-            <a-card :loading="loading" :body-style="{ padding: '10px 8px 8px' }" :bordered="false" title="发电量信息">
+            <a-card
+              :loading="loading"
+              :body-style="{ padding: '10px 8px 8px' }"
+              class="topcard"
+              :bordered="false"
+              title="发电量信息"
+            >
               <a-row>
                 <a-col :span="8">
                   <div class="head-info" :class="center && 'center'">
@@ -83,13 +95,89 @@
         </a-row>
       </a-col>
       <a-col :sm="24" :md="12" :xl="8" :style="{ padding: '0px 12px 0px 0px' }">
-        <a-row> </a-row>
+        <a-row>
+          <a-card
+            :loading="loading"
+            :body-style="{ padding: '10px 8px 8px' }"
+            class="topcard"
+            :bordered="false"
+            title="视频监控"
+          >
+          </a-card>
+        </a-row>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :sm="24" :md="12" :xl="8" :style="{ padding: '0px 16px 0px 0px' }">
+        <a-card
+          :loading="loading"
+          :body-style="{ padding: '10px 8px 8px' }"
+          class="middlecard"
+          :bordered="false"
+          title="气象信息"
+        >
+          <a-row>
+            <a-col :span="8">
+              <div class="head-info" :class="center && 'center'">
+                <span>辐照度</span>
+                <p>{{ envirInfo.irradiance }} {{ envirInfo.irradianceUnit }}</p>
+              </div>
+            </a-col>
+            <a-col :span="8">
+              <div class="head-info" :class="center && 'center'">
+                <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'">
+                <span>风速</span>
+                <p>{{ envirInfo.windSpeed }} {{ envirInfo.windSpeedUnit }}</p>
+              </div>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :sm="24" :md="12" :xl="16">
+        <a-card
+          :body-style="{ padding: '0px 8px 8px' }"
+          class="middlecard"
+          :bordered="false"
+          title="功率及发电量趋势"
+          style="margin-left: -4px"
+        >
+          <div class="totalEle-trend" ref="powerChart"></div>
+        </a-card>
       </a-col>
     </a-row>
     <a-row>
-      <a-card :body-style="{ padding: '0px 8px 8px' }" :bordered="false" title="年发电量" style="height: 300px">
-        <div class="totalEle-trend" ref="yearElec"></div>
-      </a-card>
+      <a-col :sm="24" :md="12" :xl="24" :style="{ padding: '12px 0px 0px 0px' }">        
+        <div class="tri-colorLight" ref="flexDivGroup">
+          <div class="item-title">逆变器信息</div>
+          <a-divider style="margin: 8px 0" />
+          <div class="item-content" ref="itemFlexDiv" v-for="(item, index) in invInfo" :key="index" cl>
+            <div class="item-title">{{ item.fInvertername }}</div>
+            <div class="item-title"></div>
+            <div>厂家：{{ item.fManufacturername }}</div>
+            <div>设备型号：{{ item.fProductmodel }}</div>
+            <div>状态：{{ item.state }}</div>
+            <div>额定交流功率：{{ item.fRatedoutputpower }} kW</div>
+            <div>实时发电功率：{{ item.realGeneratingPower }} kW</div>
+            <div>当日发电量：{{ item.powerByDay }} kW·h</div>
+            <div>组件峰值功率：{{ item.fComponentpeakpower }} kWp</div>
+            <router-link :to="'/equipment/info/detail/' + item.fInverterid">
+              <!-- <router-link :to="'/system/dict-data/index/' + item.equipmentid"> -->
+              <a-button type="success" plain style="margin-top: 10px"
+                >查看详情
+              </a-button>
+            </router-link>
+          </div>
+          <!-- 优化布局 -->
+          <!-- <div ref="completion" v-for="item in completionNumber" :key="'com' + item" class="completion"></div> -->
+        </div>
+        <!-- <a-card :loading="loading" :body-style="{ padding: '10px 8px 8px' }" :bordered="false" title="逆变器信息">
+        </a-card> -->
+      </a-col>
     </a-row>
   </div>
 </template>
@@ -106,8 +194,14 @@ export default {
     return {
       loading: true,
       center: null,
-      elecdetail: {},
-      yearElecList: {},
+      elecdetail: {}, // 发电量信息
+      envirInfo: {}, // 气象信息
+      invInfo: [], // 逆变器信息
+      stationInfo: {}, // 电站信息
+      totalEpiValue: 0, // 总发电量
+      times: [], // 功率及发电量趋势-时间
+      powers: [], // 功率及发电量趋势-功率
+      irradiances: [], // 功率及发电量趋势-辐照强度
     }
   },
   created() {
@@ -125,34 +219,49 @@ export default {
   },
   methods: {
     getTest() {
-      var listData = pvdata.pvDashboardData
+      var listData = pvdata.stationMonitorData
       console.log(listData)
-      this.elecdetail = listData.elecdetail
-      this.yearElecList = listData.yearElecList
+      this.totalEpiValue = listData.totalEpiValue
+      this.elecdetail = pvdata.pvDashboardData.elecdetail
+      this.envirInfo = listData.envirInfo
+      this.invInfo = listData.invInfo
+      this.stationInfo = listData.stationInfo
+      listData.dayPowerValue.forEach((i) => {
+        this.times.push(i.fTime)
+        this.powers.push(i.fP)
+        this.irradiances.push(i.irradianceValue)
+      })
 
       this.initRealPowerChart()
+      this.initPowerChart()
     },
     initRealPowerChart() {
       var _this = this
       var chartDom = _this.$refs.realPowerChart
       var myChart = echarts.init(chartDom)
-      var option
 
-      option = {
+      var option = {
         tooltip: {
           formatter: '{a} <br/>{b} : {c}%',
         },
         series: [
           {
-            name: '实时发电功率(kW)',
+            name: 'Pressure',
             type: 'gauge',
+            min: 0,
+            max: 30,
+            progress: {
+              show: true,
+            },
             detail: {
               formatter: '{value}',
             },
+            radius: '100%', // 仪表盘放大/缩小
+            axisLine: { lineStyle: { width: 5 } }, // 修改线段宽度
             data: [
               {
-                value: 50,
-                name: 'kW',
+                value: _this.stationInfo.realPower,
+                name: '功率',
               },
             ],
           },
@@ -165,6 +274,89 @@ export default {
         myChart.resize()
       })
     },
+    initPowerChart() {
+      var _this = this
+      var chartDom = _this.$refs.powerChart
+      var myChart = echarts.init(chartDom)
+
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          position: function (pt) {
+            return [pt[0], '20%']
+          },
+        },
+        legend: {
+          data: ['功率', '辐照度'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: _this.times,
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '功率',
+            boundaryGap: [0, '30%'],
+          },
+          {
+            type: 'value',
+            name: '辐照度',
+            boundaryGap: [0, '30%'],
+          },
+        ],
+        // dataZoom: [
+        //   {
+        //     type: 'inside',
+        //     start: 0,
+        //     end: 100,
+        //     xAxisIndex: 0,
+        //   },
+        //   {
+        //     start: 0,
+        //     end: 10,
+        //   },
+        //   {
+        //     show: true,
+        //     yAxisIndex: 0,
+        //     filterMode: "empty",
+        //     width: 30,
+        //     height: "80%",
+        //     right: "7%",
+        //   },
+        // ],
+        series: [
+          {
+            name: '功率',
+            type: 'line',
+            symbol: 'none',
+            sampling: 'lttb',
+            itemStyle: {
+              color: '#91CC75',
+            },
+            data: _this.powers,
+          },
+          {
+            name: '辐照度',
+            type: 'line',
+            symbol: 'none',
+            sampling: 'lttb',
+            yAxisIndex: 1, // 依据哪儿个y周坐标显示数据
+            itemStyle: {
+              color: '#EE6666',
+            },
+            data: _this.irradiances,
+          },
+        ],
+      }
+
+      option && myChart.setOption(option)
+
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    },
   },
 }
 </script>
@@ -290,10 +482,79 @@ export default {
   }
 }
 .head-title {
-  font-size: 18px;
+  font-size: 15px;
+  margin-left: 20px;
 }
 
 .totalEle-trend {
   height: 220px;
 }
+.topcard {
+  height: 295px;
+}
+.middlecard {
+  height: 280px;
+}
+  // 三色灯
+  .tri-colorLight {
+    display: flex;
+    background: #fff;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    // width: 20%;
+    .item-container {
+      padding: 10px;
+      box-sizing: border-box;
+    }
+    .item-content {
+      width: 254px;
+      border: 2px solid #314977;
+      color: #63b4ca;
+      // padding: 16px 50px 20px;
+      padding-top: 16px;
+      padding-bottom: 20px;
+      margin: 10px 6px;
+      box-shadow: 0 2px 10px 2px rgba(59, 78, 128, 0.5) inset;
+      text-align: center;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .item-title {
+        font-weight: bold;
+      }
+      .light-con {
+        margin-top: 20px;
+        display: flex;
+      }
+      .item-light {
+        width: 20px;
+        height: 20px;
+        border-radius: 100%;
+        margin: 0 15px;
+        background: #7c7ea6;
+      }
+      .green {
+        background-color: #0df708;
+        box-shadow: 0 0 18px 6px rgba(13, 247, 8, 0.5);
+      }
+      .yellow {
+        background-color: #f8fa12;
+        box-shadow: 0 0 18px 6px rgba(248, 250, 18, 0.5);
+      }
+      .red {
+        background-color: #fb0301;
+        box-shadow: 0 0 18px 6px rgba(251, 3, 1, 0.5);
+      }
+    }
+    .item_content_rad {
+      border-radius: 18px;
+    }
+    .completion {
+      width: 254px;
+      margin: 10px 6px;
+    }
+  }
 </style>