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 v-if="paramsId.includes('FDC')">
        <wind-site-weather :time="nowTime" :data="tqmap" :paramsId="resCode" />
        <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-green">
                    <svg-icon svgid="svg-standby" />
                  </span>
                  <span class="text green"> 
                    待机
                  </span>
                </div>
                <div class="status">
                  <span class="svg-icon svg-icon-purple">
                    <svg-icon svgid="svg-normal-power" />
                  </span>
                  <span class="text purple">
                    运行
                  </span>
                </div>
                <div class="status ">
                  <span class="svg-icon svg-icon-pink">
                    <svg-icon svgid="svg-limit-power" style="margin:3px 0.3704vh -3px 0;" />
                  </span>
                  <span class="text pink">
                    限电
                  </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="value">
                    {{ jczbmap.djnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.zcfdnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.xdjclnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.gztjnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.jxtjnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.dwslnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.lxnum }}
                  </span>
                </div>
              </row>
            </div>
          </row>
        </panel-3>
      </row> -->
      <row>
        <wind-site-weather :time="nowTime" :data="tqmap" :paramsId="resCode" />
        <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 class="text">
                {{ resCode.includes("FDC") ? "实时风速" : "平均功率" }}
              </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" v-if="resCode.indexOf('GDC') == -1">
              <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="text green" v-if="resCode.includes('FDC') && resCode != ''">接入风机 </div>
                  <div class="text green" v-else-if="resCode.includes('GDC') && resCode != ''">接入光伏 </div> -->
                <div class="value">{{ jczbmap.jrts }}</div>
              </div>
            </div>
            <div class="fengji" v-else-if="resCode.indexOf('FDC') == -1">
              <div class="fengji-icon svg-icon svg-icon-white">
                <svg-icon class="" svgid="svg-gf-matrix" />
              </div>
              <div class="info">
                <div class="text green">接入光伏</div>
                <!-- <div class="text green" v-if="resCode.includes('FDC') && resCode != ''">接入风机 </div>
                  <div class="text green" v-else-if="resCode.includes('GDC') && resCode != ''">接入光伏 </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-green">
                    <svg-icon svgid="svg-standby" />
                  </span>
                  <span class="text green"> 待机 </span>
                </div>
                <div class="status">
                  <span class="svg-icon svg-icon-purple">
                    <svg-icon svgid="svg-normal-power" />
                  </span>
                  <span class="text purple"> 运行 </span>
                </div>
                <div class="status">
                  <span class="svg-icon svg-icon-pink">
                    <svg-icon
                      svgid="svg-limit-power"
                      style="margin: 3px 0.3704vh -3px 0"
                    />
                  </span>
                  <span class="text pink"> 限电 </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="value">
                    {{ jczbmap.djnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.zcfdnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.xdjclnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.gztjnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.jxtjnum }}
                  </span>
                </div>
                <div class="status">
                  <span class="value">
                    {{ jczbmap.dwslnum }}
                  </span>
                </div>
                <div class="status">
                  <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" :chartData="stationChartData" />
          </panel>
        </div>
        <div class="mg-l-16" style="flex: 1 1 auto" ref="lineChart">
          <panel title="24小时功率曲线图" v-if="resCode.includes('FDC')">
            <multiple-line-chart
              height="18.519vh"
              v-if="Powertrend"
              :list="Powertrend.value"
              :units="Powertrend.units"
              :showLegend="true"
            />
          </panel>
          <panel title="4小时功率曲线图" v-if="resCode.includes('GDC')">
            <multiple-line-chart
              height="18.519vh"
              v-if="Powertrend1"
              :list="Powertrend1.value"
              :units="Powertrend1.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="日发电量对比" subTitle="详情" @click="rfdl">
            <multiple-bar-chart
              height="21.296vh"
              :list="CompleteElectricity.data"
              :units="CompleteElectricity.units"
              :showLegend="true"
            />
          </panel>
          <el-dialog
            title="日发电量对比"
            v-model="rfdlDialog"
            width="70%"
            top="15vh"
            custom-class="modal"
            :close-on-click-modal="false"
          >
            <el-row type="flex">
              <ComTable :data="tableData" height="15vh"></ComTable>
            </el-row>
            <el-row type="flex">
              <multiple-bar-chart
                height="45vh"
                :list="CompleteElectricity.data"
                :units="CompleteElectricity.units"
                :showLegend="true"
              />
            </el-row>
          </el-dialog>
        </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/double-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";
import ComTable from "@com/coms/table/table.vue";

export default {
  // 名称
  name: "WindSiteHome",
  // 使用组件
  components: {
    BtnGroup2,
    WindSiteWeather,
    Row,
    Col,
    Panel,
    DualPieChart,
    MultipleLineChart,
    Panel3,
    SvgIcon,
    HoverBarChart,
    MultipleBarChart,
    NormalLineChart,
    LightMatrix,
    BtnGroupDouble,
    Station,
    ComTable,
  },
  // 数据
  data() {
    return {
      timmer: null, // 计时器
      timmer2: null,
      paramsId: "",
      resCode: "",
      nowTime: "", // 时间
      fjmap: [], // 分机矩阵
      tqmap: {}, // 天气数据
      glvos: {}, // 72小时功率曲线图
      wxssmap: {}, // 五项损失饼图数据
      jczbmap: {}, // 顶部基础数据
      dayLost: [], // 日度损失电量分析柱状图
      donePower: [], // 完成电量柱状图
      stationChartData: [],
      // 饼图数据
      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: [],
          },
        ],
      },
      // 4小时功率曲线图(光电场)
      Powertrend1: {
        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: [],
        },
      ],
      rfdlDialog: false,
      tableData: {
        column: [],
        data: [],
      },
    };
  },
  // 函数
  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) {
      let that = this;
      this.$router.replace({
        path: `/monitor/windsite/home/${res.code}`,
      });
      that.resCode = res.code;
    },
    // 根据风机状态码返回对应 class
    getColor(fjzt) {
      switch (fjzt) {
        case 0:
          return "green";
        case 1:
          return "purple";
        case 2:
          return "red";
        case 3:
          return "gray";
        case 4:
          return "orange";
        case 5:
          return "pink";
        case 6:
          return "write";
      }
    },
    // 请求服务
    requestData(showLoading) {
      this.requestWpInfo(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;
            that.tqmap.name = res.data.jczbmap.name;
            that.tqmap.resCode = that.resCode;
            let fjmap = [];
            let keys = [
              "value1",
              "value2",
              "value3",
              "value4",
              "value5",
              "value6",
              "value7",
              "value9",
            ];
            let Powertrend = {
              // 图表所用单位
              units: ["(万KWh)", "(风速)"],
              value: [
                {
                  title: "应发功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "实发功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "理论功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "预测功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "保证功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "平均风速",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "小时预测功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "最优功率",
                  smooth: true, // 使用单位
                  value: [],
                },
              ],
            };
            let Powertrend1 = {
              // 图表所用单位
              units: ["(万KWh)", "(风速)"],
              value: [
                {
                  title: "应发功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "实发功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "理论功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "预测功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "保证功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "平均功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "小时预测功率",
                  smooth: true, // 使用单位
                  value: [],
                },
                {
                  title: "最优功率",
                  smooth: true, // 使用单位
                  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],
                });
                Powertrend1.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.Powertrend1 = Powertrend1;
            that.jczbmap = res.data.jczbmap;
            that.pieChartData = {
              dayData,
              monthData,
              yearData,
            };
          } else {
            that.fjmap = [];
            that.Powertrend = {};
            that.Powertrend1 = {};
            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 column = [
              {
                name: "",
                field: "tit",
                is_num: false,
                is_light: false,
              },
            ],
            tableData = [];
          let data = [
            {
              title: "日发电量",
              yAxisIndex: 0,
              value: [],
            },
            {
              title: "预测电量",
              yAxisIndex: 0,
              value: [],
            },
            {
              title: that.resCode.indexOf("FDC") !== -1 ? "风速" : "日照",
              yAxisIndex: 0,
              value: [],
            },
            {
              title: "上网电量",
              yAxisIndex: 0,
              value: [],
            },
          ];

          res.data.forEach((ele, idx) => {
            data[0].value.push({
              text: ele.timestr,
              value: ele.value1 || 0,
            });
            data[1].value.push({
              text: ele.timestr,
              value: ele.value2 || 0,
            });
            data[2].value.push({
              text: ele.timestr,
              value: ele.value3 || 0,
            });
            data[3].value.push({
              text: ele.timestr,
              value: ele.value4 || 0,
            });

            column.push({
              name: ele.timestr,
              field: idx,
              is_num: false,
              is_light: false,
            });
          });
          that.CompleteElectricity.data = data;
          data.forEach((ele, idx) => {
            let obj = [];
            ele.value.forEach((ele2, idx2) => {
              obj[idx2] = ele2.value;
            });
            obj["tit"] = ele.title;
            tableData.push(obj);
          });
          that.tableData = {
            column: column,
            data: tableData,
          };
        },
      });
    },

    // 获取月发电量对比
    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;
        },
      });
    },
    rfdl() {
      this.rfdlDialog = true;
    },
  },

  created() {
    let that = this;
    that.wpId = that.$route.params.wpId;
    that.paramsId = that.$route.params.wpId;
    that.resCode = that.$route.params.wpId;
    that.stationChartData =
      require(`./stationJson/${that.$route.params.wpId}.js`).default;
    that.$nextTick(() => {
      that.getWp();
      that.requestData(false);
      that.requestLoss(false);
      that.requestPower(false);
      that.requestMonthPower(false);
      that.timmer = setInterval(() => {
        that.requestData(false);
      }, 60000);
      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.stationChartData =
        require(`./stationJson/${this.$route.params.wpId}.js`).default;
      if (res.params.wpId) {
        this.requestData(false);
        this.renderBtnActiveIndex();
        this.requestLoss();
        this.requestPower();
        this.requestMonthPower();
      }
    },
  },
};
</script>

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

  .wind-site-info {
    margin-left: 0.7407vh;
    // flex: 1 0 auto;
    width: 33%;
    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 {
        width: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;

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

        .value {
          text-align: center;
          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;
        justify-content: center;
        padding: 4px 0;

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

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

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

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

  .light-matrix-panel {
    width: 673px;
    overflow-y: scroll;
    height: 240px;

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

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