增加日志进程等信息采集
This commit is contained in:
Alex Yang
@@ -254,19 +254,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网络 状态卡片 -->
|
||||
<!-- 网络流量 状态卡片 -->
|
||||
<div class="bg-white rounded-xl shadow-md p-6 card-hover border border-gray-100">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 font-medium mb-1">网络流量</p>
|
||||
<h3 id="networkValue" class="text-3xl font-bold text-gray-900 metric-value">0.0</h3>
|
||||
<p id="networkDetails" class="text-xs text-gray-500 mt-1">接收: 0 MB/s | 发送: 0 MB/s<br>总量: 接收 0 MB | 发送 0 MB</p>
|
||||
<h3 id="networkValue" class="text-3xl font-bold text-gray-900 metric-value">0.00 ↓</h3>
|
||||
<p id="networkDetails" class="text-xs text-gray-500 mt-1">接收速率 0.00 MB | 发送速率 0.00 MB<br>接收总量 0.00 MB | 发送总量 0.00 MB</p>
|
||||
</div>
|
||||
<div class="bg-purple-100 p-3 rounded-full">
|
||||
<i class="fa fa-exchange-alt text-purple-600 text-xl"></i>
|
||||
<i class="fa fa-network-wired text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 图表选项卡导航 -->
|
||||
@@ -289,12 +290,16 @@
|
||||
</button>
|
||||
<!-- 网络 选项卡 -->
|
||||
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="network">
|
||||
网络
|
||||
流量
|
||||
</button>
|
||||
<!-- 网速 选项卡 -->
|
||||
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="speed">
|
||||
网速
|
||||
</button>
|
||||
<!-- 系统日志 选项卡 -->
|
||||
<button class="chart-tab px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent hover:bg-gray-50 transition-colors" data-tab="logs">
|
||||
系统日志
|
||||
</button>
|
||||
|
||||
<!-- 网卡选择和刷新按钮 -->
|
||||
<div id="interfaceSelectorContainer" class="flex items-center gap-1 ml-4 hidden">
|
||||
@@ -315,6 +320,12 @@
|
||||
<label for="autoRefreshToggle" class="toggle-label block overflow-hidden h-5 rounded-full bg-gray-300 cursor-pointer"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 刷新状态指示器 -->
|
||||
<div class="flex items-center gap-1 ml-4">
|
||||
<div id="refreshStatusIndicator" class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
|
||||
<span id="lastRefreshTime" class="text-xs text-gray-500">上次刷新: 刚刚</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 自定义时间选择 -->
|
||||
@@ -333,43 +344,161 @@
|
||||
<!-- CPU 图表 -->
|
||||
<div id="cpuChartContainer" class="chart-container h-80">
|
||||
<canvas id="cpuChart"></canvas>
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="cpuCurrentTimeRangeDisplay">过去1小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="cpuResetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="cpuZoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="cpuZoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进程信息展示 -->
|
||||
<div id="processInfoContainer" class="mt-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">进程信息</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table id="processTable" class="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进程名</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进程ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPU (%)</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">内存 (%)</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">路径</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">命令行</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">占用端口</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="processTableBody" class="bg-white divide-y divide-gray-200">
|
||||
<!-- 进程信息将通过JavaScript动态添加 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 进程信息分页容器 -->
|
||||
<div id="processPaginationContainer" class="mt-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- 内存 图表 -->
|
||||
<div id="memoryChartContainer" class="chart-container h-80 hidden">
|
||||
<canvas id="memoryChart"></canvas>
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="currentTimeRangeDisplay">过去1小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="memoryResetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="memoryZoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="memoryZoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 磁盘 图表 -->
|
||||
<div id="diskChartContainer" class="chart-container h-80 hidden">
|
||||
<canvas id="diskChart"></canvas>
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="diskCurrentTimeRangeDisplay">过去1小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="diskResetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="diskZoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="diskZoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 磁盘详细信息展示 -->
|
||||
<div id="diskDetailsContainer" class="mt-8 hidden">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">磁盘详细信息</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- 磁盘详细信息将通过JavaScript动态添加 -->
|
||||
<div id="diskDetailsContent"></div>
|
||||
<!-- 磁盘信息分页容器 -->
|
||||
<div id="diskPaginationContainer" class="mt-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网络 图表 -->
|
||||
<div id="networkChartContainer" class="chart-container h-80 hidden">
|
||||
<canvas id="networkChart"></canvas>
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="networkCurrentTimeRangeDisplay">过去1小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="networkResetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="networkZoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="networkZoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网速 图表 -->
|
||||
<div id="speedChartContainer" class="chart-container h-80 hidden">
|
||||
<canvas id="speedChart"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-6 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="currentTimeRangeDisplay">过去24小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="resetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="zoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="zoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
<!-- 缩放控件 -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">当前显示范围: <span id="speedCurrentTimeRangeDisplay">过去1小时</span></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="speedResetZoomBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-refresh"></i> 重置
|
||||
</button>
|
||||
<button id="speedZoomOutBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-minus"></i> 缩小
|
||||
</button>
|
||||
<button id="speedZoomInBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors">
|
||||
<i class="fa fa-search-plus"></i> 放大
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统日志 图表 -->
|
||||
<div id="logChartContainer" class="chart-container h-80 hidden">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">系统日志</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table id="logTable" class="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">来源</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发生时间</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">内容</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="logTableBody" class="bg-white divide-y divide-gray-200">
|
||||
<!-- 日志信息将通过JavaScript动态添加 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 缩放控件已移动到各个图表容器内 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user