小区公告报修系统

---

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

一、项目概述

运行效果图

1.1 应用简介

小区公告报修系统是一款智慧社区服务应用，为业主提供便捷的社区公告查看和在线报修服务。支持公告分类浏览、报修申请提交、进度实时查询等功能，让业主足不出户即可享受高效便捷的物业服务。

应用以清新的青色为主色调，象征科技与服务的融合。涵盖首页服务、公告中心、报修服务、个人中心四大模块。用户可以查看小区公告、提交报修申请、跟踪处理进度、联系物业服务，实现社区服务的智能化管理。

1.2 核心功能

功能模块	功能描述	实现方式
公告查看	5种公告类型分类	枚举定义
在线报修	6种报修类型选择	表单提交
进度查询	4种报修状态追踪	状态管理
消息提醒	未读公告红点提示	状态标识
筛选功能	类型/状态筛选	过滤逻辑
详情展示	底部弹窗详情	模态窗口

1.3 公告类型定义

序号	类型名称	Emoji	描述
1	通知公告	📢	物业通知、重要公告
2	社区活动	🎉	社区活动、节日庆典
3	紧急通知	🚨	紧急停水停电等
4	维修通知	🔧	设施维修通知
5	其他公告	📋	其他类型公告

1.4 报修类型定义

序号	类型名称	Emoji	描述
1	水管维修	💧	水管、水龙头、下水道
2	电路维修	⚡	电路、开关、插座
3	电梯维修	🛗	电梯故障、维护
4	门禁维修	🚪	门禁、门锁、对讲机
5	公共设施	🏢	楼道灯、健身器材
6	其他维修	🔧	其他设施维修

1.5 报修状态定义

序号	状态名称	Emoji	描述
1	待处理	⏳	等待物业处理
2	处理中	🔧	正在维修处理
3	已完成	✅	维修已完成
4	已取消	❌	报修已取消

1.6 技术栈

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

1.7 项目结构

lib/
└── main_community_system.dart
    ├── CommunitySystemApp              # 应用入口
    ├── AnnouncementType                # 公告类型枚举
    ├── RepairType                      # 报修类型枚举
    ├── RepairStatus                    # 报修状态枚举
    ├── Announcement                    # 公告模型
    ├── RepairRequest                   # 报修请求模型
    ├── CommunitySystemHomePage         # 主页面（底部导航）
    ├── _buildHomePage                  # 首页
    ├── _buildAnnouncementPage          # 公告页
    ├── _buildRepairPage                # 报修页
    └── _buildProfilePage               # 我的页

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 报修处理流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 公告类型枚举 (AnnouncementType)

enum AnnouncementType {
  notice(label: '通知公告', emoji: '📢', description: '物业通知、重要公告'),
  activity(label: '社区活动', emoji: '🎉', description: '社区活动、节日庆典'),
  emergency(label: '紧急通知', emoji: '🚨', description: '紧急停水停电等'),
  maintenance(label: '维修通知', emoji: '🔧', description: '设施维修通知'),
  other(label: '其他公告', emoji: '📋', description: '其他类型公告');

  final String label;
  final String emoji;
  final String description;
}

3.1.2 报修类型枚举 (RepairType)

enum RepairType {
  water(label: '水管维修', emoji: '💧', description: '水管、水龙头、下水道等'),
  electric(label: '电路维修', emoji: '⚡', description: '电路、开关、插座等'),
  elevator(label: '电梯维修', emoji: '🛗', description: '电梯故障、维护等'),
  door(label: '门禁维修', emoji: '🚪', description: '门禁、门锁、对讲机等'),
  public(label: '公共设施', emoji: '🏢', description: '楼道灯、健身器材等'),
  other(label: '其他维修', emoji: '🔧', description: '其他设施维修');

  final String label;
  final String emoji;
  final String description;
}

3.1.3 公告模型 (Announcement)

class Announcement {
  final String id;              // 公告ID
  final String title;           // 公告标题
  final String content;         // 公告内容
  final AnnouncementType type;  // 公告类型
  final DateTime publishTime;   // 发布时间
  final String publisher;       // 发布者
  final int viewCount;          // 浏览次数
  final bool isTop;             // 是否置顶
  final bool isRead;            // 是否已读
}

3.1.4 报修请求模型 (RepairRequest)

class RepairRequest {
  final String id;              // 报修ID
  final String building;        // 楼栋
  final String unit;            // 单元
  final String room;            // 房间号
  final RepairType type;        // 报修类型
  final String description;     // 问题描述
  RepairStatus status;          // 报修状态
  final DateTime createdAt;     // 创建时间
  DateTime? updatedAt;          // 更新时间
  final String contactName;     // 联系人
  final String contactPhone;    // 联系电话
  final String? workerName;     // 维修人员
  final String? workerPhone;    // 维修电话
  final String? remark;         // 备注

  String get location => '$building栋$unit单元$room室';
}

3.1.5 公告类型分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 首页结构

3.2.3 公告页结构

3.2.4 报修页结构

3.3 公告筛选逻辑

3.4 报修筛选逻辑

---

四、UI设计规范

4.1 配色方案

应用以清新的青色为主色调，象征科技与服务的融合：

颜色类型	色值	用途
主色	#00BCD4 (Cyan)	导航、主题元素
辅助色	#26C6DA	公告页面
第三色	#4DD0E1	报修页面
强调色	#80DEEA	我的页面
背景色	#FAFAFA	页面背景
卡片背景	#FFFFFF	信息卡片

4.2 状态颜色定义

状态	色值	用途
待处理	#FF9800	橙色警示
处理中	#2196F3	蓝色进行
已完成	#4CAF50	绿色成功
已取消	#9E9E9E	灰色结束
紧急	#F44336	红色紧急

4.3 字体规范

元素	字号	字重	颜色
页面标题	24px	Bold	主色
公告标题	16px	Bold	#000000
报修类型	14px	Medium	主色
状态标签	12px	Regular	状态色
统计数字	24px	Bold	白色

4.4 组件规范

4.4.1 公告卡片

┌─────────────────────────────────────┐
│  ┌──────┐  [置顶] 公告标题          │
│  │  📢  │  公告内容摘要...          │
│  └──────┘  物业中心  12/25  👁 256  │
└─────────────────────────────────────┘

4.4.2 报修卡片

┌─────────────────────────────────────┐
│  ┌──────┐  水管维修      [待处理]   │
│  │  💧  │  1栋2单元301室            │
│  └──────┘  厨房水龙头漏水严重...    │
│            12/25 10:30              │
└─────────────────────────────────────┘

4.4.3 快捷服务卡片

┌─────────────────────────────────────┐
│  快捷服务                            │
│                                     │
│  ┌────────┐ ┌────────┐ ┌────────┐  │
│  │   🔧   │ │   📢   │ │   📞   │  │
│  │在线报修│ │查看公告│ │联系物业│  │
│  └────────┘ └────────┘ └────────┘  │
└─────────────────────────────────────┘

4.4.4 报修表单

┌─────────────────────────────────────┐
│  报修位置                            │
│  ┌─────┐ ┌─────┐ ┌─────┐           │
│  │楼栋 │ │单元 │ │房间 │           │
│  └─────┘ └─────┘ └─────┘           │
│                                     │
│  报修类型                            │
│  [💧 水管] [⚡ 电路] [🛗 电梯]      │
│  [🚪 门禁] [🏢 公共] [🔧 其他]      │
│                                     │
│  问题描述                            │
│  ┌─────────────────────────────┐   │
│  │ 请详细描述报修问题...        │   │
│  │                             │   │
│  └─────────────────────────────┘   │
│                                     │
│  联系信息                            │
│  ┌─────────────────────────────┐   │
│  │👤 联系人姓名                 │   │
│  └─────────────────────────────┘   │
│  ┌─────────────────────────────┐   │
│  │📞 联系电话                   │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │       提交报修申请           │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

---

五、核心功能实现

5.1 公告标记已读实现

void _markAsRead(Announcement announcement) {
  setState(() {
    final index = _announcements.indexWhere((a) => a.id == announcement.id);
    if (index != -1) {
      _announcements[index] = announcement.copyWith(
        isRead: true,
        viewCount: announcement.viewCount + 1,
      );
    }
  });
}

5.2 报修提交实现

void _submitRepairRequest({
  required String building,
  required String unit,
  required String room,
  required RepairType type,
  required String description,
  required String contactName,
  required String contactPhone,
}) {
  setState(() {
    final request = RepairRequest(
      id: '${DateTime.now().millisecondsSinceEpoch}',
      building: building,
      unit: unit,
      room: room,
      type: type,
      description: description,
      status: RepairStatus.pending,
      createdAt: DateTime.now(),
      contactName: contactName,
      contactPhone: contactPhone,
    );
    
    _repairRequests.insert(0, request);
  });

  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('报修申请已提交')),
  );
}

5.3 取消报修实现

void _cancelRepairRequest(RepairRequest request) {
  setState(() {
    final index = _repairRequests.indexWhere((r) => r.id == request.id);
    if (index != -1) {
      _repairRequests[index] = request.copyWith(
        status: RepairStatus.cancelled,
        updatedAt: DateTime.now(),
      );
    }
  });

  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('报修已取消')),
  );
}

5.4 公告筛选实现

List<Announcement> _getFilteredAnnouncements() {
  if (_selectedAnnouncementType == null) {
    return _announcements;
  }
  return _announcements.where((a) => a.type == _selectedAnnouncementType).toList();
}

5.5 报修筛选实现

List<RepairRequest> _getFilteredRepairs() {
  List<RepairRequest> filtered = _repairRequests;
  
  if (_selectedRepairStatus != null) {
    filtered = filtered.where((r) => r.status == _selectedRepairStatus).toList();
  }
  
  if (_selectedRepairType != null) {
    filtered = filtered.where((r) => r.type == _selectedRepairType).toList();
  }
  
  return filtered;
}

5.6 公告详情弹窗实现

void _showAnnouncementDetail(Announcement announcement) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      return DraggableScrollableSheet(
        initialChildSize: 0.7,
        minChildSize: 0.5,
        maxChildSize: 0.95,
        expand: false,
        builder: (context, scrollController) {
          return Container(
            padding: const EdgeInsets.all(20),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: Text(
                        announcement.title,
                        style: Theme.of(context).textTheme.headlineSmall,
                      ),
                    ),
                    IconButton(
                      icon: const Icon(Icons.close),
                      onPressed: () => Navigator.pop(context),
                    ),
                  ],
                ),
                Expanded(
                  child: SingleChildScrollView(
                    controller: scrollController,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        _buildDetailRow(Icons.category, '公告类型', 
                          '${announcement.type.emoji} ${announcement.type.label}'),
                        _buildDetailRow(Icons.person, '发布者', announcement.publisher),
                        _buildDetailRow(Icons.access_time, '发布时间', 
                          '${announcement.publishTime.year}-${announcement.publishTime.month}-${announcement.publishTime.day}'),
                        const SizedBox(height: 16),
                        Text('公告内容', style: Theme.of(context).textTheme.titleMedium),
                        const SizedBox(height: 8),
                        Text(announcement.content, style: const TextStyle(height: 1.8)),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      );
    },
  );
}

---

六、交互设计

6.1 公告查看流程

6.2 报修提交流程

6.3 报修管理流程

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 推送通知

通知功能：

• 公告发布推送
• 报修状态变更通知
• 紧急通知强提醒
• 活动提醒

7.2.2 图片上传

上传功能：

• 报修现场拍照
• 问题图片上传
• 维修前后对比
• 多图上传支持

7.2.3 评价反馈

评价功能：

• 维修服务评分
• 文字评价
• 投诉建议
• 满意度调查

---

八、注意事项

8.1 开发注意事项

1. 数据持久化：公告和报修数据需持久化存储

2. 网络请求：实际使用需对接后端API

3. 权限管理：需获取相机、存储等权限

4. 表单验证：提交前需完整验证表单数据

5. 状态同步：报修状态变更需及时更新UI

8.2 常见问题

问题	原因	解决方案
公告不更新	数据未刷新	添加下拉刷新
报修提交失败	表单验证不通过	检查必填项
状态不正确	数据未同步	实现状态监听
详情显示不全	内容过长	支持滚动查看
筛选无效	条件未生效	检查筛选逻辑

8.3 使用技巧

🏠 智慧社区服务技巧 🏠

公告查看建议

• 关注置顶公告，获取重要信息
• 及时查看紧急通知，提前准备
• 参与社区活动，丰富生活

报修提交建议

• 准确描述问题，便于快速处理
• 保持联系畅通，方便物业联系
• 及时查看进度，了解处理状态

高效使用技巧

• 定期查看公告，不错过重要信息
• 报修时附上照片，便于维修人员准备
• 维修完成后及时确认，提高服务效率

---

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+
Web浏览器	Chrome 90+

9.2 运行命令

# 查看可用设备
flutter devices

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

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

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

---

十、总结

小区公告报修系统通过首页服务、公告中心、报修服务、个人中心四大模块，为业主提供了一个便捷的智慧社区服务平台。应用支持5种公告类型、6种报修类型、4种报修状态，让业主足不出户即可享受高效便捷的物业服务。

核心功能涵盖公告查看、在线报修、进度查询、联系物业四大模块。公告类型包括通知公告、社区活动、紧急通知、维修通知等；报修类型覆盖水管维修、电路维修、电梯维修、门禁维修等；报修状态从待处理到已完成，全程可追踪。

应用采用 Material Design 3 设计规范，以清新的青色为主色调，象征科技与服务的融合。通过本应用，希望能够帮助业主便捷获取社区信息，高效处理报修问题，提升社区服务体验。

小区公告报修系统——智慧社区，便捷生活

---