Initial commit
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
co-authored by
factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
commit
71db82393a
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ school }}课程实施监测数据分析报告</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
|
||||
{% include 'components/styles.html' %}
|
||||
</head>
|
||||
<body>
|
||||
{# ===== 右侧目录导航(JS自动从h1/h2生成) ===== #}
|
||||
<nav class="toc-nav" id="toc-nav"><div class="toc-track" id="toc-track"></div></nav>
|
||||
<button class="toc-toggle" id="toc-toggle" onclick="document.getElementById('toc-nav').classList.toggle('show')">☰</button>
|
||||
|
||||
<div class="report-container">
|
||||
|
||||
{# ===== 封面 ===== #}
|
||||
{% include 'sections/cover.html' %}
|
||||
|
||||
{# ===== 第一部分:测评背景与实施 ===== #}
|
||||
{% include 'sections/part0_background.html' %}
|
||||
|
||||
{# ===== 第二部分:总体表现 ===== #}
|
||||
{% include 'sections/part1_overview.html' %}
|
||||
|
||||
{# ===== 第三~九部分:各维度详细分析 ===== #}
|
||||
{% set part_names = {
|
||||
"课程领导力": "part3", "教学变革力": "part4", "学生发展指导力": "part5",
|
||||
"教师发展支持力": "part6", "教育质量评估力": "part7",
|
||||
"教育条件保障力": "part8", "数字化赋能力": "part9"
|
||||
} %}
|
||||
{% set part_numbers = {
|
||||
"课程领导力": "三", "教学变革力": "四", "学生发展指导力": "五",
|
||||
"教师发展支持力": "六", "教育质量评估力": "七",
|
||||
"教育条件保障力": "八", "数字化赋能力": "九"
|
||||
} %}
|
||||
|
||||
{% for dim_name, dim_data in dimensions.items() %}
|
||||
{% set part_id = part_names[dim_name] %}
|
||||
{% set part_number = part_numbers[dim_name] %}
|
||||
{% include 'sections/dimension_detail.html' %}
|
||||
{% endfor %}
|
||||
|
||||
{# ===== 总结与建议 ===== #}
|
||||
{% include 'sections/conclusion.html' %}
|
||||
|
||||
</div>
|
||||
|
||||
{# ===== ECharts 图表渲染 ===== #}
|
||||
{% include 'components/charts_common.js.html' %}
|
||||
{% include 'components/charts_overview.js.html' %}
|
||||
{% include 'components/charts_dimension.js.html' %}
|
||||
{% include 'components/charts_innovative.js.html' %}
|
||||
|
||||
{# ===== 自动生成目录 + 滚动高亮 ===== #}
|
||||
<script>
|
||||
(function() {
|
||||
/* ---- 1. 自动扫描 h1/h2 生成 TOC ---- */
|
||||
var track = document.getElementById('toc-track');
|
||||
var container = document.querySelector('.report-container');
|
||||
// 取 .section 内的 h1(部分标题)和 h2[id](子维度标题)
|
||||
var headings = container.querySelectorAll('.section > h1, h2[id]');
|
||||
var currentGroup = null;
|
||||
|
||||
headings.forEach(function(h) {
|
||||
// 确保有 id 可跳转;h1 取父 .section 的 id,h2 自身有 id
|
||||
var id = '';
|
||||
if (h.tagName === 'H1') {
|
||||
var sec = h.closest('.section');
|
||||
id = sec ? sec.id : '';
|
||||
} else {
|
||||
id = h.id;
|
||||
}
|
||||
if (!id) return;
|
||||
|
||||
var a = document.createElement('a');
|
||||
a.href = '#' + id;
|
||||
a.className = 'toc-item';
|
||||
// 去掉"第X部分 "前缀,只保留核心文字
|
||||
var text = h.textContent.replace(/^第[一二三四五六七八九十]+部分\s*/, '');
|
||||
// h2 也去掉"二、""三、"等编号前缀
|
||||
text = text.replace(/^[一二三四五六七八九十]+、\s*/, '');
|
||||
a.textContent = text;
|
||||
|
||||
if (h.tagName === 'H1') {
|
||||
a.classList.add('level-1');
|
||||
a.setAttribute('data-group', id);
|
||||
currentGroup = id;
|
||||
} else {
|
||||
a.classList.add('level-2');
|
||||
if (currentGroup) a.setAttribute('data-parent', currentGroup);
|
||||
}
|
||||
track.appendChild(a);
|
||||
});
|
||||
|
||||
/* ---- 2. 事件绑定 ---- */
|
||||
var tocItems = track.querySelectorAll('.toc-item');
|
||||
var level2Items = track.querySelectorAll('.toc-item.level-2');
|
||||
var sections = [];
|
||||
|
||||
tocItems.forEach(function(item) {
|
||||
var target = document.getElementById(item.getAttribute('href').slice(1));
|
||||
if (target) sections.push({ el: target, link: item });
|
||||
|
||||
// 点击平滑滚动
|
||||
item.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
target && target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
if (window.innerWidth <= 1280) {
|
||||
document.getElementById('toc-nav').classList.remove('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function expandGroup(gid) {
|
||||
level2Items.forEach(function(item) {
|
||||
item.classList.toggle('visible', item.getAttribute('data-parent') === gid);
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- 3. 滚动高亮 ---- */
|
||||
var ticking = false;
|
||||
window.addEventListener('scroll', function() {
|
||||
if (ticking) return;
|
||||
ticking = true;
|
||||
window.requestAnimationFrame(function() {
|
||||
var scrollY = window.scrollY + 150;
|
||||
var current = null;
|
||||
for (var i = sections.length - 1; i >= 0; i--) {
|
||||
if (sections[i].el.offsetTop <= scrollY) { current = sections[i]; break; }
|
||||
}
|
||||
tocItems.forEach(function(item) { item.classList.remove('active'); });
|
||||
if (current) {
|
||||
current.link.classList.add('active');
|
||||
expandGroup(current.link.getAttribute('data-group') || current.link.getAttribute('data-parent') || '');
|
||||
}
|
||||
ticking = false;
|
||||
});
|
||||
});
|
||||
|
||||
window.dispatchEvent(new Event('scroll'));
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user