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

<template>
	<view>
		<u-navbar :title="title" title-color="#101010"></u-navbar>
		<view class="tabs">
			<u-picker v-model="tabsFrom.show1" :default-selector="[tabsFrom.show1Index]" mode="selector"
				:range="tabsFrom.selector1" range-key="label" @confirm="selector1confirm"></u-picker>
			
			
				
			<u-calendar v-model="tabsFrom.show2" mode="range" @change="selector2confirm">
				</u-calendar>
				
			<view class="tabsItem" @click="tabsFrom.show2=!tabsFrom.show2">
			{{formData.queryStartDate}}至{{formData.queryEndDate}}
			<u-icon
					name="arrow-up" v-if="tabsFrom.show2"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
					
		
			<view  class="tabsItem" @click="tabsFrom.show1=!tabsFrom.show1">
			{{formData.timeNode}}时 <u-icon
					name="arrow-up" v-if="tabsFrom.show1"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
					
			
			
		</view>
		
		<view class="main">
			<view class="title">
				<view class="icon">
					
				</view>
			
				<view class="text">
					各时段平均用水量 (m³)
				</view>
			
			</view>
			
			<!-- 图表 -->
			<view class="chart">
				<view id="barEcharts" style="min-height:740rpx;">
				
				</view>
			</view>
			
			 
		</view>
		
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import * as API_water from '@/apis/pagejs/water.js'
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				title:"",
				formData:{
					meterId:"",
					queryStartDate:"",
					queryEndDate:"",
					timeNode:"",
				},
				info:{},
				data:{},
				myChart:null,
				
				tabsFrom: {
					show1: false,
					show1Index: 0,
					show2Index: '',
					show2: false,
					show1Text: "全部类型",
					show2Text: "全部时间",
					selector1: [
					]
				},
				
			}
		},
		onLoad(op) {
			this.formData.meterId=op.meterId
			this.formData.queryStartDate=op.queryStartDate
			this.formData.queryEndDate=op.queryEndDate
			this.formData.timeNode=op.timeNode
			this.title=op.title
			this.getData()
			
		},
		methods: {
			selector2confirm(e){
				console.log(e)
				this.formData.queryStartDate=e.startDate
				this.formData.queryEndDate=e.endDate
				this.getInfo()
			},
			selector1confirm(e){
				console.log(e)
				this.tabsFrom.show1Index=e
				this.formData.timeNode=this.tabsFrom.selector1[e].value
				this.getInfo()
			},
			getData(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API_water.meterHourConsumption({
					meterId:this.formData.meterId
				}).then((response) => {
					uni.hideLoading();
					this.data=response.data
					this.tabsFrom.selector1=[]
				
					for(var i in this.data.hourMap ){
						this.tabsFrom.selector1.push({
							label:i+'时',
							value:i
						})
						if(!this.formData.timeNode){
							
							this.formData.timeNode=i
						}
						
					}
					this.getInfo()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getBarChartsWater(){
				
				var data1 = [];
				var data2 = [];
				var list=this.info.dayMap;
				for (var i in list) {
					var obj=list[i]
					data1.push(i)
					data2.push(obj)
				}
				
				if (!this.myChart) {
					//this.myChart = echarts.init(document.getElementById('barEcharts'));
				
					this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
						
						height: uni.upx2px(data2.length*80+100)
					});
				}
				this.myChart.resize({
					height:uni.upx2px(data2.length*80+100)
				})
				
				
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
				
					},
					
					grid: {
						top: 10,
						left: 0,
						right: 30,
						bottom: 20,
						containLabel: true
					},
					xAxis: {
						type: 'value',
						data: data1,
						
				
					},
					yAxis: {
						type: 'category',
						data: data1,
						axisLabel:  {
							rotate: 20,
							interval: 0,
							textStyle: {
								color: "#333"
							}
						},
					},
					series: [{
						name: '平均用水量',
						data: data2,
						type: 'bar',
						
						label: {
							show: true,
							position: 'right',
							color: '#5C7BD9'
						},
						 itemStyle: {  
						 			color: '#387aea' // 设置所有柱子的颜色为'#4FE773'  
						 		} 
					}
					]
				}
				console.log(option)
				this.myChart.setOption(option);
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API_water.meterHourConsumptionDetails(this.formData).then((response) => {
					uni.hideLoading();
					this.info=response.data
					
					if(this.myChart){
						this.myChart.clear();
					}
					
					this.$nextTick(()=>{
						
						this.getBarChartsWater()
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style  lang="scss" scoped>
// 标签
	.tabs {

		height: 96rpx;
		line-height: 96rpx;
		background-color: #fff;
		border-top: 1px solid rgba(241, 241, 241, 1);
		display: flex;
		justify-content: space-around;

	}
	.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;
				  }
			  }
	}
</style>