freedak/K12C
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: K12C教师岗位胜任力数字化管理方案

Browse Source
This commit is contained in:
selfrelease
2026-06-19 15:17:20 +08:00
commit 857810d2e3
20 changed files with 6956 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
prototype-cockpit.html
+591
View File
@@ -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>