mirror of
https://gitee.com/myxzgzs/RSJselet
synced 2025-08-08 00:02:41 +08:00
349 lines
16 KiB
HTML
349 lines
16 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="/static/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container mt-5">
|
||
<div class="card mb-4">
|
||
<div class="card-header text-center py-3">
|
||
<h2>成绩查询系统</h2>
|
||
<p class="text-center text-info mb-0">请输入准考证号和身份证号查询成绩</p>
|
||
</div>
|
||
<div class="card-body p-4">
|
||
<form id="queryForm">
|
||
<div class="mb-3">
|
||
<label for="zkzh" class="form-label">准考证号</label>
|
||
<input type="text" class="form-control" id="zkzh" required>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="sfzh" class="form-label">身份证号</label>
|
||
<input type="text" class="form-control" id="sfzh" required>
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<button type="submit" class="btn btn-primary btn-lg">查询成绩</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- 等待信息 -->
|
||
<div id="waitingInfo" class="waiting-info alert alert-info">
|
||
<div class="text-center mb-3">
|
||
<div class="spinner-border text-primary" role="status">
|
||
<span class="visually-hidden">加载中...</span>
|
||
</div>
|
||
</div>
|
||
<h5 class="text-center">您的查询正在排队处理中</h5>
|
||
<p>当前队列位置: <span id="queuePosition">--</span></p>
|
||
<p>预计等待时间: <span id="estimatedTime">--</span> 秒</p>
|
||
<div class="progress">
|
||
<div id="waitingProgress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 加载指示器 -->
|
||
<div id="loadingIndicator" class="loading-indicator">
|
||
<div class="spinner-border text-primary" role="status">
|
||
<span class="visually-hidden">加载中...</span>
|
||
</div>
|
||
<p class="mt-2">正在查询，请稍候...</p>
|
||
</div>
|
||
|
||
<!-- 错误提示 -->
|
||
<div id="errorAlert" class="alert alert-danger" style="display: none;"></div>
|
||
|
||
<!-- 查询结果 -->
|
||
<div id="resultContainer" style="display: none;">
|
||
<div class="alert alert-success mt-4">
|
||
查询成功！以下是您的成绩信息：
|
||
</div>
|
||
<table class="table table-bordered result-table">
|
||
<tbody>
|
||
<tr>
|
||
<th width="30%">姓名</th>
|
||
<td id="result-xm"></td>
|
||
</tr>
|
||
<tr>
|
||
<th>准考证号</th>
|
||
<td id="result-zkzh"></td>
|
||
</tr>
|
||
<!-- <tr>
|
||
<th>身份证号</th>
|
||
<td id="result-sfzh"></td>
|
||
</tr> -->
|
||
<tr>
|
||
<th>单位代码</th>
|
||
<td id="result-dwdm"></td>
|
||
</tr>
|
||
<tr>
|
||
<th>单位名称</th>
|
||
<td id="result-dwmc"></td>
|
||
</tr>
|
||
<tr>
|
||
<th>岗位代码</th>
|
||
<td id="result-zprs"></td>
|
||
</tr>
|
||
<tr>
|
||
<th>岗位名称</th>
|
||
<td id="result-sjh"></td>
|
||
</tr>
|
||
<!-- <tr>
|
||
<th>考点名称</th>
|
||
<td id="result-kdmc"></td>
|
||
</tr> -->
|
||
<!-- <tr>
|
||
<th>考场号</th>
|
||
<td id="result-kch"></td>
|
||
</tr>
|
||
<tr>
|
||
<th>座位号</th>
|
||
<td id="result-zwh"></td>
|
||
</tr> -->
|
||
<tr>
|
||
<th>笔试成绩</th>
|
||
<td id="result-bscj" class="fw-bold"></td>
|
||
</tr>
|
||
<tr>
|
||
<th>排名</th>
|
||
<td id="result-pm"></td>
|
||
</tr>
|
||
<tr id="bz-row" style="display: none;">
|
||
<th>备注</th>
|
||
<td id="result-bz"></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center text-muted small">
|
||
<p>© 2025 成绩查询系统 | 如有问题请联系管理员</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 不需要引用外部JS库 -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 表单提交
|
||
const queryForm = document.getElementById('queryForm');
|
||
const loadingIndicator = document.getElementById('loadingIndicator');
|
||
const errorAlert = document.getElementById('errorAlert');
|
||
const resultContainer = document.getElementById('resultContainer');
|
||
const waitingInfo = document.getElementById('waitingInfo');
|
||
const waitingProgress = document.getElementById('waitingProgress');
|
||
|
||
queryForm.addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
|
||
// 获取表单数据
|
||
const zkzh = document.getElementById('zkzh').value.trim();
|
||
const sfzh = document.getElementById('sfzh').value.trim(); // 使用身份证号字段
|
||
|
||
// 验证表单
|
||
if (!zkzh) {
|
||
showError('请输入准考证号');
|
||
return;
|
||
}
|
||
|
||
if (!sfzh) {
|
||
showError('请输入身份证号');
|
||
return;
|
||
}
|
||
|
||
// 隐藏之前的错误和结果
|
||
errorAlert.style.display = 'none';
|
||
resultContainer.style.display = 'none';
|
||
waitingInfo.style.display = 'none';
|
||
|
||
// 显示加载指示器
|
||
loadingIndicator.style.display = 'block';
|
||
|
||
try {
|
||
// 准备请求数据 - 确保准考证号和身份证号为字符串
|
||
const queryData = {
|
||
zkzh: zkzh.toString(),
|
||
sfzh: sfzh.toString() // 添加身份证号作为验证
|
||
};
|
||
|
||
// 调试输出请求数据
|
||
console.log("发送请求数据:", queryData);
|
||
|
||
// 发送请求
|
||
const response = await fetch('/api/query_score', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(queryData)
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
// 调试输出
|
||
console.log("API响应数据:", data);
|
||
|
||
// 隐藏加载指示器
|
||
loadingIndicator.style.display = 'none';
|
||
|
||
// 处理响应
|
||
if (data.success) {
|
||
// 如果有队列位置信息，显示等待界面
|
||
if (data.queue_position && data.estimated_wait_time) {
|
||
showWaitingInfo(data.queue_position, data.estimated_wait_time);
|
||
pollQueryStatus(data.queue_position, data.estimated_wait_time);
|
||
return;
|
||
}
|
||
|
||
// 显示结果
|
||
if (data.data) {
|
||
console.log("查询结果数据:", data.data);
|
||
displayResult(data.data);
|
||
}
|
||
} else {
|
||
showError(data.message || '查询失败，请稍后再试');
|
||
}
|
||
} catch (error) {
|
||
console.error('查询失败:', error);
|
||
loadingIndicator.style.display = 'none';
|
||
showError('系统错误，请稍后再试');
|
||
}
|
||
});
|
||
|
||
// 显示错误信息
|
||
function showError(message) {
|
||
errorAlert.textContent = message;
|
||
errorAlert.style.display = 'block';
|
||
loadingIndicator.style.display = 'none';
|
||
waitingInfo.style.display = 'none';
|
||
}
|
||
|
||
// 显示查询结果
|
||
function displayResult(data) {
|
||
// 显示考生基本信息
|
||
document.getElementById('result-xm').textContent = data.xm || '--';
|
||
document.getElementById('result-zkzh').textContent = data.zkzh || '--';
|
||
document.getElementById('result-zprs').textContent = data.zprs || '--';
|
||
document.getElementById('result-sjh').textContent = data.sjh || '--';
|
||
// document.getElementById('result-sfzh').textContent = data.sfzh || '--';
|
||
document.getElementById('result-dwmc').textContent = data.dwmc || '--';
|
||
document.getElementById('result-dwdm').textContent = data.dwdm || '--';
|
||
//document.getElementById('result-kdmc').textContent = data.kdmc || '--';
|
||
//document.getElementById('result-kch').textContent = data.kch || '--';
|
||
//document.getElementById('result-zwh').textContent = data.zwh || '--';
|
||
|
||
// 设置成绩并添加颜色
|
||
const bscjElement = document.getElementById('result-bscj');
|
||
bscjElement.textContent = data.bscj || '--';
|
||
|
||
// 根据成绩添加颜色
|
||
const score = parseFloat(data.bscj);
|
||
if (score >= 90) {
|
||
bscjElement.classList.add('text-success');
|
||
} else if (score >= 80) {
|
||
bscjElement.classList.add('text-primary');
|
||
} else if (score >= 60) {
|
||
bscjElement.classList.add('text-warning');
|
||
} else {
|
||
bscjElement.classList.add('text-danger');
|
||
}
|
||
|
||
document.getElementById('result-pm').textContent = data.pm || '--';
|
||
|
||
// 处理备注字段，有数据时显示，没有数据时隐藏
|
||
const bzRow = document.getElementById('bz-row');
|
||
if (data.bz && data.bz.trim() !== '') {
|
||
document.getElementById('result-bz').textContent = data.bz;
|
||
bzRow.style.display = '';
|
||
} else {
|
||
bzRow.style.display = 'none';
|
||
}
|
||
|
||
resultContainer.style.display = 'block';
|
||
}
|
||
|
||
// 显示等待信息
|
||
function showWaitingInfo(position, estimatedTime) {
|
||
document.getElementById('queuePosition').textContent = position;
|
||
document.getElementById('estimatedTime').textContent = estimatedTime;
|
||
|
||
const progressPercentage = Math.min(100, Math.max(5, 100 - (position / 10)));
|
||
waitingProgress.style.width = progressPercentage + '%';
|
||
|
||
waitingInfo.style.display = 'block';
|
||
}
|
||
|
||
// 轮询查询状态
|
||
function pollQueryStatus(position, estimatedTime) {
|
||
// 创建一个模拟任务ID，实际应用中应该从服务器获取
|
||
const taskId = 'task_' + Math.random().toString(36).substr(2, 9);
|
||
|
||
let remainingTime = estimatedTime;
|
||
const totalTime = estimatedTime;
|
||
|
||
// 更新进度条
|
||
const updateProgress = () => {
|
||
remainingTime -= 0.1;
|
||
const progress = Math.min(100, Math.max(0, ((totalTime - remainingTime) / totalTime) * 100));
|
||
waitingProgress.style.width = progress + '%';
|
||
|
||
if (remainingTime <= 0) {
|
||
clearInterval(progressInterval);
|
||
}
|
||
};
|
||
|
||
const progressInterval = setInterval(updateProgress, 100);
|
||
|
||
// 模拟轮询
|
||
setTimeout(async () => {
|
||
try {
|
||
// 在实际应用中，应该调用 /api/query_status/{taskId} 获取结果
|
||
// 这里直接再次调用查询接口
|
||
const zkzhVal = document.getElementById('zkzh').value.trim();
|
||
const sfzhVal = document.getElementById('sfzh').value.trim(); // 使用身份证号字段
|
||
const queryData = {
|
||
zkzh: zkzhVal.toString(),
|
||
sfzh: sfzhVal.toString() // 添加身份证号作为验证
|
||
};
|
||
|
||
const response = await fetch('/api/query_score', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(queryData)
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
// 调试输出
|
||
console.log("轮询响应:", data);
|
||
|
||
clearInterval(progressInterval);
|
||
waitingInfo.style.display = 'none';
|
||
|
||
if (data.success && data.data) {
|
||
console.log("轮询查询返回的数据:", data.data);
|
||
displayResult(data.data);
|
||
} else if (data.queue_position && data.estimated_wait_time) {
|
||
// 如果仍在等待，继续轮询
|
||
showWaitingInfo(data.queue_position, data.estimated_wait_time);
|
||
pollQueryStatus(data.queue_position, data.estimated_wait_time);
|
||
} else {
|
||
showError(data.message || '查询失败，请稍后再试');
|
||
}
|
||
} catch (error) {
|
||
clearInterval(progressInterval);
|
||
waitingInfo.style.display = 'none';
|
||
showError('系统错误，请稍后再试');
|
||
}
|
||
}, estimatedTime * 1000);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |