298 lines
11 KiB
HTML
298 lines
11 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>进程监控</title>
|
|
<link rel="icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
|
<script>
|
|
console.log('页面开始加载');
|
|
</script>
|
|
<style>
|
|
.status-badge {
|
|
width: 80px;
|
|
text-align: center;
|
|
}
|
|
.resource-table {
|
|
font-size: 0.9rem;
|
|
}
|
|
.monitor-card {
|
|
margin-bottom: 20px;
|
|
}
|
|
.btn-group-sm > .btn {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
.alert {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
.process-row:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
.resource-value {
|
|
font-weight: bold;
|
|
}
|
|
.threshold-warning {
|
|
color: #ffc107;
|
|
}
|
|
.threshold-danger {
|
|
color: #dc3545;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{% csrf_token %}
|
|
<div class="container mt-4">
|
|
<!-- 在控制面板上方添加导航链接 -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<a href="{% url 'high_resource_list' %}" class="btn btn-info">
|
|
查看高资源进程列表
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加自动检测控制按钮 -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<button id="startAutoDetectBtn" class="btn btn-warning">
|
|
开始自动检测高资源进程
|
|
</button>
|
|
<button id="stopAutoDetectBtn" class="btn btn-danger" disabled>
|
|
停止自动检测
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 控制面板 -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="pidInput" placeholder="输入进程ID">
|
|
<button class="btn btn-primary" data-type="cpu">监控CPU</button>
|
|
<button class="btn btn-success" data-type="memory">监控内存</button>
|
|
<button class="btn btn-warning" data-type="gpu">监控GPU</button>
|
|
<button class="btn btn-danger" id="stopMonitor">停止监控</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 监控数据显示 -->
|
|
<div class="row">
|
|
<!-- CPU监控卡片 -->
|
|
<div class="col-md-4">
|
|
<div class="card monitor-card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">CPU监控</h5>
|
|
<span id="cpuStatus" class="badge bg-secondary status-badge">未监控</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-sm resource-table">
|
|
<thead>
|
|
<tr>
|
|
<th>指标</th>
|
|
<th>值</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="cpuTable">
|
|
<tr>
|
|
<td colspan="2" class="text-center">暂无数据</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GPU监控卡片 -->
|
|
<div class="col-md-4">
|
|
<div class="card monitor-card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">GPU监控</h5>
|
|
<span id="gpuStatus" class="badge bg-secondary status-badge">未监控</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-sm resource-table">
|
|
<thead>
|
|
<tr>
|
|
<th>指标</th>
|
|
<th>值</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="gpuTable">
|
|
<tr>
|
|
<td colspan="2" class="text-center">暂无数据</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 内存监控卡片 -->
|
|
<div class="col-md-4">
|
|
<div class="card monitor-card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">内存监控</h5>
|
|
<span id="memoryStatus" class="badge bg-secondary status-badge">未监控</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-sm resource-table">
|
|
<thead>
|
|
<tr>
|
|
<th>指标</th>
|
|
<th>值</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="memoryTable">
|
|
<tr>
|
|
<td colspan="2" class="text-center">暂无数据</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 目录监控部分 -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">目录监控</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-8">
|
|
<input type="text" class="form-control" id="directoryInput"
|
|
placeholder="输入要监控的目录路径">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary me-2" id="startDirectoryMonitor">开始监控</button>
|
|
<button class="btn btn-danger" id="stopDirectoryMonitor" disabled>停止监控</button>
|
|
</div>
|
|
</div>
|
|
<div id="directoryMonitorStatus" class="alert mt-3" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 进程列表 -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">进程列表</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>PID</th>
|
|
<th>进程信息</th>
|
|
<th>CPU</th>
|
|
<th>内存</th>
|
|
<th>IO</th>
|
|
<th>线程</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="processTable">
|
|
<tr>
|
|
<td colspan="8" class="text-center">等待数据加载...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表展示 -->
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card mb-4">
|
|
<div class="card-header">CPU使用率</div>
|
|
<div class="card-body">
|
|
<div id="cpuChart" style="height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card mb-4">
|
|
<div class="card-header">内存使用量</div>
|
|
<div class="card-body">
|
|
<div id="memoryChart" style="height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card mb-4">
|
|
<div class="card-header">GPU使用率</div>
|
|
<div class="card-body">
|
|
<div id="gpuChart" style="height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 进程详细信息 -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">基本信息</h5>
|
|
</div>
|
|
<div class="card-body" id="basicInfo">
|
|
<p class="text-center text-muted">选择进程查看详细信息</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">资源使用</h5>
|
|
</div>
|
|
<div class="card-body" id="resourceInfo">
|
|
<p class="text-center text-muted">选择进程查看详细信息</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 最后更新时间 -->
|
|
<div class="row mt-3">
|
|
<div class="col-12">
|
|
<p id="lastUpdate" class="text-muted text-end">最后更新: -</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
console.log('准备加载 monitor.js');
|
|
</script>
|
|
<script src="{% static 'js/monitor.js' %}?v={{ STATIC_VERSION }}"></script>
|
|
<script>
|
|
console.log('monitor.js 加载完成后');
|
|
// 添加直接的事件绑定测试
|
|
window.onload = function() {
|
|
console.log('window loaded');
|
|
const startBtn = document.getElementById('startDirectoryMonitor');
|
|
if (startBtn) {
|
|
console.log('找到开始按钮');
|
|
startBtn.onclick = function() {
|
|
console.log('按钮被点击');
|
|
}
|
|
} else {
|
|
console.error('未找到开始按钮');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |