课堂分析系统 - 前端应用

基于 Vue 3 + Element Plus 的课堂专注度分析系统前端应用，提供直观的可视化界面展示学生专注度、情绪状态和疲劳度分析结果。

技术栈

• 框架: Vue 3 + Composition API
• 构建工具: Vite
• UI 组件库: Element Plus
• 图表库: ECharts
• HTTP 客户端: Axios
• 路由: Vue Router 4

功能特性

核心页面

• 仪表盘: 展示统计数据、专注度趋势图、分布图
• 视频分析: 上传视频进行专注度分析
• 图片分析: 上传图片进行批量分析
• 学生数据: 查看班级课堂列表和学生专注度
• 情绪分析: 展示学生情绪状态和波动趋势
• 疲劳度分析: 监测学生疲劳状态和预警
• 全局分析: 视频/图片/学生维度的综合统计
• 历史记录: 查询历史分析记录
• 报告: 生成和导出分析报告
• 专注度排行: 班级课程专注度排名

报告导出

• PDF 格式
• Word 格式
• Excel 格式

项目结构

src/
├── views/teacher/       # 教师端页面
│   ├── Dashboard.vue   # 仪表盘
│   ├── VideoAnalysis.vue # 视频分析
│   ├── ImageAnalysis.vue # 图片分析
│   ├── ClassData.vue   # 学生数据
│   ├── EmotionAnalysis.vue # 情绪分析
│   ├── FatigueAnalysis.vue # 疲劳度分析
│   ├── GlobalAnalysis.vue # 全局分析
│   ├── History.vue     # 历史记录
│   ├── Report.vue      # 报告
│   ├── ClassRank.vue   # 专注度排行
│   ├── Email.vue       # 邮件通知
│   └── Settings.vue    # 设置
├── components/          # 公共组件
│   ├── layout/         # 布局组件
│   └── common/         # 通用组件
├── utils/              # 工具函数
│   └── dateHelper.js   # 日期时间处理
├── router/             # 路由配置
└── App.vue             # 根组件

快速开始

环境要求

• Node.js 18+
• npm 或 yarn

安装依赖

npm install

配置

创建 .env 文件：

VITE_API_BASE_URL=http://localhost:8080

开发

npm run dev

构建

npm run build

构建产物在 dist/ 目录。

时区处理

问题

后端存储的时间是北京时间，但前端原先使用了错误的时区转换逻辑，手动添加了 8 小时偏移，导致时间显示比正确时间晚 8 小时。

解决方案

1. 创建日期工具函数 (src/utils/dateHelper.js)

   • formatDateTime(timestamp) - 格式化时间戳为本地时间
   • getCurrentDateString() - 获取当前日期字符串
   • parseBackendTime(timestamp) - 解析后端返回的时间

2. 移除手动时区偏移

   • 删除所有 date.getTime() + (8 * 60 * 60 * 1000) 的手动偏移代码
   • 直接使用 new Date(timestamp) 解析后端返回的时间

3. 统一使用工具函数

   • 所有时间显示都使用 formatDateTime() 函数
   • 确保时间格式一致

修复文件

• src/utils/dateHelper.js (新建)
• src/views/teacher/History.vue
• src/views/teacher/ClassData.vue
• src/views/teacher/Report.vue
• src/views/teacher/Dashboard.vue
• src/views/teacher/FatigueAnalysis.vue
• src/views/teacher/EmotionAnalysis.vue
• src/views/teacher/ClassRank.vue

开发规范

代码风格

• 使用 Composition API
• 组件名使用 PascalCase
• 变量名使用 camelCase
• 常量名使用 UPPER_SNAKE_CASE

组件结构

<template>
  <!-- 模板 -->
</template>

<script setup>
// 导入
import { ref, onMounted } from 'vue'

// 状态
const loading = ref(false)

// 方法
const fetchData = async () => {
  // ...
}

// 生命周期
onMounted(() => {
  fetchData()
})
</script>

<style scoped>
/* 样式 */
</style>

浏览器支持

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

许可证

MIT License