718 lines
29 KiB
JavaScript
718 lines
29 KiB
JavaScript
/* NY 问卷考试系统数据平台 - 前端逻辑 */
|
||
(function () {
|
||
'use strict';
|
||
|
||
const $ = (s, r) => (r || document).querySelector(s);
|
||
const $$ = (s, r) => Array.prototype.slice.call((r || document).querySelectorAll(s));
|
||
|
||
const state = {
|
||
projects: [],
|
||
questions: [],
|
||
rows: [],
|
||
absent: [],
|
||
unmatched: [],
|
||
roster: [], // 完整名单（含班级），用于按班级重算统计
|
||
prevMap: {}, // sid -> 摘要，用于高亮变化
|
||
prevSids: new Set(), // 上一次刷新出现的 sid
|
||
newSids: new Set(), // 本次刷新新增的 sid（绿色底纹）
|
||
hasPrev: false,
|
||
fullScore: 100,
|
||
sortKey: 'submit_ts',
|
||
sortAsc: false,
|
||
timer: null,
|
||
loading: false,
|
||
lastSig: ''
|
||
};
|
||
|
||
/* ---------------- 通用 ---------------- */
|
||
async function api(action, opts) {
|
||
opts = opts || {};
|
||
const init = { method: opts.method || 'GET' };
|
||
if (opts.body) {
|
||
init.headers = { 'Content-Type': 'application/json' };
|
||
init.body = JSON.stringify(opts.body);
|
||
}
|
||
if (opts.form) {
|
||
init.method = 'POST';
|
||
init.body = opts.form;
|
||
}
|
||
let url = 'api.php?action=' + encodeURIComponent(action);
|
||
if (opts.params) {
|
||
for (const k in opts.params) {
|
||
if (opts.params[k] !== '' && opts.params[k] != null) {
|
||
url += '&' + k + '=' + encodeURIComponent(opts.params[k]);
|
||
}
|
||
}
|
||
}
|
||
const res = await fetch(url, init);
|
||
const text = await res.text();
|
||
let json;
|
||
try { json = JSON.parse(text); } catch (e) {
|
||
throw new Error('服务端返回异常（可能 PHP 报错）：' + text.slice(0, 300));
|
||
}
|
||
if (!json.ok) throw new Error(json.msg || '请求失败');
|
||
return json.data;
|
||
}
|
||
|
||
function esc(s) {
|
||
return String(s == null ? '' : s).replace(/[&<>"']/g, c =>
|
||
({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
||
}
|
||
|
||
function setConn(cls, text) {
|
||
const el = $('#conn');
|
||
el.className = 'conn ' + cls;
|
||
el.innerHTML = '<i></i><span>' + esc(text) + '</span>';
|
||
}
|
||
|
||
function showAlert(msg, type) {
|
||
const el = $('#alert');
|
||
if (!msg) { el.classList.add('hidden'); return; }
|
||
el.textContent = msg;
|
||
el.className = 'alert' + (type === 'info' ? ' info' : '');
|
||
}
|
||
|
||
/* ---------------- 问卷列表 ---------------- */
|
||
async function loadProjects() {
|
||
setConn('conn-load', '连接中…');
|
||
try {
|
||
const list = await api('projects');
|
||
state.projects = list || [];
|
||
const sel = $('#projectSel');
|
||
const keep = sel.value;
|
||
sel.innerHTML = '';
|
||
if (!state.projects.length) {
|
||
sel.innerHTML = '<option value="">（没有获取到问卷，请检查设置）</option>';
|
||
} else {
|
||
const ph = document.createElement('option');
|
||
ph.value = ''; ph.textContent = '请选择问卷 / 考试';
|
||
sel.appendChild(ph);
|
||
state.projects.forEach(p => {
|
||
const o = document.createElement('option');
|
||
o.value = p.id;
|
||
o.textContent = (p.mode ? '[' + p.mode + '] ' : '') + p.name + '（' + (p.total || 0) + '份）';
|
||
sel.appendChild(o);
|
||
});
|
||
}
|
||
if (keep && state.projects.some(p => p.id === keep)) sel.value = keep;
|
||
else if (state.deeplinkProject && state.projects.some(p => p.id === state.deeplinkProject)) sel.value = state.deeplinkProject;
|
||
setConn('conn-on', '已连接 · ' + state.projects.length + ' 个问卷');
|
||
showAlert('');
|
||
if (sel.value) refresh();
|
||
} catch (e) {
|
||
setConn('conn-err', '连接失败');
|
||
showAlert('无法连接卷王系统：' + e.message + '\n请点击右上角【设置】检查系统地址、接口前缀与账号密码。');
|
||
}
|
||
}
|
||
|
||
/* ---------------- 数据刷新 ---------------- */
|
||
async function refresh(silent) {
|
||
const pid = $('#projectSel').value;
|
||
if (!pid) return;
|
||
if (state.loading) return;
|
||
state.loading = true;
|
||
if (!silent) setConn('conn-load', '拉取数据…');
|
||
try {
|
||
const d = await api('data', { params: { projectId: pid, nameQid: $('#nameFieldSel').value } });
|
||
state.questions = d.questions || [];
|
||
state.rows = d.rows || [];
|
||
state.absent = d.absent || [];
|
||
state.unmatched = d.unmatched || [];
|
||
state.roster = d.roster || [];
|
||
state.fullScore = (d.config && d.config.full_score) ? (parseInt(d.config.full_score, 10) || 100) : 100;
|
||
|
||
// 计算本次刷新新增的 sid（用于绿色底纹）；首次加载不标记
|
||
const cur = new Set(state.rows.map(r => r.sid).filter(Boolean));
|
||
if (state.hasPrev) state.newSids = new Set(Array.from(cur).filter(s => !state.prevSids.has(s)));
|
||
else state.newSids = new Set();
|
||
state.hasPrev = true;
|
||
|
||
renderNameFields(d);
|
||
renderStats();
|
||
renderTable();
|
||
state.prevSids = cur;
|
||
populateClasses();
|
||
renderAbsent();
|
||
renderUnmatched();
|
||
renderHints();
|
||
|
||
$('#lastUpdate').textContent = d.updated_at;
|
||
setConn('conn-on', '实时 · ' + d.project.name);
|
||
showAlert('');
|
||
} catch (e) {
|
||
if (!silent) setConn('conn-err', '数据获取失败');
|
||
showAlert(e.message);
|
||
} finally {
|
||
state.loading = false;
|
||
$('#liveDot').classList.add('on');
|
||
setTimeout(() => $('#liveDot').classList.remove('on'), 900);
|
||
}
|
||
}
|
||
|
||
function renderNameFields(d) {
|
||
const sel = $('#nameFieldSel');
|
||
const keep = sel.value;
|
||
sel.innerHTML = '<option value="">自动识别</option>';
|
||
const cands = d.name_candidates || [];
|
||
cands.forEach(q => {
|
||
const o = document.createElement('option');
|
||
o.value = q.id;
|
||
o.textContent = '姓名题：' + (q.title || q.id);
|
||
sel.appendChild(o);
|
||
});
|
||
(d.questions || []).forEach(q => {
|
||
if (cands.some(c => c.id === q.id)) return;
|
||
const o = document.createElement('option');
|
||
o.value = q.id;
|
||
o.textContent = (q.title || q.id) + '（' + (q.type || '') + '）';
|
||
sel.appendChild(o);
|
||
});
|
||
if (keep) sel.value = keep;
|
||
else if (state.deeplinkQid) sel.value = state.deeplinkQid;
|
||
else if (d.name_qid) sel.value = d.name_qid;
|
||
}
|
||
|
||
function populateClasses() {
|
||
const sel = $('#clsSel');
|
||
const cur = sel.value;
|
||
const set = new Set();
|
||
(state.roster || []).forEach(s => { if (s.cls) set.add(s.cls); });
|
||
const vals = Array.from(set).sort((a, b) => a.localeCompare(b, 'zh', { numeric: true }));
|
||
sel.innerHTML = '<option value="">全部班级</option>' +
|
||
vals.map(v => '<option value="' + esc(v) + '">' + esc(v) + '</option>').join('');
|
||
if (vals.indexOf(cur) >= 0) sel.value = cur;
|
||
else sel.value = '';
|
||
}
|
||
|
||
// 按当前所选班级（或无）客户端重算统计卡片
|
||
function computeDisplayStats(cls) {
|
||
const allStudents = state.roster || [];
|
||
const rows = cls ? state.rows.filter(r => (r.cls || '') === cls) : state.rows;
|
||
const students = cls ? allStudents.filter(s => (s.cls || '') === cls) : allStudents;
|
||
const total = students.length;
|
||
const submitted = rows.length;
|
||
const absent = Math.max(0, total - submitted);
|
||
const rate = total > 0 ? Math.round(submitted / total * 1000) / 10 : 0;
|
||
|
||
const scores = rows.map(r => r.score).filter(v => v !== null && v !== undefined);
|
||
const avg = scores.length ? Math.round(scores.reduce((a, b) => a + b, 0) / scores.length * 100) / 100 : null;
|
||
|
||
const full = state.fullScore || 100;
|
||
const passCount = rows.filter(r => r.score !== null && r.score !== undefined && r.score >= 0.6 * full).length;
|
||
const passRate = submitted > 0 ? Math.round(passCount / submitted * 1000) / 10 : 0;
|
||
|
||
let maxScore = null, minScore = null;
|
||
const maxNames = [], minNames = [];
|
||
rows.forEach(r => {
|
||
if (r.score === null || r.score === undefined) return;
|
||
if (maxScore === null || r.score > maxScore) { maxScore = r.score; maxNames.length = 0; maxNames.push(r.name); }
|
||
else if (r.score === maxScore) maxNames.push(r.name);
|
||
if (minScore === null || r.score < minScore) { minScore = r.score; minNames.length = 0; minNames.push(r.name); }
|
||
else if (r.score === minScore) minNames.push(r.name);
|
||
});
|
||
|
||
const durs = rows.map(r => r.duration).filter(v => v !== null && v !== undefined);
|
||
const avgDur = durs.length ? Math.round(durs.reduce((a, b) => a + b, 0) / durs.length) : null;
|
||
|
||
return {
|
||
total, submitted, absent, rate, avg, passRate,
|
||
maxScore, minScore, maxNames, minNames, avgDur
|
||
};
|
||
}
|
||
|
||
function renderStats() {
|
||
const cls = $('#clsSel').value;
|
||
const st = computeDisplayStats(cls);
|
||
const set = (id, v) => { $(id).textContent = v; };
|
||
set('#sTotal', st.total);
|
||
set('#sSubmit', st.submitted);
|
||
set('#sAbsent', st.absent);
|
||
set('#sRate', st.rate + '%');
|
||
set('#sAvg', st.avg == null ? '-' : st.avg);
|
||
set('#sMax', st.maxScore == null ? '-' : st.maxScore);
|
||
set('#sMin', st.minScore == null ? '-' : st.minScore);
|
||
set('#sPass', st.passRate + '%');
|
||
set('#sDur', st.avgDur == null ? '-' : fmtDur(st.avgDur));
|
||
}
|
||
|
||
// 各面板计数文字按所选班级过滤（成绩明细 / 缺考名单）
|
||
// 缺考数与统计卡片保持一致：过滤后名单 − 过滤后提交（而非二次过滤后端 absent 数组）
|
||
function renderHints() {
|
||
const cls = $('#clsSel').value;
|
||
const rowsForCls = cls ? state.rows.filter(r => (r.cls || '') === cls) : state.rows;
|
||
const rosterForCls = cls ? (state.roster || []).filter(s => (s.cls || '') === cls) : (state.roster || []);
|
||
const absentForCls = Math.max(0, rosterForCls.length - rowsForCls.length);
|
||
$('#tableHint').textContent = '共 ' + rowsForCls.length + ' 人已提交 · 名单 ' + rosterForCls.length + ' 人';
|
||
$('#absentHint').textContent = absentForCls ? '共 ' + absentForCls + ' 人' : '';
|
||
}
|
||
|
||
function fmtDur(sec) {
|
||
if (sec == null) return '-';
|
||
if (sec < 60) return sec + ' 秒';
|
||
const m = Math.floor(sec / 60), s = sec % 60;
|
||
if (m < 60) return m + ' 分 ' + String(s).padStart(2, '0') + ' 秒';
|
||
const h = Math.floor(m / 60);
|
||
return h + ' 小时 ' + String(m % 60).padStart(2, '0') + ' 分';
|
||
}
|
||
|
||
function scoreClass(v) {
|
||
if (v == null) return '';
|
||
if (v >= 90) return 'score-high';
|
||
if (v >= 60) return 'score-mid';
|
||
return 'score-low';
|
||
}
|
||
|
||
function renderTable() {
|
||
const kw = $('#kw').value.trim().toLowerCase();
|
||
const clsFilter = $('#clsSel').value;
|
||
let rows = state.rows.slice();
|
||
|
||
if (clsFilter) rows = rows.filter(r => (r.cls || '') === clsFilter);
|
||
if (kw) rows = rows.filter(r =>
|
||
String(r.sid).toLowerCase().includes(kw) || String(r.name).toLowerCase().includes(kw));
|
||
|
||
const k = state.sortKey, dir = state.sortAsc ? 1 : -1;
|
||
rows.sort((a, b) => {
|
||
let x = a[k], y = b[k];
|
||
if (k === 'sid' || k === 'cls') {
|
||
const na = parseFloat(x), nb = parseFloat(y);
|
||
if (!isNaN(na) && !isNaN(nb)) return (na - nb) * dir;
|
||
return String(x == null ? '' : x).localeCompare(String(y == null ? '' : y), 'zh', { numeric: true }) * dir;
|
||
}
|
||
if (x == null) x = -1;
|
||
if (y == null) y = -1;
|
||
if (typeof x === 'string') return x.localeCompare(String(y), 'zh', { numeric: true }) * dir;
|
||
return (x - y) * dir;
|
||
});
|
||
|
||
const tb = $('#tbody');
|
||
if (!rows.length) {
|
||
tb.innerHTML = '<tr><td colspan="6" class="empty">' +
|
||
(state.rows.length ? '没有匹配的记录' : '暂无提交记录') + '</td></tr>';
|
||
return;
|
||
}
|
||
tb.innerHTML = rows.map(r => {
|
||
const sig = r.sid + '|' + r.score + '|' + r.submit_at;
|
||
const changed = state.prevMap[r.sid] && state.prevMap[r.sid] !== sig;
|
||
const isNew = r.sid && state.newSids.has(r.sid);
|
||
const clsName = (changed ? 'diff ' : '') + (isNew ? 'new' : '');
|
||
return '<tr class="' + clsName.trim() + '">' +
|
||
'<td class="sid">' + esc(r.sid) + '</td>' +
|
||
'<td class="name">' + esc(r.name) + '</td>' +
|
||
'<td>' + esc(r.cls || '') + '</td>' +
|
||
'<td class="score num ' + scoreClass(r.score) + '">' + (r.score == null ? '-' : r.score) + '</td>' +
|
||
'<td class="num">' + esc(r.submit_at) + '</td>' +
|
||
'<td class="num">' + esc(r.duration_txt) + '</td>' +
|
||
'</tr>';
|
||
}).join('');
|
||
|
||
const map = {};
|
||
state.rows.forEach(r => { map[r.sid] = r.sid + '|' + r.score + '|' + r.submit_at; });
|
||
state.prevMap = map;
|
||
|
||
$$('#dataTable th.sortable').forEach(th => {
|
||
const isCur = th.dataset.k === state.sortKey;
|
||
th.innerHTML = th.textContent.replace(/[\s↑↓]+$/, '') + (isCur ? ' <span class="arrow">' + (state.sortAsc ? '↑' : '↓') + '</span>' : '');
|
||
});
|
||
}
|
||
|
||
function renderAbsent() {
|
||
const clsFilter = $('#clsSel').value;
|
||
// 与统计卡片保持一致：缺考 = 过滤后名单中未出现在提交记录里的学生（按 sid 匹配）
|
||
const rowsForCls = clsFilter ? state.rows.filter(r => (r.cls || '') === clsFilter) : state.rows;
|
||
const submittedSids = new Set(rowsForCls.map(r => r.sid).filter(Boolean));
|
||
const rosterForCls = clsFilter ? (state.roster || []).filter(s => (s.cls || '') === clsFilter) : (state.roster || []);
|
||
const list = rosterForCls.filter(s => !submittedSids.has(s.sid));
|
||
const tb = $('#absentBody');
|
||
if (!list.length) {
|
||
tb.innerHTML = '<tr><td colspan="3" class="empty">' + (clsFilter ? '本班全部已提交 🎉' : '全部已提交 🎉') + '</td></tr>';
|
||
return;
|
||
}
|
||
tb.innerHTML = list.map(a =>
|
||
'<tr><td class="sid">' + esc(a.sid) + '</td><td>' + esc(a.name) + '</td><td>' + esc(a.cls || '') + '</td></tr>').join('');
|
||
}
|
||
|
||
function renderUnmatched() {
|
||
const tb = $('#unmatchedBody');
|
||
if (!state.unmatched.length) {
|
||
tb.innerHTML = '<tr><td colspan="3" class="empty">无</td></tr>';
|
||
return;
|
||
}
|
||
tb.innerHTML = state.unmatched.map(u =>
|
||
'<tr><td>' + esc(u.name) + '</td><td class="num">' + (u.score == null ? '-' : u.score) +
|
||
'</td><td class="num">' + esc(u.submit_at) + '</td></tr>').join('');
|
||
}
|
||
|
||
/* ---------------- 自动刷新 ---------------- */
|
||
function schedule() {
|
||
if (state.timer) clearInterval(state.timer);
|
||
if (!$('#autoRefresh').checked) return;
|
||
const sec = parseInt($('#intervalSel').value, 10) || 15;
|
||
state.timer = setInterval(() => refresh(true), sec * 1000);
|
||
}
|
||
|
||
/* ---------------- 全屏 ---------------- */
|
||
function toggleFullscreen() {
|
||
const el = document.documentElement;
|
||
if (!document.fullscreenElement && !document.webkitFullscreenElement) {
|
||
const req = el.requestFullscreen || el.webkitRequestFullscreen;
|
||
if (req) req.call(el);
|
||
} else {
|
||
const exit = document.exitFullscreen || document.webkitExitFullscreen;
|
||
if (exit) exit.call(document);
|
||
}
|
||
}
|
||
function onFsChange() {
|
||
const on = !!(document.fullscreenElement || document.webkitFullscreenElement);
|
||
document.body.classList.toggle('fs-on', on);
|
||
const btn = $('#btnFullscreen');
|
||
if (btn) btn.textContent = on ? '⛶ 退出全屏' : '⛶ 全屏';
|
||
}
|
||
|
||
/* ---------------- 设置 ---------------- */
|
||
async function openSettings() {
|
||
try {
|
||
const c = await api('config_get');
|
||
$('#cfgBase').value = c.base_url || '';
|
||
$('#cfgPrefix').value = c.api_prefix || '/api';
|
||
$('#cfgUser').value = c.username || '';
|
||
$('#cfgPwd').value = '';
|
||
$('#cfgPageSize').value = c.page_size || 200;
|
||
$('#cfgInterval').value = c.refresh_interval || 15;
|
||
$('#cfgTimeout').value = c.timeout || 20;
|
||
$('#cfgKeywords').value = c.name_keywords || '姓名';
|
||
$('#cfgDedupe').checked = !!c.dedupe;
|
||
$('#cfgTemp').checked = !!c.include_temp_save;
|
||
$('#cfgSsl').checked = !!c.verify_ssl;
|
||
const pid = $('#projectSel').value;
|
||
const scores = (c.full_scores && typeof c.full_scores === 'object') ? c.full_scores : {};
|
||
$('#cfgFull').value = (pid && scores[pid] != null) ? scores[pid] : (c.full_score || 100);
|
||
const pObj = state.projects.find(p => p.id === pid);
|
||
$('#cfgFullHint').textContent = pid
|
||
? ('应用于当前试卷：' + (pObj ? pObj.name : pid))
|
||
: '未选择试卷时，作为所有试卷的默认值';
|
||
} catch (e) { showAlert(e.message); }
|
||
$('#pingResult').classList.add('hidden');
|
||
$('#settingsModal').classList.add('open');
|
||
}
|
||
|
||
/* ---------------- 名单 ---------------- */
|
||
let rosterDraft = [];
|
||
|
||
async function openRoster() {
|
||
try {
|
||
const d = await api('roster');
|
||
rosterDraft = d.students || [];
|
||
renderRoster();
|
||
$('#rosterMeta').textContent = '共 ' + rosterDraft.length + ' 人' +
|
||
(d.meta && d.meta.updated_at ? ' · 更新于 ' + d.meta.updated_at : '');
|
||
} catch (e) { showAlert(e.message); }
|
||
$('#rosterModal').classList.add('open');
|
||
}
|
||
|
||
function renderRoster() {
|
||
const kw = $('#rosterSearch').value.trim().toLowerCase();
|
||
const rows = rosterDraft.filter(r => !kw ||
|
||
String(r.sid).toLowerCase().includes(kw) || String(r.name).toLowerCase().includes(kw));
|
||
const tb = $('#rosterBody');
|
||
if (!rows.length) {
|
||
tb.innerHTML = '<tr><td colspan="4" class="empty">暂无名单，请上传文件</td></tr>';
|
||
return;
|
||
}
|
||
tb.innerHTML = rows.map((r, i) => {
|
||
const gi = rosterDraft.indexOf(r);
|
||
return '<tr data-i="' + gi + '">' +
|
||
'<td><input value="' + esc(r.sid) + '" data-f="sid"></td>' +
|
||
'<td><input value="' + esc(r.name) + '" data-f="name"></td>' +
|
||
'<td><input value="' + esc(r.cls || '') + '" data-f="cls" placeholder="可选"></td>' +
|
||
'<td><span class="link-del" data-del="' + gi + '">删除</span></td></tr>';
|
||
}).join('');
|
||
}
|
||
|
||
/* ---------------- 登录门 ---------------- */
|
||
async function showLoginGate() {
|
||
const gate = $('#loginGate');
|
||
if (gate) gate.classList.remove('hidden');
|
||
try {
|
||
const c = await api('config_get');
|
||
$('#lgBase').value = c.base_url || '';
|
||
$('#lgPrefix').value = c.api_prefix || '/api';
|
||
$('#lgUser').value = c.username || '';
|
||
} catch (e) { /* 取不到配置也可继续，手动填写 */ }
|
||
$('#lgPwd').value = '';
|
||
$('#lgLogin').disabled = true;
|
||
const msg = $('#lgMsg');
|
||
msg.textContent = '';
|
||
msg.className = 'login-msg';
|
||
}
|
||
|
||
async function loginTest() {
|
||
const base = $('#lgBase').value.trim();
|
||
const prefix = $('#lgPrefix').value.trim();
|
||
const user = $('#lgUser').value.trim();
|
||
const pwd = $('#lgPwd').value;
|
||
const msg = $('#lgMsg');
|
||
if (!base || !prefix || !user || !pwd) {
|
||
msg.textContent = '请填写系统网址、API 路由、账号与密码';
|
||
msg.className = 'login-msg err';
|
||
return;
|
||
}
|
||
msg.textContent = '正在测试连接…';
|
||
msg.className = 'login-msg';
|
||
try {
|
||
await api('config_save', { method: 'POST', body: { base_url: base, api_prefix: prefix, username: user, password: pwd } });
|
||
const r = await api('ping');
|
||
msg.textContent = '连接成功！读取到 ' + r.projects + ' 个问卷/考试，可登录';
|
||
msg.className = 'login-msg ok';
|
||
$('#lgLogin').disabled = false;
|
||
} catch (e) {
|
||
msg.textContent = '连接失败：' + e.message;
|
||
msg.className = 'login-msg err';
|
||
$('#lgLogin').disabled = true;
|
||
}
|
||
}
|
||
|
||
function loginEnter() {
|
||
const gate = $('#loginGate');
|
||
if (gate) gate.classList.add('hidden');
|
||
try { sessionStorage.setItem('ny_authed', '1'); } catch (e) { /* 忽略隐私模式等异常 */ }
|
||
schedule();
|
||
loadProjects();
|
||
}
|
||
|
||
function logout() {
|
||
try { sessionStorage.removeItem('ny_authed'); } catch (e) {}
|
||
if (state.timer) clearInterval(state.timer);
|
||
const gate = $('#loginGate');
|
||
if (gate) gate.classList.remove('hidden');
|
||
showLoginGate();
|
||
}
|
||
|
||
/* ---------------- 事件绑定 ---------------- */
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
|
||
$('#projectSel').addEventListener('change', () => { state.prevMap = {}; refresh(); });
|
||
$('#nameFieldSel').addEventListener('change', () => { state.prevMap = {}; refresh(); });
|
||
$('#btnRefresh').addEventListener('click', () => refresh(false));
|
||
$('#btnSettings').addEventListener('click', openSettings);
|
||
$('#btnRoster').addEventListener('click', openRoster);
|
||
$('#btnFullscreen').addEventListener('click', toggleFullscreen);
|
||
document.addEventListener('fullscreenchange', onFsChange);
|
||
if (document.webkitFullscreenEnabled === undefined && !document.documentElement.requestFullscreen && !document.documentElement.webkitRequestFullscreen) {
|
||
$('#btnFullscreen').style.display = 'none';
|
||
}
|
||
$('#kw').addEventListener('input', renderTable);
|
||
$('#clsSel').addEventListener('change', () => {
|
||
renderStats();
|
||
renderTable();
|
||
renderAbsent();
|
||
renderHints();
|
||
});
|
||
$('#intervalSel').addEventListener('change', schedule);
|
||
$('#autoRefresh').addEventListener('change', e => {
|
||
if (e.target.checked) { schedule(); refresh(true); }
|
||
else if (state.timer) clearInterval(state.timer);
|
||
});
|
||
|
||
$$('#dataTable th.sortable').forEach(th => {
|
||
th.addEventListener('click', () => {
|
||
if (state.sortKey === th.dataset.k) state.sortAsc = !state.sortAsc;
|
||
else { state.sortKey = th.dataset.k; state.sortAsc = true; }
|
||
renderTable();
|
||
});
|
||
});
|
||
|
||
$('#btnExport').addEventListener('click', () => {
|
||
const pid = $('#projectSel').value;
|
||
if (!pid) return showAlert('请先选择问卷 / 考试');
|
||
location.href = 'api.php?action=export&projectId=' + encodeURIComponent(pid) +
|
||
'&nameQid=' + encodeURIComponent($('#nameFieldSel').value);
|
||
});
|
||
$('#btnExportAbsent').addEventListener('click', () => {
|
||
const pid = $('#projectSel').value;
|
||
if (!pid) return showAlert('请先选择问卷 / 考试');
|
||
location.href = 'api.php?action=export_absent&projectId=' + encodeURIComponent(pid) +
|
||
'&nameQid=' + encodeURIComponent($('#nameFieldSel').value);
|
||
});
|
||
|
||
/* 弹窗关闭 */
|
||
document.addEventListener('click', e => {
|
||
if (e.target.matches('[data-close]') || e.target.classList.contains('modal')) {
|
||
$$('.modal').forEach(m => m.classList.remove('open'));
|
||
}
|
||
});
|
||
|
||
/* 设置保存 */
|
||
$('#btnSaveCfg').addEventListener('click', async () => {
|
||
const payload = {
|
||
base_url: $('#cfgBase').value.trim(),
|
||
api_prefix: $('#cfgPrefix').value.trim(),
|
||
username: $('#cfgUser').value.trim(),
|
||
password: $('#cfgPwd').value,
|
||
page_size: parseInt($('#cfgPageSize').value, 10) || 200,
|
||
refresh_interval: parseInt($('#cfgInterval').value, 10) || 15,
|
||
timeout: parseInt($('#cfgTimeout').value, 10) || 20,
|
||
name_keywords: $('#cfgKeywords').value.trim(),
|
||
dedupe: $('#cfgDedupe').checked,
|
||
include_temp_save: $('#cfgTemp').checked,
|
||
verify_ssl: $('#cfgSsl').checked,
|
||
full_score: parseInt($('#cfgFull').value, 10) || 100,
|
||
project_id: $('#projectSel').value
|
||
};
|
||
try {
|
||
await api('config_save', { method: 'POST', body: payload });
|
||
$('#settingsModal').classList.remove('open');
|
||
const iv = payload.refresh_interval;
|
||
const opts = $$('#intervalSel option').map(o => parseInt(o.value, 10));
|
||
let best = opts[0];
|
||
opts.forEach(v => { if (Math.abs(v - iv) < Math.abs(best - iv)) best = v; });
|
||
$('#intervalSel').value = String(best);
|
||
schedule();
|
||
loadProjects();
|
||
} catch (e) { showAlert(e.message); }
|
||
});
|
||
|
||
$('#btnPing').addEventListener('click', async () => {
|
||
const el = $('#pingResult');
|
||
el.classList.remove('hidden', 'err');
|
||
el.textContent = '正在测试…';
|
||
try {
|
||
const payload = {
|
||
base_url: $('#cfgBase').value.trim(),
|
||
api_prefix: $('#cfgPrefix').value.trim(),
|
||
username: $('#cfgUser').value.trim(),
|
||
password: $('#cfgPwd').value,
|
||
timeout: parseInt($('#cfgTimeout').value, 10) || 20,
|
||
verify_ssl: $('#cfgSsl').checked
|
||
};
|
||
await api('config_save', { method: 'POST', body: payload });
|
||
const r = await api('ping');
|
||
el.textContent = '连接成功！读取到 ' + r.projects + ' 个问卷/考试，耗时 ' + r.elapsed + ' ms';
|
||
} catch (e) {
|
||
el.classList.add('err');
|
||
el.textContent = '连接失败：' + e.message;
|
||
}
|
||
});
|
||
|
||
$('#btnDiag').addEventListener('click', async () => {
|
||
const el = $('#pingResult');
|
||
el.classList.remove('hidden', 'err');
|
||
el.textContent = '诊断中…';
|
||
try {
|
||
const payload = {
|
||
base_url: $('#cfgBase').value.trim(),
|
||
api_prefix: $('#cfgPrefix').value.trim(),
|
||
username: $('#cfgUser').value.trim(),
|
||
password: $('#cfgPwd').value,
|
||
timeout: parseInt($('#cfgTimeout').value, 10) || 20,
|
||
verify_ssl: $('#cfgSsl').checked
|
||
};
|
||
await api('config_save', { method: 'POST', body: payload });
|
||
const d = await api('diag');
|
||
const lines = (d.steps || []).map(s => (s.ok ? '✅ ' : '❌ ') + s.step + '\n ' + s.detail);
|
||
const failed = (d.steps || []).some(s => !s.ok);
|
||
el.classList.toggle('err', failed);
|
||
el.textContent = lines.join('\n');
|
||
} catch (e) {
|
||
el.classList.add('err');
|
||
el.textContent = '诊断失败：' + e.message;
|
||
}
|
||
});
|
||
|
||
/* 名单上传 */
|
||
const zone = $('#dropZone'), fileInput = $('#rosterFile');
|
||
zone.addEventListener('click', () => fileInput.click());
|
||
zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('over'); });
|
||
zone.addEventListener('dragleave', () => zone.classList.remove('over'));
|
||
zone.addEventListener('drop', e => {
|
||
e.preventDefault(); zone.classList.remove('over');
|
||
if (e.dataTransfer.files.length) uploadRoster(e.dataTransfer.files[0]);
|
||
});
|
||
fileInput.addEventListener('change', () => {
|
||
if (fileInput.files.length) uploadRoster(fileInput.files[0]);
|
||
fileInput.value = '';
|
||
});
|
||
|
||
async function uploadRoster(file) {
|
||
const fd = new FormData();
|
||
fd.append('file', file);
|
||
const mode = (document.querySelector('input[name=impMode]:checked') || {}).value || 'replace';
|
||
fd.append('mode', mode);
|
||
try {
|
||
const d = await api('roster_import', { form: fd });
|
||
rosterDraft = d.students || [];
|
||
renderRoster();
|
||
$('#rosterMeta').textContent = '共 ' + rosterDraft.length + ' 人 · 导入完成';
|
||
$('#rosterBadge').textContent = rosterDraft.length;
|
||
} catch (e) { showAlert(e.message); }
|
||
}
|
||
|
||
$('#rosterSearch').addEventListener('input', renderRoster);
|
||
$('#btnAddRow').addEventListener('click', () => {
|
||
rosterDraft.push({ sid: '', name: '', cls: '' });
|
||
renderRoster();
|
||
});
|
||
$('#btnClearRoster').addEventListener('click', async () => {
|
||
if (!confirm('确定清空全部名单？')) return;
|
||
try {
|
||
const d = await api('roster_clear', { method: 'POST' });
|
||
rosterDraft = [];
|
||
renderRoster();
|
||
$('#rosterBadge').textContent = '0';
|
||
$('#rosterMeta').textContent = '共 0 人';
|
||
} catch (e) { showAlert(e.message); }
|
||
});
|
||
|
||
$('#rosterBody').addEventListener('input', e => {
|
||
const tr = e.target.closest('tr');
|
||
if (!tr) return;
|
||
const i = parseInt(tr.dataset.i, 10);
|
||
if (isNaN(i)) return;
|
||
rosterDraft[i][e.target.dataset.f] = e.target.value;
|
||
});
|
||
$('#rosterBody').addEventListener('click', e => {
|
||
const id = e.target.getAttribute && e.target.getAttribute('data-del');
|
||
if (id == null) return;
|
||
rosterDraft.splice(parseInt(id, 10), 1);
|
||
renderRoster();
|
||
});
|
||
|
||
$('#btnSaveRoster').addEventListener('click', async () => {
|
||
try {
|
||
const d = await api('roster_save', { method: 'POST', body: { students: rosterDraft } });
|
||
rosterDraft = d.students || [];
|
||
renderRoster();
|
||
$('#rosterBadge').textContent = rosterDraft.length;
|
||
$('#rosterMeta').textContent = '共 ' + rosterDraft.length + ' 人 · 已保存';
|
||
if ($('#projectSel').value) refresh(true);
|
||
} catch (e) { showAlert(e.message); }
|
||
});
|
||
|
||
/* 启动 */
|
||
// 支持 ?projectId=xxx&nameQid=yyy 直接打开某份问卷
|
||
const qs = new URLSearchParams(location.search);
|
||
if (qs.get('interval')) $('#intervalSel').value = qs.get('interval');
|
||
state.deeplinkProject = qs.get('projectId') || '';
|
||
state.deeplinkQid = qs.get('nameQid') || '';
|
||
|
||
// 登录门
|
||
$('#lgTest').addEventListener('click', loginTest);
|
||
$('#lgLogin').addEventListener('click', loginEnter);
|
||
$('#lgPwd').addEventListener('keydown', e => { if (e.key === 'Enter') loginTest(); });
|
||
$('#btnLogout').addEventListener('click', logout);
|
||
|
||
// 启动：本会话已认证（未重启电脑）则直接进入主界面，跳过登录门；否则显示登录门
|
||
let authed = false;
|
||
try { authed = sessionStorage.getItem('ny_authed') === '1'; } catch (e) {}
|
||
if (authed) {
|
||
const gate = $('#loginGate');
|
||
if (gate) gate.classList.add('hidden');
|
||
schedule();
|
||
loadProjects();
|
||
} else {
|
||
// 先显示登录门，不直接拉取数据（防止依赖一次配置直接查看数据）
|
||
showLoginGate();
|
||
}
|
||
});
|
||
})();
|