设备用电量修改

pages/equipmentDataMonitoring/electronicMonitoring.vue

@@ -420,13 +420,13 @@
 					</u-popup>
 					
 				</view>
-		<!-- 创建工单 -->
+		<!-- 故障上报 -->
 		<view class="create-order" v-if="false">
 			<view class="img-box">
-				<image class="img" src="@/assets/img/riFill-file-add-fill.svg" mode=""></image>
+				<image class="img" src="@/assets/img/fas fa-exclamation-triangle Copy 2@3x.png" mode=""></image>
 			</view>
 			<view class="text">
-				创建工单
+				故障上报
 			</view>
 		</view>
 	</view>
@@ -1309,7 +1309,7 @@
 		width: 120rpx;
 		height: 120rpx;
 		border-radius: 20px;
-		background: linear-gradient(180deg, rgba(121, 172, 255, 1) 0%, rgba(57, 132, 255, 1) 100%);
+		background: linear-gradient(180.29deg, rgba(255,124,112,1) 0.9%,rgba(255,79,63,1) 100.4%);
 		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
 		text-align: center;
 		display: flex;
@@ -1323,6 +1323,7 @@
 		.img {
 			width: 56rpx;
 			height: 56rpx;
+			vertical-align: middle;
 		}
 
 		.text {

pages/equipmentDataMonitoring/equipmentElectricity.vue

@@ -11,14 +11,68 @@
 			
 		</view>
 		<!-- 标签 -->
-		<view class="tabs-box" v-if="false">
+		<view class="tabs-box" >
 			<view class="tabs">
 				<u-tabs :list="list" :is-scroll="false" inactive-color="#999999"  active-color="#666666" :current="current" @change="change"></u-tabs>
 			</view>
-			<view class="icon">
+			<view class="icon" @click="popShow=true">
 				<u-icon name="arrow-down" color="#999999"></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, index) in list" :key="index"
+					>
+					{{item.name}}
+				</view>
+			</view>
+		</u-popup>
+		<!-- 用电量合计 -->
+		<view class="total">
+			<view class="company">
+				<view class="name">
+					荆鹏集团
+				</view>
+				<view class="amount">
+					共 3 台设备
+				</view>
+			</view>
+			<view class="infos">
+				<view class="infos-item">
+					<view class="number">
+						361.5
+					</view>
+					<view class="time">
+						昨日
+					</view>
+				</view>
+				<view class="infos-item">
+					<view class="number">
+						361.5
+					</view>
+					<view class="time">
+						本月
+					</view>
+				</view>
+				<view class="infos-item">
+					<view class="number">
+						361.5
+					</view>
+					<view class="time">
+						上月
+					</view>
+				</view>
+			</view>
+		</view>
 		<!-- 用电量 -->
 		<view class="main">
 			<view class="item" v-for="(item, index) in kWhList" :key="index" @click="toElectronicMonitoring(item)">
@@ -76,6 +130,7 @@
 				companyId: '',
 				pageIndex: 1,
 				recordsTotal: 0,
+				popShow:false,
 				list: [{
 					name: '全部'
 				}, {
@@ -178,6 +233,10 @@
 		z-index: 999;
 		width: 200rpx;
 	}
+	/deep/.u-drawer-content {
+		margin-top: 88rpx;
+	}
+	
 	
 	.tabs-box{
 		background-color: #fff;
@@ -191,6 +250,69 @@
 			margin-right: 24rpx;
 		}
 	}
+	.popup-tabs {
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		// padding-top: 44px;
+		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;
+		}
+	}
+  
+  // 用电量合计
+  .total{
+	  padding: 24rpx 32rpx;
+	  background: linear-gradient(90deg, rgba(49,110,207,1) 2%,rgba(37,138,255,1) 100%);
+	  display: flex;
+	  .company{
+		  .name{
+			  color: rgba(255,255,255,1);
+			  font-size: 36rpx;
+			  font-weight: bold;
+		  }
+		  .amount{
+			  color:#f2f4f6 ;
+			  margin-top: 4rpx;
+		  }
+	  }
+	  .infos{
+		  display: flex;
+		  margin-left: auto;
+		  .infos-item{
+			  margin-left: 32rpx;
+			  text-align: center;
+			  .number{
+				  color: rgba(255,255,255,1);
+				  font-size: 32rpx;
+				  font-weight: bold;
+			  }
+			  .time{
+				  color:#f2f4f6 ;
+				  margin-top: 4rpx;
+			  }
+		  }
+	  }
+  }
+  
+  
+  
    // 用电量
    .main{
 	   background-color: #fff;