From 085e76d1798b6392c8fbf14b98081a1df37a2006 Mon Sep 17 00:00:00 2001 From: pengqiao1993 <229619096@qq.com> Date: Tue, 10 Mar 2026 16:11:41 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8D=8F=E8=AE=AE=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/home-page/policy-Config/index.vue | 119 +++++++++++------------- 1 file changed, 56 insertions(+), 63 deletions(-) diff --git a/pages/home-page/policy-Config/index.vue b/pages/home-page/policy-Config/index.vue index a93a83e..a489b7a 100644 --- a/pages/home-page/policy-Config/index.vue +++ b/pages/home-page/policy-Config/index.vue @@ -41,7 +41,6 @@ disabled @click="selectShow(item, index)" /> -
{{ item.selectLabel || $t("homePage.alarm.placeSelect") }} @@ -78,7 +77,7 @@ import { formList } from "@/common/form.js"; import { Langlist } from "@/common/lang"; import pako from "pako"; -import mqtt from "mqtt"; +import * as Paho from "paho-mqtt"; export default { data() { return { @@ -115,7 +114,7 @@ export default { }, beforeDestroy() { if (this.mqttClient) { - this.mqttClient.end() + this.mqttClient.disconnect() this.mqttClient = null } }, @@ -194,72 +193,66 @@ export default { } }, initMQTT() { - // 使用mqtt.js库创建MQTT连接 + // 创建MQTT客户端实例 + const clientId = 'client_' + Math.random().toString(36).substr(2, 9); + // 使用WebSocket连接方式 + this.mqttClient = new Paho.Client('13.39.200.14', 8083, clientId); + + // 设置回调函数 + this.mqttClient.onConnectionLost = this.onConnectionLost; + this.mqttClient.onMessageArrived = this.onMessageArrived; + + // 连接选项 const options = { - clientId: 'client_' + Math.random().toString(36).substr(2, 9), - username: 'admin', + onSuccess: this.onConnect, + onFailure: this.onFail, + userName: 'admin', password: 'zzkj@688737', - keepalive: 60, - clean: true, - reconnectPeriod: 5000, - connectTimeout: 30 * 1000 + useSSL: false, + timeout: 30, + keepAliveInterval: 60, + cleanSession: true }; - // 使用WebSocket连接到MQTT broker - const brokerURL = 'ws://13.39.200.14:8083/mqtt'; - this.mqttClient = mqtt.connect(brokerURL, options); - - // 连接成功 - this.mqttClient.on('connect', () => { - console.log('MQTT连接成功!'); - // 订阅主题 - this.mqttClient.subscribe('WJ_Get_NewControlSystem', (err) => { - if (err) { - console.log('订阅主题失败:', err); - } else { - console.log('订阅主题成功: WJ_Get_NewControlSystem'); - // 发送获取数据的消息 - this.sendMQTTMessage('WJ_Get_NewControlSystem', JSON.stringify({ - fun: 'GET', - type: 'WJ_Get_NewControlSystem', - content: 0 - })); - } - }); - }); - - // 连接错误 - this.mqttClient.on('error', (err) => { - console.error('MQTT连接错误:', err); - }); - - // 连接关闭 - this.mqttClient.on('close', () => { - console.log('MQTT连接关闭'); - }); - - // 重连 - this.mqttClient.on('reconnect', () => { - console.log('MQTT正在重连...'); - }); - - // 收到消息 - this.mqttClient.on('message', (topic, message) => { - console.log('收到MQTT消息:', topic, message.toString()); - try { - // let data = JSON.parse(message.toString()); - // if (data.type == 'WJ_Get_NewControlSystem') { - // this.control(data.content); - // } - } catch (error) { - console.log('解析MQTT消息错误:', error); - } - }); + // 连接到MQTT broker + this.mqttClient.connect(options); + }, + onConnect() { + console.log('Connected to MQTT broker!'); + // 订阅主题 + this.mqttClient.subscribe('WJ_Get_NewControlSystem'); + // 发送获取数据的消息 + this.sendMQTTMessage('WJ_Get_NewControlSystem', JSON.stringify({ + fun: 'GET', + type: 'WJ_Get_NewControlSystem', + content: 0 + })); + }, + onFail(error) { + console.error('Failed to connect:', error); + }, + onConnectionLost(responseObject) { + if (responseObject.errorCode !== 0) { + console.log('Connection lost: ' + responseObject.errorMessage); + } + }, + onMessageArrived(message) { + console.log('Message arrived:', message.payloadString); + try { + // let data = JSON.parse(message.payloadString); + // if (data.type == 'WJ_Get_NewControlSystem') { + // this.control(data.content); + // } + } catch (error) { + console.log('解析MQTT消息错误:', error); + } }, sendMQTTMessage(topic, payload) { - if (this.mqttClient && this.mqttClient.connected) { - this.mqttClient.publish(topic, payload); - console.log('MQTT消息发送成功:', topic, payload); + if (this.mqttClient && this.mqttClient.isConnected()) { + const message = new Paho.Message(payload); + message.destinationName = topic; + this.mqttClient.send(message); + console.log('MQTT消息发送成功:', payload); } else { console.log('MQTT客户端未连接'); if (!this.mqttClient) {