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

<template>
  <div class="wind-site-home">
    <row>
      <wind-site-weather />
      <panel-3 class="wind-site-info">
        <row align="middle">
          <div class="info-item">
            <div class="value">{{jczbmap.zjrl}}</div>
            <div class="text">装机容量</div>
          </div>
          <div class="info-item">
            <div class="value">{{jczbmap.rfdl}}</div>
            <div class="text">日发电量</div>
          </div>
          <div class="info-item">
            <div class="value">{{jczbmap.yfdl}}</div>
            <div class="text">月发电量</div>
          </div>
          <div class="info-item">
            <div class="value">{{jczbmap.nfdl}}</div>
            <div class="text">年发电量</div>
          </div>
          <div class="info-item">
            <div class="value">{{jczbmap.ylyxs}}</div>
            <div class="text">月利用小时</div>
          </div>
          <div class="info-item">
            <div class="value">{{jczbmap.nlyxs}}</div>
            <div class="text">年利用小时</div>
          </div>
          <div class="info-item">
            <div class="value">{{jczbmap.ssfs}}</div>
            <div class="text">实时风速</div>
          </div>
          <div class="info-item">
            <div class="value">{{jczbmap.sjgl}}</div>
            <div class="text">实时功率</div>
          </div>
        </row>
      </panel-3>
      <panel-3 class="wind-running-info">
        <row align="middle">
          <div class="fengji">
            <div class="fengji-icon svg-icon svg-icon-white">
              <svg-icon class="" svgid="svg-风机" />
            </div>
            <div class="info">
              <div class="text green">接入风机</div>
              <div class="value">{{jczbmap.jrts}}</div>
            </div>
          </div>
          <div class="situation">
            <row>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  待机
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  运行
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  限电
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  故障
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  检修
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  受累
                </span>
              </div>
              <div class="status ">
                <span class="svg-icon svg-icon-green">
                  <svg-icon svgid="svg-风机" />
                </span>
                <span class="text green">
                  离线
                </span>
              </div>
            </row>
            <row>
              <div class="status">
                <span class="text gray">
                  待风
                </span>
                <span class="value">
                  {{jczbmap.djnum}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  正常出力
                </span>
                <span class="value">
                  {{jczbmap.zcfdnum}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  降出力
                </span>
                <span class="value">
                  {{jczbmap.xdjclnum}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  故障停机
                </span>
                <span class="value">
                  {{jczbmap.gztjnum}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  检修停机
                </span>
                <span class="value">
                  {{jczbmap.jxtjnum}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  电网
                </span>
                <span class="value">
                  {{jczbmap.dwslnum}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  离线
                </span>
                <span class="value">
                  {{jczbmap.lxnum}}
                </span>
              </div>
            </row>
            <row>
              <div class="status">
                <span class="text gray">
                  手动停机
                </span>
                <span class="value">
                  {{jczbmap.sdtjts}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  降出力
                </span>
                <span class="value">
                  {{jczbmap.qxjclnum}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  停机
                </span>
                <span class="value">
                  {{jczbmap.sdtjts}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  场内受累
                </span>
                <span class="value">
                  {{jczbmap.cnsltjnum}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  产内受累
                </span>
                <span class="value">
                  {{jczbmap.cnsljxnum}}
                </span>
              </div>

              <div class="status">
                <span class="text gray">
                  环境
                </span>
                <span class="value">
                  {{jczbmap.hjslnum}}
                </span>
              </div>
              <div class="status">
                <span class="text gray">
                  未知
                </span>
                <span class="value">
                  --
                </span>
              </div>
            </row>
          </div>
        </row>
      </panel-3>
    </row>
    <row>
      <Col :span="6">
      <panel title="日度损失电量分析"></panel>
      </Col>
      <Col :span="12">
      <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 :list="fjmap" />
      </panel>
      </Col>
    </row>
    <row>
      <Col :span="8">
      <panel title="日度损失电量分析">
        <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
      </panel>
      </Col>
      <Col :span="8">
      <panel title="月度损失电量分析">
        <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
      </panel>
      </Col>
      <Col :span="8">
      <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 :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>
      </Col>
      <Col :span="8">
      <panel title="月发电量对比">
        <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
      </panel>
      </Col>
    </row>
  </div>
</template>

<script>
import HoverBarChart from "../../../../components/chart/bar/hover-bar-chart.vue";
import MultipleBarChart from "../../../../components/chart/bar/multiple-bar-chart.vue";
import MultipleLineChart from "../../../../components/chart/line/multiple-line-chart.vue";
import NormalLineChart from "../../../../components/chart/line/normal-line-chart.vue";
import DualPieChart from "../../../../components/chart/pie/dual-pie-chart.vue";
import Col from "../../../../components/coms/grid/col.vue";
import Row from "../../../../components/coms/grid/row.vue";
import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
import Panel from "../../../../components/coms/panel/panel.vue";
import Panel3 from "../../../../components/coms/panel/panel3.vue";
import LightMatrix from "./light-matrix.vue";
import WindSiteWeather from "./wind-site-weather.vue";
export default {
  // 名称
  name: "WindSiteHome",
  // 使用组件
  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix },
  // 数据
  data () {
    return {
      timmer: null, // 计时器
      fjmap: [], // 分机矩阵
      glvos: {}, // 72小时功率曲线图
      wxssmap: {}, // 五项损失饼图数据
      jczbmap: {}, // 顶部基础数据
      dayLost: [], // 日度损失电量分析柱状图
      donePower: [], // 完成电量柱状图
      // 饼图数据
      pieChartData: {
        // 日度
        dayData: [{
          title: "",
          value: []
        }],
        // 月度
        monthData: [{
          title: "",
          value: []
        }],
        // 年度
        yearData: [{
          title: "",
          value: []
        }],
      },
      // 完成电量
      CompleteElectricity: {
        data: [{
          title: "发电量",
          yAxisIndex: 0,
          value: []
        }, {
          title: "预测电量",
          yAxisIndex: 1,
          value: []
        }],
        units: [""],
      },

      // 4小时功率曲线图
      Powertrend: {
        value: [{
          title: "",
          value: []
        }]
      },

      // 月发电量对比
      MonthCompare: {
        units: ["(MK)"],
        value: [{
          title: "月发电量",
          yAxisIndex: 0,
          value: []
        }, {
          title: "月预测电量",
          yAxisIndex: 0,
          value: []
        }]
      },
    };
  },
  // 函数
  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;
        }
      });
    }
  },

  created () {
    let that = this;
    that.$nextTick(() => {

      that.requestData(false);

      that.timmer = setInterval(() => {
        that.requestData(false);
      }, that.$store.state.websocketTimeSec);
    });
  },

  mounted () {

  },

  unmounted () {
    clearInterval(this.timmer);
    this.timmer = null;
  },

};
</script>

<style lang="less" scoped>
.wind-site-home {
  .wind-site-info {
    margin-left: 0.7407vh;
    flex: 1 0 auto;

    & > .row {
      height: 100%;
    }

    .info-item {
      text-align: center;
      padding: 0 0.37vh;
      flex: 1;

      .value {
        font-size: @fontsize-s;
        margin-bottom: 1.111vh;
      }
      .text {
        font-size: 12px;
        color: @gray;
      }
    }
  }

  .wind-running-info {
    margin-left: 0.7407vh;
    padding: 0.741vh;
    flex: 1 1 auto;

    & > .row {
      height: 100%;
    }
    .fengji {
      display: flex;
      align-content: center;
      flex: 0 0 auto;

      .fengji-icon {
        padding: 1.111vh;
        border: 0.093vh solid #05bb4c;
        border-radius: 50%;
        border-right-color: transparent;
        border-top-color: transparent;
        svg {
          width: 3.333vh;
          height: 3.333vh;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .text {
          font-size: @fontsize-s;
          margin-bottom: 1.111vh;
        }

        .value {
          text-align: right;
          font-size: 1.852vh;
        }
      }
    }

    .situation {
      flex: 1 1 auto;
      margin-left: 1.481vh;

      .row + .row {
        margin: 0;
      }

      .status {
        flex: 1;
        width: 7.963vh;
        display: flex;
        align-items: center;
        padding: 0.37vh 0;
        svg {
          width: 1.111vh;
          height: 1.111vh;
          margin-right: 0.37vh;
        }
        .text {
          font-size: 12px;
          flex: auto;
        }

        .value {
          font-size: 12px;
          padding-right: 0.741vh;
        }
      }
    }
  }
}
</style>