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 :data="tqmap" />
                  </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="100%" />
                  </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"></Map>
          </div>
          <div class="top-right-panel">
              <Row type="flex">
                  <Col :span="24">
                  <com-panel title="电量分析" sub-title="（单位：万kWh）">
                      <coulometric-analysis />
                  </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="日发电量">
          <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-line-chart :list="Powertrend.value" :units="Powertrend.units" height="100%" @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">{{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}}</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}}</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}}</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}}</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">{{gxkmap.yzhcydl}}</td>
              <td class="unit gray">%</td>
            </tr>
            <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.ysbklyl}}</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>
          </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-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.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-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.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-yellow">
                <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-darkblue">
                <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="dialogTitle" v-model="dialogShow" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="dialogType = ''">
      <Table :data="dialogData" v-if="dialogType === 'table'" />
      <MultipleLineChart height="500px" :units="powerLineChartData.units" :list="powerLineChartData.value" :showLegend="true" v-if="dialogType === 'powerLineChart'" />
      <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 MultipleLineChart from "../../components/chart/line/multiple-line-chart.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 Table from "./dialog/table.vue";

export default {
  name: "Home",
  components: {
    Row,
    Col,
    ComPanel,
    Weather,
    CoulometricAnalysis,
    // ListBarChart,
    PowerReview,
    ToolbarPanel,
    PowerPlan,
    MultipleBarChart,
    MultipleLineChart,
    Panel3,
    SvgIcon,
    Map,
    ListBarChart2,
    Table
  },
  data () {
    return {
      timmer: null, // 计时器
      timmer2:null,
      jczbmap: {},
      wxssmap: {},
      gxkmap: {},
      mxztmap: {},
      planData: {},
      powerData: {},
      tqmap:{},
      nowTime:"",
      planBtnName:"全部",
      powerLineChartData: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      doneLineChartData: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      dialogType: null,
      wpId: "0",
      fcmap:{},
      xtmap:{},
      dialogShow: false,
      dialogTitle: "",
      dialogData:{},
      // 预测电量
      ForecastPower: [],
      // 日发电量
      DayPower: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      // 72小时功率趋势图
      Powertrend: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
    };
  },

  methods: {
    // 请求服务
    requestData (showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "genreset/findBasicDataInfo",
        timeout: 60000,
        data: {
          id: that.wpId,
        },
        success (res) {
          let glvos = [];

          let rdlKey = ["value1", "value2", "value3"];
          let DayPower = {
            // 图表所用单位
            units: ["(万kWh)"],
            value: [{
              title: "发电量",
              yAxisIndex: 0,
              value: []
            }, {
              title: "上网电量",
              yAxisIndex: 0,
              value: []
            }, {
              title: "购网电量",
              yAxisIndex: 0,
              value: []
            }]
          };

          let glKey = ["value1", "value2", "value3", "value4", "value5", "value6"];
          let Powertrend = {
            // 图表所用单位
            units: ["(MW)", "(m/s)"],
            value: [{
              title: "应发功率",
              yAxisIndex: 0,
              value: []
            }, {
              title: "实发功率",
              yAxisIndex: 0,
              value: []
            }, {
              title: "理论功率",
              yAxisIndex: 0,
              value: []
            }, {
              title: "预测功率",
              yAxisIndex: 0,
              value: []
            }, {
              title: "保证功率",
              yAxisIndex: 0,
              value: []
            }, {
              title: "平均风速",
              yAxisIndex: 1,
              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.value[keyIndex].value.push({
                text: new Date(cEle.time).formatDate("hh:mm:ss"),
                value: cEle[keyEle]
              });
            });
          });

          that.powerData = [{
            title: "风速",
            value: res.data.jczbmap.ssfs,
            dialogTitle: "风速详情",
            subUrl: "genreset/findGLDetail",
            targetName: "ssfs",
            dialogType: "powerLineChart",
            max: res.data.jczbmap.zjts
          }, {
            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.DayPower = DayPower;
          that.Powertrend = Powertrend;
          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
          },{
            name: "实际发电量",
            value: res.data.jczbmap.rfdl,
            total: res.data.jczbmap.rfdlsx
          },{
            name: "当月预测电量",
            value: res.data.jczbmap.yycfdl,
            total: res.data.jczbmap.yfdlsx
          },{
            name: "实际发电量",
            value: res.data.jczbmap.yfdl,
            total: res.data.jczbmap.yfdlsx
          }];

          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
          };
        },
      });
    },

    // 点击地图展示类型
    changeShowType(wpId, planBtnName){
      this.planBtnName = planBtnName;
      this.jczbmap = {};
      clearInterval(this.timmer);
      this.timmer = null;
      this.wpId = wpId;
      this.requestData(false);
      this.timmer = setInterval(() => {
        this.requestData(false);
      }, this.$store.state.websocketTimeSec);
    },

    // 打开弹窗
    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;
        }
      });
    },

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

      this.powerLineChartData = res.data;
      this.dialogShow = true;
    },

    // 显示计划电量完成情况图表
    showDoneChart(res){
      this.dialogTitle = res.dialogTitle;
      this.dialogType = res.dialogType;

      this.doneLineChartData = res.data;
      this.dialogShow = true;
    },

    // 地图进入事件
    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);
      that.timmer = setInterval(() => {
        that.requestData(false);
      }, that.$store.state.websocketTimeSec);
      that.timmer2 = setInterval(() => {
        that.nowTime = new Date().formatDate("hh:mm:ss");
      }, 1000);
    });
  },

  unmounted () {
    clearInterval(this.timmer);
    clearInterval(this.timmer2);
    this.timmer = null;
    this.timmer2 = 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: 4.167vh;
                    height: 4.167vh;
                  }
                }

        &.fengji {
          flex: 0 1 25%;

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

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

                  svg {
                    width: 2.593vh;
                    height: 2.593vh;
                  }
                }

                .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: right;
                    font-size: 12px;
                  }
                }
              }
            }
          }
          .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;
  }
}
</style>