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"
        />
        <!-- <multiple-bar-line-chart1
          :height="'16.6667vh'"
          :barData="powerChartData"
          :lineData="powerChartLineData"
          :units="['(kWh)']"
          :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)', '(功率)']"
              :showLegend="true"
              :hoverType="'axis'"
            />
          </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="'80%'"
                    :height="'180px'"
                    :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>
              <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>
              <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>
              <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>
              <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>
              <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>
              <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>
              <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>
              <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>
              <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>
              <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>
              <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>
              <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 "./area-line-chart.vue";
// import AreaLineChart from "../../components/chart/line/multiple-y-line-chart-normal.vue";
// import AreaLineChart from "../../components/chart/combination/area-line-chart.vue";
// import MultipleBarLineChart1 from "./multiple-bar-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 "../../components/chart/radar/direction-radar-chart.vue";
import RadarChart from "../../components/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,
    // MultipleBarLineChart1,
    MultipleBarLineChart,
    Table,
    MarkerLineChart,
    DirectionRadarChart,
    DualPieChart,
    RadarChart,
  },
  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"];

          let lostChartData = [
            {
              text: "实发功率",
              yAxisIndex: 0,
              value: [],
            },
            {
              text: "保证功率",
              yAxisIndex: 0,
              value: [],
            },
            {
              text: "风速",
              yAxisIndex: 3,
              value: [],
            },
          ];
          const lostChartUnit = ["实发功率", "保证功率", "风速"];

          keyArray.forEach((key, keyIndex) => {
            res.data.forEach((ele) => {
              lostChartData[keyIndex].value.push({
                text: new Date(ele.time).formatDate("MM-dd 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("MM-dd 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 = ["value2", "value3", "value4"];

          let powerLineChartData = [
            {
              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, logFlg) {
      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) {
            mgtData.indicator = [
              "北",
              "北北西",
              "北西",
              "西北西",
              "西",
              "西南西",
              "南西",
              "南南西",
              "南",
              "南南东",
              "东南",
              "东南东",
              "东",
              "东北东",
              "北东",
              "北北东",
            ];
            res.data.data.forEach((ele) => {
              // mgtData.indicator.push(ele.name);
              mgtData.data[0].value.push(ele.data1);
            });
          }
          mgtData.data[0].value.reverse();
          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 {
        white-space: nowrap;
        font-size: 12px;
        flex: 0 0 80px;
        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>