|
@@ -1,89 +1,91 @@
|
|
<template>
|
|
<template>
|
|
- <div class="energy-overView" :loading="loading">
|
|
|
|
- <commonSearch hasAreaSearch ref="commonSearch" type="nodate" @search="handleSearch"></commonSearch>
|
|
|
|
- <div class="top-container u-flex">
|
|
|
|
- <div class="louyu u-flex common-box">
|
|
|
|
- <div class="common-title">区域基本信息</div>
|
|
|
|
- <img src="../../../../assets/louyu.png" alt="" />
|
|
|
|
- <a-descriptions :column="2">
|
|
|
|
- <a-descriptions-item label="建筑名称">{{ energySpace.name }}</a-descriptions-item>
|
|
|
|
- <a-descriptions-item label="建筑面积">{{ energySpace.builtarea }} ㎡</a-descriptions-item>
|
|
|
|
- <a-descriptions-item label="空调面积">{{ energySpace.aircondarea }} ㎡</a-descriptions-item>
|
|
|
|
- <a-descriptions-item label="采暖面积">{{ energySpace.heatarea }} ㎡</a-descriptions-item>
|
|
|
|
- <!-- <el-descriptions-item label="用能人数">{{energySpace.}}</el-descriptions-item> -->
|
|
|
|
- <!-- <el-descriptions-item label="建筑年代">{{energySpace.}}</el-descriptions-item> -->
|
|
|
|
- <!-- <el-descriptions-item label="建筑用途">{{energySpace.}}</el-descriptions-item> -->
|
|
|
|
- </a-descriptions>
|
|
|
|
- </div>
|
|
|
|
- <div class="sort-top5-container common-box">
|
|
|
|
- <div class="common-title">当月用电量TOP5(kWh)</div>
|
|
|
|
- <div class="sort-top5" ref="sortTop5"></div>
|
|
|
|
- </div>
|
|
|
|
- <div class="info-total">
|
|
|
|
- <div class="yongdian-xuliang common-box">
|
|
|
|
- <div class="common-title">用电需量(kVA)</div>
|
|
|
|
- <div class="info-container u-flex-jaa">
|
|
|
|
- <div class="item-info">
|
|
|
|
- <div class="name">即时需量</div>
|
|
|
|
- <div class="value">{{ demandStatistics.jishi }}</div>
|
|
|
|
- </div>
|
|
|
|
- <!-- <a-divider direction="vertical"></a-divider> -->
|
|
|
|
- <div class="item-info">
|
|
|
|
- <div class="name">需量峰值</div>
|
|
|
|
- <div class="value">{{ demandStatistics.fengzhi }}</div>
|
|
|
|
- </div>
|
|
|
|
- <!-- <a-divider direction="vertical"></a-divider> -->
|
|
|
|
- <div class="item-info">
|
|
|
|
- <div class="name">目标需量</div>
|
|
|
|
- <div class="value">{{ demandStatistics.mubiao }}</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <a-spin :spinning="loading">
|
|
|
|
+ <div class="energy-overView">
|
|
|
|
+ <commonSearch hasAreaSearch ref="commonSearch" type="nodate" @search="handleSearch"></commonSearch>
|
|
|
|
+ <div class="top-container u-flex">
|
|
|
|
+ <div class="louyu u-flex common-box">
|
|
|
|
+ <div class="common-title">区域基本信息</div>
|
|
|
|
+ <img src="../../../../assets/louyu.png" alt="" />
|
|
|
|
+ <a-descriptions :column="2">
|
|
|
|
+ <a-descriptions-item label="建筑名称">{{ energySpace.name }}</a-descriptions-item>
|
|
|
|
+ <a-descriptions-item label="建筑面积">{{ energySpace.builtarea }} ㎡</a-descriptions-item>
|
|
|
|
+ <a-descriptions-item label="空调面积">{{ energySpace.aircondarea }} ㎡</a-descriptions-item>
|
|
|
|
+ <a-descriptions-item label="采暖面积">{{ energySpace.heatarea }} ㎡</a-descriptions-item>
|
|
|
|
+ <!-- <el-descriptions-item label="用能人数">{{energySpace.}}</el-descriptions-item> -->
|
|
|
|
+ <!-- <el-descriptions-item label="建筑年代">{{energySpace.}}</el-descriptions-item> -->
|
|
|
|
+ <!-- <el-descriptions-item label="建筑用途">{{energySpace.}}</el-descriptions-item> -->
|
|
|
|
+ </a-descriptions>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="sort-top5-container common-box">
|
|
|
|
+ <div class="common-title">当月用电量TOP5(kWh)</div>
|
|
|
|
+ <div class="sort-top5" ref="sortTop5"></div>
|
|
</div>
|
|
</div>
|
|
- <div class="u-flex co2-tianqi">
|
|
|
|
- <div class="co2 common-box">
|
|
|
|
- <div class="common-title">CO2排放</div>
|
|
|
|
|
|
+ <div class="info-total">
|
|
|
|
+ <div class="yongdian-xuliang common-box">
|
|
|
|
+ <div class="common-title">用电需量(kVA)</div>
|
|
<div class="info-container u-flex-jaa">
|
|
<div class="info-container u-flex-jaa">
|
|
<div class="item-info">
|
|
<div class="item-info">
|
|
- <div class="name">本月排放(Kg)</div>
|
|
|
|
- <div class="value">{{ demandStatistics.co2 }}</div>
|
|
|
|
|
|
+ <div class="name">即时需量</div>
|
|
|
|
+ <div class="value">{{ demandStatistics.jishi }}</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="tianqi common-box">
|
|
|
|
- <div class="common-title">环境信息</div>
|
|
|
|
- <div class="info-container u-flex-jaa">
|
|
|
|
|
|
+ <!-- <a-divider direction="vertical"></a-divider> -->
|
|
<div class="item-info">
|
|
<div class="item-info">
|
|
- <div class="name">湿度(%)</div>
|
|
|
|
- <div class="value">{{ demandStatistics.shidu }}</div>
|
|
|
|
|
|
+ <div class="name">需量峰值</div>
|
|
|
|
+ <div class="value">{{ demandStatistics.fengzhi }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- <a-divider direction="vertical"></a-divider> -->
|
|
<!-- <a-divider direction="vertical"></a-divider> -->
|
|
<div class="item-info">
|
|
<div class="item-info">
|
|
- <div class="name">温度(℃)</div>
|
|
|
|
- <div class="value">{{ demandStatistics.wendu }}</div>
|
|
|
|
|
|
+ <div class="name">目标需量</div>
|
|
|
|
+ <div class="value">{{ demandStatistics.mubiao }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="bottom-container u-flex">
|
|
|
|
- <div class="xiaohao common-box">
|
|
|
|
- <div class="common-title">当月能源消耗总标煤(kg)</div>
|
|
|
|
- <div class="zongbiao-chart" ref="zongbiao"></div>
|
|
|
|
- <!-- <div class="legend">
|
|
|
|
- <div class="u-flex item" v-for="(item, index) in dataLists" :key="index">
|
|
|
|
- <div class="text">{{item.name}}</div>
|
|
|
|
- <div class="number">{{item.number}}tec</div>
|
|
|
|
- <div class="pieValue">{{item.pieValue}}%</div>
|
|
|
|
|
|
+ <div class="u-flex co2-tianqi">
|
|
|
|
+ <div class="co2 common-box">
|
|
|
|
+ <div class="common-title">CO2排放</div>
|
|
|
|
+ <div class="info-container u-flex-jaa">
|
|
|
|
+ <div class="item-info">
|
|
|
|
+ <div class="name">本月排放(Kg)</div>
|
|
|
|
+ <div class="value">{{ demandStatistics.co2 }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tianqi common-box">
|
|
|
|
+ <div class="common-title">环境信息</div>
|
|
|
|
+ <div class="info-container u-flex-jaa">
|
|
|
|
+ <div class="item-info">
|
|
|
|
+ <div class="name">湿度(%)</div>
|
|
|
|
+ <div class="value">{{ demandStatistics.shidu }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <a-divider direction="vertical"></a-divider> -->
|
|
|
|
+ <div class="item-info">
|
|
|
|
+ <div class="name">温度(℃)</div>
|
|
|
|
+ <div class="value">{{ demandStatistics.wendu }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- </div> -->
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="qushi common-box">
|
|
|
|
- <div class="common-title">总用电趋势图(kWh)</div>
|
|
|
|
- <div class="totalEle-trend" ref="totalEleTrend"></div>
|
|
|
|
|
|
+ <div class="bottom-container u-flex">
|
|
|
|
+ <div class="xiaohao common-box">
|
|
|
|
+ <div class="common-title">当月能源消耗总标煤(kg)</div>
|
|
|
|
+ <div class="zongbiao-chart" ref="zongbiao"></div>
|
|
|
|
+ <!-- <div class="legend">
|
|
|
|
+ <div class="u-flex item" v-for="(item, index) in dataLists" :key="index">
|
|
|
|
+ <div class="text">{{item.name}}</div>
|
|
|
|
+ <div class="number">{{item.number}}tec</div>
|
|
|
|
+ <div class="pieValue">{{item.pieValue}}%</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div> -->
|
|
|
|
+ </div>
|
|
|
|
+ <div class="qushi common-box">
|
|
|
|
+ <div class="common-title">总用电趋势图(kWh)</div>
|
|
|
|
+ <div class="totalEle-trend" ref="totalEleTrend"></div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
|
|
+ </a-spin>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -141,58 +143,63 @@ export default {
|
|
})
|
|
})
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- async getEnergyoverview() {
|
|
|
|
|
|
+ getEnergyoverview() {
|
|
// {spaceId: 277797283102721}
|
|
// {spaceId: 277797283102721}
|
|
this.loading = true
|
|
this.loading = true
|
|
var data = this.$refs.commonSearch.queryParams
|
|
var data = this.$refs.commonSearch.queryParams
|
|
getAction(this.url.list, data).then((res) => {
|
|
getAction(this.url.list, data).then((res) => {
|
|
- console.log(res)
|
|
|
|
- var listData = res.result
|
|
|
|
- // 用电需量
|
|
|
|
- this.demandStatistics.jishi = listData.demandStatistics.find((item) => item.type === '即时需量').howManyValue
|
|
|
|
- this.demandStatistics.fengzhi = listData.demandStatistics.find((item) => item.type === '需量峰值').howManyValue
|
|
|
|
- this.demandStatistics.mubiao = listData.demandStatistics.find((item) => item.type === '目标需量').howManyValue
|
|
|
|
|
|
+ if(res.success){
|
|
|
|
+ var listData = res.result
|
|
|
|
+ // 用电需量
|
|
|
|
+ this.demandStatistics.jishi = listData.demandStatistics.find((item) => item.type === '即时需量').howManyValue
|
|
|
|
+ this.demandStatistics.fengzhi = listData.demandStatistics.find((item) => item.type === '需量峰值').howManyValue
|
|
|
|
+ this.demandStatistics.mubiao = listData.demandStatistics.find((item) => item.type === '目标需量').howManyValue
|
|
|
|
|
|
- // co2+气象
|
|
|
|
- this.demandStatistics.co2 = listData.environmentStatistics.find((item) => item.type === 'CO2排放').howManyValue
|
|
|
|
- this.demandStatistics.shidu = listData.environmentStatistics.find((item) => item.type === '室外湿度')
|
|
|
|
- ? listData.environmentStatistics.find((item) => item.type === '室外湿度').howManyValue
|
|
|
|
- : ''
|
|
|
|
- this.demandStatistics.wendu = listData.environmentStatistics.find((item) => item.type === '室外温度')
|
|
|
|
- ? listData.environmentStatistics.find((item) => item.type === '室外温度').howManyValue
|
|
|
|
- : ''
|
|
|
|
|
|
+ // co2+气象
|
|
|
|
+ this.demandStatistics.co2 = listData.environmentStatistics.find((item) => item.type === 'CO2排放').howManyValue
|
|
|
|
+ this.demandStatistics.shidu = listData.environmentStatistics.find((item) => item.type === '室外湿度')
|
|
|
|
+ ? listData.environmentStatistics.find((item) => item.type === '室外湿度').howManyValue
|
|
|
|
+ : ''
|
|
|
|
+ this.demandStatistics.wendu = listData.environmentStatistics.find((item) => item.type === '室外温度')
|
|
|
|
+ ? listData.environmentStatistics.find((item) => item.type === '室外温度').howManyValue
|
|
|
|
+ : ''
|
|
|
|
|
|
- // top5
|
|
|
|
- this.sortTop5Name = []
|
|
|
|
- this.nowMonthData = []
|
|
|
|
- this.lastMonthData = []
|
|
|
|
- listData.top5Statistics.forEach((res) => {
|
|
|
|
- this.sortTop5Name.push(res.equipmentname)
|
|
|
|
- this.nowMonthData.push(res.howManyValue)
|
|
|
|
- this.lastMonthData.push(res.howManyValue2)
|
|
|
|
- })
|
|
|
|
|
|
+ // top5
|
|
|
|
+ this.sortTop5Name = []
|
|
|
|
+ this.nowMonthData = []
|
|
|
|
+ this.lastMonthData = []
|
|
|
|
+ listData.top5Statistics.forEach((res) => {
|
|
|
|
+ this.sortTop5Name.push(res.equipmentname)
|
|
|
|
+ this.nowMonthData.push(res.howManyValue)
|
|
|
|
+ this.lastMonthData.push(res.howManyValue2)
|
|
|
|
+ })
|
|
|
|
|
|
- // 总标煤
|
|
|
|
- this.zongbiao = listData.kgceStatistics.map((res) => {
|
|
|
|
- var item = {
|
|
|
|
- name: res.type,
|
|
|
|
- value: res.howManyValue,
|
|
|
|
- }
|
|
|
|
- return item
|
|
|
|
- })
|
|
|
|
|
|
+ // 总标煤
|
|
|
|
+ this.zongbiao = listData.kgceStatistics.map((res) => {
|
|
|
|
+ var item = {
|
|
|
|
+ name: res.type,
|
|
|
|
+ value: res.howManyValue,
|
|
|
|
+ }
|
|
|
|
+ return item
|
|
|
|
+ })
|
|
|
|
|
|
- this.totalEleTrend.daysplit = listData.daysplit
|
|
|
|
- this.totalEleTrend.kongtiao = listData.kongtiao
|
|
|
|
- this.totalEleTrend.dongli = listData.dongli
|
|
|
|
- this.totalEleTrend.zhaoming = listData.zhaoming
|
|
|
|
- this.totalEleTrend.qita = listData.qita
|
|
|
|
- this.energySpace = listData.energySpace
|
|
|
|
- this.loading = false
|
|
|
|
- })
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- this.initSortTop5()
|
|
|
|
- this.initPieDianliang()
|
|
|
|
- this.initTotalEleTrend()
|
|
|
|
|
|
+ this.totalEleTrend.daysplit = listData.daysplit
|
|
|
|
+ this.totalEleTrend.kongtiao = listData.kongtiao
|
|
|
|
+ this.totalEleTrend.dongli = listData.dongli
|
|
|
|
+ this.totalEleTrend.zhaoming = listData.zhaoming
|
|
|
|
+ this.totalEleTrend.qita = listData.qita
|
|
|
|
+ this.energySpace = listData.energySpace
|
|
|
|
+ // this.$message.success(res.message);
|
|
|
|
+ }else{
|
|
|
|
+ this.$message.warning(res.message);
|
|
|
|
+ }
|
|
|
|
+ }).finally(() => {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.initSortTop5()
|
|
|
|
+ this.initPieDianliang()
|
|
|
|
+ this.initTotalEleTrend()
|
|
|
|
+ })
|
|
|
|
+ this.loading = false;
|
|
})
|
|
})
|
|
},
|
|
},
|
|
handleSearch(param) {
|
|
handleSearch(param) {
|