成绩查询 - 运动会管理系�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; color: #333; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { text-align: center; margin-bottom: 30px; } h1 { color: #2c3e50; font-size: 2rem; margin-bottom: 10px; } .back-link { display: inline-block; margin-bottom: 20px; color: #3498db; text-decoration: none; font-weight: bold; } .back-link:hover { text-decoration: underline; } .controls { background: white; border-radius: 10px; padding: 20px; margin-bottom: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .control-group { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; } .control-item { flex: 1; min-width: 200px; } label { display: block; margin-bottom: 5px; font-weight: bold; color: #2c3e50; } input, select, button { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; } input:focus, select:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); } .btn { background-color: #3498db; color: white; border: none; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } .btn:hover { background-color: #2980b9; } .tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .tab { padding: 10px 20px; background-color: #ecf0f1; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; } .tab.active { background-color: #3498db; color: white; } .results-container { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .results-title { color: #2c3e50; font-size: 1.5rem; } table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f8f9fa; font-weight: bold; color: #2c3e50; } tr:hover { background-color: #f5f5f5; } .rank-1 { background-color: #fff3cd; font-weight: bold; } .rank-2 { background-color: #e2e3e5; font-weight: bold; } .rank-3 { background-color: #f8d7da; font-weight: bold; } .no-results { text-align: center; padding: 40px; color: #7f8c8d; font-style: italic; } .message { margin-top: 20px; padding: 10px; border-radius: 5px; text-align: center; font-weight: bold; } .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* Responsive design */ @media (max-width: 768px) { .control-group { flex-direction: column; } .control-item { min-width: auto; } table { font-size: 0.9rem; } th, td { padding: 8px; } } </style> </head> <body> <div class="container"> <header> <a href="index.html" class="back-link">�?返回首页</a> <h1>🏆 成绩查询</h1> <p>查询队伍、部门或项目的比赛成绩及排名</p> </header> <div class="controls"> <div class="tabs"> <button class="tab active" data-type="team">队伍排名</button> <button class="tab" data-type="department">部门排名</button> <button class="tab" data-type="project">项目排名</button> </div> <div class="control-group"> <div class="control-item"> <label for="search">搜索</label> <input type="text" id="search" placeholder="输入关键词搜�?> </div> <div class="control-item"> <button class="btn" id="searchBtn">查询</button> </div> </div> </div> <div class="results-container"> <div class="results-header"> <h2 class="results-title" id="resultsTitle">队伍排名</h2> </div> <div id="resultsTable"></div> <div id="message" class="message" style="display: none;"></div> </div> </div> <script> // API base URL const API_BASE = '/api'; // Elements const tabs = document.querySelectorAll('.tab'); const searchInput = document.getElementById('search'); const searchBtn = document.getElementById('searchBtn'); const resultsTitle = document.getElementById('resultsTitle'); const resultsTable = document.getElementById('resultsTable'); const messageDiv = document.getElementById('message'); let currentType = 'team'; // Show message to user function showMessage(text, type = 'error') { messageDiv.textContent = text; messageDiv.className = `message ${type}`; messageDiv.style.display = 'block'; setTimeout(() => { messageDiv.style.display = 'none'; }, 5000); } // Render results based on type async function renderResults(type, search = '') { try { const response = await fetch(`${API_BASE}/results/public?type=${type}&search=${encodeURIComponent(search)}`); const data = await response.json(); if (!response.ok) { throw new Error(data.error || 'Failed to fetch results'); } resultsTable.innerHTML = ''; if (type === 'team') { // Render team rankings if (data.length === 0) { resultsTable.innerHTML = '<div class="no-results">暂无队伍排名数据</div>'; return; } const table = document.createElement('table'); table.innerHTML = ` <thead> <tr> <th>排名</th> <th>队伍名称</th> <th>所属部�?/th> <th>总积�?/th> </tr> </thead> <tbody> ${data.map((item, index) => ` <tr class="rank-${index + 1 <= 3 ? index + 1 : ''}"> <td>${index + 1}</td> <td>${item.team.name}</td> <td>${item.team.departments.name}</td> <td>${item.total_points}</td> </tr> `).join('')} </tbody> `; resultsTable.appendChild(table); } else if (type === 'department') { // Render department rankings if (data.length === 0) { resultsTable.innerHTML = '<div class="no-results">暂无部门排名数据</div>'; return; } const table = document.createElement('table'); table.innerHTML = ` <thead> <tr> <th>排名</th> <th>部门名称</th> <th>总积�?/th> </tr> </thead> <tbody> ${data.map((item, index) => ` <tr class="rank-${index + 1 <= 3 ? index + 1 : ''}"> <td>${index + 1}</td> <td>${item.department.name}</td> <td>${item.total_points}</td> </tr> `).join('')} </tbody> `; resultsTable.appendChild(table); } else if (type === 'project') { // Render project/event rankings if (data.length === 0) { resultsTable.innerHTML = '<div class="no-results">暂无项目排名数据</div>'; return; } data.forEach(event => { if (event.rankings.length === 0) return; const eventHeader = document.createElement('h3'); eventHeader.textContent = event.event.name; eventHeader.style.marginBottom = '15px'; resultsTable.appendChild(eventHeader); const table = document.createElement('table'); table.innerHTML = ` <thead> <tr> <th>排名</th> <th>${event.event.nature === 'individual' ? '运动�? : '队伍'}</th> <th>成绩</th> <th>所�?{event.event.nature === 'individual' ? '队伍' : '部门'}</th> </tr> </thead> <tbody> ${event.rankings.map(item => ` <tr class="rank-${item.rank <= 3 ? item.rank : ''}"> <td>${item.rank}</td> <td>${event.event.nature === 'individual' ? item.athletes.name : item.teams.name}</td> <td>${item.result_value} ${event.event.result_type === 'time' ? '�? : ''}</td> <td>${event.event.nature === 'individual' ? item.athletes.teams.name : item.teams.departments.name}</td> </tr> `).join('')} </tbody> `; resultsTable.appendChild(table); resultsTable.appendChild(document.createElement('br')); }); } } catch (error) { showMessage('获取成绩数据失败，请稍后重试'); console.error('Error fetching results:', error); } } // Handle tab click tabs.forEach(tab => { tab.addEventListener('click', () => { // Update active tab tabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); currentType = tab.dataset.type; resultsTitle.textContent = `${tab.textContent}`; // Render results for selected type renderResults(currentType); }); }); // Handle search searchBtn.addEventListener('click', () => { const searchTerm = searchInput.value.trim(); renderResults(currentType, searchTerm); }); // Handle enter key in search input searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { searchBtn.click(); } }); // Initialize page renderResults(currentType); </script> </body> </html>