|
|
@@ -1,385 +1,441 @@
|
|
|
<template>
|
|
|
- <div style="width: 100%;height:100%;padding: 10px;">
|
|
|
- <div class="operationHome" v-if="$route.path === '/economicsOperation'">
|
|
|
- <!-- <tab @select="selectionItemClick" /> -->
|
|
|
- <div class="homeMain">
|
|
|
- <div class="homeLeaf">
|
|
|
- <Row type="flex" class="plan" style="height:21%">
|
|
|
- <Col :span="24">
|
|
|
- <com-panel title="发电量" sub-title="单位:万kWh" bodyPadd="50px"
|
|
|
- style="position: relative;height: 100%">
|
|
|
- <div v-for="it in ForecastPower" :key="it" class="powerName">
|
|
|
- <span :style="{top: it.top}">{{it.name}}</span>
|
|
|
- <span :style="{top: it.top1}">{{it.value}}</span>
|
|
|
- <span :style="{top: it.top2}">{{it.bfb}}%</span>
|
|
|
- <span :style="{top: it.top3}">理论发电量 {{it.total}}</span>
|
|
|
- </div>
|
|
|
- <list-bar-chart-2 :list="ForecastPower" height="15vh" />
|
|
|
- </com-panel>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- <Row type="flex" class="plan" style="height:79%">
|
|
|
- <Col :span="24">
|
|
|
- <com-panel title="主要经济指标同期对比" sub-title="单位:万kWh" style="position: relative;height: 100%">
|
|
|
- <operationTable :data="zbtqdb" height="100%"></operationTable>
|
|
|
- </com-panel>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- <div class="homeCenter">
|
|
|
- <Row type="flex" style="height:23%;">
|
|
|
- <Col :span="24" style="background: #142446 !important;">
|
|
|
- <com-panel title="发电量完成率" sub-title="单位:万kWh" style="position: relative;height: 100%">
|
|
|
- <power-plan :data="planData" :title="planBtnName" />
|
|
|
- </com-panel>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- <Row type="flex" style="height:25%">
|
|
|
- <Col :span="24">
|
|
|
- <com-panel title="限电" style="position: relative;height: 100%">
|
|
|
- <multiple-y-line-chart-normal height="100%" :list="Powertrend" :yAxises="PowertrendYAxises"
|
|
|
- :showLegend="true" :hoverType="'axis'" />
|
|
|
- </com-panel>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- <Row type="flex" style="height:25%">
|
|
|
- <Col :span="24">
|
|
|
- <com-panel title="损失电量" style="position: relative;height: 100%">
|
|
|
- <multiple-y-line-chart-normal height="100%" :list="Powerloss" :yAxises="PowerlossYAxises"
|
|
|
- :showLegend="true" :hoverType="'axis'" />
|
|
|
- </com-panel>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- <Row type="flex" style="height:26%">
|
|
|
- <Col :span="24">
|
|
|
- <com-panel title="发电量" style="position: relative;height: 100%">
|
|
|
- <!-- <marker-line-chart :height="'100%'" :list="Powersend" myUnit='MW' :showLegend="true" /> -->
|
|
|
- <multiple-bar-chart :list="Powersend" :units="['电量(万kwh)']" height="100%"
|
|
|
- :showLegend="true" />
|
|
|
- </com-panel>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- <div class="homeRight">
|
|
|
- <div class="tabs">
|
|
|
- <div class="tab-item" v-for="(item, index) of tabData" :key="item"
|
|
|
- :class="{ active: activeIndex == index }"
|
|
|
- @click="selectTab(index, item)">
|
|
|
- {{ item.text }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <Row type="flex" class="rightplan" v-for="it in rightTableData" :key="it.name" style="height:50%">
|
|
|
- <Col :span="24">
|
|
|
- <com-panel :title="it.name+tabData[activeIndex].text+'排名'" style="position: relative;height: 100%">
|
|
|
- <operationTable :data="it.data" height="100%"></operationTable>
|
|
|
- </com-panel>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
+ <div style="width: 100%; height: 100%; padding: 10px">
|
|
|
+ <div class="operationHome" v-if="$route.path === '/economicsOperation'">
|
|
|
+ <!-- <tab @select="selectionItemClick" /> -->
|
|
|
+ <div class="homeMain">
|
|
|
+ <div class="homeLeaf">
|
|
|
+ <Row type="flex" class="plan" style="height: 21%">
|
|
|
+ <Col :span="24">
|
|
|
+ <com-panel
|
|
|
+ title="发电量"
|
|
|
+ sub-title="单位:万kWh"
|
|
|
+ bodyPadd="50px"
|
|
|
+ style="position: relative; height: 100%"
|
|
|
+ >
|
|
|
+ <div v-for="it in ForecastPower" :key="it" class="powerName">
|
|
|
+ <span :style="{ top: it.top }">{{ it.name }}</span>
|
|
|
+ <span :style="{ top: it.top1 }">{{ it.value }}</span>
|
|
|
+ <span :style="{ top: it.top2 }">{{ it.bfb }}%</span>
|
|
|
+ <span :style="{ top: it.top3 }"
|
|
|
+ >理论发电量 {{ it.total }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
+ <list-bar-chart-2 :list="ForecastPower" height="15vh" />
|
|
|
+ </com-panel>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row type="flex" class="plan" style="height: 79%">
|
|
|
+ <Col :span="24">
|
|
|
+ <com-panel
|
|
|
+ title="主要经济指标同期对比"
|
|
|
+ sub-title="单位:万kWh"
|
|
|
+ style="position: relative; height: 100%"
|
|
|
+ >
|
|
|
+ <operationTable :data="zbtqdb" height="100%"></operationTable>
|
|
|
+ </com-panel>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div class="homeCenter">
|
|
|
+ <Row type="flex" style="height: 23%">
|
|
|
+ <Col :span="24" style="background: #142446 !important">
|
|
|
+ <com-panel
|
|
|
+ title="发电量完成率"
|
|
|
+ sub-title="单位:万kWh"
|
|
|
+ style="position: relative; height: 100%"
|
|
|
+ >
|
|
|
+ <power-plan :data="planData" :title="planBtnName" />
|
|
|
+ </com-panel>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row type="flex" style="height: 25%">
|
|
|
+ <Col :span="24">
|
|
|
+ <com-panel title="限电" style="position: relative; height: 100%">
|
|
|
+ <multiple-y-line-chart-normal
|
|
|
+ height="100%"
|
|
|
+ :list="Powertrend"
|
|
|
+ :yAxises="PowertrendYAxises"
|
|
|
+ :showLegend="true"
|
|
|
+ :hoverType="'axis'"
|
|
|
+ />
|
|
|
+ </com-panel>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row type="flex" style="height: 25%">
|
|
|
+ <Col :span="24">
|
|
|
+ <com-panel
|
|
|
+ title="损失电量"
|
|
|
+ style="position: relative; height: 100%"
|
|
|
+ >
|
|
|
+ <multiple-y-line-chart-normal
|
|
|
+ height="100%"
|
|
|
+ :list="Powerloss"
|
|
|
+ :yAxises="PowerlossYAxises"
|
|
|
+ :showLegend="true"
|
|
|
+ :hoverType="'axis'"
|
|
|
+ />
|
|
|
+ </com-panel>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row type="flex" style="height: 26%">
|
|
|
+ <Col :span="24">
|
|
|
+ <com-panel
|
|
|
+ title="发电量"
|
|
|
+ style="position: relative; height: 100%"
|
|
|
+ >
|
|
|
+ <!-- <marker-line-chart :height="'100%'" :list="Powersend" myUnit='MW' :showLegend="true" /> -->
|
|
|
+ <multiple-bar-chart
|
|
|
+ :list="Powersend"
|
|
|
+ :units="['电量(万kwh)']"
|
|
|
+ height="100%"
|
|
|
+ :showLegend="true"
|
|
|
+ />
|
|
|
+ </com-panel>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div class="homeRight">
|
|
|
+ <div class="tabs">
|
|
|
+ <div
|
|
|
+ class="tab-item"
|
|
|
+ v-for="(item, index) of tabData"
|
|
|
+ :key="item"
|
|
|
+ :class="{ active: activeIndex == index }"
|
|
|
+ @click="selectTab(index, item)"
|
|
|
+ >
|
|
|
+ {{ item.text }}
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <Row
|
|
|
+ type="flex"
|
|
|
+ class="rightplan"
|
|
|
+ v-for="it in rightTableData"
|
|
|
+ :key="it.name"
|
|
|
+ style="height: 50%"
|
|
|
+ >
|
|
|
+ <Col :span="24">
|
|
|
+ <com-panel
|
|
|
+ :title="it.name + tabData[activeIndex].text + '排名'"
|
|
|
+ style="position: relative; height: 100%"
|
|
|
+ >
|
|
|
+ <operationTable :data="it.data" height="100%"></operationTable>
|
|
|
+ </com-panel>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
</div>
|
|
|
- <router-view v-else />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <router-view v-else />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- generatingcapacity,
|
|
|
- homeright,
|
|
|
- homemiddle
|
|
|
- } from "@/api/economicIndex";
|
|
|
- import Row from "@com/coms/grid/row.vue";
|
|
|
- import Col from "@com/coms/grid/col.vue";
|
|
|
- import ComPanel from "@com/coms/panel/panel";
|
|
|
- import ListBarChart2 from "@com/chart/bar/list-bar-chart2.vue";
|
|
|
- import forecastBarComponent from "./component/forecastBarComponent.vue";
|
|
|
- import Tab from "@com/coms/tabs/tab.vue";
|
|
|
- import operationTable from "./component/operationTable.vue";
|
|
|
- import PowerPlan from "./component/power-plan.vue";
|
|
|
- import dataJson from "./component/dataJJJson.json"
|
|
|
- import MultipleYLineChartNormal from "./component/multiple-y-line-chart-normal.vue";
|
|
|
- import MultipleBarChart from "./component/multiple-bar-chart.vue";
|
|
|
- export default {
|
|
|
- name: "economicsOperation",
|
|
|
- components: {
|
|
|
- Row,
|
|
|
- Col,
|
|
|
- ComPanel,
|
|
|
- ListBarChart2,
|
|
|
- Tab,
|
|
|
- forecastBarComponent,
|
|
|
- operationTable,
|
|
|
- PowerPlan,
|
|
|
- MultipleYLineChartNormal,
|
|
|
- MultipleBarChart
|
|
|
+import { generatingcapacity, homeright, homemiddle } from "@/api/economicIndex";
|
|
|
+import Row from "@com/coms/grid/row.vue";
|
|
|
+import Col from "@com/coms/grid/col.vue";
|
|
|
+import ComPanel from "@com/coms/panel/panel";
|
|
|
+import ListBarChart2 from "@com/chart/bar/list-bar-chart2.vue";
|
|
|
+import forecastBarComponent from "./component/forecastBarComponent.vue";
|
|
|
+import Tab from "@com/coms/tabs/tab.vue";
|
|
|
+import operationTable from "./component/operationTable.vue";
|
|
|
+import PowerPlan from "./component/power-plan.vue";
|
|
|
+import dataJson from "./component/dataJJJson.json";
|
|
|
+import MultipleYLineChartNormal from "./component/multiple-y-line-chart-normal.vue";
|
|
|
+import MultipleBarChart from "./component/multiple-bar-chart.vue";
|
|
|
+export default {
|
|
|
+ name: "economicsOperation",
|
|
|
+ components: {
|
|
|
+ Row,
|
|
|
+ Col,
|
|
|
+ ComPanel,
|
|
|
+ ListBarChart2,
|
|
|
+ Tab,
|
|
|
+ forecastBarComponent,
|
|
|
+ operationTable,
|
|
|
+ PowerPlan,
|
|
|
+ MultipleYLineChartNormal,
|
|
|
+ MultipleBarChart,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeIndex: 0,
|
|
|
+ tabData: [
|
|
|
+ {
|
|
|
+ id: "year",
|
|
|
+ text: "年",
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- activeIndex: 0,
|
|
|
- tabData: [{
|
|
|
- id: "year",
|
|
|
- text: "年",
|
|
|
- }, {
|
|
|
- id: "month",
|
|
|
- text: "月",
|
|
|
- }, {
|
|
|
- id: "week",
|
|
|
- text: "周",
|
|
|
- }, ],
|
|
|
- rightTableData: [{
|
|
|
- name: '风能利用率',
|
|
|
- data: []
|
|
|
- },
|
|
|
- {
|
|
|
- name: '设备可利用率',
|
|
|
- data: []
|
|
|
- }
|
|
|
- ],
|
|
|
- ForecastPower: [],
|
|
|
- fnlyl: dataJson.data.fnlyl,
|
|
|
- zbtqdb: {},
|
|
|
- sbklyl: {},
|
|
|
- lgxzkh: {},
|
|
|
- planData: {},
|
|
|
- planBtnName: "全部",
|
|
|
- Powertrend: [],
|
|
|
- PowertrendYAxises: [{
|
|
|
- name: "限电量",
|
|
|
- min: 0,
|
|
|
- max: null,
|
|
|
- unit: "(万kWh)",
|
|
|
- position: "left",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "限电率",
|
|
|
- min: 0,
|
|
|
- max: 10,
|
|
|
- unit: "(%)",
|
|
|
- position: "right",
|
|
|
- },
|
|
|
- ],
|
|
|
- Powerloss: [],
|
|
|
- PowerlossYAxises: [{
|
|
|
- name: "损失电量",
|
|
|
- min: 0,
|
|
|
- max: null,
|
|
|
- unit: "(万kWh)",
|
|
|
- position: "left",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "限电率",
|
|
|
- min: 0,
|
|
|
- max: 10,
|
|
|
- unit: "(%)",
|
|
|
- position: "right",
|
|
|
- },
|
|
|
- ],
|
|
|
- Powersend: [],
|
|
|
- timmer: null, // 定时器开关
|
|
|
- }
|
|
|
+ {
|
|
|
+ id: "month",
|
|
|
+ text: "月",
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getGeneratingcapacity()
|
|
|
- this.timmer = setInterval(() => {
|
|
|
- this.getGeneratingcapacity();
|
|
|
- }, 10000);
|
|
|
+ {
|
|
|
+ id: "week",
|
|
|
+ text: "周",
|
|
|
},
|
|
|
- unmounted() {
|
|
|
- clearInterval(this.timmer);
|
|
|
- this.timmer = null;
|
|
|
+ ],
|
|
|
+ rightTableData: [
|
|
|
+ {
|
|
|
+ name: "风能利用率",
|
|
|
+ data: [],
|
|
|
},
|
|
|
- methods: {
|
|
|
- selectTab(index, item) {
|
|
|
- console.log("ind===>>>", index)
|
|
|
- this.activeIndex = index;
|
|
|
- this.changeRightData()
|
|
|
- },
|
|
|
- changeRightData() {
|
|
|
- let that = this
|
|
|
- homeright({
|
|
|
- periodType: this.activeIndex === 0 ? "year" : this.activeIndex === 1 ? "month" : "week"
|
|
|
- }).then(res =>{
|
|
|
- if (res.data) {
|
|
|
- that.rightTableData = [{
|
|
|
- name: '风能利用率',
|
|
|
- data: res.data.fnlyl
|
|
|
- },
|
|
|
- {
|
|
|
- name: '设备可利用率',
|
|
|
- data: res.data.sbklyl
|
|
|
- },
|
|
|
- // {
|
|
|
- // name: '两个细则考核',
|
|
|
- // data: res.data.lgxzkh
|
|
|
- // },
|
|
|
- ]
|
|
|
- }
|
|
|
- })
|
|
|
- // .catch(e => {
|
|
|
- // that.rightTableData = [{
|
|
|
- // name: '风能利用率年排名',
|
|
|
- // data: dataJson.data.fnlyl
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '设备可利用率年排名',
|
|
|
- // data: dataJson.data.sbklyl
|
|
|
- // },
|
|
|
- // ]
|
|
|
- // })
|
|
|
- },
|
|
|
- //获取发电量和主要经济指标同期对比
|
|
|
- getGeneratingcapacity() {
|
|
|
- let that = this
|
|
|
- generatingcapacity().then(res => {
|
|
|
- if (res.data) {
|
|
|
- if (res.data.fdl?.length>0) {
|
|
|
- res.data.fdl.forEach(it => {
|
|
|
- dataJson.data.fdl.forEach(iv =>{
|
|
|
- if (it.name === iv.name) {
|
|
|
- iv.bfb = it.bfb === 0 ? 1 : it.bfb
|
|
|
- iv.total = it.total === 0 ? 1 : it.total
|
|
|
- iv.value = it.value === 0 ? 0 : it.value
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- that.ForecastPower = dataJson.data.fdl
|
|
|
- }
|
|
|
- that.zbtqdb = res.data.zbtqdb
|
|
|
- }
|
|
|
- })
|
|
|
- // .catch(e => {
|
|
|
- // that.zbtqdb = dataJson.data.zbtqdb
|
|
|
- // })
|
|
|
- homemiddle().then(res =>{
|
|
|
- if (res.data) {
|
|
|
- that.planData = res.data.planData
|
|
|
- that.Powertrend = res.data.Powertrend
|
|
|
- that.Powersend = res.data.Powersend
|
|
|
- that.Powerloss = res.data.Powerloss
|
|
|
- }
|
|
|
- })
|
|
|
- // .catch(e => {
|
|
|
- // that.planData = dataJson.data.planData
|
|
|
- // that.Powertrend = dataJson.data.Powertrend
|
|
|
- // that.Powersend = dataJson.data.Powersend
|
|
|
- // that.Powerloss = dataJson.data.Powerloss
|
|
|
- // })
|
|
|
- this.changeRightData()
|
|
|
- },
|
|
|
+ {
|
|
|
+ name: "设备可利用率",
|
|
|
+ data: [],
|
|
|
},
|
|
|
- watch: {
|
|
|
- $route: {
|
|
|
- handler(val) {
|
|
|
- // debugger
|
|
|
- if (val.path !== "/economicsOperation") {
|
|
|
- clearInterval(this.timmer);
|
|
|
- this.timmer = null;
|
|
|
- } else {
|
|
|
- this.timmer = setInterval(() => {
|
|
|
- this.getGeneratingcapacity();
|
|
|
- }, 10000);
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
+ ],
|
|
|
+ ForecastPower: [],
|
|
|
+ fnlyl: dataJson.data.fnlyl,
|
|
|
+ zbtqdb: {},
|
|
|
+ sbklyl: {},
|
|
|
+ lgxzkh: {},
|
|
|
+ planData: {},
|
|
|
+ planBtnName: "全部",
|
|
|
+ Powertrend: [],
|
|
|
+ PowertrendYAxises: [
|
|
|
+ {
|
|
|
+ name: "限电量",
|
|
|
+ min: 0,
|
|
|
+ max: null,
|
|
|
+ unit: "(万kWh)",
|
|
|
+ position: "left",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "限电率",
|
|
|
+ min: 0,
|
|
|
+ max: 10,
|
|
|
+ unit: "(%)",
|
|
|
+ position: "right",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ Powerloss: [],
|
|
|
+ PowerlossYAxises: [
|
|
|
+ {
|
|
|
+ name: "损失电量",
|
|
|
+ min: 0,
|
|
|
+ max: null,
|
|
|
+ unit: "(万kWh)",
|
|
|
+ position: "left",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "限电率",
|
|
|
+ min: 0,
|
|
|
+ max: 10,
|
|
|
+ unit: "(%)",
|
|
|
+ position: "right",
|
|
|
},
|
|
|
+ ],
|
|
|
+ Powersend: [],
|
|
|
+ timmer: null, // 定时器开关
|
|
|
};
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getGeneratingcapacity();
|
|
|
+ this.timmer = setInterval(() => {
|
|
|
+ this.getGeneratingcapacity();
|
|
|
+ }, 10000);
|
|
|
+ },
|
|
|
+ unmounted() {
|
|
|
+ clearInterval(this.timmer);
|
|
|
+ this.timmer = null;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectTab(index, item) {
|
|
|
+ console.log("ind===>>>", index);
|
|
|
+ this.activeIndex = index;
|
|
|
+ this.changeRightData();
|
|
|
+ },
|
|
|
+ changeRightData() {
|
|
|
+ let that = this;
|
|
|
+ homeright({
|
|
|
+ periodType:
|
|
|
+ this.activeIndex === 0
|
|
|
+ ? "year"
|
|
|
+ : this.activeIndex === 1
|
|
|
+ ? "month"
|
|
|
+ : "week",
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data) {
|
|
|
+ that.rightTableData = [
|
|
|
+ {
|
|
|
+ name: "风能利用率",
|
|
|
+ data: res.data.fnlyl,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "设备可利用率",
|
|
|
+ data: res.data.sbklyl,
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // name: '两个细则考核',
|
|
|
+ // data: res.data.lgxzkh
|
|
|
+ // },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // .catch(e => {
|
|
|
+ // that.rightTableData = [{
|
|
|
+ // name: '风能利用率年排名',
|
|
|
+ // data: dataJson.data.fnlyl
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '设备可利用率年排名',
|
|
|
+ // data: dataJson.data.sbklyl
|
|
|
+ // },
|
|
|
+ // ]
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ //获取发电量和主要经济指标同期对比
|
|
|
+ getGeneratingcapacity() {
|
|
|
+ let that = this;
|
|
|
+ generatingcapacity().then((res) => {
|
|
|
+ if (res.data) {
|
|
|
+ if (res.data.fdl?.length > 0) {
|
|
|
+ res.data.fdl.forEach((it) => {
|
|
|
+ dataJson.data.fdl.forEach((iv) => {
|
|
|
+ if (it.name === iv.name) {
|
|
|
+ iv.bfb = it.bfb === 0 ? 1 : it.bfb;
|
|
|
+ iv.total = it.total === 0 ? 1 : it.total;
|
|
|
+ iv.value = it.value === 0 ? 0 : it.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ that.ForecastPower = dataJson.data.fdl;
|
|
|
+ }
|
|
|
+ that.zbtqdb = res.data.zbtqdb;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // .catch(e => {
|
|
|
+ // that.zbtqdb = dataJson.data.zbtqdb
|
|
|
+ // })
|
|
|
+ homemiddle().then((res) => {
|
|
|
+ if (res.data) {
|
|
|
+ that.planData = res.data.planData;
|
|
|
+ that.Powertrend = res.data.Powertrend;
|
|
|
+ that.Powersend = res.data.Powersend;
|
|
|
+ that.Powerloss = res.data.Powerloss;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // .catch(e => {
|
|
|
+ // that.planData = dataJson.data.planData
|
|
|
+ // that.Powertrend = dataJson.data.Powertrend
|
|
|
+ // that.Powersend = dataJson.data.Powersend
|
|
|
+ // that.Powerloss = dataJson.data.Powerloss
|
|
|
+ // })
|
|
|
+ this.changeRightData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler(val) {
|
|
|
+ // debugger
|
|
|
+ if (val.path !== "/economicsOperation") {
|
|
|
+ clearInterval(this.timmer);
|
|
|
+ this.timmer = null;
|
|
|
+ } else {
|
|
|
+ this.timmer = setInterval(() => {
|
|
|
+ this.getGeneratingcapacity();
|
|
|
+ }, 10000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .operationHome {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+.operationHome {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
|
|
|
-
|
|
|
+ .homeMain {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 25px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .homeMain {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 25px);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .homeLeaf {
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .homeLeaf {
|
|
|
- width: 25%;
|
|
|
- height: 100%;
|
|
|
+ .powerName {
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
|
|
|
- .powerName {
|
|
|
- span {
|
|
|
- position: absolute;
|
|
|
+ &:nth-child(1) {
|
|
|
+ font-size: 12px;
|
|
|
+ left: 30px;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- font-size: 12px;
|
|
|
- left: 30px;
|
|
|
- }
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-size: 16px;
|
|
|
+ left: 85px;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- font-size: 16px;
|
|
|
- left: 85px;
|
|
|
- }
|
|
|
+ &:nth-child(3) {
|
|
|
+ font-size: 12px;
|
|
|
+ right: 10px;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- font-size: 12px;
|
|
|
- right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(4) {
|
|
|
- font-size: 12px;
|
|
|
- right: 50px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ &:nth-child(4) {
|
|
|
+ font-size: 12px;
|
|
|
+ right: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .homeCenter {
|
|
|
- width: 48%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ .homeCenter {
|
|
|
+ width: 48%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .homeRight {
|
|
|
- width: 25%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
+ .homeRight {
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .rightplan {
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
+ .rightplan {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
|
|
|
- .tabs {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- z-index: 11111;
|
|
|
- display: flex;
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 1.111vh;
|
|
|
- font-size: 12px;
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
+ .tabs {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ z-index: 11111;
|
|
|
+ display: flex;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 1.111vh;
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
|
|
|
- .tab-item {
|
|
|
- padding: 0.37vh 1.852vh;
|
|
|
- cursor: pointer;
|
|
|
+ .tab-item {
|
|
|
+ padding: 0.37vh 1.852vh;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- &.active {
|
|
|
- color: #fff;
|
|
|
- position: relative;
|
|
|
- background-image: linear-gradient(to top, fade(#2169c3, 50%), fade(#2169c3, 0));
|
|
|
+ &.active {
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ to top,
|
|
|
+ fade(#2169c3, 50%),
|
|
|
+ fade(#2169c3, 0)
|
|
|
+ );
|
|
|
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 0.463vh;
|
|
|
- border: 0.093vh solid #2169c3;
|
|
|
- border-top: 0;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 0.463vh;
|
|
|
+ border: 0.093vh solid #2169c3;
|
|
|
+ border-top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
