simon
b6df028839
变更摘要: - [fix] 清理根目录 index.html 遗留代码（questionnaire-error + retryLoad 移除） - [fix] 副标题同步更新为自估591分 + 候选志愿546条数据校准 - [fix] 页脚注入版本号 v1.0.0 - [fix] 部署版 index.html: 取消家长标签，统一 filler-tianheng - [fix] Dashboard 文案修正（4份→2份线上问卷） - [fix] 清理冗余部署脚本（v1-v4归档至 archived_scripts/） - [fix] 等效位次工具纳入 deploy 目录 - [chore] .gitignore 初始化 - [init] Git 仓库初始化
203 lines
7.1 KiB
HTML
203 lines
7.1 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>问卷汇总报告 — 天恒高考志愿</title>
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<style>
|
||
.summary-container { max-width: 900px; margin: 0 auto; }
|
||
.section-card {
|
||
background: var(--card);
|
||
border-radius: var(--radius-md);
|
||
padding: 20px 24px;
|
||
margin: 16px 0;
|
||
box-shadow: var(--shadow-sm);
|
||
border-left: 4px solid var(--navy-500);
|
||
}
|
||
.section-card.parents { border-left-color: var(--amber); }
|
||
.section-card h3 { font-size: 16px; color: var(--navy-700); margin-bottom: 12px; }
|
||
.qa-item {
|
||
margin: 8px 0;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.qa-item:last-child { border-bottom: none; }
|
||
.qa-item .label { font-size: 12px; color: var(--text-muted); }
|
||
.qa-item .value { font-size: 14px; color: var(--text); margin-top: 2px; }
|
||
|
||
.standalone-card {
|
||
display: inline-block;
|
||
background: var(--navy-light);
|
||
border-radius: var(--radius-md);
|
||
padding: 16px 20px;
|
||
margin: 8px;
|
||
text-align: center;
|
||
min-width: 140px;
|
||
}
|
||
.standalone-card .type { font-size: 28px; font-weight: 900; color: var(--navy-600); letter-spacing: 2px; }
|
||
.standalone-card .label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
|
||
|
||
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; justify-content: center; }
|
||
|
||
.empty-note {
|
||
color: var(--text-muted);
|
||
font-size: 13px;
|
||
font-style: italic;
|
||
}
|
||
|
||
@media print {
|
||
.top-bar, .btn-row, .back-link { display: none; }
|
||
.summary-container { max-width: 100%; }
|
||
body { background: white; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="top-bar">
|
||
DOCUMENT ID: ZJ-2026-TH-001 | 仅供家庭成员查阅
|
||
</div>
|
||
|
||
<div class="container summary-container">
|
||
|
||
<div style="margin:20px 0;">
|
||
<a href="/" style="color:var(--navy-600);text-decoration:none;font-size:13px;font-weight:600;">← 返回首页</a>
|
||
|
|
||
<a href="/dashboard.html" style="color:var(--navy-600);text-decoration:none;font-size:13px;font-weight:600;">📋 完成情况</a>
|
||
</div>
|
||
|
||
<div class="hero" style="padding:24px 20px 20px;">
|
||
<h1>📄 问卷汇总报告</h1>
|
||
<p class="sub">6项测评结果综合概览 · 家庭参考文档</p>
|
||
</div>
|
||
|
||
<div class="alert alert-info" id="completionAlert" style="display:none;">
|
||
⚠️ 部分测评尚未完成，以下仅展示已提交的结果。
|
||
</div>
|
||
|
||
<!-- 独立测评结果 -->
|
||
<h2 style="font-size:18px;color:var(--navy-700);margin:20px 0 0;">🧪 自评测试结果</h2>
|
||
<div id="standaloneResults" style="margin:12px 0;">
|
||
<p class="empty-note">加载中...</p>
|
||
</div>
|
||
|
||
<!-- API问卷结果 -->
|
||
<h2 style="font-size:18px;color:var(--navy-700);margin:20px 0 0;">📝 线上问卷结果</h2>
|
||
<div id="questionnaireResults">
|
||
<p class="empty-note">加载中...</p>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="btn-row">
|
||
<button class="btn btn-primary" onclick="window.print()">🖨️ 打印报告</button>
|
||
<a href="/dashboard.html" class="btn btn-outline">📋 查看完成状态</a>
|
||
<a href="/" class="btn btn-outline">🏠 返回首页</a>
|
||
</div>
|
||
|
||
<div style="font-size:11px;color:var(--text-muted);text-align:center;margin:20px 0;" id="genTime"></div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
(async function() {
|
||
try {
|
||
const resp = await fetch('/api/summary');
|
||
const data = await resp.json();
|
||
renderSummary(data);
|
||
} catch(e) {
|
||
document.getElementById('standaloneResults').innerHTML =
|
||
'<div class="alert alert-amber">无法连接后端服务，请确保 Flask 已启动</div>';
|
||
document.getElementById('questionnaireResults').innerHTML = '';
|
||
}
|
||
})();
|
||
|
||
function renderSummary(data) {
|
||
// 完成度提示
|
||
if (data.status.completed < data.status.total) {
|
||
document.getElementById('completionAlert').style.display = 'block';
|
||
document.getElementById('completionAlert').textContent =
|
||
'⚠️ 仅 ' + data.status.completed + '/' + data.status.total + ' 项测评已完成，以下为当前已提交结果。请填写剩余问卷后刷新。';
|
||
}
|
||
|
||
// 独立测评
|
||
const std = data.standalone_tests || {};
|
||
let stdHtml = '';
|
||
const testMeta = {
|
||
holland: { name: '霍兰德职业兴趣测试', icon: '🔬' },
|
||
mbti: { name: 'MBTI 性格测试', icon: '🧠' }
|
||
};
|
||
for (const [key, meta] of Object.entries(testMeta)) {
|
||
const s = std[key];
|
||
if (s) {
|
||
stdHtml += `<div class="standalone-card">
|
||
<div style="font-size:12px;color:var(--text-muted);">${meta.icon} ${meta.name}</div>
|
||
<div class="type">${s.result}</div>
|
||
<div class="label">${s.user_name} · ${s.completed_at || ''}</div>
|
||
</div>`;
|
||
} else {
|
||
stdHtml += `<div class="standalone-card" style="opacity:0.5;">
|
||
<div style="font-size:12px;color:var(--text-muted);">${meta.icon} ${meta.name}</div>
|
||
<div class="type">—</div>
|
||
<div class="label">未提交</div>
|
||
</div>`;
|
||
}
|
||
}
|
||
document.getElementById('standaloneResults').innerHTML = stdHtml || '<p class="empty-note">暂无独立测评结果</p>';
|
||
|
||
// API问卷
|
||
const qs = data.questionnaires || [];
|
||
let qHtml = '';
|
||
qs.forEach(q => {
|
||
const borderClass = q.target_user === '父母' ? ' parents' : '';
|
||
const tagBadge = q.target_user === '父母'
|
||
? '<span class="badge badge-amber" style="margin-left:8px;">父母填写</span>'
|
||
: '<span class="badge badge-blue" style="margin-left:8px;">天恒填写</span>';
|
||
|
||
if (q.responses && q.responses.length > 0) {
|
||
const responses = q.responses;
|
||
qHtml += `<div class="section-card${borderClass}">
|
||
<h3>${q.title} ${tagBadge} <span style="font-weight:400;font-size:12px;color:var(--text-muted);">（${responses.length} 份答卷）</span></h3>`;
|
||
|
||
responses.forEach((r, ri) => {
|
||
const answers = r.answers || {};
|
||
qHtml += `<div style="margin:12px 0;padding:10px;background:var(--bg);border-radius:6px;">
|
||
<div style="font-weight:600;font-size:13px;margin-bottom:6px;">👤 ${r.user_name} <span style="font-weight:400;font-size:11px;color:var(--text-muted);">${r.created_at}</span></div>`;
|
||
|
||
Object.entries(answers).forEach(([key, val], vi) => {
|
||
if (vi < 10) { // 最多显示10条
|
||
qHtml += `<div class="qa-item">
|
||
<div class="label">Q${key}:</div>
|
||
<div class="value">${escapeHtml(String(val))}</div>
|
||
</div>`;
|
||
}
|
||
});
|
||
if (Object.keys(answers).length > 10) {
|
||
qHtml += `<div style="font-size:12px;color:var(--text-muted);">... 共 ${Object.keys(answers).length} 题</div>`;
|
||
}
|
||
qHtml += '</div>';
|
||
});
|
||
qHtml += '</div>';
|
||
} else {
|
||
qHtml += `<div class="section-card${borderClass}" style="opacity:0.6;">
|
||
<h3>${q.title} ${tagBadge}</h3>
|
||
<p class="empty-note">暂无答卷</p>
|
||
</div>`;
|
||
}
|
||
});
|
||
document.getElementById('questionnaireResults').innerHTML = qHtml || '<p class="empty-note">暂无问卷结果</p>';
|
||
|
||
// 生成时间
|
||
document.getElementById('genTime').textContent = '报告生成时间：' + (data.generated_at || '');
|
||
}
|
||
|
||
function escapeHtml(str) {
|
||
const div = document.createElement('div');
|
||
div.textContent = str;
|
||
return div.innerHTML;
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|