init
This commit is contained in:
395
public/history.html
Normal file
395
public/history.html
Normal file
@@ -0,0 +1,395 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>代理IP管理系统 - 执行历史</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="css/dashboard.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<i class="bi bi-shield-check"></i>
|
||||
代理IP管理系统
|
||||
</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 me-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">
|
||||
<i class="bi bi-speedometer2"></i> 仪表板
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="proxies.html">
|
||||
<i class="bi bi-list-ul"></i> 代理管理
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="history.html">
|
||||
<i class="bi bi-clock-history"></i> 执行历史
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="monitoring.html">
|
||||
<i class="bi bi-activity"></i> 系统监控
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="navbar-nav">
|
||||
<button class="btn btn-outline-light btn-sm" onclick="refreshHistory()">
|
||||
<i class="bi bi-arrow-clockwise"></i> 刷新
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<div class="container-fluid mt-4">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card bg-primary text-white">
|
||||
<div class="card-body text-center">
|
||||
<h4 id="totalTasks">-</h4>
|
||||
<p class="mb-0">总任务数</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card bg-success text-white">
|
||||
<div class="card-body text-center">
|
||||
<h4 id="successTasks">-</h4>
|
||||
<p class="mb-0">成功任务</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card bg-danger text-white">
|
||||
<div class="card-body text-center">
|
||||
<h4 id="failedTasks">-</h4>
|
||||
<p class="mb-0">失败任务</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card bg-info text-white">
|
||||
<div class="card-body text-center">
|
||||
<h4 id="successRate">-</h4>
|
||||
<p class="mb-0">成功率</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选项卡导航 -->
|
||||
<ul class="nav nav-tabs" id="historyTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="task-tab" data-bs-toggle="tab" data-bs-target="#task-pane" type="button" role="tab">
|
||||
<i class="bi bi-list-task"></i> 任务历史
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs-pane" type="button" role="tab">
|
||||
<i class="bi bi-file-text"></i> 系统日志
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="stats-tab" data-bs-toggle="tab" data-bs-target="#stats-pane" type="button" role="tab">
|
||||
<i class="bi bi-graph-up"></i> 统计分析
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 选项卡内容 -->
|
||||
<div class="tab-content" id="historyTabContent">
|
||||
<!-- 任务历史选项卡 -->
|
||||
<div class="tab-pane fade show active" id="task-pane" role="tabpanel">
|
||||
<!-- 筛选器 -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-body">
|
||||
<form id="taskFilterForm" class="row g-3">
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">任务类型</label>
|
||||
<select class="form-select" id="taskTypeFilter">
|
||||
<option value="">全部类型</option>
|
||||
<option value="scrape">抓取任务</option>
|
||||
<option value="validation">验证任务</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">执行状态</label>
|
||||
<select class="form-select" id="taskStatusFilter">
|
||||
<option value="">全部状态</option>
|
||||
<option value="success">成功</option>
|
||||
<option value="failed">失败</option>
|
||||
<option value="running">运行中</option>
|
||||
<option value="pending">等待中</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">日期范围</label>
|
||||
<div class="input-group">
|
||||
<input type="date" class="form-control" id="startDate">
|
||||
<span class="input-group-text">至</span>
|
||||
<input type="date" class="form-control" id="endDate">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label"> </label>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-funnel"></i> 筛选
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务历史表格 -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-clock-history"></i> 任务执行历史
|
||||
</h5>
|
||||
<div>
|
||||
<button class="btn btn-outline-secondary btn-sm" onclick="exportTaskHistory()">
|
||||
<i class="bi bi-download"></i> 导出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>任务类型</th>
|
||||
<th>任务名称</th>
|
||||
<th>状态</th>
|
||||
<th>开始时间</th>
|
||||
<th>结束时间</th>
|
||||
<th>执行时长</th>
|
||||
<th>结果摘要</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="taskHistoryTableBody">
|
||||
<tr>
|
||||
<td colspan="8" class="text-center p-4">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
<p class="mt-2">正在加载任务历史...</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<nav aria-label="任务历史分页">
|
||||
<ul class="pagination justify-content-center" id="taskPagination">
|
||||
<!-- 分页按钮将通过JavaScript动态生成 -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统日志选项卡 -->
|
||||
<div class="tab-pane fade" id="logs-pane" role="tabpanel">
|
||||
<!-- 日志筛选器 -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-body">
|
||||
<form id="logFilterForm" class="row g-3">
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">日志级别</label>
|
||||
<select class="form-select" id="logLevelFilter">
|
||||
<option value="">全部级别</option>
|
||||
<option value="error">错误</option>
|
||||
<option value="warning">警告</option>
|
||||
<option value="info">信息</option>
|
||||
<option value="debug">调试</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">分类</label>
|
||||
<select class="form-select" id="logCategoryFilter">
|
||||
<option value="">全部分类</option>
|
||||
<option value="system">系统</option>
|
||||
<option value="scheduler">调度器</option>
|
||||
<option value="manual_action">手动操作</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">搜索关键词</label>
|
||||
<input type="text" class="form-control" id="logSearchKeyword" placeholder="搜索日志内容...">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label"> </label>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-search"></i> 搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label"> </label>
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-outline-warning" onclick="cleanupLogs()">
|
||||
<i class="bi bi-trash"></i> 清理
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统日志表格 -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-file-text"></i> 系统日志
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>级别</th>
|
||||
<th>分类</th>
|
||||
<th>消息</th>
|
||||
<th>来源</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="systemLogsTableBody">
|
||||
<tr>
|
||||
<td colspan="5" class="text-center p-4">
|
||||
<div class="spinner-border text-info" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
<p class="mt-2">正在加载系统日志...</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<nav aria-label="系统日志分页">
|
||||
<ul class="pagination justify-content-center" id="logsPagination">
|
||||
<!-- 分页按钮将通过JavaScript动态生成 -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计分析选项卡 -->
|
||||
<div class="tab-pane fade" id="stats-pane" role="tabpanel">
|
||||
<!-- 统计图表 -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title mb-0">任务执行趋势（7天）</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="taskTrendChart" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title mb-0">日志级别分布（7天）</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="logLevelChart" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计表格 -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-bar-chart"></i> 详细统计
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6>任务统计</h6>
|
||||
<div id="taskStatsContent">
|
||||
<div class="text-center p-4">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6>日志统计</h6>
|
||||
<div id="logStatsContent">
|
||||
<div class="text-center p-4">
|
||||
<div class="spinner-border text-info" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务详情模态框 -->
|
||||
<div class="modal fade" id="taskDetailModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">任务详情</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="taskDetailContent">
|
||||
<!-- 详情内容将通过JavaScript动态生成 -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提示消息容器 -->
|
||||
<div class="position-fixed top-0 end-0 p-3" style="z-index: 1050">
|
||||
<div id="alertContainer"></div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="js/history.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user