用电信息

assets/img/riLine-file-list-2-line.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24" height="24" style="" filter="none">
+    
+    <g>
+    <path d="M26.667 29.333h-21.333c-0.736 0-1.333-0.597-1.333-1.333v0-24c0-0.736 0.597-1.333 1.333-1.333v0h21.333c0.736 0 1.333 0.597 1.333 1.333v0 24c0 0.736-0.597 1.333-1.333 1.333v0zM25.333 26.667v-21.333h-18.667v21.333h18.667zM10.667 9.333h10.667v2.667h-10.667v-2.667zM10.667 14.667h10.667v2.667h-10.667v-2.667zM10.667 20h6.667v2.667h-6.667v-2.667z" fill="rgba(255,255,255,1)"></path>
+    </g>
+  </svg>

pages.json

@@ -286,6 +286,22 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/switchDetail/switchDetail",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/electricityInformation/electricityInformation",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
        
     ],

pages/electricityInformation/electricityInformation.vue

@@ -0,0 +1,172 @@
+<template>
+	<view>
+		<u-navbar title="用电信息" title-color="#101010"></u-navbar>
+		<view class="infos">
+			<view class="item">
+				<view class="item-value">
+					0.0
+				</view>
+				<view class="item-title">
+					当前功率(瓦)
+				</view>
+			</view>
+			<view class="item">
+				<view class="item-value">
+					3.31
+				</view>
+				<view class="item-title">
+					今日用电量(度)
+				</view>
+			</view>
+			<view class="item">
+				<view class="item-value">
+					3.31
+				</view>
+				<view class="item-title">
+					近一月用电量(度)
+
+				</view>
+			</view>
+			<view class="item">
+				<view class="item-value">
+					3.31
+				</view>
+				<view class="item-title">
+					昨日用电量(度)
+
+				</view>
+			</view>
+			<view class="item">
+				<view class="item-value">
+					3.31
+				</view>
+				<view class="item-title">
+					今日开启时长(分)
+
+				</view>
+			</view>
+			<view class="item">
+				<view class="item-value">
+					3.31
+				</view>
+				<view class="item-title">
+					今日关闭次数
+
+				</view>
+			</view>
+		</view>
+	
+	     <view class="chart">
+	     	<view class="u-subsection">
+	     		<u-subsection :list="list" :current="0" font-size="24"  button-color="#1677FF" active-color="#fff" bg-color="#f2f4f6"  ></u-subsection>
+	     	</view>
+			 
+			 <view class="date">
+			     <text>	05/02-05/08</text> <u-icon name="arrow-down" size="24" color="#777777" ></u-icon>
+			 </view>
+			 <view class="electricity-consumption">
+			 	<view class="title">
+			 		用电量(度)
+			 	</view>
+				<view class="value">
+					35.15
+				</view>
+			 </view>
+			 <view class="chart-img">
+			 	<img src="@/assets/img/jVzkNKE@3x.png" alt="" />
+			 </view>
+	     </view>
+	
+	
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+						name: '周'
+					},
+					{
+						name: '月'
+					},
+					{
+						name: '年'}
+					
+				],
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.infos{
+		margin: 24rpx 32rpx;
+		border-radius: 12px;
+		background-color: rgba(255,255,255,1);
+		padding: 40rpx 40rpx 0;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		.item{
+			width: 50%;
+			text-align: left;
+			margin-bottom: 48rpx;
+			 .item-title{
+				 color: rgba(119,119,119,1);
+				 font-size: 24rpx;
+				 margin-top: 8rpx;
+			 }
+			 .item-value{
+				 color: rgba(51,51,51,1);
+				 font-size: 56rpx;
+			 }
+		}
+	}
+   
+   .chart{
+	    padding: 32rpx;
+		margin: 0 32rpx;
+		background-color: #fff;
+	   /deep/.u-subsection {
+	   	 border-radius: 50px !important; 
+		
+	   }
+	   
+	   /deep/.u-item-bg {
+	   	border-radius: 50px !important; 
+	   	
+	   }
+	   .date{
+		   color: rgba(51,51,51,1);
+		   font-size: 32rpx;
+		   
+		   margin-top: 40rpx;
+		   text{
+			   margin-right: 16rpx;
+		   }
+	   }
+	   .electricity-consumption{
+		   margin-top: 16rpx;
+		   .title{
+			   color: rgba(16,16,16,1);
+		   }
+		   .value{
+			   color: rgb(51,51,51);
+			   font-size: 64rpx;
+			   margin-top: 16rpx;
+		   }
+	   }
+	   .chart-img{
+		   margin-top: 24rpx;
+		   img{
+			   width: 100%;
+			   height: 460rpx;
+		   }
+	   }
+   }
+</style>

pages/switchDetail/switchDetail.vue

@@ -0,0 +1,233 @@
+<template>
+	<view>
+		<u-navbar title="空调" title-color="#101010"></u-navbar>
+		
+		<view class="control-group">
+               <view class="control">
+               	<view class="text">
+               		电源
+               	</view>
+               	
+               </view>
+			   
+			   <view class="control">
+			   	<view class="text">
+			   		开关
+			   	</view>
+			   	<view class="icon">
+			   		<img src="@/assets/img/control.png" alt="" />
+			   	</view>
+			   </view>
+		</view>
+		
+		<!-- 用电信息 -->
+		<view class="electricity-information">
+			<view class="title">
+		
+				
+				<view class="text">
+					用电信息
+		
+				</view>
+				<view class="more">
+					<u-icon name="arrow-right" size="24" color="#d4d4d4"></u-icon>
+				</view>
+			</view>
+		
+			<view class="infos">
+				<view class="item" style="width: 30%;">
+					
+					<view class="item-value">
+						10.1
+					</view>
+					<view class="item-title">
+						今日用电量(度)
+					</view>
+				</view>
+				
+				<view class="item" style="width: 30%;">
+					
+					<view class="item-value">
+						310.1
+					</view>
+					<view class="item-title">
+						今日用电量(度)
+					</view>
+				</view>
+				
+				<view class="item" style="width: 30%;">
+					
+					<view class="item-value">
+						0.0
+					</view>
+					<view class="item-title">
+						今日用电量(度)
+					</view>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 日志 -->
+		<view class="log">
+		       <view class="icon">
+		       	<img src="@/assets/img/riLine-file-list-2-line.svg" alt="" />
+		       </view>
+			   <view class="text">
+			   	日志
+			   </view>
+			   <view class="more">
+			   	<u-icon name="arrow-right" size="32" color="#bbbbbb" ></u-icon>
+			   </view>
+
+		</view>
+		
+	</view>
+	
+	
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.control-group{
+		margin: 24rpx 32rpx;
+		padding: 40rpx 32rpx;
+		background-color: #fff;
+		border-radius: 8px;
+		
+		 .control:first-of-type{
+			 margin-top: 0;
+		 }
+		.control{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: 56rpx;
+			.text{
+				color: rgba(51,51,51,1);
+				font-size: 32rpx;
+				font-weight: bold;
+			}
+			.icon{
+				img{
+					width: 64rpx;
+					height: 64rpx;
+				}
+			}
+		}
+		
+		
+	}
+	
+	.electricity-information {
+		margin: 24rpx 32rpx;
+		padding: 40rpx 0rpx;
+		background-color: #fff;
+		border-radius: 8px;
+	
+		.title {
+			display: flex;
+			align-items: center;
+			padding: 0 32rpx;
+			margin-bottom: 40rpx;
+	
+			
+	
+			.text {
+				display: flex;
+				align-items: center;
+				color: rgba(51, 51, 51, 1);
+				font-size: 36rpx;
+				margin-left: 16rpx;
+				font-weight: bold;
+			}
+	
+			.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;
+	
+			
+	
+			.item-title {
+				color: rgba(119,119,119,1);
+				font-size: 24rpx;
+				margin-top: 8rpx;
+			}
+	
+			.item-value {
+				color: rgba(16, 16, 16, 1);
+				font-size: 56rpx;
+				margin-top: 16rpx;
+			}
+	
+		}
+	}
+    
+	
+  .log{
+	  margin: 24rpx 32rpx;
+	  		padding: 40rpx 32rpx;
+	  		background-color: #fff;
+	  		border-radius: 8px;
+			display: flex;
+			align-items: center;
+	  		.icon{
+				width: 88rpx;
+				height: 88rpx;
+				border-radius: 999px;
+				background-color: rgba(22,119,255,1);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				img{
+					width: 48rpx;
+					height: 48rpx;
+				}
+			}
+			.text{
+				color: rgba(51,51,51,1);
+				font-size: 32rpx;
+				margin-left: 24rpx;
+				font-weight: bold;
+			}
+			.more{
+				margin-left: auto;
+			}
+	  
+  }	
+</style>