断线状态
This commit is contained in:
吉浩茹
@ -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,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;
|
||||
|
||||
@ -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();
|
||||
|
||||
Reference in New Issue
Block a user