mirror of
https://github.com/ExamAware/ExamSchedule.git
synced 2025-04-29 19:16:33 +00:00
feat: 优化考试信息展示，增加状态标签和日期分组
This commit is contained in:
MKStoler1024
parent
b90b5049cb
commit
504954619a
@ -124,26 +124,69 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
}
|
||||
|
||||
examTableBodyElem.innerHTML = "";
|
||||
|
||||
// 预处理日期和时间段
|
||||
const dateGroups = {};
|
||||
data.examInfos.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const end = new Date(exam.end);
|
||||
let status = "";
|
||||
if (now < start) {
|
||||
status = "即将开始";
|
||||
} else if (now > end) {
|
||||
status = "已结束";
|
||||
} else {
|
||||
status = "进行中";
|
||||
}
|
||||
const hour = start.getHours();
|
||||
const dateStr = `${start.getMonth() + 1}月${start.getDate()}日<br>${hour < 12 ? '上午' : (hour < 18 ? '下午' : '晚上')}`;
|
||||
|
||||
const row = document.createElement("tr");
|
||||
row.className = `exam-status-${status}`;
|
||||
row.innerHTML = `
|
||||
<td>${exam.name}</td>
|
||||
<td>${formatTimeWithoutSeconds(new Date(exam.start).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
<td>${formatTimeWithoutSeconds(new Date(exam.end).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
`;
|
||||
examTableBodyElem.appendChild(row);
|
||||
if (!dateGroups[dateStr]) {
|
||||
dateGroups[dateStr] = [];
|
||||
}
|
||||
dateGroups[dateStr].push(exam);
|
||||
});
|
||||
|
||||
// 生成表格
|
||||
Object.entries(dateGroups).forEach(([dateStr, exams]) => {
|
||||
let isFirstRow = true;
|
||||
// 计算实际需要的行数（考虑科目名称中的斜杠）
|
||||
const totalRows = exams.reduce((acc, exam) => {
|
||||
return acc + (exam.name.includes('/') ? exam.name.split('/').length : 1);
|
||||
}, 0);
|
||||
|
||||
exams.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const end = new Date(exam.end);
|
||||
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||
|
||||
let status = "未开始";
|
||||
if (now < start) {
|
||||
status = now > new Date(start.getTime() - 15 * 60 * 1000) ? "即将开始" : "未开始";
|
||||
} else if (now > end) {
|
||||
status = "已结束";
|
||||
} else {
|
||||
status = "进行中";
|
||||
}
|
||||
|
||||
// 处理包含斜杠的科目名称
|
||||
const subjects = exam.name.split('/');
|
||||
subjects.forEach((subject, index) => {
|
||||
const row = document.createElement("tr");
|
||||
let cells = '';
|
||||
|
||||
if (isFirstRow) {
|
||||
cells = `<td rowspan="${totalRows}">${dateStr}</td>`;
|
||||
isFirstRow = false;
|
||||
}
|
||||
|
||||
// 仅在第一个科目行添加时间和状态
|
||||
if (index === 0) {
|
||||
cells += `
|
||||
<td>${subject.trim()}</td>
|
||||
<td rowspan="${subjects.length}">${formatTimeWithoutSeconds(start.toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
<td rowspan="${subjects.length}">${formatTimeWithoutSeconds(end.toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
<td rowspan="${subjects.length}"><span class="exam-status-tag exam-status-${status}">${status}</span></td>
|
||||
`;
|
||||
} else {
|
||||
cells += `<td>${subject.trim()}</td>`;
|
||||
}
|
||||
|
||||
row.innerHTML = cells;
|
||||
examTableBodyElem.appendChild(row);
|
||||
});
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
errorSystem.show('更新考试信息失败: ' + e.message);
|
||||
|
||||
@ -51,7 +51,7 @@ body::-webkit-scrollbar {
|
||||
padding: 20px;
|
||||
max-width: 1400px; /* 增加主体部分宽度 */
|
||||
margin: auto;
|
||||
background-color: rgba(255, 255, 255, 0); /* 使用rgba设置背景透明度为80% */
|
||||
background-color: rgba(0, 0, 0, 0.4); /* 使用rgba设置背景透明度为80% */
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -87,10 +87,17 @@ h1 {
|
||||
}
|
||||
|
||||
.left-column, .right-column {
|
||||
width: 48%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px; /* 板块间隔3px */
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.clock-section, .info-section, .right-column {
|
||||
@ -121,14 +128,14 @@ table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #333;
|
||||
border: 1px solid rgba(255, 255, 255, 0.75);
|
||||
background-color: rgba(31, 31, 31, 0.5);
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #333;
|
||||
padding: 2px; /* 缩短行高 */
|
||||
font-size: 2rem;
|
||||
border: 1px solid #fff;
|
||||
padding: 0px; /* 缩短行高 */
|
||||
font-size: 1.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -136,23 +143,7 @@ th {
|
||||
background-color: #333;
|
||||
color: #7cc3fb;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid #2b71ad;
|
||||
}
|
||||
|
||||
.exam-status-进行中 td {
|
||||
color: #5ba838 !important; /* 绿色字体 */
|
||||
}
|
||||
|
||||
.exam-status-即将开始 td {
|
||||
color: #fe9901 !important; /* 橙色字体 */
|
||||
}
|
||||
|
||||
.exam-status-已结束 td {
|
||||
color: #ec0434 !important; /* 红色字体 */
|
||||
}
|
||||
|
||||
.exam-status-空闲 td {
|
||||
color: blue !important; /* 蓝色字体 */
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
@ -165,7 +156,7 @@ table {
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #333;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
@ -178,6 +169,34 @@ td:last-child {
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
.exam-status-tag {
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 1.2rem;
|
||||
display: inline-block;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.exam-status-进行中 {
|
||||
background-color: rgba(91, 168, 56, 0.2);
|
||||
color: #5ba838;
|
||||
}
|
||||
|
||||
.exam-status-即将开始 {
|
||||
background-color: rgba(254, 153, 1, 0.2);
|
||||
color: #fe9901;
|
||||
}
|
||||
|
||||
.exam-status-已结束 {
|
||||
background-color: rgba(236, 4, 52, 0.2);
|
||||
color: #ec0434;
|
||||
}
|
||||
|
||||
.exam-status-未开始 {
|
||||
background-color: rgba(238, 238, 91, 0.2);
|
||||
color: #eeee5b;
|
||||
}
|
||||
|
||||
#settings-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
|
||||
@ -50,7 +50,7 @@ body::-webkit-scrollbar {
|
||||
padding: 20px;
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -86,12 +86,19 @@ h1 {
|
||||
}
|
||||
|
||||
.left-column, .right-column {
|
||||
width: 48%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.clock-section, .info-section, .right-column {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
@ -123,14 +130,14 @@ table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid #000;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px;
|
||||
font-size: 2rem;
|
||||
border: 1px solid #000;
|
||||
padding: 0px;
|
||||
font-size: 1.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -138,23 +145,7 @@ th {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid #ccc;
|
||||
}
|
||||
|
||||
.exam-status-进行中 td {
|
||||
color: #5ba838 !important;
|
||||
}
|
||||
|
||||
.exam-status-即将开始 td {
|
||||
color: #fe9901 !important;
|
||||
}
|
||||
|
||||
.exam-status-已结束 td {
|
||||
color: #ec0434 !important;
|
||||
}
|
||||
|
||||
.exam-status-空闲 td {
|
||||
color: blue !important;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
@ -167,7 +158,7 @@ table {
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
@ -180,6 +171,34 @@ td:last-child {
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
.exam-status-tag {
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 1.2rem;
|
||||
display: inline-block;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.exam-status-进行中 {
|
||||
background-color: rgba(91, 168, 56, 0.1);
|
||||
color: #5ba838;
|
||||
}
|
||||
|
||||
.exam-status-即将开始 {
|
||||
background-color: rgba(254, 153, 1, 0.1);
|
||||
color: #fe9901;
|
||||
}
|
||||
|
||||
.exam-status-已结束 {
|
||||
background-color: rgba(236, 4, 52, 0.1);
|
||||
color: #ec0434;
|
||||
}
|
||||
|
||||
.exam-status-未开始 {
|
||||
background-color: rgba(238, 238, 91, 0.1);
|
||||
color: #d4b106;
|
||||
}
|
||||
|
||||
#settings-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
|
||||
@ -35,9 +35,11 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>科目</th>
|
||||
<th>开始时间</th>
|
||||
<th>结束时间</th>
|
||||
<th>开始</th>
|
||||
<th>结束</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="exam-table-body">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user