ny-exam-platform/dashboard.php

<?php
declare(strict_types=1);
require __DIR__ . '/bootstrap.php';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>数据看板 · <?= htmlspecialchars(NY_APP_NAME) ?></title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>

<div class="wrap">

  <div class="dash-hero">
    <div class="brand">
      <span class="logo">NY</span>
      <div class="brand-text">
        <strong>NY问卷考试系统 · 数据看板</strong>
        <small>班级整体情况 · 面向班主任与学生</small>
      </div>
    </div>
    <div class="dash-controls">
      <select id="projectSel"><option value="">请选择问卷 / 考试</option></select>
      <label class="switch"><input type="checkbox" id="autoRefresh" checked><span></span></label>
      <select id="intervalSel" style="width:auto">
        <option value="5">5 秒</option>
        <option value="10">10 秒</option>
        <option value="15" selected>15 秒</option>
        <option value="30">30 秒</option>
        <option value="60">60 秒</option>
      </select>
      <button class="btn" id="btnRefresh">刷新</button>
      <a class="back" href="index.php">← 返回主系统</a>
    </div>
  </div>

  <div class="sec-title">整体概况</div>
  <section class="cards" id="summary">
    <div class="card accent-blue"><span>名单总人数</span><b id="oTotal">-</b></div>
    <div class="card ok accent-green"><span>已提交</span><b id="oSubmit">-</b></div>
    <div class="card warn accent-orange"><span>缺考</span><b id="oAbsent">-</b></div>
    <div class="card accent-purple"><span>提交率</span><b id="oRate">-</b></div>
    <div class="card accent-teal"><span>平均分</span><b id="oAvg">-</b></div>
    <div class="card accent-indigo"><span>合格率(≥60%满分)</span><b id="oPass">-</b></div>
  </section>

  <div class="sec-title">各班整体情况 <span class="tag-gray" id="classCount"></span></div>
  <div class="class-grid" id="classGrid">
    <div class="empty">请选择问卷 / 考试以查看各班数据</div>
  </div>

  <div style="margin-top:18px;font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:6px;">
    最后更新：<span id="lastUpdate">—</span><i id="liveDot" class="dot"></i>
  </div>
</div>

<script>
const $ = s => document.querySelector(s);
const $$ = s => Array.from(document.querySelectorAll(s));
function esc(s){ return String(s == null ? '' : s).replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
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 rateColor(r){
  if (r >= 90) return 'var(--ok)';
  if (r >= 60) return 'var(--warn)';
  return 'var(--danger)';
}

async function api(action, opts){
  opts = opts || {};
  let url = 'api.php?action=' + encodeURIComponent(action);
  if (opts.params) {
    for (const k in opts.params) url += '&' + k + '=' + encodeURIComponent(opts.params[k]);
  }
  const init = { method: 'GET', headers: { 'Accept': 'application/json' } };
  try {
    const res = await fetch(url, init);
    const j = await res.json();
    if (j && j.ok) return j.data;
    throw new Error((j && (j.msg || j.error)) || '请求失败');
  } catch (e) {
    throw new Error(e.message || '网络错误');
  }
}

async function loadProjects(){
  try {
    const list = await api('projects');
    const sel = $('#projectSel');
    const keep = sel.value;
    sel.innerHTML = '<option value="">请选择问卷 / 考试</option>' +
      list.map(p => '<option value="' + esc(p.id) + '">' + esc(p.name) + '（' + esc(p.mode || '') + '）</option>').join('');
    if (keep) sel.value = keep;
  } catch (e) {
    $('#classGrid').innerHTML = '<div class="empty">加载问卷列表失败：' + esc(e.message) + '</div>';
  }
}

function renderSummary(d){
  const o = d.overall || {};
  $('#oTotal').textContent  = o.roster_total ?? '-';
  $('#oSubmit').textContent = o.submitted ?? '-';
  $('#oAbsent').textContent = o.absent ?? '-';
  $('#oRate').textContent   = (o.submit_rate != null ? o.submit_rate : '-') + (o.submit_rate != null ? '%' : '');
  $('#oAvg').textContent    = o.avg_score != null ? o.avg_score : '-';
  $('#oPass').textContent   = (o.pass_rate != null ? o.pass_rate : '-') + (o.pass_rate != null ? '%' : '');
}

function renderClasses(d){
  const classes = d.classes || [];
  $('#classCount').textContent = classes.length ? classes.length + ' 个班级' : '';
  if (!classes.length) {
    $('#classGrid').innerHTML = '<div class="empty">暂无班级数据（名单未导入班级信息）</div>';
    return;
  }
  $('#classGrid').innerHTML = classes.map(c => {
    const rate = c.rate || 0;
    const color = rateColor(rate);
    const passCls = c.pass_rate >= 60 ? 'metric-ok' : (c.pass_rate > 0 ? 'metric-warn' : '');
    return '<div class="class-card">' +
      '<h3><span>' + esc(c.class) + '</span><span class="rate-num" style="color:' + color + '">' + rate + '%</span></h3>' +
      '<div class="sub">已提交 ' + c.submitted + ' / 总人数 ' + c.total + ' · 缺考 ' + c.absent + '</div>' +
      '<div class="bar"><i style="width:' + rate + '%;background:' + color + '"></i></div>' +
      '<div class="class-metrics">' +
        '<div class="m"><span>平均分</span><b>' + (c.avg != null ? c.avg : '-') + '</b></div>' +
        '<div class="m ' + passCls + '"><span>合格率</span><b>' + c.pass_rate + '%</b></div>' +
        '<div class="m metric-ok"><span>最高分</span><b>' + (c.max != null ? c.max : '-') + '</b></div>' +
        '<div class="m metric-danger"><span>最低分</span><b>' + (c.min != null ? c.min : '-') + '</b></div>' +
      '</div>' +
    '</div>';
  }).join('');
}

async function loadDashboard(){
  const pid = $('#projectSel').value;
  if (!pid) {
    $('#classGrid').innerHTML = '<div class="empty">请选择问卷 / 考试以查看各班数据</div>';
    return;
  }
  try {
    const d = await api('dashboard', { params: { projectId: pid } });
    renderSummary(d);
    renderClasses(d);
    $('#lastUpdate').textContent = d.updated_at || '-';
    $('#liveDot').classList.add('on');
    setTimeout(() => $('#liveDot').classList.remove('on'), 900);
  } catch (e) {
    $('#classGrid').innerHTML = '<div class="empty">数据加载失败：' + esc(e.message) + '</div>';
  }
}

function schedule(){
  if (window.__timer) clearInterval(window.__timer);
  if (!$('#autoRefresh').checked) return;
  const sec = parseInt($('#intervalSel').value, 10) || 15;
  window.__timer = setInterval(loadDashboard, sec * 1000);
}

$('#projectSel').addEventListener('change', loadDashboard);
$('#btnRefresh').addEventListener('click', loadDashboard);
$('#autoRefresh').addEventListener('change', schedule);
$('#intervalSel').addEventListener('change', schedule);

loadProjects().then(loadDashboard);
schedule();
</script>
</body>
</html>