selfrelease
680 lines
29 KiB
HTML
680 lines
29 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;
|
|
}
|
|
.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> |