hb_sis_zhfx/src/views/Home/Home.vue

<template>
  <div class="home">
    <Row type="flex">
      <Col :span="6">
      <Row type="flex">
        <Col :span="24">
        <com-panel title="银川" sub-title="AM 10:52 实况" icon="fa fa-map-marker">
          <weather />
        </com-panel>
        </Col>
      </Row>
      <Row type="flex">
        <Col :span="24">
        <com-panel title="预测电量" sub-title="（单位：万KWh）">
            <list-bar-chart-2 :list="ForecastPower" height="16.6667vh" />
        </com-panel>
        </Col>
      </Row>
      <Row type="flex">
        <Col :span="24">
        <com-panel title="功率复核" sub-title="（单位：万KW）">
          <power-review :data="powerData" :id="wpId" @chartClick="showPowerChart" />
        </com-panel>
        </Col>
      </Row>
      </Col>
      <Col :span="12">
      <Map :wpId="wpId" :day="String(jczbmap.aqts || '---')" :data="fcmap" @mapClick="changeShowType"></Map>
      </Col>
      <Col :span="6">
        <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" :showSingle="powerplanShowSingle" :id="wpId" @chartClick="showDownChart" />
            </com-panel>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row type="flex">
      <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 class="tool-block">
              <div class="legend bg-yellow"></div>
              <div class="legend-text">风速</div>
            </div>
          </div>
        </template>
        <template v-slot:default>
          <!-- 日发电量 -->
          <multiple-bar-chart :list="DayPower.value" :units="DayPower.units" height="12.963vh" />
        </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="12.963vh" />
        </template>
      </toolbar-panel>
      </Col>
    </Row>
    <Row type="flex">
      <!-- 下方 table -->
      <Col :span="16">
      <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">万kw</td>
            </tr>
            <tr class="">
              <td class="text gray">装机台数</td>
              <td class="value green">{{jczbmap.zjts}}</td>
              <td class="unit gray">台</td>
            </tr>
            <tr class="" @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="" @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="" @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="">
              <td class="text gray">年设备可利用率</td>
              <td class="value green">{{gxkmap.nsbklyl}}</td>
              <td class="unit gray">%</td>
            </tr>
          </table>
        </com-panel>
        </Col>
        <Col>
        <com-panel>
          <table class="table-card">
            <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">MTBF</td>
              <td class="value green">{{jczbmap.mtbf}}</td>
              <td class="unit gray">小时</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">月利用小时</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">{{wpId === "0" ? "节约二氧化碳" : "年等效科利用系数"}}</td>
              <td class="value green">{{wpId === "0" ? jczbmap.jpeyht : gxkmap.ndxkyss}}</td>
              <td class="unit gray">{{wpId === "0" ? "万吨" : "%"}}</td>
            </tr>
          </table>
        </com-panel>
        </Col>
        <Col>
        <com-panel>
          <table class="table-card">
            <tr class="" @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>
            <tr class="" @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="" @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="" @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="" @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="">
              <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="" @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>
            <tr class="" @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="" @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="" @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="" @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="">
              <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>
          </table>
        </com-panel>
        </Col>
        <Col>
        <com-panel>
          <table class="table-card">
            <tr class="" @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>
            <tr class="" @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="" @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="" @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="" @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="">
              <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>
          </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" :list="doneLineChartData.value" :units="doneLineChartData.units" 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, // 计时器
      jczbmap: {},
      wxssmap: {},
      gxkmap: {},
      mxztmap: {},
      planData: {},
      powerData: {},
      powerLineChartData: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      doneLineChartData: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      dialogType: null,
      wpId: "0",
      fcmap:{},
      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: ["(万KWh)", "(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"
          }, {
            title: "保证功率",
            value: res.data.jczbmap.bzgl,
            dialogTitle: "保证功率详情",
            subUrl: "genreset/findGLDetail",
            targetName: "bzgl",
            dialogType: "powerLineChart"
          }, {
            title: "应发功率",
            value: res.data.jczbmap.yfgl,
            dialogTitle: "应发功率详情",
            subUrl: "genreset/findGLDetail",
            targetName: "yfgl",
            dialogType: "powerLineChart"
          }, {
            title: "实际功率",
            value: res.data.jczbmap.sjgl,
            dialogTitle: "实际功率详情",
            subUrl: "genreset/findGLDetail",
            targetName: "sjgl",
            dialogType: "powerLineChart"
          }];

          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.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){
      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){
      console.log(123123,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;

      let powerLineChartData = {
        // 图表所用单位
        units: [""],
        value: [],
      };

      res.data.forEach((pEle,pIndex)=>{
        powerLineChartData.value.push({
          title: pEle[0].name,
          yAxisIndex: 0,
          value: [],
        });

        pEle.forEach(cEle=>{
          powerLineChartData.value[pIndex].value.push({
            text: new Date(cEle.time).formatDate("hh:mm:ss"),
            value: cEle.value1
          });
        });
      });

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

    // 显示计划电量完成情况图表
    showDownChart(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.$nextTick(() => {
      that.requestData(false);
      that.timmer = setInterval(() => {
        that.requestData(false);
      }, that.$store.state.websocketTimeSec);
    });
  },

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

<style lang="less" scoped>
.grid-content {
  background: #333;
  height: 1.111vh;
}

.table-card {
  background: rgba(255, 255, 255, 0.1);
  border-collapse: collapse;
  width: 100%;

  tr {
    font-size: @fontsize-s;
    td {
      border: 0.093vh solid @darkgray;
      padding: 0.556vh 0.741vh;
      &.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: 0.741vh;
      height: 0.741vh;
      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: center;
    height: 100%;

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

      .icon {
        svg {
          width: 4.167vh;
          height: 4.167vh;
        }
      }

      &.fengji {
        flex: 0 1 7.99vw;

        .info .value {
          font-size: 1.852vh;
        }
      }

      .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: @fontsize;
          margin-bottom: 0.741vh;
        }

        .text {
          margin-right: 0.741vh;
        }

        .value {
          text-align: right;
          font-size: @fontsize-s;
        }
      }
    }
  }
}
</style>