jp-housekeep-manage/pages/platformRevenueStatistics/electricityConsumptionAnalysis.vue

<template>
	<view>
		<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"
		 @columnChange="columnChange"
		 :title="title"
			@confirm="selector1confirm"></u-select>
		<view class="background">
			<!-- 选择电表 -->
			<view class="unit">
				<view class="title">
					选择查询设备
				</view>
				<view class="value" @click="tabsFrom.show1=true">
					<view class="text">
						{{tabsFrom.show1Text}}
					</view>
					<view class="icon">
						<u-icon name="arrow-down" color="#999999" size="32" ></u-icon>
					</view>
				</view>
			</view>
			
			
				
			<view class="main" v-show="info&&info.hourKwhList&&info.hourKwhList.length">
				<view class="title">
					<view class="icon">
						
					</view>
					<view class="text" v-if="meterType==0">
						各时段平均用电量 (度)
					</view>
					<view class="text" v-if="meterType==1">
						各时段平均用水量 (m³)
						
						
						
					</view>
					<view class="check-all" @click="clickbar">
						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
					</view>
				
				</view>
				<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;">
					
					</view>
				</view>
				
				<!-- 备注 -->
				<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;"
				border-color="#CFD2D5">已经到底了</u-divider>
			</view>
			<view class="main2" v-show="info&&info.hourKwhList&&info.hourKwhList.length==0">
				<u-divider  :isnone="true"  nonetext="暂无数据" style="margin-top: 20rpx;"
				border-color="#CFD2D5">已经到底了</u-divider>
			</view>
		</view>
		
	</view>
</template>

<script>
		import * as echarts from 'echarts';
		import * as API_energyManage from '@/apis/pagejs/energyManage.js'
		import * as API_water from '@/apis/pagejs/water.js'
		
	import * as API from '@/apis/pagejs/meterTimer.js'
	
	export default {
		data() {
			return {
				timeShow:false,
				title:"",
				meterId :"",
				info:{},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				tabsFrom: {
					show1: false,
					show1Index: [],
					show2Index: '',
					show2: false,
					show1Text: "选择设备",
					show2Text: "全部时间",
					selector1: [
					]
				},
				meterType:0,//0电表1水表
				myChart: null,
				companyList:null,
				
				meterList:null,
				waterList:null,
				mainList:null,
			}
		},
		onLoad(op) {
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			this.getHaveMeterList()
			this.getCompanyInfoList()
		},
		methods: {
			columnChange(e){
				if(this.waterList&&this.waterList.length){
					this.title=e[3].label
				}else{
					this.title=e[2].label
				}
				
			},
			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:[
							...this.companyList
						]
					},
					{
						id:"2",name:"水表",i:1,childList:[
							...companyList
						]
					}
				];
				
				
				
			},
			callback(){
				if(this.companyList&&this.meterList){
					uni.hideLoading();
					
				}
				if(this.companyList.length&&this.meterList.length){
					
					this.companyList.forEach((item)=>{
						item.childList.forEach((info)=>{
							info.childList=[]
						})
					})
					this.meterList.forEach((meter)=>{
						
						this.companyList.forEach((item)=>{
							item.childList.forEach((info)=>{
								if(meter.parkId==info.id){
									info.childList.push(meter)
								}
							})
						})
					})
					
					this.mainList=[...this.companyList]
					this.getHaveMeterListWater()
				}
				
			},
			getCompanyInfoList() {
				
				API_energyManage.deviceCompanyList().then((response) => {
					//uni.hideLoading();
					var list = response.data.companyInfoList;
					this.companyList=list
					 
					this.callback()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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: "加载中",
					mask: true,
				})
				
				API.meterHourKwhList({
					meterId:this.meterId
				}).then((response) => {
					uni.hideLoading();
					this.info=response.data
					if(this.myChart){
						this.myChart.clear();
					}
					
					if(this.info&&this.info.hourKwhList&&this.info.hourKwhList.length){
						this.$nextTick(()=>{
							this.getBarCharts()
						})
						
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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() {
			   uni.navigateTo({
			   	url:`/pages/platformRevenueStatistics/daypartingStatisticsWater?meterId=${this.meterId}&title=${this.tabsFrom.show1Text}&queryStartDate=${this.info.hourStartTime}&queryEndDate=${this.info.hourEndTime}`
			   }) 
			},
			getBarCharts() {
				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
						// width: uni.upx2px(700),
						height: uni.upx2px(480)
					});
				}
				var data1 = [];
				var data2 = [];
				var list=this.info.hourKwhList;
				for (var i in list) {
					var obj=list[i]
					data1.push(obj.hour+'时')
					data2.push(obj.kwh)
					// sumQuantity+=list[i]
				
				}
				
				
				
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
				
					},
					grid: {
						top: 40,
						left: 5,
						right: 10,
						bottom: 20,
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: data1,
				
					},
					yAxis: {
						type: 'value',
				
					},
					series: [{
						name: '合计',
						data: data2,
						type: 'bar',
						 markPoint: {  
							
						            data: [  
						                {type: 'max', name: '最大值'},  
						                {type: 'min', name: '最小值'}  
						                // 或者使用具体的坐标（如果数据中有多个相同的最大值或最小值）  
						                // {coord: [maxIndex, maxVal], name: '最大值'},  
						                // {coord: [minIndex, minVal], name: '最小值'}  
						            ]  
						        }  
						
					}]
				}
				console.log(option)
				this.myChart.setOption(option);
				
				
				
			},
			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]
					 
					 
					 eObj=e[3]
					 this.meterType = e[0].i
				 }else{
					 eObj=e[2]
					
				 }
				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(){
				
				var data = {
				
					queryForm:"property",
					
				};
				API.haveMeterList(data).then((response) => {
					
					//var MeterList=response.data.switchRecordList.data
					//this.meterList = response.data.remoteReadingMeterList;
					var meterList = response.data.remoteReadingMeterList;
					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.meterList=meterList
					
					this.callback()
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style>
	page{
		padding-bottom: 100px;
	}
</style>

<style lang="scss" scoped>
	.background {
		background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
		padding: 32rpx 0;
		height: 720rpx;

		.unit {
			background-color: #fff;
			margin: 0 32rpx;
			border-radius: 8px;
			padding: 32rpx;

			.title {
				color: rgba(153, 153, 153, 1);
			}

			.value {
				color: rgba(51, 51, 51, 1);
				font-size: 40rpx;
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: bold;
			}
		}
	  .main2{
	  		  background-color: #fff;
	  		  border-radius: 8px;
	  		  padding: 32rpx ;
	  		  margin: 32rpx;
		}
	  .main{
		  background-color: #fff;
		  border-radius: 8px;
		  padding: 32rpx ;
		  margin: 32rpx;
		  .tips{
			
			  display: flex;
			 justify-content: space-around;
			  color: rgba(119,119,119,1);
			  font-size: 24rpx;


		  }
		  .title{
			  display: flex;
			      align-items: center;
			      
			      margin-bottom: 20px;
			  .icon{
				      width: 36rpx;
				      height: 36rpx;
				      background-color: #b6d4ff;
				      border: 6px solid #1677ff;
				      border-radius: 100px;
			  }
			  .text{
				      color: #333333;
				      font-size: 36rpx;
				      margin-left: 16rpx;
				      font-weight: bold;
			  }
			  .date{
				  margin-left: auto;
				      border: 1px solid #bbbbbb;
				      border-radius: 4px;
				      padding: 4px;
				      font-size: 12px;
					  text{
						  margin-right: 8rpx;
					  }
			  }
		  }
		  // 图标
		  .chart{
			  img{
				  width: 100%;
				  height: 440rpx;
			  }
		  }
	  }
      
	  .total{
		  color: rgba(51,51,51,1);
		  text-align: center;
		  font-weight: bold;
	  }
	

		// 备注
		.remark {
			padding: 40rpx 24rpx;
			margin-top: 24rpx;
			border-radius: 8px;
			background-color: rgba(242, 244, 246, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			line-height: 34rpx;

		}
	}
	.check-all {
		margin-left: auto;
		color: rgba(131, 131, 131, 1);
		font-size: 24rpx;
	}
</style>