292 lines
13 KiB
HTML
292 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>代理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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="logs.html">
|
|
<i class="bi bi-journal-text"></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> |