优化设备控制，提交后，实时获取设备返回状态信息

2025-08-14 13:46:57 +08:00
parent d8edb9f31e
commit e56bbfe674
15 changed files with 1104 additions and 383 deletions
--- a/pages/210/call/index.vue
+++ b/pages/210/call/index.vue
@ -0,0 +1,311 @@
+<template>
+	<view class="container">
+		<!-- 设备列表 -->
+		<scroll-view class="device-list" scroll-y>
+			<view class="device-card" v-for="(item, index) in deviceList" :key="index" @click="toggleSelect(index)">
+				<!-- 复选框 -->
+				<view class="checkbox" :class="{ checked: item.checked }">
+					<uni-icons v-if="item.checked" type="checkmarkempty" size="18" color="rgb(0, 0, 0)"></uni-icons>
+				</view>
+				<!-- 设备信息 -->
+				<view class="device-content">
+					<view class="device-header">
+						<view class="deviceIMG">
+							<image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
+						</view>
+						<view class="device-name">
+							<view>设备:{{item.deviceName}}</view>
+							<view class="ID">
+								<view class="ID">ID:{{item.deviceImei}}</view>
+								<view class="onlines" v-if="item.onlineStatus==1">在线</view>
+								<!-- 离线状态 -->
+								<view class="unlines" v-if="item.onlineStatus==0">离线</view>
+								<view>电量：{{item.battery || '0'}}%</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="editInfmation">
+				<button class="login-btn" @click="callMessage">呼叫设备</button>
+			</view>
+		</scroll-view>
+		<!-- 成功提示弹框 -->
+		<CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage"
+			icon="/static/images/common/bj_1.png" :confirm-text="popupConfirmText" :show-cancel="false"
+			@confirm="onPopupConfirm" />
+	</view>
+</template>
+
+<script>
+	import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
+	import {
+		deviceInfo,
+	} from '@/api/common/index.js'
+	import {
+		deviceSendMessage
+	} from '@/api/6170/deviceControl.js'
+	export default {
+		components: {
+			CustomPopup
+		},
+		data() {
+			return {
+				deviceList: [],
+				showPopupFlag: false,
+				popupTitle: '',
+				popupMessage: '确定要呼叫所选设备！',
+				popupConfirmText: '确认'
+			}
+		},
+		methods: {
+			toggleSelect(index) {
+				this.deviceList[index].checked = !this.deviceList[index].checked
+				this.$forceUpdate()
+			},
+			// 获取设备列表
+			getData(deviceType) {
+				this.loading = true;
+				let data = {
+					pageNum: 1,
+					pageSize: 20,
+					deviceType: deviceType
+				}
+				deviceInfo(data).then((res) => {
+					if (res.code == 200) {
+						const newDevices = res.rows.map(device => ({
+							...device,
+							showConfirm: false,
+							checked: false
+						}));
+						this.total = res.total;
+						this.deviceList = newDevices
+					}
+				}).finally(() => {
+					this.loading = false;
+				});
+			},
+			//确认呼叫设备
+			callMessage() {
+				const selectedDevices = this.deviceList.filter(item => item.checked)
+				if (selectedDevices.length === 0) {
+					uni.showToast({
+						title: '请选择一个设备',
+						icon: 'none'
+					});
+					return;
+				}
+				this.showPopupFlag = true
+			},
+			//弹框确认
+			onPopupConfirm() {
+				const selectedDevices = this.deviceList.filter(item => item.checked)
+				const deviceIds = selectedDevices.map(item => item.id);
+				let data = {
+					deviceIds: deviceIds
+				}
+				deviceSendMessage(data).then((res) => {
+					if (res.code == 200) {
+						this.showPopupFlag = false
+						uni.navigateBack()
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				})
+			},
+		},
+		onLoad(options) {
+			const eventChannel = this.getOpenerEventChannel();
+			// 监听 'deviceSend' 事件，获取传过来的数据
+			eventChannel.on('deviceCall', (data) => {
+				console.log('Received detail data:', data);
+				this.getData(data.data)
+			});
+			// 如果需要向调用页面返回数据，可以触发 'ack' 事件
+			eventChannel.emit('ack', {})
+		},
+	}
+</script>
+
+<style scoped>
+	.container {
+		min-height: 100vh;
+		background-color: rgb(18, 18, 18);
+		box-sizing: border-box;
+		overflow-x: hidden;
+
+	}
+
+	.device-list {
+		flex: 1;
+		padding: 0 20rpx;
+
+	}
+
+	.device-card {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 95%;
+		margin-bottom: 20rpx;
+	}
+
+	.checkbox {
+		width: 40rpx;
+		height: 40rpx;
+		border: 2rpx solid rgba(255, 255, 255, 0.5);
+		margin-right: 20rpx;
+		border-radius: 4rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.checkbox.checked {
+		background-color: rgb(187, 230, 0);
+		border-color: rgb(187, 230, 0);
+	}
+
+	.device-content {
+		background-color: rgb(26, 26, 26);
+		border-radius: 16rpx;
+		position: relative;
+		/* display: flex; */
+		align-items: center;
+		padding: 20rpx;
+		width: 95%;
+	}
+
+	.device-header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 15rpx;
+	}
+
+	.device-name {
+		font-size: 32rpx;
+		color: rgba(255, 255, 255, 0.87);
+		margin-left: 12rpx;
+		line-height: 50rpx;
+		width: 83%;
+		white-space: nowrap;
+	}
+
+	.ID {
+		color: rgba(255, 255, 255, 0.6);
+		font-size: 26rpx;
+		display: flex;
+		justify-content: space-between;
+		position: relative;
+	}
+
+	.device-status {
+		width: 122rpx;
+		height: 52rpx;
+		font-size: 26rpx;
+		border-radius: 0px 8px 0px 8px;
+		background-color: rgb(42, 42, 42);
+		position: absolute;
+		top: 0rpx;
+		right: 0rpx;
+		text-align: center;
+		line-height: 52rpx;
+	}
+
+	.online {
+		color: rgb(187, 230, 0);
+	}
+
+	.unline {
+		color: rgba(255, 255, 255, 0.4);
+	}
+
+	.device-info {
+		display: flex;
+		justify-content: space-evenly;
+		font-size: 26rpx;
+		color: rgba(255, 255, 255, 0.87);
+		padding-top: 10rpx;
+		position: relative;
+	}
+
+	.deviceIMG {
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 16rpx;
+		position: relative;
+		background-color: rgba(42, 42, 42, 0.6);
+		display: flex;
+		align-items: center;
+	}
+
+	.IMG {
+		width: 68rpx;
+		height: 50rpx;
+		margin-left: 17%;
+	}
+
+	.onlines {
+		position: relative;
+	}
+
+	.onlines::before {
+		content: '';
+		position: absolute;
+		width: 15rpx;
+		height: 15rpx;
+		background: rgb(0, 171, 103);
+		border-radius: 50%;
+		top: 20rpx;
+		left: -20rpx
+	}
+
+	.unlines {
+		position: relative;
+	}
+
+	.unlines::before {
+		content: '';
+		position: absolute;
+		width: 15rpx;
+		height: 15rpx;
+		background: rgba(255, 255, 255, 0.4);
+		border-radius: 50%;
+		top: 20rpx;
+		left: -20rpx
+	}
+
+	.line {
+		width: 2rpx;
+		height: 24rpx;
+		background: linear-gradient(90deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgb(255, 255, 255) 50%,
+				rgba(255, 255, 255, 0) 100%);
+		margin-top: 12rpx;
+	}
+
+	.ql-editor {
+		color: rgba(255, 255, 255, 0.6);
+		font-size: 30rpx;
+	}
+
+	.editInfmation {
+		padding: 20rpx;
+		position: fixed;
+		bottom: 50rpx;
+		box-sizing: border-box;
+		width: 100%;
+	}
+
+	.login-btn {
+		margin-top: 30rpx;
+		background-color: rgb(187, 230, 0);
+		color: rgb(35, 35, 35);
+		border-radius: 50rpx;
+		width: 90%;
+	}
+</style>
--- a/pages/210/deviceControl/index.vue
+++ b/pages/210/deviceControl/index.vue
@ -128,9 +128,9 @@
 				</view> -->
 				<view class="mode-section">
 					<view class="mode-buttons">
-						<view v-for="(item, index) in modeItems" :key="index" class="mode-v1" :class="{ 'active-mode': selectedIndex === index }">
-							<view class="mode-v2" 
-								@click="handleModeClick(index)">
+						<view v-for="(item, index) in modeItems" :key="index" class="mode-v1"
+							:class="{ 'active-mode': selectedIndex === index }">
+							<view class="mode-v2" @click="handleModeClick(index)">
 								<image :src="item.image" class="setIMG" mode="aspectFit"></image>
 								<view>
 									<view class="battery-v2">{{ item.title }}</view>
@ -249,23 +249,31 @@
 <script>
 	// 弹框配置中心
 	const POPUP_CONFIGS = {
+		// 人员信息发送
 		person: {
 			config: {
 				icon: '/static/images/common/sendSucc.png',
 				message: '信息发送成功',
 				showCancel: false
 			},
+			confirm() {
+				return true; // 直接关闭
+			}

 		},
-		// 开机log
+		// 上传开机log
 		logo: {
 			config: {
 				icon: '/static/images/common/upload.png',
 				message: '上传成功',
 				showCancel: false
 			},
+			confirm() {
+				return true; // 直接关闭
+			}

 		},
+		// 电量低于20%.提示框
 		bettery: {
 			config: {
 				title: '设备电量低于20%',
@ -276,24 +284,24 @@
 				confirmBtnBg: 'rgba(224, 52, 52, 1)',
 				showCancel: true
 			},
-			onConfirm() {
-				console.log('确认按钮');
+			confirm() {
 				return true; // 直接关闭
 			}
 		},
-
+		// 解除报警关闭的那个提示
 		cancel: {
 			config: {
 				titleColor: 'rgba(224, 52, 52, 1)',
-				icon: '/static/images/common/svg.png',
+				icon: '/static/images/6170/svg.png',
 				popupBorder: '1rpx solid rgba(224, 52, 52, 0.3)',
 				confirmBtnBg: 'rgba(224, 52, 52, 1)',
 				showCancel: true //取消按钮
 			},
-			onConfirm() {
+			confirm() {
 				console.log('解除报警确认');
 			}
 		},
+		// 手动报警弹框
 		del: {
 			config: {
 				message: '确定开启报警?',
@ -302,8 +310,26 @@
 				confirmBtnBg: 'rgba(255, 200, 78, 1)',
 				showCancel: true
 			},
-			onConfirm() {
-				console.log('删除确认');
+			confirm() {
+				return 'alarmCountdown'; //点击确认,再次弹框,解除报警,再次报警的类型
+			}
+		},
+		// 手动报警再次弹框 再次报警，解除报警指令
+		alarmCountdown: {
+			config: {
+				title: '报警倒计时',
+				icon: '/static/images/6170/svg.png',
+				message: '59秒',
+				popupBorder: '1rpx solid rgba(224, 52, 52, 1)',
+				confirmBtnBg: 'rgba(224, 52, 52, 1)',
+				cancelBtnColor:"rgba(224, 52, 52, 1)",
+				confirmBtnColor:"rgba(255, 255, 255, 0.87)",
+				confirmText: '解除报警',
+				cancelText:"再次报警",
+				showCancel: true //取消按钮
+			},
+			confirm() {
+				console.log('解除报警确认');
 			}
 		},
 		// 自动报警
@ -320,9 +346,8 @@
 				confirmBtnColor: "rgba(255, 255, 255, 0.87)",
 				showCancel: false,
 			},
-			onConfirm() {
-				console.log('自动报警确认');
-				// 这里可以添加自动报警的逻辑
+			confirm() {
+				console.log('自动报警解除报警的弹框');
 			}
 		}

@ -437,12 +462,19 @@
 				this.currentPopup = {
 					show: true,
 					config: POPUP_CONFIGS[type].config,
-					callback: POPUP_CONFIGS[type].onConfirm
+					callback: POPUP_CONFIGS[type].confirm
 				}
 			},
 			handleConfirm() {
-				this.currentPopup.show = false;
-				console.log('这是点击了确认');
+				if (this.currentPopup.callback) {
+				  const nextPopupType = this.currentPopup.callback(); // 执行回调并获取下一个弹框类型
+				    this.currentPopup.show = false; // 关闭当前弹框
+				    if (nextPopupType) {
+				      this.showPopup(nextPopupType); // 打开下一个弹框
+				    }
+				} else {
+					this.currentPopup.show = false; // 默认关闭
+				}
 			},
 			// 统一处理取消
 			handleCancel() {
@ -888,7 +920,8 @@
 	.mode-v1.active-mode .battery-v2 {
 		color: #BBE600 !important;
 	}
-	.mode-v1.active-mode .mode-v3{
+
+	.mode-v1.active-mode .mode-v3 {
 		color: #BBE600 !important;
 	}

--- a/pages/210/onlineDevice/index.vue
+++ b/pages/210/onlineDevice/index.vue
@ -2,7 +2,7 @@
 	<view>
 		<view class="device-page">
 			<view class="sendFlex">
-				<view class="Sendmessage" @click="location">呼叫</view>
+				<view class="Sendmessage" @click="call">呼叫</view>
 				<view class="Sendmessage" @click="handleSend">发送信息</view>
 			</view>
 			<scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100"
@ -79,6 +79,20 @@
 					}
 				})
 			},
+			// 呼叫功能
+			call(){
+				uni.navigateTo({
+					url: '/pages/210/call/index',
+					events: {
+						ack: function(data) {}
+					},
+					success: (res) => {
+						res.eventChannel.emit('deviceCall', {
+				           data:this.deviceType
+						});
+					}
+				})
+			}
 		},
 		onShow() {
 			this.getData()