断线状态

src/pages/environment/index.vue

@@ -10,7 +10,7 @@
       <!-- 环境参数详情 -->
       <view class="parameter-details">
       <!-- 温度卡片 -->
-      <view class="detail-card temperature-detail-card" @click="navigateToParameterRecord">
+      <view class="detail-card temperature-detail-card" :class="{ 'disconnected': wdisConnected === 0 }" @click="navigateToParameterRecord">
         <view class="detail-header">
           <view class="detail-icon-container">
             <view class="detail-icon temperature-icon">🌡️</view>
@@ -30,7 +30,7 @@
       </view>
       
       <!-- 湿度卡片 -->
-      <view class="detail-card humidity-detail-card" @click="navigateToParameterRecord">
+      <view class="detail-card humidity-detail-card" :class="{ 'disconnected': sdisConnected === 0 }" @click="navigateToParameterRecord">
         <view class="detail-header">
           <view class="detail-icon-container">
             <view class="detail-icon humidity-icon">💧</view>
@@ -50,7 +50,7 @@
       </view>
       
       <!-- 洁净度卡片 -->
-      <view class="detail-card cleanliness-detail-card" @click="navigateToParameterRecord">
+      <view class="detail-card cleanliness-detail-card" :class="{ 'disconnected': pmisConnected === 0 }" @click="navigateToParameterRecord">
         <view class="detail-header">
           <view class="detail-icon-container">
             <view class="detail-icon cleanliness-icon">✨</view>
@@ -347,7 +347,7 @@ export default {
   onShow() {
     console.log('📱 环境参数页面显示，触发页面更新');
     this.init();
-    this.getStatus();
+    // 注意：init() 中已经包含了状态检查，不需要单独调用 getStatus()
     // 重新启动定时器
     this.startDataFetching();
     // // 只有在非首次显示时才重新获取最新空调温度
@@ -379,7 +379,13 @@ export default {
     this.stopDataFetching()
   },
   methods: {
-    init() {
+    async init() {
+      console.log('📱 开始初始化环境参数页面...')
+      // 先调用状态接口判断是否在线
+      try {
+        const isOnline = await this.checkConnectionStatus()
+        if (isOnline) {
+          console.log('✅ 设备在线，开始更新数据接口')
           // 获取最新空调温度
           this.getLatestAirConditionerTemperature()
           // 获取最新温湿度数据
@@ -388,8 +394,32 @@ export default {
           // this.createStartupEventIfNeeded()
           // 获取温湿度区间设置
           this.loadWsdSettings()
+        } else {
+          console.log('⚠️ 设备离线，跳过数据接口更新')
+        }
+      } catch (error) {
+        console.error('❌ 检查连接状态失败:', error)
+        // 即使检查失败，也尝试获取数据（容错处理）
+        this.getLatestAirConditionerTemperature()
+        this.getLatestEnvironmentData()
+        this.loadWsdSettings()
+      }
       // 注意：定时器在 onShow 中启动，避免重复启动
     },
+    
+    // 检查连接状态，返回是否在线
+    async checkConnectionStatus() {
+      const res = await statusApi.getConnectionStatus();
+      console.log('📊 连接状态接口返回:', res)
+      if (res && typeof res.connected === 'boolean') {
+        const val = res.connected ? 1 : 0
+        this.wdisConnected = val
+        this.sdisConnected = val
+        this.pmisConnected = val
+        return res.connected
+      }
+      return false
+    },
     navigateToParameterRecord() {
       try {
         uni.switchTab({ url: '/pages/parameter/index' })
@@ -617,9 +647,20 @@ export default {
         clearInterval(this.dataFetchInterval)
       }
       
-      // 每5秒获取一次最新环境数据
+      // 每5秒先检查状态，如果在线再获取最新环境数据
-      this.dataFetchInterval = setInterval(() => {
+      this.dataFetchInterval = setInterval(async () => {
+        try {
+          const isOnline = await this.checkConnectionStatus()
+          if (isOnline) {
             this.getLatestEnvironmentData()
+          } else {
+            console.log('⚠️ 定时检查：设备离线，跳过数据更新')
+          }
+        } catch (error) {
+          console.error('❌ 定时检查状态失败:', error)
+          // 容错处理：即使状态检查失败，也尝试获取数据
+          this.getLatestEnvironmentData()
+        }
       }, 5000)
     },
     
@@ -1523,6 +1564,25 @@ export default {
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
 }
 
+/* 断线状态样式 */
+.detail-card.disconnected {
+  border-color: #95a5a6 !important;
+  border-left-color: #95a5a6 !important;
+  opacity: 0.7;
+}
+
+.detail-card.disconnected .detail-label {
+  color: #95a5a6;
+}
+
+.detail-card.disconnected .detail-value {
+  color: #95a5a6;
+}
+
+.detail-card.disconnected .detail-progress-fill {
+  background: #95a5a6 !important;
+}
+
 /* 温度详情卡片 */
 .temperature-detail-card {
   border-left: 4rpx solid #e74c3c;

src/utils/sendMqtt.js

@@ -29,6 +29,9 @@ function messageid2() {
 }
 
 var client;
+// 重连计数器，记录连续失败的重连次数
+let reconnectAttempts = 0;
+const MAX_RECONNECT_ATTEMPTS = 5; // 最大重连次数
 
 // 创建MQTT连接
 const createMqtt = () => {
@@ -50,6 +53,18 @@ const createMqtt = () => {
 	}
 
 	try {
+		// 检查是否已经超过最大重连次数
+		if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+			console.log(`❌ 已重连${MAX_RECONNECT_ATTEMPTS}次失败，停止继续连接`);
+			uni.hideLoading();
+			uni.showToast({
+				title: `连接失败，已重试${MAX_RECONNECT_ATTEMPTS}次`,
+				icon: 'error',
+				duration: 3000
+			});
+			return;
+		}
+		
 		if (!client) {
 			console.log('🔧 开始创建MQTT连接...');
 			console.log('🔧 MQTT URL:', mqtturl);
@@ -68,6 +83,7 @@ const createMqtt = () => {
 				'MP-ALIPAY'
 				// #endif
 			)
+			console.log(`🔄 当前重连次数: ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS}`);
 			
 			// 显示连接loading
 			uni.showLoading({
@@ -85,6 +101,23 @@ const createMqtt = () => {
 		console.error('❌ 错误详情:', e.message);
 		console.error('❌ 错误堆栈:', e.stack);
 		
+		// 连接失败时增加重连计数器
+		reconnectAttempts++;
+		console.log(`❌ 连接失败，当前重连次数: ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS}`);
+		
+		// 检查是否超过最大重连次数
+		if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+			console.log(`❌ 已达到最大重连次数${MAX_RECONNECT_ATTEMPTS}次，停止连接`);
+			uni.hideLoading();
+			uni.showToast({
+				title: `连接失败，已重试${MAX_RECONNECT_ATTEMPTS}次`,
+				icon: 'error',
+				duration: 3000
+			});
+			client = null;
+			return;
+		}
+		
 		// 连接失败时隐藏loading
 		uni.hideLoading();
 		// uni.showToast({
@@ -104,6 +137,9 @@ const initEventHandleMqtt = (topicUrl) => {
 	client.on("connect", function() {
 		uni.hideLoading();
 		console.log("✅ MQTT连接成功");
+		// 连接成功，重置重连计数器
+		reconnectAttempts = 0;
+		console.log("✅ 重置重连计数器");
 		
 		// 显示连接成功提示
 		// uni.showToast({
@@ -160,9 +196,28 @@ const initEventHandleMqtt = (topicUrl) => {
 
 	// 当断开连接后，经过重连间隔时间重新自动连接到 Broker 时触发
 	client.on('reconnect', function() {
-		console.log('🔄 MQTT重新连接中...');
+		reconnectAttempts++;
+		console.log(`🔄 MQTT重新连接中... (第${reconnectAttempts}次重连)`);
+		
+		// 检查是否超过最大重连次数
+		if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+			console.log(`❌ 已达到最大重连次数${MAX_RECONNECT_ATTEMPTS}次，停止重连`);
+			uni.hideLoading();
+			uni.showToast({
+				title: `连接失败，已重试${MAX_RECONNECT_ATTEMPTS}次`,
+				icon: 'error',
+				duration: 3000
+			});
+			// 停止重连，关闭客户端
+			if (client) {
+				client.end();
+				client = null;
+			}
+			return;
+		}
+		
 		uni.showLoading({
-			title: "重新连接中..."
+			title: `重新连接中... (${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`
 		});
 	});
 
@@ -204,6 +259,9 @@ const closeMqtt = () => {
 		client.end();
 		client = null;
 	}
+	// 断开连接时重置重连计数器
+	reconnectAttempts = 0;
+	console.log('🔌 重置重连计数器');
 };
 
 // 使用pingResp心跳判断客户端和服务端是否还在连接着
@@ -238,6 +296,9 @@ const getConnectionStatus = () => {
 // 手动重连函数
 const manualReconnect = () => {
 	console.log('🔄 手动触发重连');
+	// 手动重连时重置计数器，给用户重新开始的机会
+	reconnectAttempts = 0;
+	console.log('🔄 重置重连计数器，开始新的连接尝试');
 	closeMqtt();
 	setTimeout(() => {
 		createMqtt();