xiaoyang/smart-home

Fork 0

小羊肉肉. 00c4b9d098 xiaoyang

2026-02-26 09:16:34 +08:00

8.7 KiB

Raw Blame History

UI优化更新说明 (2025-01-22)

✅ 已完成的三项优化

1. 删除首页"最近12小时无异常"文案

修改文件: pages/index/index.vue

修改内容:

删除了"最近 {{noAlarmHours}} 小时无异常"这行文案
保留了"厨房当前处于安全监测状态"主文案
界面更简洁清爽

修改前:

<view class="no-alarm-content">
    <text class="no-alarm-icon">🟢</text>
    <text class="no-alarm-text">厨房当前处于安全监测状态</text>
    <text class="no-alarm-desc">最近 {{noAlarmHours}} 小时无异常</text>
</view>

修改后:

<view class="no-alarm-content">
    <text class="no-alarm-icon">🟢</text>
    <text class="no-alarm-text">厨房当前处于安全监测状态</text>
</view>

2. 修改设置页面"Developer Options"为"Advanced setting"

修改文件: utils/simpleI18n.js

修改内容:

中文: "开发者选项" → "高级设置"
英文: "Developer Options" → "Advanced setting"

修改位置:

// 中文翻译
developerOptions: '高级设置',

// 英文翻译
developerOptions: 'Advanced setting',

影响页面:

pages/kitchen/settings.vue - 设置页面标题和卡片标题

3. 报警历史添加解除状态信息 ⭐

修改文件: pages/kitchen/history.vue

新增功能: 在报警历史卡片中添加解除状态显示，包括：

✅ 是否已解除（自动/用户处理）
⏰ 解除时间
🎨 绿色背景样式

3.1 UI显示效果

示例:

无人值守风险
热源持续升温，厨房无人5分钟
热点区域: 厨房区域
✅ 已于 21:38 自动解除

3.2 数据结构扩展

在报警对象中新增三个字段：

{
    id: "alarm_001",
    title: "无人值守风险",
    desc: "热源持续升温，厨房无人5分钟",
    temp: 45.2,
    time: "21:30",
    location: "厨房区域",
    
    // 新增字段
    resolved: true,              // 是否已解除
    resolvedTime: "21:38",       // 解除时间 (HH:MM)
    resolvedType: "auto"         // 解除类型: "auto"(自动) 或 "manual"(用户处理)
}

3.3 数据源兼容性

支持多种数据源字段格式：

解除状态判断:

alarm.resolved (布尔值)
alarm.resolvedAt (时间戳)
alarm.resolved_at (时间戳)

解除时间解析:

alarm.resolvedAt (优先)
alarm.resolved_at
alarm.resolvedTimestamp

解除类型判断:

alarm.resolvedType / alarm.resolved_type (直接使用)
alarm.resolvedBy / alarm.resolved_by (system → auto, 其他 → manual)

3.4 样式设计

.alarm-resolved {
    margin-top: 12rpx;
    padding: 8rpx 12rpx;
    background: rgba(39, 174, 96, 0.1);  /* 绿色半透明背景 */
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    gap: 8rpx;
}

.resolved-icon {
    font-size: 24rpx;  /* ✅ 图标 */
}

.resolved-text {
    font-size: 22rpx;
    color: #27AE60;    /* 绿色文字 */
    font-weight: 500;
}

📊 数据流程说明

ESP32端需要提供的数据

如果ESP32端要支持解除状态显示，需要在报警历史API中返回以下字段：

{
    "alarms": [
        {
            "id": 1,
            "title": "无人值守风险",
            "desc": "热源持续升温，厨房无人5分钟",
            "temp": 45.2,
            "timestamp": 1737548400000,
            "location": "厨房区域",
            
            // 新增字段（可选）
            "resolved": true,
            "resolvedAt": 1737548880000,     // 解除时间戳（毫秒）
            "resolvedType": "auto",          // "auto" 或 "manual"
            "resolvedBy": "system"           // 或者用这个字段，system会被转为auto
        }
    ]
}

云端API需要提供的数据

云端报警查询接口也应该返回类似字段：

{
    "code": 200,
    "data": [
        {
            "id": "alarm_001",
            "title": "无人值守风险",
            "message": "热源持续升温，厨房无人5分钟",
            "temp": 45.2,
            "occurredAt": "2025-01-22T21:30:00Z",
            "alarmType": "UNATTENDED",
            "level": "warning",
            "isRead": false,
            
            // 新增字段（可选）
            "resolved": true,
            "resolvedAt": "2025-01-22T21:38:00Z",
            "resolvedType": "auto",
            "resolvedBy": "system"
        }
    ]
}

🎨 UI效果预览

首页优化

优化前:

🟢
厨房当前处于安全监测状态
最近 12 小时无异常

优化后:

🟢
厨房当前处于安全监测状态

设置页面优化

优化前:

🐛 开发者选项
   Developer Options

优化后:

🐛 高级设置
   Advanced setting

报警历史优化

未解除的报警:

┌─────────────────────────────┐
│ 🔥 高温危险      45.2°C     │
│ 21:30                       │
│                             │
│ 热源持续升温，温度超过阈值   │
│ 热点区域: 厨房区域           │
│                             │
│ [标记已读]  [删除]          │
└─────────────────────────────┘

已解除的报警:

┌─────────────────────────────┐
│ 👤 无人值守风险   45.2°C    │
│ 21:30                       │
│                             │
│ 热源持续升温，厨房无人5分钟  │
│ 热点区域: 厨房区域           │
│ ┌─────────────────────────┐ │
│ │ ✅ 已于 21:38 自动解除  │ │
│ └─────────────────────────┘ │
│                             │
│ [标记已读]  [删除]          │
└─────────────────────────────┘

🔧 后续扩展建议

1. ESP32端实现建议

在ESP32的报警管理模块中添加解除逻辑：

// AlarmManager.cpp
struct AlarmRecord {
    int id;
    String title;
    String desc;
    float temp;
    unsigned long timestamp;
    String location;
    
    // 新增字段
    bool resolved;
    unsigned long resolvedAt;
    String resolvedType;  // "auto" or "manual"
};

// 自动解除逻辑（温度恢复正常）
void checkAndAutoResolveAlarms() {
    for (auto& alarm : alarmHistory) {
        if (!alarm.resolved && currentTemp < SAFE_TEMP) {
            alarm.resolved = true;
            alarm.resolvedAt = millis();
            alarm.resolvedType = "auto";
        }
    }
}

// 用户手动解除
void manualResolveAlarm(int alarmId) {
    for (auto& alarm : alarmHistory) {
        if (alarm.id == alarmId) {
            alarm.resolved = true;
            alarm.resolvedAt = millis();
            alarm.resolvedType = "manual";
            break;
        }
    }
}

2. 云端API扩展建议

在云端报警记录表中添加字段：

ALTER TABLE alarm_records 
ADD COLUMN resolved BOOLEAN DEFAULT FALSE,
ADD COLUMN resolved_at TIMESTAMP NULL,
ADD COLUMN resolved_type VARCHAR(20) NULL,
ADD COLUMN resolved_by VARCHAR(50) NULL;

3. 更多解除类型

可以扩展更多解除类型：

const resolvedTypes = {
    'auto': '自动解除',           // 温度恢复正常
    'manual': '用户处理',         // 用户手动标记
    'timeout': '超时解除',        // 报警超时自动解除
    'system': '系统解除',         // 系统检测到安全
    'confirmed': '已确认处理'     // 用户确认已处理
}

📝 测试建议

1. 首页测试

✅ 检查无报警时只显示"厨房当前处于安全监测状态"
✅ 确认不再显示"最近XX小时无异常"

2. 设置页面测试

✅ 中文环境下显示"高级设置"
✅ 英文环境下显示"Advanced setting"

3. 报警历史测试

✅ 未解除的报警不显示解除状态
✅ 已解除的报警显示绿色解除状态条
✅ 自动解除显示"自动解除"
✅ 用户处理显示"用户处理"
✅ 解除时间格式正确(HH:MM)

4. 数据兼容性测试

✅ ESP32本地数据正常显示
✅ 云端数据正常显示
✅ 缺少解除字段时不报错
✅ 各种时间格式都能正确解析

🎉 总结

本次优化主要聚焦于UI细节和用户体验：

简化信息 - 删除冗余的时间提示
专业化命名 - 将"开发者选项"改为更合适的"高级设置"
增强信息 - 添加报警解除状态，让用户了解报警的完整生命周期

所有修改都保持了向后兼容性，不会影响现有功能。

8.7 KiB Raw Blame History Unescape Escape