sis_zhfx/src/views/NewPages/dj1.vue

<template>
  <div class="dj-1">
    <div class="action-bar">
      <div class="selections mg-b-16">
        <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">风机运行情况信息</div>
        <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">风机日详细信息</div>
        <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">风场玫瑰图</div>
        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">风机玫瑰图</div>
        <div class="item" @click="tabSelect(4)" :class="{ active: tabIndex == 4 }">风机切入切出分析</div>
      </div>
      <div class="query mg-b-16">
        <div class="query-items">
          <div class="query-item">
            <div class="lable">风场：</div>
            <div class="search-input">
              <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change="getWtArray">
                <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </div>
          </div>
          <div class="query-item">
            <div class="lable">风机：</div>
            <div class="search-input">
              <el-select v-model="wtId" clearable placeholder="请选择" popper-class="select">
                <el-option v-for="item in wtArray" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </div>
          </div>
          <div class="query-item">
            <div class="lable">日期：</div>
            <div class="search-input">
              <el-date-picker v-model="recorddate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期"
                popper-class="date-select">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green" @click="search">搜索</button>
        </div>
      </div>
    </div>

    <!-- tab1 -->
    <div v-if="tabIndex == 0" class="tab-1">
      <panel :title="'损失电量分析'" class="mg-b-16">
        <area-line-chart :height="'23.1481vh'" :lineData="lostChartData" :units="lostChartUnit" :areaData="LostChartBgColorData"
          @areaClick="areaBarChartClick" :showLegend="true" />
      </panel>
      <panel :title="'电量'" class="mg-b-16">
        <multiple-bar-line-chart :height="'16.6667vh'" :barData="powerChartData" :lineData="powerChartLineData" :units="['(kWh)']"
          :showLegend="true" />
      </panel>
      <div class="table-info">
        <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
          <Table :data="warnTableData" :canScroll="true" :height="'32.5vh'" />
        </panel>
        <panel class="table-panel" :title="'当日故障记录'" :showLine="false">
          <Table :data="stopTableData" :canScroll="true" :height="'32.5vh'" />
        </panel>
        <panel class="table-panel" :title="'当日限电记录'" :showLine="false">
          <Table :data="xdTableData" :canScroll="true" :height="'32.5vh'" />
        </panel>
      </div>
    </div>

    <!-- tab2 -->
    <div v-if="tabIndex == 1" class="tab-2">
      <el-row>
        <el-col :span="15">
          <panel :title="'功率曲线'" class="mg-b-16">
            <marker-line-chart :height="'28vh'" :list="powerLineChartData" :units="['(MW)', '(m/s)']" :showLegend="true" />
          </panel>
          <panel :title="'日发电量信息'" class="mg-b-16 outline" :showLine="false">
            <div class="power-info">
              <div class="info-item">
                <div class="text">发电量：</div>
                <div class="value green">{{dayPowerInfo.c1}}</div>
              </div>
              <div class="info-item">
                <div class="text">理论发电量：</div>
                <div class="value green">{{dayPowerInfo.c4}}</div>
              </div>
              <div class="info-item">
                <div class="text">平均功率：</div>
                <div class="value green">{{dayPowerInfo.c7}}</div>
              </div>
              <div class="info-item">
                <div class="text">平均风速：</div>
                <div class="value green">{{dayPowerInfo.c10}}</div>
              </div>
              <div class="info-item">
                <div class="text">拟合优度：</div>
                <div class="value green">{{dayPowerInfo.c55}}</div>
              </div>
              <div class="info-item">
                <div class="text">运行小时：</div>
                <div class="value green">{{dayPowerInfo.c13}}</div>
              </div>
              <div class="info-item">
                <div class="text">停机小时：</div>
                <div class="value green">{{dayPowerInfo.c16}}</div>
              </div>
              <div class="info-item">
                <div class="text">故障小时：</div>
                <div class="value green">{{dayPowerInfo.c19}}</div>
              </div>
              <div class="info-item">
                <div class="text">维护小时：</div>
                <div class="value green">{{dayPowerInfo.c22}}</div>
              </div>
              <div class="info-item">
                <div class="text">中断小时：</div>
                <div class="value green">{{dayPowerInfo.c25}}</div>
              </div>
              <div class="info-item">
                <div class="text">有效风时数：</div>
                <div class="value green">{{dayPowerInfo.c28}}</div>
              </div>
              <div class="info-item">
                <div class="text">损失电量：</div>
                <div class="value green">{{dayPowerInfo.c31}}</div>
              </div>
              <div class="info-item">
                <div class="text">报警次数：</div>
                <div class="value green">{{dayPowerInfo.c34}}</div>
              </div>
              <div class="info-item">
                <div class="text">停机次数：</div>
                <div class="value green">{{dayPowerInfo.c37}}</div>
              </div>
              <div class="info-item">
                <div class="text">不饱和次数：</div>
                <div class="value green">{{dayPowerInfo.c40}}</div>
              </div>
              <div class="info-item">
                <div class="text">设备可利用率：</div>
                <div class="value green">{{dayPowerInfo.c43}}</div>
              </div>
              <div class="info-item">
                <div class="text">实际/保证偏差率：</div>
                <div class="value green">{{dayPowerInfo.c58}}</div>
              </div>
              <div class="info-item">
                <div class="text">平均温度：</div>
                <div class="value green">{{dayPowerInfo.c46}}</div>
              </div>
              <div class="info-item">
                <div class="text">平均湿度：</div>
                <div class="value green">{{dayPowerInfo.c49}}</div>
              </div>
              <div class="info-item">
                <div class="text">平均压强：</div>
                <div class="value green">{{dayPowerInfo.c52}}</div>
              </div>
            </div>
          </panel>
          <div class="month-info">
            <div class="month-info-left">
              <panel :title="'月发电量信息'" class="mg-b-16 outline" :showLine="false">
                <div class="power-info month-3">
                  <div class="info-item">
                    <div class="text">月发电量：</div>
                    <div class="value green">{{dayPowerInfo.c2}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月理论发电量：</div>
                    <div class="value green">{{dayPowerInfo.c5}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月平均功率：</div>
                    <div class="value green">{{dayPowerInfo.c8}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月平均风速：</div>
                    <div class="value green">{{dayPowerInfo.c11}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月拟合优度：</div>
                    <div class="value green">{{dayPowerInfo.c56}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月运行小时：</div>
                    <div class="value green">{{dayPowerInfo.c14}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月停机小时：</div>
                    <div class="value green">{{dayPowerInfo.c17}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月故障小时：</div>
                    <div class="value green">{{dayPowerInfo.c20}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月维护小时：</div>
                    <div class="value green">{{dayPowerInfo.c23}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月中断小时：</div>
                    <div class="value green">{{dayPowerInfo.c26}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月有效风时数：</div>
                    <div class="value green">{{dayPowerInfo.c29}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月报警次数：</div>
                    <div class="value green">{{dayPowerInfo.c35}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月停机次数：</div>
                    <div class="value green">{{dayPowerInfo.c38}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月实际/保证：</div>
                    <div class="value green">{{dayPowerInfo.c59}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">设备可利用率：</div>
                    <div class="value green">{{dayPowerInfo.c44}}</div>
                  </div>
                </div>
              </panel>
            </div>
            <div class="month-info-right">
              <panel :title="'年发电量信息'" class="mg-b-16 outline" :showLine="false">
                <div class="power-info month-2">
                  <div class="info-item">
                    <div class="text">年发电量：</div>
                    <div class="value green">{{dayPowerInfo.c3}}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">年拟合优度：</div>
                    <div class="value green">{{dayPowerInfo.c57}}</div>
                  </div>
                </div>
              </panel>
              <panel :title="'风资源'" class="radar-panel" :icon="'svg-wind-site'">
                <div class="wind-info">
                  <div class="legend mg-r-16">
                    <span class="dot"></span>
                    <span>{{jfplStr}}</span>
                  </div>
                  <direction-radar-chart :width="'60%'" :height="'152px'" :value="windResourcesData" :showLegend="true" />
                </div>
              </panel>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <panel class="table-panel outline mg-b-16" :title="'当日报警记录'" :showLine="false">
            <Table :data="warnTableData" :canScroll="true" :height="'23vh'" />
          </panel>
          <panel class="table-panel outline mg-b-16" :title="'当日故障记录'" :showLine="false">
            <Table :data="stopTableData" :canScroll="true" :height="'23vh'" />
          </panel>
          <panel class="table-panel outline" :title="'当月报警排行'" :showLine="false">
            <Table :data="monthWarnRecordData" :canScroll="true" :height="'23vh'" />
          </panel>
        </el-col>
      </el-row>
    </div>

    <!-- tab3 -->
    <div v-if="tabIndex == 2" class="tab-3">
      <el-row>
        <el-col :span="8">
          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{rzdfsStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="rzdfsData" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'月最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{yzdfsStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'年最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{nzdfsStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
            </div>
          </panel>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <panel :title="'日风向频率'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{rfxplStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="rfxplData" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'月风向频率'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{yfxplStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="yfxplData" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'年风向频率'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{nfxplStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="nfxplData" />
            </div>
          </panel>
        </el-col>
      </el-row>
    </div>

    <!-- tab4 -->
    <div v-if="tabIndex == 3" class="tab-4">
      <el-row>
        <el-col :span="8">
          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{rzdfsStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="rzdfsData" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'月最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{yzdfsStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'年最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{nzdfsStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
            </div>
          </panel>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <panel :title="'日风向频率'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{rfxplStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="rfxplData" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'月风向频率'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{yfxplStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="yfxplData" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'年风向频率'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>{{nfxplStr}}</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" :value="nfxplData" />
            </div>
          </panel>
        </el-col>
      </el-row>
    </div>

    <!-- tab5 -->
    <div v-if="tabIndex == 4" class="tab-5">
      <el-row>
        <el-col :span="8">
          <panel title="日小风切入">
            <dual-pie-chart height="350px" :innerData="dayWindPieData" :outerData="dayWindPieData" />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="月小风切入">
            <dual-pie-chart height="350px" :innerData="monthWindPieData" :outerData="monthWindPieData" />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="年小风切入">
            <dual-pie-chart height="350px" :innerData="yearWindPieData" :outerData="myearWindPieData" />
          </panel>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <panel title="日小风停机">
            <dual-pie-chart height="350px" :innerData="dayStopPieData" :outerData="dayStopPieData" />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="月小风停机">
            <dual-pie-chart height="350px" :innerData="monthStopPieData" :outerData="monthStopPieData" />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="年小风停机">
            <dual-pie-chart height="350px" :innerData="yearStopPieData" :outerData="yearStopPieData" />
          </panel>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="区域详情查看" v-model="dialogShow" width="85%" top="10vh" custom-class="modal" :close-on-click-modal="true">
      <el-form ref="form" label-width="100px" inline>
        <el-form-item style="width: 32%;" label="开始时间：">{{form.ks}}</el-form-item>
        <el-form-item style="width: 32%;" label="结束时间：">{{form.js}}</el-form-item>
        <el-form-item style="width: 32%;" label="时长：">{{form.sc}}(小时)</el-form-item>
        <el-form-item style="width: 32%;" label="风速：">{{form.fs}}(m/s)</el-form-item>
        <el-form-item style="width: 32%;" label="功率：">{{form.gl}}(KW)</el-form-item>
        <el-form-item style="width: 32%;" label="理论发电量：">{{form.llfdl}}(KWh)</el-form-item>
        <el-form-item style="width: 32%;" label="发电量：">{{form.fdl}}(KWh)</el-form-item>
        <el-form-item style="width: 32%;" label="损失电量：">{{form.ssdl}}(KWh)</el-form-item>
        <el-form-item style="width: 32%;" label="风机状态：">{{form.fjzt}}</el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import AreaLineChart from "../../components/chart/combination/area-line-chart.vue";
import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
import MarkerLineChart from "../../components/chart/line/multiple-line-chart.vue";
import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
import DirectionRadarChart from "@com/chart/radar/radar-chart.vue";
import panel from "../../components/coms/panel/panel.vue";
import Table from "../../components/coms/table/table.vue";
export default {
  components: { panel, AreaLineChart, MultipleBarLineChart, Table, MarkerLineChart, DirectionRadarChart, DualPieChart },
  setup () { },
  data () {
    return {
      tabIndex: 0,
      tableData: {
        column: [
          {
            name: "风机",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "描述",
            field: "desc",
            is_num: false,
            is_light: false,
          },
          {
            name: "报警时间",
            field: "date",
            is_num: false,
            is_light: false,
          },
        ],
        data: []
      },

      wpArray: [],
      wpId: "",
      wtArray: [],
      wtId: "",

      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),

      lostChartData: [{
        text: "",
        value: []
      }],
      lostChartUnit: [],
      LostChartBgColorData: [{
        name: ""
      }],

      powerChartData: [{
        title: "",
        yAxisIndex: 0,
        value: []
      }],

      powerChartLineData: {
        name: "",
        unit: "",
        data: []
      },

      warnTableData: {
        column: [
          {
            name: "风机",
            field: "windturbineid",
            is_num: false,
            is_light: false,
          },
          {
            name: "描述",
            field: "warnDesc",
            is_num: false,
            is_light: false,
          },
          {
            name: "报警时间",
            field: "warningtime",
            is_num: false,
            is_light: false,
          },
        ],
        data: []
      },

      stopTableData: {
        column: [
          {
            name: "风机",
            field: "windTurbineId",
            is_num: false,
            is_light: false,
          },
          {
            name: "停机时间",
            field: "stopTime",
            is_num: false,
            is_light: false,
          },
          {
            name: "恢复时间",
            field: "starttime",
            is_num: false,
            is_light: false,
          },
        ],
        data: []
      },

      xdTableData: {
        column: [
          {
            name: "风机",
            field: "windturbineid",
            is_num: false,
            is_light: false,
          },
          {
            name: "停机时间",
            field: "stoptime",
            is_num: false,
            is_light: false,
          },
          {
            name: "恢复时间",
            field: "starttime",
            is_num: false,
            is_light: false,
          },
          {
            name: "损失电量",
            field: "losspower",
            is_num: false,
            is_light: false,
          },
          {
            name: "限电时长",
            field: "stophours",
            is_num: false,
            is_light: false,
          }
        ],
        data: []
      },

      powerLineChartData: [{
        title: "",
        yAxisIndex: 0,
        value: []
      }],

      dayPowerInfo: {},

      monthWarnRecordData: {
        column: [
          {
            name: "名字",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "次数",
            field: "frequency",
            is_num: true,
            is_light: false,
          }
        ],
        data: []
      },

      jfplStr: "",
      windResourcesData: {
        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
        data: [{
          value: [44200, 14200, 20000, 35000, 50000, 38000],
          name: ""
        }]
      },

      rzdfsStr: "",
      rzdfsData: {
        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
        data: [{
          value: [44200, 14200, 20000, 35000, 50000, 38000],
          name: ""
        }]
      },

      yzdfsStr: "",
      yzdfsData: {
        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
        data: [{
          value: [44200, 14200, 20000, 35000, 50000, 38000],
          name: ""
        }]
      },

      nzdfsStr: "",
      nzdfsData: {
        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
        data: [{
          value: [44200, 14200, 20000, 35000, 50000, 38000],
          name: ""
        }]
      },

      rfxplStr: "",
      rfxplData: {
        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
        data: [{
          value: [44200, 14200, 20000, 35000, 50000, 38000],
          name: ""
        }]
      },

      yfxplStr: "",
      yfxplData: {
        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
        data: [{
          value: [44200, 14200, 20000, 35000, 50000, 38000],
          name: ""
        }]
      },

      nfxplStr: "",
      nfxplData: {
        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
        data: [{
          value: [44200, 14200, 20000, 35000, 50000, 38000],
          name: ""
        }]
      },

      dayWindPieData: [],
      monthWindPieData: [],
      yearWindPieData: [],
      dayStopPieData: [],
      monthStopPieData: [],
      yearStopPieData: [],

      dialogShow: false,

      form: {}
    };
  },
  methods: {
    // 获取风场
    getWpArray () {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAjax",
        success (res) {
          that.wpArray = res.data;
          that.wpId = that.wpId || res.data[0].id;
          that.getWtArray(that.wpId, true);
        }
      });
    },

    // 获取风机
    getWtArray (wpId, keepRequest) {
      let that = this;
      if (wpId) {
        that.API.requestData({
          method: "GET",
          subUrl: "powercompare/windturbineAjax",
          data: {
            wpId
          },
          success (res) {
            that.wtArray = res.data;
            const findRes = res.data.some(ele => {
              return ele.id === that.wtId;
            });
            that.wtId = (findRes ? that.wtId : res.data[0].id);
            if (keepRequest) {
              that.search();
            }
          }
        });
      } else {
        that.wtArray = [];
        that.wtId = "";
      }
    },

    // tab1 - 获取损失电量分析图表数据
    getLostChartData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/findWtRealPowerChar",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          const keyArray = ["value1", "value2", "value3", "value4"];

          let lostChartData = [{
            text: "实发功率",
            value: [{
              text: "1",
              value: 1,
            }]
          }, {
            text: "保证功率",
            value: []
          }, {
            text: "风速",
            value: []
          }, {
            text: "状态",
            value: []
          }];
          const lostChartUnit = ["实发功率", "保证功率", "风速", "状态"];

          keyArray.forEach((key, keyIndex) => {
            res.data.forEach(ele => {
              lostChartData[keyIndex].value.push({
                text: new Date(ele.time).formatDate("hh:mm"),
                value: ele[key]
              });
            });
          });
          that.lostChartData = lostChartData;
          that.lostChartUnit = lostChartUnit;
          that.getLostChartBgColorData();
        }
      });
    },

    // tab1 - 获取损失电量分析图表背景颜色
    getLostChartBgColorData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/getplotBands",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          let LostChartBgColorData = [];
          res.data.forEach((pEle, pIndex) => {
            LostChartBgColorData.push({
              name: pEle[0].name,
              start: (pIndex ? LostChartBgColorData[pIndex - 1].end : 0),
              end: (pIndex ? LostChartBgColorData[pIndex - 1].end : 0) + ((new Date(pEle[0].time2).getTime() / 1000) - (new Date(pEle[0].time1).getTime() / 1000)),
              color: pEle[0].itemStyle.color,
              beginDate: pEle[0].time1,
              endDate: pEle[0].time2,
              wtId: that.wtId
            });
          });
          that.LostChartBgColorData = LostChartBgColorData;
        }
      });
    },

    // 损失电量分析图背景颜色区域点击事件
    areaBarChartClick (item) {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/plotBandAjax",
        data: {
          wtId: item.data.wtId,
          beginDate: item.data.beginDate,
          endDate: item.data.endDate
        },
        success (res) {
          that.form = res.data || {};
          that.dialogShow = true;
        }
      });
    },

    // tab1 - 获取电量图表数据
    getPowerChartData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/findRealPowerCharBy24",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          const keyArray = ["value1", "value2", "value3", "value4", "value5"];

          let powerChartData = [{
            title: "scada发电量",
            yAxisIndex: 0,
            value: []
          }, {
            title: "维护损失",
            yAxisIndex: 0,
            value: []
          }, {
            title: "故障损失",
            yAxisIndex: 0,
            value: []
          }, {
            title: "限电损失",
            yAxisIndex: 0,
            value: []
          }, {
            title: "欠发损失",
            yAxisIndex: 0,
            value: []
          }];

          let powerChartLineData = {
            name: "风速",
            unit: "(m/s)",
            data: []
          }

          keyArray.forEach((keyEle, keyIndex) => {
            res.data.forEach(ele => {
              powerChartData[keyIndex].value.push({
                text: new Date(ele.time).formatDate("hh:mm"),
                value: ele[keyEle]
              });
              powerChartLineData.data.push(ele.value6);
            });
          });
          that.powerChartData = powerChartData;
          that.powerChartLineData = powerChartLineData;
        }
      });
    },

    // tab1 - 获取当日报警数据
    getWarnData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/bjjllist",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          res.data.list.forEach(ele => {
            ele.warningtime = new Date(ele.warningtime).formatDate("yyyy-MM-dd hh:mm:ss")
          });
          that.warnTableData.data = res.data.list;
        }
      });
    },

    // tab1 - 获取当日故障数据
    getStopData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/gzjllist",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          res.data.list.forEach(ele => {
            ele.stopTime = new Date(ele.stopTime).formatDate("yyyy-MM-dd hh:mm:ss");
            ele.starttime = (ele.starttime ? new Date(ele.starttime).formatDate("yyyy-MM-dd hh:mm:ss") : "");
          });
          that.stopTableData.data = res.data.list;
        }
      });
    },

    // tab1 - 获取当日限电数据
    getXdData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/xdjllist",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          res.data.list.forEach(ele => {
            ele.stopTime = new Date(ele.stopTime).formatDate("yyyy-MM-dd hh:mm:ss");
            ele.starttime = (ele.starttime ? new Date(ele.starttime).formatDate("yyyy-MM-dd hh:mm:ss") : "");

          });
          that.xdTableData.data = res.data.list;
        }
      });
    },

    // tab2 - 获取日发电量信息
    getDayPowerInfo () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/wadAjax",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          that.dayPowerInfo = res.data;
        }
      });
    },

    // tab2 - 获取当月报警排行
    getMonthWarnRecord () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/bjphlist",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          that.monthWarnRecordData.data = res.data;
        }
      });
    },

    // tab2 - 获取当月报警排行
    getPowerLineChartData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/glchat",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          const keyArray = ["value1", "value2", "value3", "value4"];

          let powerLineChartData = [{
            title: "风速",
            yAxisIndex: 1,
            value: []
          }, {
            title: "实际拟合功率",
            yAxisIndex: 0,
            value: []
          }, {
            title: "最优功率",
            yAxisIndex: 0,
            value: []
          }, {
            title: "保证功率",
            yAxisIndex: 0,
            value: []
          }];

          keyArray.forEach((keyEle, keyIndex) => {
            res.data.forEach((ele, index) => {
              powerLineChartData[keyIndex].value.push({
                text: (index + 1),
                value: ele[keyEle]
              });
            });
          });

          that.powerLineChartData = powerLineChartData;
        }
      });
    },

    // tab2 - 获取当月报警排行
    getWindResources () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/fjfzy",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          that.jfplStr = res.data.jfpl || "";

          let windResourcesData = {
            indicator: [],
            data: [{
              name: "",
              value: []
            }]
          };

          if (res.data.data) {
            res.data.data.forEach((ele) => {
              windResourcesData.indicator.push(ele.name);
              windResourcesData.data[0].value.push(ele.data1);
            });
          }

          that.windResourcesData = windResourcesData;
        }
      });
    },

    // tab3,tab4 - 获取玫瑰图
    getMgt (subUrl, data, dataKey) {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl,
        data,
        success (res) {
          that[dataKey.split("Data")[0] + "Str"] = res.data.jfpl || "";

          let mgtData = {
            indicator: [],
            data: [{
              name: "",
              value: []
            }]
          };

          if (res.data.data) {
            res.data.data.forEach((ele) => {
              mgtData.indicator.push(ele.name);
              mgtData.data[0].value.push(ele.data1);
            });
          }

          that[dataKey] = mgtData;
        }
      });
    },

    // tab5 - 获取饼图
    getPieChart (subUrl, type, dataKey) {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl,
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate,
          type,
        },
        success (res) {
          let pieChart = [];

          res.data.forEach(ele => {
            pieChart.push({
              name: ele.name,
              value: ele.value2,
              unit: "(m/s)"
            });
          });

          that[dataKey] = pieChart;
        }
      });
    },

    // 切换tab 
    tabSelect (index) {
      this.tabIndex = index;
      this.search();
    },

    // 搜索
    search () {
      if (this.tabIndex === 0) {
        this.getLostChartData();
        this.getPowerChartData();
        this.getWarnData();
        this.getStopData();
        this.getXdData();
      } else if (this.tabIndex === 1) {
        this.getWarnData();
        this.getStopData();
        this.getDayPowerInfo();
        this.getMonthWarnRecord();
        this.getPowerLineChartData();
        this.getWindResources();
      } else if (this.tabIndex === 2) {
        const xhrParam = { wpId: this.wpId, recorddate: this.recorddate };
        this.getMgt("goodness/wprzdfs", xhrParam, "rzdfsData");
        this.getMgt("goodness/wpyzdfs", xhrParam, "yzdfsData");
        this.getMgt("goodness/wpnzdfs", xhrParam, "nzdfsData");
        this.getMgt("goodness/wprfxpl", xhrParam, "rfxplData");
        this.getMgt("goodness/wpyfxpl", xhrParam, "yfxplData");
        this.getMgt("goodness/wpnfxpl", xhrParam, "nfxplData");
      } else if (this.tabIndex === 3) {
        const xhrParam = { wtId: this.wtId, recorddate: this.recorddate };
        this.getMgt("goodness/wtrzdfs", xhrParam, "rzdfsData");
        this.getMgt("goodness/wtyzdfs", xhrParam, "yzdfsData");
        this.getMgt("goodness/wtnzdfs", xhrParam, "nzdfsData");
        this.getMgt("goodness/wtrfxpl", xhrParam, "rfxplData");
        this.getMgt("goodness/wtyfxpl", xhrParam, "yfxplData");
        this.getMgt("goodness/wtnfxpl", xhrParam, "nfxplData");
      } else if (this.tabIndex === 4) {
        this.getPieChart("goodness/pieChart", "1", "dayWindPieData");
        this.getPieChart("goodness/pieChart", "2", "monthWindPieData");
        this.getPieChart("goodness/pieChart", "3", "yearWindPieData");
        this.getPieChart("goodness/pieChart", "4", "dayStopPieData");
        this.getPieChart("goodness/pieChart", "5", "monthStopPieData");
        this.getPieChart("goodness/pieChart", "6", "yearStopPieData");
      }
    }
  },
  created () {
    this.getWpArray();
    this.wpId = this.$route.params.wpId || "";
    this.wtId = this.$route.params.wtId || "";
  },
};
</script>

<style lang="less">
.dj-1 {
  .action-bar {
    display: flex;

    .selections {
      flex: 1 0 auto;
      display: flex;

      .item {
        flex: 0 0 164px;
        text-align: center;
        height: 33px;
        line-height: 33px;
        margin-right: 8px;
        color: @font-color;
        font-size: @fontsize-s;
        background: fade(@gray, 20);
        border: 1px solid fade(@gray, 20);

        &:hover,
        &.active {
          background: fade(@green, 20);
          border: 1px solid @green;
          color: @green;
          cursor: pointer;
        }
      }
    }
  }

  .outline {
    outline: 1px solid fade(@gray, 50);
  }

  .com-panel .panel-header {
    margin-bottom: 0px;
  }

  .table-info {
    display: flex;

    .table-panel {
      flex: 1 0 calc(100% / 3 - 8px);
      outline: 1px solid fade(@gray, 50);
      height: 100%;
      & + .table-panel {
        margin-left: 8px;
      }
    }
  }

  .tab-2 {
    .power-info {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      &.month-3 {
        .info-item {
          flex: 0 0 calc(100% / 3 - 6px);
          &:nth-child(-n + 5) {
            margin-top: 8px;
          }

          &:nth-child(-n + 3) {
            margin-top: 0px;
          }
        }
      }
      &.month-2 {
        .info-item {
          flex: 0 0 calc(100% / 2 - 4px);
          &:nth-child(-n + 5) {
            margin-top: 8px;
          }

          &:nth-child(-n + 2) {
            margin-top: 0px;
          }
        }
      }

      .info-item {
        display: flex;
        align-items: center;

        flex: 0 0 calc(100% / 5 - 8px);
        background: fade(@gray, 20);
        height: 4.6296vh;
        line-height: 4.6296vh;
        margin-top: 8px;

        &:nth-child(-n + 5) {
          margin-top: 0px;
        }

        .text {
          font-size: 12px;
          flex: 0 0 110px;
          text-align: right;
          margin-right: 24px;
          color: @gray-l;
        }

        .value {
          font-size: 16px;
        }
      }
    }

    .month-info {
      display: flex;

      .month-info-left {
        flex: 0 0 705px;
        margin-right: 10px;
      }

      .month-info-right {
        flex: 1 0 auto;
      }
    }

    .moon-other {
      flex: 1 0 auto;
    }

    .radar-panel {
      height: 20.5vh;

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

    .wind-info {
      display: flex;

      .legend {
        font-size: 12px;
        flex: 0 0 140px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 32px;
        margin-bottom: 16px;

        .dot {
          width: 7px;
          height: 7px;
          background: @green;
          display: inline-block;
          margin-right: 8px;
        }
      }
    }
  }

  .tab-3,
  .tab-4 {
    .wind-info {
      position: relative;

      .legend {
        position: absolute;
        left: 32px;
        top: 32px;
        font-size: 12px;
        flex: 0 0 140px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 32px;
        margin-bottom: 16px;

        .dot {
          width: 7px;
          height: 7px;
          background: @green;
          display: inline-block;
          margin-right: 8px;
        }
      }
    }
  }

  .tab-5 {
    .panel-body {
      padding: 16px;
    }
  }
}
</style>