selfrelease
591 lines
24 KiB
HTML
591 lines
24 KiB
HTML
<!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> |