|
|
@@ -1,839 +1,867 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div class="btn-group-tabs">
|
|
|
- <BtnGroup2 :btnGroups="btnGroupsss" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
|
|
|
- </div>
|
|
|
- <div class="wind-site-home">
|
|
|
- <div class="mg-b-16">
|
|
|
- <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
|
|
|
- </div>
|
|
|
- <row>
|
|
|
- <wind-site-weather :time="nowTime" :data="tqmap" />
|
|
|
- <panel-3 class="wind-site-info">
|
|
|
- <row align="middle">
|
|
|
- <div class="info-item">
|
|
|
- <div class="value">{{ jczbmap.zjrl }}</div>
|
|
|
- <div class="text">装机容量</div>
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <div class="value">{{ jczbmap.rfdl }}</div>
|
|
|
- <div class="text">日发电量</div>
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <div class="value">{{ jczbmap.yfdl }}</div>
|
|
|
- <div class="text">月发电量</div>
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <div class="value">{{ jczbmap.nfdl }}</div>
|
|
|
- <div class="text">年发电量</div>
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <div class="value">{{ jczbmap.ylyxs }}</div>
|
|
|
- <div class="text">月利用小时</div>
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <div class="value">{{ jczbmap.nlyxs }}</div>
|
|
|
- <div class="text">年利用小时</div>
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <div class="value">{{ jczbmap.ssfs }}</div>
|
|
|
- <div class="text">实时风速</div>
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <div class="value">{{ jczbmap.sjgl }}</div>
|
|
|
- <div class="text">实时功率</div>
|
|
|
- </div>
|
|
|
- </row>
|
|
|
- </panel-3>
|
|
|
- <panel-3 class="wind-running-info">
|
|
|
- <row align="middle">
|
|
|
- <div class="fengji">
|
|
|
- <div class="fengji-icon svg-icon svg-icon-white">
|
|
|
- <svg-icon class="" svgid="svg-风机" />
|
|
|
- </div>
|
|
|
- <div class="info">
|
|
|
- <div class="text green">接入风机</div>
|
|
|
- <div class="value">{{ jczbmap.jrts }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="situation">
|
|
|
- <row class="icon-status">
|
|
|
- <div class="status">
|
|
|
- <span class="svg-icon svg-icon-green">
|
|
|
- <svg-icon svgid="svg-standby" />
|
|
|
- </span>
|
|
|
- <span class="text green">
|
|
|
- 待机
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="svg-icon svg-icon-purple">
|
|
|
- <svg-icon svgid="svg-normal-power" />
|
|
|
- </span>
|
|
|
- <span class="text purple">
|
|
|
- 运行
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="svg-icon svg-icon-pink">
|
|
|
- <svg-icon svgid="svg-limit-power"/>
|
|
|
- </span>
|
|
|
- <span class="text pink">
|
|
|
- 限电
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="svg-icon svg-icon-red">
|
|
|
- <svg-icon svgid="svg-gz-downtime" />
|
|
|
- </span>
|
|
|
- <span class="text red">
|
|
|
- 故障
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="svg-icon svg-icon-orange">
|
|
|
- <svg-icon svgid="svg-jx-downtime" />
|
|
|
- </span>
|
|
|
- <span class="text orange">
|
|
|
- 检修
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="svg-icon svg-icon-gray">
|
|
|
- <svg-icon svgid="svg-offline" />
|
|
|
- </span>
|
|
|
- <span class="text gray">
|
|
|
- 离线
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="svg-icon svg-icon-white">
|
|
|
- <svg-icon svgid="svg-intranet-involvement" />
|
|
|
- </span>
|
|
|
- <span class="text white">
|
|
|
- 受累
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </row>
|
|
|
- <row>
|
|
|
- <div class="status">
|
|
|
- <span class="value">
|
|
|
- {{ jczbmap.djnum }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="value">
|
|
|
- {{ jczbmap.zcfdnum }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="value">
|
|
|
- {{ jczbmap.xdjclnum }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="value">
|
|
|
- {{ jczbmap.gztjnum }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="value">
|
|
|
- {{ jczbmap.jxtjnum }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="value">
|
|
|
- {{ jczbmap.dwslnum }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="status">
|
|
|
- <span class="value">
|
|
|
- {{ jczbmap.lxnum }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </row>
|
|
|
- </div>
|
|
|
- </row>
|
|
|
- </panel-3>
|
|
|
- </row>
|
|
|
- <div class="first-info mg-t-16 mg-b-16">
|
|
|
- <div style="flex:0 1 450px;">
|
|
|
- <panel title="场站">
|
|
|
- <station height="18.519vh" />
|
|
|
- </panel>
|
|
|
- </div>
|
|
|
- <div class="mg-l-16" style="flex:1 1 auto;" ref="lineChart">
|
|
|
- <panel title="4小时功率曲线图">
|
|
|
- <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units"
|
|
|
- :showLegend="true" />
|
|
|
- </panel>
|
|
|
- </div>
|
|
|
- <div class="mg-l-16" style="flex:0 0 400px;">
|
|
|
- <panel class="light-matrix-panel">
|
|
|
- <light-matrix :list="fjmap" />
|
|
|
- </panel>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <row>
|
|
|
- <Col :span="8">
|
|
|
- <panel title="日度损失电量分析">
|
|
|
- <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
|
|
|
- </panel>
|
|
|
- </Col>
|
|
|
- <Col :span="8">
|
|
|
- <panel title="月度损失电量分析">
|
|
|
- <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
|
|
|
- </panel>
|
|
|
- </Col>
|
|
|
- <Col :span="8">
|
|
|
- <panel title="年度损失电量分析">
|
|
|
- <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData" height="21.296vh" />
|
|
|
- </panel>
|
|
|
- </Col>
|
|
|
- </row>
|
|
|
- <row>
|
|
|
- <Col :span="8">
|
|
|
- <panel title="日度损失电量分析">
|
|
|
- <hover-bar-chart :list="dayLost" height="21.296vh" />
|
|
|
- </panel>
|
|
|
- </Col>
|
|
|
- <Col :span="8">
|
|
|
- <panel title="日发电量对比">
|
|
|
- <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units"
|
|
|
- :showLegend="true" />
|
|
|
- </panel>
|
|
|
- </Col>
|
|
|
- <Col :span="8">
|
|
|
- <panel title="月发电量对比">
|
|
|
- <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
|
|
|
- </panel>
|
|
|
- </Col>
|
|
|
- </row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <div class="btn-group-tabs">
|
|
|
+ <BtnGroup2 :btnGroups="btnGroupsss" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
|
|
|
+ </div>
|
|
|
+ <div class="wind-site-home">
|
|
|
+ <div class="mg-b-16">
|
|
|
+ <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
|
|
|
+ </div>
|
|
|
+ <row>
|
|
|
+ <wind-site-weather :time="nowTime" :data="tqmap" />
|
|
|
+ <panel-3 class="wind-site-info">
|
|
|
+ <row align="middle">
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text">装机容量</div>
|
|
|
+ <div class="value">{{ jczbmap.zjrl }}</div>
|
|
|
+ <div class="text">MW</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text">日发电量</div>
|
|
|
+ <div class="value">{{ jczbmap.rfdl }}</div>
|
|
|
+ <div class="text">万KWh</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text">月发电量</div>
|
|
|
+ <div class="value">{{ jczbmap.yfdl }}</div>
|
|
|
+ <div class="text">万KWh</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text">年发电量</div>
|
|
|
+ <div class="value">{{ jczbmap.nfdl }}</div>
|
|
|
+ <div class="text">万KWh</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text">月利用小时</div>
|
|
|
+ <div class="value">{{ jczbmap.ylyxs }}</div>
|
|
|
+ <div class="text">小时</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text">年利用小时</div>
|
|
|
+ <div class="value">{{ jczbmap.nlyxs }}</div>
|
|
|
+ <div class="text">小时</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text">实时风速</div>
|
|
|
+ <div class="value">{{ jczbmap.ssfs }}</div>
|
|
|
+ <div class="text">m/s</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text">实时功率</div>
|
|
|
+ <div class="value">{{ jczbmap.sjgl }}</div>
|
|
|
+ <div class="text">MW</div>
|
|
|
+ </div>
|
|
|
+ </row>
|
|
|
+ </panel-3>
|
|
|
+ <panel-3 class="wind-running-info">
|
|
|
+ <row align="middle">
|
|
|
+ <div class="fengji">
|
|
|
+ <div class="fengji-icon svg-icon svg-icon-white">
|
|
|
+ <svg-icon class="" svgid="svg-风机" />
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="text green">接入风机</div>
|
|
|
+ <div class="value">{{ jczbmap.jrts }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="situation">
|
|
|
+ <row class="icon-status">
|
|
|
+ <div class="status">
|
|
|
+ <span class="svg-icon svg-icon-green">
|
|
|
+ <svg-icon svgid="svg-standby" />
|
|
|
+ </span>
|
|
|
+ <span class="text green">
|
|
|
+ 待机
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="svg-icon svg-icon-purple">
|
|
|
+ <svg-icon svgid="svg-normal-power" />
|
|
|
+ </span>
|
|
|
+ <span class="text purple">
|
|
|
+ 运行
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="svg-icon svg-icon-pink">
|
|
|
+ <svg-icon svgid="svg-limit-power" />
|
|
|
+ </span>
|
|
|
+ <span class="text pink">
|
|
|
+ 限电
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="svg-icon svg-icon-red">
|
|
|
+ <svg-icon svgid="svg-gz-downtime" />
|
|
|
+ </span>
|
|
|
+ <span class="text red">
|
|
|
+ 故障
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="svg-icon svg-icon-orange">
|
|
|
+ <svg-icon svgid="svg-jx-downtime" />
|
|
|
+ </span>
|
|
|
+ <span class="text orange">
|
|
|
+ 检修
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="svg-icon svg-icon-gray">
|
|
|
+ <svg-icon svgid="svg-offline" />
|
|
|
+ </span>
|
|
|
+ <span class="text gray">
|
|
|
+ 离线
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="svg-icon svg-icon-white">
|
|
|
+ <svg-icon svgid="svg-intranet-involvement" />
|
|
|
+ </span>
|
|
|
+ <span class="text white">
|
|
|
+ 受累
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </row>
|
|
|
+ <row>
|
|
|
+ <div class="status">
|
|
|
+ <span class="value">
|
|
|
+ {{ jczbmap.djnum }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="value">
|
|
|
+ {{ jczbmap.zcfdnum }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="value">
|
|
|
+ {{ jczbmap.xdjclnum }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="value">
|
|
|
+ {{ jczbmap.gztjnum }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="value">
|
|
|
+ {{ jczbmap.jxtjnum }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="value">
|
|
|
+ {{ jczbmap.dwslnum }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span class="value">
|
|
|
+ {{ jczbmap.lxnum }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </row>
|
|
|
+ </div>
|
|
|
+ </row>
|
|
|
+ </panel-3>
|
|
|
+ </row>
|
|
|
+ <div class="first-info mg-t-16 mg-b-16">
|
|
|
+ <div style="flex:0 1 450px;">
|
|
|
+ <panel title="场站">
|
|
|
+ <station height="18.519vh" />
|
|
|
+ </panel>
|
|
|
+ </div>
|
|
|
+ <div class="mg-l-16" style="flex:1 1 auto;" ref="lineChart">
|
|
|
+ <panel title="72小时功率曲线图">
|
|
|
+ <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value"
|
|
|
+ :units="Powertrend.units" :showLegend="true" />
|
|
|
+ </panel>
|
|
|
+ </div>
|
|
|
+ <div class="mg-l-16" style="flex:0 0 400px;">
|
|
|
+ <panel class="light-matrix-panel">
|
|
|
+ <light-matrix :list="fjmap" />
|
|
|
+ </panel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <row>
|
|
|
+ <Col :span="8">
|
|
|
+ <panel title="日度损失电量分析">
|
|
|
+ <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData"
|
|
|
+ height="21.296vh" />
|
|
|
+ </panel>
|
|
|
+ </Col>
|
|
|
+ <Col :span="8">
|
|
|
+ <panel title="月度损失电量分析">
|
|
|
+ <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData"
|
|
|
+ height="21.296vh" />
|
|
|
+ </panel>
|
|
|
+ </Col>
|
|
|
+ <Col :span="8">
|
|
|
+ <panel title="年度损失电量分析">
|
|
|
+ <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData"
|
|
|
+ height="21.296vh" />
|
|
|
+ </panel>
|
|
|
+ </Col>
|
|
|
+ </row>
|
|
|
+ <row>
|
|
|
+ <Col :span="8">
|
|
|
+ <panel title="日度损失电量分析">
|
|
|
+ <hover-bar-chart :list="dayLost" height="21.296vh" />
|
|
|
+ </panel>
|
|
|
+ </Col>
|
|
|
+ <Col :span="8">
|
|
|
+ <panel title="日发电量对比">
|
|
|
+ <multiple-bar-line-chart height="21.296vh" :barData="CompleteElectricity.data"
|
|
|
+ :units="CompleteElectricity.units" :lineData="CompleteElectricity.lineData"/>
|
|
|
+ </panel>
|
|
|
+ </Col>
|
|
|
+ <Col :span="8">
|
|
|
+ <panel title="月发电量对比">
|
|
|
+ <multiple-bar-line-chart height="21.296vh" :barData="MonthCompare.data"
|
|
|
+ :units="MonthCompare.units" :lineData="MonthCompare.lineData"/>
|
|
|
+ </panel>
|
|
|
+ </Col>
|
|
|
+ </row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import HoverBarChart from "../../../../components/chart/bar/hover-bar-chart.vue";
|
|
|
-import MultipleBarChart from "../../../../components/chart/bar/multiple-bar-chart.vue";
|
|
|
-import MultipleLineChart from "../../../../components/chart/line/double-line-chart.vue";
|
|
|
-import NormalLineChart from "../../../../components/chart/line/normal-line-chart.vue";
|
|
|
-import DualPieChart from "../../../../components/chart/pie/dual-pie-chart.vue";
|
|
|
-import BtnGroupDouble from "../../../../components/coms/btn/btn-group-double.vue";
|
|
|
-import Col from "../../../../components/coms/grid/col.vue";
|
|
|
-import Row from "../../../../components/coms/grid/row.vue";
|
|
|
-import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
|
|
|
-import Panel from "../../../../components/coms/panel/panel.vue";
|
|
|
-import Panel3 from "../../../../components/coms/panel/panel3.vue";
|
|
|
-import LightMatrix from "./light-matrix.vue";
|
|
|
-import Station from "./Station.vue";
|
|
|
-import WindSiteWeather from "./wind-site-weather.vue";
|
|
|
-
|
|
|
-import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
|
|
|
-
|
|
|
-export default {
|
|
|
- // 名称
|
|
|
- name: "WindSiteHome",
|
|
|
- // 使用组件
|
|
|
- components: { BtnGroup2, WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble, Station },
|
|
|
- // 数据
|
|
|
- data () {
|
|
|
- return {
|
|
|
- timmer: null, // 计时器
|
|
|
- timmer2: null,
|
|
|
- nowTime: "", // 时间
|
|
|
- fjmap: [], // 分机矩阵
|
|
|
- tqmap: {}, // 天气数据
|
|
|
- glvos: {}, // 72小时功率曲线图
|
|
|
- wxssmap: {}, // 五项损失饼图数据
|
|
|
- jczbmap: {}, // 顶部基础数据
|
|
|
- dayLost: [], // 日度损失电量分析柱状图
|
|
|
- donePower: [], // 完成电量柱状图
|
|
|
- // 饼图数据
|
|
|
- pieChartData: {
|
|
|
- // 日度
|
|
|
- dayData: [
|
|
|
- {
|
|
|
- title: "",
|
|
|
- value: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- // 月度
|
|
|
- monthData: [
|
|
|
- {
|
|
|
- title: "",
|
|
|
- value: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- // 年度
|
|
|
- yearData: [
|
|
|
- {
|
|
|
- title: "",
|
|
|
- value: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- // 完成电量
|
|
|
- CompleteElectricity: {
|
|
|
- data: [
|
|
|
- {
|
|
|
- title: "发电量",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "预测电量",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- units: ["", ""],
|
|
|
- },
|
|
|
-
|
|
|
- // 4小时功率曲线图
|
|
|
- Powertrend: {
|
|
|
- value: [
|
|
|
- {
|
|
|
- title: "",
|
|
|
- value: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
-
|
|
|
- // 月发电量对比
|
|
|
- MonthCompare: {
|
|
|
- units: ["(MK)"],
|
|
|
- value: [
|
|
|
- {
|
|
|
- title: "月发电量",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "月预测电量",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- selectIndex: 0,
|
|
|
- rowIndex: 0,
|
|
|
- btnGroupsss: [
|
|
|
- {
|
|
|
- icon: "svg-wind-site",
|
|
|
- btns: [],
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "svg-photovoltaic",
|
|
|
- btns: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- // 函数
|
|
|
- methods: {
|
|
|
- getWp () {
|
|
|
- let that = this;
|
|
|
- that.API.requestData({
|
|
|
- method: "GET",
|
|
|
- subUrl: "powercompare/windfarmAllAjax",
|
|
|
- success (res) {
|
|
|
- let btnGroups = [
|
|
|
- {
|
|
|
- icon: "svg-wind-site",
|
|
|
- btns: [],
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "svg-photovoltaic",
|
|
|
- btns: [],
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- res.data.forEach((ele, index) => {
|
|
|
- if (ele.id.indexOf("FDC") !== -1) {
|
|
|
- btnGroups[0].btns.push({
|
|
|
- text: ele.name,
|
|
|
- code: ele.id,
|
|
|
- });
|
|
|
- } else {
|
|
|
- btnGroups[1].btns.push({
|
|
|
- text: ele.name,
|
|
|
- code: ele.id,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- that.btnGroupsss = btnGroups;
|
|
|
- that.renderBtnActiveIndex();
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- renderBtnActiveIndex () {
|
|
|
- this.btnGroupsss.forEach((pEle, pIndex) => {
|
|
|
- pEle.btns.forEach((cEle, cIndex) => {
|
|
|
- if (cEle.code === this.wpId) {
|
|
|
- this.rowIndex = pIndex;
|
|
|
- this.selectIndex = cIndex;
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- select (res) {
|
|
|
- this.$router.replace({
|
|
|
- path: `/monitor/windsite/home/${res.code}`,
|
|
|
- });
|
|
|
- },
|
|
|
- // 根据风机状态码返回对应 class
|
|
|
- getColor (fjzt) {
|
|
|
- switch (fjzt) {
|
|
|
- case 0:
|
|
|
- return "green";
|
|
|
- case 1:
|
|
|
- return "purple";
|
|
|
- case 2:
|
|
|
- return "red";
|
|
|
- case 3:
|
|
|
- return "gray";
|
|
|
- case 4:
|
|
|
- return "orange";
|
|
|
- case 5:
|
|
|
- return "purple";
|
|
|
- case 6:
|
|
|
- return "write";
|
|
|
- }
|
|
|
- },
|
|
|
- // 请求服务
|
|
|
- requestData (showLoading) {
|
|
|
- this.requestWpInfo(showLoading);
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- // 获取场站监视数据
|
|
|
- requestWpInfo (showLoading) {
|
|
|
- let that = this;
|
|
|
- that.API.requestData({
|
|
|
- showLoading,
|
|
|
- method: "POST",
|
|
|
- subUrl: "monitor/findWpInfoBywpId",
|
|
|
- data: {
|
|
|
- wpId: that.wpId,
|
|
|
- },
|
|
|
- success (res) {
|
|
|
- if (res.data) {
|
|
|
- that.tqmap = res.data.tqmap;
|
|
|
- let fjmap = [];
|
|
|
- let keys = ["value1", "value2", "value3", "value4", "value5", "value6", "value7", "value9"];
|
|
|
- let Powertrend = {
|
|
|
- // 图表所用单位
|
|
|
- units: ["(万KWh)", "(风速)"],
|
|
|
- value: [
|
|
|
- {
|
|
|
- title: "应发功率",
|
|
|
- smooth: true, // 使用单位
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "实发功率",
|
|
|
- smooth: true, // 使用单位
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "理论功率",
|
|
|
- smooth: true, // 使用单位
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "预测功率",
|
|
|
- smooth: true, // 使用单位
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "保证功率",
|
|
|
- smooth: true, // 使用单位
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "平均风速",
|
|
|
- smooth: true, // 使用单位
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "小时预测功率",
|
|
|
- smooth: true, // 使用单位
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "最有功率律",
|
|
|
- smooth: true, // 使用单位
|
|
|
- value: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
-
|
|
|
- let dayPieChartKey = [
|
|
|
- {
|
|
|
- key: "gzssdl",
|
|
|
- name: "故障损失电量",
|
|
|
- },
|
|
|
- {
|
|
|
- key: "jxssdl",
|
|
|
- name: "检修损失电量",
|
|
|
- },
|
|
|
- {
|
|
|
- key: "qfssdl",
|
|
|
- name: "性能损失电量",
|
|
|
- },
|
|
|
- {
|
|
|
- key: "slssdl",
|
|
|
- name: "受累损失电量",
|
|
|
- },
|
|
|
- {
|
|
|
- key: "xdssdl",
|
|
|
- name: "限电损失电量",
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- // 饼图 1 数据
|
|
|
- let dayData = [];
|
|
|
-
|
|
|
- // 饼图 2 数据
|
|
|
- let monthData = [];
|
|
|
-
|
|
|
- // 饼图 2 数据
|
|
|
- let yearData = [];
|
|
|
-
|
|
|
- res.data.fjjzmap.fjmap[0].forEach((ele) => {
|
|
|
- fjmap.push({
|
|
|
- tag: ele.wtnum,
|
|
|
- wtId: ele.wtId,
|
|
|
- wpId: ele.wpId,
|
|
|
- color: that.getColor(ele.fjzt),
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- keys.forEach((key, keyIndex) => {
|
|
|
- res.data.glvos.forEach((ele) => {
|
|
|
- Powertrend.value[keyIndex].value.push({
|
|
|
- text: new Date(ele.time).formatDate("hh:mm"),
|
|
|
- value: ele[key],
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- dayPieChartKey.forEach((ele) => {
|
|
|
- dayData.push({
|
|
|
- value: res.data.wxssmap["r" + ele.key],
|
|
|
- unit: "万kwh",
|
|
|
- name: ele.name,
|
|
|
- });
|
|
|
-
|
|
|
- monthData.push({
|
|
|
- value: res.data.wxssmap["y" + ele.key] || 0,
|
|
|
- unit: "万kwh",
|
|
|
- name: ele.name,
|
|
|
- });
|
|
|
-
|
|
|
- yearData.push({
|
|
|
- value: res.data.wxssmap["n" + ele.key] || 0,
|
|
|
- unit: "万kwh",
|
|
|
- name: ele.name,
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- that.fjmap = fjmap;
|
|
|
- that.Powertrend = Powertrend;
|
|
|
- that.jczbmap = res.data.jczbmap;
|
|
|
- that.pieChartData = {
|
|
|
- dayData,
|
|
|
- monthData,
|
|
|
- yearData,
|
|
|
- };
|
|
|
- } else {
|
|
|
- that.fjmap = [];
|
|
|
- that.Powertrend = {};
|
|
|
- that.jczbmap = {};
|
|
|
- that.pieChartData = {
|
|
|
- dayData: [],
|
|
|
- monthData: [],
|
|
|
- yearData: [],
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取日度损失电量分析
|
|
|
- requestLoss (showLoading) {
|
|
|
- let that = this;
|
|
|
- that.API.requestData({
|
|
|
- showLoading,
|
|
|
- method: "POST",
|
|
|
- subUrl: "monitor/findLossWpBar",
|
|
|
- data: {
|
|
|
- wpId: that.wpId,
|
|
|
- },
|
|
|
- success (res) {
|
|
|
- let dayLost = [];
|
|
|
- res.data.forEach((ele) => {
|
|
|
- dayLost.push({
|
|
|
- text: ele.timestr,
|
|
|
- value: ele.value1,
|
|
|
- });
|
|
|
- });
|
|
|
- that.dayLost = dayLost;
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取完成电量
|
|
|
- requestPower (showLoading) {
|
|
|
- let that = this;
|
|
|
- that.API.requestData({
|
|
|
- showLoading,
|
|
|
- method: "POST",
|
|
|
- subUrl: "monitor/findPowerWpBar",
|
|
|
- data: {
|
|
|
- wpId: that.wpId,
|
|
|
- },
|
|
|
- success (res) {
|
|
|
- let data = [
|
|
|
- {
|
|
|
- title: "发电量",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "预测电量",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: [],
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- res.data.forEach((ele) => {
|
|
|
- data[0].value.push({
|
|
|
- text: ele.timestr,
|
|
|
- value: ele.value1 || 0,
|
|
|
- });
|
|
|
- data[1].value.push({
|
|
|
- text: ele.timestr,
|
|
|
- value: ele.value2 || 0,
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- that.CompleteElectricity.data = data;
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取月发电量对比
|
|
|
- requestMonthPower (showLoading) {
|
|
|
- let that = this;
|
|
|
- that.API.requestData({
|
|
|
- showLoading,
|
|
|
- method: "POST",
|
|
|
- subUrl: "monitor/findMonthPowerWpBar",
|
|
|
- data: {
|
|
|
- wpId: that.wpId,
|
|
|
- },
|
|
|
- success (res) {
|
|
|
- let data = [
|
|
|
- {
|
|
|
- title: "月发电量",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: [],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "月预测电量",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: [],
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- res.data.forEach((ele) => {
|
|
|
- data[0].value.push({
|
|
|
- text: ele.timestr,
|
|
|
- value: ele.value1,
|
|
|
- });
|
|
|
- data[1].value.push({
|
|
|
- text: ele.timestr,
|
|
|
- value: ele.value2,
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- that.MonthCompare.value = data;
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- created () {
|
|
|
- let that = this;
|
|
|
- that.wpId = that.$route.params.wpId;
|
|
|
- that.$nextTick(() => {
|
|
|
- that.getWp();
|
|
|
- that.requestData(false);
|
|
|
- that.requestLoss(false);
|
|
|
- that.requestPower(false);
|
|
|
- that.requestMonthPower(false);
|
|
|
- that.timmer = setInterval(() => {
|
|
|
- that.requestData(false);
|
|
|
- }, 60000);
|
|
|
- that.timmer2 = setInterval(() => {
|
|
|
- that.nowTime = new Date().formatDate("hh:mm:ss");
|
|
|
- }, 1000);
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- mounted () { },
|
|
|
-
|
|
|
- unmounted () {
|
|
|
- clearInterval(this.timmer);
|
|
|
- clearInterval(this.timmer2);
|
|
|
- this.timmer = null;
|
|
|
- this.timmer2 = null;
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route (res) {
|
|
|
- this.wpId = res.params.wpId;
|
|
|
- if (res.params.wpId) {
|
|
|
- this.requestData(false);
|
|
|
- this.renderBtnActiveIndex();
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ import HoverBarChart from "../../../../components/chart/bar/hover-bar-chart.vue";
|
|
|
+ import MultipleBarChart from "../../../../components/chart/bar/multiple-bar-chart.vue";
|
|
|
+ import MultipleBarLineChart from "../../../../components/chart/combination/multiple-bar-line-chart.vue";
|
|
|
+ import MultipleLineChart from "../../../../components/chart/line/double-line-chart.vue";
|
|
|
+ import NormalLineChart from "../../../../components/chart/line/normal-line-chart.vue";
|
|
|
+ import DualPieChart from "../../../../components/chart/pie/dual-pie-chart.vue";
|
|
|
+ import BtnGroupDouble from "../../../../components/coms/btn/btn-group-double.vue";
|
|
|
+ import Col from "../../../../components/coms/grid/col.vue";
|
|
|
+ import Row from "../../../../components/coms/grid/row.vue";
|
|
|
+ import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
|
|
|
+ import Panel from "../../../../components/coms/panel/panel.vue";
|
|
|
+ import Panel3 from "../../../../components/coms/panel/panel3.vue";
|
|
|
+ import LightMatrix from "./light-matrix.vue";
|
|
|
+ import Station from "./Station.vue";
|
|
|
+ import WindSiteWeather from "./wind-site-weather.vue";
|
|
|
+
|
|
|
+ import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ // 名称
|
|
|
+ name: "WindSiteHome",
|
|
|
+ // 使用组件
|
|
|
+ components: {
|
|
|
+ BtnGroup2,
|
|
|
+ WindSiteWeather,
|
|
|
+ Row,
|
|
|
+ Col,
|
|
|
+ Panel,
|
|
|
+ DualPieChart,
|
|
|
+ MultipleLineChart,
|
|
|
+ Panel3,
|
|
|
+ SvgIcon,
|
|
|
+ HoverBarChart,
|
|
|
+ MultipleBarChart,
|
|
|
+ NormalLineChart,
|
|
|
+ LightMatrix,
|
|
|
+ BtnGroupDouble,
|
|
|
+ Station,
|
|
|
+ MultipleBarLineChart
|
|
|
+ },
|
|
|
+ // 数据
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ timmer: null, // 计时器
|
|
|
+ timmer2: null,
|
|
|
+ nowTime: "", // 时间
|
|
|
+ fjmap: [], // 分机矩阵
|
|
|
+ tqmap: {}, // 天气数据
|
|
|
+ glvos: {}, // 72小时功率曲线图
|
|
|
+ wxssmap: {}, // 五项损失饼图数据
|
|
|
+ jczbmap: {}, // 顶部基础数据
|
|
|
+ dayLost: [], // 日度损失电量分析柱状图
|
|
|
+ donePower: [], // 完成电量柱状图
|
|
|
+ // 饼图数据
|
|
|
+ pieChartData: {
|
|
|
+ // 日度
|
|
|
+ dayData: [{
|
|
|
+ title: "",
|
|
|
+ value: [],
|
|
|
+ }, ],
|
|
|
+ // 月度
|
|
|
+ monthData: [{
|
|
|
+ title: "",
|
|
|
+ value: [],
|
|
|
+ }, ],
|
|
|
+ // 年度
|
|
|
+ yearData: [{
|
|
|
+ title: "",
|
|
|
+ value: [],
|
|
|
+ }, ],
|
|
|
+ },
|
|
|
+ // 完成电量
|
|
|
+ CompleteElectricity: {
|
|
|
+ data: [{
|
|
|
+ title: "发电量",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "预测电量",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ units: ["(万KWh)", ""],
|
|
|
+ },
|
|
|
+
|
|
|
+ // 4小时功率曲线图
|
|
|
+ Powertrend: {
|
|
|
+ value: [{
|
|
|
+ title: "",
|
|
|
+ value: [],
|
|
|
+ }, ],
|
|
|
+ },
|
|
|
+ // 月发电量对比
|
|
|
+ MonthCompare: {
|
|
|
+ data: [{
|
|
|
+ title: "月发电量",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "月预测电量",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ units: ["(万KWh)", ""],
|
|
|
+ },
|
|
|
+
|
|
|
+ selectIndex: 0,
|
|
|
+ rowIndex: 0,
|
|
|
+ btnGroupsss: [{
|
|
|
+ icon: "svg-wind-site",
|
|
|
+ btns: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "svg-photovoltaic",
|
|
|
+ btns: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 函数
|
|
|
+ methods: {
|
|
|
+ getWp() {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ subUrl: "powercompare/windfarmAllAjax",
|
|
|
+ success(res) {
|
|
|
+ let btnGroups = [{
|
|
|
+ icon: "svg-wind-site",
|
|
|
+ btns: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "svg-photovoltaic",
|
|
|
+ btns: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ res.data.forEach((ele, index) => {
|
|
|
+ if (ele.id.indexOf("FDC") !== -1) {
|
|
|
+ btnGroups[0].btns.push({
|
|
|
+ text: ele.name,
|
|
|
+ code: ele.id,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ btnGroups[1].btns.push({
|
|
|
+ text: ele.name,
|
|
|
+ code: ele.id,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ that.btnGroupsss = btnGroups;
|
|
|
+ that.renderBtnActiveIndex();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ renderBtnActiveIndex() {
|
|
|
+ this.btnGroupsss.forEach((pEle, pIndex) => {
|
|
|
+ pEle.btns.forEach((cEle, cIndex) => {
|
|
|
+ if (cEle.code === this.wpId) {
|
|
|
+ this.rowIndex = pIndex;
|
|
|
+ this.selectIndex = cIndex;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ select(res) {
|
|
|
+ this.$router.replace({
|
|
|
+ path: `/monitor/windsite/home/${res.code}`,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 根据风机状态码返回对应 class
|
|
|
+ getColor(fjzt) {
|
|
|
+ switch (fjzt) {
|
|
|
+ case 0:
|
|
|
+ return "green";
|
|
|
+ case 1:
|
|
|
+ return "purple";
|
|
|
+ case 2:
|
|
|
+ return "red";
|
|
|
+ case 3:
|
|
|
+ return "gray";
|
|
|
+ case 4:
|
|
|
+ return "orange";
|
|
|
+ case 5:
|
|
|
+ return "purple";
|
|
|
+ case 6:
|
|
|
+ return "write";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 请求服务
|
|
|
+ requestData(showLoading) {
|
|
|
+ this.requestWpInfo(showLoading);
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取场站监视数据
|
|
|
+ requestWpInfo(showLoading) {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ showLoading,
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "monitor/findWpInfoBywpId",
|
|
|
+ data: {
|
|
|
+ wpId: that.wpId,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ if (res.data) {
|
|
|
+ that.tqmap = res.data.tqmap;
|
|
|
+ let fjmap = [];
|
|
|
+ 215476
|
|
|
+ let keys = ["value2", "value1", "value5", "value4", "value7", "value6", "value9"];
|
|
|
+ let Powertrend = {
|
|
|
+ // 图表所用单位
|
|
|
+ units: ["(万KWh)", "(风速)"],
|
|
|
+ value: [{
|
|
|
+ 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: "最有功率律",
|
|
|
+ smooth: true, // 使用单位
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ let dayPieChartKey = [{
|
|
|
+ key: "gzssdl",
|
|
|
+ name: "故障损失电量",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "jxssdl",
|
|
|
+ name: "检修损失电量",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "qfssdl",
|
|
|
+ name: "性能损失电量",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "slssdl",
|
|
|
+ name: "受累损失电量",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "xdssdl",
|
|
|
+ name: "限电损失电量",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 饼图 1 数据
|
|
|
+ let dayData = [];
|
|
|
+
|
|
|
+ // 饼图 2 数据
|
|
|
+ let monthData = [];
|
|
|
+
|
|
|
+ // 饼图 2 数据
|
|
|
+ let yearData = [];
|
|
|
+
|
|
|
+ res.data.fjjzmap.fjmap[0].forEach((ele) => {
|
|
|
+ fjmap.push({
|
|
|
+ tag: ele.wtnum,
|
|
|
+ wtId: ele.wtId,
|
|
|
+ wpId: ele.wpId,
|
|
|
+ color: that.getColor(ele.fjzt),
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ keys.forEach((key, keyIndex) => {
|
|
|
+ res.data.glvos.forEach((ele) => {
|
|
|
+ Powertrend.value[keyIndex].value.push({
|
|
|
+ text: new Date(ele.time).formatDate("hh:mm"),
|
|
|
+ value: ele[key],
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ dayPieChartKey.forEach((ele) => {
|
|
|
+ dayData.push({
|
|
|
+ value: res.data.wxssmap["r" + ele.key],
|
|
|
+ unit: "万kwh",
|
|
|
+ name: ele.name,
|
|
|
+ });
|
|
|
+
|
|
|
+ monthData.push({
|
|
|
+ value: res.data.wxssmap["y" + ele.key] || 0,
|
|
|
+ unit: "万kwh",
|
|
|
+ name: ele.name,
|
|
|
+ });
|
|
|
+
|
|
|
+ yearData.push({
|
|
|
+ value: res.data.wxssmap["n" + ele.key] || 0,
|
|
|
+ unit: "万kwh",
|
|
|
+ name: ele.name,
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ that.fjmap = fjmap;
|
|
|
+ that.Powertrend = Powertrend;
|
|
|
+ that.jczbmap = res.data.jczbmap;
|
|
|
+ that.pieChartData = {
|
|
|
+ dayData,
|
|
|
+ monthData,
|
|
|
+ yearData,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ that.fjmap = [];
|
|
|
+ that.Powertrend = {};
|
|
|
+ that.jczbmap = {};
|
|
|
+ that.pieChartData = {
|
|
|
+ dayData: [],
|
|
|
+ monthData: [],
|
|
|
+ yearData: [],
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取日度损失电量分析
|
|
|
+ requestLoss(showLoading) {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ showLoading,
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "monitor/findLossWpBar",
|
|
|
+ data: {
|
|
|
+ wpId: that.wpId,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ let dayLost = [];
|
|
|
+ res.data.forEach((ele) => {
|
|
|
+ dayLost.push({
|
|
|
+ text: ele.timestr,
|
|
|
+ value: ele.value1,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ that.dayLost = dayLost;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取完成电量
|
|
|
+ requestPower(showLoading) {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ showLoading,
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "monitor/findPowerWpBar",
|
|
|
+ data: {
|
|
|
+ wpId: that.wpId,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ let data = [{
|
|
|
+ title: "发电量",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "预测电量",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ let lineData = {
|
|
|
+ name: "风速",
|
|
|
+ unit: "km",
|
|
|
+ data: [],
|
|
|
+ };
|
|
|
+
|
|
|
+ res.data.forEach((ele) => {
|
|
|
+ data[0].value.push({
|
|
|
+ text: ele.timestr,
|
|
|
+ value: ele.value1 || 0,
|
|
|
+ });
|
|
|
+ data[1].value.push({
|
|
|
+ text: ele.timestr,
|
|
|
+ value: ele.value2 || 0,
|
|
|
+ });
|
|
|
+ lineData.data.push(ele.value3 || 0);
|
|
|
+ });
|
|
|
+
|
|
|
+ that.CompleteElectricity.data = data;
|
|
|
+ that.CompleteElectricity.lineData = lineData;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取月发电量对比
|
|
|
+ requestMonthPower(showLoading) {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ showLoading,
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "monitor/findMonthPowerWpBar",
|
|
|
+ data: {
|
|
|
+ wpId: that.wpId,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+
|
|
|
+ let data = [{
|
|
|
+ title: "月发电量",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "月预测电量",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let lineData = {
|
|
|
+ name: "风速",
|
|
|
+ unit: "km",
|
|
|
+ data: [],
|
|
|
+ };
|
|
|
+
|
|
|
+ res.data.forEach((ele) => {
|
|
|
+ data[0].value.push({
|
|
|
+ text: ele.timestr,
|
|
|
+ value: ele.value1,
|
|
|
+ });
|
|
|
+ data[1].value.push({
|
|
|
+ text: ele.timestr,
|
|
|
+ value: ele.value2,
|
|
|
+ });
|
|
|
+ lineData.data.push(ele.value3 || 0);
|
|
|
+ });
|
|
|
+
|
|
|
+ that.MonthCompare.data = data;
|
|
|
+ that.MonthCompare.lineData = lineData;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ let that = this;
|
|
|
+ that.wpId = that.$route.params.wpId;
|
|
|
+ that.$nextTick(() => {
|
|
|
+ that.getWp();
|
|
|
+ that.requestData(false);
|
|
|
+ that.requestLoss(false);
|
|
|
+ that.requestPower(false);
|
|
|
+ that.requestMonthPower(false);
|
|
|
+ that.timmer = setInterval(() => {
|
|
|
+ that.requestData(false);
|
|
|
+ }, 60000);
|
|
|
+ that.timmer2 = setInterval(() => {
|
|
|
+ that.nowTime = new Date().formatDate("hh:mm:ss");
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {},
|
|
|
+
|
|
|
+ unmounted() {
|
|
|
+ clearInterval(this.timmer);
|
|
|
+ clearInterval(this.timmer2);
|
|
|
+ this.timmer = null;
|
|
|
+ this.timmer2 = null;
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route(res) {
|
|
|
+ this.wpId = res.params.wpId;
|
|
|
+ if (res.params.wpId) {
|
|
|
+ this.requestData(false);
|
|
|
+ this.renderBtnActiveIndex();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
-.wind-site-home {
|
|
|
- .first-info {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-
|
|
|
- .wind-site-info {
|
|
|
- margin-left: 0.7407vh;
|
|
|
- flex: 1 0 auto;
|
|
|
- padding: 8px;
|
|
|
-
|
|
|
- & > .row {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .info-item {
|
|
|
- text-align: center;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .value {
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
- .text {
|
|
|
- font-size: 12px;
|
|
|
- color: @gray;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .wind-running-info {
|
|
|
- margin-left: 8px;
|
|
|
- padding: 8px;
|
|
|
- flex: 1 1 auto;
|
|
|
-
|
|
|
- & > .row {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .fengji {
|
|
|
- display: flex;
|
|
|
- align-content: center;
|
|
|
- flex: 0 0 auto;
|
|
|
-
|
|
|
- .fengji-icon {
|
|
|
- padding: 12px;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: inset 1.5px -1px 1px 0px @green;
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- width: 60px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .text {
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
- margin-bottom: 1.111vh;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- text-align: center;
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .situation {
|
|
|
- flex: 1 1 auto;
|
|
|
- margin-left: 1.481vh;
|
|
|
-
|
|
|
- .row + .row {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .status {
|
|
|
- flex: 1;
|
|
|
- // width: 75px;
|
|
|
- display: flex;
|
|
|
- // align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 4px 0;
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 12px;
|
|
|
- flex: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
- padding-right: 0.741vh;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .icon-status {
|
|
|
- .text {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .light-matrix-panel {
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .panel-body {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.btn-group-tabs {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
-}
|
|
|
+ .wind-site-home {
|
|
|
+ .first-info {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wind-site-info {
|
|
|
+ margin-left: 0.7407vh;
|
|
|
+ flex: 1 0 auto;
|
|
|
+ padding: 8px;
|
|
|
+
|
|
|
+ &>.row {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ text-align: center;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: @gray;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wind-running-info {
|
|
|
+ margin-left: 8px;
|
|
|
+ padding: 8px;
|
|
|
+ flex: 1 1 auto;
|
|
|
+
|
|
|
+ &>.row {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fengji {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ flex: 0 0 auto;
|
|
|
+
|
|
|
+ .fengji-icon {
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: inset 1.5px -1px 1px 0px @green;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ width: 60px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 1.111vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .situation {
|
|
|
+ flex: 1 1 auto;
|
|
|
+ margin-left: 1.481vh;
|
|
|
+
|
|
|
+ .row+.row {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ flex: 1;
|
|
|
+ // width: 75px;
|
|
|
+ display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 4px 0;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 12px;
|
|
|
+ flex: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ padding-right: 0.741vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-status {
|
|
|
+ .text {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .light-matrix-panel {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .panel-body {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-group-tabs {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
</style>
|
