进度条加载

pages/6170/deviceControl/index.vue

@@ -912,7 +912,18 @@
 						icon: 'none'
 					})
 				}
+			},
+			handleMqttLost() {
+				this.Progress = {
+					...this.Progress,
+					show: false, // 隐藏进度条
+				};
+				uni.showToast({
+					title: '网络异常',
+					icon: 'none'
+				});
 			}
+
 		},
 		onLoad(options) {
 			const eventChannel = this.getOpenerEventChannel();
@@ -973,9 +984,10 @@
 								this.selectedImage = ''; // 清空已选图片
 							}
 						}
-
 					});
-				});
+				})
+				// 设置连接丢失回调
+				uni.$on('mqttConnectionLost', this.handleMqttLost);
 				if (this.apiType === 'listA') {
 					this.fetchDeviceDetail(data.data.id)
 				} else {
@@ -995,6 +1007,10 @@
 			if (this.mqttClient) {
 				this.mqttClient.disconnect();
 			}
+			uni.$off('mqttConnectionLost', this.handleMqttLost);
+			if (this.mqttClient) {
+				this.mqttClient.disconnect();
+			}
 		},
 
 	}

utils/mqtt.js

@@ -1,5 +1,5 @@
 // 兼容性补丁：为 Paho MQTT 提供 uni-app 环境下的 WebSocket 实现
-(function (root) {
+(function(root) {
 	// 如果未能找到全局对象，则无法应用补丁。
 	if (!root) {
 		console.error("MQTT Polyfill: 未能找到全局对象 (global/window/self 均未定义)。");
@@ -10,7 +10,7 @@
 	if (typeof root.WebSocket !== 'undefined') {
 		return;
 	}
-	
+
 	console.log("MQTT Polyfill: 正在为 uni-app 应用 WebSocket 兼容性补丁。");
 
 	class WebSocket {
@@ -26,8 +26,11 @@
 					const errText = JSON.stringify(err) || "Empty error object";
 					console.error(`uni.connectSocket 失败: ${errText}`);
 					if (this.onerror) {
-						const errorMessage = (err && err.errMsg) ? err.errMsg : "uni.connectSocket call failed";
+						const errorMessage = (err && err.errMsg) ? err.errMsg :
-						this.onerror({ message: errorMessage });
+							"uni.connectSocket call failed";
+						this.onerror({
+							message: errorMessage
+						});
 					}
 				}
 			});
@@ -53,22 +56,29 @@
 				console.error(`WebSocket polyfill 错误: ${errText}`);
 				if (this.onerror) {
 					// Paho expects an object that can be stringified, not a real Error object.
-					const errorMessage = (err && err.errMsg) ? err.errMsg : "WebSocket connection failed in uni-app";
+					const errorMessage = (err && err.errMsg) ? err.errMsg :
-					this.onerror({ message: errorMessage });
+						"WebSocket connection failed in uni-app";
+					this.onerror({
+						message: errorMessage
+					});
 				}
 			});
 
 			socketTask.onMessage((res) => {
 				if (this.onmessage) {
 					// Paho 期望事件对象有一个 'data' 属性
-					this.onmessage({ data: res.data });
+					this.onmessage({
+						data: res.data
+					});
 				}
 			});
 		}
 
 		send(data) {
 			if (this.readyState === WebSocket.OPEN) {
-				this._socketTask.send({ data: data });
+				this._socketTask.send({
+					data: data
+				});
 			} else {
 				console.error('WebSocket polyfill: send() 在非 OPEN 状态下被调用。');
 				throw new Error('WebSocket is not open');
@@ -109,7 +119,7 @@ import Paho from 'paho-mqtt';
 import allConfigs from '../config/index.js';
 
 // 根据环境选择正确的配置
-const env = 'development';//production  //开发of线上 改这里就行
+const env = 'production'; //production  //开发of线上 改这里就行
 const config = allConfigs[env];
 
 class MqttClient {
@@ -138,18 +148,22 @@ class MqttClient {
 		try {
 			// Paho-MQTT 的客户端需要 host, port, path, clientId
 			this.client = new Paho.Client(brokerUrl, Number(brokerPort), "/mqtt", this.options.clientId);
-			
+
 			this.onConnectCallback = onConnectCallback;
 
 			// 设置回调
 			this.client.onConnectionLost = (responseObject) => {
 				if (responseObject.errorCode !== 0) {
 					console.log("MQTT连接丢失: " + responseObject.errorMessage);
-					// 可以在此添加重连逻辑
+				  // 发送全局事件
+				    uni.$emit('mqttConnectionLost', {
+				      error: responseObject.errorMessage,
+				      timestamp: Date.now()
+				    });
 				}
 			};
 
-			this.client.onMessageArrived = (message) => {   
+			this.client.onMessageArrived = (message) => {
 				const topic = message.destinationName;
 				const payload = message.payloadString;
 				console.log(`收到消息, 主题: ${topic}, 内容: ${payload}`);
@@ -158,7 +172,7 @@ class MqttClient {
 					this.messageCallbacks.get(topic)(payload);
 				}
 			};
-			
+
 			const connectOptions = {
 				timeout: 4,
 				userName: this.options.username,
@@ -192,7 +206,9 @@ class MqttClient {
 	subscribe(topic, onMessageCallback) {
 		if (this.client && this.client.isConnected()) {
 			console.log(`尝试订阅主题: ${topic}`);
-			this.client.subscribe(topic, { qos: 1 });
+			this.client.subscribe(topic, {
+				qos: 1
+			});
 			// 存储该主题的回调函数
 			this.messageCallbacks.set(topic, onMessageCallback);
 		} else {
@@ -216,7 +232,7 @@ class MqttClient {
 			console.error('MQTT未连接，无法发布');
 		}
 	}
-	
+
 	/**
 	 * 取消订阅
 	 * @param {String} topic - 需要取消订阅的主题
@@ -246,4 +262,4 @@ class MqttClient {
 	}
 }
 
-export default MqttClient; 
+export default MqttClient;

utils/request.js

@@ -1,5 +1,5 @@
 import config from '../config/index.js';
-const env = 'development'; //production development  //开发of线上 改这里就行
+const env = 'production'; //production development  //开发of线上 改这里就行
 const BASE = config[env];
 const request = (options) => {
 	console.log("options"+JSON.stringify(options),BASE.BASE_URL)