300 lines
12 KiB
HTML
300 lines
12 KiB
HTML
<!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="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>⚙️ 管理后台</h1>
|
||
<nav>
|
||
<a href="/">比赛预测</a>
|
||
<a href="/admin" class="active">管理后台</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- 系统配置 -->
|
||
<section class="admin-section">
|
||
<h2>📊 系统配置</h2>
|
||
<div class="config-form">
|
||
<div class="form-group">
|
||
<label>预测周期（小时）</label>
|
||
<input type="number" id="prediction-cycle" min="1" value="24">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>最近预测时间</label>
|
||
<input type="datetime-local" id="last-prediction-time">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>世界杯年份</label>
|
||
<input type="text" id="world-cup-year" value="2026">
|
||
</div>
|
||
<button onclick="saveConfig()" class="btn-primary">保存配置</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 管理标签 -->
|
||
<div class="tabs">
|
||
<button class="tab-btn active" data-tab="manage-algorithms">预测算法管理</button>
|
||
<button class="tab-btn" data-tab="manage-matches">比赛管理</button>
|
||
<button class="tab-btn" data-tab="manage-predictions">预测管理</button>
|
||
</div>
|
||
|
||
<!-- 算法管理 -->
|
||
<section id="manage-algorithms-tab" class="tab-content active">
|
||
<div class="section-header">
|
||
<h2>🤖 预测算法管理</h2>
|
||
<button onclick="showAddAlgorithmModal()" class="btn-primary">+ 添加算法</button>
|
||
</div>
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>名称</th>
|
||
<th>描述</th>
|
||
<th>准确率</th>
|
||
<th>预测数</th>
|
||
<th>正确数</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="algorithms-table">
|
||
<!-- 动态加载 -->
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- 比赛管理 -->
|
||
<section id="manage-matches-tab" class="tab-content">
|
||
<div class="section-header">
|
||
<h2>⚽ 比赛管理</h2>
|
||
<div>
|
||
<button onclick="showBatchAddMatchModal()" class="btn-secondary">批量添加</button>
|
||
<button onclick="showAddMatchModal()" class="btn-primary">+ 添加比赛</button>
|
||
</div>
|
||
</div>
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>代码</th>
|
||
<th>主队</th>
|
||
<th>客队</th>
|
||
<th>时间</th>
|
||
<th>比分</th>
|
||
<th>轮次</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="matches-table">
|
||
<!-- 动态加载 -->
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- 预测管理 -->
|
||
<section id="manage-predictions-tab" class="tab-content">
|
||
<div class="section-header">
|
||
<h2>🎯 预测管理</h2>
|
||
<div>
|
||
<button onclick="evaluatePredictions()" class="btn-secondary">评估预测结果</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>筛选比赛：</label>
|
||
<select id="prediction-match-filter" onchange="loadPredictions()">
|
||
<option value="">全部比赛</option>
|
||
</select>
|
||
</div>
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>比赛</th>
|
||
<th>算法</th>
|
||
<th>预测比分</th>
|
||
<th>预测胜负</th>
|
||
<th>置信度</th>
|
||
<th>实际比分</th>
|
||
<th>结果</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="predictions-table">
|
||
<!-- 动态加载 -->
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 添加算法弹窗 -->
|
||
<div id="algorithm-modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('algorithm-modal')">×</span>
|
||
<h2 id="algorithm-modal-title">添加算法</h2>
|
||
<form id="algorithm-form">
|
||
<input type="hidden" id="algorithm-id">
|
||
<div class="form-group">
|
||
<label>算法名称 *</label>
|
||
<input type="text" id="algorithm-name" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>算法描述</label>
|
||
<textarea id="algorithm-desc" rows="3"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>状态</label>
|
||
<select id="algorithm-active">
|
||
<option value="1">启用</option>
|
||
<option value="0">禁用</option>
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="btn-primary">保存</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批量添加比赛弹窗 -->
|
||
<div id="batch-match-modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('batch-match-modal')">×</span>
|
||
<h2>批量添加比赛</h2>
|
||
<div class="form-group">
|
||
<label>比赛数据（每行一条，用逗号分隔）</label>
|
||
<textarea id="batch-match-data" rows="14" placeholder="比赛代码,主队,客队,比赛时间,轮次,状态,主队比分,客队比分
|
||
|
||
示例：
|
||
M001,阿根廷,法国,2026-07-15 21:00,决赛,upcoming,-,-
|
||
M002,巴西,德国,2026-07-14 18:00,半决赛,finished,2,1
|
||
M003,西班牙,荷兰,2026-07-14 21:00,半决赛,upcoming,-,-
|
||
|
||
状态：upcoming（即将进行）或 finished（已完成）
|
||
比分：未进行的比赛用 - 表示"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>轮次（可选，批量设置）</label>
|
||
<select id="batch-match-round">
|
||
<option value="">-- 使用数据中的轮次 --</option>
|
||
<option value="小组赛">小组赛</option>
|
||
<option value="16强">16强</option>
|
||
<option value="8强">8强</option>
|
||
<option value="半决赛">半决赛</option>
|
||
<option value="季军赛">季军赛</option>
|
||
<option value="决赛">决赛</option>
|
||
</select>
|
||
</div>
|
||
<button onclick="batchAddMatches()" class="btn-primary">批量添加</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加比赛弹窗 -->
|
||
<div id="match-modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('match-modal')">×</span>
|
||
<h2 id="match-modal-title">添加比赛</h2>
|
||
<form id="match-form">
|
||
<input type="hidden" id="match-id">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>比赛代码 *</label>
|
||
<input type="text" id="match-code" required placeholder="如：M001">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>轮次</label>
|
||
<select id="match-round">
|
||
<option value="小组赛">小组赛</option>
|
||
<option value="16强">16强</option>
|
||
<option value="8强">8强</option>
|
||
<option value="半决赛">半决赛</option>
|
||
<option value="季军赛">季军赛</option>
|
||
<option value="决赛">决赛</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>主队 *</label>
|
||
<input type="text" id="home-team" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>客队 *</label>
|
||
<input type="text" id="away-team" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>比赛时间</label>
|
||
<input type="datetime-local" id="match-time">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>状态</label>
|
||
<select id="match-status">
|
||
<option value="upcoming">即将进行</option>
|
||
<option value="finished">已完成</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>主队比分</label>
|
||
<input type="number" id="home-score" min="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>客队比分</label>
|
||
<input type="number" id="away-score" min="0">
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn-primary">保存</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加预测弹窗 -->
|
||
<div id="prediction-modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal('prediction-modal')">×</span>
|
||
<h2>添加预测</h2>
|
||
<form id="prediction-form">
|
||
<div class="form-group">
|
||
<label>选择比赛 *</label>
|
||
<select id="prediction-match" required></select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>选择算法 *</label>
|
||
<select id="prediction-algorithm" required></select>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>预测主队比分</label>
|
||
<input type="number" id="pred-home-score" min="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>预测客队比分</label>
|
||
<input type="number" id="pred-away-score" min="0">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>预测胜负</label>
|
||
<select id="pred-winner">
|
||
<option value="">-- 选择胜负预测 --</option>
|
||
<option value="home">主队胜</option>
|
||
<option value="away">客队胜</option>
|
||
<option value="draw">平局</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>置信度</label>
|
||
<input type="range" id="pred-confidence" min="0" max="100" value="50">
|
||
<span id="confidence-value">50%</span>
|
||
</div>
|
||
<button type="submit" class="btn-primary">保存预测</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/admin.js"></script>
|
||
</body>
|
||
</html> |