|
@@ -1,74 +1,76 @@
|
|
|
<template>
|
|
|
- <div class="item-zedEnergy" :loading="loading">
|
|
|
- <commonSearch ref="commonSearch" type="day" @search="handleSearch"></commonSearch>
|
|
|
- <div class="statistics-container u-flex">
|
|
|
- <!-- 日 -->
|
|
|
- <div class="u-flex-cjac item-module">
|
|
|
- <div class="item-title">日统计</div>
|
|
|
- <div class="u-flex-jaa info-container">
|
|
|
- <div class="item-info">
|
|
|
- <div class="name">当日用能(KWh)</div>
|
|
|
- <div class="value">{{ itemizedStatistics.nowDay }}</div>
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
- <div class="item-info">
|
|
|
- <div class="name">昨日用能(KWh)</div>
|
|
|
- <div class="value">{{ itemizedStatistics.lastDay }}</div>
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
- <div class="item-info">
|
|
|
- <div class="name">环比</div>
|
|
|
- <div class="value">{{ itemizedStatistics.huanbiDay }}%</div>
|
|
|
- <!-- <div class="value">57.55% ↑</div> -->
|
|
|
+ <a-spin :spinning="loading">
|
|
|
+ <div class="item-zedEnergy" :loading="loading">
|
|
|
+ <commonSearch ref="commonSearch" type="day" @search="handleSearch"></commonSearch>
|
|
|
+ <div class="statistics-container u-flex">
|
|
|
+ <!-- 日 -->
|
|
|
+ <div class="u-flex-cjac item-module">
|
|
|
+ <div class="item-title">日统计</div>
|
|
|
+ <div class="u-flex-jaa info-container">
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="name">当日用能(KWh)</div>
|
|
|
+ <div class="value">{{ itemizedStatistics.nowDay }}</div>
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="name">昨日用能(KWh)</div>
|
|
|
+ <div class="value">{{ itemizedStatistics.lastDay }}</div>
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="name">环比</div>
|
|
|
+ <div class="value">{{ itemizedStatistics.huanbiDay }}%</div>
|
|
|
+ <!-- <div class="value">57.55% ↑</div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="pie-item-echarts" ref="dayPieCharts"></div>
|
|
|
</div>
|
|
|
- <div class="pie-item-echarts" ref="dayPieCharts"></div>
|
|
|
- </div>
|
|
|
- <!-- 周 -->
|
|
|
- <div class="u-flex-cjac item-module">
|
|
|
- <div class="item-title">周统计</div>
|
|
|
- <div class="u-flex-jaa info-container">
|
|
|
- <div class="item-info">
|
|
|
- <div class="name">当周用能(KWh)</div>
|
|
|
- <div class="value">{{ itemizedStatistics.nowWeek }}</div>
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
- <div class="item-info">
|
|
|
- <div class="name">上周用能(KWh)</div>
|
|
|
- <div class="value">{{ itemizedStatistics.lastWeek }}</div>
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
- <div class="item-info">
|
|
|
- <div class="name">环比</div>
|
|
|
- <div class="value">{{ itemizedStatistics.huanbiWeek }}%</div>
|
|
|
+ <!-- 周 -->
|
|
|
+ <div class="u-flex-cjac item-module">
|
|
|
+ <div class="item-title">周统计</div>
|
|
|
+ <div class="u-flex-jaa info-container">
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="name">当周用能(KWh)</div>
|
|
|
+ <div class="value">{{ itemizedStatistics.nowWeek }}</div>
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="name">上周用能(KWh)</div>
|
|
|
+ <div class="value">{{ itemizedStatistics.lastWeek }}</div>
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="name">环比</div>
|
|
|
+ <div class="value">{{ itemizedStatistics.huanbiWeek }}%</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="pie-item-echarts" ref="weekPieCharts"></div>
|
|
|
</div>
|
|
|
- <div class="pie-item-echarts" ref="weekPieCharts"></div>
|
|
|
- </div>
|
|
|
- <!-- 月 -->
|
|
|
- <div class="u-flex-cjac item-module">
|
|
|
- <div class="item-title">月统计</div>
|
|
|
- <div class="u-flex-jaa info-container">
|
|
|
- <div class="item-info">
|
|
|
- <div class="name">当月用能(KWh)</div>
|
|
|
- <div class="value">{{ itemizedStatistics.nowMonth }}</div>
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
- <div class="item-info">
|
|
|
- <div class="name">上月用能(KWh)</div>
|
|
|
- <div class="value">{{ itemizedStatistics.lastMonth }}</div>
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
- <div class="item-info">
|
|
|
- <div class="name">环比</div>
|
|
|
- <div class="value">{{ itemizedStatistics.huanbiMonth }}%</div>
|
|
|
+ <!-- 月 -->
|
|
|
+ <div class="u-flex-cjac item-module">
|
|
|
+ <div class="item-title">月统计</div>
|
|
|
+ <div class="u-flex-jaa info-container">
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="name">当月用能(KWh)</div>
|
|
|
+ <div class="value">{{ itemizedStatistics.nowMonth }}</div>
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="name">上月用能(KWh)</div>
|
|
|
+ <div class="value">{{ itemizedStatistics.lastMonth }}</div>
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="name">环比</div>
|
|
|
+ <div class="value">{{ itemizedStatistics.huanbiMonth }}%</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="pie-item-echarts" ref="monthPieCharts"></div>
|
|
|
</div>
|
|
|
- <div class="pie-item-echarts" ref="monthPieCharts"></div>
|
|
|
</div>
|
|
|
+ <div class="trend-charts" ref="trendCharts"></div>
|
|
|
</div>
|
|
|
- <div class="trend-charts" ref="trendCharts"></div>
|
|
|
- </div>
|
|
|
+ </a-spin>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -119,63 +121,71 @@
|
|
|
async getItemizedenergy(){
|
|
|
this.loading = true
|
|
|
var data = this.$refs.commonSearch.queryParams
|
|
|
- getAction(this.url.list, data).then(response => {
|
|
|
- console.log(response)
|
|
|
- var listData = response.result
|
|
|
- // 日
|
|
|
- this.itemizedStatistics.nowDay = (listData.dayStatistics.find(item=>item.type === '当日用能')).howManyValue
|
|
|
- this.itemizedStatistics.lastDay = (listData.dayStatistics.find(item=>item.type === '昨日用能')).howManyValue
|
|
|
- this.itemizedStatistics.huanbiDay = (listData.dayStatistics.find(item=>item.type === '环比')).howManyValue
|
|
|
- // 月
|
|
|
- this.itemizedStatistics.nowMonth = (listData.monthStatistics.find(item=>item.type === '当月用能')).howManyValue
|
|
|
- this.itemizedStatistics.lastMonth = (listData.monthStatistics.find(item=>item.type === '上月用能')).howManyValue
|
|
|
- this.itemizedStatistics.huanbiMonth = (listData.monthStatistics.find(item=>item.type === '环比')).howManyValue
|
|
|
- // listData.monthStatistics.find(item=>if (item.type === '环比') {return item.howManyValue})
|
|
|
- // 周
|
|
|
- this.itemizedStatistics.nowWeek = (listData.weekStatistics.find(item=>item.type === '当周用能')).howManyValue
|
|
|
- this.itemizedStatistics.lastWeek = (listData.weekStatistics.find(item=>item.type === '上周用能')).howManyValue
|
|
|
- this.itemizedStatistics.huanbiWeek = (listData.weekStatistics.find(item=>item.type === '环比')).howManyValue
|
|
|
+ await getAction(this.url.list, data).then(response => {
|
|
|
+ if(response.success){
|
|
|
+ this.$message.success(response.message);
|
|
|
+ var listData = response.result
|
|
|
+ // 日
|
|
|
+ this.itemizedStatistics.nowDay = (listData.dayStatistics.find(item=>item.type === '当日用能')).howManyValue
|
|
|
+ this.itemizedStatistics.lastDay = (listData.dayStatistics.find(item=>item.type === '昨日用能')).howManyValue
|
|
|
+ this.itemizedStatistics.huanbiDay = (listData.dayStatistics.find(item=>item.type === '环比')).howManyValue
|
|
|
+ // 月
|
|
|
+ this.itemizedStatistics.nowMonth = (listData.monthStatistics.find(item=>item.type === '当月用能')).howManyValue
|
|
|
+ this.itemizedStatistics.lastMonth = (listData.monthStatistics.find(item=>item.type === '上月用能')).howManyValue
|
|
|
+ this.itemizedStatistics.huanbiMonth = (listData.monthStatistics.find(item=>item.type === '环比')).howManyValue
|
|
|
+ // listData.monthStatistics.find(item=>if (item.type === '环比') {return item.howManyValue})
|
|
|
+ // 周
|
|
|
+ this.itemizedStatistics.nowWeek = (listData.weekStatistics.find(item=>item.type === '当周用能')).howManyValue
|
|
|
+ this.itemizedStatistics.lastWeek = (listData.weekStatistics.find(item=>item.type === '上周用能')).howManyValue
|
|
|
+ this.itemizedStatistics.huanbiWeek = (listData.weekStatistics.find(item=>item.type === '环比')).howManyValue
|
|
|
|
|
|
- this.dayPieData = listData.dayStatistics.map(res => {
|
|
|
- if(res.type === '能耗分项'){
|
|
|
- var item ={
|
|
|
- name: res.equipmentname,
|
|
|
- value: res.howManyValue,
|
|
|
+ this.dayPieData = listData.dayStatistics.map(res => {
|
|
|
+ if(res.type === '能耗分项'){
|
|
|
+ var item ={
|
|
|
+ name: res.equipmentname,
|
|
|
+ value: res.howManyValue,
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ this.weekPieData = listData.weekStatistics.map(res => {
|
|
|
+ if(res.type === '能耗分项'){
|
|
|
+ var item ={
|
|
|
+ name: res.equipmentname,
|
|
|
+ value: res.howManyValue,
|
|
|
+ }
|
|
|
+ return item
|
|
|
}
|
|
|
- return item
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- this.weekPieData = listData.weekStatistics.map(res => {
|
|
|
- if(res.type === '能耗分项'){
|
|
|
- var item ={
|
|
|
- name: res.equipmentname,
|
|
|
- value: res.howManyValue,
|
|
|
- }
|
|
|
- return item
|
|
|
- }
|
|
|
- })
|
|
|
- this.monthPieData = listData.monthStatistics.map(res => {
|
|
|
- if(res.type === '能耗分项'){
|
|
|
- var item ={
|
|
|
- name: res.equipmentname,
|
|
|
- value: res.howManyValue,
|
|
|
+ })
|
|
|
+ this.monthPieData = listData.monthStatistics.map(res => {
|
|
|
+ if(res.type === '能耗分项'){
|
|
|
+ var item ={
|
|
|
+ name: res.equipmentname,
|
|
|
+ value: res.howManyValue,
|
|
|
+ }
|
|
|
+ return item
|
|
|
}
|
|
|
- return item
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- this.hours = listData.hours
|
|
|
- this.kongtiao = listData.kongtiao
|
|
|
- this.dongli = listData.dongli
|
|
|
- this.zhaoming = listData.zhaoming
|
|
|
- this.qita = listData.qita
|
|
|
- this.loading = false
|
|
|
+ })
|
|
|
+
|
|
|
+ this.hours = listData.hours
|
|
|
+ this.kongtiao = listData.kongtiao
|
|
|
+ this.dongli = listData.dongli
|
|
|
+ this.zhaoming = listData.zhaoming
|
|
|
+ this.qita = listData.qita
|
|
|
+ this.loading = false
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.$message.warning(response.message);
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.initDayPieCharts()
|
|
|
+ this.initWeekPieCharts()
|
|
|
+ this.initMonthPieCharts()
|
|
|
+ this.initEcharts()
|
|
|
+ // this.loading = false
|
|
|
})
|
|
|
- this.initDayPieCharts()
|
|
|
- this.initWeekPieCharts()
|
|
|
- this.initMonthPieCharts()
|
|
|
- this.initEcharts()
|
|
|
},
|
|
|
initDayPieCharts(){
|
|
|
var chartDom = this.$refs.dayPieCharts
|