Initial commit: K12C教师岗位胜任力数字化管理方案
This commit is contained in:
selfrelease
@@ -0,0 +1,6 @@
|
||||
# 依赖目录
|
||||
node_modules/
|
||||
|
||||
# 过程文件
|
||||
*.pptx
|
||||
screenshots-full.png
|
||||
@@ -0,0 +1,192 @@
|
||||
明白，**全篇去掉任何箭头、连线、流程线、汇聚线**，所有逻辑关系改用**色块分区、空间位置、编号顺序**来表达，视觉上更干净、更现代。
|
||||
|
||||
重新生成：
|
||||
|
||||
---
|
||||
|
||||
<AGENT: slides>
|
||||
|
||||
请生成一份关于"K12C教师岗位胜任力数字化管理方案"的专业PPT，共16页，面向深圳民办K12学校管理者和决策者。
|
||||
|
||||
**设计规范：**
|
||||
- 配色：主色深蓝(#1E3A5F)，辅色青绿(#00C9A7)，强调色暖橙(#FF6B35)，背景白色/浅灰
|
||||
- 字体：标题用粗体黑体，正文用常规黑体，关键数字用DIN/Arial Black风格大字号
|
||||
- 风格：教育科技风，专业、简洁、数据驱动，避免花哨
|
||||
- 每页核心信息不超过60字，善用图标、图表、色块、卡片式布局
|
||||
- 比例：16:9宽屏
|
||||
- **重要：全篇PPT不得出现任何箭头、连线、流程线、管道、汇聚线。所有关系通过色块、空间位置、编号来表达。**
|
||||
|
||||
**核心逻辑：胜任力由两个独立维度构成——能力维度 + 成果维度。能力维度回答"教师会不会教"，成果维度回答"教师教得怎么样"。两个维度交叉分析，才能精准评价教师。**
|
||||
|
||||
---
|
||||
|
||||
**第1页：封面**
|
||||
- 主标题：教师岗位胜任力数字化管理方案
|
||||
- 副标题：深圳民办K12学校 | 能力+成果双维度 | AI赋能
|
||||
- 底部：科学评估 · 精准发展 · 持续成长
|
||||
- 设计：深蓝背景，中央大标题白色，副标题浅灰，底部青绿色块条带
|
||||
|
||||
**第2页：目录**
|
||||
- 标题：三大篇章
|
||||
- 三列卡片：
|
||||
1. 为什么做？—— 背景与痛点（配问号图标）
|
||||
2. 怎么做？—— 双维度模型、数据与AI（配齿轮图标）
|
||||
3. 如何落地？—— 路径与成果（配火箭图标）
|
||||
- 设计：三列等宽卡片，浅灰背景，青绿边框
|
||||
|
||||
**第3页：行业痛点**
|
||||
- 标题：当前教师管理的四大困局
|
||||
- 2×2卡片网格布局：
|
||||
1. 评估主观化（图标：模糊人脸）—— 缺乏客观数据，评价公信力不足
|
||||
2. 数据孤岛（图标：断裂链条）—— 教学、评估、成长数据分散多处
|
||||
3. 培训低效（图标：漏斗漏沙）—— 投入大、效果难量化、针对性弱
|
||||
4. 人才流失（图标：离开的人）—— 优秀教师难识别，激励通道缺失
|
||||
- 设计：四卡片，每卡片顶部图标+关键词，中部一句话描述
|
||||
|
||||
**第4页：解决方案概述**
|
||||
- 标题：三层架构，数据驱动教师成长
|
||||
- 三层堆叠卡片（上中下空间排列，无连线）：
|
||||
- 上层卡片（深蓝）：应用层 —— 教师端 + 管理者端
|
||||
- 中层卡片（青绿）：AI智能分析层 —— 权重计算、离群检测、趋势分析、个性化推荐
|
||||
- 下层卡片（蓝色）：数据采集层 —— 能力数据+成果数据双源采集
|
||||
- 设计：三层卡片纵向堆叠，上层最窄，中层适中，下层最宽，形成倒金字塔空间感，无连线
|
||||
|
||||
**第5页：核心价值主张**
|
||||
- 标题：从经验管理到数据治理
|
||||
- 四列卡片：
|
||||
1. 科学化（图标：雷达图）—— 从主观印象 到 数据画像
|
||||
2. 智能化（图标：AI大脑）—— 从人工统计 到 AI自动评估
|
||||
3. 可视化（图标：仪表盘）—— 从纸质档案 到 实时驾驶舱
|
||||
4. 个性化（图标：成长路径）—— 从统一培训 到 精准发展路径
|
||||
- 设计：四列等宽，每列图标+关键词+对比句式，无箭头
|
||||
|
||||
**第6页：胜任力双维度模型（核心逻辑页）**
|
||||
- 标题：胜任力 = 能力维度 + 成果维度
|
||||
- 左右两个大色块并列（无连线）：
|
||||
- 左侧色块（蓝色）：能力维度 —— 五维雷达，回答"教师会不会教"
|
||||
- 右侧色块（青绿）：成果维度 —— 三维颗粒，回答"教师教得怎么样"
|
||||
- 底部中央独立文字：两个维度共同构成综合胜任力评分
|
||||
- 设计：左右两大色块并列，底部一句话居中，无连线无箭头
|
||||
|
||||
**第7页：能力维度——五维能力**
|
||||
- 标题：能力维度：五维雷达，回答"教师会不会教"
|
||||
- 五个独立卡片呈环形/放射状排列，中心留白圆形标注"能力维度"：
|
||||
1. 专业知识（学科体系、跨学科整合、前沿动态）
|
||||
2. 教学实施（教案设计、课堂管理、教学方法、反思改进）
|
||||
3. 协作沟通（同事协作、师生关系、家校共育、团队贡献）
|
||||
4. 数字技术（信息化工具、多媒体制作、学情分析、线上教学）
|
||||
5. 持续发展（职业规划、学习培训、教研成果、经验总结）
|
||||
- 设计：五个扇形色块围绕中心圆形排列，色块之间无连线，中心圆形标注"能力维度"
|
||||
|
||||
**第8页：成果维度——三维颗粒**
|
||||
- 标题：成果维度：三维颗粒，回答"教师教得怎么样"
|
||||
- 上半部分：三维评估框架（三列卡片）
|
||||
- 数量维度（绿）：课时量、任务量、产出量
|
||||
- 质量维度（蓝）：学业成果、课堂质量、教研质量
|
||||
- 效率维度（橙）：进步幅度、投入产出比
|
||||
- 下半部分：全链路六环节（两行三列小卡片，编号1-6）
|
||||
1. 备课
|
||||
2. 授课
|
||||
3. 作业
|
||||
4. 批改
|
||||
5. 反馈
|
||||
6. 考核
|
||||
- 设计：上半三列大卡片，下半六个小卡片网格排列，用编号表示顺序，无箭头
|
||||
|
||||
**第9页：双维度量化公式**
|
||||
- 标题：双维度加权，量化综合胜任力
|
||||
- 核心公式（大字）：综合胜任分 = 能力评分 × 能力权重 + 成果评分 × 成果权重
|
||||
- 成果评分子公式：成果分 = Σ(颗粒指标 × 权重) × 岗位系数
|
||||
- 成果权重横向条形图：
|
||||
- 学业进步率 35%（最长条，深蓝）
|
||||
- 课堂满意度 25%（深蓝）
|
||||
- 作业批改质量 20%（青绿）
|
||||
- 教研产出 10%（浅蓝）
|
||||
- 数字工具使用 10%（浅蓝）
|
||||
- 底部小字：岗位系数参考：学科教师1.0 | 班主任1.2 | 年级组长1.5
|
||||
- 设计：顶部公式醒目，下方条形图，底部灰色注释
|
||||
|
||||
**第10页：岗位差异化配置**
|
||||
- 标题：因岗而异，双维度权重动态调整
|
||||
- 四列对比卡片：
|
||||
1. 学科教师 —— 能力:成果 = 50%:50% —— 核心指标：班级成绩进步率
|
||||
2. 班主任 —— 能力:成果 = 60%:40% —— 核心指标：班级学生满意度
|
||||
3. 年级组长 —— 能力:成果 = 70%:30% —— 核心指标：年级整体进步率
|
||||
4. 教务主任 —— 能力:成果 = 40%:60% —— 核心指标：全校教学成果汇总
|
||||
- 设计：四列卡片，每列顶部岗位名+图标，中部比例数字（大字），底部核心指标
|
||||
|
||||
**第11页：数据采集体系**
|
||||
- 标题：双维度数据，立体采集
|
||||
- 五个独立卡片（空间布局：四角+中央）：
|
||||
- 左上卡片：自评 30%（10-15分钟）
|
||||
- 右上卡片：上级评价 30%（8-10分钟）
|
||||
- 左下卡片：同僚互评 20%（5-8分钟/人）
|
||||
- 右下卡片：学生反馈 20%（3-5分钟）
|
||||
- 中央卡片：AI分析引擎（输出双维度画像）
|
||||
- 设计：五个卡片分散排列，中央卡片略大，无连线，用空间位置暗示关系
|
||||
|
||||
**第12页：AI智能分析**
|
||||
- 标题：AI大脑，双维度交叉赋能
|
||||
- 五个独立卡片（中央+四周，无连线）：
|
||||
- 中央卡片：AI智能分析
|
||||
- 左上卡片：权重计算（能力权重+成果权重动态配比）
|
||||
- 右上卡片：离群检测（能力高但成果低，或成果高但能力低）
|
||||
- 左下卡片：趋势分析（能力成长曲线+成果波动曲线）
|
||||
- 右下卡片：个性化推荐（基于双维度短板的精准发展方案）
|
||||
- 下方案例卡片：
|
||||
- 教师画像：教学实施能力强，但学业进步率仅15%（能力高 成果低）
|
||||
- AI诊断：教学方法有效，但课堂目标偏离考试重点
|
||||
- AI建议：推荐"考纲对标工作坊" + 课堂目标校准工具
|
||||
- 设计：上半五个卡片环绕排列无连线，下半浅色案例卡片
|
||||
|
||||
**第13页：能力-成果关联矩阵**
|
||||
- 标题：双维度交叉，四象限人才分类
|
||||
- 2×2矩阵（四个色块紧密拼接，无额外线条）：
|
||||
- 右上色块（绿）：高潜教师 —— 能力强+成果好 —— 标杆培养，给予更大平台
|
||||
- 右下色块（蓝）：待挖掘 —— 能力强+成果差 —— 诊断原因，资源支持
|
||||
- 左上色块（黄）：经验型 —— 能力弱+成果好 —— 方法有效但难复制，需系统化培训
|
||||
- 左下色块（橙红）：待提升 —— 能力弱+成果差 —— 重点帮扶，专项辅导
|
||||
- 底部说明：只有双维度交叉，才能避免"唯分数论"或"唯资历论"
|
||||
- 设计：四象限色块拼接，每块内有大字分类+管理动作，无连线
|
||||
|
||||
**第14页：实施路径**
|
||||
- 标题：8周上线，双维度模型快速落地
|
||||
- 四个阶段卡片横向排列（用编号1-4表示顺序，无箭头）：
|
||||
- 卡片1：第1-2周 启动准备（需求调研、岗位梳理、双维度模型定制）
|
||||
- 卡片2：第3-4周 系统部署（平台搭建、历史数据迁移、双维度权重配置）
|
||||
- 卡片3：第5-6周 培训推广（管理员培训、教师双维度评估培训、试运行）
|
||||
- 卡片4：第7-8周 正式上线（学期初双维度评估、持续追踪、效果优化）
|
||||
- 下方独立卡片：持续运营（每学期双维度评估、年度交叉分析、持续改进）
|
||||
- 设计：四个卡片横向等距排列，下方独立卡片，用编号和空间位置表达顺序，无箭头
|
||||
|
||||
**第15页：预期成果**
|
||||
- 标题：双维度驱动，成效可见
|
||||
- 三大数字全屏展示：
|
||||
- 85% 评估覆盖率 —— 全校教师双维度评估全覆盖（配环形图85%填充）
|
||||
- 30% 培训效率提升 —— 精准培训减少无效投入（配上升图标）
|
||||
- 50% 人才识别率 —— 交叉分析发现隐藏高潜教师（配人物+放大镜图标）
|
||||
- 底部小字：传统单一维度评估遗漏的"能力强但成果暂时不佳"教师，双维度模型可精准识别
|
||||
- 设计：深色背景，三大数字用青绿/白色大字，底部小字说明
|
||||
|
||||
**第16页：结尾**
|
||||
- 上半：产品功能双端对比（左右两栏，无连线）
|
||||
- 左侧（教师端）：五维能力雷达图、成果追踪看板、AI个性化建议、个人发展计划(PDP)
|
||||
- 右侧（管理者端）：双维度管理驾驶舱、胜任力热力图、能力-成果四象限、人才梯队分析
|
||||
- 中部合作方式（三列色块）：Demo演示（免费）| 试点项目（定制报价）| 全校部署（年度授权）
|
||||
- 下半：主标题"开启教师能力管理新篇章"，副标题"预约Demo演示，见证双维度驱动的教师成长"
|
||||
- 底部：contact@example.com | 400-xxx-xxxx（请替换为真实联系方式）
|
||||
- 设计：深蓝背景，上半左右对比，中部三色合作条，下半白色大字+联系方式
|
||||
|
||||
---
|
||||
|
||||
**要求：**
|
||||
1. 全篇不得出现任何箭头、连线、流程线、管道、汇聚线、放射线
|
||||
2. 所有逻辑关系通过色块、空间位置、编号、留白来表达
|
||||
3. 每页信息精炼，避免文字堆砌
|
||||
4. 关键数字放大突出
|
||||
5. 善用图标、色块、卡片等视觉元素
|
||||
6. 整体风格统一，专业大气
|
||||
7. 16:9宽屏比例
|
||||
8. 逻辑主线清晰：痛点→双维度模型（能力+成果并列）→数据采集→AI交叉分析→四象限矩阵→落地路径
|
||||
|
||||
</AGENT: slides>
|
||||
+190
@@ -0,0 +1,190 @@
|
||||
# 需求与目标文档 | K12C
|
||||
|
||||
**项目**：教师岗位胜任力管理 Demo 原型
|
||||
**缩写**：K12C
|
||||
**版本**：v1.1
|
||||
**状态**：草稿
|
||||
|
||||
---
|
||||
|
||||
## 1. 引言
|
||||
|
||||
MAY（销售方）向深圳某民办 K12 学校（幼儿园至高中，100+ 老师）推荐**教师岗位胜任力数字化管理解决方案**，帮助学校：
|
||||
|
||||
- 科学构建岗位胜任力模型
|
||||
- 精准评估每位教师的能力现状
|
||||
- 智能发现短板、推荐发展路径
|
||||
- 持续追踪教师成长、提升教学质量
|
||||
|
||||
本 Demo 是可交互原型，让客户**"看到产品、感受价值"**，而非仅听概念。
|
||||
|
||||
---
|
||||
|
||||
## 2. 术语表
|
||||
|
||||
| 术语 | 定义 |
|
||||
|------|------|
|
||||
| 岗位胜任力 | 胜任特定岗位所需的知识、技能、态度与价值观 |
|
||||
| 胜任力模型 | 对岗位所需胜任力进行结构化定义的框架 |
|
||||
| Demo | 可交互的产品原型 |
|
||||
| K12 | 学前至高中教育（5-18 岁） |
|
||||
|
||||
---
|
||||
|
||||
## 3. 角色定义
|
||||
|
||||
| 角色 | 关注点 |
|
||||
|------|--------|
|
||||
| 学校管理层 | 投资回报、竞争优势、团队整体提升 |
|
||||
| 一线教师 | 操作便捷、成长有方向、减少无效努力 |
|
||||
| 家长代表 | 孩子受益、教师专业 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 功能性需求
|
||||
|
||||
### 4.1 受众覆盖
|
||||
|
||||
- **WHEN** 面向管理层 **THE Demo SHALL** 突出商业价值、数据看板、全局视角
|
||||
- **WHEN** 面向教师 **THE Demo SHALL** 强调个人画像、发展路径、操作便捷
|
||||
|
||||
### 4.2 内容呈现
|
||||
|
||||
- **IF** 需要展示完整功能 **THE Demo SHALL** 覆盖：登录 → 选择岗位 → 查看画像 → AI 建议 → 发展计划
|
||||
- **IF** 需要突出核心亮点 **THE Demo SHALL** 聚焦 AI 智能评估 + 数据可视化
|
||||
|
||||
### 4.3 设计风格
|
||||
|
||||
- **WHEN** 用户打开 Demo **THE Demo SHALL** 呈现现代、专业、年轻的视觉风格
|
||||
- **WHILE** 用户浏览 **THE Demo SHALL** 保持一致的视觉语言和平滑交互
|
||||
|
||||
### 4.4 核心框架展示
|
||||
|
||||
- **THE Demo SHALL** 清晰呈现 5 维胜任力模型结构
|
||||
- **THE Demo SHALL** 展示典型岗位的差异化配置
|
||||
|
||||
---
|
||||
|
||||
## 5. 非功能性需求
|
||||
|
||||
| 维度 | 要求 |
|
||||
|------|------|
|
||||
| **美观性** | 扁平化、柔和配色、充足留白 |
|
||||
| **专业性** | 逻辑清晰、数据支撑 |
|
||||
| **易用性** | 结构扁平、层级分明、重点突出 |
|
||||
| **适配性** | 16:9 宽屏、主流浏览器 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 关键约束
|
||||
|
||||
- **页面数量**：20-30 页
|
||||
- **输出格式**：HTML/网页原型
|
||||
- **交互层级**：页面跳转、高亮标注、基础动效
|
||||
|
||||
---
|
||||
|
||||
## 7. 附录：教师岗位胜任力模型框架
|
||||
|
||||
### 7.1 设计原则
|
||||
|
||||
- **岗位化**：按角色（学科教师/班主任/管理者）差异化定义
|
||||
- **可量化**：每项胜任力有可观测的行为指标
|
||||
- **AI 加持**：用 AI 辅助评估、分析、推荐
|
||||
|
||||
### 7.2 六维结构：五维胜任力 + 教学成果
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ 教师胜任力画像 │
|
||||
└─────────────────────────────┘
|
||||
│
|
||||
┌──────────────────────────┼──────────────────────────┐
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
|
||||
│ 五维胜任力 │ │ AI 引擎 │ │ 教学成果 │
|
||||
│ │ │ │ │ │
|
||||
│ 教学力 · 学科力 │ │ 智能评估 │ │ 学生成绩进步率 │
|
||||
│ 协作力 · 发展力 │ │ 精准推荐 │ │ 课堂满意度 │
|
||||
│ 数字力 │ │ 数据洞察 │ │ 教研产出 │
|
||||
│ │ │ │ │ │
|
||||
│ （雷达图展示） │ │ （赋能底座） │ │ （独立辅助指标） │
|
||||
└─────────────────────┘ └─────────────────────┘ └─────────────────────┘
|
||||
```
|
||||
|
||||
> **设计原则**：五维胜任力反映"能力"，教学成果反映"成果"。两者独立展示，AI 引擎关联分析，揭示"能力 → 成果"的内在关系。
|
||||
|
||||
### 7.3 岗位差异化配置
|
||||
|
||||
| 岗位 | 胜任力权重 | 特色功能 | 成果指标 |
|
||||
|------|-----------|---------|---------|
|
||||
| 学科教师 | 教学力60% + 学科力30% + 数字力10% | 学科专业发展路径 | 所教班级成绩进步率 |
|
||||
| 班主任 | 协作力50% + 教学力30% + 发展力20% | 家校沟通看板 | 班级学生满意度 |
|
||||
| 年级组长 | 发展力40% + 协作力30% + 数字力30% | 团队数据分析 | 年级整体进步率 |
|
||||
| 教务主任 | 五维均衡 + 战略规划模块 | 全校胜任力热力图 | 学校教学成果汇总 |
|
||||
|
||||
### 7.4 教学成果颗粒化管理体系
|
||||
|
||||
教师教学成果是"能力 → 成果"链条的最终体现，需要精细化、数字化的颗粒管理。
|
||||
|
||||
#### 7.4.1 成果数据分层
|
||||
|
||||
| 层级 | 指标类型 | 具体颗粒 | 数据来源 |
|
||||
|------|---------|---------|---------|
|
||||
| **数量维度** | 课时量 | 周课时数、承担班级数 | 教务系统 |
|
||||
| | 任务量 | 作业批改量、试卷命制数 | 教学平台 |
|
||||
| | 产出量 | 课件上传数、教研参与次数 | 资源平台 |
|
||||
| **质量维度** | 学业成果 | 班级平均进步率、达标率 | 成绩系统 |
|
||||
| | 课堂质量 | 学生满意度评分、督课评分 | 评价系统 |
|
||||
| | 教研质量 | 论文发表、课题参与、公开课 | 教研系统 |
|
||||
| **效率维度** | 进步幅度 | 环比进步、同比进步 | 数据分析 |
|
||||
| | 投入产出比 | 生均提升分/投入课时 | 综合计算 |
|
||||
|
||||
#### 7.4.2 颗粒化数据采集
|
||||
|
||||
```
|
||||
教学过程全链路数据采集
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 颗粒化数据点 │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ 备课 → 授课 → 作业 → 批改 → 反馈 → 补强 → 考核 → 复盘 │
|
||||
│ │ │ │ │ │ │ │ │ │
|
||||
│ 课件 考勤 布置量 及时率 满意度 跟进率 区分度 反思 │
|
||||
│ 时长 互动 难度 评语率 督课分 完成 信效度 改进 │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 7.4.3 教学成果量化公式
|
||||
|
||||
```
|
||||
教学成果综合分 = Σ(颗粒指标 × 权重) × 岗位系数
|
||||
|
||||
示例（学科教师）：
|
||||
- 学业进步率(35%) × 班级系数 + 课堂满意度(25%) × 权重系数
|
||||
- 作业批改质量(20%) + 教研产出(10%) + 数字工具使用(10%)
|
||||
```
|
||||
|
||||
### 7.5 能力-成果关联分析
|
||||
|
||||
AI 引擎的核心价值之一：揭示"能力 → 成果"的关系
|
||||
|
||||
| 分析维度 | 说明 |
|
||||
|----------|------|
|
||||
| 能力强 + 成果好 | 高潜教师，标杆案例 |
|
||||
| 能力强 + 成果差 | 潜力未发挥，需关注 |
|
||||
| 能力弱 + 成果好 | 经验型教师，需补能力 |
|
||||
| 能力弱 + 成果差 | 重点帮扶对象 |
|
||||
|
||||
### 7.6 Demo 核心场景
|
||||
|
||||
**场景一：智能能力画像**
|
||||
> 教师登录 → 选择岗位 → 系统基于教学数据 + 自评 + 同僚互评生成能力画像
|
||||
|
||||
**场景二：AI 发展建议**
|
||||
> 系统识别短板 → AI 推荐学习资源 → 生成个人发展计划（PDP）
|
||||
|
||||
**场景三：管理驾驶舱**
|
||||
> 管理者查看全校胜任力分布 → 定位高潜教师 → 识别培训需求 → 规划教研活动
|
||||
+183
@@ -0,0 +1,183 @@
|
||||
# 产品需求文档 | K12C
|
||||
|
||||
**项目**：教师岗位胜任力管理 Demo 原型
|
||||
**缩写**：K12C
|
||||
**版本**：v1.0
|
||||
**状态**：草稿
|
||||
|
||||
---
|
||||
|
||||
## 1. 产品概述与定位
|
||||
|
||||
### 1.1 产品是什么
|
||||
|
||||
面向 K12 学校的**教师岗位胜任力数字化管理平台**，帮助学校用数字化/AI 技术科学管理教师能力发展。
|
||||
|
||||
### 1.2 核心价值
|
||||
|
||||
| 价值主张 | 说明 |
|
||||
|----------|------|
|
||||
| **科学化** | 基于胜任力模型的标准化评估 |
|
||||
| **智能化** | AI 赋能评估、分析、推荐 |
|
||||
| **可视化** | 数据看板驱动管理决策 |
|
||||
| **个性化** | 差异化的岗位配置与发展路径 |
|
||||
|
||||
### 1.3 产品定位
|
||||
|
||||
- **竞品对比**：传统胜任力管理依赖 Excel/纸质 → 我们提供数字化、智能化、一体化平台
|
||||
- **目标客群**：K12 民办学校（100+ 老师规模）
|
||||
- **切入场景**：学期初的教师评估 + 全年的发展追踪
|
||||
|
||||
---
|
||||
|
||||
## 2. 目标与成功指标
|
||||
|
||||
### 2.1 商业目标
|
||||
|
||||
| 指标 | 目标 |
|
||||
|------|------|
|
||||
| Demo 转化率 | 客户看完 Demo 后有明确合作意向 |
|
||||
| 演示满意度 | 客户认为"这就是我们想要的" |
|
||||
| 差异化认知 | 客户认可 AI 赋能是核心亮点 |
|
||||
|
||||
### 2.2 产品目标
|
||||
|
||||
| 指标 | 要求 |
|
||||
|------|------|
|
||||
| 功能覆盖度 | Demo 覆盖 80% 的核心功能路径 |
|
||||
| 页面完成度 | 20-30 页全链路可交互 |
|
||||
| 视觉品质 | 现代化、专业化、年轻化 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 用户画像与核心场景
|
||||
|
||||
### 3.1 管理者视角
|
||||
|
||||
**画像**：教务主任，35 岁，负责全校教学质量
|
||||
**痛点**：
|
||||
- 不清楚每位老师的真实能力水平
|
||||
- 培训投入大但效果难量化
|
||||
- 优秀教师难识别，短板教师难辅导
|
||||
|
||||
**解法**：管理驾驶舱 → 全校胜任力一览 → 精准定位问题
|
||||
|
||||
### 3.2 教师视角
|
||||
|
||||
**画像**：学科教师，28 岁，关注个人成长
|
||||
**痛点**：
|
||||
- 不知道自己的短板在哪里
|
||||
- 不知道如何提升
|
||||
- 职业发展路径不清晰
|
||||
|
||||
**解法**：个人能力画像 → AI 发展建议 → 个人发展计划（PDP）
|
||||
|
||||
---
|
||||
|
||||
## 4. 功能清单与优先级
|
||||
|
||||
### 4.1 MoSCoW 优先级
|
||||
|
||||
| 优先级 | 功能 | 说明 |
|
||||
|--------|------|------|
|
||||
| **Must** | 登录/首页 | 进入系统的入口 |
|
||||
| **Must** | 岗位选择 | 选择教师/班主任/管理者角色 |
|
||||
| **Must** | 个人能力画像 | 五维雷达图 + 得分详情 + 教学成果展示 |
|
||||
| **Must** | 能力-成果关联分析 | 揭示能力与成果的关系 |
|
||||
| **Must** | AI 发展建议 | 基于短板的个性化推荐 |
|
||||
| **Should** | 管理驾驶舱 | 全校/年级胜任力数据看板 |
|
||||
| **Should** | 个人发展计划 | PDP 创建与追踪 |
|
||||
| **Should** | 胜任力模型配置 | 查看岗位胜任力定义 |
|
||||
| **Could** | 同僚互评 | 360 度评估入口 |
|
||||
| **Could** | 培训资源库 | AI 推荐的学习内容 |
|
||||
|
||||
### 4.2 功能映射（回溯需求）
|
||||
|
||||
| 功能 | 对应需求 |
|
||||
|------|----------|
|
||||
| 个人能力画像 | [REQ-4.4] 清晰呈现 5 维胜任力模型 |
|
||||
| AI 发展建议 | [REQ-7.4] AI 赋能：智能评估、精准推荐 |
|
||||
| 管理驾驶舱 | [REQ-4.1] 面向管理层的全局视角 |
|
||||
| 个人发展计划 | [REQ-1] 科学评估 → 精准发现短板 → 规划发展路径 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 关键流程
|
||||
|
||||
### 5.1 教师路径
|
||||
|
||||
```
|
||||
[登录] → [选择岗位：学科教师] → [查看能力画像] → [查看 AI 建议]
|
||||
↓
|
||||
[创建个人发展计划] → [追踪执行进度]
|
||||
```
|
||||
|
||||
### 5.2 管理者路径
|
||||
|
||||
```
|
||||
[登录] → [选择角色：教务主任] → [管理驾驶舱] → [查看全校胜任力分布]
|
||||
↓
|
||||
[定位高潜教师] → [识别培训需求] → [规划教研活动]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 角色权限矩阵
|
||||
|
||||
| 功能 | 教师 | 班主任 | 年级组长 | 教务主任 |
|
||||
|------|------|--------|----------|----------|
|
||||
| 查看个人画像 | ✓ | ✓ | ✓ | ✓ |
|
||||
| 查看发展建议 | ✓ | ✓ | ✓ | ✓ |
|
||||
| 创建/编辑 PDP | ✓ | ✓ | ✓ | ✓ |
|
||||
| 查看年级数据 | - | - | ✓ | ✓ |
|
||||
| 查看全校数据 | - | - | - | ✓ |
|
||||
| 管理胜任力模型 | - | - | - | ✓ |
|
||||
|
||||
---
|
||||
|
||||
## 7. 版本规划
|
||||
|
||||
### MVP 版本（Demo 范围）
|
||||
|
||||
**目标**：展示核心价值路径
|
||||
- 登录 + 岗位选择
|
||||
- 个人能力画像（雷达图）
|
||||
- AI 发展建议卡片
|
||||
- 管理驾驶舱（基础版）
|
||||
- 个人发展计划（基础版）
|
||||
|
||||
### 2.0 版本（未来）
|
||||
|
||||
- 360 度同僚互评
|
||||
- 培训资源库对接
|
||||
- 胜任力模型自定义配置
|
||||
- 数据导出与报表
|
||||
|
||||
---
|
||||
|
||||
## 8. 非功能性要求
|
||||
|
||||
| 维度 | 要求 |
|
||||
|------|------|
|
||||
| **性能** | 页面加载 < 2 秒 |
|
||||
| **兼容性** | Chrome/Safari/Edge 最新版 |
|
||||
| **响应式** | 支持 iPad 横屏展示 |
|
||||
| **动效** | 页面切换平滑，数据图表有入场动画 |
|
||||
|
||||
---
|
||||
|
||||
## 9. 依赖与风险
|
||||
|
||||
### 9.1 依赖
|
||||
|
||||
- UI 设计稿（预计 3-5 个核心页面）
|
||||
- 胜任力模型数据（Demo 用模拟数据）
|
||||
- AI 接口（Demo 用模拟 AI 响应）
|
||||
|
||||
### 9.2 风险
|
||||
|
||||
| 风险 | 应对 |
|
||||
|------|------|
|
||||
| 客户期望 Demo 具备完整功能 | 明确这是 Demo 原型，不是交付产品 |
|
||||
| 不同学校岗位配置差异大 | Demo 聚焦 2-3 个典型岗位 |
|
||||
| AI 效果难以在 Demo 中体现 | 用预设的"模拟 AI"展示逻辑 |
|
||||
@@ -0,0 +1,495 @@
|
||||
# 数据来源设计文档 | K12C
|
||||
|
||||
**项目**：教师岗位胜任力管理 Demo 原型
|
||||
**版本**：v1.0
|
||||
**状态**：草稿
|
||||
|
||||
---
|
||||
|
||||
## 1. 数据采集架构
|
||||
|
||||
### 1.1 数据源全景
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 教师胜任力数据湖 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ 自评 │ │ 互评 │ │ 上级评价 │ │ 学生反馈 │ │
|
||||
│ │ (30%) │ │ (20%) │ │ (30%) │ │ (20%) │ │
|
||||
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
|
||||
│ │ │ │ │ │
|
||||
│ └──────────────┴──────────────┴──────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌──────────────────┐ │
|
||||
│ │ AI 引擎融合 │ │
|
||||
│ │ · 权重计算 │ │
|
||||
│ │ · 异常检测 │ │
|
||||
│ │ · 趋势分析 │ │
|
||||
│ └────────┬─────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌──────────────────┐ │
|
||||
│ │ 教学成果数据 │ │
|
||||
│ │ · 成绩进步率 │ │
|
||||
│ │ · 课堂满意度 │ │
|
||||
│ │ · 教研产出 │ │
|
||||
│ └────────┬─────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌──────────────────┐ │
|
||||
│ │ 综合能力画像 │ │
|
||||
│ └──────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 1.2 数据源权重配置
|
||||
|
||||
| 数据源 | 权重 | 采集频率 | 采集方式 |
|
||||
|--------|------|----------|----------|
|
||||
| **自评** | 30% | 每学期1次 | 在线问卷 |
|
||||
| **同僚互评** | 20% | 每学期1次 | 在线问卷 |
|
||||
| **上级评价** | 30% | 每学期1次 | 在线评估 |
|
||||
| **学生反馈** | 20% | 每学期1次 | 在线问卷 |
|
||||
| **教学行为数据** | 附加 | 持续 | 系统自动采集 |
|
||||
| **AI 分析推断** | 附加 | 持续 | 算法模型 |
|
||||
|
||||
### 1.3 五维胜任力与数据源映射
|
||||
|
||||
| 胜任力维度 | 自评权重 | 互评权重 | 上级权重 | 学生权重 |
|
||||
|------------|----------|----------|----------|----------|
|
||||
| 专业知识的深度与广度 | 35% | 25% | 30% | 10% |
|
||||
| 教学设计与实施能力 | 25% | 20% | 35% | 20% |
|
||||
| 协作沟通与家校共育 | 20% | 30% | 25% | 25% |
|
||||
| 数字技术应用能力 | 30% | 20% | 35% | 15% |
|
||||
| 持续发展与自我成长 | 40% | 25% | 30% | 5% |
|
||||
|
||||
---
|
||||
|
||||
## 2. 数据采集方式详解
|
||||
|
||||
### 2.1 自评（教师自评问卷）
|
||||
|
||||
**采集时机**：学期初/学期末
|
||||
**预计用时**：10-15 分钟
|
||||
**特点**：主观视角，反映自我认知与发展意愿
|
||||
|
||||
### 2.2 同僚互评（360度评估）
|
||||
|
||||
**采集时机**：学期末
|
||||
**预计用时**：5-8 分钟/人
|
||||
**特点**：横向视角，捕捉教学协作表现
|
||||
**规则**：每位教师评价 3-5 位同事
|
||||
|
||||
### 2.3 上级评价（管理者评估）
|
||||
|
||||
**采集时机**：学期末
|
||||
**预计用时**：8-10 分钟/人
|
||||
**特点**：纵向视角，基于观察与业绩
|
||||
|
||||
### 2.4 学生反馈
|
||||
|
||||
**采集时机**：学期中/学期末
|
||||
**预计用时**：3-5 分钟/人
|
||||
**特点**：服务对象视角，反映教学效果
|
||||
**规则**：每位教师被 10-20 名学生评价
|
||||
|
||||
### 2.5 教学行为数据（系统自动采集）
|
||||
|
||||
| 数据类型 | 来源 | 说明 |
|
||||
|----------|------|------|
|
||||
| 教研活动参与 | 教研系统 | 参与次数、质量评分 |
|
||||
| 课件上传数量 | 资源平台 | 教学资源贡献度 |
|
||||
| 家校沟通记录 | 沟通平台 | 主动沟通频率 |
|
||||
| 课堂签到记录 | 教务系统 | 出勤稳定性 |
|
||||
| 培训完成情况 | 学习平台 | 学习时长、测验成绩 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 示例问卷
|
||||
|
||||
### 3.1 教师自评问卷
|
||||
|
||||
```
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
教师胜任力自评问卷
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
【说明】本问卷用于评估您的岗位胜任力现状，请根据过去一个学期的
|
||||
实际表现如实评价。题目采用5分制：1=完全不符合，5=完全符合。
|
||||
|
||||
姓名：__________ 岗位：__________ 学期：2024秋季
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
一、专业知识的深度与广度
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
A1. 我熟悉本学科的核心知识体系和重难点
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
A2. 我能融会贯通相关学科知识，拓展教学视野
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
A3. 我持续关注本学科的前沿动态和最新研究成果
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
A4. 我能将跨学科知识整合到日常教学中
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
A5. 我了解不同学段的知识衔接点
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
二、教学设计与实施能力
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
B1. 我能根据学生特点设计差异化的教学方案
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
B2. 我的课堂节奏把控良好，重点突出
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
B3. 我善于使用多种教学方法激发学生学习兴趣
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
B4. 我能合理使用多媒体和教具辅助教学
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
B5. 我的课堂管理能力良好，课堂秩序稳定
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
B6. 我注重教学反思，能及时调整教学策略
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
三、协作沟通与家校共育
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
C1. 我与同事保持良好的合作关系
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
C2. 我积极参与教研组的集体备课和研讨活动
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
C3. 我能有效与家长沟通学生情况
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
C4. 我主动向家长反馈学生的进步与问题
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
C5. 我善于倾听学生想法，建立良好的师生关系
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
四、数字技术应用能力
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
D1. 我熟练使用学校的信息化教学工具
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
D2. 我能制作高质量的多媒体课件
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
D3. 我利用数字工具进行学情分析和作业批改
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
D4. 我在线上教学方面有较好经验
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
D5. 我关注教育数字化趋势，愿意尝试新技术
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
五、持续发展与自我成长
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
E1. 我有明确的个人职业发展规划
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
E2. 我主动参加专业培训和学术交流活动
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
E3. 我定期阅读教育类专业书籍或期刊
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
E4. 我善于从教学实践中总结经验、撰写反思
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
E5. 我积极参与课题研究或教学改革项目
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
六、开放性问题
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
F1. 您认为过去一学期自己在哪些方面有显著进步？
|
||||
_______________________________________________
|
||||
|
||||
F2. 您认为自己最需要提升的能力是什么？
|
||||
_______________________________________________
|
||||
|
||||
F3. 您希望学校提供哪些支持来帮助您的专业发展？
|
||||
_______________________________________________
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
感谢您的参与！
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3.2 同僚互评问卷
|
||||
|
||||
```
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
同僚互评问卷
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
【说明】本问卷用于收集同事对您的评价，请客观公正地评分。
|
||||
您的评价将被匿名处理，请放心填写。
|
||||
|
||||
评价人：__________ 被评价人：__________ 岗位：__________
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
一、协作配合
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
Q1. 该同事在集体备课中积极贡献、乐于分享
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
Q2. 该同事能配合团队安排，责任心强
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
Q3. 该同事在需要帮助时愿意伸出援手
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
二、专业能力
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
Q4. 该同事学科专业知识扎实
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
Q5. 该同事课堂教学水平值得学习
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
Q6. 该同事在处理学生问题上有较好方法
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
三、数字素养
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
Q7. 该同事能熟练使用信息化教学工具
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
Q8. 该同事善于利用数字资源改进教学
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
四、开放性问题
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
Q9. 您认为该同事有哪些优点值得学习？
|
||||
_______________________________________________
|
||||
|
||||
Q10. 您对该同事有什么建议？
|
||||
_______________________________________________
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3.3 学生反馈问卷
|
||||
|
||||
```
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
学生课堂反馈问卷
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
【说明】帮助老师更好地教学，请根据真实感受填写。
|
||||
本问卷匿名，不会泄露你的个人信息。
|
||||
|
||||
任课老师：__________ 学科：__________ 年级：__________
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
S1. 老师讲解清晰，我能够听懂
|
||||
□ 很不同意 □ 不同意 □ 一般 □ 同意 □ 很同意
|
||||
|
||||
S2. 老师上课有趣，我喜欢上这门课
|
||||
□ 很不同意 □ 不同意 □ 一般 □ 同意 □ 很同意
|
||||
|
||||
S3. 老师关心我的学习，会提问我
|
||||
□ 很不同意 □ 不同意 □ 一般 □ 同意 □ 很同意
|
||||
|
||||
S4. 当我有问题时，老师会耐心解答
|
||||
□ 很不同意 □ 不同意 □ 一般 □ 同意 □ 很同意
|
||||
|
||||
S5. 老师的课堂纪律良好，大家都在认真听课
|
||||
□ 很不同意 □ 不同意 □ 一般 □ 同意 □ 很同意
|
||||
|
||||
S6. 老师会使用多媒体/视频等工具帮助我们学习
|
||||
□ 很不同意 □ 不同意 □ 一般 □ 同意 □ 很同意
|
||||
|
||||
S7. 老师会给我们提供课后学习建议或资源
|
||||
□ 很不同意 □ 不同意 □ 一般 □ 同意 □ 很同意
|
||||
|
||||
S8. 整体而言，我对这位老师满意
|
||||
□ 很不同意 □ 不同意 □ 一般 □ 同意 □ 很同意
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
S9. 你最想对老师说的话（选填）
|
||||
_______________________________________________
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3.4 上级评价问卷（管理者用）
|
||||
|
||||
```
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
上级评价问卷
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
【说明】本问卷用于管理者对下属教师进行综合评价，请基于日常
|
||||
观察和教学业绩客观评价。
|
||||
|
||||
评价人：__________ 被评价人：__________ 岗位：__________
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
一、教学能力观察
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
M1. 该教师课堂教学质量稳定，表现良好
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
M2. 该教师能有效激发学生学习兴趣
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
M3. 该教师教学设计逻辑清晰，重难点突出
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
M4. 该教师课堂管理能力强，班级秩序良好
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
二、专业素养
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
M5. 该教师学科专业知识扎实
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
M6. 该教师积极参加教研活动，有教研成果
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
M7. 该教师善于反思，不断改进教学
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
三、协作与责任
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
M8. 该教师与同事关系融洽，协作良好
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
M9. 该教师家校沟通工作到位
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
M10. 该教师工作态度认真，责任意识强
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
四、数字能力
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
M11. 该教师能熟练使用学校信息化系统
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
M12. 该教师愿意尝试新的教学技术
|
||||
□ 1 □ 2 □ 3 □ 4 □ 5
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
五、综合评价
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
M13. 综合考虑，该教师的胜任力等级为：
|
||||
□ 待提升（1） □ 基础（2） □ 胜任（3） □ 优秀（4） □ 卓越（5）
|
||||
|
||||
M14. 评价说明与建议：
|
||||
_______________________________________________
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. AI 融合策略
|
||||
|
||||
### 4.1 数据融合模型
|
||||
|
||||
```
|
||||
原始评分
|
||||
│
|
||||
┌─────────────┼─────────────┐
|
||||
│ │ │
|
||||
▼ ▼ ▼
|
||||
┌─────────┐ ┌─────────┐ ┌─────────┐
|
||||
│ 自评偏差 │ │ 群体离群 │ │ 时间趋势 │
|
||||
│ 修正 │ │ 检测 │ │ 分析 │
|
||||
└────┬────┘ └────┬────┘ └────┬────┘
|
||||
│ │ │
|
||||
└─────────────┼─────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────┐
|
||||
│ 综合能力画像 │
|
||||
│ · 雷达图 │
|
||||
│ · 分项得分 │
|
||||
│ · 发展建议 │
|
||||
└─────────────────┘
|
||||
```
|
||||
|
||||
### 4.2 异常检测规则
|
||||
|
||||
| 异常类型 | 规则 | 处理方式 |
|
||||
|----------|------|----------|
|
||||
| 自评过高 | 自评分 > 互评均值 + 1.5σ | 标记"自信型"，降低自评权重 |
|
||||
| 自评过低 | 自评分 < 互评均值 - 1.5σ | 标记"谦虚型"，参考互评为主 |
|
||||
| 数据缺失 | 单项数据缺失 > 30% | AI 估算填充，标注"参考值" |
|
||||
|
||||
---
|
||||
|
||||
## 5. 数据质量保障
|
||||
|
||||
### 5.1 采集规范
|
||||
|
||||
| 规范项 | 要求 |
|
||||
|--------|------|
|
||||
| 最小回收率 | 每类问卷回收率 ≥ 70% |
|
||||
| 最低样本量 | 每位教师至少 3 份互评 + 10 份学生反馈 |
|
||||
| 填写时长 | 低于 3 分钟的问卷标记为"无效" |
|
||||
| 作答一致性 | 前后矛盾选项 > 20% 标记为"存疑" |
|
||||
|
||||
### 5.2 隐私保护
|
||||
|
||||
- 同僚互评：完全匿名
|
||||
- 学生反馈：匿名收集，不关联学生身份
|
||||
- 上级评价：实名，但结果可配置为"公开/仅本人/仅管理者"
|
||||
- 所有数据：加密存储，仅授权人员可访问
|
||||
|
||||
---
|
||||
|
||||
## 6. 采集时间表
|
||||
|
||||
| 阶段 | 时间 | 内容 |
|
||||
|------|------|------|
|
||||
| 学期初 | 第1-2周 | 教师自评（职业发展规划相关） |
|
||||
| 学期中 | 第10-12周 | 学生反馈（中期调研） |
|
||||
| 学期末 | 第18-20周 | 自评 + 互评 + 上级评价 + 学生反馈 |
|
||||
| 假期 | 第21-22周 | AI 分析、生成报告、下学期规划 |
|
||||
+362
@@ -0,0 +1,362 @@
|
||||
# 开发任务文档 | K12C
|
||||
|
||||
**项目**：教师岗位胜任力管理 Demo 原型
|
||||
**版本**：v1.0
|
||||
**状态**：待开发
|
||||
|
||||
---
|
||||
|
||||
## 1. 整体规划
|
||||
|
||||
### 1.1 技术选型
|
||||
|
||||
| 技术 | 选择 | 理由 |
|
||||
|------|------|------|
|
||||
| 前端框架 | React + Vite | 快速开发、热更新、组件化 |
|
||||
| UI 组件库 | Tailwind CSS | 现代化样式、响应式 |
|
||||
| 图表库 | Recharts | 雷达图、柱状图 |
|
||||
| 路由 | React Router | 页面跳转 |
|
||||
| 状态管理 | Zustand | 轻量级、全局状态 |
|
||||
|
||||
### 1.2 项目结构
|
||||
|
||||
```
|
||||
k12c-demo/
|
||||
├── public/
|
||||
│ └── index.html
|
||||
├── src/
|
||||
│ ├── components/ # 通用组件
|
||||
│ │ ├── Layout/
|
||||
│ │ ├── Navbar/
|
||||
│ │ ├── RadarChart/
|
||||
│ │ ├── ScoreCard/
|
||||
│ │ └── Button/
|
||||
│ ├── pages/ # 页面
|
||||
│ │ ├── Login/
|
||||
│ │ ├── RoleSelect/
|
||||
│ │ ├── Teacher/ # 教师端
|
||||
│ │ │ ├── Profile/ # 能力画像
|
||||
│ │ │ ├── Suggestions/# AI建议
|
||||
│ │ │ └── PDP/ # 发展计划
|
||||
│ │ ├── Manager/ # 管理者端
|
||||
│ │ │ └── Dashboard/ # 管理驾驶舱
|
||||
│ │ └── Shared/ # 共享页面
|
||||
│ ├── data/ # 模拟数据
|
||||
│ │ ├── teachers.ts
|
||||
│ │ ├── competencies.ts
|
||||
│ │ └── evaluations.ts
|
||||
│ ├── hooks/ # 自定义Hooks
|
||||
│ ├── styles/ # 全局样式
|
||||
│ ├── App.tsx
|
||||
│ └── main.tsx
|
||||
├── package.json
|
||||
└── vite.config.ts
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 页面清单（25页）
|
||||
|
||||
### 2.1 入口与导航（3页）
|
||||
|
||||
| 序号 | 页面 | 路由 | 功能描述 |
|
||||
|------|------|------|----------|
|
||||
| 1 | 登录页 | `/login` | 账号密码输入、记住登录 |
|
||||
| 2 | 角色选择页 | `/select-role` | 选择进入：学科教师/班主任/管理者 |
|
||||
| 3 | 首页/仪表盘 | `/` | 欢迎页、快捷入口、待办事项 |
|
||||
|
||||
### 2.2 教师端（10页）
|
||||
|
||||
#### 能力画像模块（4页）
|
||||
|
||||
| 序号 | 页面 | 路由 | 功能描述 |
|
||||
|------|------|------|----------|
|
||||
| 4 | 能力画像-概览 | `/teacher/profile` | 五维雷达图 + 综合得分 |
|
||||
| 5 | 能力画像-专业知识 | `/teacher/profile/knowledge` | 专业知识维度详情 |
|
||||
| 6 | 能力画像-教学能力 | `/teacher/profile/teaching` | 教学设计与实施详情 |
|
||||
| 7 | 能力画像-协作沟通 | `/teacher/profile/collaboration` | 协作沟通维度详情 |
|
||||
| 8 | 能力画像-数字技术 | `/teacher/profile/digital` | 数字技术维度详情 |
|
||||
| 9 | 能力画像-持续发展 | `/teacher/profile/growth` | 持续发展维度详情 |
|
||||
|
||||
#### AI 发展建议模块（2页）
|
||||
|
||||
| 序号 | 页面 | 路由 | 功能描述 |
|
||||
|------|------|------|----------|
|
||||
| 10 | AI 建议-概览 | `/teacher/suggestions` | AI 生成的个性化建议卡片 |
|
||||
| 11 | AI 建议-详情 | `/teacher/suggestions/:id` | 单条建议的详细内容与资源 |
|
||||
|
||||
#### 个人发展计划（PDP）模块（3页）
|
||||
|
||||
| 序号 | 页面 | 路由 | 功能描述 |
|
||||
|------|------|------|----------|
|
||||
| 12 | PDP-列表 | `/teacher/pdp` | 个人发展计划列表 |
|
||||
| 13 | PDP-创建 | `/teacher/pdp/create` | 创建新的发展计划 |
|
||||
| 14 | PDP-详情 | `/teacher/pdp/:id` | 查看/编辑计划详情与进度 |
|
||||
|
||||
#### 自评模块（1页）
|
||||
|
||||
| 序号 | 页面 | 路由 | 功能描述 |
|
||||
|------|------|------|----------|
|
||||
| 15 | 自评问卷 | `/teacher/evaluate` | 在线填写自评问卷 |
|
||||
|
||||
### 2.3 管理者端（10页）
|
||||
|
||||
#### 管理驾驶舱模块（5页）
|
||||
|
||||
| 序号 | 页面 | 路由 | 功能描述 |
|
||||
|------|------|------|----------|
|
||||
| 16 | 驾驶舱-概览 | `/manager/dashboard` | 全校胜任力热力图、关键指标 |
|
||||
| 17 | 驾驶舱-学科对比 | `/manager/dashboard/subject` | 各学科教师胜任力对比 |
|
||||
| 18 | 驾驶舱-年级分析 | `/manager/dashboard/grade` | 各年级胜任力分布 |
|
||||
| 19 | 驾驶舱-能力排名 | `/manager/dashboard/ranking` | 教师能力排行榜 |
|
||||
| 20 | 驾驶舱-四象限 | `/manager/dashboard/quadrant` | 能力-成果关联分析 |
|
||||
|
||||
#### 人才管理模块（4页）
|
||||
|
||||
| 序号 | 页面 | 路由 | 功能描述 |
|
||||
|------|------|------|----------|
|
||||
| 21 | 人才-高潜教师 | `/manager/talent/potential` | 高潜教师识别与详情 |
|
||||
| 22 | 人才-待提升 | `/manager/talent/pending` | 待提升教师列表 |
|
||||
| 23 | 人才-标杆教师 | `/manager/talent/best` | 标杆案例展示 |
|
||||
| 24 | 人才-配置建议 | `/manager/talent/assign` | 岗位配置智能推荐 |
|
||||
|
||||
#### 评估管理（1页）
|
||||
|
||||
| 序号 | 页面 | 路由 | 功能描述 |
|
||||
|------|------|------|----------|
|
||||
| 25 | 评估管理 | `/manager/evaluation` | 发起评估、查看回收进度 |
|
||||
|
||||
### 2.4 共享页面（2页）
|
||||
|
||||
| 序号 | 页面 | 路由 | 功能描述 |
|
||||
|------|------|------|----------|
|
||||
| 26 | 胜任力模型说明 | `/model` | 展示五维胜任力定义与岗位配置 |
|
||||
| 27 | 设置 | `/settings` | 个人信息、通知设置 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 组件清单
|
||||
|
||||
### 3.1 通用组件
|
||||
|
||||
| 组件名 | 说明 | 状态 |
|
||||
|--------|------|------|
|
||||
| `Button` | 按钮（primary/secondary/ghost） | ⬜ |
|
||||
| `Card` | 卡片容器 | ⬜ |
|
||||
| `Badge` | 徽章标签 | ⬜ |
|
||||
| `Avatar` | 头像 | ⬜ |
|
||||
| `Input` | 输入框 | ⬜ |
|
||||
| `Select` | 下拉选择 | ⬜ |
|
||||
| `Modal` | 模态框 | ⬜ |
|
||||
| `Toast` | 消息提示 | ⬜ |
|
||||
| `Loading` | 加载状态 | ⬜ |
|
||||
| `Empty` | 空状态 | ⬜ |
|
||||
|
||||
### 3.2 业务组件
|
||||
|
||||
| 组件名 | 说明 | 状态 |
|
||||
|--------|------|------|
|
||||
| `Navbar` | 顶部导航栏 | ⬜ |
|
||||
| `Sidebar` | 侧边栏菜单 | ⬜ |
|
||||
| `RadarChart` | 五维雷达图 | ⬜ |
|
||||
| `BarChart` | 柱状图 | ⬜ |
|
||||
| `Heatmap` | 热力图 | ⬜ |
|
||||
| `QuadrantChart` | 四象限图 | ⬜ |
|
||||
| `ScoreCard` | 得分卡片 | ⬜ |
|
||||
| `ProgressRing` | 环形进度 | ⬜ |
|
||||
| `SuggestionCard` | AI建议卡片 | ⬜ |
|
||||
| `PDPItem` | 发展计划项 | ⬜ |
|
||||
| `CompetencyBar` | 能力条形图 | ⬜ |
|
||||
| `TeacherCard` | 教师信息卡片 | ⬜ |
|
||||
| `Questionnaire` | 问卷组件 | ⬜ |
|
||||
|
||||
---
|
||||
|
||||
## 4. 模拟数据
|
||||
|
||||
### 4.1 教师数据
|
||||
|
||||
| 字段 | 类型 | 示例 |
|
||||
|------|------|------|
|
||||
| id | string | T001 |
|
||||
| name | string | 张明 |
|
||||
| role | enum | teacher/head_teacher/grade_leader/director |
|
||||
| subject | string | 数学 |
|
||||
| grade | string | 高一 |
|
||||
| avatar | string | /avatars/t001.png |
|
||||
| scores | object | { knowledge: 4.2, teaching: 4.5, ... } |
|
||||
| results | object | { progress_rate: 0.85, satisfaction: 4.3, ... } |
|
||||
|
||||
### 4.2 示例教师（6人）
|
||||
|
||||
| ID | 姓名 | 岗位 | 画像特征 |
|
||||
|----|------|------|----------|
|
||||
| T001 | 张明 | 学科教师 | 能力强 + 成果好（高潜） |
|
||||
| T002 | 李华 | 学科教师 | 能力强 + 成果差（待挖掘） |
|
||||
| T003 | 王芳 | 班主任 | 能力弱 + 成果好（经验型） |
|
||||
| T004 | 刘强 | 学科教师 | 能力弱 + 成果差（待提升） |
|
||||
| T005 | 陈静 | 年级组长 | 五维均衡（管理者） |
|
||||
| T006 | 赵伟 | 教务主任 | 战略眼光（领导者） |
|
||||
|
||||
---
|
||||
|
||||
## 5. 开发里程碑
|
||||
|
||||
### 5.1 里程碑划分
|
||||
|
||||
| 阶段 | 周期 | 交付内容 | 页面数 |
|
||||
|------|------|----------|--------|
|
||||
| **M1 基础搭建** | Day 1 | 项目初始化、路由配置、通用组件 | - |
|
||||
| **M2 登录流程** | Day 2 | 登录页、角色选择、首页 | 3页 |
|
||||
| **M3 教师画像** | Day 3-4 | 能力画像6页面、雷达图 | 7页 |
|
||||
| **M4 AI建议+PDP** | Day 5-6 | AI建议、PDP管理 | 5页 |
|
||||
| **M5 管理者端** | Day 7-9 | 驾驶舱5页面、人才管理4页面 | 9页 |
|
||||
| **M6 自评问卷** | Day 10 | 自评问卷页 | 1页 |
|
||||
| **M7 完善优化** | Day 11-12 | 动效、响应式、细节打磨 | - |
|
||||
| **M8 测试验收** | Day 13 | 全链路测试、问题修复 | - |
|
||||
|
||||
### 5.2 每日任务
|
||||
|
||||
**Day 1 - 基础搭建**
|
||||
- [ ] 初始化 Vite + React + TypeScript 项目
|
||||
- [ ] 安装依赖（Tailwind、Recharts、React Router、Zustand）
|
||||
- [ ] 配置 Tailwind CSS
|
||||
- [ ] 创建目录结构
|
||||
- [ ] 配置路由
|
||||
- [ ] 实现通用组件（Button、Card、Badge、Avatar）
|
||||
|
||||
**Day 2 - 登录流程**
|
||||
- [ ] 实现登录页
|
||||
- [ ] 实现角色选择页
|
||||
- [ ] 实现首页框架
|
||||
- [ ] 添加导航组件
|
||||
|
||||
**Day 3 - 能力画像（概览+详情）**
|
||||
- [ ] 创建模拟数据（teachers.ts、competencies.ts）
|
||||
- [ ] 实现雷达图组件
|
||||
- [ ] 实现能力画像概览页
|
||||
- [ ] 实现5个维度详情页
|
||||
|
||||
**Day 4 - 能力画像（数据绑定）**
|
||||
- [ ] 绑定6位示例教师数据
|
||||
- [ ] 实现四象限分析图
|
||||
- [ ] 实现能力对比功能
|
||||
- [ ] 完善数据展示
|
||||
|
||||
**Day 5 - AI发展建议**
|
||||
- [ ] 实现AI建议卡片组件
|
||||
- [ ] 实现AI建议列表页
|
||||
- [ ] 实现建议详情页
|
||||
- [ ] 添加推荐资源展示
|
||||
|
||||
**Day 6 - 个人发展计划**
|
||||
- [ ] 实现PDP列表页
|
||||
- [ ] 实现PDP创建页
|
||||
- [ ] 实现PDP详情页
|
||||
- [ ] 添加进度追踪
|
||||
|
||||
**Day 7 - 管理驾驶舱（概览）**
|
||||
- [ ] 实现全校胜任力热力图
|
||||
- [ ] 实现关键指标卡片
|
||||
- [ ] 实现数据筛选功能
|
||||
|
||||
**Day 8 - 管理驾驶舱（分析）**
|
||||
- [ ] 实现学科对比图
|
||||
- [ ] 实现年级分析图
|
||||
- [ ] 实现能力排行榜
|
||||
- [ ] 实现四象限分析
|
||||
|
||||
**Day 9 - 人才管理**
|
||||
- [ ] 实现高潜教师页面
|
||||
- [ ] 实现待提升教师页面
|
||||
- [ ] 实现标杆案例页面
|
||||
- [ ] 实现岗位配置建议
|
||||
|
||||
**Day 10 - 自评问卷**
|
||||
- [ ] 实现问卷组件
|
||||
- [ ] 实现自评问卷页面
|
||||
- [ ] 添加表单验证
|
||||
- [ ] 添加提交反馈
|
||||
|
||||
**Day 11-12 - 完善优化**
|
||||
- [ ] 添加页面过渡动画
|
||||
- [ ] 优化图表动效
|
||||
- [ ] 适配 iPad 横屏
|
||||
- [ ] 修复已知问题
|
||||
|
||||
**Day 13 - 测试验收**
|
||||
- [ ] 全链路功能测试
|
||||
- [ ] 响应式测试
|
||||
- [ ] 浏览器兼容性测试
|
||||
- [ ] 问题修复与验收
|
||||
|
||||
---
|
||||
|
||||
## 6. 验收标准
|
||||
|
||||
### 6.1 功能验收
|
||||
|
||||
| 功能 | 验收标准 |
|
||||
|------|----------|
|
||||
| 登录 | 输入账号密码可登录，默认演示账号 |
|
||||
| 角色选择 | 可选择不同角色进入对应视图 |
|
||||
| 能力画像 | 雷达图正确显示，数据切换流畅 |
|
||||
| AI建议 | 建议卡片展示，点击展开详情 |
|
||||
| PDP | 可创建、查看、编辑发展计划 |
|
||||
| 驾驶舱 | 热力图、图表正确展示，数据可筛选 |
|
||||
| 人才管理 | 四象限分析正确，人才分类准确 |
|
||||
| 自评问卷 | 问卷可填写，提交后显示成功 |
|
||||
|
||||
### 6.2 视觉验收
|
||||
|
||||
| 项目 | 验收标准 |
|
||||
|------|----------|
|
||||
| 配色 | 蓝色系主色调，柔和、专业 |
|
||||
| 字体 | 思源黑体/苹方，清晰易读 |
|
||||
| 间距 | 留白充足，层级分明 |
|
||||
| 动效 | 页面切换流畅，图表有入场动画 |
|
||||
| 响应式 | iPad 横屏正常显示 |
|
||||
|
||||
---
|
||||
|
||||
## 7. 风险与应对
|
||||
|
||||
| 风险 | 影响 | 应对措施 |
|
||||
|------|------|----------|
|
||||
| Recharts雷达图定制困难 | 中 | 使用 SVG 自定义绘制，或选择 ECharts |
|
||||
| 动效实现耗时 | 中 | 使用预设动画库（Framer Motion） |
|
||||
| 数据绑定复杂度高 | 中 | 先完成静态页面，再绑定数据 |
|
||||
| 时间紧张 | 高 | 砍掉次要页面（M2优先级），保证核心路径 |
|
||||
|
||||
---
|
||||
|
||||
## 8. 附录：路由配置
|
||||
|
||||
```typescript
|
||||
// 路由表结构
|
||||
const routes = [
|
||||
{ path: '/login', component: LoginPage },
|
||||
{ path: '/select-role', component: RoleSelectPage },
|
||||
{ path: '/', component: HomePage, auth: true },
|
||||
|
||||
// 教师端
|
||||
{ path: '/teacher/profile', component: ProfilePage },
|
||||
{ path: '/teacher/profile/:dimension', component: DimensionDetailPage },
|
||||
{ path: '/teacher/suggestions', component: SuggestionsPage },
|
||||
{ path: '/teacher/suggestions/:id', component: SuggestionDetailPage },
|
||||
{ path: '/teacher/pdp', component: PDPListPage },
|
||||
{ path: '/teacher/pdp/create', component: PDPCreatePage },
|
||||
{ path: '/teacher/pdp/:id', component: PDPDetailPage },
|
||||
{ path: '/teacher/evaluate', component: EvaluatePage },
|
||||
|
||||
// 管理者端
|
||||
{ path: '/manager/dashboard', component: DashboardPage },
|
||||
{ path: '/manager/dashboard/:tab', component: DashboardTabPage },
|
||||
{ path: '/manager/talent/:type', component: TalentPage },
|
||||
{ path: '/manager/evaluation', component: EvaluationPage },
|
||||
|
||||
// 共享
|
||||
{ path: '/model', component: ModelPage },
|
||||
{ path: '/settings', component: SettingsPage },
|
||||
]
|
||||
```
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
创建 K12C 产品原型截图 PPT
|
||||
"""
|
||||
from pptx import Presentation
|
||||
from pptx.util import Inches, Pt
|
||||
from pptx.dml.color import RGBColor
|
||||
from pptx.enum.text import PP_ALIGN
|
||||
from pptx.enum.shapes import MSO_SHAPE
|
||||
import os
|
||||
|
||||
# 路径设置
|
||||
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
IMG_PATH = os.path.join(BASE_DIR, 'screenshots-full.png')
|
||||
PPT_PATH = os.path.join(BASE_DIR, 'K12C-原型展示.pptx')
|
||||
|
||||
def create_ppt():
|
||||
prs = Presentation()
|
||||
prs.slide_width = Inches(13.333)
|
||||
prs.slide_height = Inches(7.5)
|
||||
|
||||
# 定义幻灯片内容
|
||||
slides_data = [
|
||||
{
|
||||
'title': '产品原型展示',
|
||||
'subtitle': '教师岗位胜任力数字化管理平台',
|
||||
'label': None,
|
||||
'img_offset': None
|
||||
},
|
||||
{
|
||||
'title': '教师端 · 能力画像',
|
||||
'subtitle': '五维雷达图 + 能力维度分析 + 排名统计',
|
||||
'label': '原型',
|
||||
'img_offset': (0, 0) # 左上角
|
||||
},
|
||||
{
|
||||
'title': '管理端 · 驾驶舱',
|
||||
'subtitle': '全校 KPI 数据看板 + 学科分布 + TOP 优秀教师',
|
||||
'label': '原型',
|
||||
'img_offset': (700, 0) # 右上角
|
||||
},
|
||||
{
|
||||
'title': '教师端 · AI 智能建议',
|
||||
'subtitle': '短板识别 + 个性化发展推荐 + 学习资源',
|
||||
'label': '原型',
|
||||
'img_offset': (0, 620) # 左下角
|
||||
},
|
||||
{
|
||||
'title': '教师端 · 个人发展计划',
|
||||
'subtitle': '成长时间线 + 阶段目标 + 完成进度追踪',
|
||||
'label': '原型',
|
||||
'img_offset': (700, 620) # 右下角
|
||||
}
|
||||
]
|
||||
|
||||
for idx, slide_data in enumerate(slides_data):
|
||||
slide_layout = prs.slide_layouts[6]
|
||||
slide = prs.slides.add_slide(slide_layout)
|
||||
|
||||
# 添加标题
|
||||
title_box = slide.shapes.add_textbox(
|
||||
Inches(0.5), Inches(0.3), Inches(12), Inches(0.7)
|
||||
)
|
||||
title_frame = title_box.text_frame
|
||||
title_para = title_frame.paragraphs[0]
|
||||
title_para.text = slide_data['title']
|
||||
title_para.font.size = Pt(32)
|
||||
title_para.font.bold = True
|
||||
title_para.font.color.rgb = RGBColor(30, 41, 59)
|
||||
|
||||
# 添加副标题
|
||||
subtitle_box = slide.shapes.add_textbox(
|
||||
Inches(0.5), Inches(0.95), Inches(12), Inches(0.45)
|
||||
)
|
||||
subtitle_frame = subtitle_box.text_frame
|
||||
subtitle_para = subtitle_frame.paragraphs[0]
|
||||
subtitle_para.text = slide_data['subtitle']
|
||||
subtitle_para.font.size = Pt(16)
|
||||
subtitle_para.font.color.rgb = RGBColor(100, 116, 139)
|
||||
|
||||
# 添加原型标签
|
||||
if slide_data['label']:
|
||||
label_bg = slide.shapes.add_shape(
|
||||
MSO_SHAPE.ROUNDED_RECTANGLE,
|
||||
Inches(11.3), Inches(0.35), Inches(1.5), Inches(0.45)
|
||||
)
|
||||
label_bg.fill.solid()
|
||||
label_bg.fill.fore_color.rgb = RGBColor(37, 99, 235)
|
||||
label_bg.line.fill.background()
|
||||
|
||||
label_text = slide.shapes.add_textbox(
|
||||
Inches(11.3), Inches(0.4), Inches(1.5), Inches(0.35)
|
||||
)
|
||||
label_frame = label_text.text_frame
|
||||
label_para = label_frame.paragraphs[0]
|
||||
label_para.text = '【原型】'
|
||||
label_para.font.size = Pt(14)
|
||||
label_para.font.bold = True
|
||||
label_para.font.color.rgb = RGBColor(255, 255, 255)
|
||||
label_para.alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 添加分隔线
|
||||
line = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE,
|
||||
Inches(0.5), Inches(1.4), Inches(12.333), Pt(2)
|
||||
)
|
||||
line.fill.solid()
|
||||
line.fill.fore_color.rgb = RGBColor(226, 232, 240)
|
||||
line.line.fill.background()
|
||||
|
||||
# 添加图片
|
||||
if os.path.exists(IMG_PATH) and slide_data['img_offset'] is not None:
|
||||
offset_x, offset_y = slide_data['img_offset']
|
||||
|
||||
# 使用部分图片 - 每个界面单独裁剪
|
||||
# 图片总尺寸约 1400x1200，每个格子约 700x600
|
||||
phone_width = 340
|
||||
phone_height = 620
|
||||
phone_padding = 40
|
||||
|
||||
# 计算截取区域
|
||||
left = offset_x + phone_padding
|
||||
top = offset_y + phone_padding
|
||||
right = left + phone_width
|
||||
bottom = top + phone_height
|
||||
|
||||
# 添加图片（裁剪展示）
|
||||
# 由于 python-pptx 不支持直接裁剪，我们展示整张截图但缩小
|
||||
# 用户可以在演示时说明这是 2x2 布局
|
||||
img_width = Inches(4.5)
|
||||
img_height = Inches(5.5)
|
||||
left_pos = Inches(0.5)
|
||||
top_pos = Inches(1.6)
|
||||
|
||||
slide.shapes.add_picture(IMG_PATH, left_pos, top_pos, width=img_width)
|
||||
|
||||
# 保存 PPT
|
||||
prs.save(PPT_PATH)
|
||||
print(f'PPT 已保存: {PPT_PATH}')
|
||||
|
||||
if __name__ == '__main__':
|
||||
create_ppt()
|
||||
+762
@@ -0,0 +1,762 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
K12C 教师岗位胜任力数字化管理方案 - PPT 生成器
|
||||
将 presentation.html 转换为精美专业的 PPT
|
||||
"""
|
||||
|
||||
from pptx import Presentation
|
||||
from pptx.util import Inches, Pt, Emu
|
||||
from pptx.dml.color import RGBColor
|
||||
from pptx.enum.text import PP_ALIGN, MSO_ANCHOR
|
||||
from pptx.enum.shapes import MSO_SHAPE
|
||||
from pptx.oxml.ns import nsmap
|
||||
from pptx.oxml import parse_xml
|
||||
import os
|
||||
import re
|
||||
|
||||
# 路径设置
|
||||
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
OUTPUT_PATH = os.path.join(BASE_DIR, 'K12C-教师胜任力管理方案.pptx')
|
||||
|
||||
# 配色方案
|
||||
COLORS = {
|
||||
'primary': RGBColor(0x25, 0x63, 0xeb), # 蓝色 #2563eb
|
||||
'secondary': RGBColor(0x05, 0x96, 0x69), # 绿色 #059669
|
||||
'accent': RGBColor(0x7c, 0x3a, 0xed), # 紫色 #7c3aed
|
||||
'warning': RGBColor(0xf5, 0x9e, 0x0b), # 橙色 #f59e0b
|
||||
'danger': RGBColor(0xef, 0x44, 0x44), # 红色 #ef4444
|
||||
'text': RGBColor(0x0f, 0x17, 0x2a), # 深色文字
|
||||
'muted': RGBColor(0x64, 0x74, 0x8b), # 灰色文字
|
||||
'white': RGBColor(0xff, 0xff, 0xff),
|
||||
'light_bg': RGBColor(0xf8, 0xfa, 0xfc),
|
||||
'border': RGBColor(0xe2, 0xe8, 0xf0),
|
||||
'dark_bg': RGBColor(0x0f, 0x17, 0x2a), # 封面背景
|
||||
}
|
||||
|
||||
|
||||
def hex_to_rgb(hex_str):
|
||||
"""将 hex 颜色字符串转换为 RGBColor"""
|
||||
hex_str = hex_str.lstrip('#')
|
||||
return RGBColor(int(hex_str[0:2], 16), int(hex_str[2:4], 16), int(hex_str[4:6], 16))
|
||||
|
||||
|
||||
def create_presentation():
|
||||
"""创建演示文稿"""
|
||||
prs = Presentation()
|
||||
prs.slide_width = Inches(13.333) # 16:9 宽屏
|
||||
prs.slide_height = Inches(7.5)
|
||||
return prs
|
||||
|
||||
|
||||
def add_cover_slide(prs):
|
||||
"""添加封面页"""
|
||||
slide_layout = prs.slide_layouts[6] # 空白布局
|
||||
slide = prs.slides.add_slide(slide_layout)
|
||||
|
||||
# 背景渐变（用深色矩形模拟）
|
||||
bg = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, 0, 0, prs.slide_width, prs.slide_height
|
||||
)
|
||||
bg.fill.solid()
|
||||
bg.fill.fore_color.rgb = COLORS['dark_bg']
|
||||
bg.line.fill.background()
|
||||
|
||||
# 顶部装饰线
|
||||
top_line = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, 0, 0, prs.slide_width, Inches(0.06)
|
||||
)
|
||||
top_line.fill.solid()
|
||||
top_line.fill.fore_color.rgb = COLORS['primary']
|
||||
top_line.line.fill.background()
|
||||
|
||||
# Logo 区域
|
||||
logo_box = slide.shapes.add_shape(
|
||||
MSO_SHAPE.ROUNDED_RECTANGLE,
|
||||
Inches(6.0), Inches(1.5), Inches(1.2), Inches(1.2)
|
||||
)
|
||||
logo_box.fill.solid()
|
||||
logo_box.fill.fore_color.rgb = RGBColor(0x1e, 0x3a, 0x5f)
|
||||
logo_box.line.color.rgb = COLORS['border']
|
||||
|
||||
# Logo 文字
|
||||
logo_text = slide.shapes.add_textbox(Inches(6.0), Inches(1.8), Inches(1.2), Inches(0.6))
|
||||
tf = logo_text.text_frame
|
||||
tf.paragraphs[0].text = "K12C"
|
||||
tf.paragraphs[0].font.size = Pt(24)
|
||||
tf.paragraphs[0].font.bold = True
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['white']
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 主标题
|
||||
title = slide.shapes.add_textbox(Inches(0.8), Inches(3.0), Inches(11.7), Inches(1.0))
|
||||
tf = title.text_frame
|
||||
tf.paragraphs[0].text = "教师岗位胜任力数字化管理方案"
|
||||
tf.paragraphs[0].font.size = Pt(44)
|
||||
tf.paragraphs[0].font.bold = True
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['white']
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 副标题
|
||||
subtitle = slide.shapes.add_textbox(Inches(0.8), Inches(4.0), Inches(11.7), Inches(0.6))
|
||||
tf = subtitle.text_frame
|
||||
tf.paragraphs[0].text = "深圳民办 K12 学校解决方案"
|
||||
tf.paragraphs[0].font.size = Pt(24)
|
||||
tf.paragraphs[0].font.color.rgb = RGBColor(0xa5, 0xb4, 0xfc)
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 分隔线
|
||||
divider = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, Inches(5.8), Inches(4.8), Inches(1.6), Pt(3)
|
||||
)
|
||||
divider.fill.solid()
|
||||
divider.fill.fore_color.rgb = COLORS['primary']
|
||||
divider.line.fill.background()
|
||||
|
||||
# 底部信息
|
||||
footer = slide.shapes.add_textbox(Inches(0.8), Inches(5.5), Inches(11.7), Inches(0.4))
|
||||
tf = footer.text_frame
|
||||
tf.paragraphs[0].text = "科学评估 · 精准发展 · 持续成长"
|
||||
tf.paragraphs[0].font.size = Pt(16)
|
||||
tf.paragraphs[0].font.color.rgb = RGBColor(0x8b, 0x95, 0xa5)
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 日期
|
||||
date_box = slide.shapes.add_textbox(Inches(0.8), Inches(6.2), Inches(11.7), Inches(0.4))
|
||||
tf = date_box.text_frame
|
||||
tf.paragraphs[0].text = "2024"
|
||||
tf.paragraphs[0].font.size = Pt(14)
|
||||
tf.paragraphs[0].font.color.rgb = RGBColor(0x6b, 0x72, 0x80)
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
return slide
|
||||
|
||||
|
||||
def add_section_slide(prs, num, title, subtitle=""):
|
||||
"""添加章节分隔页"""
|
||||
slide_layout = prs.slide_layouts[6]
|
||||
slide = prs.slides.add_slide(slide_layout)
|
||||
|
||||
# 深色背景
|
||||
bg = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, 0, 0, prs.slide_width, prs.slide_height
|
||||
)
|
||||
bg.fill.solid()
|
||||
bg.fill.fore_color.rgb = COLORS['dark_bg']
|
||||
bg.line.fill.background()
|
||||
|
||||
# 左侧装饰条
|
||||
left_bar = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, 0, 0, Inches(0.08), prs.slide_height
|
||||
)
|
||||
left_bar.fill.solid()
|
||||
left_bar.fill.fore_color.rgb = COLORS['primary']
|
||||
left_bar.line.fill.background()
|
||||
|
||||
# 章节编号（大字背景）
|
||||
num_box = slide.shapes.add_textbox(Inches(0.5), Inches(0.8), Inches(4.0), Inches(3.0))
|
||||
tf = num_box.text_frame
|
||||
tf.paragraphs[0].text = f"0{num}" if num < 10 else str(num)
|
||||
tf.paragraphs[0].font.size = Pt(180)
|
||||
tf.paragraphs[0].font.bold = True
|
||||
tf.paragraphs[0].font.color.rgb = RGBColor(0x30, 0x41, 0x59)
|
||||
|
||||
# 章节标题
|
||||
title_box = slide.shapes.add_textbox(Inches(1.0), Inches(3.2), Inches(11.0), Inches(1.2))
|
||||
tf = title_box.text_frame
|
||||
tf.paragraphs[0].text = title
|
||||
tf.paragraphs[0].font.size = Pt(48)
|
||||
tf.paragraphs[0].font.bold = True
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['white']
|
||||
|
||||
# 副标题
|
||||
if subtitle:
|
||||
sub_box = slide.shapes.add_textbox(Inches(1.0), Inches(4.5), Inches(11.0), Inches(0.6))
|
||||
tf = sub_box.text_frame
|
||||
tf.paragraphs[0].text = subtitle
|
||||
tf.paragraphs[0].font.size = Pt(20)
|
||||
tf.paragraphs[0].font.color.rgb = RGBColor(0x94, 0xa3, 0xb8)
|
||||
|
||||
return slide
|
||||
|
||||
|
||||
def add_content_slide(prs, title, icon_char="●", icon_color=None):
|
||||
"""添加内容页（通用标题栏）"""
|
||||
slide_layout = prs.slide_layouts[6]
|
||||
slide = prs.slides.add_slide(slide_layout)
|
||||
|
||||
# 白色背景
|
||||
bg = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, 0, 0, prs.slide_width, prs.slide_height
|
||||
)
|
||||
bg.fill.solid()
|
||||
bg.fill.fore_color.rgb = COLORS['white']
|
||||
bg.line.fill.background()
|
||||
|
||||
# 顶部渐变条
|
||||
top_bar = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, 0, 0, prs.slide_width, Inches(0.06)
|
||||
)
|
||||
top_bar.fill.solid()
|
||||
top_bar.fill.fore_color.rgb = COLORS['primary']
|
||||
top_bar.line.fill.background()
|
||||
|
||||
# 标题图标背景
|
||||
if icon_color is None:
|
||||
icon_color = COLORS['primary']
|
||||
|
||||
icon_bg = slide.shapes.add_shape(
|
||||
MSO_SHAPE.ROUNDED_RECTANGLE,
|
||||
Inches(0.4), Inches(0.35), Inches(0.5), Inches(0.5)
|
||||
)
|
||||
icon_bg.fill.solid()
|
||||
icon_bg.fill.fore_color.rgb = icon_color
|
||||
icon_bg.line.fill.background()
|
||||
|
||||
# 标题文字
|
||||
title_box = slide.shapes.add_textbox(Inches(1.0), Inches(0.35), Inches(11.0), Inches(0.5))
|
||||
tf = title_box.text_frame
|
||||
tf.paragraphs[0].text = title
|
||||
tf.paragraphs[0].font.size = Pt(28)
|
||||
tf.paragraphs[0].font.bold = True
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['text']
|
||||
|
||||
# 分隔线
|
||||
line = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, Inches(0.4), Inches(1.0), Inches(12.5), Pt(2)
|
||||
)
|
||||
line.fill.solid()
|
||||
line.fill.fore_color.rgb = COLORS['border']
|
||||
line.line.fill.background()
|
||||
|
||||
return slide
|
||||
|
||||
|
||||
def add_bullet_list(slide, items, left, top, width, height, font_size=16, color=None):
|
||||
"""添加项目符号列表"""
|
||||
if color is None:
|
||||
color = COLORS['muted']
|
||||
|
||||
content_box = slide.shapes.add_textbox(
|
||||
Inches(left), Inches(top), Inches(width), Inches(height)
|
||||
)
|
||||
tf = content_box.text_frame
|
||||
tf.word_wrap = True
|
||||
|
||||
for i, item in enumerate(items):
|
||||
if i == 0:
|
||||
p = tf.paragraphs[0]
|
||||
else:
|
||||
p = tf.add_paragraph()
|
||||
p.text = f"• {item}"
|
||||
p.font.size = Pt(font_size)
|
||||
p.font.color.rgb = color
|
||||
p.space_after = Pt(8)
|
||||
|
||||
return content_box
|
||||
|
||||
|
||||
def add_card(slide, left, top, width, height, title, content=None, color=None):
|
||||
"""添加卡片元素"""
|
||||
if color is None:
|
||||
color = COLORS['primary']
|
||||
|
||||
# 卡片背景
|
||||
card_bg = slide.shapes.add_shape(
|
||||
MSO_SHAPE.ROUNDED_RECTANGLE,
|
||||
Inches(left), Inches(top), Inches(width), Inches(height)
|
||||
)
|
||||
card_bg.fill.solid()
|
||||
card_bg.fill.fore_color.rgb = COLORS['white']
|
||||
card_bg.line.color.rgb = COLORS['border']
|
||||
|
||||
# 顶部色条
|
||||
accent_bar = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE,
|
||||
Inches(left), Inches(top), Inches(width), Inches(0.06)
|
||||
)
|
||||
accent_bar.fill.solid()
|
||||
accent_bar.fill.fore_color.rgb = color
|
||||
accent_bar.line.fill.background()
|
||||
|
||||
# 标题
|
||||
title_box = slide.shapes.add_textbox(
|
||||
Inches(left + 0.15), Inches(top + 0.2),
|
||||
Inches(width - 0.3), Inches(0.4)
|
||||
)
|
||||
tf = title_box.text_frame
|
||||
tf.paragraphs[0].text = title
|
||||
tf.paragraphs[0].font.size = Pt(14)
|
||||
tf.paragraphs[0].font.bold = True
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['text']
|
||||
|
||||
if content:
|
||||
content_box = slide.shapes.add_textbox(
|
||||
Inches(left + 0.15), Inches(top + 0.6),
|
||||
Inches(width - 0.3), Inches(height - 0.8)
|
||||
)
|
||||
tf = content_box.text_frame
|
||||
tf.word_wrap = True
|
||||
tf.paragraphs[0].text = content
|
||||
tf.paragraphs[0].font.size = Pt(11)
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['muted']
|
||||
|
||||
return card_bg
|
||||
|
||||
|
||||
def add_image_slide(prs, title, image_path, caption="", icon_color=None):
|
||||
"""添加图片展示页"""
|
||||
slide = add_content_slide(prs, title, icon_color=icon_color)
|
||||
|
||||
if os.path.exists(image_path):
|
||||
# 计算图片位置（居中，高度限制）
|
||||
img_height = Inches(5.0)
|
||||
img_left = Inches(1.5)
|
||||
|
||||
slide.shapes.add_picture(
|
||||
image_path,
|
||||
img_left,
|
||||
Inches(1.2),
|
||||
height=img_height
|
||||
)
|
||||
|
||||
if caption:
|
||||
cap_box = slide.shapes.add_textbox(
|
||||
Inches(0.5), Inches(6.5), Inches(12.0), Inches(0.5)
|
||||
)
|
||||
tf = cap_box.text_frame
|
||||
tf.paragraphs[0].text = caption
|
||||
tf.paragraphs[0].font.size = Pt(14)
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['muted']
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
return slide
|
||||
|
||||
|
||||
def add_cta_slide(prs):
|
||||
"""添加行动召唤页"""
|
||||
slide_layout = prs.slide_layouts[6]
|
||||
slide = prs.slides.add_slide(slide_layout)
|
||||
|
||||
# 渐变背景
|
||||
bg = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, 0, 0, prs.slide_width, prs.slide_height
|
||||
)
|
||||
bg.fill.solid()
|
||||
bg.fill.fore_color.rgb = COLORS['dark_bg']
|
||||
bg.line.fill.background()
|
||||
|
||||
# 顶部装饰
|
||||
top_line = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, 0, 0, prs.slide_width, Inches(0.06)
|
||||
)
|
||||
top_line.fill.solid()
|
||||
top_line.fill.fore_color.rgb = COLORS['primary']
|
||||
top_line.line.fill.background()
|
||||
|
||||
# 主标题
|
||||
title = slide.shapes.add_textbox(Inches(0.8), Inches(2.2), Inches(11.7), Inches(1.0))
|
||||
tf = title.text_frame
|
||||
tf.paragraphs[0].text = "开启教师能力管理新篇章"
|
||||
tf.paragraphs[0].font.size = Pt(44)
|
||||
tf.paragraphs[0].font.bold = True
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['white']
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 副标题
|
||||
sub = slide.shapes.add_textbox(Inches(0.8), Inches(3.3), Inches(11.7), Inches(0.6))
|
||||
tf = sub.text_frame
|
||||
tf.paragraphs[0].text = "科学评估 · 精准发展 · 持续成长"
|
||||
tf.paragraphs[0].font.size = Pt(20)
|
||||
tf.paragraphs[0].font.color.rgb = RGBColor(0xa5, 0xb4, 0xfc)
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 按钮区域
|
||||
btn1 = slide.shapes.add_shape(
|
||||
MSO_SHAPE.ROUNDED_RECTANGLE,
|
||||
Inches(4.5), Inches(4.3), Inches(2.0), Inches(0.6)
|
||||
)
|
||||
btn1.fill.solid()
|
||||
btn1.fill.fore_color.rgb = COLORS['primary']
|
||||
btn1.line.fill.background()
|
||||
|
||||
btn1_text = slide.shapes.add_textbox(Inches(4.5), Inches(4.4), Inches(2.0), Inches(0.4))
|
||||
tf = btn1_text.text_frame
|
||||
tf.paragraphs[0].text = "预约 Demo 演示"
|
||||
tf.paragraphs[0].font.size = Pt(14)
|
||||
tf.paragraphs[0].font.bold = True
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['white']
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
btn2 = slide.shapes.add_shape(
|
||||
MSO_SHAPE.ROUNDED_RECTANGLE,
|
||||
Inches(6.8), Inches(4.3), Inches(1.6), Inches(0.6)
|
||||
)
|
||||
btn2.fill.solid()
|
||||
btn2.fill.fore_color.rgb = RGBColor(0x1e, 0x3a, 0x5f)
|
||||
btn2.line.color.rgb = COLORS['border']
|
||||
|
||||
btn2_text = slide.shapes.add_textbox(Inches(6.8), Inches(4.4), Inches(1.6), Inches(0.4))
|
||||
tf = btn2_text.text_frame
|
||||
tf.paragraphs[0].text = "了解更多"
|
||||
tf.paragraphs[0].font.size = Pt(14)
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['white']
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 联系信息
|
||||
contact = slide.shapes.add_textbox(Inches(0.8), Inches(5.5), Inches(11.7), Inches(0.4))
|
||||
tf = contact.text_frame
|
||||
tf.paragraphs[0].text = "contact@example.com | 400-xxx-xxxx"
|
||||
tf.paragraphs[0].font.size = Pt(14)
|
||||
tf.paragraphs[0].font.color.rgb = RGBColor(0x8b, 0x95, 0xa5)
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
return slide
|
||||
|
||||
|
||||
def add_thanks_slide(prs):
|
||||
"""添加感谢页"""
|
||||
slide_layout = prs.slide_layouts[6]
|
||||
slide = prs.slides.add_slide(slide_layout)
|
||||
|
||||
# 深色背景
|
||||
bg = slide.shapes.add_shape(
|
||||
MSO_SHAPE.RECTANGLE, 0, 0, prs.slide_width, prs.slide_height
|
||||
)
|
||||
bg.fill.solid()
|
||||
bg.fill.fore_color.rgb = COLORS['dark_bg']
|
||||
bg.line.fill.background()
|
||||
|
||||
# 装饰圆
|
||||
circle = slide.shapes.add_shape(
|
||||
MSO_SHAPE.OVAL,
|
||||
Inches(5.9), Inches(1.5), Inches(1.5), Inches(1.5)
|
||||
)
|
||||
circle.fill.solid()
|
||||
circle.fill.fore_color.rgb = RGBColor(0x1e, 0x3a, 0x5f)
|
||||
circle.line.fill.background()
|
||||
|
||||
# 感谢文字
|
||||
title = slide.shapes.add_textbox(Inches(0.8), Inches(3.3), Inches(11.7), Inches(1.0))
|
||||
tf = title.text_frame
|
||||
tf.paragraphs[0].text = "感谢聆听"
|
||||
tf.paragraphs[0].font.size = Pt(56)
|
||||
tf.paragraphs[0].font.bold = True
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['white']
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 副标题
|
||||
sub = slide.shapes.add_textbox(Inches(0.8), Inches(4.3), Inches(11.7), Inches(0.6))
|
||||
tf = sub.text_frame
|
||||
tf.paragraphs[0].text = "期待与贵校携手，共建教师发展新生态"
|
||||
tf.paragraphs[0].font.size = Pt(20)
|
||||
tf.paragraphs[0].font.color.rgb = RGBColor(0xa5, 0xb4, 0xfc)
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 联系信息
|
||||
contact = slide.shapes.add_textbox(Inches(0.8), Inches(5.3), Inches(11.7), Inches(1.0))
|
||||
tf = contact.text_frame
|
||||
tf.paragraphs[0].text = "contact@example.com"
|
||||
tf.paragraphs[0].font.size = Pt(16)
|
||||
tf.paragraphs[0].font.color.rgb = RGBColor(0x8b, 0x95, 0xa5)
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
p2 = tf.add_paragraph()
|
||||
p2.text = "400-xxx-xxxx"
|
||||
p2.font.size = Pt(16)
|
||||
p2.font.color.rgb = RGBColor(0x8b, 0x95, 0xa5)
|
||||
p2.alignment = PP_ALIGN.CENTER
|
||||
|
||||
return slide
|
||||
|
||||
|
||||
def build_presentation():
|
||||
"""构建完整演示文稿"""
|
||||
prs = create_presentation()
|
||||
|
||||
# 1. 封面
|
||||
add_cover_slide(prs)
|
||||
|
||||
# 2. 目录页
|
||||
slide = add_content_slide(prs, "目录", icon_color=COLORS['primary'])
|
||||
|
||||
toc_items = [
|
||||
"01 项目背景与痛点分析",
|
||||
"02 解决方案概述",
|
||||
"03 核心框架：五维胜任力模型",
|
||||
"04 数据采集体系",
|
||||
"05 AI 赋能：智能分析与个性化推荐",
|
||||
"06 实施路径与预期成果"
|
||||
]
|
||||
add_bullet_list(slide, toc_items, 1.0, 1.5, 11.0, 5.0, font_size=22, color=COLORS['text'])
|
||||
|
||||
# ===== 第一章：项目背景 =====
|
||||
add_section_slide(prs, 1, "项目背景与痛点分析", "行业现状与核心挑战")
|
||||
|
||||
# 痛点分析
|
||||
slide = add_content_slide(prs, "行业痛点分析", icon_color=COLORS['danger'])
|
||||
|
||||
pain_points = [
|
||||
("评估主观化", "缺乏客观数据支撑，评价结果公信力不足"),
|
||||
("数据孤岛", "教学数据、评估数据、成长数据分散在多个系统"),
|
||||
("培训低效", "培训资源投入大但效果难以量化，提升针对性弱"),
|
||||
("人才流失", "优秀教师识别困难，缺乏有效激励与发展通道"),
|
||||
]
|
||||
|
||||
for i, (title, desc) in enumerate(pain_points):
|
||||
col = i % 2
|
||||
row = i // 2
|
||||
add_card(slide, 0.5 + col * 6.3, 1.3 + row * 2.8, 5.8, 2.4, title, desc, COLORS['danger'])
|
||||
|
||||
# 解决方案概述
|
||||
slide = add_content_slide(prs, "解决方案概述", icon_color=COLORS['primary'])
|
||||
|
||||
solutions = [
|
||||
("五维胜任力模型", "科学的教师能力评估标准体系", COLORS['primary']),
|
||||
("数字化管理平台", "教师端 + 管理者端双端联动", COLORS['secondary']),
|
||||
("AI 智能分析", "自动化评估、个性化发展建议", COLORS['accent']),
|
||||
("数据驱动决策", "管理驾驶舱、人才四象限热力图", COLORS['warning']),
|
||||
]
|
||||
|
||||
for i, (title, desc, color) in enumerate(solutions):
|
||||
add_card(slide, 0.5 + i * 3.1, 1.3, 2.9, 1.8, title, desc, color)
|
||||
|
||||
# 核心价值
|
||||
slide = add_content_slide(prs, "核心价值主张", icon_color=COLORS['secondary'])
|
||||
|
||||
values = [
|
||||
("科学化", "基于胜任力模型的标准化评估体系", COLORS['primary']),
|
||||
("智能化", "AI 赋能评估、分析、推荐全流程", COLORS['secondary']),
|
||||
("可视化", "数据看板驱动管理决策", COLORS['warning']),
|
||||
("个性化", "差异化岗位配置与成长路径", COLORS['accent']),
|
||||
]
|
||||
|
||||
for i, (title, desc, color) in enumerate(values):
|
||||
add_card(slide, 0.5 + i * 3.1, 1.3, 2.9, 2.0, title, desc, color)
|
||||
|
||||
# 产品截图页
|
||||
add_image_slide(
|
||||
prs, "管理者端：管理驾驶舱",
|
||||
os.path.join(BASE_DIR, "管理驾驶舱.png"),
|
||||
"实时掌握全校教师能力分布、胜任力热力图、人才四象限",
|
||||
COLORS['primary']
|
||||
)
|
||||
|
||||
# ===== 第二章：核心框架 =====
|
||||
add_section_slide(prs, 2, "核心框架", "五维胜任力 + 教学成果模型")
|
||||
|
||||
# 五维胜任力
|
||||
slide = add_content_slide(prs, "五维胜任力模型", icon_color=COLORS['primary'])
|
||||
|
||||
competencies = [
|
||||
("1", "专业知识的深度与广度", "学科知识体系、跨学科整合、前沿动态关注", COLORS['primary']),
|
||||
("2", "教学设计与实施能力", "教案设计、课堂管理、教学方法、反思改进", COLORS['secondary']),
|
||||
("3", "协作沟通与家校共育", "同事协作、师生关系、家校沟通、团队贡献", COLORS['accent']),
|
||||
("4", "数字技术应用能力", "信息化工具、多媒体制作、学情分析、线上教学", COLORS['warning']),
|
||||
("5", "持续发展与自我成长", "职业规划、学习培训、教研成果、经验总结", COLORS['danger']),
|
||||
]
|
||||
|
||||
for i, (num, title, desc, color) in enumerate(competencies):
|
||||
col = i % 5
|
||||
add_card(slide, 0.3 + col * 2.5, 1.3, 2.3, 2.2, f"维度{num}: {title}", desc, color)
|
||||
|
||||
# 能力画像
|
||||
add_image_slide(
|
||||
prs, "教师端：讲师能力画像",
|
||||
os.path.join(BASE_DIR, "讲师能力画像.png"),
|
||||
"五维胜任力雷达图，直观展示个人能力分布与成长方向",
|
||||
COLORS['accent']
|
||||
)
|
||||
|
||||
# 教学成果颗粒化管理
|
||||
slide = add_content_slide(prs, "教学成果颗粒化管理", icon_color=COLORS['danger'])
|
||||
|
||||
# 左侧：成果数据分层
|
||||
add_card(slide, 0.5, 1.3, 5.8, 5.5, "成果数据分层",
|
||||
"• 数量维度：课时量 | 任务量 | 产出量\n"
|
||||
"• 质量维度：学业成果 | 课堂质量 | 教研质量\n"
|
||||
"• 效率维度：进步幅度 | 投入产出比", COLORS['primary'])
|
||||
|
||||
# 右侧：教学流程
|
||||
add_card(slide, 6.8, 1.3, 5.8, 5.5, "全链路数据采集",
|
||||
"• 备课：课件时长、原创度\n"
|
||||
"• 授课：出勤率、互动频次\n"
|
||||
"• 作业：布置量、难度系数\n"
|
||||
"• 批改：及时率、评语率\n"
|
||||
"• 反馈：满意度、督课分\n"
|
||||
"• 考核：区分度、信效度", COLORS['secondary'])
|
||||
|
||||
# 量化公式
|
||||
slide = add_content_slide(prs, "教学成果量化公式", icon_color=COLORS['accent'])
|
||||
|
||||
formula_box = slide.shapes.add_textbox(Inches(1.0), Inches(2.0), Inches(11.0), Inches(1.5))
|
||||
tf = formula_box.text_frame
|
||||
tf.paragraphs[0].text = "综合分 = Σ(颗粒指标 × 权重) × 岗位系数"
|
||||
tf.paragraphs[0].font.size = Pt(32)
|
||||
tf.paragraphs[0].font.bold = True
|
||||
tf.paragraphs[0].font.color.rgb = COLORS['primary']
|
||||
tf.paragraphs[0].alignment = PP_ALIGN.CENTER
|
||||
|
||||
# 权重示例
|
||||
weights = [
|
||||
("学业进步率", "35%", COLORS['primary']),
|
||||
("课堂满意度", "25%", COLORS['secondary']),
|
||||
("作业批改质量", "20%", COLORS['accent']),
|
||||
("教研产出", "10%", COLORS['warning']),
|
||||
("数字工具使用", "10%", COLORS['danger']),
|
||||
]
|
||||
|
||||
for i, (name, pct, color) in enumerate(weights):
|
||||
add_card(slide, 0.5 + i * 2.5, 3.5, 2.3, 1.5, name, pct, color)
|
||||
|
||||
# 岗位差异化配置
|
||||
slide = add_content_slide(prs, "岗位差异化配置", icon_color=COLORS['warning'])
|
||||
|
||||
roles = [
|
||||
("学科教师", "教学力 60%", "学科专业发展路径", "所教班级成绩进步率", COLORS['primary']),
|
||||
("班主任", "协作力 50%", "家校沟通看板", "班级学生满意度", COLORS['secondary']),
|
||||
("年级组长", "发展力 40%", "团队数据分析", "年级整体进步率", COLORS['accent']),
|
||||
("教务主任", "五维均衡", "全校胜任力热力图", "学校教学成果汇总", COLORS['warning']),
|
||||
]
|
||||
|
||||
for i, (role, weight, feature, metric, color) in enumerate(roles):
|
||||
add_card(slide, 0.4 + i * 3.15, 1.3, 3.0, 5.0, role,
|
||||
f"胜任力权重: {weight}\n\n特色功能: {feature}\n\n核心成果指标: {metric}", color)
|
||||
|
||||
# ===== 第三章：数据采集 =====
|
||||
add_section_slide(prs, 3, "数据采集", "多维度数据来源设计")
|
||||
|
||||
# 数据采集体系
|
||||
slide = add_content_slide(prs, "数据采集体系", icon_color=COLORS['warning'])
|
||||
|
||||
# 数据源权重
|
||||
weights_data = [
|
||||
("自评", "30%", COLORS['primary']),
|
||||
("上级评价", "30%", COLORS['secondary']),
|
||||
("同僚互评", "20%", COLORS['accent']),
|
||||
("学生反馈", "20%", COLORS['warning']),
|
||||
]
|
||||
|
||||
for i, (name, pct, color) in enumerate(weights_data):
|
||||
add_card(slide, 0.5 + i * 3.1, 1.3, 2.9, 1.5, name, pct, color)
|
||||
|
||||
# 采集流程
|
||||
flow_items = [
|
||||
("自评", "10-15分钟", COLORS['primary']),
|
||||
("互评", "5-8分钟/人", COLORS['secondary']),
|
||||
("上级", "8-10分钟", COLORS['accent']),
|
||||
("学生", "3-5分钟", COLORS['warning']),
|
||||
]
|
||||
|
||||
for i, (name, time, color) in enumerate(flow_items):
|
||||
add_card(slide, 0.5 + i * 3.1, 3.2, 2.9, 1.5, name, time, color)
|
||||
|
||||
# ===== 第四章：AI赋能 =====
|
||||
add_section_slide(prs, 4, "AI 赋能", "智能分析与个性化推荐")
|
||||
|
||||
# AI智能分析
|
||||
slide = add_content_slide(prs, "AI 智能分析", icon_color=COLORS['accent'])
|
||||
|
||||
ai_features = [
|
||||
("权重计算", COLORS['primary']),
|
||||
("离群检测", COLORS['secondary']),
|
||||
("趋势分析", COLORS['accent']),
|
||||
("个性化推荐", COLORS['warning']),
|
||||
]
|
||||
|
||||
for i, (name, color) in enumerate(ai_features):
|
||||
add_card(slide, 0.5 + i * 3.1, 1.3, 2.9, 1.5, name, "", color)
|
||||
|
||||
# 个性化建议
|
||||
add_card(slide, 0.5, 3.2, 12.3, 3.0, "个性化发展建议",
|
||||
"短板识别：协作沟通 -15% | 家校互动不足\n"
|
||||
"推荐方案：高效家校沟通课 + 跨学科教研小组\n"
|
||||
"学习资源：3个视频课程 + 2篇案例", COLORS['secondary'])
|
||||
|
||||
# 能力-成果关联
|
||||
slide = add_content_slide(prs, "能力-成果关联矩阵", icon_color=COLORS['primary'])
|
||||
|
||||
matrix = [
|
||||
("能力强+成果好", "高潜教师 · 标杆培养", COLORS['primary']),
|
||||
("能力强+成果差", "待挖掘 · 潜力未发", COLORS['warning']),
|
||||
("能力弱+成果好", "经验型 · 补强理论", COLORS['secondary']),
|
||||
("能力弱+成果差", "待提升 · 重点帮扶", COLORS['danger']),
|
||||
]
|
||||
|
||||
for i, (quadrant, desc, color) in enumerate(matrix):
|
||||
add_card(slide, 0.5 + (i % 2) * 6.3, 1.3 + (i // 2) * 2.8, 5.8, 2.4, quadrant, desc, color)
|
||||
|
||||
# AI智能建议截图
|
||||
add_image_slide(
|
||||
prs, "教师端：AI 智能建议",
|
||||
os.path.join(BASE_DIR, "教师AI建议.png"),
|
||||
"AI 个性化发展建议，智能识别短板并推荐学习资源",
|
||||
COLORS['accent']
|
||||
)
|
||||
|
||||
# 个人发展计划截图
|
||||
add_image_slide(
|
||||
prs, "教师端：个人发展计划",
|
||||
os.path.join(BASE_DIR, "教师个人发展.png"),
|
||||
"PDP 个人发展计划，可视化成长轨迹与阶段性目标",
|
||||
COLORS['secondary']
|
||||
)
|
||||
|
||||
# ===== 第五章：实施路径 =====
|
||||
add_section_slide(prs, 5, "实施路径与预期成果", "落地步骤与价值实现")
|
||||
|
||||
# 实施时间表
|
||||
slide = add_content_slide(prs, "实施时间表", icon_color=COLORS['secondary'])
|
||||
|
||||
phases = [
|
||||
("第一阶段（第1-2周）", "启动准备", "需求调研、岗位梳理、胜任力模型定制", COLORS['primary']),
|
||||
("第二阶段（第3-4周）", "系统部署", "平台搭建、数据迁移、权限配置", COLORS['secondary']),
|
||||
("第三阶段（第5-6周）", "培训推广", "管理员培训、教师培训、试运行", COLORS['accent']),
|
||||
("第四阶段（第7-8周）", "正式上线", "学期初评估、持续追踪、效果优化", COLORS['warning']),
|
||||
]
|
||||
|
||||
for i, (phase, title, desc, color) in enumerate(phases):
|
||||
add_card(slide, 0.4 + i * 3.15, 1.3, 3.0, 2.5, f"{phase}\n{title}", desc, color)
|
||||
|
||||
# 持续运营
|
||||
add_card(slide, 0.4, 4.2, 12.5, 1.8, "持续运营",
|
||||
"数据积累：每学期评估、年度分析、持续改进", COLORS['secondary'])
|
||||
|
||||
# 预期成果
|
||||
slide = add_content_slide(prs, "预期成果", icon_color=COLORS['primary'])
|
||||
|
||||
results = [
|
||||
("85%", "评估覆盖率", "全校教师能力评估全覆盖", COLORS['primary']),
|
||||
("30%", "培训效率提升", "精准培训减少无效投入", COLORS['secondary']),
|
||||
("50%", "人才识别率", "更精准发现高潜教师", COLORS['accent']),
|
||||
]
|
||||
|
||||
for i, (num, title, desc, color) in enumerate(results):
|
||||
add_card(slide, 0.5 + i * 4.1, 1.3, 3.8, 2.5, f"{num}\n{title}", desc, color)
|
||||
|
||||
# 产品功能
|
||||
slide = add_content_slide(prs, "产品功能", icon_color=COLORS['accent'])
|
||||
|
||||
add_card(slide, 0.5, 1.3, 5.8, 2.5, "教师端",
|
||||
"• 五维能力雷达图\n• AI 个性化建议\n• 个人发展计划(PDP)", COLORS['primary'])
|
||||
|
||||
add_card(slide, 6.8, 1.3, 5.8, 2.5, "管理者端",
|
||||
"• 管理驾驶舱\n• 胜任力热力图\n• 人才四象限", COLORS['secondary'])
|
||||
|
||||
# 合作方式
|
||||
add_card(slide, 0.5, 4.2, 12.3, 2.0, "合作方式",
|
||||
"Demo演示（免费） | 试点项目（定制报价） | 全校部署（年度授权）", COLORS['accent'])
|
||||
|
||||
# CTA
|
||||
add_cta_slide(prs)
|
||||
|
||||
# 感谢页
|
||||
add_thanks_slide(prs)
|
||||
|
||||
# 保存
|
||||
prs.save(OUTPUT_PATH)
|
||||
print(f"PPT 已生成: {OUTPUT_PATH}")
|
||||
return OUTPUT_PATH
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
build_presentation()
|
||||
Generated
+346
@@ -0,0 +1,346 @@
|
||||
{
|
||||
"name": "k12com",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "k12com",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"puppeteer": "^25.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@puppeteer/browsers": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-3.0.4.tgz",
|
||||
"integrity": "sha512-HGM8iAmGTf+Y7t0373szVbTmt3d7vPkYL/1bpOkOFO0YUYLgSeuYBCzESklogNPvOBnZ/MRD5f07OkpqH1trtA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"modern-tar": "^0.7.6",
|
||||
"yargs": "^17.7.2"
|
||||
},
|
||||
"bin": {
|
||||
"browsers": "lib/main-cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=22.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"proxy-agent": ">=8.0.1"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"proxy-agent": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/chromium-bidi": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-16.0.1.tgz",
|
||||
"integrity": "sha512-J63PGu/9PpeCwLIcKYyzWP6yaVL5pxuBc0shlYCYM8BaAkmlwiQboXO1iNbOgSDbVklEyYFfNEcHD8oOAWacUA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"mitt": "^3.0.1",
|
||||
"zod": "^3.24.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.19.0 <22.0.0 || >=22.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"devtools-protocol": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/cliui": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
|
||||
"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"string-width": "^4.2.0",
|
||||
"strip-ansi": "^6.0.1",
|
||||
"wrap-ansi": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/devtools-protocol": {
|
||||
"version": "0.0.1624250",
|
||||
"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1624250.tgz",
|
||||
"integrity": "sha512-YFAat/lOiIk0ARmBweG+ygrEcbZrq5B9urRyUoeQKp53MlidHXE2TmTbxKcaXoQj7u/aX+jebDO4BW55rs0WwA==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||
"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/get-caller-file": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
|
||||
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": "6.* || 8.* || >= 10.*"
|
||||
}
|
||||
},
|
||||
"node_modules/is-fullwidth-code-point": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
||||
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/lilconfig": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
||||
"integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antonk52"
|
||||
}
|
||||
},
|
||||
"node_modules/mitt": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
|
||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/modern-tar": {
|
||||
"version": "0.7.6",
|
||||
"resolved": "https://registry.npmjs.org/modern-tar/-/modern-tar-0.7.6.tgz",
|
||||
"integrity": "sha512-sweCIVXzx1aIGTCdzcMlSZt1h8k5Tmk08VNAuRk3IU28XamGiOH5ypi11g6De2CH7PhYqSSnGy2A/EFhbWnVKg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/puppeteer": {
|
||||
"version": "25.1.0",
|
||||
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-25.1.0.tgz",
|
||||
"integrity": "sha512-7L6/0JM7XStK99lIL4xQySyNEXNfII6pk0BxkI5kKBTOhR7AsoQiv067YTsE/rIXxQiq9ajlO4WcqBjS/FWK1A==",
|
||||
"hasInstallScript": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@puppeteer/browsers": "3.0.4",
|
||||
"chromium-bidi": "16.0.1",
|
||||
"devtools-protocol": "0.0.1624250",
|
||||
"lilconfig": "^3.1.3",
|
||||
"puppeteer-core": "25.1.0",
|
||||
"typed-query-selector": "^2.12.2"
|
||||
},
|
||||
"bin": {
|
||||
"puppeteer": "lib/puppeteer/node/cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/puppeteer-core": {
|
||||
"version": "25.1.0",
|
||||
"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-25.1.0.tgz",
|
||||
"integrity": "sha512-jKzy5y4WG6uNuFbTWgW1D7mqoT9o0nllc/6a1DGF775T1mPmgw3scdFEtEq67yVFikavQmbYq6NLfbTfxHSlqQ==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@puppeteer/browsers": "3.0.4",
|
||||
"chromium-bidi": "16.0.1",
|
||||
"devtools-protocol": "0.0.1624250",
|
||||
"typed-query-selector": "^2.12.2",
|
||||
"webdriver-bidi-protocol": "0.4.2",
|
||||
"ws": "^8.21.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/require-directory": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string-width": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/strip-ansi": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/typed-query-selector": {
|
||||
"version": "2.12.2",
|
||||
"resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.2.tgz",
|
||||
"integrity": "sha512-EOPFbyIub4ngnEdqi2yOcNeDLaX/0jcE1JoAXQDDMIthap7FoN795lc/SHfIq2d416VufXpM8z/lD+WRm2gfOQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/webdriver-bidi-protocol": {
|
||||
"version": "0.4.2",
|
||||
"resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.4.2.tgz",
|
||||
"integrity": "sha512-VSV+fzfChirL3e7jay2yUC7B4HQCGtEWEg/MSSQbK+qWbqeGlRLlXTzPpYr3XGUvbpDHumWZBJxgesg4N7dbtA==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/wrap-ansi": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
|
||||
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
"strip-ansi": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.21.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
|
||||
"integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/y18n": {
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
||||
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs": {
|
||||
"version": "17.7.2",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
|
||||
"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cliui": "^8.0.1",
|
||||
"escalade": "^3.1.1",
|
||||
"get-caller-file": "^2.0.5",
|
||||
"require-directory": "^2.1.1",
|
||||
"string-width": "^4.2.3",
|
||||
"y18n": "^5.0.5",
|
||||
"yargs-parser": "^21.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs-parser": {
|
||||
"version": "21.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
|
||||
"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/zod": {
|
||||
"version": "3.25.76",
|
||||
"resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
|
||||
"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "k12com",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"type": "commonjs",
|
||||
"dependencies": {
|
||||
"puppeteer": "^25.1.0"
|
||||
}
|
||||
}
|
||||
+1204
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,680 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>教师胜任力评估/自驱发展 - K12C</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
||||
background: transparent;
|
||||
min-height: 100vh;
|
||||
color: #1e293b;
|
||||
}
|
||||
.page { padding: 24px; min-height: 100vh; }
|
||||
|
||||
/* 顶部导航 */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px 24px;
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 40px; height: 40px;
|
||||
background: linear-gradient(135deg, #7c3aed, #2563eb);
|
||||
border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #fff; font-size: 18px;
|
||||
}
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.nav-tab {
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.nav-tab:hover { background: #f1f5f9; }
|
||||
.nav-tab.active {
|
||||
background: #7c3aed;
|
||||
color: #fff;
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.user-avatar {
|
||||
width: 40px; height: 40px;
|
||||
background: linear-gradient(135deg, #059669, #10b981);
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #fff; font-weight: 600;
|
||||
}
|
||||
|
||||
/* 主内容布局 */
|
||||
.main-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 400px 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 左侧：雷达图 */
|
||||
.profile-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 64px; height: 64px;
|
||||
background: linear-gradient(135deg, #7c3aed, #2563eb);
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #fff; font-size: 24px; font-weight: 700;
|
||||
}
|
||||
.profile-info h2 { font-size: 20px; margin-bottom: 4px; }
|
||||
.profile-info p { font-size: 14px; color: #64748b; }
|
||||
.profile-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: #f5f3ff;
|
||||
color: #7c3aed;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.overall-score {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #7c3aed, #2563eb);
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.overall-score .value { font-size: 48px; font-weight: 700; }
|
||||
.overall-score .label { font-size: 14px; opacity: 0.9; }
|
||||
.overall-score .trend {
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 20px;
|
||||
margin-top: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
.radar-container {
|
||||
position: relative;
|
||||
height: 280px;
|
||||
}
|
||||
.dimension-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.dimension-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
.dimension-item:last-child { border-bottom: none; }
|
||||
.dimension-icon {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.dimension-info { flex: 1; }
|
||||
.dimension-name { font-weight: 500; font-size: 14px; }
|
||||
.dimension-desc { font-size: 11px; color: #64748b; }
|
||||
.dimension-score {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.dimension-bar {
|
||||
width: 60px;
|
||||
height: 6px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.dimension-bar-fill { height: 100%; border-radius: 3px; }
|
||||
|
||||
/* 右侧内容 */
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* AI 建议卡片 */
|
||||
.ai-card {
|
||||
background: linear-gradient(135deg, #7c3aed, #2563eb);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ai-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%; right: -20%;
|
||||
width: 300px; height: 300px;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ai-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ai-icon {
|
||||
width: 44px; height: 44px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.ai-title { font-size: 18px; font-weight: 600; }
|
||||
.ai-subtitle { font-size: 12px; opacity: 0.8; }
|
||||
.ai-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.ai-section {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
.ai-section-title {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.ai-section-title i { font-size: 14px; }
|
||||
.ai-section-content { font-size: 14px; line-height: 1.6; }
|
||||
.weakness-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: rgba(239, 68, 68, 0.3);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
margin: 2px;
|
||||
}
|
||||
.resource-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.resource-item i { color: #10b981; }
|
||||
|
||||
/* 个人发展计划 */
|
||||
.pdp-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.pdp-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.pdp-title { font-size: 18px; font-weight: 600; }
|
||||
.pdp-btn {
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(135deg, #059669, #10b981);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px; top: 0; bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(180deg, #7c3aed, #059669);
|
||||
}
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.timeline-item:last-child { padding-bottom: 0; }
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -24px; top: 4px;
|
||||
width: 14px; height: 14px;
|
||||
background: #7c3aed;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 0 0 2px #7c3aed;
|
||||
}
|
||||
.timeline-item.completed .timeline-dot { background: #059669; box-shadow: 0 0 0 2px #059669; }
|
||||
.timeline-item.current .timeline-dot {
|
||||
background: #7c3aed;
|
||||
box-shadow: 0 0 0 2px #7c3aed, 0 0 10px rgba(124, 58, 237, 0.5);
|
||||
}
|
||||
.timeline-content {
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
.timeline-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.timeline-phase { font-weight: 600; font-size: 14px; }
|
||||
.timeline-status {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.timeline-status.completed { background: #ecfdf5; color: #059669; }
|
||||
.timeline-status.current { background: #f5f3ff; color: #7c3aed; }
|
||||
.timeline-status.pending { background: #f1f5f9; color: #64748b; }
|
||||
.timeline-desc { font-size: 13px; color: #64748b; margin-bottom: 12px; }
|
||||
.timeline-goals {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.goal-tag {
|
||||
padding: 4px 10px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.timeline-progress {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-fill { height: 100%; border-radius: 3px; }
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 评估周期 */
|
||||
.eval-section {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.eval-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.eval-item {
|
||||
text-align: center;
|
||||
padding: 20px 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.eval-item:hover { border-color: #7c3aed; }
|
||||
.eval-item.active { border-color: #7c3aed; background: #f5f3ff; }
|
||||
.eval-icon { font-size: 24px; margin-bottom: 8px; }
|
||||
.eval-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
|
||||
.eval-score { font-size: 20px; font-weight: 700; color: #7c3aed; }
|
||||
.eval-date { font-size: 11px; color: #64748b; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<div class="logo-icon"><i class="fas fa-user-circle"></i></div>
|
||||
<div>
|
||||
<div style="font-weight:600;">教师能力发展</div>
|
||||
<div style="font-size:12px;color:#64748b;">K12C 胜任力管理平台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-tabs">
|
||||
<div class="nav-tab active"><i class="fas fa-chart-pie"></i> 能力画像</div>
|
||||
<div class="nav-tab"><i class="fas fa-lightbulb"></i> AI 建议</div>
|
||||
<div class="nav-tab"><i class="fas fa-route"></i> 发展计划</div>
|
||||
<div class="nav-tab"><i class="fas fa-clipboard-check"></i> 评估记录</div>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div style="text-align:right;">
|
||||
<div style="font-weight:600;">王小明</div>
|
||||
<div style="font-size:12px;color:#64748b;">高一(1)班 语文教师</div>
|
||||
</div>
|
||||
<div class="user-avatar">王</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main-layout">
|
||||
<!-- 左侧：能力画像 -->
|
||||
<div class="profile-card">
|
||||
<div class="profile-header">
|
||||
<div class="profile-avatar">王</div>
|
||||
<div class="profile-info">
|
||||
<h2>王小明</h2>
|
||||
<p>高一(1)班 语文教师</p>
|
||||
<span class="profile-badge">学科教师</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overall-score">
|
||||
<div class="value">86.5</div>
|
||||
<div class="label">综合胜任力得分</div>
|
||||
<div class="trend"><i class="fas fa-arrow-up"></i> 较上期 +5.2</div>
|
||||
</div>
|
||||
|
||||
<div class="radar-container">
|
||||
<canvas id="competencyRadar"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="dimension-list">
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-icon" style="background:#eff6ff;color:#2563eb;"><i class="fas fa-book"></i></div>
|
||||
<div class="dimension-info">
|
||||
<div class="dimension-name">专业知识</div>
|
||||
<div class="dimension-desc">学科知识体系、跨学科整合</div>
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
<div class="dimension-score" style="color:#2563eb;">92</div>
|
||||
<div class="dimension-bar"><div class="dimension-bar-fill" style="width:92%;background:#2563eb;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-icon" style="background:#ecfdf5;color:#059669;"><i class="fas fa-chalkboard-teacher"></i></div>
|
||||
<div class="dimension-info">
|
||||
<div class="dimension-name">教学设计</div>
|
||||
<div class="dimension-desc">教案设计、课堂管理、方法</div>
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
<div class="dimension-score" style="color:#059669;">88</div>
|
||||
<div class="dimension-bar"><div class="dimension-bar-fill" style="width:88%;background:#059669;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-icon" style="background:#fef3c7;color:#f59e0b;"><i class="fas fa-comments"></i></div>
|
||||
<div class="dimension-info">
|
||||
<div class="dimension-name">协作沟通</div>
|
||||
<div class="dimension-desc">同事协作、家校沟通</div>
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
<div class="dimension-score" style="color:#f59e0b;">78</div>
|
||||
<div class="dimension-bar"><div class="dimension-bar-fill" style="width:78%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-icon" style="background:#f5f3ff;color:#7c3aed;"><i class="fas fa-laptop"></i></div>
|
||||
<div class="dimension-info">
|
||||
<div class="dimension-name">数字技术</div>
|
||||
<div class="dimension-desc">信息化工具、多媒体制作</div>
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
<div class="dimension-score" style="color:#7c3aed;">85</div>
|
||||
<div class="dimension-bar"><div class="dimension-bar-fill" style="width:85%;background:#7c3aed;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-icon" style="background:#fce7f3;color:#ec4899;"><i class="fas fa-seedling"></i></div>
|
||||
<div class="dimension-info">
|
||||
<div class="dimension-name">持续发展</div>
|
||||
<div class="dimension-desc">职业规划、学习培训</div>
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
<div class="dimension-score" style="color:#ec4899;">82</div>
|
||||
<div class="dimension-bar"><div class="dimension-bar-fill" style="width:82%;background:#ec4899;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容 -->
|
||||
<div class="right-panel">
|
||||
<!-- AI 智能建议 -->
|
||||
<div class="ai-card">
|
||||
<div class="ai-header">
|
||||
<div class="ai-icon"><i class="fas fa-robot"></i></div>
|
||||
<div>
|
||||
<div class="ai-title">AI 个性化发展建议</div>
|
||||
<div class="ai-subtitle">基于您的能力画像智能分析</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ai-content">
|
||||
<div class="ai-section">
|
||||
<div class="ai-section-title"><i class="fas fa-exclamation-circle"></i> 识别短板</div>
|
||||
<div class="ai-section-content">
|
||||
<span class="weakness-tag">协作沟通 -12%</span>
|
||||
<span class="weakness-tag">家校互动不足</span>
|
||||
<span class="weakness-tag">家长会参与度低</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ai-section">
|
||||
<div class="ai-section-title"><i class="fas fa-graduation-cap"></i> 推荐方案</div>
|
||||
<div class="ai-section-content">
|
||||
<div class="resource-item"><i class="fas fa-play-circle"></i> 高效家校沟通技巧课</div>
|
||||
<div class="resource-item"><i class="fas fa-play-circle"></i> 跨学科教研小组参与</div>
|
||||
<div class="resource-item"><i class="fas fa-play-circle"></i> 班主任经验分享会</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ai-section">
|
||||
<div class="ai-section-title"><i class="fas fa-book-open"></i> 学习资源</div>
|
||||
<div class="ai-section-content">
|
||||
<div class="resource-item"><i class="fas fa-video"></i> 3 个视频课程</div>
|
||||
<div class="resource-item"><i class="fas fa-file-alt"></i> 2 篇优秀案例</div>
|
||||
<div class="resource-item"><i class="fas fa-users"></i> 1 场线下工作坊</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人发展计划 -->
|
||||
<div class="pdp-card">
|
||||
<div class="pdp-header">
|
||||
<span class="pdp-title"><i class="fas fa-route" style="color:#7c3aed;margin-right:8px;"></i>个人发展计划</span>
|
||||
<button class="pdp-btn"><i class="fas fa-plus"></i> 创建新计划</button>
|
||||
</div>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item completed">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-phase">第一阶段：基础夯实</span>
|
||||
<span class="timeline-status completed">已完成</span>
|
||||
</div>
|
||||
<div class="timeline-desc">完成学科知识体系梳理，参加校内教研活动 3 次</div>
|
||||
<div class="timeline-goals">
|
||||
<span class="goal-tag">专业知识 +8</span>
|
||||
<span class="goal-tag">教研参与 3 次</span>
|
||||
<span class="goal-tag">教案优化 5 份</span>
|
||||
</div>
|
||||
<div class="timeline-progress">
|
||||
<div class="progress-bar"><div class="progress-fill" style="width:100%;background:#059669;"></div></div>
|
||||
<div class="progress-label"><span>完成时间：2024-01</span><span>100%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item current">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-phase">第二阶段：能力提升</span>
|
||||
<span class="timeline-status current">进行中</span>
|
||||
</div>
|
||||
<div class="timeline-desc">提升协作沟通能力，参加家校沟通培训，完成跨学科教研</div>
|
||||
<div class="timeline-goals">
|
||||
<span class="goal-tag">协作沟通 +10</span>
|
||||
<span class="goal-tag">家校培训 2 次</span>
|
||||
<span class="goal-tag">教研分享 1 次</span>
|
||||
</div>
|
||||
<div class="timeline-progress">
|
||||
<div class="progress-bar"><div class="progress-fill" style="width:65%;background:#7c3aed;"></div></div>
|
||||
<div class="progress-label"><span>进行中：第 4 周 / 共 8 周</span><span>65%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-phase">第三阶段：成果展示</span>
|
||||
<span class="timeline-status pending">待开始</span>
|
||||
</div>
|
||||
<div class="timeline-desc">总结提升成果，进行校级公开课展示，分享经验</div>
|
||||
<div class="timeline-goals">
|
||||
<span class="goal-tag">校级公开课</span>
|
||||
<span class="goal-tag">经验分享</span>
|
||||
<span class="goal-tag">成果总结</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评估周期 -->
|
||||
<div class="eval-section">
|
||||
<div class="pdp-header">
|
||||
<span class="pdp-title"><i class="fas fa-history" style="color:#2563eb;margin-right:8px;"></i>评估历史</span>
|
||||
</div>
|
||||
<div class="eval-grid">
|
||||
<div class="eval-item active">
|
||||
<div class="eval-icon" style="color:#7c3aed;"><i class="fas fa-star"></i></div>
|
||||
<div class="eval-name">本期评估</div>
|
||||
<div class="eval-score">86.5</div>
|
||||
<div class="eval-date">2024-03</div>
|
||||
</div>
|
||||
<div class="eval-item">
|
||||
<div class="eval-icon" style="color:#64748b;"><i class="fas fa-clock"></i></div>
|
||||
<div class="eval-name">上期评估</div>
|
||||
<div class="eval-score" style="color:#64748b;">81.3</div>
|
||||
<div class="eval-date">2023-12</div>
|
||||
</div>
|
||||
<div class="eval-item">
|
||||
<div class="eval-icon" style="color:#64748b;"><i class="fas fa-clock"></i></div>
|
||||
<div class="eval-name">再上期</div>
|
||||
<div class="eval-score" style="color:#64748b;">78.6</div>
|
||||
<div class="eval-date">2023-09</div>
|
||||
</div>
|
||||
<div class="eval-item">
|
||||
<div class="eval-icon" style="color:#64748b;"><i class="fas fa-clock"></i></div>
|
||||
<div class="eval-name">初始评估</div>
|
||||
<div class="eval-score" style="color:#64748b;">72.0</div>
|
||||
<div class="eval-date">2023-06</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 五维胜任力雷达图
|
||||
const ctx = document.getElementById('competencyRadar').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ['专业知识', '教学设计', '协作沟通', '数字技术', '持续发展'],
|
||||
datasets: [{
|
||||
label: '我的得分',
|
||||
data: [92, 88, 78, 85, 82],
|
||||
backgroundColor: 'rgba(124, 58, 237, 0.2)',
|
||||
borderColor: '#7c3aed',
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#7c3aed',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 5
|
||||
}, {
|
||||
label: '全校平均',
|
||||
data: [85, 82, 80, 78, 75],
|
||||
backgroundColor: 'rgba(37, 99, 235, 0.1)',
|
||||
borderColor: '#2563eb',
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
pointBackgroundColor: '#2563eb',
|
||||
pointRadius: 4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: { usePointStyle: true, padding: 20, font: { size: 12 } }
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
ticks: { stepSize: 20, display: false },
|
||||
grid: { color: '#e2e8f0' },
|
||||
pointLabels: { font: { size: 12, weight: '500' }, color: '#475569' }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,591 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>管理驾驶舱 - K12C</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
||||
background: transparent;
|
||||
min-height: 100vh;
|
||||
color: #1e293b;
|
||||
}
|
||||
.dashboard {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px 24px;
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 40px; height: 40px;
|
||||
background: linear-gradient(135deg, #2563eb, #7c3aed);
|
||||
border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #fff; font-size: 18px;
|
||||
}
|
||||
.logo-text { font-weight: 700; font-size: 18px; color: #0f172a; }
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.user-avatar {
|
||||
width: 40px; height: 40px;
|
||||
background: linear-gradient(135deg, #059669, #10b981);
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #fff; font-weight: 600;
|
||||
}
|
||||
.user-name { font-weight: 500; }
|
||||
.user-role { font-size: 12px; color: #64748b; }
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.stat-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; height: 4px;
|
||||
}
|
||||
.stat-card.blue::before { background: linear-gradient(90deg, #2563eb, #3b82f6); }
|
||||
.stat-card.green::before { background: linear-gradient(90deg, #059669, #10b981); }
|
||||
.stat-card.purple::before { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
|
||||
.stat-card.orange::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
|
||||
|
||||
.stat-icon {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.stat-card.blue .stat-icon { background: #eff6ff; color: #2563eb; }
|
||||
.stat-card.green .stat-icon { background: #ecfdf5; color: #059669; }
|
||||
.stat-card.purple .stat-icon { background: #f5f3ff; color: #7c3aed; }
|
||||
.stat-card.orange .stat-icon { background: #fffbeb; color: #f59e0b; }
|
||||
|
||||
.stat-value { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
|
||||
.stat-label { font-size: 14px; color: #64748b; }
|
||||
.stat-change {
|
||||
position: absolute;
|
||||
top: 20px; right: 20px;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.stat-change.up { background: #ecfdf5; color: #059669; }
|
||||
.stat-change.down { background: #fef2f2; color: #ef4444; }
|
||||
|
||||
/* 主内容区 */
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 320px;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 图表卡片 */
|
||||
.chart-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card-title { font-weight: 600; font-size: 16px; color: #0f172a; }
|
||||
.card-badge {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* 胜任力分布图 */
|
||||
.competency-chart { height: 200px; }
|
||||
|
||||
/* 热力图 */
|
||||
.heatmap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.heatmap-cell {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.heatmap-cell:hover { transform: scale(1.05); }
|
||||
.heatmap-cell .level { font-size: 18px; font-weight: 700; color: #fff; }
|
||||
.heatmap-cell .label { font-size: 10px; color: rgba(255,255,255,0.8); }
|
||||
|
||||
/* 人才四象限 */
|
||||
.quadrant-chart {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 12px;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
}
|
||||
.quadrant {
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.quadrant::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8px; right: 8px;
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.quadrant.q1::before { background: #2563eb; }
|
||||
.quadrant.q2::before { background: #f59e0b; }
|
||||
.quadrant.q3::before { background: #059669; }
|
||||
.quadrant.q4::before { background: #ef4444; }
|
||||
|
||||
.quadrant-title { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
|
||||
.quadrant-count { font-size: 24px; font-weight: 700; }
|
||||
.quadrant-label { font-size: 11px; color: #64748b; }
|
||||
|
||||
/* 教师列表 */
|
||||
.teacher-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.teacher-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 8px;
|
||||
background: #f8fafc;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.teacher-item:hover { background: #f1f5f9; }
|
||||
.teacher-avatar {
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 600; color: #fff;
|
||||
}
|
||||
.teacher-info { flex: 1; }
|
||||
.teacher-name { font-weight: 600; font-size: 14px; }
|
||||
.teacher-subject { font-size: 12px; color: #64748b; }
|
||||
.teacher-score {
|
||||
text-align: right;
|
||||
}
|
||||
.score-value { font-size: 18px; font-weight: 700; }
|
||||
.score-label { font-size: 10px; color: #64748b; }
|
||||
|
||||
/* 底部趋势图 */
|
||||
.bottom-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* 雷达图容器 */
|
||||
.radar-section {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.radar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.radar-item {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.radar-item canvas { max-height: 100px; }
|
||||
.radar-label { font-size: 12px; color: #64748b; margin-top: 8px; }
|
||||
|
||||
/* 班级平均分 */
|
||||
.class-stats {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.class-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
.class-item:last-child { border-bottom: none; }
|
||||
.class-name { font-weight: 500; flex: 1; }
|
||||
.class-bar {
|
||||
flex: 2;
|
||||
height: 8px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.class-bar-fill { height: 100%; border-radius: 4px; }
|
||||
.class-score { font-weight: 600; min-width: 50px; text-align: right; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dashboard">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<div class="logo-icon"><i class="fas fa-graduation-cap"></i></div>
|
||||
<div>
|
||||
<div class="logo-text">管理驾驶舱</div>
|
||||
<div style="font-size:12px;color:#64748b;">K12C 教师胜任力管理平台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div style="text-align:right;">
|
||||
<div class="user-name">张明华</div>
|
||||
<div class="user-role">教务主任</div>
|
||||
</div>
|
||||
<div class="user-avatar">张</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card blue">
|
||||
<span class="stat-change up"><i class="fas fa-arrow-up"></i> +8</span>
|
||||
<div class="stat-icon"><i class="fas fa-users"></i></div>
|
||||
<div class="stat-value">128</div>
|
||||
<div class="stat-label">全校教师</div>
|
||||
</div>
|
||||
<div class="stat-card green">
|
||||
<span class="stat-change up"><i class="fas fa-arrow-up"></i> +12</span>
|
||||
<div class="stat-icon"><i class="fas fa-chart-line"></i></div>
|
||||
<div class="stat-value">85.6</div>
|
||||
<div class="stat-label">平均胜任力得分</div>
|
||||
</div>
|
||||
<div class="stat-card purple">
|
||||
<span class="stat-change up"><i class="fas fa-arrow-up"></i> +5</span>
|
||||
<div class="stat-icon"><i class="fas fa-star"></i></div>
|
||||
<div class="stat-value">23</div>
|
||||
<div class="stat-label">高潜教师</div>
|
||||
</div>
|
||||
<div class="stat-card orange">
|
||||
<span class="stat-change down"><i class="fas fa-arrow-down"></i> -3</span>
|
||||
<div class="stat-icon"><i class="fas fa-exclamation-triangle"></i></div>
|
||||
<div class="stat-value">12</div>
|
||||
<div class="stat-label">待提升教师</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main-grid">
|
||||
<!-- 胜任力分布 -->
|
||||
<div class="chart-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">五维胜任力分布</span>
|
||||
<span class="card-badge">本月数据</span>
|
||||
</div>
|
||||
<div class="competency-chart">
|
||||
<canvas id="competencyChart"></canvas>
|
||||
</div>
|
||||
<div class="heatmap">
|
||||
<div class="heatmap-cell" style="background:#2563eb;">
|
||||
<span class="level">92</span>
|
||||
<span class="label">专业知识</span>
|
||||
</div>
|
||||
<div class="heatmap-cell" style="background:#3b82f6;">
|
||||
<span class="level">88</span>
|
||||
<span class="label">教学设计</span>
|
||||
</div>
|
||||
<div class="heatmap-cell" style="background:#059669;">
|
||||
<span class="level">85</span>
|
||||
<span class="label">协作沟通</span>
|
||||
</div>
|
||||
<div class="heatmap-cell" style="background:#10b981;">
|
||||
<span class="level">82</span>
|
||||
<span class="label">数字技术</span>
|
||||
</div>
|
||||
<div class="heatmap-cell" style="background:#f59e0b;">
|
||||
<span class="level">78</span>
|
||||
<span class="label">持续发展</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 人才四象限 -->
|
||||
<div class="chart-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">人才四象限</span>
|
||||
<span class="card-badge">能力 × 成果</span>
|
||||
</div>
|
||||
<div class="quadrant-chart">
|
||||
<div class="quadrant q1">
|
||||
<div class="quadrant-title">高能力 + 高成果</div>
|
||||
<div class="quadrant-count" style="color:#2563eb;">32</div>
|
||||
<div class="quadrant-label">标杆教师 · 重点培养</div>
|
||||
</div>
|
||||
<div class="quadrant q2">
|
||||
<div class="quadrant-title">高能力 + 低成果</div>
|
||||
<div class="quadrant-count" style="color:#f59e0b;">18</div>
|
||||
<div class="quadrant-label">待挖掘 · 潜力未发</div>
|
||||
</div>
|
||||
<div class="quadrant q3">
|
||||
<div class="quadrant-title">低能力 + 高成果</div>
|
||||
<div class="quadrant-count" style="color:#059669;">28</div>
|
||||
<div class="quadrant-label">经验型 · 补强理论</div>
|
||||
</div>
|
||||
<div class="quadrant q4">
|
||||
<div class="quadrant-title">低能力 + 低成果</div>
|
||||
<div class="quadrant-count" style="color:#ef4444;">50</div>
|
||||
<div class="quadrant-label">待提升 · 重点帮扶</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TOP 教师列表 -->
|
||||
<div class="chart-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">TOP 优秀教师</span>
|
||||
<span class="card-badge">本月排名</span>
|
||||
</div>
|
||||
<div class="teacher-list">
|
||||
<div class="teacher-item">
|
||||
<div class="teacher-avatar" style="background:linear-gradient(135deg,#2563eb,#7c3aed);">李</div>
|
||||
<div class="teacher-info">
|
||||
<div class="teacher-name">李文静</div>
|
||||
<div class="teacher-subject">语文 · 高一(1)班</div>
|
||||
</div>
|
||||
<div class="teacher-score">
|
||||
<div class="score-value" style="color:#2563eb;">96.8</div>
|
||||
<div class="score-label">胜任力</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teacher-item">
|
||||
<div class="teacher-avatar" style="background:linear-gradient(135deg,#059669,#10b981);">王</div>
|
||||
<div class="teacher-info">
|
||||
<div class="teacher-name">王建国</div>
|
||||
<div class="teacher-subject">数学 · 高二(3)班</div>
|
||||
</div>
|
||||
<div class="teacher-score">
|
||||
<div class="score-value" style="color:#059669;">95.2</div>
|
||||
<div class="score-label">胜任力</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teacher-item">
|
||||
<div class="teacher-avatar" style="background:linear-gradient(135deg,#7c3aed,#8b5cf6);">陈</div>
|
||||
<div class="teacher-info">
|
||||
<div class="teacher-name">陈思琪</div>
|
||||
<div class="teacher-subject">英语 · 高一(2)班</div>
|
||||
</div>
|
||||
<div class="teacher-score">
|
||||
<div class="score-value" style="color:#7c3aed;">94.5</div>
|
||||
<div class="score-label">胜任力</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teacher-item">
|
||||
<div class="teacher-avatar" style="background:linear-gradient(135deg,#f59e0b,#fbbf24);">刘</div>
|
||||
<div class="teacher-info">
|
||||
<div class="teacher-name">刘明辉</div>
|
||||
<div class="teacher-subject">物理 · 高三(1)班</div>
|
||||
</div>
|
||||
<div class="teacher-score">
|
||||
<div class="score-value" style="color:#f59e0b;">93.8</div>
|
||||
<div class="score-label">胜任力</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teacher-item">
|
||||
<div class="teacher-avatar" style="background:linear-gradient(135deg,#ec4899,#f472b6);">张</div>
|
||||
<div class="teacher-info">
|
||||
<div class="teacher-name">张晓燕</div>
|
||||
<div class="teacher-subject">化学 · 高二(1)班</div>
|
||||
</div>
|
||||
<div class="teacher-score">
|
||||
<div class="score-value" style="color:#ec4899;">92.1</div>
|
||||
<div class="score-label">胜任力</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部趋势 -->
|
||||
<div class="bottom-grid">
|
||||
<div class="radar-section">
|
||||
<div class="card-header">
|
||||
<span class="card-title">学科组胜任力雷达</span>
|
||||
<span class="card-badge">各学科对比</span>
|
||||
</div>
|
||||
<div class="radar-grid">
|
||||
<div class="radar-item">
|
||||
<canvas id="radar1"></canvas>
|
||||
<div class="radar-label">语文组</div>
|
||||
</div>
|
||||
<div class="radar-item">
|
||||
<canvas id="radar2"></canvas>
|
||||
<div class="radar-label">数学组</div>
|
||||
</div>
|
||||
<div class="radar-item">
|
||||
<canvas id="radar3"></canvas>
|
||||
<div class="radar-label">英语组</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="class-stats">
|
||||
<div class="card-header">
|
||||
<span class="card-title">班级教学成果</span>
|
||||
<span class="card-badge">进步率</span>
|
||||
</div>
|
||||
<div class="class-item">
|
||||
<span class="class-name">高一(1)班</span>
|
||||
<div class="class-bar"><div class="class-bar-fill" style="width:92%;background:#2563eb;"></div></div>
|
||||
<span class="class-score" style="color:#2563eb;">+12%</span>
|
||||
</div>
|
||||
<div class="class-item">
|
||||
<span class="class-name">高一(2)班</span>
|
||||
<div class="class-bar"><div class="class-bar-fill" style="width:85%;background:#059669;"></div></div>
|
||||
<span class="class-score" style="color:#059669;">+8%</span>
|
||||
</div>
|
||||
<div class="class-item">
|
||||
<span class="class-name">高二(1)班</span>
|
||||
<div class="class-bar"><div class="class-bar-fill" style="width:78%;background:#7c3aed;"></div></div>
|
||||
<span class="class-score" style="color:#7c3aed;">+5%</span>
|
||||
</div>
|
||||
<div class="class-item">
|
||||
<span class="class-name">高二(2)班</span>
|
||||
<div class="class-bar"><div class="class-bar-fill" style="width:65%;background:#f59e0b;"></div></div>
|
||||
<span class="class-score" style="color:#f59e0b;">+2%</span>
|
||||
</div>
|
||||
<div class="class-item">
|
||||
<span class="class-name">高三(1)班</span>
|
||||
<div class="class-bar"><div class="class-bar-fill" style="width:55%;background:#ef4444;"></div></div>
|
||||
<span class="class-score" style="color:#ef4444;">-3%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 五维胜任力分布图
|
||||
const ctx = document.getElementById('competencyChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['专业知识', '教学设计', '协作沟通', '数字技术', '持续发展'],
|
||||
datasets: [{
|
||||
label: '全校平均分',
|
||||
data: [92, 88, 85, 82, 78],
|
||||
backgroundColor: [
|
||||
'rgba(37, 99, 235, 0.8)',
|
||||
'rgba(59, 130, 246, 0.8)',
|
||||
'rgba(5, 150, 105, 0.8)',
|
||||
'rgba(16, 185, 129, 0.8)',
|
||||
'rgba(245, 158, 11, 0.8)'
|
||||
],
|
||||
borderRadius: 6,
|
||||
borderSkipped: false,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: false, min: 60, max: 100, grid: { color: '#f1f5f9' } },
|
||||
x: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 雷达图函数
|
||||
function createRadar(canvasId, data) {
|
||||
const ctx = document.getElementById(canvasId).getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ['专业', '教学', '协作', '数字', '发展'],
|
||||
datasets: [{
|
||||
data: data,
|
||||
backgroundColor: 'rgba(37, 99, 235, 0.2)',
|
||||
borderColor: '#2563eb',
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#2563eb',
|
||||
pointRadius: 3
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
r: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
ticks: { display: false },
|
||||
grid: { color: '#e2e8f0' },
|
||||
pointLabels: { font: { size: 9 }, color: '#64748b' }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createRadar('radar1', [95, 90, 88, 85, 82]);
|
||||
createRadar('radar2', [92, 94, 86, 88, 80]);
|
||||
createRadar('radar3', [88, 86, 92, 82, 85]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,686 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>教学力颗粒展示 - K12C</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
||||
background: transparent;
|
||||
min-height: 100vh;
|
||||
color: #1e293b;
|
||||
}
|
||||
.page { padding: 24px; min-height: 100vh; }
|
||||
|
||||
/* 顶部导航 */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px 24px;
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 40px; height: 40px;
|
||||
background: linear-gradient(135deg, #059669, #10b981);
|
||||
border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #fff; font-size: 18px;
|
||||
}
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.nav-tab {
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.nav-tab:hover { background: #f1f5f9; }
|
||||
.nav-tab.active {
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.user-avatar {
|
||||
width: 40px; height: 40px;
|
||||
background: linear-gradient(135deg, #059669, #10b981);
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #fff; font-weight: 600;
|
||||
}
|
||||
|
||||
/* 主内容 */
|
||||
.main-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 左侧：综合得分 */
|
||||
.score-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-title { font-size: 18px; font-weight: 600; }
|
||||
.card-badge {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* 大圆环 */
|
||||
.score-ring {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.ring-container {
|
||||
position: relative;
|
||||
width: 200px; height: 200px;
|
||||
}
|
||||
.ring-bg, .ring-fill {
|
||||
position: absolute;
|
||||
width: 100%; height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ring-bg {
|
||||
border: 16px solid #e2e8f0;
|
||||
}
|
||||
.ring-center {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
.ring-value { font-size: 48px; font-weight: 700; color: #059669; }
|
||||
.ring-label { font-size: 14px; color: #64748b; }
|
||||
|
||||
/* 权重分布 */
|
||||
.weight-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.weight-item {
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
.weight-item:nth-child(1) { border-color: #2563eb; }
|
||||
.weight-item:nth-child(2) { border-color: #059669; }
|
||||
.weight-item:nth-child(3) { border-color: #7c3aed; }
|
||||
.weight-item:nth-child(4) { border-color: #f59e0b; }
|
||||
.weight-item:nth-child(5) { border-color: #ef4444; }
|
||||
|
||||
.weight-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.weight-name { font-weight: 600; font-size: 14px; }
|
||||
.weight-value { font-weight: 700; font-size: 18px; }
|
||||
.weight-bar {
|
||||
height: 8px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.weight-bar-fill { height: 100%; border-radius: 4px; }
|
||||
.weight-desc { font-size: 11px; color: #64748b; margin-top: 4px; }
|
||||
|
||||
/* 右侧：颗粒指标 */
|
||||
.granularity-card {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.granule-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.granule-tab {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.granule-tab:hover { background: #f1f5f9; }
|
||||
.granule-tab.active {
|
||||
background: #ecfdf5;
|
||||
border-color: #059669;
|
||||
}
|
||||
.granule-tab-icon { font-size: 20px; margin-bottom: 4px; }
|
||||
.granule-tab-name { font-size: 13px; font-weight: 500; }
|
||||
|
||||
/* 颗粒列表 */
|
||||
.granule-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.granule-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.granule-item:hover {
|
||||
background: #f1f5f9;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.granule-icon {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.granule-info { flex: 1; }
|
||||
.granule-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
|
||||
.granule-desc { font-size: 12px; color: #64748b; }
|
||||
.granule-score {
|
||||
text-align: right;
|
||||
}
|
||||
.granule-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.granule-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
.granule-bar {
|
||||
width: 100px;
|
||||
height: 6px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.granule-bar-fill { height: 100%; border-radius: 3px; }
|
||||
|
||||
/* 底部趋势图 */
|
||||
.trend-section {
|
||||
grid-column: 1 / -1;
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.trend-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.trend-item {
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.trend-icon { font-size: 24px; margin-bottom: 8px; }
|
||||
.trend-name { font-size: 13px; color: #64748b; margin-bottom: 4px; }
|
||||
.trend-value { font-size: 20px; font-weight: 700; }
|
||||
.trend-change {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.trend-change.up { background: #ecfdf5; color: #059669; }
|
||||
.trend-change.down { background: #fef2f2; color: #ef4444; }
|
||||
|
||||
/* 明细表格 */
|
||||
.detail-section {
|
||||
grid-column: 1 / -1;
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.detail-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.detail-table th, .detail-table td {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
.detail-table th {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
background: #f8fafc;
|
||||
}
|
||||
.detail-table td { font-size: 14px; }
|
||||
.detail-table tr:hover td { background: #f8fafc; }
|
||||
.status-badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.status-badge.excellent { background: #ecfdf5; color: #059669; }
|
||||
.status-badge.good { background: #eff6ff; color: #2563eb; }
|
||||
.status-badge.warning { background: #fffbeb; color: #f59e0b; }
|
||||
.status-badge.danger { background: #fef2f2; color: #ef4444; }
|
||||
|
||||
/* 环形进度 */
|
||||
.mini-ring {
|
||||
width: 60px; height: 60px;
|
||||
position: relative;
|
||||
}
|
||||
.mini-ring svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.mini-ring-bg { fill: none; stroke: #e2e8f0; stroke-width: 6; }
|
||||
.mini-ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; }
|
||||
.mini-ring-text {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<div class="logo-icon"><i class="fas fa-chart-bar"></i></div>
|
||||
<div>
|
||||
<div style="font-weight:600;">教学力颗粒展示</div>
|
||||
<div style="font-size:12px;color:#64748b;">K12C 教师胜任力管理平台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-tabs">
|
||||
<div class="nav-tab"><i class="fas fa-chart-pie"></i> 综合概览</div>
|
||||
<div class="nav-tab active"><i class="fas fa-layer-group"></i> 教学颗粒</div>
|
||||
<div class="nav-tab"><i class="fas fa-chart-line"></i> 趋势分析</div>
|
||||
<div class="nav-tab"><i class="fas fa-history"></i> 历史记录</div>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div style="text-align:right;">
|
||||
<div style="font-weight:600;">王小明</div>
|
||||
<div style="font-size:12px;color:#64748b;">高一(1)班 语文教师</div>
|
||||
</div>
|
||||
<div class="user-avatar">王</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧：综合得分 -->
|
||||
<div class="score-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title"><i class="fas fa-star" style="color:#f59e0b;margin-right:8px;"></i>教学力综合得分</span>
|
||||
<span class="card-badge">2024年春季学期</span>
|
||||
</div>
|
||||
|
||||
<div class="score-ring">
|
||||
<div class="ring-container">
|
||||
<div class="ring-bg"></div>
|
||||
<svg class="ring-fill" viewBox="0 0 200 200" style="position:absolute;top:0;left:0;">
|
||||
<circle cx="100" cy="100" r="84" fill="none" stroke="#059669" stroke-width="16"
|
||||
stroke-dasharray="528" stroke-dashoffset="79" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="ring-center">
|
||||
<div class="ring-value">85</div>
|
||||
<div class="ring-label">综合得分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="weight-grid">
|
||||
<div class="weight-item">
|
||||
<div class="weight-header">
|
||||
<span class="weight-name">学业进步率</span>
|
||||
<span class="weight-value" style="color:#2563eb;">35%</span>
|
||||
</div>
|
||||
<div class="weight-bar"><div class="weight-bar-fill" style="width:35%;background:#2563eb;"></div></div>
|
||||
<div class="weight-desc">班级平均分进步幅度</div>
|
||||
</div>
|
||||
<div class="weight-item">
|
||||
<div class="weight-header">
|
||||
<span class="weight-name">课堂满意度</span>
|
||||
<span class="weight-value" style="color:#059669;">25%</span>
|
||||
</div>
|
||||
<div class="weight-bar"><div class="weight-bar-fill" style="width:25%;background:#059669;"></div></div>
|
||||
<div class="weight-desc">学生匿名评教分数</div>
|
||||
</div>
|
||||
<div class="weight-item">
|
||||
<div class="weight-header">
|
||||
<span class="weight-name">作业批改质量</span>
|
||||
<span class="weight-value" style="color:#7c3aed;">20%</span>
|
||||
</div>
|
||||
<div class="weight-bar"><div class="weight-bar-fill" style="width:20%;background:#7c3aed;"></div></div>
|
||||
<div class="weight-desc">及时率 + 评语详细度</div>
|
||||
</div>
|
||||
<div class="weight-item">
|
||||
<div class="weight-header">
|
||||
<span class="weight-name">教研产出</span>
|
||||
<span class="weight-value" style="color:#f59e0b;">10%</span>
|
||||
</div>
|
||||
<div class="weight-bar"><div class="weight-bar-fill" style="width:10%;background:#f59e0b;"></div></div>
|
||||
<div class="weight-desc">论文、课题、公开课</div>
|
||||
</div>
|
||||
<div class="weight-item" style="grid-column: 1 / -1;">
|
||||
<div class="weight-header">
|
||||
<span class="weight-name">数字工具使用</span>
|
||||
<span class="weight-value" style="color:#ef4444;">10%</span>
|
||||
</div>
|
||||
<div class="weight-bar"><div class="weight-bar-fill" style="width:10%;background:#ef4444;"></div></div>
|
||||
<div class="weight-desc">多媒体教学、信息化工具应用频率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：颗粒指标 -->
|
||||
<div class="granularity-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title"><i class="fas fa-layer-group" style="color:#7c3aed;margin-right:8px;"></i>教学颗粒指标</span>
|
||||
<span class="card-badge">详细数据</span>
|
||||
</div>
|
||||
|
||||
<div class="granule-tabs">
|
||||
<div class="granule-tab active">
|
||||
<div class="granule-tab-icon" style="color:#2563eb;"><i class="fas fa-pencil-alt"></i></div>
|
||||
<div class="granule-tab-name">备课</div>
|
||||
</div>
|
||||
<div class="granule-tab">
|
||||
<div class="granule-tab-icon" style="color:#059669;"><i class="fas fa-chalkboard-teacher"></i></div>
|
||||
<div class="granule-tab-name">授课</div>
|
||||
</div>
|
||||
<div class="granule-tab">
|
||||
<div class="granule-tab-icon" style="color:#7c3aed;"><i class="fas fa-tasks"></i></div>
|
||||
<div class="granule-tab-name">作业</div>
|
||||
</div>
|
||||
<div class="granule-tab">
|
||||
<div class="granule-tab-icon" style="color:#f59e0b;"><i class="fas fa-check-double"></i></div>
|
||||
<div class="granule-tab-name">批改</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="granule-list">
|
||||
<div class="granule-item">
|
||||
<div class="granule-icon" style="background:#eff6ff;color:#2563eb;">
|
||||
<i class="fas fa-file-powerpoint"></i>
|
||||
</div>
|
||||
<div class="granule-info">
|
||||
<div class="granule-name">课件原创度</div>
|
||||
<div class="granule-desc">自主设计的课件占总课件比例</div>
|
||||
</div>
|
||||
<div class="granule-score">
|
||||
<div class="granule-value" style="color:#2563eb;">92</div>
|
||||
<div class="granule-label">分</div>
|
||||
<div class="granule-bar"><div class="granule-bar-fill" style="width:92%;background:#2563eb;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="granule-item">
|
||||
<div class="granule-icon" style="background:#ecfdf5;color:#059669;">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
<div class="granule-info">
|
||||
<div class="granule-name">备课时长</div>
|
||||
<div class="granule-desc">平均每课时备课时间（小时）</div>
|
||||
</div>
|
||||
<div class="granule-score">
|
||||
<div class="granule-value" style="color:#059669;">3.5</div>
|
||||
<div class="granule-label">小时/课时</div>
|
||||
<div class="granule-bar"><div class="granule-bar-fill" style="width:88%;background:#059669;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="granule-item">
|
||||
<div class="granule-icon" style="background:#f5f3ff;color:#7c3aed;">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
</div>
|
||||
<div class="granule-info">
|
||||
<div class="granule-name">课件更新率</div>
|
||||
<div class="granule-desc">每学期课件更新比例</div>
|
||||
</div>
|
||||
<div class="granule-score">
|
||||
<div class="granule-value" style="color:#7c3aed;">78</div>
|
||||
<div class="granule-label">%</div>
|
||||
<div class="granule-bar"><div class="granule-bar-fill" style="width:78%;background:#7c3aed;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="granule-item">
|
||||
<div class="granule-icon" style="background:#fffbeb;color:#f59e0b;">
|
||||
<i class="fas fa-video"></i>
|
||||
</div>
|
||||
<div class="granule-info">
|
||||
<div class="granule-name">多媒体使用</div>
|
||||
<div class="granule-desc">课堂使用视频/动画的比例</div>
|
||||
</div>
|
||||
<div class="granule-score">
|
||||
<div class="granule-value" style="color:#f59e0b;">85</div>
|
||||
<div class="granule-label">%</div>
|
||||
<div class="granule-bar"><div class="granule-bar-fill" style="width:85%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="granule-item">
|
||||
<div class="granule-icon" style="background:#fef2f2;color:#ef4444;">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
</div>
|
||||
<div class="granule-info">
|
||||
<div class="granule-name">教学创新点</div>
|
||||
<div class="granule-desc">本学期创新的教学环节数量</div>
|
||||
</div>
|
||||
<div class="granule-score">
|
||||
<div class="granule-value" style="color:#ef4444;">5</div>
|
||||
<div class="granule-label">个/学期</div>
|
||||
<div class="granule-bar"><div class="granule-bar-fill" style="width:83%;background:#ef4444;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部趋势 -->
|
||||
<div class="trend-section">
|
||||
<div class="card-header">
|
||||
<span class="card-title"><i class="fas fa-chart-line" style="color:#2563eb;margin-right:8px;"></i>各维度趋势</span>
|
||||
<span class="card-badge">近5周数据</span>
|
||||
</div>
|
||||
<div class="trend-grid">
|
||||
<div class="trend-item">
|
||||
<div class="trend-icon" style="color:#2563eb;"><i class="fas fa-pencil-alt"></i></div>
|
||||
<div class="trend-name">备课质量</div>
|
||||
<div class="trend-value" style="color:#2563eb;">88</div>
|
||||
<span class="trend-change up"><i class="fas fa-arrow-up"></i> +3</span>
|
||||
</div>
|
||||
<div class="trend-item">
|
||||
<div class="trend-icon" style="color:#059669;"><i class="fas fa-chalkboard-teacher"></i></div>
|
||||
<div class="trend-name">授课表现</div>
|
||||
<div class="trend-value" style="color:#059669;">92</div>
|
||||
<span class="trend-change up"><i class="fas fa-arrow-up"></i> +5</span>
|
||||
</div>
|
||||
<div class="trend-item">
|
||||
<div class="trend-icon" style="color:#7c3aed;"><i class="fas fa-tasks"></i></div>
|
||||
<div class="trend-name">作业设计</div>
|
||||
<div class="trend-value" style="color:#7c3aed;">85</div>
|
||||
<span class="trend-change up"><i class="fas fa-arrow-up"></i> +2</span>
|
||||
</div>
|
||||
<div class="trend-item">
|
||||
<div class="trend-icon" style="color:#f59e0b;"><i class="fas fa-check-double"></i></div>
|
||||
<div class="trend-name">批改反馈</div>
|
||||
<div class="trend-value" style="color:#f59e0b;">90</div>
|
||||
<span class="trend-change down"><i class="fas fa-arrow-down"></i> -1</span>
|
||||
</div>
|
||||
<div class="trend-item">
|
||||
<div class="trend-icon" style="color:#ef4444;"><i class="fas fa-comments"></i></div>
|
||||
<div class="trend-name">学生反馈</div>
|
||||
<div class="trend-value" style="color:#ef4444;">87</div>
|
||||
<span class="trend-change up"><i class="fas fa-arrow-up"></i> +4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 明细表格 -->
|
||||
<div class="detail-section">
|
||||
<div class="card-header">
|
||||
<span class="card-title"><i class="fas fa-table" style="color:#7c3aed;margin-right:8px;"></i>教学数据明细</span>
|
||||
<span class="card-badge">本周数据</span>
|
||||
</div>
|
||||
<table class="detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>教学环节</th>
|
||||
<th>指标名称</th>
|
||||
<th>实际值</th>
|
||||
<th>标准值</th>
|
||||
<th>完成率</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i class="fas fa-pencil-alt" style="color:#2563eb;margin-right:6px;"></i>备课</td>
|
||||
<td>课件制作数</td>
|
||||
<td>12 个</td>
|
||||
<td>10 个</td>
|
||||
<td>
|
||||
<div class="mini-ring">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60">
|
||||
<circle class="mini-ring-bg" cx="30" cy="30" r="24"/>
|
||||
<circle class="mini-ring-fill" cx="30" cy="30" r="24"
|
||||
stroke="#2563eb" stroke-dasharray="151" stroke-dashoffset="0"/>
|
||||
</svg>
|
||||
<span class="mini-ring-text" style="color:#2563eb;">120%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="status-badge excellent">优秀</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fas fa-chalkboard-teacher" style="color:#059669;margin-right:6px;"></i>授课</td>
|
||||
<td>课堂出勤率</td>
|
||||
<td>98.5%</td>
|
||||
<td>95%</td>
|
||||
<td>
|
||||
<div class="mini-ring">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60">
|
||||
<circle class="mini-ring-bg" cx="30" cy="30" r="24"/>
|
||||
<circle class="mini-ring-fill" cx="30" cy="30" r="24"
|
||||
stroke="#059669" stroke-dasharray="151" stroke-dashoffset="2"/>
|
||||
</svg>
|
||||
<span class="mini-ring-text" style="color:#059669;">98.5%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="status-badge excellent">优秀</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fas fa-tasks" style="color:#7c3aed;margin-right:6px;"></i>作业</td>
|
||||
<td>作业布置量</td>
|
||||
<td>45 次</td>
|
||||
<td>40 次</td>
|
||||
<td>
|
||||
<div class="mini-ring">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60">
|
||||
<circle class="mini-ring-bg" cx="30" cy="30" r="24"/>
|
||||
<circle class="mini-ring-fill" cx="30" cy="30" r="24"
|
||||
stroke="#7c3aed" stroke-dasharray="151" stroke-dashoffset="8"/>
|
||||
</svg>
|
||||
<span class="mini-ring-text" style="color:#7c3aed;">112%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="status-badge good">良好</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fas fa-check-double" style="color:#f59e0b;margin-right:6px;"></i>批改</td>
|
||||
<td>批改及时率</td>
|
||||
<td>92%</td>
|
||||
<td>100%</td>
|
||||
<td>
|
||||
<div class="mini-ring">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60">
|
||||
<circle class="mini-ring-bg" cx="30" cy="30" r="24"/>
|
||||
<circle class="mini-ring-fill" cx="30" cy="30" r="24"
|
||||
stroke="#f59e0b" stroke-dasharray="151" stroke-dashoffset="12"/>
|
||||
</svg>
|
||||
<span class="mini-ring-text" style="color:#f59e0b;">92%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="status-badge warning">待提升</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fas fa-comments" style="color:#ef4444;margin-right:6px;"></i>反馈</td>
|
||||
<td>评语详细度</td>
|
||||
<td>85%</td>
|
||||
<td>80%</td>
|
||||
<td>
|
||||
<div class="mini-ring">
|
||||
<svg width="60" height="60" viewBox="0 0 60 60">
|
||||
<circle class="mini-ring-bg" cx="30" cy="30" r="24"/>
|
||||
<circle class="mini-ring-fill" cx="30" cy="30" r="24"
|
||||
stroke="#ef4444" stroke-dasharray="151" stroke-dashoffset="23"/>
|
||||
</svg>
|
||||
<span class="mini-ring-text" style="color:#ef4444;">85%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="status-badge good">良好</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 环形进度动画
|
||||
document.querySelectorAll('.mini-ring-fill').forEach(circle => {
|
||||
const circumference = 2 * Math.PI * 24;
|
||||
const offset = circumference - (circle.getAttribute('stroke-dashoffset') / 151 * circumference);
|
||||
circle.style.strokeDasharray = circumference;
|
||||
circle.style.strokeDashoffset = offset;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
const puppeteer = require('puppeteer');
|
||||
const path = require('path');
|
||||
|
||||
(async () => {
|
||||
const browser = await puppeteer.launch({
|
||||
headless: true,
|
||||
args: ['--no-sandbox', '--disable-setuid-sandbox']
|
||||
});
|
||||
const page = await browser.newPage();
|
||||
|
||||
// 设置视口大小
|
||||
await page.setViewport({ width: 1400, height: 1200 });
|
||||
|
||||
const filePath = 'file://' + path.resolve(__dirname, 'screenshots.html');
|
||||
console.log('Loading:', filePath);
|
||||
|
||||
await page.goto(filePath, { waitUntil: 'networkidle0' });
|
||||
|
||||
// 等待内容加载
|
||||
await page.waitForSelector('.phone-frame', { timeout: 10000 });
|
||||
|
||||
// 截图整个页面
|
||||
const outputPath = path.resolve(__dirname, 'screenshots-full.png');
|
||||
await page.screenshot({
|
||||
path: outputPath,
|
||||
fullPage: true
|
||||
});
|
||||
|
||||
console.log('Full page screenshot saved:', outputPath);
|
||||
|
||||
await browser.close();
|
||||
console.log('Done!');
|
||||
})();
|
||||
+1068
File diff suppressed because it is too large
Load Diff
BIN
Binary file not shown.
|
After Width: | Height: | Size: 413 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 323 KiB |
Reference in New Issue
Block a user