|
@@ -32,7 +32,29 @@
|
|
</div>
|
|
</div>
|
|
<div class="photovoltaic-chart3">
|
|
<div class="photovoltaic-chart3">
|
|
<div class="chart-card power-statistics">
|
|
<div class="chart-card power-statistics">
|
|
- <div class="chart-card-title">发电统计</div>
|
|
|
|
|
|
+ <div class="chart-card-title-wrapper">
|
|
|
|
+ <div class="chart-card-title">发电统计</div>
|
|
|
|
+ <div class="right-bar">
|
|
|
|
+ <div
|
|
|
|
+ :class="datetype === 'r' ? 'type-button-on' : 'day-button'"
|
|
|
|
+ @click="handleChangeDay('r')"
|
|
|
|
+ >
|
|
|
|
+ <div class="day-name">日</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ :class="datetype === 'y' ? 'type-button-on' : 'day-button'"
|
|
|
|
+ @click="handleChangeDay('y')"
|
|
|
|
+ >
|
|
|
|
+ <div class="day-name">月</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ :class="datetype === 'n' ? 'type-button-on' : 'day-button'"
|
|
|
|
+ @click="handleChangeDay('n')"
|
|
|
|
+ >
|
|
|
|
+ <div class="day-name">年</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<div class="chart-content">
|
|
<div class="chart-content">
|
|
<div class="chart-img">
|
|
<div class="chart-img">
|
|
<div class="img">
|
|
<div class="img">
|
|
@@ -47,7 +69,7 @@
|
|
</div>
|
|
</div>
|
|
<ul class="chart-list">
|
|
<ul class="chart-list">
|
|
<li class="statistics-li">
|
|
<li class="statistics-li">
|
|
- <span class="statistics-name">当日发电量</span>
|
|
|
|
|
|
+ <span class="statistics-name">发电量</span>
|
|
|
|
|
|
<div>
|
|
<div>
|
|
<span class="statistics-data">{{
|
|
<span class="statistics-data">{{
|
|
@@ -58,22 +80,22 @@
|
|
<span class="statistics-unit">万kWh</span>
|
|
<span class="statistics-unit">万kWh</span>
|
|
</li>
|
|
</li>
|
|
<li class="statistics-li">
|
|
<li class="statistics-li">
|
|
- <span class="statistics-name">当月发电量</span>
|
|
|
|
|
|
+ <span class="statistics-name">理论发电量</span>
|
|
|
|
|
|
<div>
|
|
<div>
|
|
<span class="statistics-data">{{
|
|
<span class="statistics-data">{{
|
|
- companyPowerStationData?.fdtj?.yfdl?.toFixed(2) || 0
|
|
|
|
|
|
+ companyPowerStationData?.fdtj?.llfdl?.toFixed(2) || 0
|
|
}}</span>
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<span class="statistics-unit">万kWh</span>
|
|
<span class="statistics-unit">万kWh</span>
|
|
</li>
|
|
</li>
|
|
<li class="statistics-li">
|
|
<li class="statistics-li">
|
|
- <span class="statistics-name">当年发电量</span>
|
|
|
|
|
|
+ <span class="statistics-name">损失电量</span>
|
|
|
|
|
|
<div>
|
|
<div>
|
|
<span class="statistics-data">{{
|
|
<span class="statistics-data">{{
|
|
- companyPowerStationData?.fdtj?.nfdl?.toFixed(2) || 0
|
|
|
|
|
|
+ companyPowerStationData?.fdtj?.ssdl?.toFixed(2) || 0
|
|
}}</span>
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -205,16 +227,16 @@
|
|
<div class="form-box">
|
|
<div class="form-box">
|
|
<div
|
|
<div
|
|
class="theme-change"
|
|
class="theme-change"
|
|
- @click="themeChange('operate')"
|
|
|
|
- :class="themeType === 'operate' && 'active-theme'"
|
|
|
|
|
|
+ @click="themeChange('maintenance')"
|
|
|
|
+ :class="themeType === 'maintenance' && 'active-theme'"
|
|
>
|
|
>
|
|
<i class="icon-operate"></i>
|
|
<i class="icon-operate"></i>
|
|
<span>运营</span>
|
|
<span>运营</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
class="theme-change"
|
|
class="theme-change"
|
|
- @click="themeChange('maintenance')"
|
|
|
|
- :class="themeType === 'maintenance' && 'active-theme'"
|
|
|
|
|
|
+ @click="themeChange('operate')"
|
|
|
|
+ :class="themeType === 'operate' && 'active-theme'"
|
|
>
|
|
>
|
|
<i class="icon-maintenance"></i>
|
|
<i class="icon-maintenance"></i>
|
|
<span>运维</span>
|
|
<span>运维</span>
|
|
@@ -301,7 +323,7 @@ export default {
|
|
stationLists: [], // 场站列表
|
|
stationLists: [], // 场站列表
|
|
timer: null, // 3秒调一次
|
|
timer: null, // 3秒调一次
|
|
checkNode: "", // 选中区域
|
|
checkNode: "", // 选中区域
|
|
- themeType: "operate", // 主题模式 经营类:operate, 运维类:maintenance
|
|
|
|
|
|
+ themeType: "maintenance", // 主题模式 经营类:maintenance, 运维类:operate
|
|
stationName: [], //选中场站
|
|
stationName: [], //选中场站
|
|
isActive: "card", // 切换卡片或列表
|
|
isActive: "card", // 切换卡片或列表
|
|
dayWindPieData: {}, //五项损失图表数据
|
|
dayWindPieData: {}, //五项损失图表数据
|
|
@@ -320,6 +342,7 @@ export default {
|
|
],
|
|
],
|
|
sortCode: "", //排序条件
|
|
sortCode: "", //排序条件
|
|
sortType: true, //升序降序
|
|
sortType: true, //升序降序
|
|
|
|
+ datetype: "r",
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
|
|
@@ -342,6 +365,7 @@ export default {
|
|
companyId: this.checkNode,
|
|
companyId: this.checkNode,
|
|
type: 0,
|
|
type: 0,
|
|
statype: -1,
|
|
statype: -1,
|
|
|
|
+ datetype: this.datetype,
|
|
});
|
|
});
|
|
this.companyPowerStationData = res; //所有页面数据
|
|
this.companyPowerStationData = res; //所有页面数据
|
|
this.listData = this.companyPowerStationData?.wxsslb; //列表数据
|
|
this.listData = this.companyPowerStationData?.wxsslb; //列表数据
|
|
@@ -384,6 +408,11 @@ export default {
|
|
this.sortCode = val;
|
|
this.sortCode = val;
|
|
this.cardData = this.getSortList(this.listData, this.sortCode);
|
|
this.cardData = this.getSortList(this.listData, this.sortCode);
|
|
},
|
|
},
|
|
|
|
+ //切换日月年
|
|
|
|
+ handleChangeDay(val) {
|
|
|
|
+ this.datetype = val;
|
|
|
|
+ this.getDataDetial();
|
|
|
|
+ },
|
|
// 切换公司
|
|
// 切换公司
|
|
async companyChange(val) {
|
|
async companyChange(val) {
|
|
clearInterval(this.timer);
|
|
clearInterval(this.timer);
|
|
@@ -555,6 +584,10 @@ export default {
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
padding: 25px 15px;
|
|
padding: 25px 15px;
|
|
|
|
|
|
|
|
+ .chart-card-title-wrapper {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
.chart-card-title {
|
|
.chart-card-title {
|
|
position: relative;
|
|
position: relative;
|
|
top: -8px;
|
|
top: -8px;
|
|
@@ -562,6 +595,93 @@ export default {
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
+ .right-bar {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-top: -8px;
|
|
|
|
+ }
|
|
|
|
+ .day-button {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ border: 1px solid #5e6778;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ color: #b3b3b3;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ height: 32px;
|
|
|
|
+ min-width: 54px;
|
|
|
|
+
|
|
|
|
+ .type-name {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .type-button {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ padding: 0 14px;
|
|
|
|
+ background: rgba(0, 70, 199, 0.2);
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ color: #b3b3b3;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ height: 32px;
|
|
|
|
+ min-width: 54px;
|
|
|
|
+
|
|
|
|
+ .type-name {
|
|
|
|
+ margin-left: 9px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .type-button-on {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ padding: 0 14px;
|
|
|
|
+ background: rgba(0, 70, 199, 0.5);
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ color: #1c99ff;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ height: 32px;
|
|
|
|
+ min-width: 54px;
|
|
|
|
+
|
|
|
|
+ .type-name {
|
|
|
|
+ margin-left: 9px;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .day-name {
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
.chart-content {
|
|
.chart-content {
|
|
display: flex;
|
|
display: flex;
|
|
@@ -698,7 +818,7 @@ export default {
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
padding-bottom: 5px;
|
|
padding-bottom: 5px;
|
|
border-bottom: 1px solid #4c545a;
|
|
border-bottom: 1px solid #4c545a;
|
|
- margin-bottom: 18px;
|
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
.station-state {
|
|
.station-state {
|
|
display: flex;
|
|
display: flex;
|
|
@@ -722,6 +842,7 @@ export default {
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
.unit {
|
|
.unit {
|
|
color: #b3b3b3;
|
|
color: #b3b3b3;
|
|
|
|
+ font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
}
|
|
}
|
|
}
|
|
}
|