|
@@ -1,18 +1,13 @@
|
|
|
<template>
|
|
|
- <div class="btn-group-tabs">
|
|
|
- <BtnGroup2
|
|
|
- :btnGroups="btnGroupsss"
|
|
|
- :rowIndex="rowIndex"
|
|
|
- :index="selectIndex"
|
|
|
- @select="select"
|
|
|
- ></BtnGroup2>
|
|
|
- </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"/>
|
|
|
+ <wind-site-weather :time="nowTime" :data="tqmap" />
|
|
|
<panel-3 class="wind-site-info">
|
|
|
<row align="middle">
|
|
|
<div class="info-item">
|
|
@@ -189,7 +184,8 @@
|
|
|
</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" />
|
|
|
+ <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;">
|
|
@@ -200,36 +196,37 @@
|
|
|
</div>
|
|
|
<row>
|
|
|
<Col :span="8">
|
|
|
- <panel title="日度损失电量分析">
|
|
|
- <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
|
|
|
- </panel>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <panel title="月发电量对比">
|
|
|
+ <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
|
|
|
+ </panel>
|
|
|
</Col>
|
|
|
</row>
|
|
|
</div>
|
|
@@ -259,7 +256,7 @@ export default {
|
|
|
// 使用组件
|
|
|
components: { BtnGroup2, WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble, Station },
|
|
|
// 数据
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
timmer: null, // 计时器
|
|
|
timmer2: null,
|
|
@@ -338,78 +335,78 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
- selectIndex:0,
|
|
|
- rowIndex:0,
|
|
|
+ selectIndex: 0,
|
|
|
+ rowIndex: 0,
|
|
|
btnGroupsss: [
|
|
|
- {
|
|
|
- icon: "svg-wind-site",
|
|
|
- btns: [],
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "svg-photovoltaic",
|
|
|
- btns: [],
|
|
|
- },
|
|
|
- ],
|
|
|
+ {
|
|
|
+ icon: "svg-wind-site",
|
|
|
+ btns: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "svg-photovoltaic",
|
|
|
+ btns: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
// 函数
|
|
|
methods: {
|
|
|
|
|
|
|
|
|
- getWp(){
|
|
|
+ getWp () {
|
|
|
let that = this;
|
|
|
that.API.requestData({
|
|
|
method: "GET",
|
|
|
subUrl: "powercompare/windfarmAllAjax",
|
|
|
- success(res) {
|
|
|
+ success (res) {
|
|
|
console.warn(res);
|
|
|
let btnGroups = [{
|
|
|
icon: "svg-wind-site",
|
|
|
btns: []
|
|
|
- },{
|
|
|
+ }, {
|
|
|
icon: "svg-photovoltaic",
|
|
|
btns: []
|
|
|
}];
|
|
|
|
|
|
- res.data.forEach((ele,index)=>{
|
|
|
- if(ele.id.indexOf("FDC") !== -1){
|
|
|
+ res.data.forEach((ele, index) => {
|
|
|
+ if (ele.id.indexOf("FDC") !== -1) {
|
|
|
btnGroups[0].btns.push({
|
|
|
- text:ele.name,
|
|
|
- code:ele.id
|
|
|
+ text: ele.name,
|
|
|
+ code: ele.id
|
|
|
});
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
btnGroups[1].btns.push({
|
|
|
- text:ele.name,
|
|
|
- code:ele.id
|
|
|
+ text: ele.name,
|
|
|
+ code: ele.id
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- that.btnGroupsss=btnGroups;
|
|
|
+ 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;
|
|
|
+ renderBtnActiveIndex () {
|
|
|
+ this.btnGroupsss.forEach((pEle, pIndex) => {
|
|
|
+ pEle.btns.forEach((cEle, cIndex) => {
|
|
|
+ if (cEle.code === this.wpId) {
|
|
|
+ this.rowIndex = pIndex;
|
|
|
+ this.selectIndex = cIndex;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- select(res) {
|
|
|
+ select (res) {
|
|
|
this.$router.replace({
|
|
|
path: `/monitor/windsite/home/${res.code}`
|
|
|
});
|
|
|
},
|
|
|
// 根据风机状态码返回对应 class
|
|
|
- getColor(fjzt) {
|
|
|
+ getColor (fjzt) {
|
|
|
switch (fjzt) {
|
|
|
case 0:
|
|
|
return "green";
|
|
@@ -428,7 +425,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 请求服务
|
|
|
- requestData(showLoading) {
|
|
|
+ requestData (showLoading) {
|
|
|
this.requestWpInfo(showLoading);
|
|
|
this.requestLoss(showLoading);
|
|
|
this.requestPower(showLoading);
|
|
@@ -436,7 +433,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 获取场站监视数据
|
|
|
- requestWpInfo(showLoading) {
|
|
|
+ requestWpInfo (showLoading) {
|
|
|
let that = this;
|
|
|
that.API.requestData({
|
|
|
showLoading,
|
|
@@ -445,7 +442,7 @@ export default {
|
|
|
data: {
|
|
|
wpId: that.wpId,
|
|
|
},
|
|
|
- success(res) {
|
|
|
+ success (res) {
|
|
|
if (res.data) {
|
|
|
that.tqmap = res.data.tqmap;
|
|
|
let fjmap = [];
|
|
@@ -541,7 +538,7 @@ export default {
|
|
|
keys.forEach((key, keyIndex) => {
|
|
|
res.data.glvos.forEach((ele) => {
|
|
|
Powertrend.value[keyIndex].value.push({
|
|
|
- text: new Date().formatDate("yyyy-MM-dd"),
|
|
|
+ text: new Date().formatDate("hh:mm"),
|
|
|
value: ele[key],
|
|
|
});
|
|
|
});
|
|
@@ -590,7 +587,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 获取日度损失电量分析
|
|
|
- requestLoss(showLoading) {
|
|
|
+ requestLoss (showLoading) {
|
|
|
let that = this;
|
|
|
that.API.requestData({
|
|
|
showLoading,
|
|
@@ -599,7 +596,7 @@ export default {
|
|
|
data: {
|
|
|
wpId: that.wpId,
|
|
|
},
|
|
|
- success(res) {
|
|
|
+ success (res) {
|
|
|
let dayLost = [];
|
|
|
res.data.forEach((ele) => {
|
|
|
dayLost.push({
|
|
@@ -613,7 +610,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 获取完成电量
|
|
|
- requestPower(showLoading) {
|
|
|
+ requestPower (showLoading) {
|
|
|
let that = this;
|
|
|
that.API.requestData({
|
|
|
showLoading,
|
|
@@ -622,7 +619,7 @@ export default {
|
|
|
data: {
|
|
|
wpId: that.wpId,
|
|
|
},
|
|
|
- success(res) {
|
|
|
+ success (res) {
|
|
|
let data = [
|
|
|
{
|
|
|
title: "发电量",
|
|
@@ -653,7 +650,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 获取月发电量对比
|
|
|
- requestMonthPower(showLoading) {
|
|
|
+ requestMonthPower (showLoading) {
|
|
|
let that = this;
|
|
|
that.API.requestData({
|
|
|
showLoading,
|
|
@@ -662,7 +659,7 @@ export default {
|
|
|
data: {
|
|
|
wpId: that.wpId,
|
|
|
},
|
|
|
- success(res) {
|
|
|
+ success (res) {
|
|
|
let data = [
|
|
|
{
|
|
|
title: "月发电量",
|
|
@@ -693,11 +690,11 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
|
|
|
- created() {
|
|
|
+ created () {
|
|
|
let that = this;
|
|
|
that.wpId = that.$route.params.wpId;
|
|
|
that.$nextTick(() => {
|
|
|
- that.getWp();
|
|
|
+ that.getWp();
|
|
|
that.requestData(false);
|
|
|
that.timmer = setInterval(() => {
|
|
|
that.requestData(false);
|
|
@@ -708,16 +705,16 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- mounted() {},
|
|
|
+ mounted () { },
|
|
|
|
|
|
- unmounted() {
|
|
|
+ unmounted () {
|
|
|
clearInterval(this.timmer);
|
|
|
clearInterval(this.timmer2);
|
|
|
this.timmer = null;
|
|
|
this.timmer2 = null;
|
|
|
},
|
|
|
- watch:{
|
|
|
- "$route"(res){
|
|
|
+ watch: {
|
|
|
+ "$route" (res) {
|
|
|
console.warn('router变化');
|
|
|
this.wpId = res.params.wpId;
|
|
|
this.requestData(false);
|
|
@@ -848,7 +845,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.btn-group-tabs {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+}
|
|
|
</style>
|