用电统计

apis/pagejs/electricityMeter.js

@@ -1,5 +1,35 @@
 import request from '@/apis/utils/request'
 
+//用电详细-计费规则
+export function billingRules(data) {
+	var url='/mobile/ElectricityMeter/billingRules';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+
+//用电详细
+export function electricityConsumptionDetails(data) {
+	var url='/mobile/ElectricityMeter/electricityConsumptionDetails';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+
+//用电统计
+export function electricityConsumptionStatistics(data) {
+	var url='/mobile/ElectricityMeter/electricityConsumptionStatistics';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+
 //能源中心电表修改信息
 export function updateMeter(data) {
 	var url='/mobile/employeeElectricityMeter/updateMeter';

pages/equipmentDataMonitoring/billingRules.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<u-navbar title="计费规则"  title-color="#101010" ></u-navbar>
+		<u-navbar title="计费规则" title-color="#101010"></u-navbar>
 		<view class="background">
 			<!-- 单位 -->
 			<view class="unit">
@@ -13,16 +13,17 @@
 			</view>
 			<!-- 规则 -->
 			<view class="rules">
-				
+
 				<view class="content">
 					<view class="rule1">
 						<view class="title">
 							用电分类
 						</view>
-						<view class="value">
-							高峰用电
+						<view class="value" v-for="(item,index) in groupPriceList" :key="index"
+							:class="item.electricPeriodPriceList.length>1 ? '' : 'title3'">
+							{{item.name}}
 						</view>
-						<view class="value">
+						<!-- <view class="value">
 							谷段用电
 						</view>
 						<view class="value title3">
@@ -30,16 +31,17 @@
 						</view>
 						<view class="value">
 							尖峰用电
-						</view>
+						</view> -->
 					</view>
 					<view class="rule2">
 						<view class="title">
 							用电时段
 						</view>
-						<view class="value">
-							09:00-15:00
+						<view class="value" v-for="(item,index) in groupPriceList" :key="index"
+							:class="item.electricPeriodPriceList.length>1 ? '' : 'value3'">
+							<span v-for="e in item.electricPeriodPriceList">{{e.startTime}}-{{e.endTime}}</span>
 						</view>
-						<view class="value">
+						<!-- <view class="value">
 							23:00-07:00
 						</view>
 						<view class="value value3">
@@ -49,14 +51,15 @@
 						</view>
 						<view class="value">
 							20:00-22:00
-						</view>
+						</view> -->
 					</view>
 					<view class="rule3">
 						<view class="title">
 							电度电价
 						</view>
-						<view class="value">
-							0.99元/度
+						<view class="value" v-for="(item,index) in groupPriceList" :key="index"
+							:class="item.electricPeriodPriceList.length>1 ? '' : 'value4'">
+							<span v-for="e in item.electricPeriodPriceList">{{e.price}}元/度</span>
 						</view>
 						<view class="value">
 							0.37元/度
@@ -70,143 +73,195 @@
 					</view>
 				</view>
 				<!-- 备注 -->
-				<view class="remark">
+				<view class="remark" v-if="tenantContract!=null">
 					<view class="title">
 						备注说明：
 					</view>
 					<view class="value">
 						<view class="item">1.计费规则仅展示租赁合同中的计算方式，最终扣费金额以账单中的实际扣费金额为准。
 
-
-
 						</view>
-						
-						<view class="item">
-2.本次租约有效期：2024年2月1日-2024年7月31日
+						<view class="item" v-if="startTime!=null && endTime!=null">
+							2.本次租约有效期：{{startTime}}-{{endTime}}
 						</view>
 					</view>
 				</view>
 			</view>
 		</view>
 		
-		
-		
-		
 	</view>
 </template>
 
 <script>
-	
+	import * as API_electricityMeter from '@/apis/pagejs/electricityMeter.js'
+	import {
+		parseUnixTime,
+		beforeTimeStamp,
+		getWeek
+	} from '@/apis/utils'
 	
 	export default {
 		data() {
 			return {
-				
-				
-				
+				groupPriceList: [],
+				queryDate: '',
+				meterId: '',
+				name: '',
+				tenantContract: null,
+				startTime: null,
+				endTime: null
+			}
+		},
+		onLoad(op) {
+			if(op.id) {
+				this.meterId = op.id;
+				this.queryDate = op.queryDate;
+				this.getBillingRules();
 			}
 		},
-		
 		methods: {
-			
-			
+			getBillingRules() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				API_electricityMeter.billingRules({
+					meterId: this.meterId,
+					queryDate: this.queryDate+'-01'
+				}).then((res) => {
+					uni.hideLoading();
+					this.name = res.data.name;
+					this.groupPriceList = res.data.groupPriceList;
+					this.tenantContract = res.data.tenantContract;
+					var startTime = res.data.tenantContract.startTime;
+					var endTime = res.data.tenantContract.endTime;
+					if(startTime != null) {
+						this.startTime = startTime.slice(0,4)+'年'+parseInt(startTime.slice(5,7))+'月'+parseInt(startTime.slice(8))+'日';
+					}
+					if(endTime != null) {
+						this.endTime = endTime.slice(0,4)+'年'+parseInt(endTime.slice(5,7))+'月'+parseInt(endTime.slice(8))+'日';
+					}
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.background{
-		background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(22,119,255,0) 100%);
+	.background {
+		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(22, 119, 255, 0) 100%);
 		height: 720rpx;
 		padding-top: 24rpx;
-		.unit{
+
+		.unit {
 			background-color: #fff;
-			
+
 			border-radius: 8px;
 			padding: 32rpx;
 			margin: 0 32rpx;
-			.title{
-				color: rgba(153,153,153,1);
+
+			.title {
+				color: rgba(153, 153, 153, 1);
 			}
-			.value{
-				color: rgba(51,51,51,1);
+
+			.value {
+				color: rgba(51, 51, 51, 1);
 				font-size: 40rpx;
 				margin-top: 16rpx;
 				font-weight: bold;
 			}
 		}
 	}
-  // 规则
-  .rules{
-	  margin: 24rpx 32rpx 40rpx;
-	  background-color: #fff;
-	  padding-bottom: 24rpx;
-	  border-radius: 8px;
-	 
-	  .content{
-		  padding:24rpx;
-		  display: flex;
-		  text-align: center;
-		  .rule1{
-			  width: 200rpx;
-			  .title{
-				  line-height: 96rpx;
-				  color: rgba(51,51,51,1);
-				  font-size: 32rpx;
-				  font-weight: bold;
-			  }
-			  .value{
-				  color: rgba(51,51,51,1);
-				  line-height: 96rpx;
-				  font-weight: bold;
-			  }
-		  }
-		  .rule2,.rule3{
-			  width: 200rpx;
-			  
-			  .title{
-				  color: rgba(51,51,51,1);
-				  font-size: 32rpx;
-				  line-height: 96rpx;
-				  font-weight: bold;
-			  }
-			  .value{
-				  color: rgba(119,119,119,1);
-				  line-height: 96rpx;
-			  }
-		  }
-		  .title3{
-			  height: 144rpx;
-			  line-height: 144rpx !important;	
-		  }
-		  .value3{
-			  height: 144rpx;
-			  p{
-				  line-height: 48rpx;
-			  }
-		  }
-		  .value4{
-			  height: 144rpx;
-			  line-height: 144rpx !important;
-		  }
-		  
-	  }
-	  // 备注
-	  .remark{
-		  padding: 40rpx 32rpx;
-		  margin: 0 24rpx;
-		  border-radius: 8px;
-		  background-color: rgba(242,244,246,1);
-		  color: rgba(16,16,16,1);
-		  font-size: 24rpx;
-		  line-height: 34rpx;
-		  .value{
-			  margin-top: 16rpx;
-		  }
-		  .item{
-			  margin-bottom: 8rpx;
-			  
-		  }
-	  }
-  }
-</style>
+
+	// 规则
+	.rules {
+		margin: 24rpx 32rpx 40rpx;
+		background-color: #fff;
+		padding-bottom: 24rpx;
+		border-radius: 8px;
+
+		.content {
+			padding: 24rpx;
+			display: flex;
+			text-align: center;
+
+			.rule1 {
+				width: 200rpx;
+
+				.title {
+					line-height: 96rpx;
+					color: rgba(51, 51, 51, 1);
+					font-size: 32rpx;
+					font-weight: bold;
+				}
+
+				.value {
+					color: rgba(51, 51, 51, 1);
+					line-height: 96rpx;
+					font-weight: bold;
+				}
+			}
+
+			.rule2,
+			.rule3 {
+				width: 200rpx;
+
+				.title {
+					color: rgba(51, 51, 51, 1);
+					font-size: 32rpx;
+					line-height: 96rpx;
+					font-weight: bold;
+				}
+
+				.value {
+					color: rgba(119, 119, 119, 1);
+					line-height: 96rpx;
+				}
+			}
+
+			.title3 {
+				height: 144rpx;
+				line-height: 144rpx !important;
+			}
+
+			.value3 {
+				height: 144rpx;
+
+				p {
+					line-height: 48rpx;
+				}
+			}
+
+			.value4 {
+				height: 144rpx;
+				line-height: 144rpx !important;
+			}
+
+		}
+
+		// 备注
+		.remark {
+			padding: 40rpx 32rpx;
+			margin: 0 24rpx;
+			border-radius: 8px;
+			background-color: rgba(242, 244, 246, 1);
+			color: rgba(16, 16, 16, 1);
+			font-size: 24rpx;
+			line-height: 34rpx;
+
+			.value {
+				margin-top: 16rpx;
+			}
+
+			.item {
+				margin-bottom: 8rpx;
+
+			}
+		}
+	}
+</style>

pages/equipmentDataMonitoring/electricityDetails.vue

@@ -1,8 +1,8 @@
 <template>
 	<view>
-		<u-navbar title="用电详情"  title-color="#101010" >
-			
-			<view class="slot" slot="right" >
+		<u-navbar title="用电详情" title-color="#101010">
+
+			<view class="slot" slot="right" @click="toBillingRules">
 				计费规则
 			</view>
 		</u-navbar>
@@ -10,7 +10,7 @@
 			<!-- 用电记录 -->
 			<view class="details">
 				<view class="headline">
-					1月1日用电记录
+					{{month}}月用电记录
 				</view>
 				<view class="infos">
 					<view class="infos-item">
@@ -18,7 +18,7 @@
 							用电量
 						</view>
 						<view class="item-value">
-							100.00度
+							{{kwhMap.kwh}}度
 						</view>
 					</view>
 					<view class="infos-item">
@@ -26,49 +26,37 @@
 							电费
 						</view>
 						<view class="item-value">
-							94.5元
+							{{kwhMap.fee}}元
 						</view>
 					</view>
 					<view class="infos-item">
 						<view class="item-title">
 							峰时用电 (1.28元/度)
-						
-
 
 						</view>
 						<view class="item-value">
-							
-							
-							20.00度 25.6元
-							
-						
-					
+							{{kwhMap.fengKwh}}度 {{kwhMap.fengFee}}元
 
 						</view>
 					</view>
 					<view class="infos-item">
 						<view class="item-title">
-							
 							谷时用电 (0.65元/度)
-							
-							
+
 						</view>
 						<view class="item-value">
-							40.00度 26元
-							
-							
+							{{kwhMap.guKwh}}度 {{kwhMap.guFee}}元
+
 						</view>
 					</view>
 					<view class="infos-item">
 						<view class="item-title">
 							平时用电 (0.98元/度)
-							
-							
+
 						</view>
 						<view class="item-value">
-							30.00度 29.4元
-							
-							
+							{{kwhMap.pingKwh}}度 {{kwhMap.pingFee}}元
+
 						</view>
 					</view>
 					<view class="infos-item">
@@ -76,118 +64,238 @@
 							尖时用电 (1.36元/度)
 						</view>
 						<view class="item-value">
-							10.00度 13.6元
+							{{kwhMap.jianKwh}}度 {{kwhMap.jianFee}}元
 						</view>
 					</view>
-					<view class="infos-item" >
+					<view class="infos-item">
 						<view class="item-title">
-							用户信息
+							用户
 						</view>
 						<view class="item-value">
-							物业公司
+							{{name}}
 						</view>
 					</view>
-					<view class="infos-item">
+					<!-- <view class="infos-item">
 						<view class="item-title">
 							户号
 						</view>
 						<view class="item-value">
 							00101010
 						</view>
-					</view>
+					</view> -->
 				</view>
 				<!-- 折线图 -->
 				<view class="chat-box">
 					<view class="title">
-						1月1日 用电量趋势
+						{{month}}月 用电量趋势
 					</view>
 					<view class="chat">
-						<image src="@/assets/img/chart@1x.png" mode=""></image>
+						<view id="barEcharts" style="min-height:322rpx;">
+
+						</view>
+						<!-- <image src="@/assets/img/chart@1x.png" mode=""></image> -->
 					</view>
 				</view>
 			</view>
-			<button class="back">返回</button>
+			<button class="back" @click="toBack">返回</button>
 		</view>
-		
+
 	</view>
 </template>
 
 <script>
+	import * as API_electricityMeter from '@/apis/pagejs/electricityMeter.js'
+	import * as echarts from 'echarts';
+
 	export default {
 		data() {
 			return {
-				
+				myChart: null,
+				queryDate: '',
+				meterId: '',
+				graphMap: {},
+				kwhMap: {},
+				month: '',
+				name: ''
+			}
+		},
+		onLoad(op) {
+			if(op.id) {
+				this.meterId = op.id;
+				this.queryDate = op.queryDate;
+				this.month = parseInt(this.queryDate.slice(5));
+				this.getElectricityConsumptionDetails();
 			}
 		},
 		methods: {
-			
+			getElectricityConsumptionDetails() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				API_electricityMeter.electricityConsumptionDetails({
+					meterId: this.meterId,
+					queryDate: this.queryDate+'-01'
+				}).then((res) => {
+					uni.hideLoading();
+					this.graphMap = res.data.graphMap;
+					this.kwhMap = res.data.kwhMap;
+					this.name = res.data.name;
+					this.getBarCharts(this.graphMap);
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
+			getBarCharts(list) {
+				if (!this.myChart) {
+					this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
+						width: uni.upx2px(666),
+						height: uni.upx2px(322)
+					});
+				}
+				this.myChart.clear();
+
+				var data1 = [];
+				var data2 = [];
+				for (var i in list) {
+					data1.push(i+'日');
+					data2.push(list[i].kwh);
+				}
+
+				var axisLabel = {
+					rotate: 40,
+					interval: 3,
+					textStyle: {
+						color: "#333"
+					}
+				}
+
+				var headitemby = "";
+				var showkey = "";
+				var option = {
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow'
+						}
+					},
+					grid: {
+						top: '6%',
+						left: '3%',
+						right: '8%',
+						bottom: '8%',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: data1,
+						axisLabel: axisLabel,
+					},
+					yAxis: {
+						type: 'value',
+
+					},
+					series: [{
+						name: '电量',
+						data: data2,
+						type: 'bar',
+						// label: {
+						// 	show: true,
+						// 	position: 'top',
+						// 	color: '#5C7BD9'
+						// }
+					}]
+				}
+
+				this.myChart.setOption(option);
+			},
+			toBack() {
+				uni.navigateBack();
+			},
+			toBillingRules() {
+				var date = this.queryDate;
+				uni.navigateTo({
+					url: '/pages/equipmentDataMonitoring/billingRules?id='+this.meterId+'&queryDate='+date
+				})
+			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.background{
+	.background {
 		height: 400rpx;
 		padding-top: 32rpx;
-		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
-	    
+		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
+
 		// 用电记录
-		.details{
+		.details {
 
 			background-color: #fff;
 			border-radius: 8px;
 			padding: 32rpx;
 			margin: 0rpx 32rpx;
-			
-			.headline{
-				color: rgb(16,16,16);
+
+			.headline {
+				color: rgb(16, 16, 16);
 				font-size: 40rpx;
 				text-align: center;
 			}
-			.infos{
+
+			.infos {
 				margin-top: 32rpx;
-				border-bottom: 1px solid rgba(241,241,241,1);
-			.infos-item{
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				margin-bottom: 24rpx;
-				.item-title{
-					color: rgba(51,51,51,1);
-				}
-				.item-value{
-					color: rgba(16,16,16,1);
+				border-bottom: 1px solid rgba(241, 241, 241, 1);
+
+				.infos-item {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-bottom: 24rpx;
+
+					.item-title {
+						color: rgba(51, 51, 51, 1);
+					}
+
+					.item-value {
+						color: rgba(16, 16, 16, 1);
+					}
 				}
 			}
-			}
 		}
-	// 折线图
-	.chat-box{
-		border-radius: 8px;
-		background: linear-gradient(180deg, rgba(214,238,255,1) 0%,rgba(208,236,236,0) 100%);
-		.title{
-			color: rgba(16,16,16,1);
-			padding: 24rpx;
-		}
-		.chat-box{
-			width: 100%;
-			height: 322rpx;
-			.img{
+
+		// 折线图
+		.chat-box {
+			border-radius: 8px;
+			background: linear-gradient(180deg, rgba(214, 238, 255, 1) 0%, rgba(208, 236, 236, 0) 100%);
+
+			.title {
+				color: rgba(16, 16, 16, 1);
+				padding: 24rpx;
+			}
+
+			.chat-box {
 				width: 100%;
-				height: 100%;
+				height: 322rpx;
+
+				.img {
+					width: 100%;
+					height: 100%;
+				}
 			}
 		}
+
 	}
-	
-	}
-	
+
 	// 返回
-	.back{
-		 border: 1px solid rgba(205,205,205,1);
-		 line-height: 88rpx;
-		 background-color: rgba(255,255,255,1);
-		 color: rgba(119,119,119,1);
-		 font-size: 32rpx;
-		 margin: 32rpx;
+	.back {
+		border: 1px solid rgba(205, 205, 205, 1);
+		line-height: 88rpx;
+		background-color: rgba(255, 255, 255, 1);
+		color: rgba(119, 119, 119, 1);
+		font-size: 32rpx;
+		margin: 32rpx;
 	}
-</style>
+</style>

pages/equipmentDataMonitoring/electricityStatistics.vue

@@ -1,46 +1,52 @@
 <template>
 	<view>
-		<u-navbar title="用电统计"  title-color="#101010" >
-			
-			
+		<u-navbar title="用电统计" title-color="#101010">
 		</u-navbar>
+
 		<!-- 折线图 -->
 		<view class="chat-box">
 			<view class="title">
 				<view class="month">
-					1月 共用电
+					{{queryDate}}年 共用电
 				</view>
-				<view class="month-pick">
-					2024年1月<u-icon name="arrow-down"></u-icon>
+				<view class="month-pick" @click="show = true">
+					{{queryDate}}年<u-icon name="arrow-down"></u-icon>
 				</view>
 			</view>
 			<view class="degree">
-				180.00<text class="unit">度</text>
+				{{sumQuantity}}<text class="unit">度</text>
 			</view>
 			<view class="chat">
-				<image class="img" src="@/assets/img/jVzkNKE@1x.png" mode=""></image>
+				<view id="lineEcharts" style="min-height:240rpx;">
+
+				</view>
+				<!-- <image class="img" src="@/assets/img/jVzkNKE@1x.png" mode=""></image> -->
 			</view>
 		</view>
+
+		<u-picker mode="time" :defaultTime="defaultTime" v-model="show" :params="params" @confirm="timeChange"></u-picker>
+
 		<!-- 记录 -->
 		<view class="record">
 			<view class="total">
-				01月  合计用电1000.00度   624.00元
+				
 			</view>
-			<view class="record-item" v-for="item in 2">
+			<view class="record-item" v-for="(item,index) in electricityList" :key="index"
+				@click="toElectricityDetails(index)">
 				<view class="item-left">
 					<view class="number">
-						1月2日 用电 100.00 度
+						{{index+1}}月 用电 {{item.kwh}} 度
 					</view>
 					<view class="date">
-						01-03 00:01
+						<!-- 01-03 00:01 -->
 					</view>
 				</view>
 				<view class="money">
-					64.4元
+					{{item.fee}}元
 					<!-- 箭头 -->
-						<view class="more">
-							<u-icon name="arrow-right" color="#acacac"  size="24"></u-icon>
-						</view>
+					<view class="more">
+						<u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -48,90 +54,231 @@
 </template>
 
 <script>
+	import * as API_electricityMeter from '@/apis/pagejs/electricityMeter.js'
+	import * as echarts from 'echarts';
+
 	export default {
 		data() {
 			return {
-				
+				show: false, // 时间选择
+				defaultTime: '',
+				params: {
+					year: true,
+					month: false,
+					day: false,
+					hour: false,
+					minute: false,
+					second: false,
+					timestamp: false
+				},
+				queryDate: '',
+				meterId: '',
+				myLineChart: null,
+				sumQuantity: 0,
+				electricityList: [],
+				graphMap: {}
+			}
+		},
+		onLoad(op) {
+			var date = new Date();
+			var year = date.getFullYear();
+			this.queryDate = year;
+
+			if (op.id) {
+				this.meterId = op.id;
+				this.getElectricityConsumptionStatistics();
 			}
 		},
 		methods: {
-			
+			getLineCharts(list) {
+				if (!this.myLineChart) {
+					this.myLineChart = echarts.init(document.getElementById('lineEcharts'), null, {
+						width: uni.upx2px(700),
+						height: uni.upx2px(240)
+					});
+				}
+				this.myLineChart.clear();
+
+				var data1 = [];
+				var data2 = [];
+				var sumQuantity = 0;
+				var electricityList = [];
+				for (var i in list) {
+					data1.push(i+'月');
+					data2.push(list[i].kwh);
+					sumQuantity += list[i].kwh;
+					electricityList.push(list[i]);
+				}
+				this.sumQuantity = sumQuantity;
+				this.electricityList = electricityList;
+				
+				var axisLabel = {
+					rotate: 40,
+					interval: 0,
+					textStyle: {
+						color: "#333"
+					}
+				}
+				if (data1.length < 7) {
+					axisLabel = {
+						interval: 0,
+						textStyle: {
+							color: "#333"
+						},
+					}
+				}
+				
+				var option = {
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow'
+						}
+					},
+					grid: {
+						top: '6%',
+						left: '3%',
+						right: '8%',
+						bottom: '8%',
+						containLabel: true
+					},
+					xAxis: {
+						type: 'category',
+						data: data1,
+						axisLabel: axisLabel
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: [{
+						name: '电量',
+						type: 'line',
+						data: data2
+					}]
+				};
+
+				this.myLineChart.setOption(option);
+			},
+			getElectricityConsumptionStatistics() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				API_electricityMeter.electricityConsumptionStatistics({
+					meterId: this.meterId,
+					queryDate: this.queryDate+'-01-01'
+				}).then((res) => {
+					uni.hideLoading();
+					this.graphMap = res.data.graphMap;
+					this.getLineCharts(this.graphMap);
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
+			timeChange(params) {
+				this.queryDate = params.year;
+				
+				this.getElectricityConsumptionStatistics();
+			},
+			toElectricityDetails(index) {
+				var month = index+1 >= 10 ? index+1 : '0'+(index+1);
+				var date = this.queryDate + '-' + month;
+				uni.navigateTo({
+					url: '/pages/equipmentDataMonitoring/electricityDetails?id='+this.meterId+'&queryDate='+date
+				})
+			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
 	// 折线图
-	.chat-box{
-		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(255,255,255,1) 75%);
-	padding: 24rpx 32rpx;
-	.title{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		.month{
-			color: rgba(16,16,16,1);
-			
-		}
-		.month-pick{
-			color: rgba(51,51,51,1);
+	.chat-box {
+		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(255, 255, 255, 1) 75%);
+		padding: 24rpx 32rpx;
+
+		.title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.month {
+				color: rgba(16, 16, 16, 1);
+
+			}
+
+			.month-pick {
+				color: rgba(51, 51, 51, 1);
+			}
 		}
-	}
-	.degree{
-		color: rgb(51,51,51);
-		font-size: 64rpx;
-		.unit{
-			color: rgb(16,16,16);
-			font-size: 28rpx;
-			margin-left: 8rpx;
+
+		.degree {
+			color: rgb(51, 51, 51);
+			font-size: 64rpx;
+
+			.unit {
+				color: rgb(16, 16, 16);
+				font-size: 28rpx;
+				margin-left: 8rpx;
+			}
 		}
-	}
-	.chat{
-		width: 100%;
-		height: 240rpx;
-		margin-top: 8rpx;
-		.img{
+
+		.chat {
 			width: 100%;
-			height: 100%;
+			height: 240rpx;
+			margin-top: 8rpx;
+
+			.img {
+				width: 100%;
+				height: 100%;
+			}
 		}
+
 	}
-	
-	}
-    // 记录
-	.record{
-		.total{
-			color: rgba(119,119,119,1);
+
+	// 记录
+	.record {
+		.total {
+			color: rgba(119, 119, 119, 1);
 			font-size: 32rpx;
 			padding: 24rpx 32rpx;
 		}
-		.record-item{
+
+		.record-item {
 			background-color: #fff;
 			padding: 32rpx;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			border-bottom: 1px solid rgba(244,244,244,1);
-			.item-left{
-				.number{
-					color: rgba(51,51,51,1);
+			border-bottom: 1px solid rgba(244, 244, 244, 1);
+
+			.item-left {
+				.number {
+					color: rgba(51, 51, 51, 1);
 					font-size: 32rpx;
 					font-weight: bold;
 				}
-				.date{
-					color: rgb(153,153,153);
+
+				.date {
+					color: rgb(153, 153, 153);
 					font-size: 24rpx;
 					margin-top: 4rpx;
 				}
 			}
-			.money{
-				color: rgb(16,16,16);
+
+			.money {
+				color: rgb(16, 16, 16);
 				font-size: 40rpx;
 				display: flex;
 				align-items: center;
-				.more{
+
+				.more {
 					margin-left: 8rpx;
 				}
 			}
 		}
 	}
-</style>
+</style>

pages/equipmentDataMonitoring/electronicMonitoring.vue

@@ -262,7 +262,7 @@
 						</view>
 						<view class="grid-text">环比分析</view>
 					</u-grid-item>
-					<u-grid-item v-if="false">
+					<u-grid-item @click="gotoUrl('/pages/equipmentDataMonitoring/electricityStatistics?id='+meterId)">
 						<view class="icon icon9">
 							<image class="img" src="@/assets/img/Image@9.svg" mode=""></image>
 						</view>
@@ -435,7 +435,7 @@
 				companyId: '', //企业id
 				meterId: '', //设备id
 				titleName: '',
-				clickType: 0,
+				clickType: -1,
 				sumQuantity: 0,
 				sumFee: 0,
 				equipmentInfosShow: false,
@@ -966,8 +966,10 @@
 					this.queryDate(this.tabsFrom.show2Index, false)
 				}
 			},
-			selector2cancel() {
-				this.value = this.clickType;
+			selector2cancel() {
+				if(this.clickType != -1) {
+					this.value = this.clickType;
+				}
 			},
 			selector2reset(e) {
 				console.log(e)

pages/equipmentInformation/equipmentDetails.vue

@@ -348,7 +348,7 @@
 				for(var i in sz){
 					var key=sz[i]
 					var key2=sz2[i]
-					console.log(key,this.updateByMeter[key2],this.findByMeter[key])
+					// console.log(key,this.updateByMeter[key2],this.findByMeter[key])
 					if(this.updateByMeter[key2]!=this.findByMeter[key]){
 						bl=true;
 					}

pages/statistics/statistics.vue

@@ -147,15 +147,15 @@
 								</view>
 							</view>
 							<!-- 箭头 -->
-													<view class="more">
-														<u-icon name="arrow-right" color="#d4d4d4"  size="24"></u-icon>
-													</view>
-											
+							<view class="more">
+								<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
+							</view>
+
 						</view>
 					</view>
 				</view>
 			</view>
-			
+
 			<!-- 统计2 异常告警记录 -->
 			<view class="statistics-2 statistics" v-if="abnormalRecordsList.length != 0">
 				<view class="title">
@@ -183,18 +183,18 @@
 					</view>
 					<view class="item-value">
 						<view class="value-content">
-													<view class="value1">
-														{{item.meterName}}
-													</view>
-													<view class="value2">
-														{{item.installationAddressSimple}}
-													</view>
-												</view>
-												<!-- 箭头 -->
-												<view class="more">
-													<u-icon name="arrow-right" color="#d4d4d4"  size="24"></u-icon>
-												</view>
-											
+							<view class="value1">
+								{{item.meterName}}
+							</view>
+							<view class="value2">
+								{{item.installationAddressSimple}}
+							</view>
+						</view>
+						<!-- 箭头 -->
+						<view class="more">
+							<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
+						</view>
+
 					</view>
 				</view>
 
@@ -223,7 +223,7 @@
 						<view class="text1">
 							{{item.name}}
 						</view>
-						
+
 						<view class="state">
 							<view class="state1">
 								<view class="icon">
@@ -237,11 +237,11 @@
 								</view>
 								{{item.smokeStatus=='1' ? '正常' : '异常'}}
 							</view>
-									<!-- 箭头 -->
-													<view class="more">
-														<u-icon name="arrow-right" color="#d4d4d4"  size="24"></u-icon>
-													</view>
-													
+							<!-- 箭头 -->
+							<view class="more">
+								<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
+							</view>
+
 						</view>
 					</view>
 					<view class="company-name">
@@ -305,7 +305,7 @@
 						<view class="infos-item">
 							<view class="icon">
 								平均功率因数：
-								
+
 							</view>
 							<view class="text">
 								{{item.remoteMonitorRecord.averPowerFactor.toFixed(2)}}
@@ -331,7 +331,7 @@
 					</view>
 				</view>
 			</view>
-			
+
 			<!-- 故障类型 -->
 			<view class="statistics-5 statistics" v-if="false">
 				<view class="title">
@@ -348,7 +348,7 @@
 					</view>
 				</view>
 			</view>
-			
+
 			<!-- 工单处理 -->
 			<view class="statistics-6 statistics" v-if="false">
 				<view class="title">
@@ -455,9 +455,9 @@
 		onLoad() {
 			var date = new Date();
 			var year = date.getFullYear();
-			var month = date.getMonth()+1 >= 10 ? date.getMonth()+1 : '0'+(date.getMonth()+1);
+			var month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
 			this.queryDate = year + '-' + month;
-			
+
 			this.getPowerConsumption(0);
 			this.getEquipmentDataMonitoring(0);
 			this.getCompanyInfoList();
@@ -472,8 +472,8 @@
 		},
 		beforeDestroy() {
 			this.clearTimer(); // 组件销毁前清除定时器
-			this.intervalReady=false;
-			console.log( "组件销毁前清除定时器")
+			this.intervalReady = false;
+			console.log("组件销毁前清除定时器")
 		},
 		methods: {
 			clearTimer() {
@@ -487,7 +487,7 @@
 				this.intervalId = setInterval(() => {
 					// 每隔5秒运行的代码  
 					// console.log('这段代码每隔5秒运行一次');
-					this.getPowerConsumption(0,true)
+					this.getPowerConsumption(0, true)
 				}, 60000);
 			},
 			merchantChange(item, index) {
@@ -518,7 +518,7 @@
 					uni.hideLoading();
 					this.companyList = response.data.companyInfoList;
 					var list = response.data.companyInfoList;
-					
+
 					// for (var i = 0; i < list.length; i++) {
 					// 	list[i].name = list[i].fullName;
 					// }
@@ -528,7 +528,7 @@
 					} else {
 						this.merchantList1 = list;
 					}
-					if(list.length > 1) {
+					if (list.length > 1) {
 						this.merchantList1.unshift({
 							id: '',
 							name: '全部'
@@ -608,12 +608,12 @@
 				})
 			},
 			// 用电量
-			getPowerConsumption(pl,interval) {
+			getPowerConsumption(pl, interval) {
 				this.pageIndexp = this.pageIndexp + pl;
 				if (this.pageIndexp > this.totalPagep) {
 					this.pageIndexp = 1;
 				}
-				
+
 				if (!interval) {
 					uni.showLoading({
 						title: "加载中",
@@ -630,8 +630,8 @@
 					}
 					this.kWhList = response.data.data;
 					this.totalPagep = response.data.totalPage;
-					
-					if(!interval){
+
+					if (!interval) {
 						this.startInterval(); // 组件挂载后开始间隔  
 					}
 				}).catch(error => {
@@ -656,7 +656,7 @@
 				}).then((response) => {
 					uni.hideLoading();
 					this.alarmsForm = response.data;
-					if(this.alarmsForm.okNum != 0) {
+					if (this.alarmsForm.okNum != 0) {
 						this.alarmsPercent = this.alarmsForm.okNum / (this.alarmsForm.okNum + this.alarmsForm.errorNum) * 100;
 					}
 				}).catch(error => {
@@ -850,14 +850,14 @@
 					data[2].value = list.okNum; //正常运行
 					data[3].value = list.errorDeviceNum; //设备异常
 					data[4].value = list.errorOnlineNum; //设备离线
-					
+
 					for (var i = 0; i < data.length; i++) {
-						if(data[i].value != 0) {
+						if (data[i].value != 0) {
 							data2.push(data[i]);
 						}
 					}
 				}
-				
+
 				var option = {
 					tooltip: {
 						trigger: 'item'
@@ -928,8 +928,8 @@
 			},
 			toElectronicMonitoring(item) {
 				uni.navigateTo({
-					url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item.name
-						+ '&companyId=' + item.companyId
+					url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item.name +
+						'&companyId=' + item.companyId
 				})
 			}
 		}
@@ -954,12 +954,13 @@
 		padding-right: 32rpx;
 		color: rgba(51, 51, 51, 1);
 		font-size: 32rpx;
-         
+
 		.tabs {
 			width: 88%;
-			
+
 		}
 	}
+
 	/deep/.u-tab-item {
 		width: 25% !important;
 		flex: none !important;
@@ -1260,10 +1261,11 @@
 				.item-value {
 					text-align: right;
 					display: flex;
-										align-items: center;
-										.more{
-											margin-left: 8rpx;
-										}
+					align-items: center;
+
+					.more {
+						margin-left: 8rpx;
+					}
 
 					.value1 {
 						font-weight: bold;
@@ -1292,20 +1294,21 @@
 						color: rgba(51, 51, 51, 1);
 					}
 
-					
+
 				}
-				
-				.company-name{
-					color: rgba(119,119,119,1);
+
+				.company-name {
+					color: rgba(119, 119, 119, 1);
 					font-size: 24rpx;
 					display: flex;
 					align-items: center;
+
 					.state {
 						margin-left: 12rpx;
 						display: flex;
 						align-items: center;
 						color: rgba(255, 123, 0, 1);
-					
+
 						text {
 							margin-right: 8rpx;
 							display: inline-block;
@@ -1313,18 +1316,18 @@
 							height: 16rpx;
 							border-radius: 999px;
 						}
-					
+
 						.off-line {
-					
+
 							background-color: rgba(255, 123, 0, 1);
-					
+
 						}
-					
+
 						.on-line {
 							background-color: rgba(0, 185, 98, 1);
 						}
 					}
-					
+
 					.state2 {
 						color: rgba(0, 185, 98, 1);
 					}
@@ -1340,9 +1343,10 @@
 						align-items: center;
 						margin-left: 24rpx;
 					}
-					.more{
-											margin-left: 8rpx;
-										}
+
+					.more {
+						margin-left: 8rpx;
+					}
 
 					.img {
 						width: 32rpx;
@@ -1351,7 +1355,7 @@
 						margin-right: 8rpx;
 					}
 				}
-				
+
 
 				// 监控信息
 				.infos {
@@ -1364,23 +1368,22 @@
 
 					.infos-item {
 						width: 38%;
-						
+
 						display: flex;
 						align-items: center;
-						color: rgba(51,51,51,1);
+						color: rgba(51, 51, 51, 1);
 						font-size: 22rpx;
 						// margin-right: 16rpx;
 						margin-bottom: 8rpx;
-                   .icon{
-					   
-				   }
+
+						.icon {}
 					}
 
 					.text {
 						font-weight: bold;
 					}
 				}
-				
+
 			}
 		}
 
@@ -1476,9 +1479,8 @@
 			}
 		}
 	}
-	
+
 	/deep/.u-drawer {
 		z-index: 999 !important;
 	}
-
 </style>