设备数据监测-地图 设备用电量

App.vue

@@ -31,9 +31,51 @@
 	  margin: 0;
 	  padding: 0;
 	}
+	// 导航
+	.navbar-c{
+		background-color: #fff;
+		line-height: 88rpx;
+		padding: 0 24rpx;
+		display: flex;
+		align-items: center;
+		position: relative;
+		
+		.title{
+			color: rgb(16,16,16);
+			font-size: 36rpx;
+			    flex: 1;
+			    position: absolute;
+			    left: 0;
+			    right: 0;
+			    text-align: center;
+			    flex-shrink: 0;
+			
+			.img{
+				width: 32rpx;
+				height: 32rpx;
+				vertical-align: middle;
+				margin-left: 8rpx;
+			}
+		}
+		.right{
+			display: flex;
+			align-items: center;
+			margin-left: auto;
+			.img{
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 4rpx;
+			}
+		}
+	}
 	// 导航栏标题文字
 	.u-title {
-		font-size: 40rpx !important
+		font-size: 36rpx !important
+	}
+	/deep/.uicon-nav-back{
+		color: #101010 !important;
+		font-weight: bold !important;
+		font-size: 36rpx !important
 	}
 	#__vconsole{
 		z-index: 99999;

assets/img/antFill-alert Copy 1.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="64 64 896 896" width="20" height="20" style="" filter="none">
+    
+    <g>
+    <path d="M512 244c176.18 0 319 142.82 319 319v233a32 32 0 0 1-32 32H225a32 32 0 0 1-32-32V563c0-176.18 142.82-319 319-319zM484 68h56a8 8 0 0 1 8 8v96a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8V76a8 8 0 0 1 8-8zM177.25 191.66a8 8 0 0 1 11.32 0l67.88 67.88a8 8 0 0 1 0 11.31l-39.6 39.6a8 8 0 0 1-11.31 0l-67.88-67.88a8 8 0 0 1 0-11.31l39.6-39.6zm669.6 0l39.6 39.6a8 8 0 0 1 0 11.3l-67.88 67.9a8 8 0 0 1-11.32 0l-39.6-39.6a8 8 0 0 1 0-11.32l67.89-67.88a8 8 0 0 1 11.31 0zM192 892h640a32 32 0 0 1 32 32v24a8 8 0 0 1-8 8H168a8 8 0 0 1-8-8v-24a32 32 0 0 1 32-32zm148-317v253h64V575h-64z" fill="rgba(255,61,0,1)"></path>
+    </g>
+  </svg>

assets/img/antFill-alert(1).svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="64 64 896 896" width="20" height="20" style="" filter="none">
+    
+    <g>
+    <path d="M512 244c176.18 0 319 142.82 319 319v233a32 32 0 0 1-32 32H225a32 32 0 0 1-32-32V563c0-176.18 142.82-319 319-319zM484 68h56a8 8 0 0 1 8 8v96a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8V76a8 8 0 0 1 8-8zM177.25 191.66a8 8 0 0 1 11.32 0l67.88 67.88a8 8 0 0 1 0 11.31l-39.6 39.6a8 8 0 0 1-11.31 0l-67.88-67.88a8 8 0 0 1 0-11.31l39.6-39.6zm669.6 0l39.6 39.6a8 8 0 0 1 0 11.3l-67.88 67.9a8 8 0 0 1-11.32 0l-39.6-39.6a8 8 0 0 1 0-11.32l67.89-67.88a8 8 0 0 1 11.31 0zM192 892h640a32 32 0 0 1 32 32v24a8 8 0 0 1-8 8H168a8 8 0 0 1-8-8v-24a32 32 0 0 1 32-32zm148-317v253h64V575h-64z" fill="rgba(39,177,72,1)"></path>
+    </g>
+  </svg>

assets/img/antFill-alert(2).svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="64 64 896 896" width="12" height="12" style="" filter="none">
+    
+    <g>
+    <path d="M512 244c176.18 0 319 142.82 319 319v233a32 32 0 0 1-32 32H225a32 32 0 0 1-32-32V563c0-176.18 142.82-319 319-319zM484 68h56a8 8 0 0 1 8 8v96a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8V76a8 8 0 0 1 8-8zM177.25 191.66a8 8 0 0 1 11.32 0l67.88 67.88a8 8 0 0 1 0 11.31l-39.6 39.6a8 8 0 0 1-11.31 0l-67.88-67.88a8 8 0 0 1 0-11.31l39.6-39.6zm669.6 0l39.6 39.6a8 8 0 0 1 0 11.3l-67.88 67.9a8 8 0 0 1-11.32 0l-39.6-39.6a8 8 0 0 1 0-11.32l67.89-67.88a8 8 0 0 1 11.31 0zM192 892h640a32 32 0 0 1 32 32v24a8 8 0 0 1-8 8H168a8 8 0 0 1-8-8v-24a32 32 0 0 1 32-32zm148-317v253h64V575h-64z" fill="rgba(255,255,255,1)"></path>
+    </g>
+  </svg>

assets/img/energyMeter.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="24" height="24" style="" filter="none">
+    
+    <g>
+    <path d="M883.541333 106.666667c18.688 0 33.792 15.104 33.792 33.792v743.082666a33.792 33.792 0 0 1-33.792 33.792H140.458667a33.792 33.792 0 0 1-33.792-33.792V140.458667c0-18.688 15.104-33.792 33.792-33.792h743.082666z m-298.965333 327.424a11.52 11.52 0 0 0-15.914667 0.085333l-215.552 211.2a10.709333 10.709333 0 0 0-3.2 8.533333l-0.042666 0.853334a11.093333 11.093333 0 0 0 11.264 10.922666h113.664l-37.845334 153.6a10.666667 10.666667 0 0 0-0.298666 2.645334 10.666667 10.666667 0 0 0 2.773333 11.178666 11.434667 11.434667 0 0 0 15.914667-0.085333l215.552-211.2a10.666667 10.666667 0 0 0-2.901334-17.365333 11.434667 11.434667 0 0 0-6.997333-2.389334H550.826667l36.992-155.989333a10.581333 10.581333 0 0 0 0.042666-4.608 10.752 10.752 0 0 0-3.328-7.381333z m231.424-259.84H208c-17.109333 0-31.573333 12.8-33.536 29.781333l-0.256 3.968v135.125333c0 17.109333 12.8 31.530667 29.866667 33.536l3.925333 0.213334h608c17.109333 0 31.573333-12.8 33.536-29.824l0.256-3.925334V208a33.792 33.792 0 0 0-33.792-33.792zM512 207.957333c18.645333 0 33.792 15.104 33.792 33.792V309.333333a33.792 33.792 0 0 1-67.584 0V241.792c0-18.688 15.146667-33.792 33.792-33.792z m168.874667 0c18.688 0 33.792 15.104 33.792 33.792V309.333333a33.792 33.792 0 0 1-67.541334 0V241.792c0-18.688 15.104-33.792 33.749334-33.792z m-337.749334 0c18.645333 0 33.749333 15.104 33.749334 33.792V309.333333a33.792 33.792 0 1 1-67.541334 0V241.792c0-18.688 15.104-33.792 33.792-33.792z" fill="rgba(22,119,255,1)" p-id="4467" stroke="none"></path>
+    </g>
+  </svg>

assets/img/riLine-list-check-2.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="M14.667 5.333h13.333v2.667h-13.333v-2.667zM14.667 10.667h8v2.667h-8v-2.667zM14.667 18.667h13.333v2.667h-13.333v-2.667zM14.667 24h8v2.667h-8v-2.667zM4 5.333h8v8h-8v-8zM6.667 8v2.667h2.667v-2.667h-2.667zM4 18.667h8v8h-8v-8zM6.667 21.333v2.667h2.667v-2.667h-2.667z" fill="rgba(51,51,51,1)"></path>
+    </g>
+  </svg>

pages.json

@@ -360,6 +360,22 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/equipmentDataMonitoring/dataMonitoring-map",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/equipmentDataMonitoring/equipmentElectricity",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
        
     ],

pages/abnormal/abnormalAlarmRecord.vue

@@ -149,11 +149,17 @@
 <style lang="scss" scoped>
 	.dropdown{
 		background-color: #fff;
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 88rpx;
+		z-index: 999;
 	}
  
   // 记录
   .records{
 	  background-color: #fff;
+	  margin-top: 80rpx;
 	  .records-item{
 		  display: flex;
 		  align-items: center;

pages/equipmentDataMonitoring/dataMonitoring-list.vue

@@ -1,12 +1,23 @@
 <template>
 	<view>
-		<u-navbar title="设备数据监测"  title-color="#101010" >
+		<!-- <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>
+		</u-navbar> -->
+		<view class="navbar-c">
+			<view class="back">
+				<u-icon name="arrow-left" color="#101010" size="36"></u-icon>
+			</view>
+			<view class="title">
+				设备数据监测<image class="img" src="@/assets/img/refresh-line.svg"></image>
+			</view>
+			<view class="right">
+				<image class="img" src="@/assets/img/riLine-road-map-line.svg" mode=""></image>地图
+			</view>
+		</view>
 		<view class="dropdown">
 				<u-dropdown>
 					<u-dropdown-item v-model="value1" title="全部设备" :options="options1"></u-dropdown-item>
@@ -364,6 +375,7 @@
 </script>
 
 <style lang="scss" scoped>
+	
 	.slot{
 		display: flex;
 		align-items: center;
@@ -385,6 +397,7 @@
 	
 	.main{
 		background-color: #fff;
+		margin-top: 80rpx;
 		.item{
 			border-bottom: 1px solid rgba(245,245,245,1);
 			padding: 32rpx 32rpx  16rpx 32rpx;

pages/equipmentDataMonitoring/dataMonitoring-map.vue

@@ -0,0 +1,399 @@
+<template>
+	<view>
+		<!-- <u-navbar title="设备数据监测"  title-color="#101010" > -->
+		<view class="navbar-c">
+			<view class="back">
+				<u-icon name="arrow-left" color="#101010" size="36"></u-icon>
+			</view>
+			<view class="title">
+				设备数据监测<image class="img" src="@/assets/img/refresh-line.svg"></image>
+			</view>
+			<view class="right">
+				<image class="img" src="@/assets/img/riLine-road-map-line.svg" mode=""></image>列表
+			</view>
+		</view>
+			
+			<view class="slot" slot="right">
+				<image class="img" src="@/assets/img/riLine-list-check-2.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="map">
+				<image class="img" src="@/assets/img/map.png" mode=""></image>
+				<!-- 标注1 -->
+				<view class="location1">
+					<image class="img" src="@/assets/img/antFill-alert Copy 1.svg" mode=""></image>
+					<view class="corner">
+						
+					</view>
+				</view>
+				<!-- 标注2 -->
+				<view class="location2">
+					<view class="icon2-left">
+						<image class="img1" src="@/assets/img/antFill-alert.svg" mode=""></image>
+					</view>
+					<view class="icon2-right">
+						<view class="corner2"></view>
+						<view class="corner2-top">
+							荆鹏软件园01
+						</view>
+						<view class="corner2-bottom">
+							<image class="img2" src="@/assets/img/antFill-alert(2).svg"></image>正常
+						</view>
+					</view>
+				</view>
+				<view class="card">
+					<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>
+	</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;
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 88rpx;
+		z-index: 999;
+	}
+	// 地图
+	.map{
+		position: relative;
+		.img{
+			width: 100%;
+			height: 100vh;
+		}
+		.location1 {
+					width: 36px;
+					height: 36px;
+					
+					text-align: center;
+					border: 2px solid #FF3D00;
+					border-radius: 999px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					position: absolute;
+					top: 89px;
+					left: 38px;
+					.img{
+						width: 40rpx;
+						height: 40rpx;
+					}
+					.corner {
+						width: 0;
+						height: 0;
+						position: absolute;
+						top: 34px;
+						left: 0;
+						right: 0;
+						margin: auto;
+						border-bottom: 8rpx solid transparent;
+						border-left: 8rpx solid transparent;
+						border-right: 8rpx solid transparent;
+						border-top: 12rpx solid #FF3D00;
+					}
+				}
+				.location2 {
+					width: 280rpx;
+					border-radius: 50px;
+					background-color: #27B148;
+					display: flex;
+					position: absolute;
+					top: 370rpx;
+					left: 280rpx;
+				
+					.icon2-left {
+						width: 72rpx;
+						height: 72rpx;
+						line-height: 72rpx;
+						text-align: center;
+						border: 1px solid rgba(0, 185, 98, 100);
+						border-radius: 999px;
+						background-color: #fff;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						.img1{
+							width: 40rpx;
+							height: 40rpx;
+						}
+					}
+				
+					.icon2-right {
+						color: #ffffff;
+						line-height: 36rpx;
+						padding-left: 8rpx;
+						font-size: 14px;
+						.corner2-top{
+							font-weight: bold;
+						}
+						.corner2-bottom{
+							font-size: 24rpx;
+							.img2{
+								width: 24rpx;
+								height: 24rpx;
+							}
+						}
+					}
+					.corner2 {
+						width: 0;
+						height: 0;
+						position: absolute;
+						top: 72rpx;
+						left: 0;
+						right: 0;
+						margin: auto;
+						border-bottom: 6px solid transparent;
+						border-left: 6px solid transparent;
+						border-right: 6px solid transparent;
+						border-top: 8px solid #27B148;
+					
+					}
+				}
+		// 卡片
+		.card{
+			border-radius: 8px;
+			border: 1px solid rgba(232,232,232,1);
+			box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
+			background-color: rgba(255,255,255,1);
+			position: fixed;
+			left: 24rpx;
+			right: 24rpx;
+			bottom: 32rpx;
+			.item{
+				border-bottom: 1px solid rgba(245,245,245,1);
+				padding: 32rpx 16rpx  16rpx 16rpx;
+				.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{
+						
+						display: flex;
+						margin-bottom: 16rpx;
+						.warning{
+							color: rgba(255,61,0,1);
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/equipmentDataMonitoring/equipmentElectricity.vue

@@ -0,0 +1,156 @@
+<template>
+	<view>
+		<view class="navbar-c">
+			<view class="back">
+				<u-icon name="arrow-left" color="#101010" size="36"></u-icon>
+			</view>
+			<view class="title">
+				设备用电量<image class="img" src="@/assets/img/refresh-line.svg"></image>
+			</view>
+			
+		</view>
+		<!-- 标签 -->
+		<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">
+				<u-icon name="arrow-down" color="#999999"></u-icon>
+			</view>
+		</view>
+		<!-- 用电量 -->
+		<view class="main">
+			<view class="item" v-for="item in 3">
+				<view class="icon">
+					<image class="img" src="@/assets/img/energyMeter.svg" mode=""></image>
+				</view>
+				<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>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '全部'
+				}, {
+					name: '荆鹏集团'
+				}, {
+					name: '青少年宫',
+					
+				}, {
+					name: '荆州院子',
+					
+				}],
+				current: 0
+			}
+		},
+		methods: {
+			change(index) {
+				this.current = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tabs-box{
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		.tabs{
+			width: 80%;
+		}
+		.icon{
+			margin-left: auto;
+			margin-right: 24rpx;
+		}
+	}
+   // 用电量
+   .main{
+	   background-color: #fff;
+	   .item{
+		   padding: 32rpx;
+		   display: flex;
+		   align-items: center;
+		   border-bottom: 1px solid rgba(245,245,245,1);
+		   .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;
+			   }
+		   }
+		   .equipment{
+			   margin-left: 16rpx;
+			   .equipment1{
+				   color: rgba(51,51,51,1);
+				   font-size: 32rpx;
+			   }
+			   .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;
+				   }
+			   }
+		   }
+	   }
+   }
+</style>