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 :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" />
        </com-panel>
        </Col>
      </Row>
      </Col>
      <Col :span="12">
      <Map></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" />
        </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">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">装机台数</td>
              <td class="value green">{{jczbmap.zjts}}</td>
              <td class="unit gray">台</td>
            </tr>
            <tr class="">
              <td class="text gray">日发电量</td>
              <td class="value green">{{jczbmap.rfdl}}</td>
              <td class="unit gray">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">月发电量</td>
              <td class="value green">{{jczbmap.yfdl}}</td>
              <td class="unit gray gray">万kwh</td>
            </tr>
            <tr class="">
              <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">年等效科利用系数</td>
              <td class="value green">{{gxkmap.ndxkyss}}</td>
              <td class="unit gray">%</td>
            </tr>
          </table>
        </com-panel>
        </Col>
        <Col>
        <com-panel>
          <table class="table-card">
            <tr class="">
              <td class="text gray">日性能损失</td>
              <td class="value green">{{wxssmap.rqfssdl}}</td>
              <td class="unit gray">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">日故障损失</td>
              <td class="value green">{{wxssmap.rgzssdl}}</td>
              <td class="unit gray">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">日检修损失</td>
              <td class="value green">{{wxssmap.rjxssdl}}</td>
              <td class="unit gray">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">日限电损失</td>
              <td class="value green">{{wxssmap.rxdssdl}}</td>
              <td class="unit gray gray">万kwh</td>
            </tr>
            <tr class="">
              <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">年待机小时</td>
              <td class="value green">{{gxkmap.ndjxs}}</td>
              <td class="unit gray">小时</td>
            </tr>
          </table>
        </com-panel>
        </Col>
        <Col>
        <com-panel>
          <table class="table-card">
            <tr class="">
              <td class="text gray">月性能损失</td>
              <td class="value green">{{wxssmap.yqfssdl}}</td>
              <td class="unit gray">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">月故障损失</td>
              <td class="value green">{{wxssmap.ygzssdl}}</td>
              <td class="unit gray">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">月检修损失</td>
              <td class="value green">{{wxssmap.yjxssdl}}</td>
              <td class="unit gray">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">月限电损失</td>
              <td class="value green">{{wxssmap.yxdssdl}}</td>
              <td class="unit gray gray">万kwh</td>
            </tr>
            <tr class="">
              <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">年运行小时</td>
              <td class="value green">{{gxkmap.nyxxs}}</td>
              <td class="unit gray">小时</td>
            </tr>
          </table>
        </com-panel>
        </Col>
        <Col>
        <com-panel>
          <table class="table-card">
            <tr class="">
              <td class="text gray">年性能损失</td>
              <td class="value green">{{wxssmap.nqfssdl}}</td>
              <td class="unit gray">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">年故障损失</td>
              <td class="value green">{{wxssmap.ngzssdl}}</td>
              <td class="unit gray">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">年检修损失</td>
              <td class="value green">{{wxssmap.njxssdl}}</td>
              <td class="unit gray">万kwh</td>
            </tr>
            <tr class="">
              <td class="text gray">年限电损失</td>
              <td class="value green">{{wxssmap.nxdssdl}}</td>
              <td class="unit gray gray">万kwh</td>
            </tr>
            <tr class="">
              <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">年故障小时</td>
              <td class="value green">{{gxkmap.ngzxs}}</td>
              <td class="unit gray">小时</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>
  </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";

export default {
  name: "Home",
  components: {
    Row,
    Col,
    ComPanel,
    Weather,
    CoulometricAnalysis,
    ListBarChart,
    PowerReview,
    ToolbarPanel,
    PowerPlan,
    MultipleBarChart,
    MultipleLineChart,
    Panel3,
    SvgIcon,
    Map,
  },
  data () {
    return {
      timmer: null, // 计时器
      jczbmap: {},
      wxssmap: {},
      gxkmap: {},
      mxztmap: {},
      planData: {},
      powerData: {},
      // 预测电量
      ForecastPower: [
        {
          name: "当日预测电量",
          value: 103.62,
        },
        {
          name: "实际发电量",
          value: 98.62,
        },
        {
          name: "当月预测电量",
          value: 113.27,
        },
        {
          name: "实际发电量",
          value: 136.72,
        },
      ],
      // 日发电量
      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",
        data: {
          id: "MHS_FDC",
        },
        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: new Date(cEle.time).formatDate("yyyy-MM-dd"),
                value: cEle[keyEle]
              });
            });
          });

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

          that.powerData = [{
            title: "风速",
            value: res.data.jczbmap.ssfs
          }, {
            title: "保证功率",
            value: res.data.jczbmap.bzgl
          }, {
            title: "应发功率",
            value: res.data.jczbmap.yfgl
          }, {
            title: "实际功率",
            value: res.data.jczbmap.sjgl
          }];

          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.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
          };
          console.log(111, res);
        },
      });
    },
  },

  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>