家庭能源可视化应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

家庭能源可视化是一款智能家居类应用，为家庭用户提供直观的用电监测与节能管理服务。应用以绿色为主色调，象征节能环保的理念。界面设计采用卡片式布局，让用户一目了然地掌握家庭用电情况。

应用实时显示各电器的用电状态，通过热力图直观展示用电规律，提供个性化的节能建议。用户可以在不知不觉中养成节能习惯，有效降低电费支出。智能管理家庭能源，从了解开始，从改变做起。

1.2 核心功能

功能模块	功能描述	实现方式
实时监测	实时功率显示	Timer定时刷新
电器管理	各电器用电统计	列表卡片展示
热力图	用电规律可视化	CustomPaint绘制
节能建议	个性化节能方案	智能推荐系统
用电统计	日/月用电分析	数据聚合计算
电费计算	自动电费估算	阶梯电价模型

1.3 电器分类体系

应用支持10种常见家用电器：

电器类型	图标	颜色	额定功率	运行特点
空调	ac_unit	#2196F3	1500W	制冷制热
冰箱	kitchen	#4CAF50	150W	24小时运行
洗衣机	local_laundry_service	#9C27B0	500W	间歇运行
电视	tv	#FF5722	120W	娱乐设备
照明	lightbulb	#FFC107	60W	日常照明
电脑	computer	#607D8B	200W	办公娱乐
热水器	water_drop	#00BCD4	2000W	加热耗能
微波炉	microwave	#E91E63	1000W	短时高功率
电饭煲	rice_bowl	#795548	800W	烹饪设备
电风扇	toys	#03A9F4	50W	夏季降温

1.4 能耗等级体系

等级	名称	颜色	功率范围	状态说明
低能耗	Low	#4CAF50	0-30%	节能状态
中等	Medium	#FFC107	30-60%	正常用电
高能耗	High	#FF9800	60-80%	需要关注
超高	Critical	#F44336	80-100%	建议节能

1.5 时段电价体系

时段	时间范围	电价倍率	说明
凌晨	0:00-6:00	0.5	低谷电价
早晨	6:00-9:00	1.0	平时电价
上午	9:00-12:00	1.0	平时电价
中午	12:00-14:00	1.2	峰时电价
下午	14:00-18:00	1.0	平时电价
傍晚	18:00-21:00	1.5	高峰电价
夜间	21:00-24:00	0.8	低谷电价

1.6 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
状态管理	setState	-
定时任务	Timer	-
目标平台	鸿蒙OS / Web	API 21+

1.7 项目结构

lib/
└── main_home_energy.dart
    ├── HomeEnergyApp               # 应用入口
    ├── ApplianceType               # 电器类型枚举
    ├── EnergyLevel                 # 能耗等级枚举
    ├── TimeSlot                    # 时段枚举
    ├── ApplianceUsage              # 电器用电模型
    ├── HourlyUsage                 # 小时用电模型
    ├── DailyUsage                  # 日用电模型
    ├── EnergySavingTip             # 节能建议模型
    ├── HomeEnergyHomePage          # 主页面（底部导航）
    ├── _buildDashboardPage         # 总览页面
    ├── _buildAppliancesPage        # 电器页面
    ├── _buildHeatmapPage           # 热力图页面
    ├── _buildTipsPage              # 节能页面
    └── HourlyChartPainter          # 用电曲线绘制器

---

二、设计理念

2.1 能源管理可视化

2.2 节能管理流程

2.3 色彩体系

应用采用绿色为主色调：

颜色类型	色值	RGB	用途
主色	#4CAF50	76,175,80	导航、按钮、强调
辅助色	#8BC34A	139,195,74	渐变、背景
低能耗色	#4CAF50	76,175,80	低能耗标识
中等色	#FFC107	255,193,7	中等能耗
高能耗色	#FF9800	255,152,0	高能耗警告
超高色	#F44336	244,67,54	超高能耗警示

2.4 用电数据流程

---

三、系统架构

3.1 整体架构图

3.2 类图设计

3.3 实时数据更新流程

---

四、核心功能实现

4.1 电器类型枚举

定义10种家用电器：

enum ApplianceType {
  airConditioner('空调', Icons.ac_unit, Color(0xFF2196F3), 1500, '制冷制热'),
  refrigerator('冰箱', Icons.kitchen, Color(0xFF4CAF50), 150, '24小时运行'),
  washingMachine('洗衣机', Icons.local_laundry_service, Color(0xFF9C27B0), 500, '间歇运行'),
  television('电视', Icons.tv, Color(0xFFFF5722), 120, '娱乐设备'),
  lighting('照明', Icons.lightbulb, Color(0xFFFFC107), 60, '日常照明'),
  computer('电脑', Icons.computer, Color(0xFF607D8B), 200, '办公娱乐'),
  waterHeater('热水器', Icons.water_drop, Color(0xFF00BCD4), 2000, '加热耗能'),
  microwave('微波炉', Icons.microwave, Color(0xFFE91E63), 1000, '短时高功率'),
  riceCooker('电饭煲', Icons.rice_bowl, Color(0xFF795548), 800, '烹饪设备'),
  electricFan('电风扇', Icons.toys, Color(0xFF03A9F4), 50, '夏季降温');

  final String label;
  final IconData icon;
  final Color color;
  final int defaultPower;
  final String description;

  const ApplianceType(this.label, this.icon, this.color, this.defaultPower, this.description);
}

4.2 能耗等级枚举

定义四级能耗体系：

enum EnergyLevel {
  low('低能耗', Color(0xFF4CAF50), 0, 30),
  medium('中等', Color(0xFFFFC107), 30, 60),
  high('高能耗', Color(0xFFFF9800), 60, 80),
  critical('超高', Color(0xFFF44336), 80, 100);

  final String label;
  final Color color;
  final int minPercent;
  final int maxPercent;

  const EnergyLevel(this.label, this.color, this.minPercent, this.maxPercent);

  static EnergyLevel fromPercent(double percent) {
    for (var level in EnergyLevel.values) {
      if (percent >= level.minPercent && percent < level.maxPercent) {
        return level;
      }
    }
    return EnergyLevel.critical;
  }
}

4.3 实时数据更新

定时刷新电器数据：

void _startRealTimeUpdate() {
  _updateTimer = Timer.periodic(const Duration(seconds: 3), (timer) {
    _updateRealTimeData();
  });
}

void _updateRealTimeData() {
  final random = Random();
  setState(() {
    for (var usage in _applianceUsages) {
      if (usage.isRunning) {
        final fluctuation = 0.9 + random.nextDouble() * 0.2;
        _applianceUsages[_applianceUsages.indexOf(usage)] = ApplianceUsage(
          id: usage.id,
          type: usage.type,
          currentPower: usage.type.defaultPower * fluctuation,
          todayUsage: usage.todayUsage + usage.type.defaultPower * 0.001,
          monthUsage: usage.monthUsage,
          isRunning: usage.isRunning,
          lastActive: DateTime.now(),
        );
      }
    }
    _calculateTotals();
  });
}

4.4 热力图颜色计算

根据用电强度返回对应颜色：

Color _getHeatmapColor(double intensity) {
  if (intensity < 0.2) return const Color(0xFFE8F5E9);
  if (intensity < 0.4) return const Color(0xFFC8E6C9);
  if (intensity < 0.6) return const Color(0xFFFFEB3B);
  if (intensity < 0.8) return const Color(0xFFFF9800);
  return const Color(0xFFF44336);
}

4.5 用电曲线绘制

使用CustomPaint绘制24小时用电曲线：

class HourlyChartPainter extends CustomPainter {
  final List<HourlyUsage> usages;

  @override
  void paint(Canvas canvas, Size size) {
    final maxUsage = usages.map((u) => u.usage).reduce(max);
    final barWidth = size.width / 24;
    final paint = Paint()..style = PaintingStyle.fill;

    for (int i = 0; i < usages.length; i++) {
      final usage = usages[i];
      final barHeight = (usage.usage / maxUsage) * size.height;
      final x = i * barWidth;
      final y = size.height - barHeight;

      final intensity = usage.usage / maxUsage;
      paint.color = _getBarColor(intensity);

      final rect = RRect.fromRectAndRadius(
        Rect.fromLTWH(x + 1, y, barWidth - 2, barHeight),
        const Radius.circular(2),
      );
      canvas.drawRRect(rect, paint);
    }
  }
}

4.6 节能建议系统

提供个性化节能建议：

List<EnergySavingTip> _savingTips = [
  EnergySavingTip(
    id: 't1',
    title: '空调温度优化',
    content: '将空调温度调高1°C，可节省约10%的空调用电。建议夏季设置26°C，冬季设置20°C。',
    category: '温控',
    potentialSaving: 15.0,
    icon: Icons.thermostat,
    color: const Color(0xFF2196F3),
  ),
  EnergySavingTip(
    id: 't3',
    title: '热水器定时',
    content: '热水器是家庭耗电大户。建议设置定时加热，避开用电高峰期，仅在需要时加热。',
    category: '热水',
    potentialSaving: 25.0,
    icon: Icons.timer,
    color: const Color(0xFF00BCD4),
  ),
];

---

五、UI设计规范

5.1 配色方案

应用采用绿色为主色调：

颜色类型	色值	用途
主色	#4CAF50	导航、按钮、强调
辅助色	#8BC34A	渐变、背景
低能耗色	#4CAF50	低能耗标识
中等色	#FFC107	中等能耗
高能耗色	#FF9800	高能耗警告
超高色	#F44336	超高能耗警示

5.2 字体规范

元素	字号	字重	颜色
页面标题	20px	Bold	#000000
实时功率	48px	Bold	能耗等级颜色
电器名称	15px	SemiBold	#000000
用电数据	12px	Regular	#757575
节省金额	36px	Bold	#FFFFFF

5.3 组件规范

5.3.1 实时功率卡片

┌─────────────────────────────────────────┐
│              ⚡ 实时功率                 │
│                                         │
│              1234 W                     │
│                                         │
│           [中等能耗]                     │
└─────────────────────────────────────────┘

5.3.2 电器卡片

┌─────────────────────────────────────────┐
│ [❄️] 空调              [运行中]    [○] │
│      当前功率: 1520W                    │
│      今日: 3.25 kWh                     │
└─────────────────────────────────────────┘

5.3.3 热力图单元格

┌───┬───┬───┬───┬───┬───┬───┐
│ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │  ← 周日-周六
├───┼───┼───┼───┼───┼───┼───┤
│🟢│🟢│🟡│🟡│🟠│🟢│🟢│  ← 颜色深浅表示用电强度
├───┼───┼───┼───┼───┼───┼───┤
│🟢│🟡│🟠│🔴│🟠│🟡│🟢│
└───┴───┴───┴───┴───┴───┴───┘

---

六、交互设计

6.1 总览页面交互

6.2 电器管理流程

6.3 页面切换状态

---

七、数据分析

7.1 统计指标

统计项	计算方式	说明
实时功率	运行中电器功率之和	当前用电状态
今日用电	各电器今日用电累加	日用电量
今日费用	今日用电 × 0.5元/kWh	日电费估算
本月用电	各电器月用电累加	月用电量
本月费用	本月用电 × 0.5元/kWh	月电费估算

7.2 能耗分析

void _calculateTotals() {
  _totalCurrentPower = _applianceUsages.fold(0, (sum, u) => sum + u.currentPower);
  _todayTotalUsage = _applianceUsages.fold(0, (sum, u) => sum + u.todayUsage);
  _todayTotalCost = _applianceUsages.fold(0, (sum, u) => sum + u.todayCost);
  _monthTotalUsage = _applianceUsages.fold(0, (sum, u) => sum + u.monthUsage);
  _monthTotalCost = _applianceUsages.fold(0, (sum, u) => sum + u.monthCost);
}

7.3 节能潜力分析

建议类型	潜在节省	实施难度
空调温度优化	¥15/月	简单
热水器定时	¥25/月	中等
待机设备断电	¥8/月	简单
LED照明替换	¥12/月	中等
错峰用电	¥10/月	简单
冰箱合理使用	¥5/月	简单

---

八、扩展功能规划

8.1 后续版本规划

8.2 功能扩展建议

8.2.1 智能插座对接

接入智能插座实现真实数据采集：

• WiFi/蓝牙插座协议
• 实时功率读取
• 远程开关控制
• 定时任务设置

8.2.2 AI节能推荐

基于用电数据的智能推荐：

• 用电习惯分析
• 异常用电预警
• 个性化节能方案
• 电费预测

8.2.3 家庭能源报告

生成详细的能源报告：

• 周报/月报生成
• 用电趋势分析
• 节能效果追踪
• 分享与对比

---

九、注意事项

9.1 开发注意事项

1. 定时器管理：Timer需要在dispose时取消，避免内存泄漏

2. 状态更新：使用setState刷新UI，注意性能优化

3. 数据精度：用电数据保留适当小数位，避免精度问题

4. 动画控制：AnimationController需要正确初始化和释放

9.2 常见问题

问题	原因	解决方案
功率不更新	Timer未启动	检查_startRealTimeUpdate
热力图颜色异常	强度计算错误	检查intensity范围
费用计算不准	电价模型错误	验证阶梯电价
动画卡顿	刷新频率过高	降低刷新频率

9.3 使用提示

💡 家庭能源可视化使用小贴士 💡

关注实时功率，了解当前用电状态。
查看热力图，发现用电规律。
采纳节能建议，不知不觉省电费。
定期查看统计，追踪节能效果。

提示：养成随手关灯、合理使用空调的好习惯，节能从点滴做起。

---

十、运行说明

10.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+

10.2 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_home_energy.dart --web-port 8137

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_home_energy.dart

# 运行到Windows
flutter run -d windows -t lib/main_home_energy.dart

# 代码分析
flutter analyze lib/main_home_energy.dart

---

十一、总结

家庭能源可视化是一款智能家居类应用，为家庭用户提供直观的用电监测与节能管理服务。应用以绿色为主色调，采用卡片式布局，让用户一目了然地掌握家庭用电情况。

从技术实现来看，应用使用枚举类型定义10种家用电器、4级能耗等级和7个时段电价，通过Timer实现每3秒的实时数据刷新，使用CustomPaint绘制用电曲线和热力图。节能建议系统提供6条个性化建议，累计潜在节省可达75元/月。

从用户体验来看，应用提供直观的实时功率显示，让用户了解当前用电状态。电器管理功能支持开关控制和用电统计，热力图功能直观展示用电规律，节能建议帮助用户养成节能习惯。

应用不仅是一个用电监测工具，更是一个节能管理助手。它提醒我们：关注实时功率，了解当前用电状态；查看热力图，发现用电规律；采纳节能建议，不知不觉省电费；定期查看统计，追踪节能效果。在家庭能源管理的道路上，家庭能源可视化为用户提供了全方位的辅助工具。

智能管理家庭能源，从了解开始