设备数据监测-列表

assets/img/riLine-road-map-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="16" height="16" style="" filter="none">
+    
+    <g>
+    <path d="M5.333 8.191v17.099l6.753-2.893 8 4 6.58-2.823v-17.097l1.737-0.744c0.077-0.034 0.168-0.054 0.263-0.054 0.368 0 0.667 0.298 0.667 0.667 0 0 0 0 0 0.001v-0 18.988l-9.333 4-8-4-8.404 3.601c-0.077 0.034-0.168 0.054-0.263 0.054-0.368 0-0.667-0.298-0.667-0.667 0-0 0-0 0-0.001v0-18.988l2.667-1.143zM21.657 14.991l-5.657 5.656-5.657-5.656c-1.447-1.448-2.343-3.447-2.343-5.656 0-4.418 3.582-8 8-8s8 3.582 8 8c0 2.209-0.895 4.209-2.343 5.656l0-0zM16 16.876l3.771-3.772c0.965-0.965 1.563-2.299 1.563-3.772 0-2.946-2.388-5.333-5.333-5.333s-5.333 2.388-5.333 5.333c0 1.473 0.597 2.807 1.563 3.772l3.771 3.772z" fill="rgba(51,51,51,1)"></path>
+    </g>
+  </svg>

pages.json

@@ -352,6 +352,14 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/equipmentDataMonitoring/dataMonitoring-list",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
        
     ],

pages/equipmentDataMonitoring/dataMonitoring-list.vue

@@ -0,0 +1,455 @@
+<template>
+	<view>
+		<u-navbar title="设备数据监测"  title-color="#101010" >
+			
+			<view class="slot" slot="right">
+				<image class="img" src="@/assets/img/riLine-road-map-line.svg" mode=""></image>地图
+			
+			</view>
+		</u-navbar>
+		<view class="dropdown">
+				<u-dropdown>
+					<u-dropdown-item v-model="value1" title="全部设备" :options="options1"></u-dropdown-item>
+					<u-dropdown-item v-model="value2" title="全部状态" :options="options2"></u-dropdown-item>
+				</u-dropdown>
+			</view>
+			
+			<view class="main">
+				<view class="item">
+					<view class="title">
+					<view class="icon-box">
+						<image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
+					</view>
+					<view class="equipment">
+						<view class="name1">
+							荆鹏软件园01
+						</view>
+						<view class="name2">
+							荆鹏集团
+						</view>
+					</view>
+					<!-- 状态 -->
+					<view class="state">
+						<view class="state1">
+							<view class="icon">
+								
+							</view>
+							<view class="text">
+								正常运行
+							</view>
+						</view>
+						<view class="state1">
+							<view class="icon">
+								
+							</view>
+							<view class="text">
+								烟感正常
+							</view>
+						</view>
+					</view>
+					</view>
+					<!-- 设备信息 -->
+					<view class="infos">
+						<view class="infos-item" >
+							<view class="item-title">
+								当前电流：
+							</view>
+							<view class="item-value">
+								20A
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前电压：
+							</view>
+							<view class="item-value">
+								380V
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前温度：
+
+							</view>
+							<view class="item-value">
+								80°C
+
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前功率：
+
+						
+							</view>
+							<view class="item-value">
+								80kW
+						
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前功率因数：
+
+						
+						
+							</view>
+							<view class="item-value">
+								0.98
+						
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								平均功率因数：
+
+						
+						
+						
+							</view>
+							<view class="item-value">
+								0.97
+						
+							</view>
+						</view>
+					</view>
+				</view>
+				
+				<view class="item">
+					<view class="title">
+					<view class="icon-box">
+						<image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
+					</view>
+					<view class="equipment">
+						<view class="name1">
+							玉桥公园02
+						</view>
+						<view class="name2">
+							荆鹏集团
+						</view>
+					</view>
+					<!-- 状态 -->
+					<view class="state">
+						<view class="state1">
+							<view class="icon icon2">
+								
+							</view>
+							<view class="text">
+								温度异常
+							</view>
+						</view>
+						<view class="state1">
+							<view class="icon">
+								
+							</view>
+							<view class="text">
+								烟感正常
+							</view>
+						</view>
+					</view>
+					</view>
+					<!-- 设备信息 -->
+					<view class="infos">
+						<view class="infos-item" >
+							<view class="item-title">
+								当前电流：
+							</view>
+							<view class="item-value">
+								20A
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前电压：
+							</view>
+							<view class="item-value">
+								380V
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前温度：
+					
+							</view>
+							<view class="item-value warning">
+								120°C
+					
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前功率：
+					
+						
+							</view>
+							<view class="item-value">
+								80kW
+						
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前功率因数：
+					
+						
+						
+							</view>
+							<view class="item-value">
+								0.98
+						
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								平均功率因数：
+					
+						
+						
+						
+							</view>
+							<view class="item-value">
+								0.97
+						
+							</view>
+						</view>
+					</view>
+				</view>
+				
+				<view class="item">
+					<view class="title">
+					<view class="icon-box">
+						<image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
+					</view>
+					<view class="equipment">
+						<view class="name1">
+							御河社区03
+						</view>
+						<view class="name2">
+							荆鹏集团
+						</view>
+					</view>
+					<!-- 状态 -->
+					<view class="state">
+						<view class="state1">
+							<view class="icon icon2">
+								
+							</view>
+							<view class="text">
+								温度异常
+							</view>
+						</view>
+						<view class="state1">
+							<view class="icon">
+								
+							</view>
+							<view class="text">
+								烟感正常
+							</view>
+						</view>
+					</view>
+					</view>
+					<!-- 设备信息 -->
+					<view class="infos">
+						<view class="infos-item" >
+							<view class="item-title">
+								当前电流：
+							</view>
+							<view class="item-value">
+								20A
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前电压：
+							</view>
+							<view class="item-value">
+								380V
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前温度：
+					
+							</view>
+							<view class="item-value">
+								80°C
+					
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前功率：
+					
+						
+							</view>
+							<view class="item-value">
+								80kW
+						
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								当前功率因数：
+					
+						
+						
+							</view>
+							<view class="item-value">
+								0.98
+						
+							</view>
+						</view>
+						<view class="infos-item" >
+							<view class="item-title">
+								平均功率因数：
+					
+						
+						
+						
+							</view>
+							<view class="item-value">
+								0.97
+						
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value1: 1,
+				value2: 1,
+				options1: [{
+						label: '荆鹏集团',
+						value: 1,
+					},
+					{
+						label: '青少年宫',
+						value: 2,
+					},
+					{
+						label: '荆州院子',
+						value: 3,
+					},
+					
+				],
+				options2: [{
+						label: '设备离线',
+						value: 1,
+					},
+					{
+						label: '温度异常',
+						value: 2,
+					},
+					{
+						label: '电压异常',
+						value: 3,
+					},
+					{
+						label: '功率因数异常',
+						value: 4,
+					},
+				],
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.slot{
+		display: flex;
+		align-items: center;
+		.img{
+			width: 32rpx;
+			height: 32rpx;
+			margin-right: 4rpx;
+		}
+	}
+	
+	.dropdown{
+		background-color: #fff;
+	}
+	
+	.main{
+		background-color: #fff;
+		.item{
+			border-bottom: 1px solid rgba(245,245,245,1);
+			padding: 32rpx 32rpx  16rpx 32rpx;
+			.title{
+				display: flex;
+				align-items: flex-start;
+				.icon-box{
+					width: 72rpx;
+					height: 72rpx;
+					border-radius: 4px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background-color: rgba(219,234,255,1);
+					.img{
+						width: 48rpx;
+						height: 48rpx;
+					}
+				}
+				.equipment{
+					margin-left: 16rpx;
+					.name1{
+						color: rgba(51,51,51,1);
+					}
+					.name2{
+						color: rgba(119,119,119,1);
+						font-size: 24rpx;
+						margin-top: 4rpx;
+					}
+				}
+				// 状态
+				.state{
+					display: flex;
+					align-items: center;
+					margin-left: auto;
+					.state1{
+						display: flex;
+						align-items: center;
+						margin-left: 24rpx;
+						.icon{
+							width: 16rpx;
+							height: 16rpx;
+							border-radius: 99px;
+							background-color: rgba(22,119,255,1);
+							margin-right: 8rpx;
+						}
+						.icon2{
+							background-color:#FF4F3F;
+						}
+					}
+				}
+			}
+			// 设备信息
+			.infos{
+				margin-top: 32rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				font-size: 24rpx;
+				.infos-item{
+					width: 33%;
+					display: flex;
+					margin-bottom: 16rpx;
+					.warning{
+						color: rgba(255,61,0,1);
+					}
+				}
+			}
+		}
+	}
+
+</style>