用电统计修改

pages/equipmentDataMonitoring/electronicMonitoring.vue

@@ -24,7 +24,8 @@
 					<u-icon name="arrow-left" color="#fff" size="36"></u-icon>
 				</view>
 				<view class="title">
-					{{title}}<u-icon v-if="false" name="arrow-down" color="#fff" size="24" @click="equipmentShow=true"></u-icon>
+					{{title}}<u-icon v-if="false" name="arrow-down" color="#fff" size="24"
+						@click="equipmentShow=true"></u-icon>
 				</view>
 				<!-- <view class="right" @click="tabsFrom.show2=true">
 					<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
@@ -162,14 +163,14 @@
 		<!-- 各时段用电量 -->
 		<view class="electricity-chart">
 			<view class="title">
-				
+				<view class="icon">
+
+				</view>
 				<view class="text">
-					<view class="icon">
-					
-					</view>	各时段用电量 (度)
-			
+					各时段用电量 (度)
+
 				</view>
-				<view @click="tabsFrom.show2=true,params.day=true" >
+				<view class="date" @click="tabsFrom.show2=true,params.day=true">
 					{{queryDay}}<u-icon name="arrow-down"></u-icon>
 				</view>
 			</view>
@@ -306,6 +307,119 @@
 				</u-grid>
 			</view>
 		</view>
+
+		<!-- 设备信息 -->
+		<view class="equipment-information" v-if="false">
+			<view class="title">
+
+				<view class="icon">
+
+				</view>
+				<view class="text">
+					设备信息
+
+				</view>
+				<view class="more" @click="equipmentInfosShow=true">
+					查看全部<u-icon name="arrow-right" size="24" color="#d4d4d4"></u-icon>
+				</view>
+			</view>
+
+			<view class="infos">
+				<view class="item">
+					<view class="item-title">
+						类型
+					</view>
+					<view class="item-value">
+						变压器
+					</view>
+				</view>
+				<view class="border">
+					
+				</view>
+				<view class="item">
+					<view class="item-title">
+						设备编号
+					</view>
+					<view class="item-value">
+						SN9015001
+					</view>
+				</view>
+				<view class="border">
+					
+				</view>
+				<view class="item">
+					<view class="item-title">
+						上次故障时间
+					</view>
+					<view class="item-value">
+						2024-02-14
+					</view>
+				</view>
+			</view>
+		</view>
+          <!-- 设备信息弹窗 -->
+		
+			<view class="equipment-popup">
+					<u-popup v-model="equipmentInfosShow" mode="bottom" border-radius="12">
+						<view class="content">
+							<view class="headline">
+								设备信息
+							</view>
+							<view class="infos">
+								<view class="item" >
+									<view class="item-title">
+										类型
+									</view>
+									<view class="item-value">
+										变压器
+									</view>
+								</view>
+								<view class="item" >
+									<view class="item-title">
+										编号
+									</view>
+									<view class="item-value">
+										SN9015001
+									</view>
+								</view>
+								<view class="item" >
+									<view class="item-title">
+										所属公司
+									</view>
+									<view class="item-value">
+										荆鹏集团
+									</view>
+								</view>
+								<view class="item" >
+									<view class="item-title">
+										地址
+									</view>
+									<view class="item-value">
+										荆州市沙市区江津东路155号
+									</view>
+								</view>
+								<view class="item" >
+									<view class="item-title">
+										上线时间
+									</view>
+									<view class="item-value">
+										2024-01-01
+									</view>
+								</view>
+								<view class="item" >
+									<view class="item-title">
+										上次故障时间
+									</view>
+									<view class="item-value">
+										2024-02-14
+									</view>
+								</view>
+							</view>
+							<button class="get" @click="equipmentInfosShow=false">知道了</button>
+						</view>
+					</u-popup>
+					
+				</view>
 		<!-- 创建工单 -->
 		<view class="create-order" v-if="false">
 			<view class="img-box">
@@ -330,9 +444,10 @@
 	export default {
 		data() {
 			return {
+				equipmentInfosShow:false,
 				kWhList: [],
 				title: '',
-				queryDay:'',
+				queryDay: '',
 				showTop: [0, 0, 0, 0, 0, 0, 0, 0],
 				FormData: {
 					queryDate: '',
@@ -424,29 +539,29 @@
 					backgroundColor: '#1677FF',
 				},
 				list: [{
-						id:0,
+						id: 0,
 						name: '总用电量',
 						disabled: false
 					},
 					{
-						id:4,
+						id: 4,
 						name: '当日用电量',
 						disabled: false
 					},
 					{
-						id:1,
+						id: 1,
 						name: '当月用电量',
 						disabled: false
 					}, {
-						id:3,
+						id: 3,
 						name: '当年用电量',
 						disabled: false
 					}, {
-						id:5,
+						id: 5,
 						name: '去年用电量',
 						disabled: false
 					}, {
-						id:10,
+						id: 10,
 						name: '指定月份',
 						disabled: false
 					}
@@ -455,7 +570,7 @@
 			};
 		},
 		onLoad(op) {
-			if(op.id) {
+			if (op.id) {
 				this.FormData.meterId = op.id;
 				this.FormData2.meterId = op.id;
 			}
@@ -463,32 +578,32 @@
 			this.FormData.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
 			this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
 			this.FormData.type = 0;
-			
+
 			this.getTimeSlotStatistics();
 			this.getElectricityStatistics();
 			this.getList();
 		},
 		methods: {
-			queryDate(queryTime,day){
-				
-				if(day){
-					this.FormData2.queryDate=queryTime;
+			queryDate(queryTime, day) {
+
+				if (day) {
+					this.FormData2.queryDate = queryTime;
 					//this.FormData2.type =day?"9":"10"
 					//this.value="-1"
-					
+
 					this.getTimeSlotStatistics()
-					
-				}else{
-					
-					this.FormData.queryDate=queryTime+"-01";
-					this.FormData.type ="10"
+
+				} else {
+
+					this.FormData.queryDate = queryTime + "-01";
+					this.FormData.type = "10"
 					//this.value="-1"
-					
+
 					this.getElectricityStatistics()
-					
+
 				}
-				
-				
+
+
 			},
 			getList() {
 				uni.showLoading({
@@ -503,7 +618,7 @@
 					uni.hideLoading()
 					this.kWhList = res.data.data;
 					for (var i = 0; i < this.kWhList.length; i++) {
-						if(this.kWhList[i].id == this.FormData.meterId) {
+						if (this.kWhList[i].id == this.FormData.meterId) {
 							this.title = this.kWhList[i].name;
 						}
 					}
@@ -514,13 +629,13 @@
 					})
 				})
 			},
-			getTimeSlotStatistics(){
+			getTimeSlotStatistics() {
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
 				})
-				
-				this.queryDay=parseUnixTime(new Date(this.FormData2.queryDate), '{y}年{m}月{d}日');
+
+				this.queryDay = parseUnixTime(new Date(this.FormData2.queryDate), '{y}年{m}月{d}日');
 				API.timeSlotStatistics(this.FormData2).then((response) => {
 					uni.hideLoading();
 					this.hourMap = response.data.hourMap;
@@ -532,22 +647,22 @@
 					})
 				})
 			},
-			getElectricityStatistics(){
+			getElectricityStatistics() {
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
 				})
-				var obj={
+				var obj = {
 					...this.FormData
-				}		
+				}
 				// if(obj.type==10){
 				// 	obj.queryDate+="-01"
 				// }
 				API.electricityStatistics(obj).then((response) => {
 					uni.hideLoading();
 					this.showTop = [0, 0, 0, 0, 0, 0, 0, 0]
-					var electricity = response.data.kwhMap.kwh+"";
-					
+					var electricity = response.data.kwhMap.kwh + "";
+
 					if (electricity) {
 						var sz = electricity.split(".")
 						var str1 = sz[0];
@@ -575,19 +690,20 @@
 			},
 			getBarCharts(list) {
 				if (!this.myChart) {
-					this.myChart = echarts.init(document.getElementById('barEcharts'),null,{
-						width:uni.upx2px(700),height:uni.upx2px(480)
+					this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
+						width: uni.upx2px(700),
+						height: uni.upx2px(480)
 					});
 				}
 				this.myChart.clear();
-				var data1=[];
-				var data2=[];
-				for(var i in list){
+				var data1 = [];
+				var data2 = [];
+				for (var i in list) {
 					data1.push(i)
 					data2.push(list[i])
 				}
-							
-				var headitemby=""
+
+				var headitemby = ""
 				var showkey = "";
 				var option = {
 					tooltip: {
@@ -603,44 +719,42 @@
 						bottom: '8%',
 						containLabel: true
 					},
-					  xAxis: {
-					    type: 'category',
-					    data: data1,
-						
+					xAxis: {
+						type: 'category',
+						data: data1,
+
 						axisLabel: {
-							rotate:40,
-							interval:0,
+							rotate: 40,
+							interval: 0,
 							textStyle: {
 								color: "#333"
 							}
 						},
-					  },
-					  yAxis: {
-					    type: 'value',
-						
-					  },
-					  series: [
-					    {
-						  name: '合计',
-					      data: data2,
-					      type: 'bar'
-					    }
-					  ]
+					},
+					yAxis: {
+						type: 'value',
+
+					},
+					series: [{
+						name: '合计',
+						data: data2,
+						type: 'bar'
+					}]
 				}
 				console.log(option)
 				this.myChart.setOption(option);
 			},
 			selector2confirm(e) {
-				this.tabsFrom.show2Text=e.year+"年"+e.month+"月"
-				
-				this.tabsFrom.show2Index=e.year+"-"+e.month
-				if(e.day){
-					this.tabsFrom.show2Text+=e.day+"日"
-					this.tabsFrom.show2Index+='-'+e.day	
-					
-					this.queryDate(this.tabsFrom.show2Index,true)
-				}else{
-					this.queryDate(this.tabsFrom.show2Index,false)
+				this.tabsFrom.show2Text = e.year + "年" + e.month + "月"
+
+				this.tabsFrom.show2Index = e.year + "-" + e.month
+				if (e.day) {
+					this.tabsFrom.show2Text += e.day + "日"
+					this.tabsFrom.show2Index += '-' + e.day
+
+					this.queryDate(this.tabsFrom.show2Index, true)
+				} else {
+					this.queryDate(this.tabsFrom.show2Index, false)
 				}
 			},
 			selector2reset(e) {
@@ -656,10 +770,10 @@
 			radioGroupChange(e) {
 				console.log(e)
 				this.FormData.type = e;
-				if(e==10) {
+				if (e == 10) {
 					this.tabsFrom.show2 = true;
 					this.params.day = false;
-				}else{
+				} else {
 					this.getElectricityStatistics();
 				}
 			},
@@ -924,27 +1038,27 @@
 	// 		}
 	// 	}
 	// }
-	.electricity-chart {
+	.electricity-chart,
+	.equipment-information {
 		margin: 24rpx 32rpx;
 		padding: 40rpx 0rpx;
 		background-color: #fff;
 		border-radius: 8px;
-	
+
 		.title {
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
-			padding: 0 12rpx;
+			padding: 0 32rpx;
 			margin-bottom: 40rpx;
-	
+
 			.icon {
 				width: 36rpx;
 				height: 36rpx;
-				background-color: rgba(22, 119, 255, 1);
-				border: 6px solid rgba(182, 212, 255, 1);
+				background-color: rgba(182, 212, 255, 1);
+				border: 6px solid rgba(22, 119, 255, 1);
 				border-radius: 100px;
 			}
-	
+
 			.text {
 				display: flex;
 				align-items: center;
@@ -952,17 +1066,49 @@
 				font-size: 36rpx;
 				margin-left: 16rpx;
 			}
+
+			.date {
+				margin-left: auto;
+			}
+
+			.more {
+				color: #838383;
+				font-size: 24rpx;
+				margin-left: auto;
+
+			}
 		}
-	
+
 		.chart {
 			width: 100%;
 			height: 440rpx;
-	
+
 			.img {
 				width: 100%;
 				height: 440rpx;
 			}
 		}
+		.infos{
+			padding: 0 32rpx;
+			display: flex;
+			justify-content: space-between;
+			text-align: center;
+			.border{
+				margin: auto 0;
+				height: 70rpx;
+				width: 2rpx;
+				background-color: rgba(204,204,204,1);;
+			}
+			.item-title{
+				color: rgba(119,119,119,1);
+			}
+			.item-value{
+				color: rgba(16,16,16,1);
+				font-size: 32rpx;
+				margin-top: 16rpx;
+			}
+			
+		}
 	}
 
 	// 异常
@@ -986,8 +1132,8 @@
 			.icon {
 				width: 36rpx;
 				height: 36rpx;
-				background-color: rgba(22, 119, 255, 1);
-				border: 6px solid rgba(182, 212, 255, 1);
+				background-color: rgba(182, 212, 255, 1);
+				border: 6px solid rgba(22, 119, 255, 1);
 				border-radius: 100px;
 			}
 
@@ -1041,8 +1187,8 @@
 			.icon {
 				width: 36rpx;
 				height: 36rpx;
-				background-color: rgba(22, 119, 255, 1);
-				border: 6px solid rgba(182, 212, 255, 1);
+				background-color: rgba(182, 212, 255, 1);
+				border: 6px solid rgba(22, 119, 255, 1);
 				border-radius: 100px;
 			}
 
@@ -1108,6 +1254,56 @@
 		}
 	}
 
+
+// 设备信息弹窗
+.equipment-popup{
+	
+	.content{
+		
+		padding: 32rpx;
+		.headline{
+			color: rgba(16,16,16,1);
+			font-size: 36rpx;
+			text-align: center;
+			font-weight: bold;
+		}
+		.infos{
+			padding-bottom: 100rpx;
+			.item:last-of-type{
+				border: none;
+			}
+			.item{
+				display: flex;
+				align-items: center;
+				height: 80rpx;
+				line-height: 80rpx;
+				border-bottom: 1px solid #cccccc;
+				.item-title{
+					color: rgba(51,51,51,1);
+					width: 200rpx;
+				}
+				.item-value{
+					color: #666666;
+					flex: 1;
+					margin-left: 16rpx;
+				}
+			}
+			
+		}
+		.get{
+			height: 80rpx;
+			line-height: 80rpx;
+			border-radius: 4px;
+			background-color: rgba(22,119,255,1);
+			color: rgba(255,255,255,1);
+			font-size: 32rpx;
+		}
+	}
+}
+
+
+
+
 	// 创建工单
 	.create-order {
 		width: 120rpx;

pages/statistics/statistics.vue

@@ -265,6 +265,9 @@
 					</view>
 				</view>
 			</view>
+		
+		
+		
 		</view>
 
 		<energyCenterTabbar :current="0" v-if="0"></energyCenterTabbar>