298 lines
8.7 KiB
Markdown
298 lines
8.7 KiB
Markdown
# 第三阶段：核心功能完善和UniApp开发
|
||
|
||
## 阶段目标
|
||
完善核心业务功能，完成UniApp端的学习功能开发
|
||
|
||
## 开始时间
|
||
2025-11-11
|
||
|
||
## 阶段说明
|
||
本阶段主要完善第二阶段已整合的基础功能，并开发UniApp端的核心学习功能。
|
||
|
||
## 阶段完成时间
|
||
2025-11-11
|
||
|
||
## 阶段总结
|
||
第三阶段核心功能已基本完成，包括：
|
||
1. ✅ UniApp端课程学习功能（列表、详情、筛选、进度跟踪）
|
||
2. ✅ UniApp端学习监控功能（定时截图、上传）
|
||
3. ✅ 学习进度上报优化（断网重连、本地缓存）
|
||
4. ✅ 学习记录查看页面（个人统计）
|
||
5. ✅ 管理后台统计接口（统计信息、导出功能）
|
||
|
||
待优化功能（可在后续阶段完善）：
|
||
- 管理后台图表展示（前端图表组件待完善）
|
||
- 视频文件处理（FFmpeg集成）
|
||
- 大文件上传优化
|
||
|
||
---
|
||
|
||
## 任务清单
|
||
|
||
### 1. UniApp端课程学习功能
|
||
|
||
#### 1.1 课程列表
|
||
- [x] 课程列表页面（显示分配给当前学员的课程）
|
||
- [x] 课程筛选（按学科分类、状态等）
|
||
- [x] 课程详情查看
|
||
- [x] 学习进度显示（进度条、学习时长、学习次数）
|
||
|
||
#### 1.2 课件查看
|
||
- [x] 图文课件查看（PDF、图片、文档）
|
||
- [x] PDF在线查看（使用web-view）
|
||
- [x] 图片查看（支持缩放、预览）
|
||
- [x] 文档查看（文本内容显示）
|
||
- [x] 视频课件播放
|
||
- [x] 视频播放器集成（使用uni-app video组件）
|
||
- [x] 横屏全屏播放支持
|
||
- [x] 播放进度显示
|
||
- [x] 播放控制（播放/暂停、进度条、音量等）
|
||
|
||
#### 1.3 学习进度跟踪
|
||
- [x] 视频播放进度实时上报（每10秒）
|
||
- [x] 上报接口调用
|
||
- [x] 断网重连机制（已实现队列管理和自动重连）
|
||
- [x] 本地缓存机制（已实现本地存储和恢复）
|
||
- [x] 学习记录存储
|
||
- [x] 学习开始时间记录
|
||
- [x] 学习结束时间记录
|
||
- [x] 学习时长累计
|
||
- [x] 学习次数累计
|
||
- [x] 视频播放位置记录
|
||
- [ ] 学习详情记录（后端已实现，前端待完善）
|
||
- [ ] 每次学习的详细记录
|
||
- [ ] 视频播放位置变化记录
|
||
|
||
#### 1.4 学习记录查看
|
||
- [x] 个人学习记录页面
|
||
- [x] 学习进度统计
|
||
- [x] 学习时长统计
|
||
- [x] 学习次数统计
|
||
|
||
---
|
||
|
||
### 2. UniApp端学习监控功能
|
||
|
||
#### 2.1 屏幕截图功能
|
||
- [x] 定时截图功能（每30秒或可配置）
|
||
- [x] 使用plus API（App环境）
|
||
- [x] H5环境降级方案
|
||
- [ ] 截图质量优化（待优化）
|
||
- [ ] 截图文件大小控制（待优化）
|
||
- [x] 截图上传接口
|
||
- [x] 上传到服务器
|
||
- [x] 上传失败重试机制（最多重试3次）
|
||
- [ ] 上传进度显示（待优化）
|
||
- [x] 后台运行（基础实现）
|
||
- [x] 定时任务执行
|
||
- [ ] App后台运行保持（需要原生插件支持）
|
||
- [ ] 电量优化（待优化）
|
||
|
||
#### 2.2 监控数据查看
|
||
- [ ] 监控记录查看（可选，如果需要在App端查看）
|
||
|
||
---
|
||
|
||
### 3. 后端功能完善
|
||
|
||
#### 3.1 学习进度接口完善
|
||
- [x] 学习进度上报接口优化
|
||
- [x] 批量上报支持（前端队列管理器已实现）
|
||
- [ ] 数据校验增强（待优化）
|
||
- [ ] 异常处理完善（待优化）
|
||
- [x] 学习记录查询接口优化
|
||
- [x] 按时间范围查询（统计接口支持）
|
||
- [x] 按课程查询（统计接口支持）
|
||
- [x] 统计信息查询（已实现统计接口）
|
||
|
||
#### 3.2 视频文件处理
|
||
- [ ] FFmpeg集成
|
||
- FFmpeg工具安装配置
|
||
- 视频转码功能
|
||
- 视频压缩功能
|
||
- 视频格式统一（MP4）
|
||
- [ ] 视频处理服务
|
||
- 视频上传后自动处理
|
||
- 处理进度跟踪
|
||
- 处理结果通知
|
||
|
||
#### 3.3 文件上传优化
|
||
- [ ] 大文件上传支持
|
||
- 分片上传
|
||
- 断点续传
|
||
- 上传进度显示
|
||
- [ ] 文件类型限制
|
||
- [ ] 文件大小限制配置
|
||
|
||
---
|
||
|
||
### 4. 管理后台功能完善
|
||
|
||
#### 4.1 学习进度查看优化
|
||
- [x] 学习进度详情页面优化
|
||
- [x] 统计接口实现（总数、平均进度、按日期统计）
|
||
- [x] 导出功能（Excel导出）
|
||
- [ ] 图表展示（前端待完善）
|
||
- [ ] 批量操作功能
|
||
- [ ] 批量查看
|
||
- [ ] 批量导出
|
||
|
||
#### 4.2 学习监控功能完善
|
||
- [ ] 实时监控页面优化
|
||
- WebSocket实时推送
|
||
- 监控画面刷新
|
||
- 历史记录查看
|
||
- [ ] 监控数据统计
|
||
- 监控频率统计
|
||
- 异常情况统计
|
||
|
||
---
|
||
|
||
### 5. 用户体验优化
|
||
|
||
#### 5.1 UniApp端优化
|
||
- [ ] 加载动画优化
|
||
- [ ] 错误提示优化
|
||
- [ ] 网络异常处理
|
||
- [ ] 离线缓存机制
|
||
- [ ] 横屏适配优化
|
||
|
||
#### 5.2 管理后台优化
|
||
- [ ] 界面交互优化
|
||
- [ ] 数据展示优化
|
||
- [ ] 操作流程优化
|
||
|
||
---
|
||
|
||
## 技术要点
|
||
|
||
### 1. 视频播放进度跟踪
|
||
|
||
**前端实现：**
|
||
```javascript
|
||
// 视频播放进度监听
|
||
video.onTimeUpdate(() => {
|
||
const currentTime = video.currentTime
|
||
const duration = video.duration
|
||
const progress = (currentTime / duration) * 100
|
||
|
||
// 每5-10秒上报一次
|
||
if (shouldReport()) {
|
||
reportProgress(courseId, currentTime, duration)
|
||
}
|
||
})
|
||
```
|
||
|
||
**后端接口：**
|
||
- `POST /study/learningRecord/progress` - 上报学习进度
|
||
- `GET /study/learningRecord/my-records` - 获取我的学习记录
|
||
|
||
### 2. 屏幕截图实现
|
||
|
||
**UniApp实现：**
|
||
```javascript
|
||
// 使用canvas截图
|
||
const ctx = uni.createCanvasContext('canvas')
|
||
ctx.draw()
|
||
ctx.toTempFilePath({
|
||
success: (res) => {
|
||
uploadScreenshot(res.tempFilePath)
|
||
}
|
||
})
|
||
```
|
||
|
||
**后端接口：**
|
||
- `POST /study/monitor/upload` - 上传截图
|
||
|
||
### 3. 视频处理
|
||
|
||
**FFmpeg集成：**
|
||
- 使用Java调用FFmpeg命令
|
||
- 视频转码：H.264编码，MP4格式
|
||
- 视频压缩：动态码率，平衡清晰度和文件大小
|
||
|
||
---
|
||
|
||
## 开发优先级
|
||
|
||
### 高优先级（必须完成）
|
||
1. ✅ UniApp端课程列表
|
||
2. ✅ 视频课件播放
|
||
3. ✅ 学习进度上报
|
||
4. ✅ 学习记录查看
|
||
|
||
### 中优先级（重要功能）
|
||
1. 图文课件查看
|
||
2. 屏幕截图功能
|
||
3. 学习进度统计
|
||
|
||
### 低优先级（优化功能）
|
||
1. 视频文件处理（FFmpeg）
|
||
2. 大文件上传优化
|
||
3. 离线缓存机制
|
||
|
||
---
|
||
|
||
## 遇到的问题
|
||
|
||
详细问题记录请参考：[[第三阶段-问题]]
|
||
|
||
### 已解决问题
|
||
1. ✅ **学科分类插入错误**：`subject_name` 字段没有默认值 - 已通过三层验证机制解决（见[[第三阶段-问题#问题1]]）
|
||
|
||
---
|
||
|
||
## 进度记录
|
||
|
||
- 2025-11-11：开始第三阶段开发，创建阶段计划文档
|
||
- 2025-11-11：添加学员端获取课程接口 `/study/course/my-courses`
|
||
- 2025-11-11：完善UniApp课程列表页面，显示学习进度、学习时长、课程状态等信息
|
||
- 2025-11-11：完善课程详情页面，实现视频播放、学习进度上报、课件查看功能
|
||
- 2025-11-11：创建学习监控工具类（monitor.js），实现定时截图和上传功能
|
||
- 2025-11-11：在课程详情页面集成学习监控功能（进入页面启动，离开页面停止）
|
||
- 2025-11-11：创建学习记录查看页面，显示学习统计和详细记录
|
||
- 2025-11-11：在个人中心添加学习记录入口
|
||
- 2025-11-11：实现课程筛选功能（按学科分类、状态筛选）
|
||
- 2025-11-11：添加学科分类App端接口（无需权限验证）
|
||
- 2025-11-11：创建学习进度上报队列管理器（progressQueue.js），实现断网重连、本地缓存、批量上报
|
||
- 2025-11-11：优化学习进度上报机制，集成队列管理器
|
||
- 2025-11-11：添加学习记录统计接口（总数、平均进度、按日期统计）
|
||
- 2025-11-11：添加学习记录导出功能（Excel导出）
|
||
|
||
---
|
||
|
||
## 注意事项
|
||
|
||
1. **视频播放兼容性**：需要测试不同平台的视频播放兼容性（iOS、Android、H5）
|
||
2. **性能优化**：学习进度上报频率要适中，避免频繁请求影响性能
|
||
3. **数据准确性**：学习记录的数据要准确，避免重复计算
|
||
4. **用户体验**：App端操作要流畅，避免卡顿
|
||
5. **网络异常处理**：需要处理网络断开、请求失败等情况
|
||
|
||
---
|
||
|
||
## 文件位置
|
||
|
||
### UniApp端文件位置
|
||
- 课程列表：`frontend-uniapp/src/pages/course/list.vue`
|
||
- 课程详情：`frontend-uniapp/src/pages/course/detail.vue`
|
||
- 学习记录：`frontend-uniapp/src/pages/learning/record.vue`
|
||
- 学习监控工具：`frontend-uniapp/src/utils/monitor.js`
|
||
- 学习进度队列管理器：`frontend-uniapp/src/utils/progressQueue.js`
|
||
- API调用：`frontend-uniapp/src/api/study/`
|
||
- 学科分类API：`frontend-uniapp/src/api/study/subject.js`
|
||
|
||
### 后端文件位置
|
||
- 学习进度接口：`StudyLearningRecordController`
|
||
- 学习监控接口：`StudyScreenMonitorController`
|
||
- 学科分类接口：`StudySubjectController`（新增App端接口 `/study/subject/app/list`）
|
||
- 视频处理服务：`RuoYi-Vue-redis/ry-news-system/src/main/java/com/ddnai/system/service/study/`
|
||
|
||
---
|
||
|
||
## 参考文档
|
||
|
||
- [[实施计划]] - 查看完整的功能规划
|
||
- [[第二阶段-代码整合到RuoYi]] - 查看已完成的整合工作
|
||
|