jn_sis_zhfx/src/views/economicsOperation/windAnalyse/singleWindAnasyle/windDetailDialog.vue

<template>
  <div class="windDetail" :class="$store.state.isLeft ? 'windDetailWidth' : ''">
    <div class="action-bar">
      <div class="selections">
        <div
          class="selections_btn"
          @click="tabSelect(0)"
          :class="{ active: tabIndex == 0 }"
        >
          风机运行情况信息
        </div>
        <div
          class="selections_btn"
          @click="tabSelect(1)"
          :class="{ active: tabIndex == 1 }"
        >
          风机日详细信息
        </div>
        <div
          class="selections_btn"
          @click="tabSelect(2)"
          :class="{ active: tabIndex == 2 }"
        >
          测风塔玫瑰图
        </div>
        <div
          class="selections_btn"
          @click="tabSelect(3)"
          :class="{ active: tabIndex == 3 }"
        >
          风机玫瑰图
        </div>
        <div
          class="selections_btn"
          @click="tabSelect(4)"
          :class="{ active: tabIndex == 4 }"
        >
          风机切入切出分析
        </div>
      </div>
      <div class="windDetailseach">
        <div class="query-items">
          <div class="query-item">
            <div class="label">{{ tabIndex != 2 ? "风场：" : "测风塔：" }}</div>
            <el-select
              v-model="wpId"
              clearable
              placeholder="请选择"
              @change="changeStationsVal"
            >
              <el-option
                v-for="item in tabIndex != 2 ? wpArray : cftlist"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </div>
          <div class="query-item" v-if="tabIndex != 2">
            <div class="label">风机：</div>
            <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 class="query-item">
            <div class="label">风场：</div>
            <el-select
              v-model="wpId"
              clearable
              placeholder="请选择"
              @change="changeStationsVal"
            >
              <el-option
                v-for="item in wpArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </div>
          <div class="query-item">
            <div class="label">风机：</div>
            <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.aname"
              />
            </el-select>
          </div> -->
          <div class="query-item">
            <div class="label">日期：</div>
            <el-date-picker
              v-model="recorddate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              size="mini"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="query-actions">
          <el-button class="buttons" size="mini" round @click="search"
            >搜索</el-button
          >
        </div>
      </div>
    </div>

    <!-- tab1 -->
    <div v-if="tabIndex == 0" class="TabOne tabs">
      <panel :title="'功率分析'" class="TabOne_topChart">
        <area-line-chart
          :height="'100%'"
          :lineData="lostChartData"
          :units="lostChartUnit"
          :areaData="LostChartBgColorData"
          @areaClick="areaBarChartClick"
          :showLegend="true"
        />
      </panel>
      <panel :title="'损失电量分析'" class="TabOne_centerChart">
        <multiple-bar-line-chart
          :height="'100%'"
          :barData="powerChartData"
          :lineData="powerChartLineData"
          :units="['(kWh)', '(m/s)']"
          :showLegend="true"
        />
      </panel>
      <div class="table-info">
        <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
          <Table :data="warnTableData" :canScroll="true" :height="'100%'" />
        </panel>
        <panel class="table-panel" :title="'当日故障记录'" :showLine="false">
          <Table :data="stopTableData" :canScroll="true" :height="'100%'" />
        </panel>
        <panel class="table-panel" :title="'当日限电记录'" :showLine="false">
          <Table :data="xdTableData" :canScroll="true" :height="'100%'" />
        </panel>
      </div>
    </div>

    <!-- tab2 -->
    <div v-if="tabIndex == 1" class="tab-2 tabs">
      <el-row style="height: 100%">
        <el-col style="height: 100%; padding-right: 10px" :span="15">
          <panel :title="'功率曲线'" style="height: 270px; margin-bottom: 10px">
            <marker-line-chart
              :height="'100%'"
              :list="powerLineChartData"
              :units="['(MW)', '(功率)']"
              :showLegend="true"
            />
          </panel>
          <panel
            :title="'日发电量信息'"
            style="height: 297px; margin-bottom: 10px"
            :showLine="false"
          >
            <div class="power-info">
              <div class="info-item">
                <div class="text">发电量：</div>
                <div class="value green">{{ dayPowerInfo.rfdl }}</div>
              </div>
              <div class="info-item">
                <div class="text">理论发电量：</div>
                <div class="value green">{{ dayPowerInfo.ryfdl }}</div>
              </div>
              <div class="info-item">
                <div class="text">平均功率：</div>
                <div class="value green">{{ dayPowerInfo.rpjgl }}</div>
              </div>
              <div class="info-item">
                <div class="text">平均风速：</div>
                <div class="value green">{{ dayPowerInfo.rpjfs }}</div>
              </div>
              <div class="info-item">
                <div class="text">拟合优度：</div>
                <div class="value green">{{ dayPowerInfo.rnhyd }}</div>
              </div>
              <div class="info-item">
                <div class="text">运行小时：</div>
                <div class="value green">{{ dayPowerInfo.ryxxs }}</div>
              </div>
              <div class="info-item">
                <div class="text">停机小时：</div>
                <div class="value green">
                  {{ Number(dayPowerInfo.rgzxs) + Number(dayPowerInfo.rjxxs) }}
                </div>
              </div>
              <div class="info-item">
                <div class="text">故障小时：</div>
                <div class="value green">{{ dayPowerInfo.rgzxs }}</div>
              </div>
              <div class="info-item">
                <div class="text">维护小时：</div>
                <div class="value green">{{ dayPowerInfo.rjxxs }}</div>
              </div>
              <div class="info-item">
                <div class="text">中断小时：</div>
                <div class="value green">{{ dayPowerInfo.rzdxs }}</div>
              </div>
              <div class="info-item">
                <div class="text">有效风时数：</div>
                <div class="value green">{{ dayPowerInfo.ryxfs }}</div>
              </div>
              <div class="info-item">
                <div class="text">损失电量：</div>
                <div class="value green">{{ dayPowerInfo.rssdl }}</div>
              </div>
              <div class="info-item">
                <div class="text">报警次数：</div>
                <div class="value green">{{ dayPowerInfo.rbjcs }}</div>
              </div>
              <div class="info-item">
                <div class="text">停机次数：</div>
                <div class="value green">{{ dayPowerInfo.rtjcs }}</div>
              </div>
              <div class="info-item">
                <div class="text">不饱和次数：</div>
                <div class="value green">{{ dayPowerInfo.rbbhcs }}</div>
              </div>
              <div class="info-item">
                <div class="text">设备可利用率：</div>
                <div class="value green">{{ dayPowerInfo.rsbklyl }}</div>
              </div>
              <div class="info-item">
                <div class="text">实际/保证偏差率：</div>
                <div class="value green">{{ dayPowerInfo.rsjbz }}</div>
              </div>
              <div class="info-item">
                <div class="text">平均温度：</div>
                <div class="value green">{{ dayPowerInfo.rpjwd }}</div>
              </div>
              <div class="info-item">
                <div class="text">平均湿度：</div>
                <div class="value green">{{ dayPowerInfo.rpjsd }}</div>
              </div>
              <div class="info-item">
                <div class="text">平均压强：</div>
                <div class="value green">{{ dayPowerInfo.rpjyq }}</div>
              </div>
            </div>
          </panel>
          <div class="month-info">
            <div class="month-info-left">
              <panel
                :title="'月发电量信息'"
                style="height: 100%"
                :showLine="false"
              >
                <div class="power-info month-3">
                  <div class="info-item">
                    <div class="text">月发电量：</div>
                    <div class="value green">{{ dayPowerInfo.yfdl }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月理论发电量：</div>
                    <div class="value green">{{ dayPowerInfo.yyfdl }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月平均功率：</div>
                    <div class="value green">{{ dayPowerInfo.ypjgl }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月平均风速：</div>
                    <div class="value green">{{ dayPowerInfo.ypjfs }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月拟合优度：</div>
                    <div class="value green">{{ dayPowerInfo.ynhyd }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月运行小时：</div>
                    <div class="value green">{{ dayPowerInfo.yyxxs }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月停机小时：</div>
                    <div class="value green">
                      {{
                        Number(dayPowerInfo.ygzxs) + Number(dayPowerInfo.yjxxs)
                      }}
                    </div>
                  </div>
                  <div class="info-item">
                    <div class="text">月故障小时：</div>
                    <div class="value green">{{ dayPowerInfo.ygzxs }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月维护小时：</div>
                    <div class="value green">{{ dayPowerInfo.yjxxs }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月中断小时：</div>
                    <div class="value green">{{ dayPowerInfo.yzdxs }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月有效风时数：</div>
                    <div class="value green">{{ dayPowerInfo.yyxfs }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月报警次数：</div>
                    <div class="value green">{{ dayPowerInfo.ybjcs }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月停机次数：</div>
                    <div class="value green">{{ dayPowerInfo.ytjcs }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">月实际/保证：</div>
                    <div class="value green">{{ dayPowerInfo.ysjbz }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">设备可利用率：</div>
                    <div class="value green">{{ dayPowerInfo.ysbklyl }}</div>
                  </div>
                </div>
              </panel>
            </div>
            <div class="month-info-right">
              <panel
                :title="'年发电量信息'"
                style="height: calc(100% - 220px - 10px)"
                :showLine="false"
              >
                <div class="power-info month-2">
                  <div class="info-item">
                    <div class="text">年发电量：</div>
                    <div class="value green">{{ dayPowerInfo.nfdl }}</div>
                  </div>
                  <div class="info-item">
                    <div class="text">年拟合优度：</div>
                    <div class="value green">{{ dayPowerInfo.nnhyd }}</div>
                  </div>
                </div>
              </panel>
              <panel
                :title="'风资源'"
                class="radar-panel"
                :icon="'svg-wind-site'"
              >
                <div class="wind-info">
                  <div class="legend mg-r-16" v-if="jfplStr.length">
                    <span class="dot"></span>
                    <span style="color: #fff; white-space: nowrap">{{
                      jfplStr
                    }}</span>
                  </div>
                  <direction-radar-chart
                    :width="'80%'"
                    :height="'100%'"
                    :series="windResourcesData"
                    :showLegend="true"
                  />
                </div>
              </panel>
            </div>
          </div>
        </el-col>
        <el-col :span="9" style="height: 100%">
          <panel
            class="table-panel outline"
            :title="'当日报警记录'"
            :showLine="false"
          >
            <Table :data="warnTableData" :canScroll="true" :height="'23vh'" />
          </panel>
          <panel
            class="table-panel outline"
            :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 tabs">
      <el-row style="height: calc((100% - 10px) / 2); margin-bottom: 10px">
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'日最大风速'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend">
                <span class="dot"></span>
                <span class="titSty">{{ rzdfsStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="rzdfsData"
                title="日最大风速"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="rzdfsLen"
                :xAxis="rzdfsxaisx"
                :series="rzdfsData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'月最大风速'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend">
                <span class="dot"></span>
                <span class="titSty">{{ yzdfsStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="yzdfsData"
                title="月最大风速"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="yzdfsLen"
                :xAxis="yzdfsxaisx"
                :series="yzdfsData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'年最大风速'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend">
                <span class="dot"></span>
                <span class="titSty">{{ nzdfsStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="nzdfsData"
                title="年最大风速"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="nzdfsLen"
                :xAxis="nzdfsxaisx"
                :series="nzdfsData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
      </el-row>
      <el-row style="height: calc((100% - 10px) / 2)">
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'日风向频率'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend">
                <span class="dot"></span>
                <span class="titSty">{{ rfxplStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="rfxplData"
                title="日风向频率"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="rfxplLen"
                :xAxis="rfxplxaisx"
                :series="rfxplData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'月风向频率'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend">
                <span class="dot"></span>
                <span class="titSty">{{ yfxplStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="yfxplData"
                title="月风向频率"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="yfxplLen"
                :xAxis="yfxplxaisx"
                :series="yfxplData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'年风向频率'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend">
                <span class="dot"></span>
                <span class="titSty">{{ nfxplStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="nfxplData"
                title="年风向频率"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="nfxplLen"
                :xAxis="nfxplxaisx"
                :series="nfxplData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
      </el-row>
    </div>

    <!-- tab4 -->
    <div v-if="tabIndex == 3" class="tab-4 tabs">
      <el-row style="height: calc((100% - 10px) / 2); margin-bottom: 10px">
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'日最大风速'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span class="titSty">{{ rzdfsStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="rzdfsData"
                title="日最大风速"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="rzdfsLen"
                :xAxis="rzdfsxaisx"
                :series="rzdfsData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'月最大风速'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span class="titSty">{{ yzdfsStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="yzdfsData"
                title="月最大风速"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="yzdfsLen"
                :xAxis="yzdfsxaisx"
                :series="yzdfsData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'年最大风速'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span class="titSty">{{ nzdfsStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="nzdfsData"
                title="年最大风速"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="nzdfsLen"
                :xAxis="nzdfsxaisx"
                :series="nzdfsData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
      </el-row>
      <el-row style="height: calc((100% - 10px) / 2)">
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'日风向频率'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend">
                <span class="dot"></span>
                <span class="titSty">{{ rfxplStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="rfxplData"
                title="日风向频率"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="rfxplLen"
                :xAxis="rfxplxaisx"
                :series="rfxplData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'月风向频率'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend">
                <span class="dot"></span>
                <span class="titSty">{{ yfxplStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="yfxplData"
                title="月风向频率"
              /> -->
              <rander-new-chart
                width="100%"
                height="100%"
                :lenged="yfxplLen"
                :xAxis="yfxplxaisx"
                :series="yfxplData"
                :isRadar="false"
              />
            </div>
          </panel>
        </el-col>
        <el-col :span="8" class="tabColSty">
          <panel
            :title="'年风向频率'"
            class="radar-panel"
            :icon="'svg-wind-site'"
          >
            <div class="wind-info">
              <div class="legend">
                <span class="dot"></span>
                <span class="titSty">{{ nfxplStr }}</span>
              </div>
              <!-- <radar-chart
                :width="'100%'"
                :height="'350px'"
                :value="nfxplData"
                title="年风向频率"
              /> -->
              <!-- <rander-new-chart
                width="100%"
                height="100%"
                :lenged="nfxplLen"
                :xAxis="nfxplxaisx"
                :series="nfxplData"
                :isRadar="false"
              /> -->
            </div>
          </panel>
        </el-col>
      </el-row>
    </div>

    <!-- tab5 -->
    <div v-if="tabIndex == 4" class="tab-5 tabs">
      <el-row style="height: calc((100% - 10px) / 2); margin-bottom: 10px">
        <el-col :span="8">
          <panel title="日小风切入">
            <dual-pie-chart
              width="100%"
              height="350px"
              title="日切入频率分析"
              :series="dayWindPieData"
            />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="月小风切入">
            <dual-pie-chart
              width="100%"
              height="350px"
              title="月切入频率分析"
              :series="monthWindPieData"
            />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="年小风切入">
            <dual-pie-chart
              width="100%"
              height="350px"
              title="年切入频率分析"
              :series="yearWindPieData"
            />
          </panel>
        </el-col>
      </el-row>
      <el-row style="height: calc((100% - 10px) / 2)">
        <el-col :span="8">
          <panel title="日小风切出">
            <dual-pie-chart
              width="100%"
              height="350px"
              title="日切出频率分析"
              :series="dayStopPieData"
            />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="月小风切出">
            <dual-pie-chart
              width="100%"
              height="350px"
              title="月切出频率分析"
              :series="monthStopPieData"
            />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="年小风切出">
            <dual-pie-chart
              width="100%"
              height="350px"
              title="年切出频率分析"
              :series="yearStopPieData"
            />
          </panel>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      v-model="dialogShow"
      width="85%"
      top="120px"
      :close-on-click-modal="true"
    >
      <template #title>
        <div class="dialog-title">
          <div class="title">区域详情查看</div>
        </div>
      </template>
      <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 "@/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";
import randerNewChart from "./raderswithhart.vue";

import {
  getApifindWtRealPowerChar,
  getApigetplotBands,
  getApiplotBandAjax,
  getApifindRealPowerCharBy24,
  getApibjjllist,
  getApigzjllist,
  getApixdjllist,
  getApiwadAjax,
  getApibjphlist,
  getApiglchat,
  getApifjfzy,
  getApiequipmentList,
  getApiWeatherstation,
  getApiComMGTWP,
  getApiComMGTWT,
  getApiComPie,
} from "@/api/monthlyPerformanceAnalysis";
import * as echarts from "echarts";
export default {
  components: {
    panel,
    AreaLineChart,
    MultipleBarLineChart,
    Table,
    MarkerLineChart,
    DirectionRadarChart,
    DualPieChart,
    RadarChart,
    randerNewChart,
  },
  props: {
    wpArray: {
      type: Array,
      default: () => [],
    },
  },
  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: [],
      },
      wpId: "",
      wtArray: [],
      wtId: "",
      recorddate: "",

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

      powerChartData: [],

      powerChartLineData: {},

      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: {},

      rzdfsStr: "",
      rzdfsLen: [],
      rzdfsData: [],
      rzdfsxaisx: {
        type: "category",
        boundaryGap: false,
        data: [],
        splitLine: {
          show: true,
        },
      },

      yzdfsStr: "",
      yzdfslen: [],
      yzdfsData: [],
      yzdfsxaisx: {
        type: "category",
        boundaryGap: false,
        data: [],
        splitLine: {
          show: true,
        },
      },

      nzdfsStr: "",
      nzdfsLen: [],
      nzdfsData: [],
      nzdfsxaisx: {
        type: "category",
        boundaryGap: false,
        data: [],
        splitLine: {
          show: true,
        },
      },

      rfxplStr: "",
      rfxplLen: [],
      rfxplData: [],
      rfxplxaisx: {
        type: "category",
        boundaryGap: false,
        data: [],
        splitLine: {
          show: true,
        },
      },

      yfxplStr: "",
      yfxplLen: [],
      yfxplData: [],
      yfxplxaisx: {
        type: "category",
        boundaryGap: false,
        data: [],
        splitLine: {
          show: true,
        },
      },

      nfxplStr: "",
      nfxplLen: [],
      nfxplData: [],
      nfxplxaisx: {
        type: "category",
        boundaryGap: false,
        data: [],
        splitLine: {
          show: true,
        },
      },

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

      dialogShow: false,

      form: {},
      hisWpid: "",
      hisSubid: "",
      hisWtid: "",
    };
  },
  computed: {
    cftlist() {
      return this.$store.state.cftList;
    },
  },
  methods: {
    init(row) {
      this.wpId = row.windtpowerstationId;
      this.hisWpid = row.windtpowerstationId;
      // this.wtId = row.windturbineId.substring(row.windturbineId.indexOf('_F'))
      this.wtId = row.windturbineId;
      this.hisWtid = row.windturbineId;
      this.tabIndex = 0;
      this.getWindData();
      this.search();
    },
    // 切换风场
    changeStationsVal(val) {
      this.wpId = val;
      if (this.tabIndex == 2) {
        this.hisSubid = val;
      } else {
        this.getWindData();
      }
    },

    // 获取风机
    async getWindData() {
      let params = {
        companyId: "",
        wpIds: this.wpId,
        projectIds: "",
        lineIds: "",
        type: 0,
      };
      const { data: datas } = await getApiequipmentList(params);
      this.wtArray = datas.data;
      //   this.wtId = datas.data[0].id;
    },
    // tab1 ----------------------------------------
    // tab1 - 获取损失电量分析图表数据
    async getLostChartData() {
      let that = this;
      let params = {
        wtId: that.wtId,
        recorddate: that.recorddate,
      };
      const { data: datas } = await getApifindWtRealPowerChar(params);
      if (datas && datas.data.length > 0) {
        const keyArray = ["value1", "value2", "value3"];
        let lostChartData = [
          {
            text: "实发功率",
            value: [
              //   {
              //     text: "1",
              //     value: 1,
              //   },
            ],
          },
          {
            text: "保证功率",
            value: [],
          },
          {
            text: "风速",
            value: [],
          },
        ];
        const lostChartUnit = ["实发功率", "保证功率", "风速"];
        keyArray.forEach((key, keyIndex) => {
          datas.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 - 获取损失电量分析图表背景颜色
    async getLostChartBgColorData() {
      let that = this;
      let params = {
        wtId: that.wtId,
        recorddate: that.recorddate,
      };
      const { data: datas } = await getApigetplotBands(params);
      if (datas && datas.data.length > 0) {
        let LostChartBgColorData = [];
        datas.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;
      }
    },
    // 损失电量分析图背景颜色区域点击事件
    async areaBarChartClick(item) {
      let that = this;
      let params = {
        wtId: item.data.wtId,
        beginDate: item.data.beginDate,
        endDate: item.data.endDate,
      };
      const { data: datas } = await getApiplotBandAjax(params);
      if (datas && datas.data) {
        that.form = datas.data || {};
        that.dialogShow = true;
      }
    },
    // tab1 - 获取电量图表数据
    async getPowerChartData() {
      let that = this;
      let params = {
        wtId: that.wtId,
        recorddate: that.recorddate,
      };
      const { data: datas } = await getApifindRealPowerCharBy24(params);
      if (datas && datas.data.length > 0) {
        const keyArray = ["value1", "value2", "value3", "value4", "value5"];
        let powerChartData = [
          {
            title: "scada发电量",
            type: "bar",
            yAxisIndex: 0,
            value: [],
          },
          {
            title: "检修损失",
            type: "bar",
            yAxisIndex: 0,
            value: [],
          },
          {
            title: "故障损失",
            type: "bar",
            yAxisIndex: 0,
            value: [],
          },
          {
            title: "限电损失",
            type: "bar",
            yAxisIndex: 0,
            value: [],
          },
          {
            title: "欠发损失",
            type: "bar",
            yAxisIndex: 0,
            value: [],
          },
        ];
        let powerChartLineData = {
          name: "风速",
          unit: "(m/s)",
          type: "line",
          data: [],
        };
        for (let i = 0; i < keyArray.length; i++) {
          let keyEle = keyArray[i];
          for (let j = 0; j < datas.data.length; j++) {
            let ele = datas.data[j];
            powerChartData[i].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 - 获取当日报警数据
    async getWarnData() {
      let that = this;
      let params = {
        wtId: that.wtId,
        recorddate: that.recorddate,
        pageNum: "1",
        pageSize: "5",
      };
      //   const { data: datas } = await getApibjjllist(params);
      //   if (datas && datas.data && datas.data.records.length > 0) {
      //     datas.data.records.forEach((ele) => {
      //       ele.warningtime = new Date(ele.warningtime).formatDate(
      //         "yyyy-MM-dd hh:mm:ss"
      //       );
      //     });
      //     that.warnTableData.data = datas.data.records;
      //   }
    },
    // tab1 - 获取当日故障数据
    async getStopData() {
      let that = this;
      let params = {
        wtId: that.wtId,
        recorddate: that.recorddate,
        pageNum: "1",
        pageSize: "5",
      };
      //   const { data: datas } = await getApigzjllist(params);
      //   if (datas && datas.data && datas.data.records.length > 0) {
      //     datas.data.records.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 = datas.data.records;
      //   }
    },
    // tab1 - 获取当日限电数据
    async getXdData() {
      let that = this;
      let params = {
        wtId: that.wtId,
        recorddate: that.recorddate,
        pageNum: "1",
        pageSize: "5",
      };
      //   const { data: datas } = await getApixdjllist(params);
      //   if (datas && datas.data && datas.data.records.length > 0) {
      //     datas.data.records.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 = datas.data.records;
      //   }
    },
    // tab2 ----------------------------------------
    // tab2 - 获取日发电量信息
    async getDayPowerInfo() {
      let that = this;
      let params = {
        wtId: that.wtId,
        recorddate: that.recorddate,
      };
      const { data: datas } = await getApiwadAjax(params);
      if (datas && datas.data) {
        that.dayPowerInfo = datas.data;
      }
    },

    // tab2 - 获取当月报警排行
    async getMonthWarnRecord() {
      let that = this;
      let params = {
        wtId: that.wtId,
        recorddate: that.recorddate,
        pageNum: "1",
        pageSize: "5",
      };
      const { data: datas } = await getApibjphlist(params);
      if (datas && datas.data) {
        that.monthWarnRecordData.data = datas.data;
      }
    },

    // tab2 - 获取当月报警排行
    async getPowerLineChartData() {
      let that = this;
      let params = {
        wtId: that.wtId,
        recorddate: that.recorddate,
      };
      const { data: datas } = await getApiglchat(params);
      if (datas && datas.data.length > 0) {
        const keyArray = ["value2", "value3", "value4"];
        let powerLineChartData = [
          {
            title: "实际拟合功率",
            yAxisIndex: 0,
            value: [],
          },
          {
            title: "最优功率",
            yAxisIndex: 0,
            value: [],
          },
          {
            title: "保证功率",
            yAxisIndex: 0,
            value: [],
          },
        ];
        keyArray.forEach((keyEle, keyIndex) => {
          datas.data.forEach((ele, index) => {
            powerLineChartData[keyIndex].value.push({
              text: index + 1,
              value: ele[keyEle],
            });
          });
        });
        that.powerLineChartData = powerLineChartData;
      }
    },

    // tab2 - 获取风资源
    async getWindResources() {
      let that = this;
      let params = {
        wtId: that.wtId,
        recorddate: that.recorddate,
      };
      const { data: datas } = await getApifjfzy(params);
      if (datas && datas.data) {
        that.jfplStr = datas.data.jfpl || "";
        let windResourcesData = {
          data: [],
          name: [],
        };
        if (datas.data.data) {
          datas.data.data.forEach((ele, index) => {
            let jiaodu = (360 / 16) * index;
            windResourcesData.data.push([ele.data1, jiaodu]);
            windResourcesData.name.push(ele.name);
          });
          windResourcesData.data.push([datas.data.data[0].data1, 0]);
        }
        that.windResourcesData = windResourcesData;
      }
    },

    // tab3,tab4 - 获取玫瑰图
    async getMgt(subUrl, data, dataKey, logFlg) {
      let that = this;
      let params = {};
      if (logFlg === "wp") {
        params.url = subUrl;
        params.recorddate = data.recorddate;
        params.wpId = data.wpId;
        const { data: datas } = await getApiComMGTWP(params);
        // this.changeAllMsg(datas, dataKey);
        this.changeAllMsgNewChart(datas, dataKey);
      } else {
        params.url = subUrl;
        params.recorddate = data.recorddate;
        params.wtId = data.wtId;
        const { data: datas } = await getApiComMGTWT(params);
        // this.changeAllMsg(datas, dataKey);
        this.changeAllMsgNewChart(datas, dataKey);
      }
    },
    //整合数据
    changeAllMsg(datas, dataKey) {
      if (datas && datas.data) {
        let strrt = dataKey.split("Data")[0] + "Str";
        this[strrt] = datas.data.jfpl || "";
        let mgtData = {
          indicator: [],
          data: [
            {
              name: "",
              value: [],
            },
          ],
        };
        let indicatorArr = [
          { nameZn: "北", nameEn: "N" },
          { nameZn: "北北西", nameEn: "NNW" },
          { nameZn: "北西", nameEn: "NW" },
          { nameZn: "西北西", nameEn: "WNW" },
          { nameZn: "西", nameEn: "W" },
          { nameZn: "西南西", nameEn: "WSW" },
          { nameZn: "南西", nameEn: "SW" },
          { nameZn: "南南西", nameEn: "SSW" },
          { nameZn: "南", nameEn: "S" },
          { nameZn: "南南东", nameEn: "SSE" },
          { nameZn: "南东", nameEn: "SE" },
          { nameZn: "东南东", nameEn: "ESE" },
          { nameZn: "东", nameEn: "E" },
          { nameZn: "东北东", nameEn: "ENE" },
          { nameZn: "北东", nameEn: "NE" },
          { nameZn: "北北东", nameEn: "NNE" },
        ];
        if (datas.data.data.length > 0) {
          datas.data.data.forEach((ele) => {
            mgtData.data[0].value.push(ele.data1);
            indicatorArr.forEach((itc) => {
              let str = "";
              if (ele.name.substring(0, ele.name.indexOf(" ")) === itc.nameEn) {
                str = ele.name.replace(itc.nameEn, itc.nameZn);
                str = str.substring(0, str.indexOf(" "));
                mgtData.indicator.push(str);
              }
            });
          });
        }
        this[dataKey] = mgtData;
      }
    },
    changeAllMsgNewChart(datas, dataKey) {
      if (datas && datas.data) {
        let strrt = dataKey.split("Data")[0] + "Str";
        let strLen = dataKey.split("Data")[0] + "Len";
        let strxaisx = dataKey.split("Data")[0] + "xaisx";
        this[strrt] = datas.data.jfpl || "";
        this[strxaisx].data = [];
        this[strLen] = [];
        this[dataKey] = [];

        let lengedSer = [];
        let series = [];

        let objsxArrAll = [];

        if (datas.data.data.length > 0) {
          datas.data.data.forEach((item) => {
            let str = item.name.substring(
              item.name.indexOf(" ") + 1,
              item.name.length
            );
            if (lengedSer.indexOf(str) === -1) {
              lengedSer.push(str);
            }
          });
          for (let i = 0; i < lengedSer.length; i++) {
            // debugger
            let ia = lengedSer[i];
            let objsxArr = [];
            let objsxArrObj = {
              name: "",
              data: [],
            };
            for (let j = 0; j < datas.data.data.length; j++) {
              let ic = datas.data.data[j];
              let objsx = {
                fx: "",
                data: "",
              };
              objsx.fx = ic.name.substring(0, ic.name.indexOf(" "));
              if (ic.name.indexOf(ia) > 0) {
                objsx.data = ic.data1;
              } else {
                objsx.data = 0;
              }
              objsxArr.push(objsx);
            }
            objsxArrObj.name = ia;
            objsxArrObj.data = objsxArr;
            objsxArrAll.push(objsxArrObj);
          }

          objsxArrAll.forEach((iiv, index) => {
            let barObj = {
              type: "bar",
              data: [],
              coordinateSystem: "polar",
              name: iiv.name,
              stack: "a",
              emphasis: {
                focus: "series",
              },
            };
            if (index === 0) {
              iiv.data.forEach((iu) => {
                this[strxaisx].data.push(iu.fx);
              });
            }
            iiv.data.forEach((iu) => {
              barObj.data.push(iu.data);
            });
            series.push(barObj);
          });
        } else {
          lengedSer = [];
          series = [];
        }
        this[strLen] = lengedSer;
        this[dataKey] = series;
      }
    },
    // tab5 - 获取饼图
    async getPieChart(subUrl, type, dataKey) {
      let that = this;
      let params = {
        url: subUrl,
        wtId: that.wtId,
        recorddate: that.recorddate,
        type: type,
      };
      const { data: datas } = await getApiComPie(params);

      // const datas = await request({
      //     method: "GET",
      //     url: subUrl + `?recorddate=${params.recorddate}&wtId=${params.wtId}&type=${params.type}`
      // })
      // if (datas && datas.data.length>0) {
      //     let pieChart = [];
      //     datas.data.forEach((ele) => {
      //         pieChart.push({
      //             name: ele.name,
      //             value: ele.value2,
      //             unit: "(m/s)",
      //         });
      //     });
      //     that[dataKey] = pieChart;
      // }
      if (datas && datas.data.length > 0) {
        let series = [];
        let color1 = [
          "#da0d68",
          "#da1d23",
          "#ebb40f",
          "#187a2f",
          "#0aa3b5",
          "#c94930",
          "#ad213e",
        ];
        let color2 = [
          "#cc7b6a",
          "#db646a",
          "#80a89d",
          "#794752",
          "#7a9bae",
          "#039fb8",
          "#5e777b",
        ];
        let color3 = [
          "#62aa3c",
          "#03a653",
          "#038549",
          "#28b44b",
          "#a3a830",
          "#7ac141",
          "#a2bb2b",
        ];
        let color4 = [
          "#e65832",
          "#da1d23",
          "#4b55ae",
          "#3aa255",
          "#0aa3b5",
          "#1c99ff",
          "#ebb40f",
        ];

        datas.data.forEach((ele, idx) => {
          series.push({ name: ele.name, value: ele.value2 });
        });
        that[dataKey] = series;
      }
    },
    // 切换tab
    tabSelect(index) {
      if (this.tabIndex == 2) {
        this.hisSubid = this.wpId;
      } else {
        this.hisWpid = this.wpId;
      }
      if (index == 2) {
        this.wpId = this.hisSubid ? this.hisSubid : this.cftlist[0].id;
      } else {
        this.wpId = this.hisWpid ? this.hisWpid : this.wpArray[0].id;
      }
      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", "wp");
        this.getMgt(`/goodness/wpyzdfs`, xhrParam, "yzdfsData", "wp");
        this.getMgt(`/goodness/wpnzdfs`, xhrParam, "nzdfsData", "wp");
        this.getMgt(`/goodness/wprfxpl`, xhrParam, "rfxplData", "wp");
        this.getMgt(`/goodness/wpyfxpl`, xhrParam, "yfxplData", "wp");
        this.getMgt(`/goodness/wpnfxpl`, xhrParam, "nfxplData", "wp");
      } else if (this.tabIndex === 3) {
        const xhrParam = { wtId: this.wtId, recorddate: this.recorddate };
        this.getMgt(`/goodness/wtrzdfs`, xhrParam, "rzdfsData", "wt");
        this.getMgt(`/goodness/wtyzdfs`, xhrParam, "yzdfsData", "wt");
        this.getMgt(`/goodness/wtnzdfs`, xhrParam, "nzdfsData", "wt");
        this.getMgt(`/goodness/wtrfxpl`, xhrParam, "rfxplData", "wt");
        this.getMgt(`/goodness/wtyfxpl`, xhrParam, "yfxplData", "wt");
        this.getMgt(`/goodness/wtnfxpl`, xhrParam, "nfxplData", "wt");
      } 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");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.windDetailWidth {
  width: calc(100%-50px);
  margin-left: 50px;
}
.windDetail {
  height: 100%;
  .action-bar {
    display: flex;
    padding: 10px 0 20px 0;
    .selections {
      flex: 1 0 auto;
      display: flex;
      .selections_btn {
        flex: 0 0 164px;
        text-align: center;
        height: 33px;
        line-height: 33px;
        margin-right: 8px;
        color: #b9b9b9;
        font-size: 1.296vh;
        background: fade(#606769, 20);
        border: 1px solid fade(#606769, 20);
        border-radius: 20px;
        &:hover,
        &.active {
          background: rgba(5, 187, 76, 0.6);
          //   border: 1px solid #0046c7;
          color: #fff;
          cursor: pointer;
        }
      }
    }
    .windDetailseach {
      display: flex;

      .query-items {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        .query-item {
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          .label {
            color: #fff;
          }
        }
      }
      .query-actions {
        margin-left: 5px;
        .buttons {
          background-color: rgba(5, 187, 76, 0.2);
          border: 1px solid #3b6c53;
          color: #b3b3b3;
          font-size: 14px;

          &:hover,
          &.active {
            background-color: rgba(5, 187, 76, 0.5);
            color: #ffffff;
          }
        }
      }
    }
  }
  .tabs {
    height: calc(100% - 55px);
  }
  .outline {
    outline: 1px solid fade(#606769, 50);
  }

  .TabOne {
    .TabOne_topChart {
      height: calc((100% - 260px) / 2);
      margin-bottom: 10px;
    }
    .TabOne_centerChart {
      margin-bottom: 10px;
      height: calc((100% - 260px) / 2);
    }
    .table-info {
      display: flex;
      height: 260px;
      .table-panel {
        flex: 1 0 calc(100% / 3 - 8px);
        outline: 1px solid fade(#606769, 50);
        height: 100%;
        & + .table-panel {
          margin-left: 8px;
        }
      }
    }
  }

  .tab-2 {
    .power-info {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 100%;
      &.month-3 {
        .info-item {
          height: calc((100% - 8px * 4) / 5);
          line-height: calc((100% - 8px * 4) / 5);
          flex: 0 0 calc(100% / 3 - 6px);
          &:nth-child(-n + 3) {
            margin-top: 0px;
          }
        }
      }
      &.month-2 {
        .info-item {
          flex: 0 0 calc(100% / 2 - 4px);
          height: calc(100% - 8px);
          &: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(#606769, 20);
        height: calc((100% - 8px * 3) / 4);
        line-height: calc((100% - 8px * 3) / 4);

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

        .text {
          font-size: 12px;
          flex: 0 0 110px;
          text-align: right;
          margin-right: 24px;
          color: #fff;
        }

        .value {
          font-size: 16px;
          color: #1c99ff;
        }
      }
    }

    .month-info {
      display: flex;
      height: calc(100% - 270px - 297px - 20px);
      .month-info-left {
        height: 100%;
        flex: 0 0 705px;
        margin-right: 10px;
      }

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

    .radar-panel {
      height: 220px;
      .wind-info {
        height: 100%;
      }
    }
    .table-panel {
      margin-bottom: 10px;
      height: calc((100% - 10px * 2) / 3);
      &:nth-child(3) {
        margin-bottom: 0px;
      }
    }
    .wind-info {
      display: flex;

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

        .dot {
          width: 7px;
          height: 7px;
          background: #0046c7;
          display: inline-block;
          margin-right: 8px;
        }
      }
    }
  }

  .tab-3,
  .tab-4 {
    .tabColSty {
      height: 100%;
      .radar-panel {
        height: 100%;
      }
    }
    .wind-info {
      position: relative;
      height: 100%;

      .legend {
        position: absolute;
        left: 500px;
        top: 0;
        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: #0046c7;
          display: inline-block;
          margin-right: 8px;
        }
        .titSty {
          color: #fff;
          white-space: nowrap;
        }
      }
    }
  }

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