开源鸿蒙跨平台Flutter开发：宿舍报修管理系统应用
摘要： 宿舍报修管理系统是一款基于Flutter开发的跨平台应用，专为高校宿舍管理设计，提供在线报修、进度跟踪、历史查询等功能。系统采用Material Design 3规范，支持鸿蒙OS/Web平台，包含四大核心模块：首页展示统计与快捷入口、报修页提交多类型工单、记录页筛选查询历史、个人中心管理信息。通过枚举类定义报修类型（水电/家具等6类）、状态（待处理/已完成等4种）和紧急程度（普通/特急3
·
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
宿舍报修管理系统是一款专为高校宿舍管理设计的报修服务应用，为学生提供便捷的在线报修、进度查询、历史记录等功能。应用以专业的蓝色为主色调，营造可靠、高效的服务氛围。
应用涵盖首页、报修、记录、个人中心四大模块。学生可以快速提交报修申请，选择报修类型和紧急程度，实时查看报修进度，查询历史报修记录，实现报修服务的全流程管理。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 在线报修 | 提交报修申请 | 表单提交 |
| 进度查询 | 查看报修处理进度 | 状态更新 |
| 历史记录 | 查询历史报修记录 | 列表展示 |
| 类型筛选 | 按类型和状态筛选 | 筛选逻辑 |
| 紧急程度 | 标记报修紧急程度 | 等级选择 |
| 取消报修 | 取消待处理的报修 | 状态更新 |
1.3 报修类型定义
| 序号 | 类型名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 水电维修 | ⚡ | 电路、水管、灯具等 |
| 2 | 家具维修 | 🪑 | 桌椅、床铺、柜子等 |
| 3 | 门窗维修 | 🚪 | 门锁、窗户、窗帘等 |
| 4 | 网络维修 | 📶 | 网络、电话线路等 |
| 5 | 电器维修 | 🔌 | 空调、热水器、洗衣机等 |
| 6 | 其他维修 | 🔧 | 其他设施维修 |
1.4 报修状态定义
| 序号 | 状态名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 待处理 | ⏳ | 等待维修人员接单 |
| 2 | 处理中 | 🔧 | 维修人员正在处理 |
| 3 | 已完成 | ✅ | 维修已完成 |
| 4 | 已取消 | ❌ | 报修已取消 |
1.5 紧急程度定义
| 序号 | 程度名称 | Emoji | 描述 |
|---|---|---|---|
| 1 | 普通 | 🟢 | 不影响正常生活 |
| 2 | 紧急 | 🟡 | 影响正常生活 |
| 3 | 特急 | 🔴 | 存在安全隐患 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
1.7 项目结构
lib/
└── main_dormitory_repair.dart
├── DormitoryRepairApp # 应用入口
├── RepairType # 报修类型枚举
├── RepairStatus # 报修状态枚举
├── UrgencyLevel # 紧急程度枚举
├── RepairRequest # 报修请求模型
├── DormitoryRepairHomePage # 主页面（底部导航）
├── _buildHomePage # 首页
├── _buildSubmitPage # 报修页
├── _buildHistoryPage # 记录页
├── _buildProfilePage # 个人中心页
├── _submitRepairRequest # 提交报修
├── _cancelRequest # 取消报修
└── _updateRequestStatus # 更新状态
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 报修流程
三、核心模块设计
3.1 数据模型设计
3.1.1 报修类型枚举 (RepairType)
enum RepairType {
electrical(label: '水电维修', emoji: '⚡', description: '电路、水管、灯具等'),
furniture(label: '家具维修', emoji: '🪑', description: '桌椅、床铺、柜子等'),
doorWindow(label: '门窗维修', emoji: '🚪', description: '门锁、窗户、窗帘等'),
network(label: '网络维修', emoji: '📶', description: '网络、电话线路等'),
appliance(label: '电器维修', emoji: '🔌', description: '空调、热水器、洗衣机等'),
other(label: '其他维修', emoji: '🔧', description: '其他设施维修');
final String label;
final String emoji;
final String description;
const RepairType({
required this.label,
required this.emoji,
required this.description,
});
}
3.1.2 报修状态枚举 (RepairStatus)
enum RepairStatus {
pending(label: '待处理', emoji: '⏳', description: '等待维修人员接单'),
processing(label: '处理中', emoji: '🔧', description: '维修人员正在处理'),
completed(label: '已完成', emoji: '✅', description: '维修已完成'),
cancelled(label: '已取消', emoji: '❌', description: '报修已取消');
final String label;
final String emoji;
final String description;
const RepairStatus({
required this.label,
required this.emoji,
required this.description,
});
}
3.1.3 紧急程度枚举 (UrgencyLevel)
enum UrgencyLevel {
normal(label: '普通', emoji: '🟢', description: '不影响正常生活'),
urgent(label: '紧急', emoji: '🟡', description: '影响正常生活'),
emergency(label: '特急', emoji: '🔴', description: '存在安全隐患');
final String label;
final String emoji;
final String description;
const UrgencyLevel({
required this.label,
required this.emoji,
required this.description,
});
}
3.1.4 报修请求模型 (RepairRequest)
class RepairRequest {
final String id; // 报修ID
final String dormitory; // 楼栋
final String room; // 房间号
final RepairType type; // 报修类型
final String description; // 问题描述
final UrgencyLevel urgency; // 紧急程度
RepairStatus status; // 报修状态
final DateTime createdAt; // 创建时间
DateTime? updatedAt; // 更新时间
final String contactName; // 联系人
final String contactPhone; // 联系电话
final String? workerName; // 维修人员
final String? workerPhone; // 维修电话
final String? remark; // 备注
RepairRequest({...});
RepairRequest copyWith({...});
}
3.1.5 报修类型分布
3.1.6 报修状态分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 首页结构
3.2.3 报修页结构
3.2.4 记录页结构
3.3 报修提交流程
3.4 状态更新流程
四、UI设计规范
4.1 配色方案
应用以专业的蓝色为主色调，营造可靠、高效的服务氛围：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #2196F3 (Blue) | 导航、主题元素 |
| 辅助色 | #42A5F5 | 报修页面 |
| 第三色 | #64B5F6 | 记录页面 |
| 强调色 | #90CAF9 | 个人中心 |
| 背景色 | #FAFAFA | 页面背景 |
| 卡片背景 | #FFFFFF | 报修卡片 |
4.2 状态颜色
| 状态 | 色值 | 视觉效果 |
|---|---|---|
| 待处理 | #FF9800 | 橙色 |
| 处理中 | #2196F3 | 蓝色 |
| 已完成 | #4CAF50 | 绿色 |
| 已取消 | #9E9E9E | 灰色 |
4.3 紧急程度颜色
| 程度 | 色值 | 视觉效果 |
|---|---|---|
| 普通 | #4CAF50 | 绿色 |
| 紧急 | #FF9800 | 橙色 |
| 特急 | #F44336 | 红色 |
4.4 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 报修类型 | 16px | Bold | #000000 |
| 报修描述 | 14px | Regular | #666666 |
| 状态标签 | 12px | Regular | 状态颜色 |
| 统计数字 | 24px | Bold | 白色 |
4.5 组件规范
4.5.1 报修卡片
┌─────────────────────────────────────┐
│ ┌──────┐ 水电维修 ⏳待处理│
│ │ ⚡ │ 1号楼 301 │
│ └──────┘ │
│ 宿舍灯管闪烁，影响正常使用... │
│ │
│ 🟡 紧急 3/15 14:30 │
└─────────────────────────────────────┘
4.5.2 快速统计
┌─────────────────────────────────────┐
│ ⏳ 5 🔧 3 ✅ 12 │
│ 待处理 处理中 已完成 │
└─────────────────────────────────────┘
4.5.3 快速报修网格
┌─────────────────────────────────────┐
│ 快速报修 │
│ │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │ ⚡ │ │ 🪑 │ │ 🚪 │ │
│ │水电│ │家具│ │门窗│ │
│ └────┘ └────┘ └────┘ │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │ 📶 │ │ 🔌 │ │ 🔧 │ │
│ │网络│ │电器│ │其他│ │
│ └────┘ └────┘ └────┘ │
└─────────────────────────────────────┘
4.5.4 报修表单
┌─────────────────────────────────────┐
│ 报修位置 │
│ ┌─────────┐ ┌─────────┐ │
│ │ 楼栋 │ │ 房间号 │ │
│ └─────────┘ └─────────┘ │
│ │
│ 报修类型 │
│ [⚡ 水电] [🪑 家具] [🚪 门窗] │
│ │
│ 紧急程度 │
│ [🟢 普通] [🟡 紧急] [🔴 特急] │
│ │
│ 问题描述 │
│ ┌─────────────────────────────┐ │
│ │ 请详细描述报修问题... │ │
│ └─────────────────────────────┘ │
│ [📷 添加图片] │
│ │
│ 联系信息 │
│ ┌─────────────────────────────┐ │
│ │ 👤 联系人姓名 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 📞 联系电话 │ │
│ └─────────────────────────────┘ │
│ │
│ [ 提交报修申请 ] │
└─────────────────────────────────────┘
五、核心功能实现
5.1 报修提交实现
void _submitRepairRequest() {
if (_descriptionController.text.isEmpty ||
_contactNameController.text.isEmpty ||
_contactPhoneController.text.isEmpty ||
_dormitoryController.text.isEmpty ||
_roomController.text.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('请填写完整信息')),
);
return;
}
setState(() {
final request = RepairRequest(
id: '${DateTime.now().millisecondsSinceEpoch}',
dormitory: _dormitoryController.text,
room: _roomController.text,
type: _selectedRepairType,
description: _descriptionController.text,
urgency: _selectedUrgency,
status: RepairStatus.pending,
createdAt: DateTime.now(),
contactName: _contactNameController.text,
contactPhone: _contactPhoneController.text,
);
_allRequests.insert(0, request);
});
_descriptionController.clear();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('报修申请已提交')),
);
}
5.2 取消报修实现
void _cancelRequest(RepairRequest request) {
setState(() {
final index = _allRequests.indexWhere((r) => r.id == request.id);
if (index != -1) {
_allRequests[index] = request.copyWith(
status: RepairStatus.cancelled,
updatedAt: DateTime.now(),
);
}
});
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('报修已取消')),
);
}
5.3 状态更新实现
void _updateRequestStatus(RepairRequest request, RepairStatus newStatus) {
setState(() {
final index = _allRequests.indexWhere((r) => r.id == request.id);
if (index != -1) {
_allRequests[index] = request.copyWith(
status: newStatus,
updatedAt: DateTime.now(),
);
}
});
}
5.4 筛选功能实现
List<RepairRequest> _getFilteredRequests() {
List<RepairRequest> filtered = _allRequests;
if (_selectedStatus != null) {
filtered = filtered.where((r) => r.status == _selectedStatus).toList();
}
if (_selectedType != null) {
filtered = filtered.where((r) => r.type == _selectedType).toList();
}
return filtered;
}
5.5 统计功能实现
Widget _buildQuickStats() {
final pendingCount = _allRequests.where((r) => r.status == RepairStatus.pending).length;
final processingCount = _allRequests.where((r) => r.status == RepairStatus.processing).length;
final completedCount = _allRequests.where((r) => r.status == RepairStatus.completed).length;
return Card(
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildStatItem(Icons.pending_actions, '$pendingCount', '待处理', Colors.orange),
_buildStatItem(Icons.build, '$processingCount', '处理中', Colors.blue),
_buildStatItem(Icons.check_circle, '$completedCount', '已完成', Colors.green),
],
),
),
);
}
六、交互设计
6.1 报修提交流程
6.2 进度查询流程
6.3 快速报修流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 图片上传
上传功能：
- 拍照上传
- 相册选择
- 图片压缩
- 多图上传
7.2.2 推送通知
通知功能：
- 报修状态更新通知
- 维修人员接单通知
- 完成通知
- 评价提醒
7.2.3 评价反馈
评价功能：
- 维修质量评分
- 服务态度评价
- 文字反馈
- 投诉建议
7.2.4 维修人员端
人员端功能：
- 接单管理
- 工单列表
- 状态更新
- 工作统计
八、注意事项
8.1 开发注意事项
-
数据验证：确保报修信息完整有效
-
状态管理：报修状态需正确更新
-
权限控制：学生只能查看和操作自己的报修
-
紧急处理：特急报修需优先处理
-
用户体验：操作反馈需及时明确
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 提交失败 | 信息不完整 | 添加验证提示 |
| 状态不同步 | 状态更新错误 | 确保setState正确调用 |
| 筛选无结果 | 条件过严 | 提供默认选项 |
| 取消失败 | 状态不允许 | 检查当前状态 |
| 详情显示异常 | 数据缺失 | 添加默认值 |
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_dormitory_repair.dart --web-port 8139
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_dormitory_repair.dart
# 代码分析
flutter analyze lib/main_dormitory_repair.dart
十、总结
宿舍报修管理系统应用通过首页、报修、记录、个人中心四大模块，为学生提供了一个便捷的报修服务平台。应用支持6种报修类型、3种紧急程度、4种报修状态，让学生可以快速提交报修申请，实时查看处理进度。
核心功能涵盖在线报修、进度查询、历史记录、状态筛选四大模块。在线报修支持位置、类型、紧急程度、问题描述等信息填写；进度查询支持实时查看报修状态；历史记录支持按状态和类型筛选；状态筛选帮助学生快速找到目标报修。
应用采用 Material Design 3 设计规范，以专业的蓝色为主色调，营造可靠、高效的服务氛围。通过本应用，希望能够提高宿舍报修效率，改善学生住宿体验。
宿舍报修管理系统——快速报修 便捷服务
项目链接
- 应用代码：
f:\Flutter\flutter_harmonyos\lib\main_dormitory_repair.dart - 开发文档：
f:\Flutter\flutter_harmonyos\docs\宿舍报修管理系统应用开发文档.md
运行效果图
（图片将在此处添加）
© 2024 宿舍报修管理系统开发团队
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
3
0- 0
已为社区贡献25条内容
所有评论(0)