🔧 修复设备配置同步问题

🔍 问题分析

你的分析完全正确！两个系统是分离的：

原生 mDNS 界面 → 保存配置到 Esp32ConfigStore
uni-app 首页 → 无法读取 Esp32ConfigStore 的配置

从日志可以看出：

获取报警历史失败: Error: ESP32设备未配置，请先完成设备发现

✅ 解决方案

需要在 uni-app 中正确调用 Android Bridge 来获取设备配置。

📝 修改 uni-app 代码

修改 1: 添加设备配置检查方法

在 pages/index/index.vue 的 methods 中添加：

/**
 * 检查并加载Android设备配置
 */
checkAndLoadAndroidConfig() {
	console.log('🔍 检查Android设备配置')
	
	// 检查是否在Android环境
	if (typeof window !== 'undefined' && window.Android && window.Android.getDeviceConfig) {
		try {
			const configStr = window.Android.getDeviceConfig()
			console.log('📱 获取到配置:', configStr)
			
			const config = JSON.parse(configStr)
			
			if (config.configured && config.host) {
				console.log('✅ Android设备已配置:', config.host)
				
				// 保存配置到 uni-app 的数据中
				this.androidDeviceConfig = config
				this.isAndroidConfigured = true
				
				// 更新 ESP32 SDK 管理器的主机地址
				if (this.esp32SdkManager) {
					this.esp32SdkManager.setHost(config.host)
				}
				
				// 设置设备在线状态
				this.deviceOnline = true
				
				console.log('✅ 设备配置已同步到uni-app')
				return true
			} else {
				console.log('❌ Android设备未配置')
				this.isAndroidConfigured = false
				this.deviceOnline = false
				return false
			}
		} catch (error) {
			console.error('❌ 解析Android设备配置失败:', error)
			this.isAndroidConfigured = false
			this.deviceOnline = false
			return false
		}
	} else {
		console.log('⚠️ 不在Android环境或Bridge不可用')
		return false
	}
},

修改 2: 在页面显示时检查配置

修改 onShow() 方法，在开头添加配置检查：

onShow() {
	// 页面显示时重新加载数据
	this.isPageActive = true
	
	// ✅ 首先检查Android设备配置
	const hasAndroidConfig = this.checkAndLoadAndroidConfig()
	
	if (hasAndroidConfig) {
		console.log('✅ 使用Android设备配置')
		// 设置Android回调
		this.setupAndroidCallbacks()
	}
	
	// 继续原有的逻辑
	this.loadData()
	// 强制更新报警历史，确保UI同步最新数据
	this.fetchAlarmHistory(true)
	// 加载厨房历史数据用于Status Summary卡片
	this.loadKitchenAlarmHistory()
	// 首页只启动报警定时器，不启动温度定时器（省电模式）
	this.startAlarmTimer()
},

修改 3: 在设备配置按钮点击后刷新

修改 openDeviceConfig() 方法：

/**
 * 打开设备配置页面
 */
openDeviceConfig() {
	console.log('🔧 打开设备配置')
	
	// 检查是否在Android环境
	if (typeof window !== 'undefined' && window.Android && window.Android.openDeviceDiscovery) {
		// 使用Android原生设备发现
		console.log('🔍 打开Android原生设备发现')
		window.Android.openDeviceDiscovery()
		
		// 设置一个监听器，当用户返回时重新检查配置
		// 注意：这里使用定时器来检测配置变化
		this.startConfigCheckTimer()
	} else {
		// 使用Web版本或显示提示
		console.log('⚠️ Android原生设备发现不可用')
		uni.showToast({
			title: '请在Android应用中使用',
			icon: 'none',
			duration: 2000
		})
	}
},

/**
 * 启动配置检查定时器
 */
startConfigCheckTimer() {
	// 清除之前的定时器
	if (this.configCheckTimer) {
		clearInterval(this.configCheckTimer)
	}
	
	// 每2秒检查一次配置是否更新
	this.configCheckTimer = setInterval(() => {
		const hasConfig = this.checkAndLoadAndroidConfig()
		if (hasConfig) {
			console.log('🎉 检测到设备配置更新，停止检查')
			clearInterval(this.configCheckTimer)
			this.configCheckTimer = null
			
			// 重新加载数据
			this.loadData()
			this.fetchAlarmHistory(true)
			
			// 显示成功提示
			uni.showToast({
				title: '设备配置成功',
				icon: 'success',
				duration: 2000
			})
		}
	}, 2000)
	
	// 30秒后停止检查
	setTimeout(() => {
		if (this.configCheckTimer) {
			clearInterval(this.configCheckTimer)
			this.configCheckTimer = null
			console.log('⏰ 配置检查超时，停止检查')
		}
	}, 30000)
},

修改 4: 添加数据属性

在 data() 中添加：

data() {
	return {
		// ... 其他数据 ...
		
		// Android设备配置相关
		isAndroidConfigured: false,
		androidDeviceConfig: null,
		configCheckTimer: null,
		
		// ... 其他数据 ...
	}
}

修改 5: 页面卸载时清理定时器

在 onUnload() 中添加：

onUnload() {
	// 页面卸载时清理所有定时器，防止JS Framework错误
	console.log('首页卸载，清理定时器')
	this.stopTemperatureTimer()
	this.stopAlarmTimer()
	
	// 清理配置检查定时器
	if (this.configCheckTimer) {
		clearInterval(this.configCheckTimer)
		this.configCheckTimer = null
	}
	
	// 标记页面为非活跃状态
	this.isPageActive = false
},

🚀 完整的修改流程

1. 用户操作流程

1. 用户点击 ⚙️ 设备配置按钮
   ↓
2. 打开原生 mDNS 扫描界面
   ↓
3. 扫描并选择 ESP32 设备
   ↓
4. 设备配置保存到 Esp32ConfigStore
   ↓
5. 返回 uni-app 首页
   ↓
6. uni-app 检测到配置更新
   ↓
7. 调用 window.Android.getDeviceConfig()
   ↓
8. 获取设备配置并同步到 uni-app
   ↓
9. 重新加载数据，显示设备信息

2. 技术实现流程

openDeviceConfig() 
   ↓
启动 configCheckTimer (每2秒检查)
   ↓
checkAndLoadAndroidConfig()
   ↓
window.Android.getDeviceConfig()
   ↓
解析配置并更新 uni-app 数据
   ↓
重新加载设备数据
   ↓
显示成功提示

📋 修改清单

1. 添加 checkAndLoadAndroidConfig() 方法
2. 修改 onShow() 方法
3. 修改 openDeviceConfig() 方法
4. 添加 startConfigCheckTimer() 方法
5. 在 data() 中添加新属性
6. 修改 onUnload() 方法

🎯 预期效果

修改后的行为：

1. 点击设备配置按钮
2. 在原生界面选择设备
3. 返回首页后，uni-app 自动检测到配置
4. 显示 "设备配置成功" 提示
5. 开始正常获取设备数据
6. 不再显示 "ESP32设备未配置" 错误

这样就能解决两个系统分离的问题！ 🎉

6.4 KiB Raw Blame History Unescape Escape