增加mqtt

pages/6170/deviceControl/index.vue

@@ -106,22 +106,22 @@
 					</view>
 				</view>
 				<view class="form-content" v-if="isFormExpanded">
-					<button class="send-btn1">发送</button>
+					<button class="send-btn1" @click="sendPersonnelInfo">发送</button>
 					<view class="form-row">
 						<text class="form-label">单位：</text>
-						<input class="form-input" placeholder="请输入单位" />
+						<input class="form-input" placeholder="请输入单位" v-model="personnelInfo.unit" />
 					</view>
 					<view class="form-row">
 						<text class="form-label">姓名：</text>
-						<input class="form-input" placeholder="请输入姓名" />
+						<input class="form-input" placeholder="请输入姓名" v-model="personnelInfo.name" />
 					</view>
 					<view class="form-row">
 						<text class="form-label">职位：</text>
-						<input class="form-input" placeholder="请输入职位" />
+						<input class="form-input" placeholder="请输入职位" v-model="personnelInfo.position" />
 					</view>
 					<view class="form-row">
 						<text class="form-label">ID：</text>
-						<input class="form-input" placeholder="请输入ID号" />
+						<input class="form-input" placeholder="请输入ID号" v-model="personnelInfo.id" />
 					</view>
 				</view>
 			</view>
@@ -129,11 +129,11 @@
 			<view class="form-section">
 				<view class="mode-buttons">
 					<view class="section-title">发送信息</view>
-					<button class="send-btn">发送</button>
+					<button class="send-btn" @click="sendTextMessage">发送</button>
 				</view>
 
 				<view class="form-row">
-					<input class="form-input" placeholder="请输入文字" />
+					<input class="form-input" placeholder="请输入文字" v-model="messageToSend" />
 				</view>
 			</view>
 			<!-- 产品信息 -->
@@ -216,13 +216,8 @@
 </template>
 
 <script>
-	import {
-		connectMQTT,
-		publishMessage,
-		onMessageReceived,
-		disconnectMQTT,
-		isMQTTConnected
-	} from '@/utils/mqtt'
+	import MqttClient from '@/utils/mqtt.js';
+
 	export default {
 		data() {
 			return {
@@ -239,7 +234,15 @@
 				items: [],
 				isFormExpanded: true, // 默认展开
 				deviceID: '',
-				itemInfo: {}
+				itemInfo: {},
+				mqttClient: null,
+				messageToSend: '',
+				personnelInfo: {
+					unit: '',
+					name: '',
+					position: '',
+					id: ''
+				}
 			}
 		},
 		computed: {
@@ -351,6 +354,31 @@
 			handleDisagree() {
 				this.lightModeC = false
 			},
+			// 发送人员信息
+			sendPersonnelInfo() {
+				if (!this.mqttClient || !this.mqttClient.client.isConnected()) {
+					uni.showToast({ title: 'MQTT未连接', icon: 'none' });
+					return;
+				}
+				const topic = `device/command/${this.deviceID}/personnel`;
+				const message = JSON.stringify(this.personnelInfo);
+				this.mqttClient.publish(topic, message);
+				uni.showToast({ title: '人员信息已发送', icon: 'success' });
+			},
+			// 发送文本消息
+			sendTextMessage() {
+				if (!this.mqttClient || !this.mqttClient.client.isConnected()) {
+					uni.showToast({ title: 'MQTT未连接', icon: 'none' });
+					return;
+				}
+				if (!this.messageToSend) {
+					uni.showToast({ title: '请输入要发送的文字', icon: 'none' });
+					return;
+				}
+				const topic = `device/command/${this.deviceID}/message`;
+				this.mqttClient.publish(topic, this.messageToSend);
+				uni.showToast({ title: '消息已发送', icon: 'success' });
+			}
 		},
 		onLoad(options) {
 			const eventChannel = this.getOpenerEventChannel();
@@ -360,10 +388,32 @@
 				this.deviceID = data.data.id;
 				this.navTitle = data.data.deviceName;
 				console.log('Received detail data:', this.navTitle);
+
+				// 初始化并连接MQTT
+				this.mqttClient = new MqttClient();
+				this.mqttClient.connect(() => {
+					console.log('MQTT 连接成功，开始订阅主题');
+					// 订阅来自设备的状态更新
+					const statusTopic = `device/status/${this.deviceID}`;
+					this.mqttClient.subscribe(statusTopic, (payload) => {
+						console.log(`收到来自 ${statusTopic} 的消息:`, payload);
+						uni.showModal({
+							title: '收到设备消息',
+							content: payload,
+							showCancel: false
+						});
+					});
+				});
 			});
 			// 如果需要向调用页面返回数据，可以触发 'ack' 事件
 			eventChannel.emit('ack', {})
 		},
+		onUnload() {
+			// 页面卸载时断开MQTT连接
+			if (this.mqttClient) {
+				this.mqttClient.disconnect();
+			}
+		},
 
 	}
 </script>