boyue2025/RSJselet
3
0
Fork 0
mirror of https://gitee.com/myxzgzs/RSJselet synced 2025-08-08 08:12:41 +08:00
Code Issues Packages Projects Releases Wiki Activity
RSJselet/html/index.html

344 lines
16 KiB
HTML
Raw Normal View History

Initial commit
2025-07-10 13:42:54 +08:00
<!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>
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
<p class="text-center text-info mb-0">请输入准考证号和身份证号验证查询成绩</p>
Initial commit
2025-07-10 13:42:54 +08:00
</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">
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
<label for="sfzh" class="form-label">身份证号</label>
<input type="text" class="form-control" id="sfzh" required>
Initial commit
2025-07-10 13:42:54 +08:00
</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-sjh"></td>
</tr>
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
<tr>
<th>身份证号</th>
<td id="result-sfzh"></td>
</tr>
Initial commit
2025-07-10 13:42:54 +08:00
<tr>
<th>单位名称</th>
<td id="result-dwmc"></td>
</tr>
<tr>
<th>职位名称</th>
<td id="result-zwmc"></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>
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
<tr id="bz-row" style="display: none;">
Initial commit
2025-07-10 13:42:54 +08:00
<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();
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
const sfzh = document.getElementById('sfzh').value.trim(); // 使用身份证号字段
Initial commit
2025-07-10 13:42:54 +08:00
// 验证表单
if (!zkzh) {
showError('请输入准考证号');
return;
}
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
if (!sfzh) {
showError('请输入身份证号');
Initial commit
2025-07-10 13:42:54 +08:00
return;
}
// 隐藏之前的错误和结果
errorAlert.style.display = 'none';
resultContainer.style.display = 'none';
waitingInfo.style.display = 'none';
// 显示加载指示器
loadingIndicator.style.display = 'block';
try {
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
// 准备请求数据 - 确保准考证号和身份证号为字符串
Initial commit
2025-07-10 13:42:54 +08:00
const queryData = {
zkzh: zkzh.toString(),
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
sfzh: sfzh.toString() // 添加身份证号作为验证
Initial commit
2025-07-10 13:42:54 +08:00
};
// 调试输出请求数据
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-sjh').textContent = data.sjh || '--';
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
document.getElementById('result-sfzh').textContent = data.sfzh || '--';
Initial commit
2025-07-10 13:42:54 +08:00
document.getElementById('result-dwmc').textContent = data.dwmc || '--';
document.getElementById('result-zwmc').textContent = data.zwmc || '--';
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 || '--';
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
// 处理备注字段，有数据时显示，没有数据时隐藏
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';
}
Initial commit
2025-07-10 13:42:54 +08:00
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();
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
const sfzhVal = document.getElementById('sfzh').value.trim(); // 使用身份证号字段
Initial commit
2025-07-10 13:42:54 +08:00
const queryData = {
zkzh: zkzhVal.toString(),
更新，并增加测试脚本
2025-07-11 10:43:14 +08:00
sfzh: sfzhVal.toString() // 添加身份证号作为验证
Initial commit
2025-07-10 13:42:54 +08:00
};
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>
Reference in New Issue Copy Permalink