Merge branch 'master' of http://47.92.161.104:10080/zkx/jp-housekeep-electric

pages/equipmentDataMonitoring/equipmentElectricity.vue

@@ -128,6 +128,7 @@
 			   .equipment1{
 				   color: rgba(51,51,51,1);
 				   font-size: 32rpx;
+				   font-weight: bold;
 			   }
 			   .equipment2{
 				   color: rgba(119,119,119,1);

pages/statistics/statistics.vue

@@ -15,10 +15,28 @@
 				<u-tabs :list="list" :is-scroll="false" active-color="#fff" inactive-color="#CCE2FF" bg-color="#1677FF"
 					:current="current" @change="change"></u-tabs>
 			</view>
-			<view class="more">
+			<view class="more" @click="popShow=true">
 				<u-icon name="arrow-down" color="#fff" size="40"></u-icon>
 			</view>
 		</view>
+		
+		<!-- 标签弹出层 -->
+			<u-popup v-model="popShow" duration ="10" mode="top" :negative-top="88" border-radius="16">
+				<view class="popup-tabs">
+					<view class="tabs">
+						<u-tabs :list="list" :is-scroll="false"  
+							:current="current" @change="change"></u-tabs>
+					</view>
+					<view class="more">
+						<u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
+					</view>
+				</view>
+				<view class="tabs-options">
+					<view class="item" v-for="item in 9" >
+						玉桥公园
+					</view>
+				</view>
+			</u-popup>
 
 		<view class="main">
 			<!-- 统计1 -->
@@ -66,56 +84,111 @@
 				</view>
 
 			</view>
-			<!-- 统计2 异常报警记录 -->
-			<view class="statistics-2 statistics">
+			<!-- 用电量 -->
+			<view class="statistics-e statistics">
 				<view class="title">
 					<view class="icon">
 						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
 					</view>
 					<view class="text">
-						异常报警记录
+						用电量 (度)
+					</view>
+					<view class="change">
+						<image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>
+						<text>换一批</text>
 					</view>
 					<view class="check-all">
 						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
 					</view>
 				</view>
-				<!-- 异常  -->
-				<view class="abnormal-item">
-					<view class="item-title">
-						<image class="img" src="@/assets/img/riFill-error-warning-fill 1.svg"></image>温度异常
-					</view>
-					<view class="item-value">
-						荆鹏集团 (荆鹏软件园01)
+				<view class="electricity">
+					<view class="item" v-for="item in 3">
+						
+						<view class="equipment">
+							<view class="equipment1">
+								荆鹏软件园01
+							</view>
+							<view class="equipment2">
+								荆鹏集团
+							</view>
+						</view>
+						<view class="electricity">
+							<view class="electricity-item">
+								<view class="number">
+									120.5
+								</view>
+								<view class="date">
+									昨日
+								</view>
+							</view>
+							<view class="electricity-item">
+								<view class="number">
+									120.5
+								</view>
+								<view class="date">
+									本月
+								</view>
+							</view>
+							<view class="electricity-item">
+								<view class="number">
+									120.5
+								</view>
+								<view class="date">
+									上月
+								</view>
+							</view>
+						</view>
 					</view>
 				</view>
-				<view class="abnormal-item">
-					<view class="item-title">
-						<image class="img" src="@/assets/img/riFill-error-warning-fill 2.svg"></image>三相功率因数异常
+			</view>
+			<!-- 统计2 异常告警记录 -->
+			<view class="statistics-2 statistics">
+				<view class="title">
+					<view class="icon" >
+						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
 					</view>
-					<view class="item-value">
-						荆鹏集团 (荆鹏软件园02)
+					<view class="text">
+						异常告警记录
+					</view>
+					<view class="check-all">
+						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
 					</view>
 				</view>
-				<view class="abnormal-item">
+				<!-- 异常  -->
+				<view class="abnormal-item" v-for="item in 3">
 					<view class="item-title">
-						<image class="img" src="@/assets/img/riFill-error-warning-fill 3.svg"></image>电压异常
+						<!-- <image class="img" src="@/assets/img/riFill-error-warning-fill 1.svg"></image> -->
+						<view class="name">
+							温度异常
+						</view>
+						<view class="date">
+							2024-02-14 09:00:01
+						</view>
 					</view>
 					<view class="item-value">
-						荆鹏集团 (荆鹏软件园03)
+						<view class="value1">
+							荆鹏软件园01
+						</view>
+						<view class="value2">
+							荆鹏集团
+						</view>
 					</view>
 				</view>
+				
+				
 			</view>
-			<!-- 统计3 设备实时监控-->
+			<!-- 统计3 设备数据监测-->
 			<view class="statistics-3 statistics">
 				<view class="title">
 					<view class="icon">
 						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
 					</view>
 					<view class="text">
-						设备实时监控
+						设备数据监测
 					</view>
 					<view class="change">
-						<image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>换一批
+						<image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>
+						<text>换一批</text>
 					</view>
 					<view class="check-all">
 						查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
@@ -214,7 +287,7 @@
 						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
 					</view>
 					<view class="text">
-						设备状态
+						故障类型
 					</view>
 
 
@@ -232,7 +305,7 @@
 						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
 					</view>
 					<view class="text">
-						设备状态
+						工单处理
 					</view>
 
 
@@ -243,6 +316,87 @@
 					</view>
 				</view>
 			</view>
+		
+		<!-- 异常设备排名 -->
+		   <view class="statistics statistics-ranking">
+		   	<view class="title">
+		   		<view class="icon">
+		   			<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
+		   		</view>
+		   		<view class="text">
+		   			异常设备排名
+		   		</view>
+		   	</view>
+			<!-- 合计 -->
+			<view class="total">
+				本年度共有<text> 42</text>次设备异常告警
+			</view>
+			
+			<view class="ranking-main">
+				<view class="item">
+					<view class="ranking">
+						1
+					</view>
+					<view class="icon">
+						<image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
+					</view>
+					<view class="name">
+						<view class="name1">
+							荆鹏软件园01
+						</view>
+						<view class="name2">
+							荆鹏集团
+						</view>
+					</view>
+					<view class="time">
+						5次
+					</view>
+				</view>
+				<view class="item">
+					<view class="ranking">
+						2
+					</view>
+					<view class="icon">
+						<image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
+					</view>
+					<view class="name">
+						<view class="name1">
+							玉桥公园02
+						</view>
+						<view class="name2">
+							荆鹏集团
+						</view>
+					</view>
+					<view class="time">
+						5次
+					</view>
+				</view>
+				<view class="item">
+					<view class="ranking">
+						3
+					</view>
+					<view class="icon">
+						<image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
+					</view>
+					<view class="name">
+						<view class="name1">
+							御河社区03
+						</view>
+						<view class="name2">
+							荆鹏集团
+						</view>
+					</view>
+					<view class="time">
+						5次
+					</view>
+				</view>
+			</view>
+			<!-- 查看全部排名 -->
+			<view class="check-all">
+				查看全部排名 <u-icon name="arrow-down" size="24" color="rgba(119,119,119,1)"></u-icon>
+			</view>
+		   </view>
+		
 		</view>
 
 
@@ -263,6 +417,7 @@
 				myPieChart: null,
 				myBarChart: null,
 				myLineChart: null,
+				popShow:false,
 				list: [{
 					name: '全部'
 				}, {
@@ -495,7 +650,31 @@
 	page {
 		padding-bottom: 200rpx;
 	}
-
+  /deep/.u-drawer-content{
+	  margin-top: 88rpx;
+  }
+  .popup-tabs{
+	  background-color: #fff;
+	  display: flex;
+	  align-items: center;
+	  justify-content: space-between;
+	  padding-top: 32rpx;
+	  padding-right: 32rpx;
+	  color: rgba(51,51,51,1);
+	  font-size: 32rpx;
+	  .tabs{
+		  width: 80%;
+	  }
+  }
+  .tabs-options{
+	  display: flex;
+	  padding: 24rpx 32rpx 0;
+	  flex-wrap: wrap;
+	  .item{
+		  width: 25%;
+		  margin-bottom: 40rpx;
+	  }
+  }
 	// 导航栏
 	.navbar {
 		background-color: rgba(22, 119, 255, 1);
@@ -507,7 +686,11 @@
 		padding: 0 32rpx;
 		color: rgba(255, 255, 255, 1);
 		font-size: 36rpx;
-
+            position: fixed;
+            left: 0;
+            right: 0;
+            top: 0;
+			z-index: 999999;
 		.img {
 			width: 48rpx;
 			height: 48rpx;
@@ -518,7 +701,8 @@
 
 	// 标签
 	.tabs-box {
-		height: 200rpx;
+		padding: 32rpx 0;
+		margin-top: 88rpx;
 		padding-right: 32rpx;
 		background-color: rgba(22, 119, 255, 1);
 		display: flex;
@@ -547,19 +731,27 @@
 			.title {
 				display: flex;
 				align-items: center;
-				margin-bottom: 28rpx;
+				margin-bottom: 20rpx;
 
 				.img {
 					width: 36rpx;
 					height: 36rpx;
 					vertical-align: middle;
 				}
-
-				.change-img {
-					width: 32rpx;
-					height: 32rpx;
-					vertical-align: middle;
+                .change{
+					display: flex;
+					align-items: center;
+					.change-img {
+						width: 32rpx;
+						height: 32rpx;
+						vertical-align: middle;
+					}
+					text{
+						
+						margin-left: 8rpx;
+					}
 				}
+				
 
 				.text {
 					color: rgba(16, 16, 16, 1);
@@ -582,6 +774,48 @@
 				}
 			}
 		}
+		// 用电量
+		.statistics-e{
+			.electricity{
+				   background-color: #fff;
+				   .item{
+					   padding: 16rpx 0;
+					   display: flex;
+					   align-items: center;
+					   border-bottom: 1px solid rgba(245,245,245,1);
+					   
+					   .equipment{
+						   
+						   .equipment1{
+							   color: rgba(51,51,51,1);
+							   font-size: 32rpx;
+							   font-weight: bold;
+						   }
+						   .equipment2{
+							   color: rgba(119,119,119,1);
+						   }
+					   }
+					   .electricity{
+						   display: flex;
+						   justify-content: space-between;
+						   flex: 1;
+						   margin-left: 48rpx;
+						   text-align: center;
+						   .electricity-item{
+							   .number{
+								   color: rgba(51,51,51,1);
+								   font-size: 32rpx;
+								   font-weight: bold;
+							   }
+							   .date{
+								   color: rgba(119,119,119,1);
+								   margin-top: 4rpx;
+							   }
+						   }
+					   }
+				   }
+			}
+		}
 
 		// 统计1
 		.statistics-1 {
@@ -637,24 +871,37 @@
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				margin-top: 16rpx;
-
+				padding: 16rpx;
+border-bottom: 1px solid rgba(245,245,245,1);
 				.item-title {
 
-					display: flex;
-					align-items: center;
+					
 					color: rgba(51, 51, 51, 1);
-
+ 
 					.img {
 						width: 32rpx;
 						height: 32rpx;
 						margin-right: 8rpx;
 					}
+					.name{
+						color: rgba(51,51,51,1);
+					}
+					.date{
+						color: rgba(119,119,119,1);
+						font-size: 24rpx;
+					}
 				}
 
 				.item-value {
-					color: rgba(51, 51, 51, 1);
-					font-weight: bold;
+					text-align: right;
+					.value1{
+						font-weight: bold;
+						color: rgba(51, 51, 51, 1);
+					}
+					.value2{
+						color: rgba(119,119,119,1);
+						font-size: 24rpx;
+					}
 				}
 			}
 		}
@@ -677,6 +924,7 @@
 						color: rgba(119, 119, 119, 1);
 						font-size: 24rpx;
 						margin-left: 8rpx;
+						
 					}
 				}
 
@@ -736,6 +984,70 @@
 				height: 410rpx;
 			}
 		}
-
+    // 异常设备排名
+	.statistics-ranking{
+		.total{
+			color: rgba(16,16,16,1);
+			text{
+				color: #1677FF;
+				padding: 0 8rpx;
+			}
+		}
+		
+		.ranking-main{
+			margin-top: 48rpx;
+			border-radius: 16px;
+			background-color: #fff;
+			.item{
+				display: flex;
+				align-items: center;
+				margin-bottom: 32rpx;
+				.ranking{
+					color: rgba(16,16,16,1);
+					font-weight: bold;
+				}
+				
+				.icon{
+					width: 72rpx;
+					height: 72rpx;
+					border-radius: 4px;
+					background-color: rgba(219,234,255,1);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-left: 24rpx;
+					.img{
+						width: 48rpx;
+						height: 48rpx;
+					}
+				}
+				.name{
+					margin-left: 16rpx;
+					.name1{
+						color: rgba(51,51,51,1);
+						font-weight: bold;
+					}
+					.name2{
+						color: rgba(119,119,119,1);
+						font-size: 24rpx;
+						margin-top: 4rpx;
+					}
+				}
+				.time{
+					color: rgba(16,16,16,1);
+					margin-left: auto;
+					font-weight: bold;
+				}
+			}
+			
+			
+		}
+		// 查看全部排名
+		.check-all{
+			text-align: center;
+			color: rgba(119,119,119,1);
+			font-size: 12px;
+		}
+	}
 	}
 </style>