sis_zhfx/src/views/Home/Home.vue

<template>
  <div class="home">
    <Row type="flex" style="height: 55vh">
      <div class="top-left-panel">
        <Row type="flex" class="weather">
          <Col :span="24">
            <com-panel
              :title="tqmap.name || 'yc'"
              :sub-title="nowTime + ' 实况'"
              icon="fa fa-map-marker"
            >
              <weather
                style="cursor: pointer"
                :data="tqmap"
                @click="openWeatherDialog"
              />
            </com-panel>
          </Col>
        </Row>
        <Row type="flex" class="plan">
          <Col :span="24">
            <com-panel title="预测电量" sub-title="（单位：万kWh）">
              <list-bar-chart-2
                :list="ForecastPower"
                height="15.7407vh"
                @click="showForecastBox"
              />
            </com-panel>
          </Col>
        </Row>
        <Row type="flex" class="power">
          <Col :span="24">
            <com-panel title="功率负荷" sub-title="（单位：MW）">
              <power-review
                :data="powerData"
                :id="wpId"
                @chartClick="showPowerChart"
              />
            </com-panel>
          </Col>
        </Row>
      </div>
      <div class="top-mid-panel">
        <Map
          :wpId="wpId"
          :day="String(jczbmap.aqts || '---')"
          :data="fcmap"
          :xtData="xtmap"
          @mapClick="changeShowType"
          @mapClicks="changeShowTypes"
          @mapClickBack="changeShowBackType"
          @backStation="onBackStation"
        ></Map>
      </div>
      <div class="top-right-panel">
        <Row type="flex">
          <Col :span="24">
            <com-panel title="效益提升" sub-title="（单位：万kWh）">
              <!-- 避免故障、提升率、降低率、风能利用率、设备可利用率、综合场用电率、存在隐患风机 -->
              <coulometric-analysis
                :bmgz="gxkmap.tjsl"
                :tsl="30"
                :jdl="gxkmap.tjl"
                :fnlyl="wxssmap.yfnlyl"
                :sbklyl="gxkmap.ysbklyl"
                :zhcydl="gxkmap.yzhcydl"
                :yhfj="gxkmap.sjtjsl"
              />
            </com-panel>
          </Col>
        </Row>
        <Row type="flex">
          <Col :span="24">
            <com-panel title="计划电量完成情况" sub-title="（单位：万kWh）">
              <power-plan
                :data="planData"
                :title="planBtnName"
                :showSingle="powerplanShowSingle"
                :id="wpId"
                @chartClick="showDoneChart"
              />
            </com-panel>
          </Col>
        </Row>
      </div>
    </Row>
    <Row type="flex" style="height: calc(40vh - 236px); margin-top: 20px">
      <Col :span="12">
        <toolbar-panel
          :title="
            planBtnName.indexOf('电站') !== -1 ||
            planBtnName.indexOf('光电厂') !== -1
              ? '日照强度'
              : '日发电量'
          "
        >
          <!-- <template v-slot:tools>
            <div class="tools">
              <div class="tool-block">
                <div class="legend bg-green"></div>
                <div class="legend-text">日发电量(单位:万kWh)</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-purple"></div>
                <div class="legend-text">上网电量（单位：万kWh）</div>
              </div>
              <div class="tool-block">
                <div class="legend bg-orange"></div>
                <div class="legend-text">购网电量（单位：万kWh）</div>
              </div>
            </div>
          </template> -->
          <template v-slot:default>
            <!-- 日发电量 -->
            <multiple-bar-chart
              :list="DayPower.value"
              :units="DayPower.units"
              height="100%"
              :showLegend="true"
              @click="
                showDoneChart({
                  data: DayPower,
                  dialogTitle: '日发电量',
                  dialogType: 'doneLineChart',
                })
              "
            />
          </template>
        </toolbar-panel>
      </Col>
      <Col :span="12">
        <toolbar-panel title="72小时功率趋势图">
          <!-- <template v-slot:tools>
          <div class="tools">
            <div class="tools">
              <div class="tool-block">
                <div class="legend long bg-green"></div>
                <div class="legend-text">应发功率</div>
              </div>
              <div class="tool-block">
                <div class="legend long bg-yellow"></div>
                <div class="legend-text">实发功率</div>
              </div>
              <div class="tool-block">
                <div class="legend long bg-purple"></div>
                <div class="legend-text">理论功率</div>
              </div>
            </div>
          </div>
        </template> -->
          <template v-slot:default>
            <multiple-y-line-chart-normal
              height="100%"
              :list="Powertrend"
              :yAxises="PowertrendYAxises"
              :showLegend="true"
              :hoverType="'axis'"
              @click="
                showPowerChart({
                  data: Powertrend,
                  dialogTitle: '72小时功率趋势图',
                  dialogType: 'powerLineChart',
                })
              "
            />
          </template>
        </toolbar-panel>
      </Col>
    </Row>
    <Row type="flex" style="margin-top: 20px">
      <!-- 下方 table -->
      <Col :span="16" class="table-card-panel">
        <row>
          <Col>
            <com-panel>
              <table class="table-card">
                <tr class="">
                  <td class="text gray">装机容量</td>
                  <td class="value green">{{ Number(jczbmap.zjrl) }}</td>
                  <td class="unit gray">MW</td>
                </tr>
                <tr class="">
                  <td class="text gray">上网电量(日)</td>
                  <td class="value green">{{ jczbmap.swdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr class="">
                  <td class="text gray">
                    {{ wpId === "0" ? "减排二氧化硫" : "年运行小时" }}
                  </td>
                  <td class="value green">
                    <!-- {{ wpId === "0" ? jczbmap.jpeyhl  : gxkmap.nyxxs }} -->
                    {{ wpId === "0" ? jczbmap.jpeyhl : gxkmap.nyxxs }}
                  </td>
                  <!-- <td class="unit gray">
                    {{ wpId === "0" ? "万吨" : "小时" }}
                  </td> -->
                  <td class="unit gray">
                    {{ wpId === "0" ? "吨" : "小时" }}
                  </td>
                </tr>
                <tr class="">
                  <td class="text gray">
                    {{ wpId === "0" ? "减排二氧化碳" : "年等效科利用系数" }}
                  </td>
                  <td class="value green">
                    <!-- {{ wpId === "0" ? jczbmap.jpeyht  : gxkmap.ndxkyss }} -->
                    {{ wpId === "0" ? jczbmap.jpeyht : gxkmap.ndxkyss }}
                  </td>
                  <!-- <td class="unit gray">{{ wpId === "0" ? "万吨" : "%" }}</td> -->
                  <td class="unit gray">{{ wpId === "0" ? "吨" : "%" }}</td>
                </tr>
                <tr class="">
                  <td class="text gray">
                    {{ wpId === "0" ? "节约用水" : "年故障小时" }}
                  </td>
                  <td class="value green">
                    <!-- {{ wpId === "0" ? jczbmap.jys  : gxkmap.ngzxs }} -->
                    {{ wpId === "0" ? jczbmap.jys : gxkmap.ngzxs }}
                  </td>
                  <!-- <td class="unit gray">
                    {{ wpId === "0" ? "万吨" : "小时" }}
                  </td> -->
                  <td class="unit gray">
                    {{ wpId === "0" ? "吨" : "小时" }}
                  </td>
                </tr>
                <tr class="">
                  <td class="text gray">
                    {{ wpId === "0" ? "节约标煤" : "年待机小时" }}
                  </td>
                  <td class="value green">
                    <!-- {{ wpId === "0" ? jczbmap.jybm  : gxkmap.ndjxs }} -->
                    {{ wpId === "0" ? jczbmap.jybm : gxkmap.ndjxs }}
                  </td>
                  <!-- <td class="unit gray">
                    {{ wpId === "0" ? "万吨" : "小时" }}
                  </td> -->
                  <td class="unit gray">
                    {{ wpId === "0" ? "吨" : "小时" }}
                  </td>
                </tr>
              </table>
            </com-panel>
          </Col>
          <Col>
            <com-panel>
              <table class="table-card">
                <tr class="">
                  <td class="text gray">利用小时(月)</td>
                  <td class="value green">{{ jczbmap.ylyxs }}</td>
                  <td class="unit gray">小时</td>
                </tr>
                <tr class="">
                  <td class="text gray">利用小时(年)</td>
                  <td class="value green">{{ jczbmap.nlyxs }}</td>
                  <td class="unit gray gray">小时</td>
                </tr>
                <tr class="">
                  <td class="text gray">等效可用系数(月)</td>
                  <td class="value green">{{ gxkmap.ydxkyss }}</td>
                  <td class="unit gray">%</td>
                </tr>
                <tr class="">
                  <td class="text gray">MTBF(月)</td>
                  <td class="value green">{{ jczbmap.mtbf }}</td>
                  <td class="unit gray">小时</td>
                </tr>
                <tr class="">
                  <td class="text gray">MTTR(月)</td>
                  <td class="value green">{{ jczbmap.mttr }}</td>
                  <td class="unit gray">小时</td>
                </tr>
                <tr class="">
                  <td class="text gray">MTTF(月)</td>
                  <td class="value green">{{ jczbmap.mttf }}</td>
                  <td class="unit gray">小时</td>
                </tr>
              </table>
            </com-panel>
          </Col>
          <Col>
            <com-panel>
              <table class="table-card">
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '日发电量详情',
                      'genreset/findDayInfo',
                      'rfdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">日发电量</td>
                  <td class="value green">{{ jczbmap.rfdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '日故障损失详情',
                      'genreset/findDayInfo',
                      'rgzssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">日故障损失电量</td>
                  <td class="value green">{{ wxssmap.rgzssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '日维护损失详情',
                      'genreset/findDayInfo',
                      'rjxssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">日维护损失电量</td>
                  <td class="value green">{{ wxssmap.rjxssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '日限电损失详情',
                      'genreset/findDayInfo',
                      'rxdssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">日限电损失电量</td>
                  <td class="value green">{{ wxssmap.rxdssdl }}</td>
                  <td class="unit gray gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '日受累损失详情',
                      'genreset/findDayInfo',
                      'rslssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">日受累损失电量</td>
                  <td class="value green">{{ wxssmap.rslssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '日性能损失详情',
                      'genreset/findDayInfo',
                      'rxnssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">日性能损失电量</td>
                  <td class="value green">{{ wxssmap.rqfssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
              </table>
            </com-panel>
          </Col>
          <Col>
            <com-panel>
              <table class="table-card">
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '月发电量详情',
                      'genreset/findMonthInfo',
                      'yfdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">月发电量</td>
                  <td class="value green">{{ jczbmap.yfdl }}</td>
                  <td class="unit gray gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '月故障损失详情',
                      'genreset/findMonthInfo',
                      'ygzssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">月故障损失</td>
                  <td class="value green">{{ wxssmap.ygzssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '月维护损失详情',
                      'genreset/findMonthInfo',
                      'yjxssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">月维护损失</td>
                  <td class="value green">{{ wxssmap.yjxssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '月限电损失详情',
                      'genreset/findMonthInfo',
                      'yxdssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">月限电损失</td>
                  <td class="value green">{{ wxssmap.yxdssdl }}</td>
                  <td class="unit gray gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '月受累损失详情',
                      'genreset/findMonthInfo',
                      'yslssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">月受累损失</td>
                  <td class="value green">{{ wxssmap.yslssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '月性能损失详情',
                      'genreset/findMonthInfo',
                      'yxnssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">月性能损失</td>
                  <td class="value green">{{ wxssmap.yqfssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
              </table>
            </com-panel>
          </Col>
          <Col>
            <com-panel>
              <table class="table-card">
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '年发电量详情',
                      'genreset/findYearInfo',
                      'nfdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">年发电量</td>
                  <td class="value green">{{ jczbmap.nfdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '年故障损失详情',
                      'genreset/findYearInfo',
                      'ngzssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">年故障损失</td>
                  <td class="value green">{{ wxssmap.ngzssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '年维护损失详情',
                      'genreset/findYearInfo',
                      'njxssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">年维护损失</td>
                  <td class="value green">{{ wxssmap.njxssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '年限电损失详情',
                      'genreset/findYearInfo',
                      'nxdssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">年限电损失</td>
                  <td class="value green">{{ wxssmap.nxdssdl }}</td>
                  <td class="unit gray gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '年受累损失详情',
                      'genreset/findYearInfo',
                      'nslssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">年受累损失</td>
                  <td class="value green">{{ wxssmap.nslssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
                <tr
                  class="curP"
                  @click="
                    openDialog(
                      '年性能损失详情',
                      'genreset/findYearInfo',
                      'nxnssdl',
                      'table'
                    )
                  "
                >
                  <td class="text gray">年性能损失</td>
                  <td class="value green">{{ wxssmap.nqfssdl }}</td>
                  <td class="unit gray">万kWh</td>
                </tr>
              </table>
            </com-panel>
          </Col>
        </row>
      </Col>
      <!-- 右下角 panel -->
      <Col :span="8">
        <panel-3 class="situation">
          <div class="situation-body">
            <row align="middle">
              <div class="situation-item fengji">
                <div class="icon fengji-icon svg-icon svg-icon-white">
                  <svg-icon class="" svgid="svg-风机" />
                </div>
                <div class="info">
                  <div class="title green">接入设备</div>
                  <div class="value">{{ mxztmap.jrts }}</div>
                </div>
              </div>
              <div class="situation-item">
                <div class="icon svg-icon svg-icon-green">
                  <svg-icon class="" svgid="svg-待机图标" />
                </div>
                <div class="info">
                  <div class="title green">待机</div>
                  <div class="value">
                    <span class="text gray">待风</span>
                    <span>{{ mxztmap.djts }}</span>
                  </div>
                  <div class="value">
                    <span class="text gray">手动停机</span>
                    <span>{{ mxztmap.sdtjts }}</span>
                  </div>
                </div>
              </div>
              <div class="situation-item">
                <div class="icon svg-icon svg-icon-purple">
                  <svg-icon class="" svgid="svg-运行图标" />
                </div>
                <div class="info">
                  <div class="title green">运行</div>
                  <div class="value">
                    <span class="text gray">正常发电</span>
                    <span>{{ mxztmap.yxts }}</span>
                  </div>
                  <div class="value">
                    <span class="text gray">降出力运行</span>
                    <span>{{ mxztmap.fdjclts }}</span>
                  </div>
                </div>
              </div>
              <div class="situation-item">
                <div class="icon svg-icon svg-icon-pink">
                  <svg-icon class="" svgid="svg-限电图标" />
                </div>
                <div class="info">
                  <div class="title green">限电</div>
                  <div class="value">
                    <span class="text gray">限电降出力</span>
                    <span>{{ mxztmap.xdjclts }}</span>
                  </div>
                  <div class="value">
                    <span class="text gray">停机</span>
                    <span>{{ mxztmap.xdtjts }}</span>
                  </div>
                </div>
              </div>
            </row>
            <row align="middle">
              <div class="situation-item">
                <div class="icon svg-icon svg-icon-red">
                  <svg-icon class="" svgid="svg-故障图标" />
                </div>
                <div class="info">
                  <div class="title green">故障</div>
                  <div class="value">
                    <span class="text gray">故障停机</span>
                    <span>{{ mxztmap.gzts }}</span>
                  </div>
                  <div class="value">
                    <span class="text gray">场内受累</span>
                    <span>{{ mxztmap.cnslgzts }}</span>
                  </div>
                </div>
              </div>
              <div class="situation-item">
                <div class="icon svg-icon svg-icon-orange">
                  <svg-icon class="" svgid="svg-检修图标" />
                </div>
                <div class="info">
                  <div class="title green">检修</div>
                  <div class="value">
                    <span class="text gray">检修停机</span>
                    <span>{{ mxztmap.jxts }}</span>
                  </div>
                  <div class="value">
                    <span class="text gray">场内受累</span>
                    <span>{{ mxztmap.cnsljxts }}</span>
                  </div>
                </div>
              </div>
              <div class="situation-item">
                <div class="icon svg-icon svg-icon-white">
                  <svg-icon class="" svgid="svg-受累图标" />
                </div>
                <div class="info">
                  <div class="title green">受累</div>
                  <div class="value">
                    <span class="text gray">电网</span>
                    <span>{{ mxztmap.dwslts }}</span>
                  </div>
                  <div class="value">
                    <span class="text gray">环境</span>
                    <span>{{ mxztmap.hjslts }}</span>
                  </div>
                </div>
              </div>
              <div class="situation-item">
                <div class="icon svg-icon svg-icon-gray">
                  <svg-icon class="" svgid="svg-离线图标" />
                </div>
                <div class="info">
                  <div class="title green">离线</div>
                  <div class="value">
                    <span class="text gray">离线</span>
                    <span>{{ mxztmap.lxts }}</span>
                  </div>
                  <div class="value">
                    <span class="text gray">未知</span>
                    <span>---</span>
                  </div>
                </div>
              </div>
            </row>
          </div>
        </panel-3>
      </Col>
    </Row>
    <el-dialog
      title="天气详情"
      custom-class="modal"
      v-model="showWeatherDialog"
      width="80%"
      :destroy-on-close="true"
    >
      <div class="weatherBox">
        <div class="l">
          <DoubleLineChart :height="'100%'" :list="weatherChart" />
        </div>
        <div class="r">
          <el-collapse
            style="height: 400px; overflow-y: scroll"
            v-model="weathercollapse"
            accordion
          >
            <el-collapse-item
              :name="index"
              v-for="(item, index) in tqmap5"
              :key="index"
            >
              <template #title>
                <div class="collapseItemTitle">
                  {{ item.time }}
                  <div
                    style="
                      display: flex;
                      justify-content: start;
                      align-items: center;
                    "
                  >
                    <div class="icon svg-icon svg-icon-white">
                      <SvgIcon class="svg" :svgid="'svg-' + item.tqtp" />
                    </div>
                    <div class="info">{{ item.sd }}% / {{ item.wd }}°C</div>
                  </div>
                  <div class="otherWea">{{ item.tqmc }}</div>
                </div>
              </template>
              <div class="other-info">
                <Row>
                  <Col>
                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
                      <svg-icon svgid="svg-能见度" />
                    </div>
                    <div class="value">{{ item.qxd }}</div>
                    <div class="text">能见度</div>
                  </Col>
                  <Col>
                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
                      <svg-icon svgid="svg-湿度" />
                    </div>
                    <div class="value">{{ item.sd }}</div>
                    <div class="text">湿度</div>
                  </Col>
                  <Col>
                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
                      <svg-icon svgid="svg-气压" />
                    </div>
                    <div class="value">{{ item.dqyl }}</div>
                    <div class="text">气压</div>
                  </Col>
                  <Col>
                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
                      <svg-icon svgid="svg-日出" />
                    </div>
                    <div class="value">{{ item.richushijian }}</div>
                    <div class="text">日出时间</div>
                  </Col>
                  <Col>
                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
                      <svg-icon svgid="svg-日落" />
                    </div>
                    <div class="value">{{ item.riluoshijian }}</div>
                    <div class="text">日落时间</div>
                  </Col>
                </Row>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="dialogTitle"
      v-model="dialogShow"
      width="70%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="true"
      @closed="
        (res) => {
          dialogType = '';
          powerLineChartData = null;
        }
      "
    >
      <Table :data="dialogData" v-if="dialogType === 'table'" />
      <multiple-y-line-chart-normal
        height="500px"
        :list="powerLineChartData"
        :yAxises="powerLineChartYAxises"
        :showLegend="true"
        v-if="dialogType === 'powerLineChart' && powerLineChartData"
      />
      <multiple-y-line-chart-normal
        height="500px"
        :list="Powertrend"
        :yAxises="PowertrendYAxises"
        :showLegend="true"
        v-if="dialogType === 'powerLineChart' && !powerLineChartData"
      />
      <multiple-bar-chart
        height="500px"
        :units="doneLineChartData.units"
        :list="doneLineChartData.value"
        v-if="dialogType === 'doneLineChart'"
      />
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
import Row from "../../components/coms/grid/row.vue";
import Col from "../../components/coms/grid/col.vue";
import ComPanel from "../../components/coms/panel/panel";
// import ListBarChart from "../../components/chart/bar/list-bar-chart.vue";
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
import MultipleYLineChartNormal from "../../components/chart/line/multiple-y-line-chart-normal.vue";
import Panel3 from "../../components/coms/panel/panel3.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import CoulometricAnalysis from "./components/coulometric-analysis.vue";
import Weather from "./components/weather.vue";
import PowerReview from "./components/power-review.vue";
import PowerPlan from "./components/power-plan.vue";
import Map from "./components/map.vue";
import ListBarChart2 from "../../components/chart/bar/list-bar-chart2.vue";
import DoubleLineChart from "@com/chart/line/double-line-chart.vue";

import Table from "./dialog/table.vue";

export default {
  name: "Home",
  components: {
    Row,
    Col,
    ComPanel,
    Weather,
    CoulometricAnalysis,
    // ListBarChart,
    PowerReview,
    ToolbarPanel,
    PowerPlan,
    MultipleBarChart,
    MultipleYLineChartNormal,
    Panel3,
    SvgIcon,
    Map,
    ListBarChart2,
    Table,
    DoubleLineChart,
  },
  data() {
    return {
      historyWpId: '',
      historyPlanBtnName:'',
      timmer: null, // 计时器
      timmer2: null,
      timmer3: null,
      showWeatherDialog: false,
      weatherChart: [
        {
          title: "温度",
          smooth: true,
          value: [],
        },
        {
          title: "湿度",
          smooth: true,
          value: [],
        },
      ],
      tqmap5: [],
      jczbmap: {},
      wxssmap: {},
      gxkmap: {},
      mxztmap: {},
      planData: {},
      powerData: {},
      tqmap: {},
      nowTime: "",
      planBtnName: "全部",
      powerLineChartYAxises: [],
      powerLineChartData: [
        {
          title: "",
          yAxisIndex: 0, // 使用单位
          value: [],
        },
      ],
      doneLineChartData: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      dialogType: null,
      wpId: "0",
      wpName: "", //安全天数下面的场站名
      fcmap: {},
      xtmap: {},
      dialogShow: false,
      dialogTitle: "",
      dialogData: {},
      // 预测电量
      ForecastPower: [],
      // 日发电量
      DayPower: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      // 72小时功率趋势图
      Powertrend: [
        {
          title: "",
          yAxisIndex: 0, // 使用单位
          value: [],
        },
      ],
      PowertrendYAxises: [
        {
          name: "功率",
          min: 0,
          max: null,
          unit: "(万kWh)",
          position: "left",
        },
        {
          name: "风速",
          min: 0,
          max: 25,
          unit: "(m/s)",
          position: "right",
        },
      ],
    };
  },

  methods: {
    // 打开天气弹窗
    openWeatherDialog() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "genreset/getWeatherRealDay5Info",
        data: {
          wpId: that.wpId,
        },
        success(res) {
          const keys = ["wd", "sd"];
          let weatherChart = [
            {
              title: "温度",
              smooth: true,
              value: [],
            },
            {
              title: "湿度",
              smooth: true,
              value: [],
            },
          ];

          res.data.ls.forEach((ele) => {
            ele.time = new Date(ele.time).formatDate("yyyy-MM-dd hh:mm");
          });

          keys.forEach((key, keyIndex) => {
            res.data.ls.forEach((ele) => {
              weatherChart[keyIndex].value.push({
                text: ele.time,
                value: ele[key],
              });
            });
          });
          that.tqmap5 = res.data.ls;
          that.weatherChart = weatherChart;
          that.showWeatherDialog = true;
        },
      });
    },

    // 请求服务
    requestData(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "genreset/findBasicDataInfo",
        timeout: 60000,
        data: {
          id: that.wpId,
        },
        success(res) {
          that.powerData = [
            {
              title: "日照强度",
              value: res.data.jczbmap.ssfs,
              dialogTitle: "日照详情",
              subUrl: "genreset/findGLDetail",
              targetName: "ssfs",
              dialogType: "powerLineChart",
              max: 30,
            },
            {
              title: "保证功率",
              value: res.data.jczbmap.bzgl,
              dialogTitle: "保证功率详情",
              subUrl: "genreset/findGLDetail",
              targetName: "bzgl",
              dialogType: "powerLineChart",
              max: res.data.jczbmap.zjts,
            },
            {
              title: "应发功率",
              value: res.data.jczbmap.yfgl,
              dialogTitle: "应发功率详情",
              subUrl: "genreset/findGLDetail",
              targetName: "yfgl",
              dialogType: "powerLineChart",
              max: res.data.jczbmap.zjts,
            },
            {
              title: "实际功率",
              value: res.data.jczbmap.sjgl,
              dialogTitle: "实际功率详情",
              subUrl: "genreset/findGLDetail",
              targetName: "sjgl",
              dialogType: "powerLineChart",
              max: res.data.jczbmap.zjts,
            },
          ];

          that.jczbmap = res.data.jczbmap;
          that.wxssmap = res.data.wxssmap;
          that.gxkmap = res.data.gxkmap;
          that.mxztmap = res.data.mxztmap;
          that.fcmap = res.data.fcmap;
          that.xtmap = res.data.xtmap;
          that.tqmap = res.data.tqmap;

          that.ForecastPower = [
            {
              name: "当日预测电量",
              value: res.data.jczbmap.rycfdl,
              // total: res.data.jczbmap.rfdlsx,
              total:
                res.data.jczbmap.rycfdl >= res.data.jczbmap.rfdl
                  ? res.data.jczbmap.rycfdl + 100
                  : res.data.jczbmap.rfdl + 100,
            },
            {
              name: "实际发电量",
              value: res.data.jczbmap.rfdl,
              // total: res.data.jczbmap.rfdlsx,
              total:
                res.data.jczbmap.rycfdl >= res.data.jczbmap.rfdl
                  ? res.data.jczbmap.rycfdl + 100
                  : res.data.jczbmap.rfdl + 100,
            },
            {
              name: "当月预测电量",
              value: res.data.jczbmap.yycfdl,
              // total: res.data.jczbmap.yfdlsx,
              total:
                res.data.jczbmap.yycfdl >= res.data.jczbmap.yfdl
                  ? res.data.jczbmap.yycfdl + 200
                  : res.data.jczbmap.yfdl + 200,
            },
            {
              name: "实际发电量",
              value: res.data.jczbmap.yfdl,
              // total: res.data.jczbmap.yfdlsx,
              total:
                res.data.jczbmap.yycfdl >= res.data.jczbmap.yfdl
                  ? res.data.jczbmap.yycfdl + 200
                  : res.data.jczbmap.yfdl + 200,
            },
          ];

          that.planData = {
            yfdl: res.data.jczbmap.yfdl,
            nfdl: res.data.jczbmap.nfdl,
            yfdljh: res.data.gxkmap.yfdljh,
            nfdljh: res.data.gxkmap.nfdljh,
            ywcl: res.data.gxkmap.ywcl,
            nwcl: res.data.gxkmap.nwcl,
          };
        },
      });
    },

    getCharts() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "genreset/findPowerInfo",
        data: {
          id: that.wpId,
        },
        success(res) {
          let rdlKey = ["value1", "value2", "value3", "speed"];
          let DayPower = {
            units: ["(万kWh)", "(m/s)"],
            value: [
              {
                title: "发电量",
                yAxisIndex: 0,
                value: [],
              },
              {
                title: "上网电量",
                yAxisIndex: 0,
                value: [],
              },
              {
                title: "购网电量",
                yAxisIndex: 0,
                value: [],
              },
              {
                title: "风速",
                yAxisIndex: 1,
                value: [],
              },
            ],
          };

          let glKey = [
            "value2",
            "value1",
            "value5",
            "value4",
            "value7",
            "value6",
          ];
          let Powertrend = [
            {
              title: "实发功率",
              smooth: true,
              value: [],
            },
            {
              title: "理论功率",
              smooth: true,
              value: [],
            },
            {
              title: "保证功率",
              smooth: true,
              value: [],
            },
            {
              title: "4小时预测功率",
              smooth: true,
              value: [],
            },
            {
              title: "24小时预测功率",
              smooth: true,
              value: [],
            },
            {
              title: "平均风速",
              smooth: true,
              value: [],
            },
            {
              title: "72小时预测功率",
              smooth: true,
              value: [],
            },
          ];

          rdlKey.forEach((keyEle, keyIndex) => {
            res.data.rdlvos.forEach((cEle) => {
              DayPower.value[keyIndex].value.push({
                text: cEle.timestr,
                value: cEle[keyEle],
              });
            });
          });

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

          that.DayPower = DayPower;
          that.Powertrend = Powertrend;
        },
      });
    },

    // 点击地图展示类型
    changeShowType(wpId, planBtnName) {
      this.wpName = planBtnName?planBtnName:this.wpName;
      this.planBtnName = planBtnName?planBtnName:this.planBtnName;
      this.jczbmap = {};
      clearInterval(this.timmer);
      this.timmer = null;
      this.wpId = wpId?wpId:this.wpId;
      
      this.requestData(false);
      this.getCharts();
      this.timmer = setInterval(() => {
        this.requestData(false);
      }, this.$store.state.websocketTimeSec);
    },
    changeShowTypes(wpId,planBtnName){
      this.historyWpId = wpId
      this.historyPlanBtnName = planBtnName
      this.changeShowType(wpId,planBtnName);
    },
    changeShowBackType(){
      this.changeShowType(this.historyWpId,this.historyPlanBtnName);
    },
    // 打开弹窗
    openDialog(dialogTitle, subUrl, targetName, dialogType) {
      this.dialogTitle = dialogTitle;
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl,
        data: {
          id: that.wpId,
          targetName,
        },
        success(res) {
          that.dialogShow = true;
          that.dialogData = res.data;
          that.dialogType = dialogType;
        },
      });
    },

    // 点击安全天数下的场站按钮重置数据
    onBackStation() {
      if (this.wpId.indexOf("FDC") == -1) {
        clearInterval(this.timmer);
        this.timmer = null;
        this.wpId = this.wpId.substring(0, this.wpId.indexOf("0")) + "_FDC";
        this.requestData(false);
        this.timmer = setInterval(() => {
          this.requestData(false);
        }, this.$store.state.websocketTimeSec);
      }
    },

    showForecastBox() {
      let that = this;
      that.dialogTitle = "预测电量详情";
      that.API.requestData({
        method: "POST",
        subUrl: "/genreset/getForecastwindspeedInfo",
        data: {
          wpId: that.wpId,
        },
        success(res) {
          that.dialogData = res.data;
          that.dialogType = "table";
          that.dialogShow = true;
        },
      });
    },

    // 显示功率复核图表
    showPowerChart(res) {
      this.dialogTitle = res.dialogTitle;
      this.dialogType = res.dialogType;

      // this.powerLineChartData = res.data;
      this.powerLineChartData = res.data.value;
      if (res.dialogTitle === "风速详情") {
        this.powerLineChartYAxises = [
          {
            min: 0,
            name: "风速",
            position: "left",
            unit: "(m/s)",
          },
          {
            min: 0,
            name: "日照",
            position: "right",
            unit: "(w/㎡)",
          },
        ];
      } else {
        this.powerLineChartYAxises = [
          {
            min: 0,
            name: "功率",
            position: "left",
            unit: "(万kWh)",
          },
        ];
      }

      this.dialogShow = true;
    },

    // 显示计划电量完成情况图表
    showDoneChart(res) {
      this.dialogTitle = res.dialogTitle;
      this.dialogType = res.dialogType;
      this.doneLineChartData = res.data;
      this.doneLineChartData.units[0] = this.doneLineChartData.units[0]?this.doneLineChartData.units[0]:'(万KWh)';
      this.dialogShow = true;
      console.log(this.doneLineChartData)
    },

    // 地图进入事件
    onEnter() {
      this.powerplanShowSingle = true;
    },

    // 地图退出事件
    onBack() {
      this.powerplanShowSingle = false;
    },
  },

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

  unmounted() {
    clearInterval(this.timmer);
    clearInterval(this.timmer2);
    clearInterval(this.timmer3);
    this.timmer = null;
    this.timmer2 = null;
    this.timmer3 = null;
  },
};
</script>

<style lang="less">
.home {
  .grid-content {
    background: #333;
    height: 1.111vh;
  }
  .table-card-panel {
    .col + .col {
      margin-left: 8px;
    }
  }

  .table-card {
    background: rgba(255, 255, 255, 0.1);
    border-collapse: collapse;
    width: 100%;
    outline: 1px solid @gray;

    .curP {
      cursor: pointer;
    }

    tr {
      font-size: 12px;
      td {
        border: 0.093vh solid fade(@gray, 20);
        line-height: 27px;
        padding: 0 4px;
        &.text {
        }

        &.value {
          text-align: right;
          font-family: @font-family-num;
        }

        &.unit {
        }
      }
    }
  }

  .tools {
    display: flex;

    .tool-block {
      display: flex;
      align-items: center;
      margin-left: 0.741vh;

      .legend {
        flex: auto;
        width: 6px;
        height: 6px;
        margin-right: 0.741vh;

        &.long {
          width: 2.963vh;
          height: 0.37vh;
        }
      }

      .legend-text {
        color: #ffffff4d;
      }
    }
  }

  .situation {
    width: 100%;
    height: 100%;
    .situation-body {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 100%;

      .situation-item {
        display: flex;
        align-content: center;
        flex: 1 1 25%;
        align-items: center;

        .icon {
          svg {
            width: 40px;
            height: 40px;
          }
        }

        &.fengji {
          flex: 0 1 25%;

          .info {
            margin-left: 16px;
            .value {
              font-size: 24px;
              display: inline-block;
            }
          }
        }

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

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

        .info {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 0.741vh;

          .title {
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 0.7407vh;
          }

          .text {
            display: inline-block;
            width: 64px;
            text-align: left;
          }

          .value {
            text-align: left;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
  .com-panel {
    height: 100%;

    .panel-body {
      height: calc(100% - 32px);
    }
  }

  .top-left-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 380px;

    .row {
      flex: 0 0 auto;
    }

    .plan {
      flex: 0 0 auto;
      .com-panel {
        height: 100%;

        .panel-body {
          height: calc(100% - 32px);
        }
      }
    }
  }

  .top-mid-panel {
    flex: 1 1 auto;
  }

  .top-right-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 380px;
  }
  .weatherBox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .l,
    .r {
      width: 48%;
      height: 500px;
      padding: 50px 0;
    }

    .el-collapse {
      border-top: 1px solid #999;
    }

    .el-collapse-item .el-collapse-item__wrap {
      border-bottom: 1px solid #999;
    }

    .el-collapse-item__content {
      background: rgba(18, 29, 28);
      color: rgba(255, 255, 255, 0.75);
      padding: 20px;
    }

    .el-collapse-item__header {
      background: rgb(18, 29, 28);
      border-bottom: 1px solid #999;
      color: rgba(255, 255, 255, 0.75);
    }

    .el-card__header,
    .el-collapse,
    .el-collapse-item__header {
      border-bottom: 1px solid #999;
    }

    .collapseItemTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      .svg {
        width: 20px;
        height: 20px;
      }

      .info {
        margin-left: 4px;
      }

      .otherWea {
        margin-right: 10px;
      }
    }

    .other-info {
      text-align: center;
      font-size: @fontsize-s;

      .text {
        color: @font-color;
        font-size: 12px;
      }

      .value {
        margin: 0.741vh 0 0 0;
      }

      .other-icon {
        margin: 0 auto;
      }
    }
  }
}
</style>