新增设备状态监测页面

pages.json

@@ -270,6 +270,14 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/equipmentConditionMonitoring/equipmentConditionMonitoring",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
        
     ],

pages/equipmentConditionMonitoring/equipmentConditionMonitoring.vue

@@ -0,0 +1,219 @@
+<template>
+	<view>
+		<u-navbar title="设备状态监测" title-color="#101010"></u-navbar>
+		
+		<view class="dropdown">
+			<view class="dropdown-item" @click="show1=true">
+				
+				<view class="text">
+					{{device}} 
+				</view>
+				<view class="item-icon">
+					<u-icon name="arrow-down" color="#999999" v-if="show1==false"></u-icon>
+					<u-icon name="arrow-up" color="#999999" v-else></u-icon>
+				</view>
+			</view>
+			<view class="dropdown-item" @click="show2=true">
+				<view class="text">
+					{{company}} 
+				</view>
+				<view class="icon">
+					<u-icon name="arrow-down" color="#999999" v-if="show2==false"></u-icon>
+					<u-icon name="arrow-up" color="#999999" v-else></u-icon>
+				</view>
+			</view>
+		</view>
+		<u-select v-model="show1" mode="single-column" :list="deviceList" ></u-select>
+		
+		<u-select v-model="show2" mode="single-column" :list="companyList" ></u-select>
+	      
+		  <view class="main">
+		  	<view class="item">
+		  		<view class="item-icon">
+		  			<image class="img" src="@/assets/img/energy1.svg" mode=""></image>
+		  		</view>
+				<view class="item-content">
+					<view class="content1">
+						<view class="name1">
+							格莱慧费控电表
+						</view>
+						<view class="name2">
+							荆鹏A栋1101
+						</view>
+					</view>
+					<view class="content2">
+						费控电量计量仪
+					</view>
+				</view>
+				<view class="item-state">
+					<view class="dot off-line">
+						
+					</view>
+					<view class="text">
+						离线
+					</view>
+					<view class="more">
+						<u-icon name="arrow-right" size="24" color="#acacac"></u-icon>
+					</view>
+				</view>
+		  	</view>
+			
+			<view class="item">
+				<view class="item-icon">
+					<image class="img" src="@/assets/img/transformer2.svg" mode=""></image>
+				</view>
+				<view class="item-content">
+					<view class="content1">
+						<view class="name1">
+							格莱慧费控电表
+						</view>
+						<view class="name2">
+							荆鹏A栋1101
+						</view>
+					</view>
+					<view class="content2">
+						费控电量计量仪
+					</view>
+				</view>
+				<view class="item-state">
+					<view class="dot on-line">
+						
+					</view>
+					<view class="text">
+						在线
+					</view>
+					<view class="more">
+						<u-icon name="arrow-right" size="24" color="#acacac"></u-icon>
+					</view>
+				</view>
+			</view>
+		  </view>
+	   
+	
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show1: false, 
+				show2: false, 
+				device: '全部设备',
+				company: '全部公司',
+				deviceList: [],
+				companyList: [],
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.dropdown {
+		background-color: #fff;
+		position: sticky;
+		top: 88rpx;
+		z-index: 999;
+		padding: 18rpx 46rpx;
+		display: flex;
+		border-bottom: 1px solid rgba(245, 245, 245, 1);
+	
+		.dropdown-item {
+			width: 50%;
+			text-align: center;
+			height: 60rpx;
+			line-height: 60rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.text{
+				max-width: 80%;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+   .main{
+	   background-color: #fff;
+	   padding: 0 32rpx;
+	   .item:last-of-type{
+		   border: none;
+	   }
+	   .item{
+		   padding: 32rpx 0;
+		   display: flex;
+		   align-items: center;
+		   border-bottom: 1px solid rgba(245,245,245,1);
+		   .item-icon{
+			   width: 72rpx;
+			   height: 72rpx;
+			   border-radius: 4px;
+			   background-color: rgba(219,234,255,1);
+			   display: flex;
+			   align-items: center;
+			   justify-content: center;
+			   .img{
+				   width: 48rpx;
+				   height: 48rpx;
+			   }
+		   }
+		   .item-content{
+			   margin-left: 16rpx;
+			   .content1{
+				   display: flex;
+				   align-items: center;
+				   .name1{
+					   color: rgba(51,51,51,1);
+					   font-weight: bold;
+				   }
+				   .name2{
+					   color: rgba(119,119,119,1);
+					   font-size: 24rpx;
+					   margin-left: 16rpx;
+				   }
+			   }
+			   .content2{
+				   color: rgba(119,119,119,1);
+				   font-size: 12px;
+			   }
+		   }
+	   }
+	    .item-state{
+			margin-left: auto;
+			display: flex;
+			align-items: center;
+			.dot {
+			
+				width: 16rpx;
+				height: 16rpx;
+				border-radius: 999px;
+				
+				
+			}
+			.text{
+				margin: 0 8rpx;
+				color: rgba(51,51,51,1);
+				font-size: 24rpx;
+			}
+			.off-line {
+								   
+				background-color: rgba(255, 123, 0, 1);
+								
+			}
+								
+			.on-line {
+				background-color: rgba(0, 185, 98, 1);
+			}
+		}
+   }
+
+
+
+
+</style>