From 2bed3e132f4ddafbb8f3dc2d7487dd53032a7035 Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Fri, 27 Sep 2024 18:03:55 +0800
Subject: [PATCH] 211

---
 pages.json                     |   9 +
 pages_admin/controlDevice.vue  | 415 +++++++++++++++++++++++++++++++++
 pages_admin/worke/bind_mac.vue |  19 +-
 pages_admin/worke/bind_sn.vue  | 171 +++++++++-----
 4 files changed, 544 insertions(+), 70 deletions(-)
 create mode 100644 pages_admin/controlDevice.vue

diff --git a/pages.json b/pages.json
index a01cfe2..5aac4e7 100644
--- a/pages.json
+++ b/pages.json
@@ -176,6 +176,15 @@
 							"navigationStyle": "custom",
 						"enablePullDownRefresh" : false
 					}
+				},
+				{
+					"path" : "controlDevice",
+					"style" : 
+					{
+						"navigationBarTitleText" : "",
+							"navigationStyle": "custom",
+						"enablePullDownRefresh" : false
+					}
 				}
 				
 
diff --git a/pages_admin/controlDevice.vue b/pages_admin/controlDevice.vue
new file mode 100644
index 0000000..db7dcfc
--- /dev/null
+++ b/pages_admin/controlDevice.vue
@@ -0,0 +1,415 @@
+<template>
+	<view class="pages">
+		<u-navbar title="设备控制" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='38'
+			height='50'></u-navbar>
+		<view class="title">
+			<text>控制台</text>
+
+
+		</view>
+		<view class="iptbox">
+			<view class="qrcode" @click="qrcode()">
+				<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
+			</view>
+			<input type="text" class="ips" v-model="sn" placeholder="请扫描设备上的二维码" style="margin-left: 32rpx;"
+				placeholder-class="my-placeholder"  @input="search()" />
+
+		</view>
+		<view class="txt">
+			MAC:{{carInfo.mac}}
+		</view>
+		<view class="txt" style="margin-top: 100rpx;">
+			信号:{{carInfo.signalStrength}}
+		</view>
+		<view class="txt">
+			电压:{{carInfo.voltage}}V
+		</view>
+		<view class="txt">
+			网络:<span :style="{ color: carInfo.onlineStatus == 1 ? '#8883F0' : '#808080' }">在线</span> / <span :style="{ color: carInfo.onlineStatus == 0? '#8883F0' : '#808080' }">离线</span>
+		</view>
+		<view class="txt">
+			锁状态: <span :style="{ color: carInfo.lockStatus == 1? '#8883F0' : '#808080' }">开</span>/ <span :style="{ color: carInfo.lockStatus == 0 ? '#8883F0' : '#808080' }">关</span>
+		</view>
+		<view class="btnbox">
+			<view class="btn_box">
+				<view class="btn1" @click="btn(0)">
+					开锁
+				</view>
+				<view class="btn1" @click="btn(1)">
+					关锁
+				</view>
+			</view>
+			<view class="btn_box" style="margin-top: 20rpx;">
+				<view class="btn1" @click="btn(3)">
+					响铃
+				</view>
+				<view class="btn1" @click="deviceInfo()">
+					更新
+				</view>
+			</view>
+			<view class="btn2" style="margin-top: 20rpx;" @click="back()">
+				返回扫描
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				titleflag: false, //提示隐藏
+				bgc: {
+					backgroundColor: "#F7FAFE",
+				},
+				sn: '',
+				carInfo:{}
+
+			}
+		},
+		onLoad(e) {
+			if (e.sn) {
+				this.sn = e.sn
+				this.deviceInfo()
+			}
+
+		},
+		onShow() {
+
+		},
+
+		mounted() {
+			// this.videoContext = uni.createVideoContext('myVideo', this)
+		},
+		methods: {
+			back(){
+				uni.redirectTo({
+					url:'worke/bind_sn'
+				})
+			},
+			search(){
+				if (this.sn && this.sn.length === 7 && /^\d+$/.test(this.sn)) {
+				    // 当 this.sn 满足条件时调用 deviceInfo
+				    this.deviceInfo();
+				  } else {
+				    console.log('SN 不是 7 位数字');
+				    // 你可以在这里处理不符合条件的情况，比如提示用户输入正确的 SN
+				  }
+			},
+			qrcode() {
+				uni.scanCode({
+					onlyFromCamera: true,
+					scanType: ['qrCode'],
+					success: res => {
+			
+						let sn = null;
+						let queryParams = res.result.split('?')[1];
+						if (queryParams) {
+							let params = queryParams.split('&');
+							params.forEach(param => {
+								let [key, value] = param.split('=');
+								if (key === 'sn') {
+									sn = value;
+								}
+							});
+						}
+			
+						this.sn = sn
+						console.log(res.result);
+						if (this.sn != '') {
+							this.deviceInfo()
+						}
+			
+					},
+					fail: err => {
+						console.error('扫描失败：', err);
+						uni.showToast({
+							title: '扫描失败',
+							icon: 'none'
+						});
+					}
+				});
+			},
+			
+			deviceInfo() {
+
+				this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
+					
+					if (res.code === 200) {
+						this.carInfo=res.data
+						
+					}
+				}).catch(error => {
+					console.error("Error fetching area data:", error);
+				});
+			},
+			btn(num) {
+				if (num == 0) {
+					uni.showLoading({
+						title: '加载中...'
+					})
+					console.log('点击了....1');
+					this.$u.post('/appVerify/admin/unlocking?sn=' + this.sn).then((res) => {
+
+						if (res.code == 200) {
+							// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
+							this.deviceInfo()
+							uni.showToast({
+								title: '操作成功',
+								icon: 'none',
+								duration: 2000
+							});
+						} else {
+							uni.hideLoading()
+
+						}
+					}).catch(error => {
+						console.error("Error fetching area data:", error);
+					});
+				} else if (num == 1) {
+					uni.showLoading({
+						title: '加载中...'
+					})
+					console.log('点击了....2');
+					this.$u.post('/appVerify/admin/lock?sn=' + this.sn).then((res) => {
+						if (res.code == 200) {
+							// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
+							this.deviceInfo()
+							uni.showToast({
+								title: '操作成功',
+								icon: 'none',
+								duration: 2000
+							});
+						} else {
+							uni.hideLoading()
+
+						}
+					}).catch(error => {
+						console.error("Error fetching area data:", error);
+					});
+				} else if (num == 3) {
+					uni.showLoading({
+						title: '加载中...'
+					})
+					this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
+						if (res.code == 200) {
+								this.deviceInfo()
+							uni.hideLoading()
+							uni.showToast({
+								title: '操作成功',
+								icon: 'none',
+								duration: 2000
+							});
+						} else {
+							uni.hideLoading()
+							uni.showToast({
+								title: res.msg,
+								icon: 'none',
+								duration: 2000
+							});
+
+						}
+					})
+
+				}
+			}
+		}
+
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #f7faff !important;
+	}
+
+	.btnbox {
+		margin-left: -66rpx;
+		width: 750rpx;
+		padding: 0 66rpx;
+		position: fixed;
+		bottom: 50rpx;
+	}
+
+	.txt {
+		margin-top: 16rpx;
+		font-size: 48rpx;
+		color: #808080;
+	}
+
+	.btn_box {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.btn1 {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 220rpx;
+			height: 100rpx;
+			background: #8b83f0;
+			font-size: 50rpx;
+			color: #fff;
+			border-radius: 30rpx;
+		}
+	}
+
+	.btn2 {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100rpx;
+		background: #8b83f0;
+		font-size: 50rpx;
+		color: #fff;
+		border-radius: 30rpx;
+	}
+
+	.pages {
+		// padding-top: 136rpx !important;
+		padding: 0 66rpx;
+		box-sizing: border-box;
+	}
+
+	.iptbox {
+		display: flex;
+		align-items: center;
+		flex-wrap: nowrap;
+		padding: 22rpx;
+		margin: 28rpx auto 0;
+		width: 658rpx;
+		height: 88rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+		.qrcode {
+			padding-right: 20rpx;
+			border-right: 2rpx solid #D8D8D8;
+
+			image {
+				width: 54rpx;
+				height: 54rpx;
+			}
+		}
+
+		.ips {
+			width: 630rpx;
+
+		}
+
+		image {
+			width: 18rpx;
+			height: 32rpx;
+		}
+
+		.my-placeholder {
+			font-weight: 400;
+			font-size: 32rpx;
+			color: #808080;
+		}
+	}
+
+
+
+
+	.title {
+		margin-bottom: 84rpx;
+
+		image {
+			display: inline-block;
+			width: 48rpx;
+			height: 48rpx;
+			vertical-align: bottom;
+			margin-right: 10rpx;
+		}
+
+		text:nth-child(1) {
+			font-weight: 400;
+			font-size: 96rpx;
+			color: #262B37;
+			line-height: 88rpx;
+			text-align: left;
+			font-style: normal;
+			text-transform: none;
+			display: block;
+			margin-bottom: 48rpx;
+		}
+	}
+
+	.dblist {
+		display: flex;
+		width: 100%;
+		margin-top: 34rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
+		padding: 20rpx 0 24rpx 18rpx;
+		box-sizing: border-box;
+		text-align: center;
+		border-radius: 10rpx;
+
+		.lt {
+			padding-left: 10rpx;
+			box-sizing: border-box;
+			margin-right: 38rpx;
+
+			image {
+				width: 42rpx;
+				// height: 112rpx;
+			}
+		}
+
+		.cen {
+			width: 370rpx;
+			padding-left: 10rpx;
+			box-sizing: border-box;
+
+			.name {
+				white-space: nowrap;
+				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #262B37;
+				line-height: 40rpx;
+				text-align: left;
+				font-style: normal;
+				text-transform: none;
+				margin-top: 10rpx;
+			}
+
+			.mac {
+				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #262B37;
+				line-height: 32rpx;
+				text-align: left;
+				font-style: normal;
+				text-transform: none;
+				margin-top: 16rpx;
+			}
+		}
+
+		.rt {
+			margin-left: auto;
+			margin-top: 22rpx;
+
+			text {
+				display: inline-block;
+				width: 108rpx;
+				height: 60rpx;
+				background: rgba(255, 255, 255, 0);
+				border: 2rpx solid #8883F0;
+				filter: blur(0px);
+				border-radius: 20rpx;
+				text-align: center;
+				line-height: 60rpx;
+				color: #8883F0;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages_admin/worke/bind_mac.vue b/pages_admin/worke/bind_mac.vue
index 1e00ead..7cd7ff2 100644
--- a/pages_admin/worke/bind_mac.vue
+++ b/pages_admin/worke/bind_mac.vue
@@ -238,9 +238,12 @@
 							duration: 2000
 						});
 						setTimeout(() => {
-							uni.navigateBack({
-								delta: 1 // delta值为1时表示返回的页面层数
-							});
+							// uni.navigateBack({
+							// 	delta: 1 // delta值为1时表示返回的页面层数
+							// });
+							uni.navigateTo({
+								url:'/pages_admin/controlDevice?sn='+this.sn
+							})
 						}, 2000)
 					} else {
 						uni.showToast({
@@ -267,9 +270,12 @@
 							duration: 2000
 						});
 						setTimeout(() => {
-							uni.navigateBack({
-								delta: 1 // delta值为1时表示返回的页面层数
-							});
+							uni.navigateTo({
+								url:'/pages_admin/controlDevice?sn='+this.sn
+							})
+							// uni.navigateBack({
+							// 	delta: 1 // delta值为1时表示返回的页面层数
+							// });
 						}, 2000)
 
 					} else {
@@ -916,6 +922,7 @@
 			}
 		}
 
+		
 		.bot_btn {
 			position: fixed;
 			bottom: 0;
diff --git a/pages_admin/worke/bind_sn.vue b/pages_admin/worke/bind_sn.vue
index c09f4bf..db7eaf0 100644
--- a/pages_admin/worke/bind_sn.vue
+++ b/pages_admin/worke/bind_sn.vue
@@ -4,34 +4,39 @@
 			height='50'></u-navbar>
 		<view class="title">
 			<text>设备列表</text>
-			
+
 			<image src="https://api.ccttiot.com/smartmeter/img/static/uCfe9273aC89tGOT7n1G" mode="widthFix"></image>
 			<text class="sm">{{texts}}</text>
 		</view>
 
-		<view class="dblist" v-for="(item, index) in devicesList" :key="index">
+		<view class="dblist" v-for="(item, index) in devicesList" :key="index" @tap="choose(item)">
 			<!-- <view class="lt">
 				<image src="https://api.ccttiot.com/smartmeter/img/static/uoQO0pUZ1UHcW5uVKkuR" mode=""></image>
 			</view> -->
 			<view class="cen">
 				<view class="name">
-					共享电动车
+					MAC：{{item.localName.substring(5)}}
+					<span
+						:style="{ fontSize: '24rpx', marginLeft: '30rpx', color: item.isBand ? '#808080' : '#4297F3' }">
+						<!-- 根据 isBound 显示录入或未录入 -->
+						{{ item.isBand ? '已录入' : '未录入' }}
+					</span>
 				</view>
 				<view class="mac">
-					MAC：{{item.localName.substring(5)}}
+					蓝牙信号：{{item.RSSI}} <span style="margin-left: 20rpx;" v-if="item.isBand "> SN:{{item.sn}}</span>
 				</view>
 			</view>
-		<!-- 	<view class="rt">
+			<!-- 	<view class="rt">
 				<text :id="item.deviceId" @tap="openConfirmModal(item)">绑定</text>
 			</view> -->
-			<view class="rt">
-				<text :id="item.deviceId" @tap="choose(item)">选择</text>
+			<view class="rt" style="margin-right: 10rpx;">
+				<text :id="item.deviceId">选择</text>
 			</view>
 		</view>
 
 		<view class="anniu" @click="Search">
 			<button>重新扫描</button>
-			
+
 		</view>
 		<!-- <view class="anniu2 " @click="send">
 			响铃
@@ -88,44 +93,42 @@
 				status: false,
 				showConfirmModal: false, // 控制弹窗显示的标志
 				deviceinfo: null,
-				sn:''
+				sn: ''
 			}
 		},
 		onLoad(e) {
-			if(e.sn){
-				this.sn=e.sn
+			if (e.sn) {
+				this.sn = e.sn
 			}
-			this.bluthlist = []
-			this.devicesList = []
-			this.devicesLists=[]
-			xBlufi.initXBlufi(1);
-			console.log("xBlufi", xBlufi.XMQTT_SYSTEM);
-			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
-			xBlufi.notifyStartDiscoverBle({
-				'isStart': true
-			});
 
-			// 两秒后停止蓝牙搜索
-			setTimeout(() => {
-				xBlufi.notifyStartDiscoverBle({
-					'isStart': false
-				});
-				// 判断是否存在浇花器设备
-				if (this.devicesList.length == 0) {
-					this.tishiflag = true
-					this.texts = '扫描完毕，暂无发现电动车设备'
-				} else {
-					this.texts = '扫描到以下设备，请点击连接！'
-				}
-				this.status = true
-			}, 2000)
 		},
 		onShow: function() {
-			// this.openBluetoothAdapter()
-			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
-			xBlufi.notifyStartDiscoverBle({
-				'isStart': true
-			});
+			 this.bluthlist = [];
+			  this.devicesList = [];
+			  this.devicesLists = [];
+			  
+			  // 强制视图更新
+			  this.$forceUpdate();
+			
+			  // 后续的蓝牙初始化和扫描逻辑
+			  xBlufi.initXBlufi(1);
+			  xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
+			  xBlufi.notifyStartDiscoverBle({ 'isStart': true });
+			
+			  setTimeout(() => {
+			    xBlufi.notifyStartDiscoverBle({ 'isStart': false });
+			    if (this.devicesList.length == 0) {
+			      this.tishiflag = true;
+			      this.texts = '扫描完毕，暂无发现电动车设备';
+			    } else {
+			      this.texts = '扫描到以下设备，请点击连接！';
+			    }
+			    this.status = true;
+			
+			    // 再次强制更新
+			    this.$forceUpdate();
+			  }, 2000);
+
 		},
 		onUnload: function() {
 			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
@@ -139,6 +142,7 @@
 			xBlufi.notifyStartDiscoverBle({
 				'isStart': false
 			});
+
 		},
 		onBeforeUnmount() {
 			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
@@ -150,18 +154,54 @@
 			// this.videoContext = uni.createVideoContext('myVideo', this)
 		},
 		methods: {
-			choose(e){
+			fetchDevicesBoundStatus() {
+				// 提取所有设备的 MAC 地址，并通过 Set 去重
+				let uniqueDevices = Array.from(new Set(this.devicesList.map(item => item.localName.substring(5))));
+				
+				// 重新构建去重后的 devicesList
+				this.devicesList = uniqueDevices.map(mac => {
+					return this.devicesList.find(item => item.localName.substring(5) === mac);
+				});
+				
+				// 拼接成字符串
+				const macs = uniqueDevices.join(',');
+			
+				// 向批量接口请求录入状态
+				this.$u.get(`app/getDeviceInfoByMacList?macList=${macs}`).then((res) => {
+					const resultList = res.data; // 获取接口返回的数据数组
+			
+					// 遍历 devicesList 并对比 mac 地址
+					this.devicesList.forEach(device => {
+						const mac = device.localName.substring(5);
+			
+						// 查找返回结果中是否有与该设备 MAC 地址相同的项
+						const matchingResult = resultList.find(result => result.mac === mac);
+			
+						// 如果找到了匹配的 MAC 地址项，则更新设备的 sn 和 isBand
+						if (matchingResult) {
+							device.sn = matchingResult.sn;
+							device.isBand = matchingResult.isBand;
+						}
+					});
+			
+					this.$forceUpdate(); // 强制更新视图
+					console.log(this.devicesList, 'Updated devicesList');
+				}).catch((error) => {
+					console.error('批量获取设备录入状态失败', error);
+				});
+			},
+			choose(e) {
 				console.log(e);
 				let Bluetoothmac = e.name.substring(5)
 				uni.navigateTo({
-					url:'/pages_admin/worke/bind_mac?mac='+Bluetoothmac
+					url: '/pages_admin/worke/bind_mac?mac=' + Bluetoothmac
 				})
 			},
-			send(){
+			send() {
 				this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
 					if (res.code === 200) {
-						
-					}else{
+
+					} else {
 						uni.showToast({
 							title: res.msg,
 							icon: 'none',
@@ -201,7 +241,7 @@
 									vm.remakr()
 								},
 								fail(err) {
-										uni.hideLoading()
+									uni.hideLoading()
 									console.error('获取已连接蓝牙设备信息失败：', err);
 								}
 							});
@@ -358,7 +398,7 @@
 								// 	if (res.data == false) {
 								// 		list.push(device)
 								// 	} else {
-								
+
 								// 	}
 								// })
 
@@ -369,7 +409,7 @@
 
 								// 将去重后的数组重新赋值给 this.devicesList
 								this.devicesList = uniqueDevicesList;
-
+								this.fetchDevicesBoundStatus();
 							}, 200)
 
 							console.log('蓝牙停止搜索ok');
@@ -440,9 +480,9 @@
 			createBLEConnection(e) {
 				this.mac = e.localName.substring(5)
 				let that = this
-				that.$u.post(`/appVerify/band?sn=`+that.sn+'&mac='+that.mac).then((res) => {
+				that.$u.post(`/appVerify/band?sn=` + that.sn + '&mac=' + that.mac).then((res) => {
 					uni.showLoading({
-						title:'绑定中'
+						title: '绑定中'
 					})
 					if (res.code == 200) {
 						uni.showToast({
@@ -450,15 +490,15 @@
 							icon: 'none',
 							duration: 2000
 						});
-						
+
 						xBlufi.notifyStartDiscoverBle({
 							'isStart': false
 						});
-						
+
 						const deviceId = that.deviceinfo.deviceId
 						that.Bluetoothmac = that.deviceinfo.localName.substring(5) //从第七位开始截取 只取后面的mac号
-						
-						
+
+
 						let name = that.deviceinfo.name;
 						console.log(that.deviceinfo.deviceId, 'that.deviceinfo.deviceId');
 						xBlufi.notifyConnectBle({
@@ -466,22 +506,22 @@
 							deviceId: that.deviceinfo.deviceId,
 							name
 						});
-						
+
 					} else {
 						uni.showToast({
 							title: res.msg,
 							icon: 'none',
 							duration: 2000
 						});
-						setTimeout(()=>{
+						setTimeout(() => {
 							uni.navigateBack({
 								delta: 1 // delta值为1时表示返回的页面层数
 							});
-						},2000)
-						
+						}, 2000)
+
 					}
 				})
-				
+
 				// uni.getLocation({
 				// 	type: 'wgs84',
 				// 	success: function(lb) {
@@ -580,7 +620,7 @@
 					// 重新搜索清空蓝牙数组
 					this.bluthlist = []
 					this.devicesList = []
-					this.devicesLists=[]
+					this.devicesLists = []
 					// 重新搜索
 					// this.startBluetoothDevicesDiscovery()
 					this.statusflag = true
@@ -598,7 +638,7 @@
 							xBlufi.notifyStartDiscoverBle({
 								'isStart': false
 							});
-							
+
 
 						} else {
 							xBlufi.notifyStartDiscoverBle({
@@ -634,8 +674,9 @@
 		/* background-color: #fff; */
 		z-index: 99;
 	}
-	.anniu2{
-		
+
+	.anniu2 {
+
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -650,8 +691,9 @@
 		font-weight: 500;
 		font-size: 40rpx;
 		color: #4C97E7;
-		
+
 	}
+
 	.pages {
 		// padding-top: 136rpx !important;
 		padding: 0 66rpx;
@@ -788,9 +830,10 @@
 			box-sizing: border-box;
 
 			.name {
+				white-space: nowrap;
 				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
 				font-weight: 400;
-				font-size: 32rpx;
+				font-size: 28rpx;
 				color: #262B37;
 				line-height: 40rpx;
 				text-align: left;