# 教学大屏

**Repository Path**: ibdp/teaching-screen

## Basic Information

- **Project Name**: 教学大屏
- **Description**: 教学大屏demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-30
- **Last Updated**: 2026-06-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 学情分析平台

基于 Vue 3 + TypeScript + Vite + Tailwind CSS 构建的现代化学情分析 BI 大屏平台，支持高等教育和普通教育两个场景的数据分析展示。

## 技术栈

- **框架**: Vue 3.5+ (Composition API)
- **语言**: TypeScript 5.8+
- **构建工具**: Vite 6.3+
- **样式**: Tailwind CSS 3.4+
- **图表**: ECharts 6.1+ / Vue-ECharts 8.0+
- **图标**: Lucide Vue Next 1.0+
- **路由**: Vue Router 4.6+

## 功能特性

### 高等教育学情分析大屏 (`/higher`)

面向大学高教阶段的学情分析报告，展示数据覆盖大学课堂教学的方方面面：

- **总体概览**: 在校学生数、开设课程数、平均出勤率、平均成绩、活跃学生数、已完成课程等关键指标
- **学期趋势分析**: 折线图展示出勤率、平均成绩、活跃人数的月度变化趋势
- **学院分布**: 饼图展示各学院学生人数分布
- **课程分析**: 柱状图展示课程平均成绩和学生成绩分布
- **教室使用热力图**: 展示周一至周五各时段教室使用率
- **出勤情况统计**: 饼图展示全勤、良好、一般、较差的分布
- **学生成绩TOP10**: 表格展示排名前10的学生信息
- **教师教学评价**: 表格展示教师评分和评价数量
- **统计指标**: 优秀率、及格率、退学率、奖学金获得人数

### 普通教育学情分析大屏 (`/edu`)

面向中小学普教阶段的学情分析报告：

- **总体概览**: 在校学生数、班级总数、平均出勤率、平均成绩等关键指标
- **学科分析**: 语文、数学、英语、物理、化学、生物、历史、地理、政治、信息技术等10门学科分析
- **年级分布**: 七年级、八年级、九年级学生分布
- **学校分布**: 各学校学生人数占比
- **学生表现**: 优秀学生、良好学生、待提升、需关注等分类统计
- **教学质量**: 教师评价、教学满意度、课程通过率、作业完成率、互动参与度等指标
- **教学改进建议**: 课后辅导、作业设计、家校沟通、兴趣培养等建议

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

服务启动后访问地址：
- **首页**: http://localhost:5173/ (空白页)
- **高等教育大屏**: http://localhost:5173/higher
- **普通教育大屏**: http://localhost:5173/edu

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 项目结构

```
src/
├── components/          # 公共组件
│   ├── OverviewCard.vue      # 概览卡片组件
│   ├── StatCard.vue          # 统计卡片组件
│   ├── BarChart.vue          # 柱状图组件
│   ├── LineChart.vue         # 折线图组件
│   ├── PieChart.vue          # 饼图组件
│   ├── HeatmapChart.vue      # 热力图组件
│   ├── StudentTable.vue      # 学生表格组件
│   ├── TeacherTable.vue      # 教师表格组件
│   └── HigherEducation.vue   # 高等教育大屏主组件
├── data/               # 模拟数据
│   ├── mockData.ts           # 高等教育数据
│   └── mockDataEdu.ts        # 普通教育数据
├── router/             # 路由配置
│   └── index.ts              # 路由定义
├── App.vue             # 根组件（路由入口）
├── AppEdu.vue          # 普通教育大屏主组件
├── main.ts             # 应用入口
└── style.css           # 全局样式
```

## 路由配置

| 路径 | 名称 | 组件 | 说明 |
|------|------|------|------|
| `/` | home | 空白组件 | 默认首页（空白页） |
| `/higher` | higher-education | HigherEducation.vue | 高等教育大屏 |
| `/edu` | general-education | AppEdu.vue | 普通教育大屏 |

## 设计特点

- **深色系主题**: 采用现代化深色配色方案，符合 BI 大屏风格
- **发光阴影效果**: 增强视觉层次感和科技感
- **响应式布局**: 适配桌面端和移动端
- **平滑过渡动画**: 提升交互体验
- **完整模拟数据**: 开箱即用，无需后端支持

## 浏览器支持

- Chrome (推荐)
- Firefox
- Safari
- Edge

## License

MIT