成绩查询
Vercel Deploy / deploy (push) Successful in 55s

This commit is contained in:
2026-06-21 14:03:06 +08:00 Unverified
parent 1111372dc9
commit b97a2faaff
4 changed files with 585 additions and 0 deletions
+228
View File
@@ -0,0 +1,228 @@
const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
const sbClient = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
const examSelect = document.getElementById('examSelect');
const nameInput = document.getElementById('studentName');
const admissionInput = document.getElementById('admissionNo');
const searchButton = document.getElementById('searchBtn');
const resultsShell = document.getElementById('searchResults');
let loadedExams = [];
function escapeHtml(value) {
return String(value ?? '').replace(/[&<>"']/g, char => ({
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;'
}[char]));
}
function normalize(value) {
return String(value ?? '').trim();
}
function formatDate(value) {
if (!value) return '-';
const date = new Date(`${value}T00:00:00`);
if (Number.isNaN(date.getTime())) return value;
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
}
function formatScore(value) {
const number = Number(value || 0);
return Number.isInteger(number) ? String(number) : number.toFixed(2);
}
function getScoreTotal(items) {
return (items || []).reduce((sum, item) => sum + Number(item.score || 0), 0);
}
function renderEmpty(message) {
resultsShell.innerHTML = `<div class="empty-state">${escapeHtml(message)}</div>`;
}
function renderError(message) {
resultsShell.innerHTML = `<div class="error-state">${escapeHtml(message)}</div>`;
}
function renderLoading(message) {
resultsShell.innerHTML = `<div class="loading-state">${escapeHtml(message)}</div>`;
}
function getSelectedExam() {
return loadedExams.find(exam => exam.id === examSelect.value) || null;
}
async function loadExams() {
examSelect.innerHTML = '<option value="">正在加载考试项目...</option>';
const { data, error } = await sbClient
.from('exam_exams')
.select('id, exam_code, exam_name, exam_date')
.eq('is_published', true)
.order('exam_date', { ascending: false });
if (error) throw error;
loadedExams = data || [];
if (loadedExams.length === 0) {
examSelect.innerHTML = '<option value="">暂无已发布考试项目</option>';
renderEmpty('暂无已发布考试项目,请先在 Supabase 的 exam_exams 表中新增考试,或执行 exam/schema.sql 中的示例插入语句。');
return;
}
examSelect.innerHTML = [
'<option value="">请选择考试项目</option>',
...loadedExams.map(exam => (
`<option value="${escapeHtml(exam.id)}">${escapeHtml(exam.exam_name)}${escapeHtml(formatDate(exam.exam_date))}</option>`
))
].join('');
}
function renderResult(result, exam) {
const items = [...(result.exam_score_items || [])].sort((a, b) =>
Number(a.sort_order || 0) - Number(b.sort_order || 0) ||
String(a.item_name || '').localeCompare(String(b.item_name || ''), 'zh-CN')
);
const total = getScoreTotal(items);
const rows = items.map(item => {
const score = Number(item.score || 0);
const scoreClass = score < 0 ? 'score-value negative' : 'score-value';
const fullScore = item.full_score === null || item.full_score === undefined ? '-' : formatScore(item.full_score);
return `
<tr>
<td>${escapeHtml(item.item_name)}</td>
<td><span class="${scoreClass}">${escapeHtml(formatScore(item.score))}</span></td>
<td>${escapeHtml(fullScore)}</td>
</tr>
`;
}).join('');
resultsShell.innerHTML = `
<div class="candidate-card">
<div>
<h3 class="candidate-name">${escapeHtml(result.student_name)}</h3>
<div class="candidate-meta">
<span>准考证号:${escapeHtml(result.admission_no)}</span>
<span>班级:${escapeHtml(result.class_name || '-')}</span>
</div>
</div>
<span class="exam-id-pill">独立成绩单</span>
</div>
<div class="exam-list">
<article class="exam-block">
<div class="exam-block-header">
<div>
<h3 class="exam-title">${escapeHtml(exam.exam_name)}</h3>
<div class="exam-date">考试日期:${escapeHtml(formatDate(exam.exam_date))}</div>
</div>
<div class="exam-total">
本场总分<br><strong>${escapeHtml(formatScore(total))}</strong>
</div>
</div>
<div class="table-wrapper">
<table class="score-table">
<thead>
<tr>
<th>成绩项目</th>
<th>得分</th>
<th>满分</th>
</tr>
</thead>
<tbody>${rows || '<tr><td colspan="3">暂无成绩项目</td></tr>'}</tbody>
</table>
</div>
<p class="exam-remark">备注:${escapeHtml(result.remark || '无')}</p>
</article>
</div>
`;
}
async function handleSearch() {
const exam = getSelectedExam();
const studentName = normalize(nameInput.value);
const admissionNo = normalize(admissionInput.value);
if (!exam || !studentName || !admissionNo) {
renderEmpty('请同时选择考试项目,并输入姓名和准考证号。');
return;
}
renderLoading('正在连接成绩数据库并执行查询...');
try {
const { data, error } = await sbClient
.from('exam_results')
.select(`
id,
student_name,
admission_no,
class_name,
remark,
exam_score_items (
id,
item_name,
score,
full_score,
sort_order
)
`)
.eq('exam_id', exam.id)
.eq('student_name', studentName)
.eq('admission_no', admissionNo)
.maybeSingle();
if (error) throw error;
if (!data) {
renderEmpty('未查询到该考试项目下的匹配成绩,请核对考试项目、姓名和准考证号。');
return;
}
renderResult(data, exam);
} catch (error) {
renderError(`查询失败:${error.message}`);
}
}
function applyQueryParams() {
const params = new URLSearchParams(window.location.search);
const presetExam = params.get('examId') || params.get('exam') || '';
const presetName = params.get('name') || '';
const presetAdmissionNo = params.get('admissionNo') || params.get('ticket') || '';
if (presetExam) {
const matchedExam = loadedExams.find(exam => exam.id === presetExam || exam.exam_code === presetExam);
if (matchedExam) examSelect.value = matchedExam.id;
}
if (presetName) nameInput.value = presetName;
if (presetAdmissionNo) admissionInput.value = presetAdmissionNo;
if (examSelect.value && presetName && presetAdmissionNo) handleSearch();
}
async function init() {
try {
await loadExams();
applyQueryParams();
} catch (error) {
examSelect.innerHTML = '<option value="">考试项目加载失败</option>';
renderError(`考试项目加载失败:${error.message}`);
}
}
searchButton.addEventListener('click', handleSearch);
[examSelect, nameInput, admissionInput].forEach(input => {
input.addEventListener('keydown', event => {
if (event.key === 'Enter') handleSearch();
});
});
init();
+224
View File
@@ -0,0 +1,224 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>成绩查询系统</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/tech-query.css">
<style>
.exam-search-grid {
grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.9fr) minmax(220px, 1.1fr) minmax(132px, 0.52fr);
}
.candidate-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
padding: 18px;
border-bottom: 1px solid rgba(96, 116, 148, 0.14);
background: rgba(248, 251, 255, 0.72);
}
.candidate-name {
margin: 0 0 6px;
font-size: 24px;
color: #172033;
}
.candidate-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
color: #66758a;
font-size: 14px;
}
.exam-id-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
background: #eef6ff;
color: #2563eb;
font-weight: 700;
white-space: nowrap;
}
.exam-list {
display: grid;
gap: 14px;
padding: 16px;
}
.exam-block {
overflow: hidden;
border: 1px solid rgba(120, 144, 176, 0.2);
border-radius: 16px;
background: #ffffff;
}
.exam-block-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(20, 184, 166, 0.06));
border-bottom: 1px solid rgba(120, 144, 176, 0.16);
}
.exam-title {
margin: 0;
font-size: 18px;
color: #172033;
}
.exam-date {
margin-top: 4px;
color: #66758a;
font-size: 13px;
}
.exam-total {
text-align: right;
color: #2563eb;
font-weight: 800;
white-space: nowrap;
}
.exam-total strong {
font-family: var(--font-display);
font-size: 28px;
}
.score-table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
}
.score-table th,
.score-table td {
padding: 14px 18px;
border-bottom: 1px solid rgba(120, 144, 176, 0.14);
text-align: left;
vertical-align: top;
}
.score-table th {
background: #f8fbff;
color: #4f5f74;
font-size: 13px;
font-weight: 700;
}
.score-value {
color: #047857;
font-weight: 800;
}
.score-value.negative {
color: #be123c;
}
.exam-remark {
margin: 0;
padding: 14px 18px 16px;
color: #66758a;
line-height: 1.7;
background: #fbfdff;
}
@media (max-width: 1040px) {
.exam-search-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.exam-search-grid,
.candidate-card,
.exam-block-header {
grid-template-columns: 1fr;
}
.exam-total {
text-align: left;
}
}
</style>
</head>
<body>
<main class="page-shell">
<section class="page-header">
<div class="hero-card">
<span class="eyebrow">Exam Result</span>
<h1>成绩查询中心</h1>
<p>请选择考试项目,再输入姓名和准考证号进行核验。每场考试独立建档,成绩互不关联,支持负分项目和备注信息。</p>
<div class="hero-meta">
<span class="meta-chip">查询条件:考试 + 姓名 + 准考证号</span>
<span class="meta-chip">每场考试独立记录</span>
<span class="meta-chip">成绩项目可为负分</span>
</div>
</div>
<aside class="stat-card">
<div>
<div class="stat-label">Module</div>
<div class="stat-value">EXAM</div>
</div>
<p>按考试项目分别查询成绩、扣分和备注。</p>
</aside>
</section>
<section class="panel-card">
<div class="panel-title-row">
<div>
<h2 class="panel-title">查询条件</h2>
<div class="panel-subtitle">考试项目、姓名和准考证号必须同时匹配</div>
</div>
</div>
<div class="search-grid exam-search-grid">
<div class="form-group">
<label class="form-label" for="examSelect">考试项目</label>
<select id="examSelect" class="tech-input"></select>
</div>
<div class="form-group">
<label class="form-label" for="studentName">姓名</label>
<input type="text" id="studentName" class="tech-input" autocomplete="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label class="form-label" for="admissionNo">准考证号</label>
<input type="text" id="admissionNo" class="tech-input" inputmode="latin" placeholder="请输入准考证号">
</div>
<button id="searchBtn" class="tech-button" type="button">查询成绩</button>
</div>
</section>
<section class="panel-card results-card">
<div class="panel-title-row">
<div>
<h2 class="panel-title">查询结果</h2>
<div class="panel-subtitle">只展示当前所选考试项目的成绩</div>
</div>
</div>
<div id="searchResults" class="results-shell">
<div class="empty-state">请选择考试项目,并输入姓名和准考证号后开始查询。</div>
</div>
</section>
</main>
<footer class="page-footer">
<p>© 2026 BI Intelligent Query Interface</p>
</footer>
<script defer src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script defer src="./exam.js?v=20260621"></script>
</body>
</html>
+123
View File
@@ -0,0 +1,123 @@
-- PostgreSQL / Supabase schema for the exam result query module.
-- Each exam is independent. Scores are stored under one exam only and do
-- not affect any other exam.
create extension if not exists pgcrypto;
create table if not exists public.exam_exams (
id uuid primary key default gen_random_uuid(),
exam_code text not null unique,
exam_name text not null,
exam_date date,
is_published boolean not null default true,
created_at timestamptz not null default now(),
updated_at timestamptz not null default now()
);
create table if not exists public.exam_results (
id uuid primary key default gen_random_uuid(),
exam_id uuid not null references public.exam_exams(id) on delete cascade,
student_name text not null,
admission_no text not null,
class_name text,
remark text,
created_at timestamptz not null default now(),
updated_at timestamptz not null default now(),
constraint exam_results_one_candidate_per_exam unique (exam_id, admission_no, student_name)
);
create table if not exists public.exam_score_items (
id uuid primary key default gen_random_uuid(),
result_id uuid not null references public.exam_results(id) on delete cascade,
item_name text not null,
score numeric(10, 2) not null,
full_score numeric(10, 2),
sort_order integer not null default 0,
created_at timestamptz not null default now()
);
create index if not exists exam_results_lookup_idx
on public.exam_results (exam_id, student_name, admission_no);
create unique index if not exists exam_score_items_unique_item_idx
on public.exam_score_items (result_id, item_name);
create index if not exists exam_score_items_result_idx
on public.exam_score_items (result_id, sort_order);
grant select on public.exam_exams to anon, authenticated;
grant select on public.exam_results to anon, authenticated;
grant select on public.exam_score_items to anon, authenticated;
alter table public.exam_exams enable row level security;
alter table public.exam_results enable row level security;
alter table public.exam_score_items enable row level security;
drop policy if exists "Public can read published exams" on public.exam_exams;
create policy "Public can read published exams"
on public.exam_exams
for select
to anon, authenticated
using (is_published = true);
drop policy if exists "Public can read published exam results" on public.exam_results;
create policy "Public can read published exam results"
on public.exam_results
for select
to anon, authenticated
using (
exists (
select 1
from public.exam_exams
where public.exam_exams.id = exam_results.exam_id
and public.exam_exams.is_published = true
)
);
drop policy if exists "Public can read published score items" on public.exam_score_items;
create policy "Public can read published score items"
on public.exam_score_items
for select
to anon, authenticated
using (
exists (
select 1
from public.exam_results
join public.exam_exams on public.exam_exams.id = public.exam_results.exam_id
where public.exam_results.id = exam_score_items.result_id
and public.exam_exams.is_published = true
)
);
insert into public.exam_exams (exam_code, exam_name, exam_date)
values
('2026-spring-midterm', '2026 年春季期中考试', '2026-04-18'),
('2026-spring-monthly-01', '2026 年春季第一次月考', '2026-03-12')
on conflict (exam_code) do nothing;
with target_exam as (
select id from public.exam_exams where exam_code = '2026-spring-midterm'
),
inserted_result as (
insert into public.exam_results (exam_id, student_name, admission_no, class_name, remark)
select id, '张三', 'EX20260001', '高一 1 班', '本场考试独立计分,实验规范扣分仅影响本场期中考试。'
from target_exam
on conflict (exam_id, admission_no, student_name) do update
set class_name = excluded.class_name,
remark = excluded.remark,
updated_at = now()
returning id
)
insert into public.exam_score_items (result_id, item_name, score, full_score, sort_order)
select id, item_name, score, full_score, sort_order
from inserted_result,
(values
('语文', 108, 150, 10),
('数学', 126, 150, 20),
('英语', 119, 150, 30),
('实验规范扣分', -2, null, 40)
) as item_rows(item_name, score, full_score, sort_order)
on conflict (result_id, item_name) do update
set score = excluded.score,
full_score = excluded.full_score,
sort_order = excluded.sort_order;
+10
View File
@@ -52,6 +52,16 @@
<span class="entry-arrow"></span> <span class="entry-arrow"></span>
</div> </div>
</a> </a>
<a class="entry-card" href="./exam/index.html">
<div class="entry-kicker">Module 04</div>
<h2>成绩查询</h2>
<p>按姓名和准考证号核验身份,集中展示多场考试、成绩项目、负分扣分和备注说明。</p>
<div class="entry-meta">
<span>进入成绩模块</span>
<span class="entry-arrow"></span>
</div>
</a>
</section> </section>
</main> </main>