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

<template>
  <div>
    <div class="btn-group-tabs">
      <BtnGroup2 :btnGroups="btnGroupsss" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
    </div>
    <div class="wind-site-home">
      <div class="mg-b-16">
        <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
      </div>
      <row>
        <wind-site-weather :time="nowTime" :data="tqmap" />
        <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 class="icon-status">
                <div class="status ">
                  <span class="svg-icon svg-icon-purple">
                    <svg-icon svgid="svg-standby" />
                  </span>
                  <span class="text purple">
                    待机
                  </span>
                </div>
                <div class="status ">
                  <span class="svg-icon svg-icon-green">
                    <svg-icon svgid="svg-normal-power" />
                  </span>
                  <span class="text green">
                    运行
                  </span>
                </div>
                <div class="status ">
                  <span class="svg-icon svg-icon-yellow">
                    <svg-icon svgid="svg-limit-power" style="margin:3px 0.3704vh -3px 0;" />
                  </span>
                  <span class="text yellow">
                    限电
                  </span>
                </div>
                <div class="status ">
                  <span class="svg-icon svg-icon-red">
                    <svg-icon svgid="svg-gz-downtime" />
                  </span>
                  <span class="text red">
                    故障
                  </span>
                </div>
                <div class="status ">
                  <span class="svg-icon svg-icon-orange">
                    <svg-icon svgid="svg-jx-downtime" />
                  </span>
                  <span class="text orange">
                    检修
                  </span>
                </div>
                <div class="status ">
                  <span class="svg-icon svg-icon-gray">
                    <svg-icon svgid="svg-offline" />
                  </span>
                  <span class="text gray">
                    离线
                  </span>
                </div>
                <div class="status ">
                  <span class="svg-icon svg-icon-white">
                    <svg-icon svgid="svg-intranet-involvement" />
                  </span>
                  <span class="text white">
                      受累
                  </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>
            </div>
          </row>
        </panel-3>
      </row>
      <div class="first-info mg-t-16 mg-b-16">
        <div style="flex:0 1 450px;">
          <panel title="场站">
            <station height="18.519vh" />
          </panel>
        </div>
        <div class="mg-l-16" style="flex:1 1 auto;" ref="lineChart">
          <panel title="4小时功率曲线图">
            <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units" :showLegend="true" />
          </panel>
        </div>
        <div class="mg-l-16" style="flex:0 0 400px;">
          <panel class="light-matrix-panel">
            <light-matrix :list="fjmap" />
          </panel>
        </div>
      </div>
      <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" :showLegend="true" />
          </panel>
        </Col>
        <Col :span="8">
          <panel title="月发电量对比">
            <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
          </panel>
        </Col>
      </row>
    </div>
  </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 BtnGroupDouble from "../../../../components/coms/btn/btn-group-double.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 Station from "./Station.vue";
import WindSiteWeather from "./wind-site-weather.vue";

import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";

export default {
  // 名称
  name: "WindSiteHome",
  // 使用组件
  components: { BtnGroup2, WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble, Station },
  // 数据
  data() {
    return {
      timmer: null, // 计时器
      timmer2: null,
      nowTime: "", // 时间
      fjmap: [], // 分机矩阵
      tqmap: {}, // 天气数据
      glvos: {}, // 72小时功率曲线图
      wxssmap: {}, // 五项损失饼图数据
      jczbmap: {}, // 顶部基础数据
      dayLost: [], // 日度损失电量分析柱状图
      donePower: [], // 完成电量柱状图
      // 饼图数据
      pieChartData: {
        // 日度
        dayData: [
          {
            title: "",
            value: [],
          },
        ],
        // 月度
        monthData: [
          {
            title: "",
            value: [],
          },
        ],
        // 年度
        yearData: [
          {
            title: "",
            value: [],
          },
        ],
      },
      // 完成电量
      CompleteElectricity: {
        data: [
          {
            title: "发电量",
            yAxisIndex: 0,
            value: [],
          },
          {
            title: "预测电量",
            yAxisIndex: 0,
            value: [],
          },
        ],
        units: ["", ""],
      },

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

      // 月发电量对比
      MonthCompare: {
        units: ["(MK)"],
        value: [
          {
            title: "月发电量",
            yAxisIndex: 0,
            value: [],
          },
          {
            title: "月预测电量",
            yAxisIndex: 0,
            value: [],
          },
        ],
      },
      selectIndex: 0,
      rowIndex: 0,
      btnGroupsss: [
        {
          icon: "svg-wind-site",
          btns: [],
        },
        {
          icon: "svg-photovoltaic",
          btns: [],
        },
      ],
    };
  },
  // 函数
  methods: {
    getWp() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAllAjax",
        success(res) {
          let btnGroups = [
            {
              icon: "svg-wind-site",
              btns: [],
            },
            {
              icon: "svg-photovoltaic",
              btns: [],
            },
          ];

          res.data.forEach((ele, index) => {
            if (ele.id.indexOf("FDC") !== -1) {
              btnGroups[0].btns.push({
                text: ele.name,
                code: ele.id,
              });
            } else {
              btnGroups[1].btns.push({
                text: ele.name,
                code: ele.id,
              });
            }
          });

          that.btnGroupsss = btnGroups;
          that.renderBtnActiveIndex();
        },
      });
    },

    renderBtnActiveIndex() {
      this.btnGroupsss.forEach((pEle, pIndex) => {
        pEle.btns.forEach((cEle, cIndex) => {
          if (cEle.code === this.wpId) {
            this.rowIndex = pIndex;
            this.selectIndex = cIndex;
          }
        });
      });
    },

    select(res) {
      this.$router.replace({
        path: `/monitor/windsite/home/${res.code}`,
      });
    },
    // 根据风机状态码返回对应 class
    getColor(fjzt) {
      switch (fjzt) {
        case 0:
          return "green";
        case 1:
          return "blue";
        case 2:
          return "red";
        case 3:
          return "gray";
        case 4:
          return "orange";
        case 5:
          return "purple";
        case 6:
          return "write";
      }
    },
    // 请求服务
    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: that.wpId,
        },
        success(res) {
          if (res.data) {
            that.tqmap = res.data.tqmap;
            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,
                wtId: ele.wtId,
                wpId: ele.wpId,
                color: that.getColor(ele.fjzt),
              });
            });

            keys.forEach((key, keyIndex) => {
              res.data.glvos.forEach((ele) => {
                Powertrend.value[keyIndex].value.push({
                  text: new Date(ele.time).formatDate("hh:mm"),
                  value: ele[key],
                });
              });
            });

            dayPieChartKey.forEach((ele) => {
              dayData.push({
                value: res.data.wxssmap["r" + ele.key],
                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: that.wpId,
        },
        success(res) {
          let dayLost = [];
          res.data.forEach((ele) => {
            dayLost.push({
              text: ele.timestr,
              value: ele.value1,
            });
          });
          that.dayLost = dayLost;
        },
      });
    },

    // 获取完成电量
    requestPower(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "monitor/findPowerWpBar",
        data: {
          wpId: that.wpId,
        },
        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.CompleteElectricity.data = data;
        },
      });
    },

    // 获取月发电量对比
    requestMonthPower(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "monitor/findMonthPowerWpBar",
        data: {
          wpId: that.wpId,
        },
        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,
            });
            data[1].value.push({
              text: ele.timestr,
              value: ele.value2,
            });
          });

          that.MonthCompare.value = data;
        },
      });
    },
  },

  created() {
    let that = this;
    that.wpId = that.$route.params.wpId;
    that.$nextTick(() => {
      that.getWp();
      that.requestData(false);
      that.timmer = setInterval(() => {
        that.requestData(false);
      }, that.$store.state.websocketTimeSec);
      that.timmer2 = setInterval(() => {
        that.nowTime = new Date().formatDate("hh:mm:ss");
      }, 1000);
    });
  },

  mounted() {},

  unmounted() {
    clearInterval(this.timmer);
    clearInterval(this.timmer2);
    this.timmer = null;
    this.timmer2 = null;
  },
  watch: {
    $route(res) {
      this.wpId = res.params.wpId;
      this.requestData(false);
      this.renderBtnActiveIndex();
    },
  },
};
</script>

<style lang="less">
.wind-site-home {
  .first-info {
    display: flex;
  }

  .wind-site-info {
    margin-left: 0.7407vh;
    flex: 1 0 auto;
    padding: 8px;

    & > .row {
      height: 100%;
    }

    .info-item {
      text-align: center;
      flex: 1;

      .value {
        font-size: 14px;
        margin-bottom: 8px;
      }
      .text {
        font-size: 12px;
        color: @gray;
      }
    }
  }

  .wind-running-info {
    margin-left: 8px;
    padding: 8px;
    flex: 1 1 auto;

    & > .row {
      height: 100%;
    }

    .fengji {
      display: flex;
      align-content: center;
      flex: 0 0 auto;

      .fengji-icon {
        padding: 12px;
        border-radius: 50%;
        box-shadow: inset 1.5px -1px 1px 0px @green;

        svg {
          width: 32px;
          height: 32px;
        }
      }

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

        .text {
          font-size: 12px;
          margin-bottom: 1.111vh;
        }

        .value {
          text-align: right;
          font-size: 24px;
        }
      }
    }

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

      .row + .row {
        margin: 0;
      }

      .status {
        flex: 1;
        width: 75px;
        display: flex;
        align-items: center;
        padding: 4px 0;

        svg {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }

        .text {
          font-size: 12px;
          flex: auto;
        }

        .value {
          font-size: 12px;
          padding-right: 0.741vh;
        }
      }

      .icon-status {
        .text {
          font-size: 12px;
          font-weight: 600;
        }
      }
    }
  }

  .light-matrix-panel {
    height: 100%;

    .panel-body {
      height: 100%;
    }
  }
}

.btn-group-tabs {
  display: flex;
  flex-direction: row;
}
</style>