417 lines
22 KiB
HTML
417 lines
22 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>
|
|
<!-- 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;
|
|
}
|
|
</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-3 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>
|
|
</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>
|
|
</div>
|
|
<div class="bg-green-100 p-3 rounded-full">
|
|
<i class="fa fa-memory 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>
|
|
</div>
|
|
<div class="bg-yellow-100 p-3 rounded-full">
|
|
<i class="fa fa-hdd 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.0 MB/s</h3>
|
|
</div>
|
|
<div class="bg-purple-100 p-3 rounded-full">
|
|
<i class="fa fa-exchange-alt 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-center justify-between px-6 py-4" id="chartTabs">
|
|
<!-- 选项卡导航 -->
|
|
<div class="flex flex-wrap">
|
|
<!-- 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 mr-2" 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 mr-2" 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 mr-2" 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 mr-2" 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 mr-2" data-tab="speed">
|
|
网速
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 自定义时间选择 -->
|
|
<div class="flex items-center gap-2">
|
|
<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>
|
|
|
|
<!-- 内存 图表 -->
|
|
<div id="memoryChartContainer" class="chart-container h-80 hidden">
|
|
<canvas id="memoryChart"></canvas>
|
|
</div>
|
|
|
|
<!-- 磁盘 图表 -->
|
|
<div id="diskChartContainer" class="chart-container h-80 hidden">
|
|
<canvas id="diskChart"></canvas>
|
|
</div>
|
|
|
|
<!-- 网络 图表 -->
|
|
<div id="networkChartContainer" class="chart-container h-80 hidden">
|
|
<canvas id="networkChart"></canvas>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 设备管理 -->
|
|
<div id="devicesContent" class="hidden">
|
|
<div class="bg-white rounded-xl shadow-md p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<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="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="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>
|
|
|
|
<!-- 脚本文件 -->
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |