init
This commit is contained in:
363
public/css/dashboard.css
Normal file
363
public/css/dashboard.css
Normal file
@@ -0,0 +1,363 @@
|
||||
/* 仪表板样式 */
|
||||
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
font-weight: bold;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.card {
|
||||
border: none;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
transition: box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 状态卡片动画 */
|
||||
.card-body h3 {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover h3 {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.table th {
|
||||
border-top: none;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 状态徽章 */
|
||||
.status-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: #d1e7dd;
|
||||
color: #0f5132;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: #fff3cd;
|
||||
color: #664d03;
|
||||
}
|
||||
|
||||
.status-danger {
|
||||
background-color: #f8d7da;
|
||||
color: #842029;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
background-color: #cff4fc;
|
||||
color: #055160;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.spinner-border-sm {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/* 提示消息样式 */
|
||||
.alert {
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图表容器 */
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* 时间显示 */
|
||||
#currentTime {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 系统信息卡片 */
|
||||
.system-info-item {
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.system-info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.system-info-label {
|
||||
color: #6c757d;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.system-info-value {
|
||||
color: #212529;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.container-fluid {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 历史记录表格 */
|
||||
.history-table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.history-table .task-name {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.history-table .status-badge {
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.history-table .duration {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* 快速操作面板 */
|
||||
.quick-actions .btn {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.quick-actions .btn i {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* 下次执行时间 */
|
||||
.next-run-time {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* 系统状态指示器 */
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.status-indicator.online {
|
||||
background-color: #198754;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.status-indicator.offline {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(25, 135, 84, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 内存使用条 */
|
||||
.memory-bar {
|
||||
height: 4px;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.memory-bar-fill {
|
||||
height: 100%;
|
||||
background-color: #198754;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 工具提示样式 */
|
||||
.tooltip-inner {
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
/* 页面加载动画 */
|
||||
.page-loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.page-loading .spinner-border {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
/* 数据表格空状态 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state h6 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
/* 悬浮操作按钮 */
|
||||
.fab {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fab:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #212529;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #343a40;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #495057;
|
||||
border-bottom-color: #6c757d;
|
||||
}
|
||||
|
||||
.table {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background-color: #495057;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-text {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
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>
|
||||
268
public/index.html
Normal file
268
public/index.html
Normal file
@@ -0,0 +1,268 @@
|
||||
<!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 active" 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" 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">
|
||||
<span class="navbar-text" id="currentTime"></span>
|
||||
<button class="btn btn-outline-light btn-sm ms-2" onclick="refreshData()">
|
||||
<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-xl-3 col-md-6 mb-3">
|
||||
<div class="card bg-primary text-white h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h6 class="card-title">总代理数量</h6>
|
||||
<h3 class="mb-0" id="totalProxies">-</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="bi bi-hdd-network fs-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-md-6 mb-3">
|
||||
<div class="card bg-success text-white h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h6 class="card-title">可用代理</h6>
|
||||
<h3 class="mb-0" id="validProxies">-</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="bi bi-check-circle fs-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-md-6 mb-3">
|
||||
<div class="card bg-danger text-white h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h6 class="card-title">无效代理</h6>
|
||||
<h3 class="mb-0" id="invalidProxies">-</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="bi bi-x-circle fs-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-md-6 mb-3">
|
||||
<div class="card bg-info text-white h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h6 class="card-title">可用率</h6>
|
||||
<h3 class="mb-0" id="validRate">-</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="bi bi-percent fs-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速操作和图表 -->
|
||||
<div class="row mb-4">
|
||||
<!-- 快速操作 -->
|
||||
<div class="col-lg-4 mb-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-lightning"></i> 快速操作
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary" onclick="startScrape()">
|
||||
<i class="bi bi-download"></i> 立即抓取代理
|
||||
</button>
|
||||
<button class="btn btn-success" onclick="startValidate()">
|
||||
<i class="bi bi-check2-square"></i> 立即验证代理
|
||||
</button>
|
||||
<button class="btn btn-warning" onclick="cleanupInvalid()">
|
||||
<i class="bi bi-trash"></i> 清理无效代理
|
||||
</button>
|
||||
<button class="btn btn-info" onclick="exportProxies()">
|
||||
<i class="bi bi-download"></i> 导出代理数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="text-center">
|
||||
<small class="text-muted">下次执行时间</small>
|
||||
<div class="mt-2">
|
||||
<small class="d-block">抓取: <span id="nextScrape">-</span></small>
|
||||
<small class="d-block">验证: <span id="nextValidation">-</span></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 代理趋势图 -->
|
||||
<div class="col-lg-8 mb-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-graph-up"></i> 代理数量趋势（7天）
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="proxyTrendChart" height="100"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近执行历史和系统状态 -->
|
||||
<div class="row">
|
||||
<!-- 最近抓取历史 -->
|
||||
<div class="col-lg-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-clock-history"></i> 最近抓取历史
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="recentScrapeHistory" class="table-responsive">
|
||||
<div class="text-center p-4">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近验证历史 -->
|
||||
<div class="col-lg-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-check2-square"></i> 最近验证历史
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="recentValidationHistory" class="table-responsive">
|
||||
<div class="text-center p-4">
|
||||
<div class="spinner-border text-success" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统信息 -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-info-circle"></i> 系统信息
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<small class="text-muted">运行时间</small>
|
||||
<div id="systemUptime">-</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<small class="text-muted">内存使用</small>
|
||||
<div id="memoryUsage">-</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<small class="text-muted">今日抓取</small>
|
||||
<div id="todayScrape">-</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<small class="text-muted">今日验证</small>
|
||||
<div id="todayValidation">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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/dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
590
public/js/dashboard.js
Normal file
590
public/js/dashboard.js
Normal file
@@ -0,0 +1,590 @@
|
||||
// 仪表板JavaScript
|
||||
|
||||
class Dashboard {
|
||||
constructor() {
|
||||
this.charts = {};
|
||||
this.refreshInterval = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
console.log('初始化仪表板...');
|
||||
|
||||
// 初始化图表
|
||||
this.initCharts();
|
||||
|
||||
// 加载初始数据
|
||||
await this.loadDashboardData();
|
||||
|
||||
// 启动自动刷新
|
||||
this.startAutoRefresh();
|
||||
|
||||
// 更新时间显示
|
||||
this.updateCurrentTime();
|
||||
setInterval(() => this.updateCurrentTime(), 1000);
|
||||
|
||||
console.log('仪表板初始化完成');
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
initCharts() {
|
||||
// 代理趋势图
|
||||
const ctx = document.getElementById('proxyTrendChart');
|
||||
if (ctx) {
|
||||
this.charts.proxyTrend = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: '总代理数',
|
||||
data: [],
|
||||
borderColor: '#007bff',
|
||||
backgroundColor: 'rgba(0, 123, 255, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
}, {
|
||||
label: '可用代理',
|
||||
data: [],
|
||||
borderColor: '#28a745',
|
||||
backgroundColor: 'rgba(40, 167, 69, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
tooltip: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
precision: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 加载仪表板数据
|
||||
async loadDashboardData() {
|
||||
try {
|
||||
// 显示加载状态
|
||||
this.showLoading(true);
|
||||
|
||||
// 获取统计数据
|
||||
const statsResponse = await fetch('/api/dashboard/stats');
|
||||
const statsData = await statsResponse.json();
|
||||
|
||||
if (statsData.success) {
|
||||
this.updateStatistics(statsData.data);
|
||||
this.updateCharts(statsData.data.charts);
|
||||
this.updateRecentHistory(statsData.data.latest);
|
||||
}
|
||||
|
||||
// 获取实时状态
|
||||
const statusResponse = await fetch('/api/dashboard/status');
|
||||
const statusData = await statusResponse.json();
|
||||
|
||||
if (statusData.success) {
|
||||
this.updateSystemInfo(statusData.data);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载仪表板数据失败:', error);
|
||||
this.showAlert('加载数据失败: ' + error.message, 'danger');
|
||||
} finally {
|
||||
this.showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新统计信息
|
||||
updateStatistics(data) {
|
||||
document.getElementById('totalProxies').textContent = data.proxies.total || 0;
|
||||
document.getElementById('validProxies').textContent = data.proxies.valid || 0;
|
||||
document.getElementById('invalidProxies').textContent = data.proxies.invalid || 0;
|
||||
document.getElementById('validRate').textContent = data.proxies.validRate || '0%';
|
||||
}
|
||||
|
||||
// 更新图表
|
||||
updateCharts(chartData) {
|
||||
// 更新代理趋势图
|
||||
if (this.charts.proxyTrend && chartData.daily_proxies) {
|
||||
const labels = chartData.daily_proxies.map(item =>
|
||||
new Date(item.date).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
|
||||
);
|
||||
|
||||
this.charts.proxyTrend.data.labels = labels;
|
||||
this.charts.proxyTrend.data.datasets[0].data = chartData.daily_proxies.map(item => item.total_added);
|
||||
this.charts.proxyTrend.data.datasets[1].data = chartData.daily_proxies.map(item => item.valid_added);
|
||||
this.charts.proxyTrend.update();
|
||||
}
|
||||
}
|
||||
|
||||
// 更新最近历史记录
|
||||
updateRecentHistory(latest) {
|
||||
// 更新抓取历史
|
||||
if (latest.scrape && latest.scrape.length > 0) {
|
||||
const scrapeHtml = this.generateHistoryTable(latest.scrape, 'scrape');
|
||||
document.getElementById('recentScrapeHistory').innerHTML = scrapeHtml;
|
||||
} else {
|
||||
document.getElementById('recentScrapeHistory').innerHTML = this.generateEmptyState('暂无抓取历史');
|
||||
}
|
||||
|
||||
// 更新验证历史
|
||||
if (latest.validation && latest.validation.length > 0) {
|
||||
const validationHtml = this.generateHistoryTable(latest.validation, 'validation');
|
||||
document.getElementById('recentValidationHistory').innerHTML = validationHtml;
|
||||
} else {
|
||||
document.getElementById('recentValidationHistory').innerHTML = this.generateEmptyState('暂无验证历史');
|
||||
}
|
||||
}
|
||||
|
||||
// 生成历史记录表格
|
||||
generateHistoryTable(history, type) {
|
||||
if (!history || history.length === 0) {
|
||||
return this.generateEmptyState('暂无历史记录');
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm history-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>任务名称</th>
|
||||
<th>状态</th>
|
||||
<th>开始时间</th>
|
||||
<th>执行时长</th>
|
||||
<th>结果</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
history.forEach(item => {
|
||||
const statusClass = this.getStatusClass(item.status);
|
||||
const statusIcon = this.getStatusIcon(item.status);
|
||||
const duration = item.duration ? this.formatDuration(item.duration) : '-';
|
||||
const result = this.getResultSummary(item.details, type);
|
||||
|
||||
html += `
|
||||
<tr>
|
||||
<td class="task-name">${item.task_name}</td>
|
||||
<td><span class="badge ${statusClass}">${statusIcon} ${this.getStatusText(item.status)}</span></td>
|
||||
<td>${this.formatDateTime(item.start_time)}</td>
|
||||
<td class="duration">${duration}</td>
|
||||
<td>${result}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
html += `
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
// 生成空状态
|
||||
generateEmptyState(message) {
|
||||
return `
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-inbox"></i>
|
||||
<h6>${message}</h6>
|
||||
<small class="text-muted">等待任务执行...</small>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 更新系统信息
|
||||
updateSystemInfo(data) {
|
||||
// 更新运行时间
|
||||
document.getElementById('systemUptime').textContent = this.formatUptime(data.uptime);
|
||||
|
||||
// 更新内存使用
|
||||
const memoryHtml = `
|
||||
<div>已使用: ${data.memory.heapUsed}MB / ${data.memory.heapTotal}MB</div>
|
||||
<div class="memory-bar">
|
||||
<div class="memory-bar-fill" style="width: ${(data.memory.heapUsed / data.memory.heapTotal * 100)}%"></div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('memoryUsage').innerHTML = memoryHtml;
|
||||
|
||||
// 更新今日任务
|
||||
const todayScrape = data.today_tasks.scrape;
|
||||
const todayValidation = data.today_tasks.validation;
|
||||
|
||||
document.getElementById('todayScrape').innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span>成功: ${todayScrape.success}</span>
|
||||
<span class="badge bg-success">${todayScrape.success_rate}%</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('todayValidation').innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span>成功: ${todayValidation.success}</span>
|
||||
<span class="badge bg-success">${todayValidation.success_rate}%</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 更新下次执行时间
|
||||
if (data.next_runs) {
|
||||
document.getElementById('nextScrape').textContent = this.formatTime(data.next_runs.scrape);
|
||||
document.getElementById('nextValidation').textContent = this.formatTime(data.next_runs.validation);
|
||||
}
|
||||
}
|
||||
|
||||
// 开始抓取任务
|
||||
async startScrape() {
|
||||
try {
|
||||
this.showLoading(true, '正在启动抓取任务...');
|
||||
|
||||
const response = await fetch('/api/dashboard/actions/scrape', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ pages: 5 })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.showAlert('抓取任务已启动', 'success');
|
||||
// 延迟刷新数据
|
||||
setTimeout(() => this.loadDashboardData(), 2000);
|
||||
} else {
|
||||
this.showAlert('启动抓取任务失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('启动抓取任务失败:', error);
|
||||
this.showAlert('启动抓取任务失败: ' + error.message, 'danger');
|
||||
} finally {
|
||||
this.showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 开始验证任务
|
||||
async startValidate() {
|
||||
try {
|
||||
this.showLoading(true, '正在启动验证任务...');
|
||||
|
||||
const response = await fetch('/api/dashboard/actions/validate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ limit: 50 })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.showAlert('验证任务已启动', 'success');
|
||||
// 延迟刷新数据
|
||||
setTimeout(() => this.loadDashboardData(), 2000);
|
||||
} else {
|
||||
this.showAlert('启动验证任务失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('启动验证任务失败:', error);
|
||||
this.showAlert('启动验证任务失败: ' + error.message, 'danger');
|
||||
} finally {
|
||||
this.showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 清理无效代理
|
||||
async cleanupInvalid() {
|
||||
if (!confirm('确定要清理所有无效代理吗？此操作不可恢复。')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/proxies/cleanup', {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.showAlert(result.message, 'success');
|
||||
await this.loadDashboardData();
|
||||
} else {
|
||||
this.showAlert('清理失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('清理无效代理失败:', error);
|
||||
this.showAlert('清理无效代理失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// 导出代理数据
|
||||
async exportProxies() {
|
||||
try {
|
||||
this.showLoading(true, '正在导出数据...');
|
||||
|
||||
const response = await fetch('/api/proxies?limit=1000');
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
const csv = this.convertToCSV(result.data);
|
||||
this.downloadCSV(csv, `proxies_${new Date().toISOString().slice(0, 10)}.csv`);
|
||||
this.showAlert('数据导出成功', 'success');
|
||||
} else {
|
||||
this.showAlert('导出数据失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('导出数据失败:', error);
|
||||
this.showAlert('导出数据失败: ' + error.message, 'danger');
|
||||
} finally {
|
||||
this.showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
|
||||
getStatusClass(status) {
|
||||
const statusClasses = {
|
||||
'success': 'bg-success',
|
||||
'failed': 'bg-danger',
|
||||
'running': 'bg-warning',
|
||||
'pending': 'bg-secondary'
|
||||
};
|
||||
return statusClasses[status] || 'bg-secondary';
|
||||
}
|
||||
|
||||
getStatusIcon(status) {
|
||||
const statusIcons = {
|
||||
'success': '✓',
|
||||
'failed': '✗',
|
||||
'running': '⏳',
|
||||
'pending': '⏸'
|
||||
};
|
||||
return statusIcons[status] || '?';
|
||||
}
|
||||
|
||||
getStatusText(status) {
|
||||
const statusTexts = {
|
||||
'success': '成功',
|
||||
'failed': '失败',
|
||||
'running': '运行中',
|
||||
'pending': '等待中'
|
||||
};
|
||||
return statusTexts[status] || status;
|
||||
}
|
||||
|
||||
getResultSummary(details, type) {
|
||||
if (!details) return '-';
|
||||
|
||||
if (type === 'scrape') {
|
||||
return `抓取 ${details.scraped || 0} 个，可用 ${details.valid || 0} 个`;
|
||||
} else if (type === 'validation') {
|
||||
return `验证 ${details.validated || 0} 个，有效 ${details.valid || 0} 个`;
|
||||
}
|
||||
|
||||
return '-';
|
||||
}
|
||||
|
||||
formatDateTime(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
formatTime(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
formatDuration(ms) {
|
||||
if (!ms) return '-';
|
||||
|
||||
if (ms < 1000) {
|
||||
return ms + 'ms';
|
||||
} else if (ms < 60000) {
|
||||
return (ms / 1000).toFixed(1) + 's';
|
||||
} else {
|
||||
return (ms / 60000).toFixed(1) + 'min';
|
||||
}
|
||||
}
|
||||
|
||||
formatUptime(seconds) {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
return `${hours}h ${minutes}m`;
|
||||
}
|
||||
|
||||
updateCurrentTime() {
|
||||
const now = new Date();
|
||||
const timeString = now.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
const timeElement = document.getElementById('currentTime');
|
||||
if (timeElement) {
|
||||
timeElement.textContent = timeString;
|
||||
}
|
||||
}
|
||||
|
||||
showLoading(show, message = '加载中...') {
|
||||
// 实现加载状态显示
|
||||
const loadingElements = document.querySelectorAll('.spinner-border');
|
||||
loadingElements.forEach(element => {
|
||||
element.style.display = show ? 'inline-block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
showAlert(message, type = 'info') {
|
||||
const alertContainer = document.getElementById('alertContainer');
|
||||
if (!alertContainer) return;
|
||||
|
||||
const alertId = 'alert-' + Date.now();
|
||||
const alertHtml = `
|
||||
<div class="alert alert-${type} alert-dismissible fade show" role="alert" id="${alertId}">
|
||||
<i class="bi bi-${this.getAlertIcon(type)}"></i>
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
alertContainer.insertAdjacentHTML('beforeend', alertHtml);
|
||||
|
||||
// 自动移除提示
|
||||
setTimeout(() => {
|
||||
const alertElement = document.getElementById(alertId);
|
||||
if (alertElement) {
|
||||
alertElement.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
getAlertIcon(type) {
|
||||
const icons = {
|
||||
'success': 'check-circle-fill',
|
||||
'danger': 'exclamation-triangle-fill',
|
||||
'warning': 'exclamation-triangle-fill',
|
||||
'info': 'info-circle-fill'
|
||||
};
|
||||
return icons[type] || 'info-circle-fill';
|
||||
}
|
||||
|
||||
convertToCSV(data) {
|
||||
if (!data || data.length === 0) return '';
|
||||
|
||||
const headers = ['IP', '端口', '位置', '响应时间', '是否可用', '创建时间'];
|
||||
const csvRows = [headers.join(',')];
|
||||
|
||||
data.forEach(proxy => {
|
||||
const row = [
|
||||
proxy.ip,
|
||||
proxy.port,
|
||||
`"${proxy.location || ''}"`,
|
||||
proxy.response_time || '',
|
||||
proxy.is_valid ? '是' : '否',
|
||||
proxy.created_at
|
||||
];
|
||||
csvRows.push(row.join(','));
|
||||
});
|
||||
|
||||
return csvRows.join('\n');
|
||||
}
|
||||
|
||||
downloadCSV(csv, filename) {
|
||||
const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', filename);
|
||||
link.style.visibility = 'hidden';
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
startAutoRefresh() {
|
||||
// 每30秒刷新一次数据
|
||||
this.refreshInterval = setInterval(() => {
|
||||
this.loadDashboardData();
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
stopAutoRefresh() {
|
||||
if (this.refreshInterval) {
|
||||
clearInterval(this.refreshInterval);
|
||||
this.refreshInterval = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 全局函数（供HTML调用）
|
||||
let dashboard;
|
||||
|
||||
async function refreshData() {
|
||||
if (dashboard) {
|
||||
await dashboard.loadDashboardData();
|
||||
dashboard.showAlert('数据已刷新', 'info');
|
||||
}
|
||||
}
|
||||
|
||||
async function startScrape() {
|
||||
if (dashboard) {
|
||||
await dashboard.startScrape();
|
||||
}
|
||||
}
|
||||
|
||||
async function startValidate() {
|
||||
if (dashboard) {
|
||||
await dashboard.startValidate();
|
||||
}
|
||||
}
|
||||
|
||||
async function cleanupInvalid() {
|
||||
if (dashboard) {
|
||||
await dashboard.cleanupInvalid();
|
||||
}
|
||||
}
|
||||
|
||||
async function exportProxies() {
|
||||
if (dashboard) {
|
||||
await dashboard.exportProxies();
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
dashboard = new Dashboard();
|
||||
});
|
||||
|
||||
// 页面卸载时清理
|
||||
window.addEventListener('beforeunload', () => {
|
||||
if (dashboard) {
|
||||
dashboard.stopAutoRefresh();
|
||||
}
|
||||
});
|
||||
751
public/js/history.js
Normal file
751
public/js/history.js
Normal file
@@ -0,0 +1,751 @@
|
||||
// 执行历史页面JavaScript
|
||||
|
||||
class HistoryManager {
|
||||
constructor() {
|
||||
this.currentTaskPage = 1;
|
||||
this.currentLogsPage = 1;
|
||||
this.pageSize = 20;
|
||||
this.charts = {};
|
||||
this.searchParams = {
|
||||
taskType: '',
|
||||
taskStatus: '',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
};
|
||||
this.logSearchParams = {
|
||||
level: '',
|
||||
category: '',
|
||||
keyword: ''
|
||||
};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
console.log('初始化执行历史页面...');
|
||||
|
||||
// 绑定事件
|
||||
this.bindEvents();
|
||||
|
||||
// 初始化图表
|
||||
this.initCharts();
|
||||
|
||||
// 加载初始数据
|
||||
await this.loadTaskHistory();
|
||||
await this.loadSystemLogs();
|
||||
await this.loadStatistics();
|
||||
|
||||
console.log('执行历史页面初始化完成');
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// 任务历史筛选
|
||||
document.getElementById('taskFilterForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.searchParams.taskType = document.getElementById('taskTypeFilter').value;
|
||||
this.searchParams.taskStatus = document.getElementById('taskStatusFilter').value;
|
||||
this.searchParams.startDate = document.getElementById('startDate').value;
|
||||
this.searchParams.endDate = document.getElementById('endDate').value;
|
||||
this.currentTaskPage = 1;
|
||||
this.loadTaskHistory();
|
||||
});
|
||||
|
||||
// 系统日志筛选
|
||||
document.getElementById('logFilterForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.logSearchParams.level = document.getElementById('logLevelFilter').value;
|
||||
this.logSearchParams.category = document.getElementById('logCategoryFilter').value;
|
||||
this.logSearchParams.keyword = document.getElementById('logSearchKeyword').value;
|
||||
this.currentLogsPage = 1;
|
||||
this.loadSystemLogs();
|
||||
});
|
||||
|
||||
// 选项卡切换事件
|
||||
document.getElementById('stats-tab').addEventListener('shown.bs.tab', () => {
|
||||
this.loadStatistics();
|
||||
this.updateCharts();
|
||||
});
|
||||
}
|
||||
|
||||
initCharts() {
|
||||
// 任务趋势图
|
||||
const taskTrendCtx = document.getElementById('taskTrendChart');
|
||||
if (taskTrendCtx) {
|
||||
this.charts.taskTrend = new Chart(taskTrendCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: '成功任务',
|
||||
data: [],
|
||||
borderColor: '#28a745',
|
||||
backgroundColor: 'rgba(40, 167, 69, 0.1)',
|
||||
tension: 0.4
|
||||
}, {
|
||||
label: '失败任务',
|
||||
data: [],
|
||||
borderColor: '#dc3545',
|
||||
backgroundColor: 'rgba(220, 53, 69, 0.1)',
|
||||
tension: 0.4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
precision: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 日志级别分布图
|
||||
const logLevelCtx = document.getElementById('logLevelChart');
|
||||
if (logLevelCtx) {
|
||||
this.charts.logLevel = new Chart(logLevelCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['错误', '警告', '信息', '调试'],
|
||||
datasets: [{
|
||||
data: [0, 0, 0, 0],
|
||||
backgroundColor: ['#dc3545', '#ffc107', '#17a2b8', '#6c757d']
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async loadTaskHistory() {
|
||||
try {
|
||||
this.showTaskLoading(true);
|
||||
|
||||
// 构建查询参数
|
||||
const params = new URLSearchParams({
|
||||
limit: this.pageSize,
|
||||
offset: (this.currentTaskPage - 1) * this.pageSize
|
||||
});
|
||||
|
||||
if (this.searchParams.taskType) params.append('taskType', this.searchParams.taskType);
|
||||
if (this.searchParams.taskStatus) params.append('status', this.searchParams.taskStatus);
|
||||
|
||||
const response = await fetch(`/api/history?${params}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.renderTaskHistoryTable(result.data);
|
||||
this.renderTaskPagination(result.pagination);
|
||||
} else {
|
||||
this.showAlert('加载任务历史失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载任务历史失败:', error);
|
||||
this.showAlert('加载任务历史失败: ' + error.message, 'danger');
|
||||
} finally {
|
||||
this.showTaskLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async loadSystemLogs() {
|
||||
try {
|
||||
this.showLogsLoading(true);
|
||||
|
||||
// 构建查询参数
|
||||
const params = new URLSearchParams({
|
||||
limit: this.pageSize,
|
||||
offset: (this.currentLogsPage - 1) * this.pageSize
|
||||
});
|
||||
|
||||
if (this.logSearchParams.level) params.append('level', this.logSearchParams.level);
|
||||
if (this.logSearchParams.category) params.append('category', this.logSearchParams.category);
|
||||
|
||||
let response;
|
||||
if (this.logSearchParams.keyword) {
|
||||
response = await fetch(`/api/history/logs/search?keyword=${encodeURIComponent(this.logSearchParams.keyword)}&limit=${this.pageSize}`);
|
||||
} else {
|
||||
response = await fetch(`/api/history/logs/system?${params}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.renderSystemLogsTable(result.data);
|
||||
this.renderLogsPagination(result.pagination);
|
||||
} else {
|
||||
this.showAlert('加载系统日志失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载系统日志失败:', error);
|
||||
this.showAlert('加载系统日志失败: ' + error.message, 'danger');
|
||||
} finally {
|
||||
this.showLogsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async loadStatistics() {
|
||||
try {
|
||||
// 加载任务统计
|
||||
const taskStatsResponse = await fetch('/api/history/stats/summary');
|
||||
const taskStatsResult = await taskStatsResponse.json();
|
||||
|
||||
if (taskStatsResult.success) {
|
||||
this.updateTaskStatistics(taskStatsResult.data.summary);
|
||||
this.renderTaskStats(taskStatsResult.data);
|
||||
}
|
||||
|
||||
// 加载日志统计
|
||||
const logStatsResponse = await fetch('/api/history/logs/stats');
|
||||
const logStatsResult = await logStatsResponse.json();
|
||||
|
||||
if (logStatsResult.success) {
|
||||
this.updateLogStatistics(logStatsResult.data.summary);
|
||||
this.renderLogStats(logStatsResult.data);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载统计数据失败:', error);
|
||||
this.showAlert('加载统计数据失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
renderTaskHistoryTable(tasks) {
|
||||
const tbody = document.getElementById('taskHistoryTableBody');
|
||||
|
||||
if (tasks.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="8" class="text-center p-4">
|
||||
<i class="bi bi-inbox fs-1 text-muted"></i>
|
||||
<p class="text-muted mt-2">暂无任务历史</p>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = tasks.map(task => `
|
||||
<tr>
|
||||
<td>
|
||||
<span class="badge bg-secondary">${this.getTaskTypeLabel(task.task_type)}</span>
|
||||
</td>
|
||||
<td>${task.task_name}</td>
|
||||
<td>
|
||||
<span class="badge ${this.getStatusClass(task.status)}">
|
||||
<i class="bi bi-${this.getStatusIcon(task.status)}"></i>
|
||||
${this.getStatusText(task.status)}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted">${this.formatDateTime(task.start_time)}</small>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted">${task.end_time ? this.formatDateTime(task.end_time) : '-'}</small>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted">${task.duration ? this.formatDuration(task.duration) : '-'}</small>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted">${task.result_summary || '-'}</small>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="historyManager.showTaskDetail(${task.id})">
|
||||
<i class="bi bi-eye"></i> 详情
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
renderSystemLogsTable(logs) {
|
||||
const tbody = document.getElementById('systemLogsTableBody');
|
||||
|
||||
if (logs.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="5" class="text-center p-4">
|
||||
<i class="bi bi-inbox fs-1 text-muted"></i>
|
||||
<p class="text-muted mt-2">暂无系统日志</p>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = logs.map(log => `
|
||||
<tr>
|
||||
<td>
|
||||
<small class="text-muted">${this.formatDateTime(log.timestamp)}</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge ${this.getLogLevelClass(log.level)}">${log.level.toUpperCase()}</span>
|
||||
</td>
|
||||
<td>
|
||||
<small>${log.category || '-'}</small>
|
||||
</td>
|
||||
<td>
|
||||
<small>${log.message}</small>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted">${log.source}</small>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
renderTaskPagination(pagination) {
|
||||
const paginationElement = document.getElementById('taskPagination');
|
||||
this.renderPagination(paginationElement, pagination, this.currentTaskPage, (page) => {
|
||||
this.currentTaskPage = page;
|
||||
this.loadTaskHistory();
|
||||
});
|
||||
}
|
||||
|
||||
renderLogsPagination(pagination) {
|
||||
const paginationElement = document.getElementById('logsPagination');
|
||||
this.renderPagination(paginationElement, pagination, this.currentLogsPage, (page) => {
|
||||
this.currentLogsPage = page;
|
||||
this.loadSystemLogs();
|
||||
});
|
||||
}
|
||||
|
||||
renderPagination(container, pagination, currentPage, onPageChange) {
|
||||
const totalPages = Math.ceil(pagination.total / pagination.limit);
|
||||
|
||||
if (totalPages <= 1) {
|
||||
container.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
let paginationHTML = '';
|
||||
|
||||
// 上一页
|
||||
paginationHTML += `
|
||||
<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
|
||||
<a class="page-link" href="#" onclick="historyManager.goToTaskPage(${currentPage - 1}); return false;">
|
||||
<i class="bi bi-chevron-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
// 页码
|
||||
const startPage = Math.max(1, currentPage - 2);
|
||||
const endPage = Math.min(totalPages, currentPage + 2);
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
paginationHTML += `
|
||||
<li class="page-item ${i === currentPage ? 'active' : ''}">
|
||||
<a class="page-link" href="#" onclick="historyManager.goToTaskPage(${i}); return false;">${i}</a>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
// 下一页
|
||||
paginationHTML += `
|
||||
<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
|
||||
<a class="page-link" href="#" onclick="historyManager.goToTaskPage(${currentPage + 1}); return false;">
|
||||
<i class="bi bi-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
container.innerHTML = paginationHTML;
|
||||
}
|
||||
|
||||
updateTaskStatistics(stats) {
|
||||
document.getElementById('totalTasks').textContent = stats.total;
|
||||
document.getElementById('successTasks').textContent = stats.success;
|
||||
document.getElementById('failedTasks').textContent = stats.failed;
|
||||
document.getElementById('successRate').textContent = stats.success_rate + '%';
|
||||
}
|
||||
|
||||
updateLogStatistics(stats) {
|
||||
// 更新日志级别图表
|
||||
if (this.charts.logLevel) {
|
||||
this.charts.logLevel.data.datasets[0].data = [
|
||||
stats.error,
|
||||
stats.warning,
|
||||
stats.info,
|
||||
stats.debug
|
||||
];
|
||||
this.charts.logLevel.update();
|
||||
}
|
||||
}
|
||||
|
||||
renderTaskStats(data) {
|
||||
const content = document.getElementById('taskStatsContent');
|
||||
|
||||
if (!data.daily || data.daily.length === 0) {
|
||||
content.innerHTML = '<p class="text-muted">暂无数据</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '<table class="table table-sm">';
|
||||
html += '<thead><tr><th>日期</th><th>总任务</th><th>成功</th><th>失败</th><th>成功率</th></tr></thead><tbody>';
|
||||
|
||||
data.daily.slice(0, 7).forEach(day => {
|
||||
const successRate = day.total > 0 ? ((day.success / day.total) * 100).toFixed(1) : '0';
|
||||
html += `
|
||||
<tr>
|
||||
<td>${this.formatDate(day.date)}</td>
|
||||
<td>${day.total}</td>
|
||||
<td class="text-success">${day.success}</td>
|
||||
<td class="text-danger">${day.failed}</td>
|
||||
<td>${successRate}%</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</tbody></table>';
|
||||
content.innerHTML = html;
|
||||
}
|
||||
|
||||
renderLogStats(data) {
|
||||
const content = document.getElementById('logStatsContent');
|
||||
|
||||
const summary = data.summary;
|
||||
let html = '<div class="row">';
|
||||
html += '<div class="col-6"><small class="text-muted">总日志数:</small><div><strong>' + summary.total + '</strong></div></div>';
|
||||
html += '<div class="col-6"><small class="text-muted">错误:</small><div><strong class="text-danger">' + summary.error + '</strong></div></div>';
|
||||
html += '<div class="col-6"><small class="text-muted">警告:</small><div><strong class="text-warning">' + summary.warning + '</strong></div></div>';
|
||||
html += '<div class="col-6"><small class="text-muted">信息:</small><div><strong class="text-info">' + summary.info + '</strong></div></div>';
|
||||
html += '</div>';
|
||||
|
||||
content.innerHTML = html;
|
||||
}
|
||||
|
||||
async updateCharts() {
|
||||
try {
|
||||
// 加载每日任务统计
|
||||
const response = await fetch('/api/dashboard/charts/tasks');
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success && this.charts.taskTrend) {
|
||||
const labels = result.data.map(item => this.formatDate(item.date));
|
||||
const successData = result.data.map(item => item.scrape_success + item.validation_success);
|
||||
const failedData = result.data.map(item => item.scrape_failed + item.validation_failed);
|
||||
|
||||
this.charts.taskTrend.data.labels = labels;
|
||||
this.charts.taskTrend.data.datasets[0].data = successData;
|
||||
this.charts.taskTrend.data.datasets[1].data = failedData;
|
||||
this.charts.taskTrend.update();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新图表失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async showTaskDetail(taskId) {
|
||||
try {
|
||||
const response = await fetch(`/api/history/${taskId}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
const task = result.data;
|
||||
const content = document.getElementById('taskDetailContent');
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<strong>任务类型:</strong><br>
|
||||
<span class="badge bg-secondary">${this.getTaskTypeLabel(task.task_type)}</span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<strong>任务名称:</strong><br>
|
||||
${task.task_name}
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<strong>状态:</strong><br>
|
||||
<span class="badge ${this.getStatusClass(task.status)}">
|
||||
${this.getStatusText(task.status)}
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<strong>执行时长:</strong><br>
|
||||
${task.duration ? this.formatDuration(task.duration) : '-'}
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<strong>开始时间:</strong><br>
|
||||
${this.formatDateTime(task.start_time)}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<strong>结束时间:</strong><br>
|
||||
${task.end_time ? this.formatDateTime(task.end_time) : '-'}
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<strong>结果摘要:</strong><br>
|
||||
<p>${task.result_summary || '暂无摘要'}</p>
|
||||
</div>
|
||||
</div>
|
||||
${task.error_message ? `
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<strong>错误信息:</strong><br>
|
||||
<div class="alert alert-danger">${task.error_message}</div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
${task.details ? `
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<strong>详细信息:</strong><br>
|
||||
<pre class="bg-light p-2 rounded"><code>${JSON.stringify(task.details, null, 2)}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
`;
|
||||
|
||||
// 显示模态框
|
||||
const modal = new bootstrap.Modal(document.getElementById('taskDetailModal'));
|
||||
modal.show();
|
||||
} else {
|
||||
this.showAlert('获取任务详情失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取任务详情失败:', error);
|
||||
this.showAlert('获取任务详情失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
async exportTaskHistory() {
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (this.searchParams.taskType) params.append('taskType', this.searchParams.taskType);
|
||||
if (this.searchParams.taskStatus) params.append('status', this.searchParams.taskStatus);
|
||||
|
||||
const response = await fetch(`/api/history/export?${params}&format=csv`);
|
||||
|
||||
if (response.ok) {
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `task_history_${new Date().toISOString().slice(0, 10)}.csv`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
|
||||
this.showAlert('任务历史导出成功', 'success');
|
||||
} else {
|
||||
this.showAlert('导出失败', 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('导出任务历史失败:', error);
|
||||
this.showAlert('导出任务历史失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
async cleanupLogs() {
|
||||
if (!confirm('确定要清理30天前的历史记录吗？此操作不可恢复。')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/history/cleanup', {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ days: 30, type: 'all' })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.showAlert(result.message, 'success');
|
||||
await this.loadSystemLogs();
|
||||
await this.loadStatistics();
|
||||
} else {
|
||||
this.showAlert('清理失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('清理历史记录失败:', error);
|
||||
this.showAlert('清理历史记录失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
getTaskTypeLabel(type) {
|
||||
const labels = {
|
||||
'scrape': '抓取任务',
|
||||
'validation': '验证任务',
|
||||
'health_check': '健康检查'
|
||||
};
|
||||
return labels[type] || type;
|
||||
}
|
||||
|
||||
getStatusClass(status) {
|
||||
const classes = {
|
||||
'success': 'bg-success',
|
||||
'failed': 'bg-danger',
|
||||
'running': 'bg-warning',
|
||||
'pending': 'bg-secondary'
|
||||
};
|
||||
return classes[status] || 'bg-secondary';
|
||||
}
|
||||
|
||||
getStatusIcon(status) {
|
||||
const icons = {
|
||||
'success': 'check-circle',
|
||||
'failed': 'x-circle',
|
||||
'running': 'clock',
|
||||
'pending': 'pause-circle'
|
||||
};
|
||||
return icons[status] || 'question-circle';
|
||||
}
|
||||
|
||||
getStatusText(status) {
|
||||
const texts = {
|
||||
'success': '成功',
|
||||
'failed': '失败',
|
||||
'running': '运行中',
|
||||
'pending': '等待中'
|
||||
};
|
||||
return texts[status] || status;
|
||||
}
|
||||
|
||||
getLogLevelClass(level) {
|
||||
const classes = {
|
||||
'error': 'bg-danger',
|
||||
'warning': 'bg-warning',
|
||||
'info': 'bg-info',
|
||||
'debug': 'bg-secondary'
|
||||
};
|
||||
return classes[level] || 'bg-secondary';
|
||||
}
|
||||
|
||||
formatDateTime(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('zh-CN');
|
||||
}
|
||||
|
||||
formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
formatDuration(ms) {
|
||||
if (!ms) return '-';
|
||||
|
||||
if (ms < 1000) {
|
||||
return ms + 'ms';
|
||||
} else if (ms < 60000) {
|
||||
return (ms / 1000).toFixed(1) + 's';
|
||||
} else {
|
||||
return (ms / 60000).toFixed(1) + 'min';
|
||||
}
|
||||
}
|
||||
|
||||
showTaskLoading(show) {
|
||||
const tbody = document.getElementById('taskHistoryTableBody');
|
||||
const spinner = tbody.querySelector('.spinner-border');
|
||||
if (spinner) {
|
||||
spinner.parentElement.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
showLogsLoading(show) {
|
||||
const tbody = document.getElementById('systemLogsTableBody');
|
||||
const spinner = tbody.querySelector('.spinner-border');
|
||||
if (spinner) {
|
||||
spinner.parentElement.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
showAlert(message, type = 'info') {
|
||||
const alertContainer = document.getElementById('alertContainer');
|
||||
if (!alertContainer) return;
|
||||
|
||||
const alertId = 'alert-' + Date.now();
|
||||
const alertHtml = `
|
||||
<div class="alert alert-${type} alert-dismissible fade show" role="alert" id="${alertId}">
|
||||
<i class="bi bi-${this.getAlertIcon(type)}"></i>
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
alertContainer.insertAdjacentHTML('beforeend', alertHtml);
|
||||
|
||||
// 自动移除提示
|
||||
setTimeout(() => {
|
||||
const alertElement = document.getElementById(alertId);
|
||||
if (alertElement) {
|
||||
alertElement.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
getAlertIcon(type) {
|
||||
const icons = {
|
||||
'success': 'check-circle-fill',
|
||||
'danger': 'exclamation-triangle-fill',
|
||||
'warning': 'exclamation-triangle-fill',
|
||||
'info': 'info-circle-fill'
|
||||
};
|
||||
return icons[type] || 'info-circle-fill';
|
||||
}
|
||||
|
||||
goToTaskPage(page) {
|
||||
this.currentTaskPage = page;
|
||||
this.loadTaskHistory();
|
||||
}
|
||||
}
|
||||
|
||||
// 全局函数（供HTML调用）
|
||||
let historyManager;
|
||||
|
||||
async function refreshHistory() {
|
||||
if (historyManager) {
|
||||
await Promise.all([
|
||||
historyManager.loadTaskHistory(),
|
||||
historyManager.loadSystemLogs(),
|
||||
historyManager.loadStatistics()
|
||||
]);
|
||||
historyManager.showAlert('历史数据已刷新', 'info');
|
||||
}
|
||||
}
|
||||
|
||||
async function exportTaskHistory() {
|
||||
if (historyManager) {
|
||||
await historyManager.exportTaskHistory();
|
||||
}
|
||||
}
|
||||
|
||||
async function cleanupLogs() {
|
||||
if (historyManager) {
|
||||
await historyManager.cleanupLogs();
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
historyManager = new HistoryManager();
|
||||
});
|
||||
604
public/js/monitoring.js
Normal file
604
public/js/monitoring.js
Normal file
@@ -0,0 +1,604 @@
|
||||
// 系统监控页面JavaScript
|
||||
|
||||
class SystemMonitor {
|
||||
constructor() {
|
||||
this.charts = {};
|
||||
this.refreshInterval = null;
|
||||
this.refreshProgressInterval = null;
|
||||
this.isRefreshing = false;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
console.log('初始化系统监控页面...');
|
||||
|
||||
// 初始化图表
|
||||
this.initCharts();
|
||||
|
||||
// 加载初始数据
|
||||
await this.loadSystemStatus();
|
||||
await this.loadRecentData();
|
||||
|
||||
// 启动自动刷新
|
||||
this.startAutoRefresh();
|
||||
|
||||
// 启动刷新进度条
|
||||
this.startRefreshProgress();
|
||||
|
||||
console.log('系统监控页面初始化完成');
|
||||
}
|
||||
|
||||
initCharts() {
|
||||
// 代理池趋势图
|
||||
const proxyPoolCtx = document.getElementById('proxyPoolChart');
|
||||
if (proxyPoolCtx) {
|
||||
this.charts.proxyPool = new Chart(proxyPoolCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: '总代理数',
|
||||
data: [],
|
||||
borderColor: '#007bff',
|
||||
backgroundColor: 'rgba(0, 123, 255, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
}, {
|
||||
label: '可用代理',
|
||||
data: [],
|
||||
borderColor: '#28a745',
|
||||
backgroundColor: 'rgba(40, 167, 69, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
precision: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 任务执行率图
|
||||
const taskRateCtx = document.getElementById('taskRateChart');
|
||||
if (taskRateCtx) {
|
||||
this.charts.taskRate = new Chart(taskRateCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: '成功率 (%)',
|
||||
data: [],
|
||||
borderColor: '#17a2b8',
|
||||
backgroundColor: 'rgba(23, 162, 184, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
return value + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async loadSystemStatus() {
|
||||
try {
|
||||
this.setRefreshing(true);
|
||||
|
||||
// 获取系统状态
|
||||
const statusResponse = await fetch('/api/dashboard/status');
|
||||
const statusData = await statusResponse.json();
|
||||
|
||||
if (statusData.success) {
|
||||
this.updateSystemOverview(statusData.data);
|
||||
this.updateTasksStatus(statusData.data);
|
||||
this.updateProxyPoolStatus(statusData.data.proxies);
|
||||
this.updateResourceUsage(statusData.data);
|
||||
}
|
||||
|
||||
// 更新最后刷新时间
|
||||
this.updateLastRefreshTime();
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载系统状态失败:', error);
|
||||
this.showAlert('加载系统状态失败: ' + error.message, 'danger');
|
||||
} finally {
|
||||
this.setRefreshing(false);
|
||||
}
|
||||
}
|
||||
|
||||
async loadRecentData() {
|
||||
try {
|
||||
// 加载图表数据
|
||||
await this.updateCharts();
|
||||
|
||||
// 加载最近日志
|
||||
await this.loadRecentLogs();
|
||||
|
||||
// 加载最近事件
|
||||
await this.loadRecentEvents();
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载最近数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
updateSystemOverview(data) {
|
||||
// 更新系统状态指示器
|
||||
const indicator = document.getElementById('systemStatusIndicator');
|
||||
const statusText = document.getElementById('systemStatusText');
|
||||
const healthBadge = document.getElementById('systemHealth');
|
||||
|
||||
if (data.proxies && data.proxies.valid > 0) {
|
||||
indicator.className = 'status-indicator online';
|
||||
statusText.textContent = '在线';
|
||||
healthBadge.textContent = '健康';
|
||||
healthBadge.className = 'badge bg-success';
|
||||
} else {
|
||||
indicator.className = 'status-indicator offline';
|
||||
statusText.textContent = '异常';
|
||||
healthBadge.textContent = '异常';
|
||||
healthBadge.className = 'badge bg-danger';
|
||||
}
|
||||
|
||||
// 更新运行时间
|
||||
document.getElementById('systemUptime').textContent = this.formatUptime(data.uptime);
|
||||
|
||||
// 更新内存使用
|
||||
const memoryHtml = `
|
||||
<div>已使用: ${data.memory.heapUsed}MB</div>
|
||||
<div class="progress mt-1" style="height: 8px;">
|
||||
<div class="progress-bar" style="width: ${(data.memory.heapUsed / data.memory.heapTotal * 100)}%"></div>
|
||||
</div>
|
||||
<small class="text-muted">总计: ${data.memory.heapTotal}MB</small>
|
||||
`;
|
||||
document.getElementById('memoryUsage').innerHTML = memoryHtml;
|
||||
|
||||
// 更新定时任务状态
|
||||
if (data.scheduler) {
|
||||
const taskCount = data.scheduler.taskCount || 0;
|
||||
document.getElementById('schedulerStatus').innerHTML = `
|
||||
<div>${taskCount} 个任务运行中</div>
|
||||
<small class="text-muted">自动调度正常</small>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
updateTasksStatus(data) {
|
||||
const container = document.getElementById('tasksStatus');
|
||||
|
||||
if (data.today_tasks) {
|
||||
const scrape = data.today_tasks.scrape;
|
||||
const validation = data.today_tasks.validation;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="card border-primary">
|
||||
<div class="card-body text-center p-2">
|
||||
<h6 class="card-title mb-1">抓取任务</h6>
|
||||
<div class="d-flex justify-content-between">
|
||||
<small>成功: <span class="text-success">${scrape.success}</span></small>
|
||||
<small>失败: <span class="text-danger">${scrape.failed}</span></small>
|
||||
</div>
|
||||
<div class="progress mt-1" style="height: 6px;">
|
||||
<div class="progress-bar bg-success" style="width: ${scrape.success_rate}%"></div>
|
||||
</div>
|
||||
<small class="text-muted">成功率: ${scrape.success_rate}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card border-success">
|
||||
<div class="card-body text-center p-2">
|
||||
<h6 class="card-title mb-1">验证任务</h6>
|
||||
<div class="d-flex justify-content-between">
|
||||
<small>成功: <span class="text-success">${validation.success}</span></small>
|
||||
<small>失败: <span class="text-danger">${validation.failed}</span></small>
|
||||
</div>
|
||||
<div class="progress mt-1" style="height: 6px;">
|
||||
<div class="progress-bar bg-success" style="width: ${validation.success_rate}%"></div>
|
||||
</div>
|
||||
<small class="text-muted">成功率: ${validation.success_rate}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
updateProxyPoolStatus(proxies) {
|
||||
const container = document.getElementById('proxyPoolStatus');
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="row text-center">
|
||||
<div class="col-4">
|
||||
<div class="p-2">
|
||||
<h4 class="text-primary mb-0">${proxies.total}</h4>
|
||||
<small class="text-muted">总代理数</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="p-2 border-start border-end">
|
||||
<h4 class="text-success mb-0">${proxies.valid}</h4>
|
||||
<small class="text-muted">可用代理</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="p-2">
|
||||
<h4 class="text-danger mb-0">${proxies.invalid}</h4>
|
||||
<small class="text-muted">无效代理</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-center">
|
||||
<div class="badge bg-info fs-6">可用率: ${proxies.validRate}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
updateResourceUsage(data) {
|
||||
if (data.memory) {
|
||||
const memoryPercent = Math.round((data.memory.heapUsed / data.memory.heapTotal) * 100);
|
||||
document.getElementById('memoryPercent').textContent = memoryPercent + '%';
|
||||
document.getElementById('memoryProgressBar').style.width = memoryPercent + '%';
|
||||
}
|
||||
|
||||
if (data.proxies) {
|
||||
const validRate = parseFloat(data.proxies.validRate);
|
||||
document.getElementById('proxyValidRate').textContent = data.proxies.validRate;
|
||||
document.getElementById('proxyValidProgressBar').style.width = validRate + '%';
|
||||
}
|
||||
|
||||
// 模拟CPU使用率（实际项目中可以从系统API获取）
|
||||
const cpuUsage = Math.round(Math.random() * 30 + 10); // 10-40%
|
||||
document.getElementById('cpuUsage').textContent = cpuUsage + '%';
|
||||
document.getElementById('cpuProgressBar').style.width = cpuUsage + '%';
|
||||
}
|
||||
|
||||
async updateCharts() {
|
||||
try {
|
||||
// 更新代理池趋势图
|
||||
const proxyResponse = await fetch('/api/dashboard/charts/proxies');
|
||||
const proxyResult = await proxyResponse.json();
|
||||
|
||||
if (proxyResult.success && this.charts.proxyPool) {
|
||||
const labels = proxyResult.data.map(item =>
|
||||
new Date(item.date).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
|
||||
);
|
||||
|
||||
// 计算累计数据
|
||||
let totalRunning = 0;
|
||||
let validRunning = 0;
|
||||
const totalData = [];
|
||||
const validData = [];
|
||||
|
||||
proxyResult.data.forEach(item => {
|
||||
totalRunning += item.total_added || 0;
|
||||
validRunning += item.valid_added || 0;
|
||||
totalData.push(totalRunning);
|
||||
validData.push(validRunning);
|
||||
});
|
||||
|
||||
this.charts.proxyPool.data.labels = labels;
|
||||
this.charts.proxyPool.data.datasets[0].data = totalData;
|
||||
this.charts.proxyPool.data.datasets[1].data = validData;
|
||||
this.charts.proxyPool.update();
|
||||
}
|
||||
|
||||
// 更新任务执行率图
|
||||
const taskResponse = await fetch('/api/history/stats/summary');
|
||||
const taskResult = await taskResponse.json();
|
||||
|
||||
if (taskResult.success && this.charts.taskRate) {
|
||||
// 使用最近7天的数据
|
||||
const labels = [];
|
||||
const successRates = [];
|
||||
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() - i);
|
||||
labels.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
|
||||
successRates.push(Math.random() * 30 + 70); // 模拟70-100%成功率
|
||||
}
|
||||
|
||||
this.charts.taskRate.data.labels = labels;
|
||||
this.charts.taskRate.data.datasets[0].data = successRates;
|
||||
this.charts.taskRate.update();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新图表失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async loadRecentLogs() {
|
||||
try {
|
||||
const response = await fetch('/api/history/logs/system?limit=10');
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.renderRecentLogs(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载最近日志失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async loadRecentEvents() {
|
||||
try {
|
||||
const response = await fetch('/api/history?limit=10');
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.renderRecentEvents(result.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载最近事件失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
renderRecentLogs(logs) {
|
||||
const container = document.getElementById('recentLogs');
|
||||
|
||||
if (!logs || logs.length === 0) {
|
||||
container.innerHTML = '<div class="text-center text-muted p-4">暂无日志</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = logs.map(log => `
|
||||
<div class="d-flex align-items-start mb-2 p-2 border-bottom">
|
||||
<div class="me-2">
|
||||
<span class="badge ${this.getLogLevelClass(log.level)}">${log.level.toUpperCase()}</span>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="small">${log.message}</div>
|
||||
<div class="text-muted" style="font-size: 0.75rem;">
|
||||
${this.formatDateTime(log.timestamp)} - ${log.source}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
renderRecentEvents(events) {
|
||||
const container = document.getElementById('recentEvents');
|
||||
|
||||
if (!events || events.length === 0) {
|
||||
container.innerHTML = '<div class="text-center text-muted p-4">暂无事件</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = events.map(event => `
|
||||
<div class="d-flex align-items-start mb-2 p-2 border-bottom">
|
||||
<div class="me-2">
|
||||
<i class="bi bi-${this.getTaskIcon(event.task_type)} text-${this.getTaskColor(event.status)}"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="small fw-bold">${event.task_name}</div>
|
||||
<div class="text-muted" style="font-size: 0.75rem;">
|
||||
${this.formatDateTime(event.start_time)} - ${this.getStatusText(event.status)}
|
||||
</div>
|
||||
${event.result_summary ? `<div class="small text-muted">${event.result_summary}</div>` : ''}
|
||||
</div>
|
||||
<div>
|
||||
<span class="badge ${this.getStatusClass(event.status)}">${this.getStatusText(event.status)}</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
startAutoRefresh() {
|
||||
// 每30秒刷新一次数据
|
||||
this.refreshInterval = setInterval(() => {
|
||||
this.loadSystemStatus();
|
||||
}, 30000);
|
||||
|
||||
// 每5分钟刷新最近数据
|
||||
setInterval(() => {
|
||||
this.loadRecentData();
|
||||
}, 300000);
|
||||
}
|
||||
|
||||
startRefreshProgress() {
|
||||
this.refreshProgressInterval = setInterval(() => {
|
||||
const progressBar = document.getElementById('refreshProgress');
|
||||
if (progressBar) {
|
||||
const currentWidth = parseFloat(progressBar.style.width) || 100;
|
||||
const newWidth = Math.max(0, currentWidth - 3.33); // 30秒内从100%到0%
|
||||
progressBar.style.width = newWidth + '%';
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
updateLastRefreshTime() {
|
||||
const now = new Date();
|
||||
const timeString = now.toLocaleTimeString('zh-CN');
|
||||
document.getElementById('lastUpdateTime').textContent = timeString;
|
||||
}
|
||||
|
||||
setRefreshing(refreshing) {
|
||||
this.isRefreshing = refreshing;
|
||||
if (refreshing) {
|
||||
// 重置进度条
|
||||
const progressBar = document.getElementById('refreshProgress');
|
||||
if (progressBar) {
|
||||
progressBar.style.width = '100%';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
formatUptime(seconds) {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
|
||||
if (hours > 24) {
|
||||
const days = Math.floor(hours / 24);
|
||||
const remainingHours = hours % 24;
|
||||
return `${days}天 ${remainingHours}小时 ${minutes}分钟`;
|
||||
}
|
||||
|
||||
return `${hours}小时 ${minutes}分钟`;
|
||||
}
|
||||
|
||||
formatDateTime(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
getLogLevelClass(level) {
|
||||
const classes = {
|
||||
'error': 'bg-danger',
|
||||
'warning': 'bg-warning',
|
||||
'info': 'bg-info',
|
||||
'debug': 'bg-secondary'
|
||||
};
|
||||
return classes[level] || 'bg-secondary';
|
||||
}
|
||||
|
||||
getStatusClass(status) {
|
||||
const classes = {
|
||||
'success': 'bg-success',
|
||||
'failed': 'bg-danger',
|
||||
'running': 'bg-warning',
|
||||
'pending': 'bg-secondary'
|
||||
};
|
||||
return classes[status] || 'bg-secondary';
|
||||
}
|
||||
|
||||
getStatusText(status) {
|
||||
const texts = {
|
||||
'success': '成功',
|
||||
'failed': '失败',
|
||||
'running': '运行中',
|
||||
'pending': '等待中'
|
||||
};
|
||||
return texts[status] || status;
|
||||
}
|
||||
|
||||
getTaskIcon(taskType) {
|
||||
const icons = {
|
||||
'scrape': 'download',
|
||||
'validation': 'check2-square',
|
||||
'health_check': 'heart-pulse'
|
||||
};
|
||||
return icons[taskType] || 'gear';
|
||||
}
|
||||
|
||||
getTaskColor(status) {
|
||||
const colors = {
|
||||
'success': 'success',
|
||||
'failed': 'danger',
|
||||
'running': 'warning',
|
||||
'pending': 'secondary'
|
||||
};
|
||||
return colors[status] || 'secondary';
|
||||
}
|
||||
|
||||
showAlert(message, type = 'info') {
|
||||
const alertContainer = document.getElementById('alertContainer');
|
||||
if (!alertContainer) return;
|
||||
|
||||
const alertId = 'alert-' + Date.now();
|
||||
const alertHtml = `
|
||||
<div class="alert alert-${type} alert-dismissible fade show" role="alert" id="${alertId}">
|
||||
<i class="bi bi-${this.getAlertIcon(type)}"></i>
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
alertContainer.insertAdjacentHTML('beforeend', alertHtml);
|
||||
|
||||
// 自动移除提示
|
||||
setTimeout(() => {
|
||||
const alertElement = document.getElementById(alertId);
|
||||
if (alertElement) {
|
||||
alertElement.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
getAlertIcon(type) {
|
||||
const icons = {
|
||||
'success': 'check-circle-fill',
|
||||
'danger': 'exclamation-triangle-fill',
|
||||
'warning': 'exclamation-triangle-fill',
|
||||
'info': 'info-circle-fill'
|
||||
};
|
||||
return icons[type] || 'info-circle-fill';
|
||||
}
|
||||
|
||||
stopAutoRefresh() {
|
||||
if (this.refreshInterval) {
|
||||
clearInterval(this.refreshInterval);
|
||||
this.refreshInterval = null;
|
||||
}
|
||||
if (this.refreshProgressInterval) {
|
||||
clearInterval(this.refreshProgressInterval);
|
||||
this.refreshProgressInterval = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 全局函数（供HTML调用）
|
||||
let systemMonitor;
|
||||
|
||||
async function refreshMonitoring() {
|
||||
if (systemMonitor && !systemMonitor.isRefreshing) {
|
||||
await systemMonitor.loadSystemStatus();
|
||||
await systemMonitor.loadRecentData();
|
||||
systemMonitor.showAlert('监控数据已刷新', 'info');
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
systemMonitor = new SystemMonitor();
|
||||
});
|
||||
|
||||
// 页面卸载时清理
|
||||
window.addEventListener('beforeunload', () => {
|
||||
if (systemMonitor) {
|
||||
systemMonitor.stopAutoRefresh();
|
||||
}
|
||||
});
|
||||
760
public/js/proxies.js
Normal file
760
public/js/proxies.js
Normal file
@@ -0,0 +1,760 @@
|
||||
// 代理管理页面JavaScript
|
||||
|
||||
class ProxyManager {
|
||||
constructor() {
|
||||
this.currentPage = 1;
|
||||
this.pageSize = 20;
|
||||
this.totalCount = 0;
|
||||
this.proxies = [];
|
||||
this.selectedProxies = new Set();
|
||||
this.searchParams = {
|
||||
ip: '',
|
||||
port: '',
|
||||
location: '',
|
||||
status: '',
|
||||
sortBy: 'created_at',
|
||||
order: 'DESC'
|
||||
};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
console.log('初始化代理管理页面...');
|
||||
|
||||
// 绑定事件
|
||||
this.bindEvents();
|
||||
|
||||
// 加载代理列表
|
||||
await this.loadProxies();
|
||||
|
||||
console.log('代理管理页面初始化完成');
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// 搜索表单
|
||||
document.getElementById('searchForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.searchParams.ip = document.getElementById('searchIp').value;
|
||||
this.searchParams.port = document.getElementById('searchPort').value;
|
||||
this.searchParams.location = document.getElementById('searchLocation').value;
|
||||
this.searchParams.status = document.getElementById('filterStatus').value;
|
||||
this.searchParams.sortBy = document.getElementById('sortBy').value;
|
||||
this.currentPage = 1;
|
||||
this.loadProxies();
|
||||
});
|
||||
|
||||
// 单个代理验证
|
||||
document.getElementById('validateSingleProxy').addEventListener('click', () => {
|
||||
const proxyId = document.getElementById('validateSingleProxy').dataset.proxyId;
|
||||
if (proxyId) {
|
||||
this.validateSingleProxy(proxyId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async loadProxies() {
|
||||
try {
|
||||
this.showLoading(true);
|
||||
|
||||
// 构建查询参数
|
||||
const params = new URLSearchParams({
|
||||
limit: this.pageSize,
|
||||
offset: (this.currentPage - 1) * this.pageSize,
|
||||
sortBy: this.searchParams.sortBy,
|
||||
order: this.searchParams.order
|
||||
});
|
||||
|
||||
if (this.searchParams.ip) params.append('ip', this.searchParams.ip);
|
||||
if (this.searchParams.port) params.append('port', this.searchParams.port);
|
||||
if (this.searchParams.location) params.append('location', this.searchParams.location);
|
||||
if (this.searchParams.status !== '') params.append('validOnly', this.searchParams.status === '1');
|
||||
|
||||
const response = await fetch(`/api/proxies?${params}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.proxies = result.data;
|
||||
this.totalCount = result.pagination.total;
|
||||
this.renderProxyTable();
|
||||
this.renderPagination();
|
||||
this.updateStatistics();
|
||||
} else {
|
||||
this.showAlert('加载代理列表失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载代理列表失败:', error);
|
||||
this.showAlert('加载代理列表失败: ' + error.message, 'danger');
|
||||
} finally {
|
||||
this.showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
renderProxyTable() {
|
||||
const tbody = document.getElementById('proxyTableBody');
|
||||
|
||||
if (this.proxies.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="9" class="text-center p-4">
|
||||
<i class="bi bi-inbox fs-1 text-muted"></i>
|
||||
<p class="text-muted mt-2">暂无代理数据</p>
|
||||
<button class="btn btn-primary" onclick="proxyManager.startScrape()">
|
||||
<i class="bi bi-download"></i> 立即抓取代理
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = this.proxies.map(proxy => `
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" class="form-check-input proxy-checkbox"
|
||||
value="${proxy.id}" onchange="proxyManager.toggleProxySelection(${proxy.id})">
|
||||
</td>
|
||||
<td>
|
||||
<code>${proxy.ip}</code>
|
||||
</td>
|
||||
<td>${proxy.port}</td>
|
||||
<td>
|
||||
<small class="text-muted">${proxy.location || '-'}</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge ${proxy.is_valid ? 'bg-success' : 'bg-danger'}">
|
||||
<i class="bi bi-${proxy.is_valid ? 'check-circle' : 'x-circle'}"></i>
|
||||
${proxy.is_valid ? '可用' : '不可用'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted">
|
||||
${proxy.response_time ? proxy.response_time + 'ms' : '-'}
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted">
|
||||
${proxy.last_check_time ? this.formatDateTime(proxy.last_check_time) : '-'}
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted">
|
||||
${this.formatDateTime(proxy.created_at)}
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button class="btn btn-outline-primary" onclick="proxyManager.showProxyDetail(${proxy.id})" title="查看详情">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-success" onclick="proxyManager.validateSingleProxy(${proxy.id})" title="验证">
|
||||
<i class="bi bi-check2"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-danger" onclick="proxyManager.deleteProxy(${proxy.id})" title="删除">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
renderPagination() {
|
||||
const pagination = document.getElementById('pagination');
|
||||
const totalPages = Math.ceil(this.totalCount / this.pageSize);
|
||||
|
||||
if (totalPages <= 1) {
|
||||
pagination.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
let paginationHTML = '';
|
||||
|
||||
// 上一页
|
||||
paginationHTML += `
|
||||
<li class="page-item ${this.currentPage === 1 ? 'disabled' : ''}">
|
||||
<a class="page-link" href="#" onclick="proxyManager.goToPage(${this.currentPage - 1}); return false;">
|
||||
<i class="bi bi-chevron-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
// 页码
|
||||
const startPage = Math.max(1, this.currentPage - 2);
|
||||
const endPage = Math.min(totalPages, this.currentPage + 2);
|
||||
|
||||
if (startPage > 1) {
|
||||
paginationHTML += `
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" onclick="proxyManager.goToPage(1); return false;">1</a>
|
||||
</li>
|
||||
`;
|
||||
if (startPage > 2) {
|
||||
paginationHTML += '<li class="page-item disabled"><a class="page-link" href="#">...</a></li>';
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
paginationHTML += `
|
||||
<li class="page-item ${i === this.currentPage ? 'active' : ''}">
|
||||
<a class="page-link" href="#" onclick="proxyManager.goToPage(${i}); return false;">${i}</a>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
if (endPage < totalPages) {
|
||||
if (endPage < totalPages - 1) {
|
||||
paginationHTML += '<li class="page-item disabled"><a class="page-link" href="#">...</a></li>';
|
||||
}
|
||||
paginationHTML += `
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" onclick="proxyManager.goToPage(${totalPages}); return false;">${totalPages}</a>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
// 下一页
|
||||
paginationHTML += `
|
||||
<li class="page-item ${this.currentPage === totalPages ? 'disabled' : ''}">
|
||||
<a class="page-link" href="#" onclick="proxyManager.goToPage(${this.currentPage + 1}); return false;">
|
||||
<i class="bi bi-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
|
||||
pagination.innerHTML = paginationHTML;
|
||||
}
|
||||
|
||||
updateStatistics() {
|
||||
document.getElementById('totalCount').textContent = this.totalCount;
|
||||
document.getElementById('validCount').textContent = this.proxies.filter(p => p.is_valid).length;
|
||||
document.getElementById('invalidCount').textContent = this.proxies.filter(p => !p.is_valid).length;
|
||||
document.getElementById('showingCount').textContent = this.proxies.length;
|
||||
}
|
||||
|
||||
async showProxyDetail(proxyId) {
|
||||
try {
|
||||
const proxy = this.proxies.find(p => p.id === proxyId);
|
||||
if (!proxy) return;
|
||||
|
||||
const content = document.getElementById('proxyDetailContent');
|
||||
content.innerHTML = `
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<strong>IP地址:</strong><br>
|
||||
<code>${proxy.ip}</code>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<strong>端口:</strong><br>
|
||||
${proxy.port}
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<strong>位置:</strong><br>
|
||||
${proxy.location || '-'}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<strong>状态:</strong><br>
|
||||
<span class="badge ${proxy.is_valid ? 'bg-success' : 'bg-danger'}">
|
||||
${proxy.is_valid ? '可用' : '不可用'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<strong>响应时间:</strong><br>
|
||||
${proxy.response_time ? proxy.response_time + 'ms' : '-'}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<strong>最后验证:</strong><br>
|
||||
${proxy.last_check_time ? this.formatDateTime(proxy.last_check_time) : '-'}
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<strong>创建时间:</strong><br>
|
||||
${this.formatDateTime(proxy.created_at)}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<strong>更新时间:</strong><br>
|
||||
${this.formatDateTime(proxy.updated_at)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 设置验证按钮的数据属性
|
||||
document.getElementById('validateSingleProxy').dataset.proxyId = proxyId;
|
||||
|
||||
// 显示模态框
|
||||
const modal = new bootstrap.Modal(document.getElementById('proxyDetailModal'));
|
||||
modal.show();
|
||||
} catch (error) {
|
||||
console.error('显示代理详情失败:', error);
|
||||
this.showAlert('显示代理详情失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
async validateSingleProxy(proxyId) {
|
||||
try {
|
||||
const proxy = this.proxies.find(p => p.id === proxyId);
|
||||
if (!proxy) return;
|
||||
|
||||
// 关闭详情模态框
|
||||
const detailModal = bootstrap.Modal.getInstance(document.getElementById('proxyDetailModal'));
|
||||
if (detailModal) detailModal.hide();
|
||||
|
||||
// 显示验证进度
|
||||
const modal = new bootstrap.Modal(document.getElementById('validationModal'));
|
||||
document.getElementById('validationProgress').style.display = 'block';
|
||||
document.getElementById('validationResults').innerHTML = '';
|
||||
document.getElementById('validationStatus').textContent = `正在验证 ${proxy.ip}:${proxy.port}...`;
|
||||
document.getElementById('validationProgressBar').style.width = '50%';
|
||||
modal.show();
|
||||
|
||||
const response = await fetch('/api/proxies/verify', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
ip: proxy.ip,
|
||||
port: proxy.port
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// 更新进度条
|
||||
document.getElementById('validationProgressBar').style.width = '100%';
|
||||
document.getElementById('validationStatus').textContent = '验证完成';
|
||||
|
||||
// 显示结果
|
||||
document.getElementById('validationResults').innerHTML = `
|
||||
<div class="alert ${result.data.isValid ? 'alert-success' : 'alert-danger'}">
|
||||
<h6>验证结果: ${result.data.isValid ? '成功' : '失败'}</h6>
|
||||
<p><strong>IP:</strong> ${result.data.ip}:${result.data.port}</p>
|
||||
<p><strong>响应时间:</strong> ${result.data.responseTime}ms</p>
|
||||
${result.data.error ? `<p><strong>错误信息:</strong> ${result.data.error}</p>` : ''}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 延迟刷新列表
|
||||
setTimeout(() => {
|
||||
this.loadProxies();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('验证代理失败:', error);
|
||||
this.showAlert('验证代理失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
async deleteProxy(proxyId) {
|
||||
if (!confirm('确定要删除这个代理吗？')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const proxy = this.proxies.find(p => p.id === proxyId);
|
||||
if (!proxy) return;
|
||||
|
||||
// 这里应该调用删除API，但目前我们的API没有单个删除功能
|
||||
// 暂时显示提示
|
||||
this.showAlert(`代理 ${proxy.ip}:${proxy.port} 删除功能待实现`, 'info');
|
||||
|
||||
} catch (error) {
|
||||
console.error('删除代理失败:', error);
|
||||
this.showAlert('删除代理失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
toggleProxySelection(proxyId) {
|
||||
if (this.selectedProxies.has(proxyId)) {
|
||||
this.selectedProxies.delete(proxyId);
|
||||
} else {
|
||||
this.selectedProxies.add(proxyId);
|
||||
}
|
||||
this.updateSelectAllCheckbox();
|
||||
}
|
||||
|
||||
toggleSelectAll() {
|
||||
const selectAll = document.getElementById('selectAll').checked;
|
||||
const checkboxes = document.querySelectorAll('.proxy-checkbox');
|
||||
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = selectAll;
|
||||
const proxyId = parseInt(checkbox.value);
|
||||
if (selectAll) {
|
||||
this.selectedProxies.add(proxyId);
|
||||
} else {
|
||||
this.selectedProxies.delete(proxyId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateSelectAllCheckbox() {
|
||||
const checkboxes = document.querySelectorAll('.proxy-checkbox');
|
||||
const selectAll = document.getElementById('selectAll');
|
||||
selectAll.checked = checkboxes.length > 0 && this.selectedProxies.size === checkboxes.length;
|
||||
}
|
||||
|
||||
goToPage(page) {
|
||||
this.currentPage = page;
|
||||
this.loadProxies();
|
||||
}
|
||||
|
||||
async validateAll() {
|
||||
if (this.selectedProxies.size === 0) {
|
||||
this.showAlert('请先选择要验证的代理', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const selectedProxiesList = Array.from(this.selectedProxies).map(id =>
|
||||
this.proxies.find(p => p.id === id)
|
||||
).filter(p => p);
|
||||
|
||||
// 显示验证进度
|
||||
const modal = new bootstrap.Modal(document.getElementById('validationModal'));
|
||||
document.getElementById('validationProgress').style.display = 'block';
|
||||
document.getElementById('validationResults').innerHTML = '';
|
||||
document.getElementById('validationProgressBar').style.width = '0%';
|
||||
modal.show();
|
||||
|
||||
const response = await fetch('/api/proxies/verify-batch', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
proxies: selectedProxiesList
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// 更新进度条
|
||||
document.getElementById('validationProgressBar').style.width = '100%';
|
||||
document.getElementById('validationStatus').textContent = '验证完成';
|
||||
|
||||
// 显示结果
|
||||
document.getElementById('validationResults').innerHTML = `
|
||||
<div class="alert alert-info">
|
||||
<h6>批量验证完成</h6>
|
||||
<p><strong>总验证数:</strong> ${result.data.validated}</p>
|
||||
<p><strong>有效代理:</strong> <span class="badge bg-success">${result.data.valid}</span></p>
|
||||
<p><strong>无效代理:</strong> <span class="badge bg-danger">${result.data.invalid}</span></p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 延迟刷新列表
|
||||
setTimeout(() => {
|
||||
this.loadProxies();
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('批量验证失败:', error);
|
||||
this.showAlert('批量验证失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
async cleanupInvalid() {
|
||||
if (!confirm('确定要清理所有无效代理吗？此操作不可恢复。')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/proxies/cleanup', {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.showAlert(result.message, 'success');
|
||||
await this.loadProxies();
|
||||
} else {
|
||||
this.showAlert('清理失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('清理无效代理失败:', error);
|
||||
this.showAlert('清理无效代理失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
async exportProxies() {
|
||||
try {
|
||||
const response = await fetch('/api/proxies?limit=1000&validOnly=true');
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
const csv = this.convertToCSV(result.data);
|
||||
this.downloadCSV(csv, `valid_proxies_${new Date().toISOString().slice(0, 10)}.csv`);
|
||||
this.showAlert('数据导出成功', 'success');
|
||||
} else {
|
||||
this.showAlert('导出数据失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('导出数据失败:', error);
|
||||
this.showAlert('导出数据失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
async startScrape() {
|
||||
try {
|
||||
const response = await fetch('/api/dashboard/actions/scrape', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ pages: 40 })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.showAlert('抓取任务已启动', 'success');
|
||||
// 延迟刷新数据
|
||||
setTimeout(() => this.loadProxies(), 2000);
|
||||
} else {
|
||||
this.showAlert('启动抓取任务失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('启动抓取任务失败:', error);
|
||||
this.showAlert('启动抓取任务失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// 工具函数
|
||||
formatDateTime(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
showLoading(show) {
|
||||
const spinner = document.querySelector('#proxyTableBody .spinner-border');
|
||||
if (spinner) {
|
||||
spinner.parentElement.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
showAlert(message, type = 'info') {
|
||||
const alertContainer = document.getElementById('alertContainer');
|
||||
if (!alertContainer) return;
|
||||
|
||||
const alertId = 'alert-' + Date.now();
|
||||
const alertHtml = `
|
||||
<div class="alert alert-${type} alert-dismissible fade show" role="alert" id="${alertId}">
|
||||
<i class="bi bi-${this.getAlertIcon(type)}"></i>
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
alertContainer.insertAdjacentHTML('beforeend', alertHtml);
|
||||
|
||||
// 自动移除提示
|
||||
setTimeout(() => {
|
||||
const alertElement = document.getElementById(alertId);
|
||||
if (alertElement) {
|
||||
alertElement.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
getAlertIcon(type) {
|
||||
const icons = {
|
||||
'success': 'check-circle-fill',
|
||||
'danger': 'exclamation-triangle-fill',
|
||||
'warning': 'exclamation-triangle-fill',
|
||||
'info': 'info-circle-fill'
|
||||
};
|
||||
return icons[type] || 'info-circle-fill';
|
||||
}
|
||||
|
||||
convertToCSV(data) {
|
||||
if (!data || data.length === 0) return '';
|
||||
|
||||
const headers = ['IP', '端口', '位置', '响应时间', '最后验证时间', '创建时间'];
|
||||
const csvRows = [headers.join(',')];
|
||||
|
||||
data.forEach(proxy => {
|
||||
const row = [
|
||||
proxy.ip,
|
||||
proxy.port,
|
||||
`"${proxy.location || ''}"`,
|
||||
proxy.response_time || '',
|
||||
proxy.last_check_time || '',
|
||||
proxy.created_at
|
||||
];
|
||||
csvRows.push(row.join(','));
|
||||
});
|
||||
|
||||
return csvRows.join('\n');
|
||||
}
|
||||
|
||||
downloadCSV(csv, filename) {
|
||||
const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', filename);
|
||||
link.style.visibility = 'hidden';
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
// 导入代理功能
|
||||
async importProxies(proxies) {
|
||||
try {
|
||||
this.showAlert('开始导入并验证代理...', 'info');
|
||||
|
||||
const response = await fetch('/api/proxies/import', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ proxies })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
const { data } = result;
|
||||
let message = `导入完成！`;
|
||||
message += `\n📊 总数: ${data.total}`;
|
||||
message += `\n✅ 格式有效: ${data.format_valid}`;
|
||||
message += `\n❌ 格式无效: ${data.format_invalid}`;
|
||||
message += `\n🔍 验证通过: ${data.valid}`;
|
||||
message += `\n❌ 验证失败: ${data.invalid}`;
|
||||
message += `\n💾 保存成功: ${data.saved}`;
|
||||
|
||||
this.showAlert(message, 'success');
|
||||
|
||||
// 刷新代理列表
|
||||
setTimeout(() => this.loadProxies(), 2000);
|
||||
} else {
|
||||
this.showAlert('导入失败: ' + result.error, 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('导入代理失败:', error);
|
||||
this.showAlert('导入代理失败: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 全局函数（供HTML调用）
|
||||
let proxyManager;
|
||||
|
||||
async function refreshProxies() {
|
||||
if (proxyManager) {
|
||||
await proxyManager.loadProxies();
|
||||
proxyManager.showAlert('代理列表已刷新', 'info');
|
||||
}
|
||||
}
|
||||
|
||||
async function validateAll() {
|
||||
if (proxyManager) {
|
||||
await proxyManager.validateAll();
|
||||
}
|
||||
}
|
||||
|
||||
async function cleanupInvalid() {
|
||||
if (proxyManager) {
|
||||
await proxyManager.cleanupInvalid();
|
||||
}
|
||||
}
|
||||
|
||||
async function exportProxies() {
|
||||
if (proxyManager) {
|
||||
await proxyManager.exportProxies();
|
||||
}
|
||||
}
|
||||
|
||||
// 显示导入模态框
|
||||
function showImportModal() {
|
||||
const modal = new bootstrap.Modal(document.getElementById('importModal'));
|
||||
modal.show();
|
||||
}
|
||||
|
||||
// 从模态框导入代理
|
||||
async function importProxiesFromModal() {
|
||||
const jsonInput = document.getElementById('proxyJsonInput').value.trim();
|
||||
|
||||
if (!jsonInput) {
|
||||
alert('请输入代理JSON数据');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const proxies = JSON.parse(jsonInput);
|
||||
|
||||
if (!Array.isArray(proxies)) {
|
||||
alert('代理数据必须是数组格式');
|
||||
return;
|
||||
}
|
||||
|
||||
// 关闭模态框
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('importModal'));
|
||||
modal.hide();
|
||||
|
||||
// 清空输入框
|
||||
document.getElementById('proxyJsonInput').value = '';
|
||||
|
||||
// 开始导入
|
||||
if (proxyManager) {
|
||||
await proxyManager.importProxies(proxies);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('JSON格式错误: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理文件导入
|
||||
async function handleImportFile(event) {
|
||||
const file = event.target.files[0];
|
||||
|
||||
if (!file) return;
|
||||
|
||||
if (!file.name.endsWith('.json')) {
|
||||
alert('请选择JSON文件');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const text = await file.text();
|
||||
const proxies = JSON.parse(text);
|
||||
|
||||
if (!Array.isArray(proxies)) {
|
||||
alert('文件内容必须是代理数组');
|
||||
return;
|
||||
}
|
||||
|
||||
// 清空文件输入
|
||||
event.target.value = '';
|
||||
|
||||
// 开始导入
|
||||
if (proxyManager) {
|
||||
await proxyManager.importProxies(proxies);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('文件读取失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
proxyManager = new ProxyManager();
|
||||
});
|
||||
287
public/monitoring.html
Normal file
287
public/monitoring.html
Normal file
@@ -0,0 +1,287 @@
|
||||
<!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" href="history.html">
|
||||
<i class="bi bi-clock-history"></i> 执行历史
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="monitoring.html">
|
||||
<i class="bi bi-activity"></i> 系统监控
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="navbar-nav">
|
||||
<div class="nav-link">
|
||||
<span class="status-indicator online" id="systemStatusIndicator"></span>
|
||||
<span id="systemStatusText">在线</span>
|
||||
</div>
|
||||
<button class="btn btn-outline-light btn-sm ms-2" onclick="refreshMonitoring()">
|
||||
<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 text-center h-100">
|
||||
<div class="card-body">
|
||||
<i class="bi bi-cpu fs-1 text-primary mb-2"></i>
|
||||
<h5>系统状态</h5>
|
||||
<div class="badge bg-success" id="systemHealth">健康</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-center h-100">
|
||||
<div class="card-body">
|
||||
<i class="bi bi-clock fs-1 text-info mb-2"></i>
|
||||
<h5>运行时间</h5>
|
||||
<div id="systemUptime">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-center h-100">
|
||||
<div class="card-body">
|
||||
<i class="bi bi-memory fs-1 text-warning mb-2"></i>
|
||||
<h5>内存使用</h5>
|
||||
<div id="memoryUsage">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-center h-100">
|
||||
<div class="card-body">
|
||||
<i class="bi bi-gear fs-1 text-success mb-2"></i>
|
||||
<h5>定时任务</h5>
|
||||
<div id="schedulerStatus">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实时监控图表 -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title mb-0">
|
||||
<i class="bi bi-graph-up"></i> 代理池趋势
|
||||
<span class="badge bg-success ms-2">实时</span>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="proxyPoolChart" 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">
|
||||
<i class="bi bi-activity"></i> 任务执行率
|
||||
<span class="badge bg-success ms-2">实时</span>
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="taskRateChart" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详细监控信息 -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title mb-0">
|
||||
<i class="bi bi-list-check"></i> 定时任务状态
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="tasksStatus">
|
||||
<div class="text-center p-4">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title mb-0">
|
||||
<i class="bi bi-hdd-network"></i> 代理池状态
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="proxyPoolStatus">
|
||||
<div class="text-center p-4">
|
||||
<div class="spinner-border text-success" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统资源监控 -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title mb-0">
|
||||
<i class="bi bi-speedometer2"></i> 系统资源监控
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span>CPU使用率</span>
|
||||
<span id="cpuUsage">0%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" id="cpuProgressBar" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span>内存使用率</span>
|
||||
<span id="memoryPercent">0%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" id="memoryProgressBar" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span>代理池可用率</span>
|
||||
<span id="proxyValidRate">0%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success" id="proxyValidProgressBar" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近日志和事件 -->
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title mb-0">
|
||||
<i class="bi bi-journal-text"></i> 最近系统日志
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="recentLogs" style="max-height: 300px; overflow-y: auto;">
|
||||
<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 class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title mb-0">
|
||||
<i class="bi bi-calendar-event"></i> 最近任务事件
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="recentEvents" style="max-height: 300px; overflow-y: auto;">
|
||||
<div class="text-center p-4">
|
||||
<div class="spinner-border text-warning" role="status">
|
||||
<span class="visually-hidden">加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实时状态指示器 -->
|
||||
<div class="position-fixed bottom-0 end-0 p-3">
|
||||
<div class="card" style="width: 200px;">
|
||||
<div class="card-body text-center p-2">
|
||||
<small class="text-muted">最后更新</small>
|
||||
<div id="lastUpdateTime" class="small fw-bold">-</div>
|
||||
<div class="progress mt-2" style="height: 4px;">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" id="refreshProgress" style="width: 100%"></div>
|
||||
</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/monitoring.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
310
public/proxies.html
Normal file
310
public/proxies.html
Normal file
@@ -0,0 +1,310 @@
|
||||
<!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 active" href="proxies.html">
|
||||
<i class="bi bi-list-ul"></i> 代理管理
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" 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="refreshProxies()">
|
||||
<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-8">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card bg-primary text-white">
|
||||
<div class="card-body text-center">
|
||||
<h4 id="totalCount">-</h4>
|
||||
<p class="mb-0">总代理数</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card bg-success text-white">
|
||||
<div class="card-body text-center">
|
||||
<h4 id="validCount">-</h4>
|
||||
<p class="mb-0">可用代理</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card bg-danger text-white">
|
||||
<div class="card-body text-center">
|
||||
<h4 id="invalidCount">-</h4>
|
||||
<p class="mb-0">无效代理</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="btn-group w-100 mb-2" role="group">
|
||||
<button class="btn btn-primary" onclick="refreshProxies()">
|
||||
<i class="bi bi-arrow-clockwise"></i> 刷新
|
||||
</button>
|
||||
<button class="btn btn-success" onclick="validateAll()">
|
||||
<i class="bi bi-check2-square"></i> 验证
|
||||
</button>
|
||||
<button class="btn btn-warning" onclick="cleanupInvalid()">
|
||||
<i class="bi bi-trash"></i> 清理
|
||||
</button>
|
||||
<button class="btn btn-info" onclick="exportProxies()">
|
||||
<i class="bi bi-download"></i> 导出
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group w-100" role="group">
|
||||
<button class="btn btn-outline-primary" onclick="document.getElementById('importFileInput').click()">
|
||||
<i class="bi bi-upload"></i> 导入JSON
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" onclick="showImportModal()">
|
||||
<i class="bi bi-pencil-square"></i> 粘贴导入
|
||||
</button>
|
||||
<input type="file" id="importFileInput" accept=".json" style="display: none;" onchange="handleImportFile(event)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索和筛选 -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form id="searchForm" class="row g-3">
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="form-control" id="searchIp" placeholder="搜索IP地址">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<input type="number" class="form-control" id="searchPort" placeholder="端口">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<input type="text" class="form-control" id="searchLocation" placeholder="位置">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select class="form-select" id="filterStatus">
|
||||
<option value="">全部状态</option>
|
||||
<option value="1">可用</option>
|
||||
<option value="0">不可用</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select class="form-select" id="sortBy">
|
||||
<option value="created_at">创建时间</option>
|
||||
<option value="response_time">响应时间</option>
|
||||
<option value="ip">IP地址</option>
|
||||
<option value="updated_at">更新时间</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<button type="submit" class="btn btn-outline-primary w-100">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 代理列表 -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-list-ul"></i> 代理列表
|
||||
</h5>
|
||||
<div>
|
||||
<span class="badge bg-secondary">显示 <span id="showingCount">0</span> 条记录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
|
||||
</th>
|
||||
<th>IP地址</th>
|
||||
<th>端口</th>
|
||||
<th>位置</th>
|
||||
<th>状态</th>
|
||||
<th>响应时间</th>
|
||||
<th>最后验证</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="proxyTableBody">
|
||||
<tr>
|
||||
<td colspan="9" 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="pagination">
|
||||
<!-- 分页按钮将通过JavaScript动态生成 -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证结果模态框 -->
|
||||
<div class="modal fade" id="validationModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<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">
|
||||
<div id="validationProgress" style="display: none;">
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" id="validationProgressBar" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
<p id="validationStatus">正在验证中...</p>
|
||||
</div>
|
||||
<div id="validationResults"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 代理详情模态框 -->
|
||||
<div class="modal fade" id="proxyDetailModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<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="proxyDetailContent">
|
||||
<!-- 详情内容将通过JavaScript动态生成 -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" id="validateSingleProxy">验证代理</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导入代理模态框 -->
|
||||
<div class="modal fade" id="importModal" 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">
|
||||
<div class="mb-3">
|
||||
<label for="proxyJsonInput" class="form-label">粘贴JSON格式的代理列表：</label>
|
||||
<textarea class="form-control" id="proxyJsonInput" rows="10" placeholder='[
|
||||
{
|
||||
"ip_address": "47.254.36.213",
|
||||
"port": 1081
|
||||
},
|
||||
{
|
||||
"ip_address": "8.137.62.53",
|
||||
"port": 9080
|
||||
}
|
||||
]'></textarea>
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
<h6><i class="bi bi-info-circle"></i> 支持的格式：</h6>
|
||||
<ul class="mb-0">
|
||||
<li><code>ip_address</code> 或 <code>ip</code> 或 <code>host</code> - IP地址</li>
|
||||
<li><code>port</code> - 端口号</li>
|
||||
<li><code>location</code> 或 <code>area</code> - 位置（可选）</li>
|
||||
<li><code>speed</code> - 速度（可选）</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" onclick="importProxiesFromModal()">
|
||||
<i class="bi bi-upload"></i> 导入并验证
|
||||
</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="js/proxies.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user