141 lines
3.5 KiB
HTML
141 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>挑战赛数据展示</title>
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
table,
|
|
th,
|
|
td {
|
|
border: 1px solid black;
|
|
}
|
|
th,
|
|
td {
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>测试结果</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>时间</th>
|
|
<th>学号</th>
|
|
<th>名称</th>
|
|
<th>得分</th>
|
|
<th>运行时间</th>
|
|
<th>详细信息</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="data-table-body">
|
|
<!-- 动态填充表格数据 -->
|
|
</tbody> </table
|
|
><!-- 模态窗口 -->
|
|
<div id="detailsModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<h2>详细信息</h2>
|
|
<div id="modal-details"></div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
.modal-content {
|
|
background-color: white;
|
|
margin: 15% auto;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 80%;
|
|
}
|
|
.close {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
.close:hover,
|
|
.close:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<script>
|
|
async function fetchData() {
|
|
try {
|
|
const response = await fetch("/get_scores");
|
|
const data = await response.json();
|
|
|
|
const tableBody = document.getElementById("data-table-body");
|
|
tableBody.innerHTML = "";
|
|
|
|
data.forEach((item, index) => {
|
|
const row = document.createElement("tr");
|
|
|
|
row.innerHTML = `
|
|
<td>${item.time}</td>
|
|
<td>${item.id}</td>
|
|
<td>${item.name}</td>
|
|
<td>${item.score}</td>
|
|
<td>${item.running_time}</td>
|
|
<td>
|
|
<button onclick="showDetailsModal(${index})">查看详情</button>
|
|
</td>
|
|
`;
|
|
|
|
tableBody.appendChild(row);
|
|
});
|
|
|
|
const modal = document.getElementById("detailsModal");
|
|
const span = document.getElementsByClassName("close")[0];
|
|
span.onclick = function () {
|
|
modal.style.display = "none";
|
|
};
|
|
|
|
window.onclick = function (event) {
|
|
if (event.target === modal) {
|
|
modal.style.display = "none";
|
|
}
|
|
};
|
|
} catch (error) {
|
|
console.error("获取数据时发生错误:", error);
|
|
}
|
|
}
|
|
|
|
function showDetailsModal(index) {
|
|
const modal = document.getElementById("detailsModal");
|
|
const modalDetails = document.getElementById("modal-details");
|
|
|
|
fetch("/get_scores")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
modalDetails.innerHTML = data[index].details;
|
|
modal.style.display = "block";
|
|
});
|
|
}
|
|
|
|
window.onload = fetchData;
|
|
</script>
|
|
</body>
|
|
</html>
|