feat:闸门页面

pages/fmSys/details.vue

@@ -1,6 +1,13 @@
 <template>
-	<view>
-		<view class="title"></view>
+	<view class="fm-page">
+		<uni-nav-bar left-icon="back" background-color='rgba(0,0,0,0)' title="闸门" @clickLeft="clickLeft">
+		<!-- 	<view class="self-title">标题栏</view>
+			<template v-slot:left><view class="self-back"><uni-icons type="arrowleft" size="24"></uni-icons></view></template>
+		 -->
+		</uni-nav-bar>
+		<view class="fm-content">
+			
+		
 		<view class="info">
 			<view class="device-id" @click="copy(equipInfo)">
 				<image class="logo"
@@ -24,8 +31,8 @@
 				<span class="float-left">设备地址：</span> <span
 					class="float-right">{{equipInfo.address?equipInfo.address:"--"}}</span>
 			</view>
-
-
+		
+		
 			<u-calendar v-model="calendar_show" mode="date" :max-date="date" @change="timeChange($event)">
 			</u-calendar>
 			<u-toast ref="toast" />
@@ -34,9 +41,12 @@
 		<view class="newState">
 			<view class="top">
 				<view class="left">
-					<image class="img" src="/appIcon/zk.png"></image>
-					<p> <span class="num">100</span> mm</p>
-					<p>闸门下降中</p>
+					<image class="img" src="https://www.hnyfwlw.com:8006/bigdata_app/image/irrigate/fm.png"></image>
+					<view>
+						<p> <span class="num">100</span> mm</p>
+						<p>闸门下降中...</p>
+					</view>
+					
 				</view>
 				<view class="right btn">
 					<u-button text="设置开度" size="mini" @click="timeshow = true">设置开度</u-button>
@@ -45,7 +55,7 @@
 			<view class="up-down">
 				<view class="bottom">
 					<view class="opt">
-						<image src="https://www.hnyfwlw.com:8006/bigdata_app/image/cb/2.png"></image>
+						<image src="https://www.hnyfwlw.com:8006/bigdata_app/image/irrigate/fm-up.png"></image>
 						<p class="num">到位</p>
 						<p>顶到位</p>
 					</view>
@@ -55,7 +65,7 @@
 				</view>
 				<view class="bottom">
 					<view class="opt">
-						<image src="https://www.hnyfwlw.com:8006/bigdata_app/image/cb/2.png"></image>
+						<image src="https://www.hnyfwlw.com:8006/bigdata_app/image/irrigate/fm-down.png"></image>
 						<p class="num">未到位</p>
 						<p>底到位</p>
 					</view>
@@ -69,10 +79,10 @@
 			</view>
 		</view>
 		
-			<!-- 操作记录 -->
-					<view class="consoleList">
-						<view class="title">操作记录</view>
-						<!-- <view class="histimeBox">
+		<!-- 操作记录 -->
+		<view class="consoleList">
+			<view class="title">操作记录</view>
+			<!-- <view class="histimeBox">
 							<u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
 							<view class="time" @click="consoleshow = true">
 								{{consoleTime.startDate ? consoleTime.startDate : '开始'}}
@@ -84,21 +94,21 @@
 								v-if="consoleTime.startDate"></u-icon>
 						</view>
 						<u-calendar v-model="consoleshow" mode="range" @change="changeConsoleDate"></u-calendar> -->
-						<view class="tableList tableTitle">
-							
-							<view>时间</view>
-							<view>操作内容</view>
-							<view>操作结果</view>
-							<view>操作人</view>
-						</view>
-						<view class="tableList" v-for="(item, index) in tableData" :key="item.uptime + index">
-							<view>{{item.uptime}}</view>
-							<view :class="item.status ? 'success' : 'error'">{{item.operation_content}}</view>
-							<view>{{item.uptime}}</view>
-							<view>{{item.device_name}}</view>
-						</view>
-						<u-loadmore style="margin-top: 16rpx;" :status="status" />
-					</view>
+			<view class="tableList tableTitle">
+		
+				<view>时间</view>
+				<view>操作内容</view>
+				<view>操作结果</view>
+				<view>操作人</view>
+			</view>
+			<view class="tableList" v-for="(item, index) in tableData" :key="item.uptime + index">
+				<view>{{item.uptime}}</view>
+				<view :class="item.status ? 'success' : 'error'">{{item.operation_content}}</view>
+				<view>{{item.uptime}}</view>
+				<view>{{item.device_name}}</view>
+			</view>
+			<u-loadmore style="margin-top: 16rpx;" :status="status" />
+		</view>
 		<view class="item" v-for="item in curState">
 			<view class="item_info_img">
 				<image :src="'https://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
@@ -108,7 +118,7 @@
 					{{item.value | formatValue(item.txt,type)}}
 				</view>
 				<view class="val">
-					
+		
 				</view>
 			</view>
 		</view>
@@ -142,9 +152,14 @@
 				dataloadingtf: true, //加载中提示
 				date: "", //日历最大可选日期
 				operateType: '',
-				status:'',//是否加载更多
-				page:1,
-				tableData:[{uptime:'06-11 14:02',operation_content:'指定开度（700mm）',device_name:'admin'}]
+				status: '', //是否加载更多
+				page: 1,
+				tableData: [{
+					uptime: '06-11 14:02',
+					operation_content: '指定开度（700mm）',
+					device_name: 'admin'
+				}
+				]
 			}
 		},
 		computed: {
@@ -193,17 +208,17 @@
 
 			this.equipInfo = JSON.parse(option.info)
 			console.log(this.equipInfo)
-	// 		this.getDeviceStatus()
-	// 		this.type = Number(this.equipInfo.type) || Number(this.equipInfo.equip_type) || Number(this.equipInfo
-	// 			.device_type_id)
-	// 		this.equipInfo.type = this.type
-	
+			// 		this.getDeviceStatus()
+			// 		this.type = Number(this.equipInfo.type) || Number(this.equipInfo.equip_type) || Number(this.equipInfo
+			// 			.device_type_id)
+			// 		this.equipInfo.type = this.type
+
 
-	// 		this.getState()
+			// 		this.getState()
 
-	// 		// this.selectaddress(Number(this.equipInfo.lat), Number(this.equipInfo.lng))
-	// 		var times = new Date()
-	// 		this.date = times.getFullYear() + 1 + "-" + Number(times.getMonth() + 1) + "-" + times.getDate()
+			// 		// this.selectaddress(Number(this.equipInfo.lat), Number(this.equipInfo.lng))
+			// 		var times = new Date()
+			// 		this.date = times.getFullYear() + 1 + "-" + Number(times.getMonth() + 1) + "-" + times.getDate()
 		},
 		methods: {
 			//操作记录
@@ -412,10 +427,17 @@
 
 <style lang='scss'>
 	page {
-		padding: 0rpx 32rpx;
-		box-sizing: border-box;
-		background: #F7F7F7;
+		height: 100%;
 
+		.fm-page {
+			width: 100%;
+			min-height: 100%;
+			background: linear-gradient(180deg, #f5f6fa00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
+		}
+		.fm-content{
+			padding: 0rpx 32rpx;
+			box-sizing: border-box;
+		}
 		.title {
 			color: #999999;
 			margin: 32rpx 0;
@@ -457,34 +479,39 @@
 			color: #999999;
 		}
 
-	.info {
+		.info {
 			position: relative;
 			padding: 8rpx 32rpx 32rpx 32rpx;
-			
+
 			line-height: 50rpx;
 			font-size: 26rpx;
 			border-radius: 24rpx;
-			
+
 			background-color: #fff;
-			
+
 			box-sizing: border-box;
 			width: 100%;
-			.info-list{
+
+			.info-list {
 				overflow: hidden;
 				font-size: 12px;
-				.float-right{
+
+				.float-right {
 					float: right;
 					color: #666;
-					.arrow{
+
+					.arrow {
 						margin-left: 10rpx;
 					}
 				}
-				.float-left{
+
+				.float-left {
 					float: left;
 					color: #999;
 				}
-				
+
 			}
+
 			.tishi {
 				width: 28rpx;
 				height: 28rpx;
@@ -525,6 +552,8 @@
 
 				.left {
 					width: 80%;
+					display: flex;
+					align-items: center;
 				}
 
 				.right {
@@ -533,13 +562,15 @@
 
 				.img {
 					float: left;
-					width: 112rpx;
-					height: 112rpx;
+					width: 110rpx;
+					height: 110rpx;
+					margin-right: 32rpx;
+				}
+				p:nth-child(2){
+					color:#687A74 ;
 				}
-
 				.num {
 					font-size: 40rpx;
-
 					font-weight: 700;
 					color: #042118;
 				}
@@ -571,6 +602,7 @@
 					height: 70rpx;
 					font-size: 24rpx;
 					color: #687A74;
+
 					image {
 						width: 64rpx;
 						height: 64rpx;
@@ -585,8 +617,9 @@
 					}
 				}
 			}
-			.btn{
-				button{
+
+			.btn {
+				button {
 					font-size: 28rpx;
 					width: 100%;
 					background: #EEF0F8;
@@ -595,19 +628,21 @@
 					border: none;
 					outline: none;
 					border-radius: 16rpx;
-					&:after{
+
+					&:after {
 						border: none;
 					}
-					&.active{
+
+					&.active {
 						color: #fff;
 						background: #14A478;
 					}
 				}
 			}
-			
+
 		}
 
-	
+
 	}
 
 	/deep/.u-calendar__action {
@@ -622,23 +657,26 @@
 	.red {
 		color: rgb(235, 103, 101);
 	}
+
 	.consoleList {
 		padding: 32rpx;
-	background: #fff;
-	border-radius: 16rpx;
-	margin-top: 32rpx;
-	
-	.title{
-		margin: 0;
-		color: #042118;
-		font-weight: 600;
-	}
+		background: #fff;
+		border-radius: 16rpx;
+		margin-top: 32rpx;
+		min-height: calc(100vh - 1020rpx);
+		.title {
+			margin: 0;
+			margin-bottom: 16rpx;
+			color: #042118;
+			font-weight: 600;
+		}
+
 		.histimeBox {
 			margin: 32rpx 0;
 		}
-	
-		
-	
+
+
+
 		.tableList {
 			font-size: 28rpx;
 			height: 93rpx;
@@ -647,29 +685,33 @@
 			justify-content: space-between;
 			align-items: center;
 			border-bottom: 2rpx solid var(--neutral-color-border-base, #DCE6E3);
-	
+
 			view {
 				text-align: center;
 			}
-			.success{
+
+			.success {
 				color: #14A478;
 			}
-			.error{
+
+			.error {
 				color: #FF5951;
 			}
+
 			view:nth-child(1) {
 				width: 160rpx;
 				text-align: left;
 			}
-	
+
 			view:nth-child(2) {
 				width: 170rpx;
 			}
-	
+
 			view:nth-child(3) {
 				width: 120rpx;
 			}
 		}
+
 		.tableTitle {
 			/* background: #E8F3F0; */
 			color: #042118;