diff --git a/src/pages/environment/index.vue b/src/pages/environment/index.vue index 18b59fe..6ce8179 100644 --- a/src/pages/environment/index.vue +++ b/src/pages/environment/index.vue @@ -10,7 +10,7 @@ - + 🌡️ @@ -30,7 +30,7 @@ - + 💧 @@ -50,7 +50,7 @@ - + ✨ @@ -347,7 +347,7 @@ export default { onShow() { console.log('📱 环境参数页面显示，触发页面更新'); this.init(); - this.getStatus(); + // 注意：init() 中已经包含了状态检查，不需要单独调用 getStatus() // 重新启动定时器 this.startDataFetching(); // // 只有在非首次显示时才重新获取最新空调温度 @@ -379,17 +379,47 @@ export default { this.stopDataFetching() }, methods: { - init() { - // 获取最新空调温度 - this.getLatestAirConditionerTemperature() - // 获取最新温湿度数据 - this.getLatestEnvironmentData() - // 首次进入系统时创建启动事件 - // this.createStartupEventIfNeeded() - // 获取温湿度区间设置 - this.loadWsdSettings() + async init() { + console.log('📱 开始初始化环境参数页面...') + // 先调用状态接口判断是否在线 + try { + const isOnline = await this.checkConnectionStatus() + if (isOnline) { + console.log('✅ 设备在线，开始更新数据接口') + // 获取最新空调温度 + this.getLatestAirConditionerTemperature() + // 获取最新温湿度数据 + this.getLatestEnvironmentData() + // 首次进入系统时创建启动事件 + // 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秒获取一次最新环境数据 - this.dataFetchInterval = setInterval(() => { - this.getLatestEnvironmentData() + // 每5秒先检查状态，如果在线再获取最新环境数据 + 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; diff --git a/src/utils/sendMqtt.js b/src/utils/sendMqtt.js index 90e3bc7..e8d25c2 100644 --- a/src/utils/sendMqtt.js +++ b/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();