提交mqtt加载，首页弹窗

src/components/component/alarModel.vue

@@ -637,6 +637,8 @@ export default {
         },
     },
     mounted() {
+        console.log("alarModel mounted111111");
+
         const userId = uni.getStorageSync("userId");
         const topic = `/mps/wx_${userId}/notice`;
         this.unsubscribeFnNotice = MqttService.subscribe(
@@ -680,6 +682,8 @@ export default {
     },
 
     beforeDestroy() {
+        console.log("alarModel mounted22222");
+
         if (this.unsubscribeFnNotice) {
             this.unsubscribeFnNotice();
             this.unsubscribeFnNotice = null;

src/pages/home/home.vue

@@ -395,8 +395,17 @@ export default {
         this.showModle = false;
         this.isIniTenMinutes = false;
     },
+    onUnload() {},
+
+    onLaunch() {
+        uni.$on("mqttDataReadyOnce", (client) => {
+            this.showModle = true;
+            console.log("showModle", this.showModle);
+        });
+    },
+
     onUnload() {
-        // this.isIniTenMinutes = false;
+        this.showModle = false;
     },
 
     onShareAppMessage() {

src/pagesA/deviceDetail/deviceDetail.vue

@@ -10,6 +10,7 @@
                     width: `${length / 200}px`,
                     height: `${width / 200}px`,
                     position: 'relative',
+                    transform: `scale(${zoomTimes})`,
                 }"
                 :class="[
                     width < 25500 && length < 25000 ? 'tranStyle' : 'center',
@@ -31,9 +32,6 @@
                             'transform-origin': 'center center',
                             zIndex: 4444,
                         }"
-                        @touchmove.prevent="onTouchMove(index, $event)"
-                        @touchstart="onTouchStart(index, $event)"
-                        @touchend="onTouchEnd(index, $event)"
                     >
                         <image
                             style="width: 100%; height: 100%; display: block"
@@ -52,7 +50,9 @@
                                     item.displayX / 2
                                 }px, ${
                                     -item.displayY / 2
-                                }px, 0) translate(-50%, -50%)`,
+                                }px, 0) translate(-50%, -50%) scale(${
+                                    1.5 / zoomTimes
+                                })`,
                                 zIndex: 9999,
                                 transition: 'transform 1s linear',
                                 willChange: 'transform',
@@ -458,6 +458,7 @@ export default {
             index: 0,
             showModle: false,
             unsubscribeFn: null,
+            zoomTimes: "",
         };
     },
     computed: {},
@@ -486,6 +487,7 @@ export default {
                         this.yOffset =
                             -(this.devInfo.yyStart + this.devInfo.yyEnd) * 50;
                         this.statusLight = this.devInfo.statusLight;
+                        this.calculate(this.width, this.length);
                     }
                 })
 
@@ -959,6 +961,25 @@ export default {
 
             return existingPoint;
         },
+
+        calculate(width, length) {
+            let zoomTime = width > length ? width : length;
+            let practical = zoomTime / 100;
+            this.zoomTimes = 710 / practical;
+            this.normalizeZoomTimes(this.zoomTimes);
+            this.zoomTimes = this.zoomTimes - 0.2;
+        },
+        normalizeZoomTimes(num) {
+            const intPart = Math.floor(num);
+            const decimalPart = num - intPart;
+
+            if (decimalPart >= 0.1 && decimalPart < 0.5) {
+                return intPart;
+            } else if (decimalPart >= 0.5 && decimalPart < 0.9) {
+                return intPart + 0.5;
+            }
+            return num;
+        },
     },
     onShow() {
         this.showModle = true;
@@ -1056,12 +1077,12 @@ export default {
         .center {
             position: absolute;
             overflow: hidden;
-            background-color: #fff;
-            border: 14rpx solid #333333;
+            border: none;
+            outline: 10rpx solid #333333;
             background-image: url("https://hflnxx.oss-cn-shanghai.aliyuncs.com/IMAGE/20250919/toilet_bg.png");
             background-repeat: no-repeat;
             background-position: center;
-            transform: scale(1.3);
+            // transform: scale(1.3);
 
             .moduleContent {
                 position: relative;
@@ -1082,11 +1103,12 @@ export default {
             position: absolute;
             overflow: hidden;
             background-color: #fff;
-            border: 9rpx solid #333333;
+            border: none;
+            outline: 10rpx solid #333333;
             background-image: url("https://hflnxx.oss-cn-shanghai.aliyuncs.com/IMAGE/20250919/toilet_bg.png");
             background-repeat: no-repeat;
             background-position: center;
-            transform: scale(2.3);
+            // transform: scale(2.3);
 
             .moduleContent {
                 // overflow: hidden;

src/utils/globalMqtt.js

@@ -45,7 +45,13 @@ class MqttService {
 
     // 连接 DATA
     connectData(userId) {
+        uni.showToast({
+            title: "mqtt连接中...",
+            icon: "none",
+            duration: 1500,
+        });
         if (this.dataConnected && this.dataClient) {
+            uni.hideToast()
             console.log("DATA MQTT 已连接，复用现有实例");
             return Promise.resolve(this.dataClient);
         }
@@ -71,7 +77,6 @@ class MqttService {
             .then(client => {
                 this.dataClient = client;
                 this.dataConnected = true;
-
                 uni.$emit('mqttData-ready', this.dataClient);
                 return client;
             });
@@ -110,18 +115,44 @@ class MqttService {
             this.connections.set(brokerName, connection);
 
             client.on('connect', () => {
+                uni.hideToast()
                 console.log(`${brokerName} MQTT 连接成功`);
                 connection.connected = true;
+                uni.$emit('mqttDataReadyOnce', this.dataClient);
                 resolve(client);
             });
 
             client.on('error', (err) => {
+                uni.showModal({
+                    title: '提示',
+                    content: 'mqtt连接失败,请重新登录',
+                    showCancel: false,
+                    success: (res) => {
+                        if (res.confirm) {
+                            uni.clearStorageSync();
+                            uni.reLaunch({
+                                url: "/pagesA/loginNew/loginNew"
+                            })
+                        }
+                        if (res.cancel) {
+                            uni.clearStorageSync();
+                            uni.reLaunch({
+                                url: "/pagesA/loginNew/loginNew"
+                            })
+                        }
+                    }
+                })
                 console.error(`${brokerName} MQTT 连接错误:`, err);
                 connection.connected = false;
                 reject(err);
             });
 
             client.on('close', () => {
+                uni.showToast({
+                    title: `mqtt已经断开`,
+                    icon: "none",
+                    duration: 1500,
+                });
                 console.log(`${brokerName} MQTT 断开`);
                 connection.connected = false;
             });