新增Windows代理程序支持
This commit is contained in:
Alex Yang
@@ -81,6 +81,17 @@
|
||||
<i class="fa fa-cog"></i>
|
||||
设备管理
|
||||
</a>
|
||||
<div class="relative group">
|
||||
<a href="#alarms" 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-bell"></i>
|
||||
告警
|
||||
</a>
|
||||
<!-- 悬停菜单 -->
|
||||
<div class="absolute left-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-20">
|
||||
<a href="#alarms" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">告警管理</a>
|
||||
<a href="#alarm-info" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">告警详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -106,7 +117,7 @@
|
||||
<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>
|
||||
<h3 class="text-3xl font-bold text-gray-900 metric-value">---</h3>
|
||||
</div>
|
||||
<div class="bg-blue-100 p-3 rounded-full">
|
||||
<i class="fa fa-building text-blue-600 text-xl"></i>
|
||||
@@ -119,7 +130,7 @@
|
||||
<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>
|
||||
<h3 class="text-3xl font-bold text-gray-900 metric-value">---</h3>
|
||||
</div>
|
||||
<div class="bg-yellow-100 p-3 rounded-full">
|
||||
<i class="fa fa-database text-yellow-600 text-xl"></i>
|
||||
@@ -132,7 +143,7 @@
|
||||
<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>
|
||||
<h3 id="serverCount" class="text-3xl font-bold text-gray-900 metric-value">---</h3>
|
||||
</div>
|
||||
<div class="bg-green-100 p-3 rounded-full">
|
||||
<i class="fa fa-server text-green-600 text-xl"></i>
|
||||
@@ -141,11 +152,11 @@
|
||||
</div>
|
||||
|
||||
<!-- 告警 -->
|
||||
<div class="bg-white rounded-xl shadow-md p-6 card-hover border border-gray-100">
|
||||
<div id="alarmCard" class="bg-white rounded-xl shadow-md p-6 card-hover border border-gray-100 cursor-pointer" onclick="window.location.hash='#alarms'">
|
||||
<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>
|
||||
<h3 id="alarmCount" class="text-3xl font-bold text-red-600 metric-value">---</h3>
|
||||
</div>
|
||||
<div class="bg-red-100 p-3 rounded-full">
|
||||
<i class="fa fa-bell text-red-600 text-xl"></i>
|
||||
@@ -573,6 +584,137 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 告警管理 -->
|
||||
<div id="alarmsContent" 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="flex flex-wrap gap-4 mb-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="text" id="alarmSearchInput" placeholder="搜索告警..." class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full md:w-64">
|
||||
<select id="alarmLevelFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
||||
<option value="">所有级别</option>
|
||||
<option value="info">信息</option>
|
||||
<option value="warning">警告</option>
|
||||
<option value="error">错误</option>
|
||||
<option value="critical">严重</option>
|
||||
</select>
|
||||
<button id="applyAlarmFilters" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all duration-200">搜索</button>
|
||||
<button id="clearAlarmFilters" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all duration-200">重置</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 ml-auto">
|
||||
<button id="acknowledgeAllAlarms" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-all duration-200 flex items-center gap-2">
|
||||
<i class="fa fa-check-circle"></i>
|
||||
全部确认
|
||||
</button>
|
||||
<button id="clearAllAlarms" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-all duration-200 flex items-center gap-2">
|
||||
<i class="fa fa-trash"></i>
|
||||
全部清除
|
||||
</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">设备</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="alarmsTableBody" class="bg-white divide-y divide-gray-200">
|
||||
<!-- 数据将通过JavaScript动态加载 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 分页控件 -->
|
||||
<div id="alarmsPagination" class="mt-6 flex justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 告警详情 -->
|
||||
<div id="alarm-infoContent" 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="backToAlarmsBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-all duration-200">
|
||||
返回告警列表
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 告警详情内容 -->
|
||||
<div id="alarmDetailContent" class="space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">告警ID:</span>
|
||||
<span id="alarmDetailId" class="font-medium">--</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">发生时间:</span>
|
||||
<span id="alarmDetailTime" class="font-medium">--</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">设备:</span>
|
||||
<span id="alarmDetailDevice" class="font-medium">--</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">告警级别:</span>
|
||||
<span id="alarmDetailLevel" class="font-medium">--</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">告警状态:</span>
|
||||
<span id="alarmDetailStatus" class="font-medium">--</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">详细信息</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<span class="text-gray-600 block mb-1">告警消息:</span>
|
||||
<div id="alarmDetailMessage" class="font-medium bg-white p-3 rounded border border-gray-200">--</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600 block mb-1">告警描述:</span>
|
||||
<div id="alarmDetailDescription" class="font-medium bg-white p-3 rounded border border-gray-200">--</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">处理记录</h3>
|
||||
<div id="alarmDetailHistory" class="space-y-2">
|
||||
<div class="bg-white p-3 rounded border border-gray-200">
|
||||
<div class="flex justify-between text-sm text-gray-500">
|
||||
<span>暂无处理记录</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<button id="acknowledgeDetailAlarm" class="bg-yellow-600 text-white px-4 py-2 rounded-lg hover:bg-yellow-700 transition-all duration-200 flex-1">
|
||||
<i class="fa fa-check-circle mr-2"></i>确认告警
|
||||
</button>
|
||||
<button id="clearDetailAlarm" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-all duration-200 flex-1">
|
||||
<i class="fa fa-trash mr-2"></i>清除告警
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 设备编辑/添加模态框 -->
|
||||
|
||||
Reference in New Issue
Block a user