各时段平均用水，多日期

pages/platformRevenueStatistics/daypartingStatisticsWater.vue

@@ -1,5 +1,50 @@
 <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>
@@ -10,6 +55,15 @@
 	export default {
 		data() {
 			return {
+				params: {
+					year: true,
+					month: true,
+					day: true,
+					hour: false,
+					minute: false,
+					second: false
+				},
+				title:"",
 				formData:{
 					meterId:"",
 					queryStartDate:"",
@@ -17,8 +71,20 @@
 					timeNode:"",
 				},
 				info:{},
+				data:{},
 				myChart:null,
 				
+				tabsFrom: {
+					show1: false,
+					show1Index: 0,
+					show2Index: '',
+					show2: false,
+					show1Text: "全部类型",
+					show2Text: "全部时间",
+					selector1: [
+					]
+				},
+				
 			}
 		},
 		onLoad(op) {
@@ -26,11 +92,131 @@
 			this.formData.queryStartDate=op.queryStartDate
 			this.formData.queryEndDate=op.queryEndDate
 			this.formData.timeNode=op.timeNode
+			this.title=op.title
+			this.getData()
 			
-			this.getInfo()
 		},
 		methods: {
-			getBarChartsWater(){},
+			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].label
+				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: "加载中",
@@ -60,6 +246,66 @@
 	}
 </script>
 
-<style>
-
+<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>

pages/platformRevenueStatistics/electricityConsumptionAnalysis.vue

@@ -35,6 +35,12 @@
 					</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>
@@ -300,7 +306,7 @@
 				
 				for (var i in list) {
 					var obj=list[i]
-					data1.push(obj.hour+'时')
+					data1.push(obj.hour)
 					data2.push(obj.obj.consumptionAverage)
 					data3.push(obj.obj.workConsumptionAverage)
 					data4.push(obj.obj.restConsumptionAverage)
@@ -388,27 +394,18 @@
 				}
 				console.log(option)
 				this.myChart.setOption(option);
-				// 监听点击事件
-				this.myChart.off('click',this.clickbar);
+				// // 监听点击事件
+				// this.myChart.off('click',this.clickbar);
 				
-				// 监听点击事件  
-				this.myChart.on('click',this.clickbar);
+				// // 监听点击事件  
+				// this.myChart.on('click',this.clickbar);
 				
 				
 			},
-			clickbar(params) {
-			    if (0&&this.meterType==1&&params.seriesType === 'bar') {  
-			        // 这里是点击柱状图时的回调函数  
-			        // params 包含了被点击的柱子的所有信息  
-			        console.log(params); // 打印被点击的柱子的信息  
-			          
-			        // 你可以在这里添加你想要执行的逻辑，比如跳转到另一个页面，显示弹窗等  
-			        console.log('你点击了柱子：' + params.name + '，值为：' + params.value); 
-					uni.navigateTo({
-						url:`/pages/platformRevenueStatistics/daypartingStatisticsWater?meterId=${this.meterId}&queryStartDate=${this.info.hourStartTime}&queryEndDate=${this.info.hourEndTime}&timeNode=`+params.value
-					})
-					 
-			    }  
+			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) {
@@ -618,6 +615,7 @@
 		  padding: 32rpx ;
 		  margin: 32rpx;
 		  .tips{
+			
 			  display: flex;
 			 justify-content: space-around;
 			  color: rgba(119,119,119,1);
@@ -682,4 +680,9 @@
 
 		}
 	}
+	.check-all {
+		margin-left: auto;
+		color: rgba(131, 131, 131, 1);
+		font-size: 24rpx;
+	}
 </style>