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="companyList" 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">
						各时段平均用电量 (度)
					</view>
				
				</view>
				<view class="tips">
					<view>{{info.timeSlot}}</view>
					<view>日平均用电量:{{info.dayKwh}}度</view>
				</view>
				<!-- 图表 -->
				<view class="chart">
					<view id="barEcharts" style="min-height:440rpx;">
					
					</view>
				</view>
				
				<!-- 备注 -->
				<view class="remark">
					<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 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: [
					]
				},
				myChart: null,
				companyList:null,
				meterList:null,
			}
		},
		onLoad(op) {
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			this.getHaveMeterList()
			this.getCompanyInfoList()
		},
		methods: {
			columnChange(e){
				this.title=e[2].label
			},
			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)
								}
							})
						})
					})
					
					
				}
			},
			getCompanyInfoList() {
				
				API_energyManage.deviceCompanyList().then((response) => {
					//uni.hideLoading();
					var list = response.data.companyInfoList;
					this.companyList=response.data.companyInfoList;
					this.callback()
				}).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"
					})
				})
			},
			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]
				 this.tabsFrom.show1Index = index
				
				 this.tabsFrom.show1Text =e[2].label
				this.meterId = e[2].value
				 this.getInfo()
			},
			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;

		}
	}
</style>