You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
6.2 KiB
169 lines
6.2 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>课程列表 - 湖南大学选课系统分析</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
background-color: #f8f9fa;
|
|
}
|
|
.hero {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 40px 0;
|
|
margin-bottom: 30px;
|
|
}
|
|
.card {
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.table-container {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
padding: 20px;
|
|
}
|
|
.btn-primary {
|
|
background-color: #667eea;
|
|
border-color: #667eea;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #5a6fd8;
|
|
border-color: #5a6fd8;
|
|
}
|
|
.status-badge {
|
|
padding: 5px 10px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
}
|
|
.status-high {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.status-medium {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
.status-low {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">湖南大学选课系统分析</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">首页</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="/courses">课程列表</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/analysis">数据分析</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 英雄区 -->
|
|
<div class="hero">
|
|
<div class="container">
|
|
<h1 class="display-4">课程列表</h1>
|
|
<p class="lead">查看所有课程的详细信息</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 课程列表 -->
|
|
<div class="container mb-5">
|
|
<div class="table-container">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2>课程详情</h2>
|
|
<button class="btn btn-primary" onclick="crawlData()">
|
|
<i class="bi bi-download"></i> 刷新数据
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th>课程代码</th>
|
|
<th>课程名称</th>
|
|
<th>学分</th>
|
|
<th>教师</th>
|
|
<th>院系</th>
|
|
<th>容量</th>
|
|
<th>已选</th>
|
|
<th>使用率</th>
|
|
<th>上课时间</th>
|
|
<th>上课地点</th>
|
|
<th>课程类型</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="course : ${courses}">
|
|
<td th:text="${course.courseCode}"></td>
|
|
<td th:text="${course.courseName}"></td>
|
|
<td th:text="${course.credit}"></td>
|
|
<td th:text="${course.teacher}"></td>
|
|
<td th:text="${course.department}"></td>
|
|
<td th:text="${course.capacity}"></td>
|
|
<td th:text="${course.enrolled}"></td>
|
|
<td>
|
|
<span th:class="|status-badge ${course.enrolled * 100 / course.capacity > 80 ? 'status-high' : (course.enrolled * 100 / course.capacity > 50 ? 'status-medium' : 'status-low')}">
|
|
<span th:text="${#numbers.formatDecimal(course.enrolled * 100 / course.capacity, 0, 1)}%"></span>
|
|
</span>
|
|
</td>
|
|
<td th:text="${course.classTime}"></td>
|
|
<td th:text="${course.classRoom}"></td>
|
|
<td th:text="${course.courseType}"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-dark text-white py-4">
|
|
<div class="container text-center">
|
|
<p>© 2024 湖南大学选课系统分析平台</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// 爬取数据
|
|
function crawlData() {
|
|
fetch('/crawl', {
|
|
method: 'POST'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert(data.message);
|
|
window.location.reload();
|
|
} else {
|
|
alert('爬取失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('爬取失败');
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|