617 lines
38 KiB
HTML
617 lines
38 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>监控系统</title>
|
|
<!-- Tailwind CSS -->
|
|
<script src="js/vendor/tailwind.js"></script>
|
|
<!-- Chart.js -->
|
|
<script src="js/vendor/chart.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<!-- Font Awesome -->
|
|
<link href="css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
/* 系统字体 */
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 卡片悬停效果 */
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* 数字动画 */
|
|
.metric-value {
|
|
font-feature-settings: "tnum";
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 自动刷新开关样式 */
|
|
.toggle-checkbox:checked {
|
|
right: 0;
|
|
border-color: #3b82f6;
|
|
}
|
|
|
|
.toggle-checkbox:checked + .toggle-label {
|
|
background-color: #3b82f6;
|
|
}
|
|
|
|
.toggle-checkbox {
|
|
right: 5px;
|
|
top: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-900">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="bg-white shadow-md border-b border-gray-200 sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="bg-gradient-to-br from-blue-600 to-purple-600 p-2 rounded-lg">
|
|
<i class="fa fa-line-chart text-white text-xl"></i>
|
|
</div>
|
|
<h1 class="text-xl font-bold text-gray-900">监控系统</h1>
|
|
</div>
|
|
|
|
<!-- 导航菜单 -->
|
|
<nav class="flex items-center gap-3">
|
|
<a href="#home" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all duration-200 flex items-center gap-2 text-sm font-medium">
|
|
<i class="fa fa-home"></i>
|
|
首页
|
|
</a>
|
|
<a href="#servers" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all duration-200 flex items-center gap-2 text-sm font-medium">
|
|
<i class="fa fa-server"></i>
|
|
服务器
|
|
</a>
|
|
<a href="#devices" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all duration-200 flex items-center gap-2 text-sm font-medium">
|
|
<i class="fa fa-cog"></i>
|
|
设备管理
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<main class="container mx-auto px-4 py-6">
|
|
|
|
|
|
<!-- 无数据提示 -->
|
|
<div id="noDataMessage" class="bg-white rounded-xl shadow-lg border border-yellow-200 text-yellow-700 px-6 py-4 mb-6 text-center hidden">
|
|
<div class="flex items-center justify-center gap-3">
|
|
<i class="fa fa-exclamation-triangle text-2xl"></i>
|
|
<p class="text-lg font-medium">暂无数据</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 首页内容 -->
|
|
<div id="homeContent">
|
|
<!-- 监控概览卡片 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<!-- 业务系统 -->
|
|
<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 class="text-3xl font-bold text-gray-900 metric-value">355</h3>
|
|
</div>
|
|
<div class="bg-blue-100 p-3 rounded-full">
|
|
<i class="fa fa-building text-blue-600 text-xl"></i>
|
|
</div>
|
|
</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 class="text-3xl font-bold text-gray-900 metric-value">59</h3>
|
|
</div>
|
|
<div class="bg-yellow-100 p-3 rounded-full">
|
|
<i class="fa fa-database text-yellow-600 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 服务器 -->
|
|
<div id="serverCard" class="bg-white rounded-xl shadow-md p-6 card-hover border border-gray-100 cursor-pointer" onclick="window.location.hash='#servers'">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-sm text-gray-500 font-medium mb-1">服务器</p>
|
|
<h3 id="serverCount" class="text-3xl font-bold text-gray-900 metric-value">2</h3>
|
|
</div>
|
|
<div class="bg-green-100 p-3 rounded-full">
|
|
<i class="fa fa-server text-green-600 text-xl"></i>
|
|
</div>
|
|
</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 class="text-3xl font-bold text-red-600 metric-value">112</h3>
|
|
</div>
|
|
<div class="bg-red-100 p-3 rounded-full">
|
|
<i class="fa fa-bell text-red-600 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 告警趋势图 -->
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-8">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">告警趋势图</h2>
|
|
<div class="chart-container h-80">
|
|
<canvas id="alarmTrendChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 业务视图和告警列表 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- 业务视图 -->
|
|
<div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">业务视图</h2>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<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">IP地址</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="businessViewTableBody" class="bg-white divide-y divide-gray-200">
|
|
<!-- 数据将通过JavaScript动态加载 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 告警列表 -->
|
|
<div class="bg-white rounded-xl shadow-md p-6">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">告警列表</h2>
|
|
<div id="alarmList" class="space-y-4">
|
|
<!-- 数据将通过JavaScript动态加载 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 服务器列表 -->
|
|
<div id="serversContent" class="hidden">
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-6">
|
|
<h2 class="text-xl font-bold text-gray-900 mb-6">所有服务器</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" id="serversGrid">
|
|
<!-- 服务器卡片将通过JavaScript动态加载 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 服务器监控 -->
|
|
<div id="serverMonitorContent" class="hidden">
|
|
<div class="bg-white rounded-xl shadow-md p-6 mb-6">
|
|
<h2 class="text-xl font-bold text-gray-900 mb-2">服务器监控详情</h2>
|
|
<!-- 服务器信息显示 -->
|
|
<div id="serverInfoDisplay" class="text-gray-600 mb-6"></div>
|
|
|
|
<!-- 状态卡片 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<!-- CPU 状态卡片 -->
|
|
<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">CPU 使用率</p>
|
|
<h3 id="cpuValue" class="text-3xl font-bold text-gray-900 metric-value">0.0%</h3>
|
|
<p id="cpuDetails" class="text-xs text-gray-500 mt-1">0.00 GHz | 负载: 0.00</p>
|
|
</div>
|
|
<div class="bg-blue-100 p-3 rounded-full">
|
|
<i class="fa fa-microchip text-blue-600 text-xl"></i>
|
|
</div>
|
|
</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="memoryValue" class="text-3xl font-bold text-gray-900 metric-value">0.0%</h3>
|
|
<p id="memoryDetails" class="text-xs text-gray-500 mt-1">0 MB / 0 MB</p>
|
|
</div>
|
|
<div class="bg-green-100 p-3 rounded-full">
|
|
<i class="fa fa-database text-green-600 text-xl"></i>
|
|
</div>
|
|
</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="diskValue" class="text-3xl font-bold text-gray-900 metric-value">0.0%</h3>
|
|
<p id="diskDetails" class="text-xs text-gray-500 mt-1">0 MB / 0 MB</p>
|
|
</div>
|
|
<div class="bg-yellow-100 p-3 rounded-full">
|
|
<i class="fa fa-hdd-o text-yellow-600 text-xl"></i>
|
|
</div>
|
|
</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.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 text-purple-600 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 图表选项卡导航 -->
|
|
<div class="mb-6">
|
|
<div class="bg-white rounded-xl shadow-md border border-gray-100">
|
|
<div class="flex flex-wrap items-start justify-between px-6 py-4" id="chartTabs">
|
|
<!-- 选项卡导航 -->
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<!-- CPU 选项卡 -->
|
|
<button class="chart-tab active px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 hover:bg-gray-50 transition-colors" data-tab="cpu">
|
|
CPU
|
|
</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="memory">
|
|
内存
|
|
</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="disk">
|
|
磁盘
|
|
</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">
|
|
<label for="networkInterface" class="text-sm font-medium text-gray-700">网卡:</label>
|
|
<select id="networkInterface" class="px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
|
|
<option value="all">所有网卡</option>
|
|
</select>
|
|
<button id="refreshInterfacesBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-lg transition-colors text-sm">
|
|
<i class="fa fa-refresh"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 自动刷新开关 -->
|
|
<div class="flex items-center gap-2 ml-4">
|
|
<label for="autoRefreshToggle" class="text-sm font-medium text-gray-700">自动刷新:</label>
|
|
<div class="relative inline-block w-10 mr-2 align-middle select-none">
|
|
<input type="checkbox" id="autoRefreshToggle" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer" checked="false">
|
|
<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>
|
|
|
|
<!-- 自定义时间选择 -->
|
|
<div class="flex items-center gap-2 mt-2 md:mt-0 w-full md:w-auto">
|
|
<input type="datetime-local" id="customStartTime" class="px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
|
|
<span class="text-gray-500 text-sm">至</span>
|
|
<input type="datetime-local" id="customEndTime" class="px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
|
|
<button id="customTimeQuery" class="bg-blue-600 text-white px-3 py-1 rounded-lg hover:bg-blue-700 transition-all duration-200 text-sm">
|
|
查询
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表内容区域 -->
|
|
<div class="p-6">
|
|
<!-- 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>
|
|
<br>
|
|
<!-- 进程信息展示 -->
|
|
<div id="processInfoContainer" class="mt-8">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">进程信息</h3>
|
|
<div class="flex items-center gap-2">
|
|
<label for="processPageSize" class="text-sm text-gray-600">每页显示:</label>
|
|
<select id="processPageSize" class="px-2 py-1 border border-gray-300 rounded text-sm">
|
|
<option value="5">5条</option>
|
|
<option value="10">10条</option>
|
|
<option value="20">20条</option>
|
|
<option value="50">50条</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<br>
|
|
<!-- 磁盘 图表 -->
|
|
<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>
|
|
<br>
|
|
<!-- 磁盘详细信息展示 -->
|
|
<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>
|
|
<br>
|
|
<!-- 网络 图表 -->
|
|
<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>
|
|
<br>
|
|
<!-- 网速 图表 -->
|
|
<div id="speedChartContainer" class="chart-container h-80 hidden">
|
|
<canvas id="speedChart"></canvas>
|
|
<!-- 缩放控件 -->
|
|
<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>
|
|
<br>
|
|
<!-- 系统日志 信息 -->
|
|
<div id="logInfoContainer" class="mt-8 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 id="logPaginationContainer" class="mt-4"></div>
|
|
</div>
|
|
<br>
|
|
<!-- 缩放控件已移动到各个图表容器内 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 设备管理 -->
|
|
<div id="devicesContent" class="hidden">
|
|
<div class="bg-white rounded-xl shadow-md p-6">
|
|
<div class="mb-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-bold text-gray-900">设备管理</h2>
|
|
<button id="addDeviceBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-all duration-200">
|
|
添加设备
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="flex-1">
|
|
<input type="text" id="deviceSearch" placeholder="搜索设备名称、ID或IP..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
<div>
|
|
<select id="deviceStatusFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="all">所有状态</option>
|
|
<option value="active">活跃</option>
|
|
<option value="inactive">非活跃</option>
|
|
<option value="offline">离线</option>
|
|
</select>
|
|
</div>
|
|
<button id="clearFilterBtn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
|
|
清除筛选
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 设备列表 -->
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead>
|
|
<tr class="bg-gray-50">
|
|
<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">IP地址</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">token</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="deviceManagementTableBody" class="bg-white divide-y divide-gray-200">
|
|
<!-- 数据将通过JavaScript动态加载 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 设备编辑/添加模态框 -->
|
|
<div id="deviceModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modalContent">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h3 class="text-xl font-bold text-gray-900" id="modalTitle">编辑设备</h3>
|
|
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700 focus:outline-none">
|
|
<i class="fa fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="deviceForm">
|
|
<input type="hidden" id="deviceId" value="">
|
|
|
|
<div class="mb-4">
|
|
<label for="deviceName" class="block text-sm font-medium text-gray-700 mb-1">设备名称</label>
|
|
<input type="text" id="deviceName" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="deviceIp" class="block text-sm font-medium text-gray-700 mb-1">IP地址</label>
|
|
<input type="text" id="deviceIp" name="ip" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="可选">
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="deviceStatus" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
|
|
<select id="deviceStatus" name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="active">活跃</option>
|
|
<option value="inactive">非活跃</option>
|
|
<option value="offline">离线</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<button type="button" id="cancelModalBtn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
|
|
取消
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
|
|
保存
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |