场站监视模块完成

src/components/chart/bar/multiple-bar-chart.vue

@@ -167,7 +167,7 @@ export default {
       default: () => ["(万KWh)", "(风速)"],
     },
   },
-  data() {
+  data () {
     return {
       id: "",
       chart: null,
@@ -175,17 +175,17 @@ export default {
     };
   },
   computed: {
-    datas() {
+    datas () {
       return this.list.map((t) => {
         return t.value;
       });
     },
-    xdata() {
+    xdata () {
       return this.list[0].value.map((t) => {
         return t.text;
       });
     },
-    ydata() {
+    ydata () {
       let result = [];
       this.units.forEach((value, index) => {
         let data = null;
@@ -225,7 +225,7 @@ export default {
 
       return result;
     },
-    series() {
+    series () {
       let result = [];
       this.list.forEach((value, index) => {
         result.push({
@@ -242,7 +242,7 @@ export default {
     },
   },
   methods: {
-    initChart() {
+    initChart () {
       let option = {
         color: this.color,
         tooltip: {
@@ -252,7 +252,7 @@ export default {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function(param) {
+          formatter: function (param) {
             return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
           },
         },
@@ -281,17 +281,24 @@ export default {
       this.chart.setOption(option);
     },
   },
-  created() {
-    this.id = "pie-chart-" + util.newGUID();
+  created () {
+    this.$nextTick(() => {
+      this.id = "pie-chart-" + util.newGUID();
+    });
   },
-  mounted() {
-    this.$el.style.width = this.width;
-    this.$el.style.height = this.height;
-    this.chart = echarts.init(this.$el);
-    this.initChart();
+  mounted () {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
+
   },
-  updated() {
-    this.initChart();
+  updated () {
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

src/components/chart/line/multiple-line-chart.vue

@@ -351,20 +351,26 @@ export default {
         series: this.series,
       };
 
-      this.chart.setOption(option);
+      this.chart && option && this.chart.setOption(option);
     },
   },
   created () {
-    this.id = "pie-chart-" + util.newGUID();
+    this.$nextTick(() => {
+      this.id = "pie-chart-" + util.newGUID();
+    });
   },
   mounted () {
-    this.$el.style.width = this.width;
-    this.$el.style.height = this.height;
-    this.chart = echarts.init(this.$el);
-    this.initChart();
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
   },
   updated () {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

src/router/index.js

@@ -23,7 +23,7 @@ const routes = [
     component: () => import(/* webpackChunkName: "agc" */ '../views/Agc/Agc.vue'),
   },
   {
-    path: '/windsite',
+    path: '/windsite', // 场站监视
     name: 'WindSite',
     component: () => import(/* webpackChunkName: "windsite" */ '../views/WindSite/WindSite.vue'),
     children: [{

src/views/Status/Status.vue

@@ -14,7 +14,6 @@ import StatusPanel from "./components/status-panel.vue";
 import ComTable from '@com/coms/table/table.vue';
 import util from "@/helper/util.js";
 
-import { datainit, webtest } from "@tools/websocket.js";
 import store from "@store/index.js";
 
 export default {
@@ -28,8 +27,7 @@ export default {
   // 数据
   data () {
     return {
-      loadingFlg: false, // 遮罩开关
-      websocketServe: null, // websocket 服务实例
+      timmer: null, // 遮罩开关
       sourceMap: {}, // 核心数据
       datas: [],
       tableData: {
@@ -179,128 +177,123 @@ export default {
       },
     };
   },
-  // 函数
-  methods: {},
 
-  created () {
-    let that = this;
-    that.loadingFlg = true;
-    // that.BASE.showLoading();
-    that.$nextTick(() => {
-      that.websocketServe && that.websocketServe.disconnect();
+  methods: {
+    // 请求服务
+    requestData (showLoading) {
+      let that = this;
       that.API.requestData({
+        showLoading,
         method: "POST",
-        subUrl: "admin/websocketdisconnect",
-        success () {
-          that.websocketServe = datainit("/topic/wpInfoPush");
-        }
-      });
-    });
-  },
+        subUrl: "monitor/monitor",
+        success (res) {
+          if (res.data) {
+            let sourceMap = res.data;
+            let datas = [];
+            let data = [];
+            sourceMap.maps.forEach(ele => {
+              datas.push({
+                title: ele.name,
+                weather: {
+                  type: "cloudy",
+                  temperature: 11,
+                },
+                breakOff: ele.fczt === 3,
+                category: {
+                  score: ele.zjts,
+                  datas: [
+                    { text: "运行", num: ele.yxts, color: "green" },
+                    { text: "待机", num: ele.djts, color: "purple" },
+                    { text: "限电", num: ele.xdts, color: "yellow" },
+                    { text: "检修", num: ele.whts, color: "orange" },
+                    { text: "故障", num: ele.gzts, color: "red" },
+                    { text: "受累", num: ele.slts || 0, color: "blue" },
+                    { text: "离线", num: ele.lxts, color: "gray" },
+                  ],
+                },
+                items: [
+                  {
+                    // f1: ("AGC" + ele.name.replace(/风电场/g, "") + ":"),
+                    f1: "AGC:",
+                    f2: "设定",
+                    f3: ele.agcygsd,
+                    f4: "出线",
+                    f5: ele.agccxyg,
+                    is_light: true,
+                  },
+                  {
+                    f1: "升压站:",
+                    f2: "Uab",
+                    f3: ele.uab,
+                    f4: "Ia",
+                    f5: ele.ia,
+                    is_light: false,
+                  },
+                  {
+                    f1: "风功:",
+                    f2: "未来15分钟",
+                    f3: ele.ycgl,
+                    f4: "",
+                    f5: "",
+                    is_light: false,
+                  },
+                  {
+                    f1: "测风塔:",
+                    f2: "风速",
+                    f3: ((ele.cftfs || 0) + "m/s"),
+                    f4: "风向",
+                    f5: ele.cftfx || 0,
+                    is_light: false,
+                  },
+                  {
+                    f1: "电能量表:",
+                    f2: "",
+                    f3: ele.dnlb,
+                    f4: "",
+                    f5: "",
+                    is_light: false,
+                  },
+                ],
+              });
+            });
 
-  mounted () {
+            sourceMap.vos.forEach(ele => {
+              ele.row_span = [];
+              ele.col_span = [];
+              ele.is_light = false;
+              data.push(ele);
+            });
 
+            that.sourceMap = sourceMap;
+            that.datas = datas;
+            that.tableData.data = data;
+          } else {
+            that.sourceMap = {};
+            that.datas = [];
+            that.tableData.data = [];
+          }
+        },
+      });
+    },
   },
 
-  unmounted () {
-    this.websocketServe && this.websocketServe.disconnect();
-    this.API.requestData({
-      method: "POST",
-      subUrl: "admin/websocketdisconnect"
+  created () {
+    let that = this;
+    that.$nextTick(() => {
+      that.requestData(false);
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
     });
   },
 
-  watch: {
-    // 监听 websocket 回调并包装数据用于展示
-    '$store.state.windturbineMap': function (res) {
-      // this.loadingFlg && this.BASE.closeLoading();
-      this.loadingFlg = false;
-      if (res) {
-        let sourceMap = JSON.parse(res);
-        let datas = [];
-        let data = [];
-        sourceMap.maps.forEach(ele => {
-          datas.push({
-            title: ele.name,
-            weather: {
-              type: "cloudy",
-              temperature: 11,
-            },
-            breakOff: ele.fczt === 3,
-            category: {
-              score: ele.zjts,
-              datas: [
-                { text: "运行", num: ele.yxts, color: "green" },
-                { text: "待机", num: ele.djts, color: "purple" },
-                { text: "限电", num: ele.xdts, color: "yellow" },
-                { text: "检修", num: ele.whts, color: "orange" },
-                { text: "故障", num: ele.gzts, color: "red" },
-                { text: "受累", num: ele.slts || 0, color: "blue" },
-                { text: "离线", num: ele.lxts, color: "gray" },
-              ],
-            },
-            items: [
-              {
-                // f1: ("AGC" + ele.name.replace(/风电场/g, "") + ":"),
-                f1: "AGC:",
-                f2: "设定",
-                f3: ele.agcygsd,
-                f4: "出线",
-                f5: ele.agccxyg,
-                is_light: true,
-              },
-              {
-                f1: "升压站:",
-                f2: "Uab",
-                f3: ele.uab,
-                f4: "Ia",
-                f5: ele.ia,
-                is_light: false,
-              },
-              {
-                f1: "风功:",
-                f2: "未来15分钟",
-                f3: ele.ycgl,
-                f4: "",
-                f5: "",
-                is_light: false,
-              },
-              {
-                f1: "测风塔:",
-                f2: "风速",
-                f3: ((ele.cftfs || 0) + "m/s"),
-                f4: "风向",
-                f5: ele.cftfx || 0,
-                is_light: false,
-              },
-              {
-                f1: "电能量表:",
-                f2: "",
-                f3: ele.dnlb,
-                f4: "",
-                f5: "",
-                is_light: false,
-              },
-            ],
-          });
-        });
+  mounted () {
 
-        sourceMap.vos.forEach(ele => {
-          ele.row_span = [];
-          ele.col_span = [];
-          ele.is_light = false;
-          data.push(ele);
-        });
+  },
 
-        this.sourceMap = sourceMap;
-        this.datas = datas;
-        this.tableData.data = data;
-      } else {
-        this.sourceMap = {};
-        this.datas = [];
-        this.tableData.data = [];
-      }
-    }
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
   }
 };
 </script>

src/views/WindSite/WindSite.vue

@@ -10,7 +10,8 @@
           <div class="page-common-body-menu-border left bottom"></div>
           <div class="page-common-body-menu-border right top"></div>
           <div class="page-common-body-menu-border right bottom"></div>
-          <div class="page-common-body-menu-item" v-for="(menuData, index) of menuDatas" :key="index" @click="clickMenu(index)" :class="{ active: activeIndex == index }">
+          <div class="page-common-body-menu-item" v-for="(menuData, index) of menuDatas" :key="index" @click="clickMenu(index)"
+            :class="{ active: activeIndex == index }">
             <router-link :to="menuData.path">
               <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'">
                 <SvgIcon :svgid="menuData.icon"></SvgIcon>
@@ -33,7 +34,7 @@ export default {
     SvgIcon,
   },
   // 数据
-  data() {
+  data () {
     return {
       activeIndex: 0,
       menuDatas: [
@@ -78,29 +79,18 @@ export default {
   },
   // 函数
   methods: {
-    clickMenu: function(index) {
+    clickMenu: function (index) {
       this.activeIndex = index;
-    },
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {
-    // 数据更新前
+    }
   },
-  updated() {
-    // 数据更新后
+
+  created () {
+
   },
+
+  mounted () {
+
+  }
 };
 </script>
 
@@ -176,7 +166,7 @@ export default {
             position: relative;
 
             &::after {
-              content: "";
+              content: '';
               width: calc(100% - 0.37vh);
               height: calc(100% - 0.37vh);
               position: absolute;

src/views/WindSite/pages/Home/Home.vue

@@ -5,36 +5,36 @@
       <panel-3 class="wind-site-info">
         <row align="middle">
           <div class="info-item">
-            <div class="value">123</div>
+            <div class="value">{{jczbmap.zjrl}}</div>
             <div class="text">装机容量</div>
           </div>
           <div class="info-item">
-            <div class="value">123</div>
-            <div class="text">装机容量</div>
+            <div class="value">{{jczbmap.rfdl}}</div>
+            <div class="text">日发电量</div>
           </div>
           <div class="info-item">
-            <div class="value">123</div>
-            <div class="text">装机容量</div>
+            <div class="value">{{jczbmap.yfdl}}</div>
+            <div class="text">月发电量</div>
           </div>
           <div class="info-item">
-            <div class="value">123</div>
-            <div class="text">装机容量</div>
+            <div class="value">{{jczbmap.nfdl}}</div>
+            <div class="text">年发电量</div>
           </div>
           <div class="info-item">
-            <div class="value">123</div>
-            <div class="text">装机容量</div>
+            <div class="value">{{jczbmap.ylyxs}}</div>
+            <div class="text">月利用小时</div>
           </div>
           <div class="info-item">
-            <div class="value">123</div>
-            <div class="text">装机容量</div>
+            <div class="value">{{jczbmap.nlyxs}}</div>
+            <div class="text">年利用小时</div>
           </div>
           <div class="info-item">
-            <div class="value">123</div>
-            <div class="text">装机容量</div>
+            <div class="value">{{jczbmap.ssfs}}</div>
+            <div class="text">实时风速</div>
           </div>
           <div class="info-item">
-            <div class="value">123</div>
-            <div class="text">装机容量</div>
+            <div class="value">{{jczbmap.sjgl}}</div>
+            <div class="text">实时功率</div>
           </div>
         </row>
       </panel-3>
@@ -46,7 +46,7 @@
             </div>
             <div class="info">
               <div class="text green">接入风机</div>
-              <div class="value">30</div>
+              <div class="value">{{jczbmap.jrts}}</div>
             </div>
           </div>
           <div class="situation">
@@ -56,7 +56,7 @@
                   <svg-icon svgid="svg-风机" />
                 </span>
                 <span class="text green">
-                  运行
+                  待机
                 </span>
               </div>
               <div class="status ">
@@ -72,7 +72,7 @@
                   <svg-icon svgid="svg-风机" />
                 </span>
                 <span class="text green">
-                  运行
+                  限电
                 </span>
               </div>
               <div class="status ">
@@ -80,7 +80,7 @@
                   <svg-icon svgid="svg-风机" />
                 </span>
                 <span class="text green">
-                  运行
+                  故障
                 </span>
               </div>
               <div class="status ">
@@ -88,7 +88,7 @@
                   <svg-icon svgid="svg-风机" />
                 </span>
                 <span class="text green">
-                  运行
+                  检修
                 </span>
               </div>
               <div class="status ">
@@ -96,7 +96,7 @@
                   <svg-icon svgid="svg-风机" />
                 </span>
                 <span class="text green">
-                  运行
+                  受累
                 </span>
               </div>
               <div class="status ">
@@ -104,17 +104,17 @@
                   <svg-icon svgid="svg-风机" />
                 </span>
                 <span class="text green">
-                  运行
+                  离线
                 </span>
               </div>
             </row>
             <row>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  待风
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.djnum}}
                 </span>
               </div>
               <div class="status">
@@ -122,105 +122,106 @@
                   正常出力
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.zcfdnum}}
                 </span>
               </div>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  降出力
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.xdjclnum}}
                 </span>
               </div>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  故障停机
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.gztjnum}}
                 </span>
               </div>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  检修停机
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.jxtjnum}}
                 </span>
               </div>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  电网
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.dwslnum}}
                 </span>
               </div>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  离线
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.lxnum}}
                 </span>
               </div>
             </row>
             <row>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  手动停机
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.sdtjts}}
                 </span>
               </div>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  降出力
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.qxjclnum}}
                 </span>
               </div>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  停机
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.sdtjts}}
                 </span>
               </div>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  场内受累
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.cnsltjnum}}
                 </span>
               </div>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  产内受累
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.cnsljxnum}}
                 </span>
               </div>
+
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  环境
                 </span>
                 <span class="value">
-                  123
+                  {{jczbmap.hjslnum}}
                 </span>
               </div>
               <div class="status">
                 <span class="text gray">
-                  正常出力
+                  未知
                 </span>
                 <span class="value">
-                  123
+                  --
                 </span>
               </div>
             </row>
@@ -230,49 +231,51 @@
     </row>
     <row>
       <Col :span="6">
-        <panel title="日度损失电量分析"></panel>
+      <panel title="日度损失电量分析"></panel>
       </Col>
       <Col :span="12">
-        <panel title="72小时功率曲线图">
-          <multiple-line-chart height="18.519vh" :list="Powertrend.value" :units="Powertrend.units" />
-        </panel>
+      <panel title="4小时功率曲线图">
+        <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units" />
+      </panel>
       </Col>
       <Col :span="6">
-        <panel>
-          <light-matrix />
-        </panel>
+      <panel>
+        <light-matrix :list="fjmap" />
+      </panel>
       </Col>
     </row>
     <row>
       <Col :span="8">
-        <panel title="日度损失电量分析">
-          <dual-pie-chart height="21.296vh" />
-        </panel>
+      <panel title="日度损失电量分析">
+        <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
+      </panel>
       </Col>
       <Col :span="8">
-        <panel title="月度损失电量分析"> <dual-pie-chart height="21.296vh" />s </panel>
+      <panel title="月度损失电量分析">
+        <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
+      </panel>
       </Col>
       <Col :span="8">
-        <panel title="年度损失电量分析">
-          <dual-pie-chart height="21.296vh" />
-        </panel>
+      <panel title="年度损失电量分析">
+        <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData" height="21.296vh" />
+      </panel>
       </Col>
     </row>
     <row>
       <Col :span="8">
-        <panel title="日度损失电量分析">
-          <hover-bar-chart height="21.296vh" />
-        </panel>
+      <panel title="日度损失电量分析">
+        <hover-bar-chart :list="dayLost" height="21.296vh" />
+      </panel>
       </Col>
       <Col :span="8">
-        <panel title="完成电量">
-          <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" />
-        </panel>
+      <panel title="完成电量">
+        <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" />
+      </panel>
       </Col>
       <Col :span="8">
-        <panel title="月发电量对比">
-          <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
-        </panel>
+      <panel title="月发电量对比">
+        <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
+      </panel>
       </Col>
     </row>
   </div>
@@ -297,290 +300,321 @@ export default {
   // 使用组件
   components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix },
   // 数据
-  data() {
+  data () {
     return {
+      timmer: null, // 计时器
+      fjmap: [], // 分机矩阵
+      glvos: {}, // 72小时功率曲线图
+      wxssmap: {}, // 五项损失饼图数据
+      jczbmap: {}, // 顶部基础数据
+      dayLost: [], // 日度损失电量分析柱状图
+      donePower: [], // 完成电量柱状图
+      // 饼图数据
+      pieChartData: {
+        dayData: [], // 日度
+        monthData: [], // 日度
+        yearData: [], // 日度
+      },
       // 完成电量
       CompleteElectricity: {
         data: [
           {
-            title: "预测电量",
-            yAxisIndex: 0,
-            value: [
-              {
-                text: "1日",
-                value: 1,
-              },
-              {
-                text: "2日",
-                value: 2,
-              },
-              {
-                text: "3日",
-                value: 1,
-              },
-              {
-                text: "4日",
-                value: 3,
-              },
-              {
-                text: "5日",
-                value: 3,
-              },
-              {
-                text: "6日",
-                value: 3,
-              },
-              {
-                text: "7日",
-                value: 3,
-              },
-            ],
-          },
-          {
-            title: "实际电量",
+            title: "发电量",
             yAxisIndex: 0,
-            value: [
-              {
-                text: "1日",
-                value: 1,
-              },
-              {
-                text: "2日",
-                value: 2,
-              },
-              {
-                text: "3日",
-                value: 1,
-              },
-              {
-                text: "4日",
-                value: 3,
-              },
-              {
-                text: "5日",
-                value: 3,
-              },
-              {
-                text: "6日",
-                value: 3,
-              },
-              {
-                text: "7日",
-                value: 3,
-              },
-            ],
-          },
+            value: []
+          }, {
+            title: "预测电量",
+            yAxisIndex: 1,
+            value: []
+          }
         ],
         units: [""],
       },
 
-      // 72小时功率曲线图
-      Powertrend: {
-        // 图表所用单位
-        units: ["(万KWh)", "(风速)"],
-        value: [
-          {
-            title: "平均风速",
-            yAxisIndex: 1, // 使用单位
-            value: [
-              {
-                text: "1日",
-                value: 0,
-              },
-              {
-                text: "2日",
-                value: 1,
-              },
-              {
-                text: "3日",
-                value: 0,
-              },
-              {
-                text: "4日",
-                value: 1,
-              },
-              {
-                text: "5日",
-                value: 0,
-              },
-              {
-                text: "6日",
-                value: 1,
-              },
-              {
-                text: "7日",
-                value: 0,
-              },
-            ],
-          },
-          {
-            title: "应发功率",
-            yAxisIndex: 0,
-            value: [
-              {
-                text: "1日",
-                value: 4,
-              },
-              {
-                text: "2日",
-                value: 2,
-              },
-              {
-                text: "3日",
-                value: 4,
-              },
-              {
-                text: "4日",
-                value: 2,
-              },
-              {
-                text: "5日",
-                value: 4,
-              },
-              {
-                text: "6日",
-                value: 2,
-              },
-              {
-                text: "7日",
-                value: 4,
-              },
-            ],
-          },
-          {
-            title: "实际功率",
-            yAxisIndex: 0,
-            value: [
-              {
-                text: "1日",
-                value: 1,
-              },
-              {
-                text: "2日",
-                value: 3,
-              },
-              {
-                text: "3日",
-                value: 1,
-              },
-              {
-                text: "4日",
-                value: 3,
-              },
-              {
-                text: "5日",
-                value: 1,
-              },
-              {
-                text: "6日",
-                value: 3,
-              },
-              {
-                text: "7日",
-                value: 1,
-              },
-            ],
-          },
-        ],
-      },
+      Powertrend: {}, // 4小时功率曲线图
 
       // 月发电量对比
       MonthCompare: {
         units: ["(MK)"],
-        value: [
-          {
-            title: "应发功率",
-            yAxisIndex: 0,
-            value: [
-              {
-                text: "1",
-                value: 1,
-              },
-              {
-                text: "2",
-                value: 3,
-              },
-              {
-                text: "3",
-                value: 1,
-              },
-              {
-                text: "4",
-                value: 3,
-              },
-              {
-                text: "5",
-                value: 1,
-              },
-              {
-                text: "6",
-                value: 3,
-              },
-              {
-                text: "7",
-                value: 1,
-              },
-            ],
-          },
-          {
-            title: "实际功率",
-            yAxisIndex: 0,
-            value: [
-              {
-                text: "1",
-                value: 3,
-              },
-              {
-                text: "2",
-                value: 1,
-              },
-              {
-                text: "3",
-                value: 3,
-              },
-              {
-                text: "4",
-                value: 1,
-              },
-              {
-                text: "5",
-                value: 3,
-              },
-              {
-                text: "6",
-                value: 1,
-              },
-              {
-                text: "7",
-                value: 3,
-              },
-            ],
-          },
-        ],
+        value: [{
+          title: "月发电量",
+          yAxisIndex: 0,
+          value: []
+        }, {
+          title: "月预测电量",
+          yAxisIndex: 0,
+          value: []
+        }]
       },
     };
   },
   // 函数
-  methods: {},
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
+  methods: {
+
+    // 请求服务
+    requestData (showLoading) {
+      this.requestWpInfo(showLoading);
+      this.requestLoss(showLoading);
+      this.requestPower(showLoading);
+      this.requestMonthPower(showLoading);
+    },
+
+    // 获取场站监视数据
+    requestWpInfo (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "monitor/findWpInfoBywpId",
+        data: {
+          wpId: "MHS_FDC"
+        },
+        success (res) {
+          if (res.data) {
+            let fjmap = [];
+            let keys = ["value1", "value2", "value3", "value4", "value5", "value6", "value7", "value9",];
+            let Powertrend = {
+              // 图表所用单位
+              units: ["(万KWh)", "(风速)"],
+              value: [{
+                title: "应发功率",
+                yAxisIndex: 1, // 使用单位
+                value: []
+              }, {
+                title: "实发功率",
+                yAxisIndex: 1, // 使用单位
+                value: []
+              }, {
+                title: "理论功率",
+                yAxisIndex: 1, // 使用单位
+                value: []
+              }, {
+                title: "预测功率",
+                yAxisIndex: 1, // 使用单位
+                value: []
+              }, {
+                title: "保证功率",
+                yAxisIndex: 1, // 使用单位
+                value: []
+              }, {
+                title: "平均风速",
+                yAxisIndex: 1, // 使用单位
+                value: []
+              }, {
+                title: "小时预测功率",
+                yAxisIndex: 1, // 使用单位
+                value: []
+              }, {
+                title: "最有功率律",
+                yAxisIndex: 1, // 使用单位
+                value: []
+              }]
+            };
+
+            let dayPieChartKey = [{
+              key: "gzssdl",
+              name: "故障损失电量"
+            }, {
+              key: "jxssdl",
+              name: "检修损失电量"
+            }, {
+              key: "qfssdl",
+              name: "性能损失电量"
+            }, {
+              key: "slssdl",
+              name: "受累损失电量"
+            }, {
+              key: "xdssdl",
+              name: "限电损失电量"
+            }];
+
+            // 饼图 1 数据
+            let dayData = [];
+
+            // 饼图 2 数据
+            let monthData = [];
+
+            // 饼图 2 数据
+            let yearData = [];
+
+            res.data.fjjzmap.fjmap[0].forEach(ele => {
+              fjmap.push({
+                tag: ele.wtnum,
+                color: "gray",
+              });
+            });
+
+            keys.forEach((key, keyIndex) => {
+              res.data.glvos.forEach(ele => {
+                Powertrend.value[keyIndex].value.push({
+                  text: "",
+                  value: ele[key] || 0
+                });
+              });
+            });
+
+            dayPieChartKey.forEach(ele => {
+              dayData.push({
+                value: res.data.wxssmap["r" + ele.key] || 0,
+                unit: "万kwh",
+                name: ele.name,
+              });
+
+              monthData.push({
+                value: res.data.wxssmap["y" + ele.key] || 0,
+                unit: "万kwh",
+                name: ele.name,
+              });
+
+              yearData.push({
+                value: res.data.wxssmap["n" + ele.key] || 0,
+                unit: "万kwh",
+                name: ele.name,
+              });
+            });
+
+            that.fjmap = fjmap;
+            that.Powertrend = Powertrend;
+            that.jczbmap = res.data.jczbmap;
+            that.pieChartData = {
+              dayData,
+              monthData,
+              yearData
+            };
+          } else {
+            that.fjmap = [];
+            that.Powertrend = {};
+            that.jczbmap = {};
+            that.pieChartData = {
+              dayData: [],
+              monthData: [],
+              yearData: []
+            };
+          }
+
+        },
+      });
+    },
+
+    // 获取日度损失电量分析
+    requestLoss (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "monitor/findLossWpBar",
+        data: {
+          wpId: "MHS_FDC"
+        },
+        success (res) {
+          let dayLost = [];
+          res.data.forEach(ele => {
+            dayLost.push({
+              text: ele.timestr,
+              value: ele.value1 || 0,
+            });
+          });
+          that.dayLost = dayLost;
+        }
+      });
+    },
+
+    // 获取完成电量
+    requestPower (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "monitor/findPowerWpBar",
+        data: {
+          wpId: "MHS_FDC"
+        },
+        success (res) {
+          let data = [{
+            title: "发电量",
+            yAxisIndex: 0,
+            value: []
+          }, {
+            title: "预测电量",
+            yAxisIndex: 1,
+            value: []
+          }];
+
+          res.data.forEach(ele => {
+            data[0].value.push({
+              text: ele.timestr,
+              value: ele.value1 || 0,
+            });
+            data[1].value.push({
+              text: ele.timestr,
+              value: ele.value2 || 0,
+            });
+          });
+
+          that.CompleteElectricity.data = data;
+        }
+      });
+    },
+
+    // 获取月发电量对比
+    requestMonthPower (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "monitor/findMonthPowerWpBar",
+        data: {
+          wpId: "MHS_FDC"
+        },
+        success (res) {
+          let data = [{
+            title: "月发电量",
+            yAxisIndex: 0,
+            value: []
+          }, {
+            title: "月预测电量",
+            yAxisIndex: 0,
+            value: []
+          }];
+
+          res.data.forEach(ele => {
+            data[0].value.push({
+              text: ele.timestr,
+              value: ele.value1 || 0,
+            });
+            data[1].value.push({
+              text: ele.timestr,
+              value: ele.value2 || 0,
+            });
+          });
+
+          that.MonthCompare.value = data;
+        }
+      });
+    }
   },
-  mounted() {
-    // 渲染后
+
+  created () {
+    let that = this;
+    that.$nextTick(() => {
+
+      that.requestData(false);
+
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
+    });
   },
-  beforeUpdate() {
-    // 数据更新前
+
+  mounted () {
+
   },
-  updated() {
-    // 数据更新后
+
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
   },
+
 };
 </script>
 

src/views/WindSite/pages/Home/light-matrix.vue

@@ -15,287 +15,27 @@ export default {
   name: "LightMatrix1",
   // 使用组件
   components: {},
+
+  props: {
+    list: {
+      type: Array,
+      default: [
+        // {
+        //   tag: "A01",
+        //   color: "gray",
+        // }
+      ]
+    }
+  },
   // 数据
-  data() {
+  data () {
     return {
-      // 数据结构
-      list: [
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-        {
-          tag: "A01",
-          color: "gray",
-        },
-      ],
+
     };
   },
-  // 函数
-  methods: {},
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  },
+  methods: {
+
+  }
 };
 </script>