|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar title="用电量分析" title-color="#101010"></u-navbar>
|
|
|
+ <u-navbar title="能耗分析" title-color="#101010"></u-navbar>
|
|
|
<u-select v-model="tabsFrom.show1" mode="mutil-column-auto"
|
|
|
:default-value ="tabsFrom.show1Index" child-name="childList"
|
|
|
:list="mainList" value-name="id" label-name="name"
|
|
|
@@ -11,7 +11,7 @@
|
|
|
<!-- 选择电表 -->
|
|
|
<view class="unit">
|
|
|
<view class="title">
|
|
|
- 选择查询电表
|
|
|
+ 选择查询设备
|
|
|
</view>
|
|
|
<view class="value" @click="tabsFrom.show1=true">
|
|
|
<view class="text">
|
|
|
@@ -30,15 +30,22 @@
|
|
|
<view class="icon">
|
|
|
|
|
|
</view>
|
|
|
- <view class="text">
|
|
|
+ <view class="text" v-if="meterType==0">
|
|
|
各时段平均用电量 (度)
|
|
|
</view>
|
|
|
+ <view class="text" v-if="meterType==1">
|
|
|
+ 各时段平均用水量 (m³)
|
|
|
+ </view>
|
|
|
|
|
|
</view>
|
|
|
- <view class="tips">
|
|
|
+ <view class="tips" v-if="meterType==0">
|
|
|
<view>{{info.timeSlot}}</view>
|
|
|
<view>日平均用电量:{{info.dayKwh}}度</view>
|
|
|
</view>
|
|
|
+ <view class="tips" v-if="meterType==1">
|
|
|
+ <view>{{info.hourStartTime}} 至 {{info.hourEndTime}}</view>
|
|
|
+ <view>日平均用水量:{{info.totalConsumption}}m³</view>
|
|
|
+ </view>
|
|
|
<!-- 图表 -->
|
|
|
<view class="chart">
|
|
|
<view id="barEcharts" style="min-height:440rpx;">
|
|
|
@@ -47,15 +54,21 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 备注 -->
|
|
|
- <view class="remark">
|
|
|
+ <view class="remark" v-if="meterType==0">
|
|
|
<p>备注说明：</p>
|
|
|
|
|
|
电表设备的各时段平均用电量，采集自设备上一个【不断电状态核准周期】内的每日各时段用电量平均值。以此平均用电量数据基准，作为智能停电节省电费的数据支撑。
|
|
|
|
|
|
</view>
|
|
|
+ <view class="remark" v-if="meterType==1">
|
|
|
+ <p>备注说明：</p>
|
|
|
+
|
|
|
+ 水表设备的各时段平均用水量，采集自设备上一个【数据核准周期】内的每日各时段用水量平均值。以此平均用水量数据基准，作为智能停水节水的数据支撑。
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="main2" v-show="info&&!info.hourKwhList">
|
|
|
- <u-divider :isnone="true" nonetext="选择电表" style="margin-top: 20rpx;"
|
|
|
+ <u-divider :isnone="true" nonetext="选择设备" style="margin-top: 20rpx;"
|
|
|
border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
</view>
|
|
|
<view class="main2" v-show="info&&info.hourKwhList&&info.hourKwhList.length==0">
|
|
|
@@ -94,14 +107,15 @@
|
|
|
show1Index: [],
|
|
|
show2Index: '',
|
|
|
show2: false,
|
|
|
- show1Text: "选择电表",
|
|
|
+ show1Text: "选择设备",
|
|
|
show2Text: "全部时间",
|
|
|
selector1: [
|
|
|
]
|
|
|
},
|
|
|
- meterType:1,//1电表2水表
|
|
|
+ meterType:0,//0电表1水表
|
|
|
myChart: null,
|
|
|
companyList:null,
|
|
|
+
|
|
|
meterList:null,
|
|
|
waterList:null,
|
|
|
mainList:null,
|
|
|
@@ -125,6 +139,28 @@
|
|
|
|
|
|
},
|
|
|
callback2(){
|
|
|
+
|
|
|
+ var companyList=JSON.parse(JSON.stringify(this.companyList))
|
|
|
+ companyList.forEach((item)=>{
|
|
|
+ item.childList.forEach((info)=>{
|
|
|
+ info.childList=[]
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.waterList.forEach((meter)=>{
|
|
|
+
|
|
|
+ companyList.forEach((item)=>{
|
|
|
+ item.childList.forEach((info)=>{
|
|
|
+ if(meter.parkId==info.id){
|
|
|
+ info.childList.push(meter)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
this.mainList=[
|
|
|
{
|
|
|
id:"1",name:"电表",i:0,childList:[
|
|
|
@@ -133,14 +169,18 @@
|
|
|
},
|
|
|
{
|
|
|
id:"2",name:"水表",i:1,childList:[
|
|
|
- //...this.companyList
|
|
|
+ ...companyList
|
|
|
]
|
|
|
}
|
|
|
];
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
callback(){
|
|
|
if(this.companyList&&this.meterList){
|
|
|
uni.hideLoading();
|
|
|
+
|
|
|
}
|
|
|
if(this.companyList.length&&this.meterList.length){
|
|
|
|
|
|
@@ -160,8 +200,8 @@
|
|
|
})
|
|
|
})
|
|
|
|
|
|
- this.mainList=this.companyList
|
|
|
-
|
|
|
+ this.mainList=[...this.companyList]
|
|
|
+ this.getHaveMeterListWater()
|
|
|
}
|
|
|
|
|
|
},
|
|
|
@@ -171,7 +211,7 @@
|
|
|
//uni.hideLoading();
|
|
|
var list = response.data.companyInfoList;
|
|
|
this.companyList=list
|
|
|
-
|
|
|
+
|
|
|
this.callback()
|
|
|
}).catch(error => {
|
|
|
uni.showToast({
|
|
|
@@ -180,6 +220,43 @@
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
+ getInfo2(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ API_water.meterHourConsumption({
|
|
|
+ meterId:this.meterId
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.info=response.data
|
|
|
+
|
|
|
+ this.info.hourKwhList=[]
|
|
|
+ for(var i in this.info.hourMap){
|
|
|
+ this.info.hourKwhList.push({
|
|
|
+ hour:i,
|
|
|
+ obj:this.info.hourMap[i]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(this.myChart){
|
|
|
+ this.myChart.clear();
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.info&&this.info.hourKwhList&&this.info.hourKwhList.length){
|
|
|
+ this.$nextTick(()=>{
|
|
|
+
|
|
|
+ this.getBarChartsWater()
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
getInfo(){
|
|
|
uni.showLoading({
|
|
|
title: "加载中",
|
|
|
@@ -208,6 +285,131 @@
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
+ getBarChartsWater() {
|
|
|
+ if (!this.myChart) {
|
|
|
+ this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
|
|
|
+ // width: uni.upx2px(700),
|
|
|
+ height: uni.upx2px(480)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ var data1 = [];
|
|
|
+ var data2 = [];
|
|
|
+ var data3 = [];
|
|
|
+ var data4 = [];
|
|
|
+ var list=this.info.hourKwhList;
|
|
|
+
|
|
|
+ for (var i in list) {
|
|
|
+ var obj=list[i]
|
|
|
+ data1.push(obj.hour+'时')
|
|
|
+ data2.push(obj.obj.consumptionAverage)
|
|
|
+ data3.push(obj.obj.workConsumptionAverage)
|
|
|
+ data4.push(obj.obj.restConsumptionAverage)
|
|
|
+ // sumQuantity+=list[i]
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 40,
|
|
|
+ left: 5,
|
|
|
+ right: 10,
|
|
|
+ bottom: 20,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data1,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 40,
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '全部',
|
|
|
+ data: data2,
|
|
|
+ type: 'bar',
|
|
|
+ barGap:"0%",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ color: '#5C7BD9'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#387aea' // 设置所有柱子的颜色为'#4FE773'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ color: '#5C7BD9'
|
|
|
+ },
|
|
|
+ name: '工作日',
|
|
|
+ data: data3,
|
|
|
+ type: 'bar',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#8db7f4' // 设置所有柱子的颜色为'#4FE773'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ color: '#5C7BD9'
|
|
|
+ },
|
|
|
+ name: '非工作日',
|
|
|
+ data: data4,
|
|
|
+ type: 'bar',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#6a9df1' // 设置所有柱子的颜色为'#4FE773'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ console.log(option)
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ // 监听点击事件
|
|
|
+ this.myChart.off('click',this.clickbar);
|
|
|
+
|
|
|
+ // 监听点击事件
|
|
|
+ this.myChart.on('click',this.clickbar);
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ clickbar(params) {
|
|
|
+ if (this.meterType==1&¶ms.seriesType === 'bar') {
|
|
|
+ // 这里是点击柱状图时的回调函数
|
|
|
+ // params 包含了被点击的柱子的所有信息
|
|
|
+ console.log(params); // 打印被点击的柱子的信息
|
|
|
+
|
|
|
+ // 你可以在这里添加你想要执行的逻辑，比如跳转到另一个页面，显示弹窗等
|
|
|
+ console.log('你点击了柱子：' + params.name + '，值为：' + params.value);
|
|
|
+ uni.navigateTo({
|
|
|
+ url:"/pages/platformRevenueStatistics/daypartingStatisticsWater?value="+params.value
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
getBarCharts() {
|
|
|
if (!this.myChart) {
|
|
|
this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
|
|
|
@@ -277,23 +479,66 @@
|
|
|
},
|
|
|
selector1confirm(e) {
|
|
|
console.log(e)
|
|
|
+
|
|
|
var index = [e[0].i,e[1].i,e[2].i]
|
|
|
-
|
|
|
+ var eObj={}
|
|
|
if(this.waterList&&this.waterList.length){
|
|
|
index = [e[0].i,e[1].i,e[2].i,e[3].i]
|
|
|
- this.tabsFrom.show1Text =e[3].label
|
|
|
- this.meterId = e[3].value
|
|
|
+
|
|
|
+
|
|
|
+ eObj=e[3]
|
|
|
this.meterType = e[0].i
|
|
|
}else{
|
|
|
- this.tabsFrom.show1Text =e[2].label
|
|
|
- this.meterId = e[2].value
|
|
|
+ eObj=e[2]
|
|
|
+
|
|
|
}
|
|
|
- this.tabsFrom.show1Index = index
|
|
|
-
|
|
|
- if(this.meterType==1){
|
|
|
- this.getInfo()
|
|
|
+ if(eObj.value){
|
|
|
+ this.tabsFrom.show1Text =eObj.label
|
|
|
+ this.meterId = eObj.value
|
|
|
+
|
|
|
+ this.tabsFrom.show1Index = index
|
|
|
+
|
|
|
+ if(this.meterType==0){
|
|
|
+ this.getInfo()
|
|
|
+ }else{
|
|
|
+ this.getInfo2()
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title: "未选择设备",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+ },
|
|
|
+ getHaveMeterListWater(){
|
|
|
+ var data = {
|
|
|
+
|
|
|
+ queryForm:"property",
|
|
|
+
|
|
|
+ };
|
|
|
+ API_water.haveMeterList(data).then((response) => {
|
|
|
+
|
|
|
+ //var MeterList=response.data.switchRecordList.data
|
|
|
+ //this.meterList = response.data.remoteReadingMeterList;
|
|
|
+ var meterList = response.data.waterMeterList;
|
|
|
+ meterList=meterList.sort((item1,item2)=>{
|
|
|
+ if(item1.sortNo==item2.sortNo){
|
|
|
+ return item1.level>item2.level?1:-1
|
|
|
+ }
|
|
|
+ return item1.sortNo>item2.sortNo?1:-1
|
|
|
+
|
|
|
+ })
|
|
|
+ this.waterList=meterList
|
|
|
+ this.callback2()
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
getHaveMeterList(){
|
|
|
|
|
|
@@ -315,6 +560,7 @@
|
|
|
|
|
|
})
|
|
|
this.meterList=meterList
|
|
|
+
|
|
|
this.callback()
|
|
|
|
|
|
}).catch(error => {
|
zhengkaixin