AGM System
2025-11-09 12:25:09
发布于：广东
0阅读
0回复
0点赞
AGM System one
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGM闸机维护端控制系统</title>
<!-- Tailwind CSS v3 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<!-- 统一的 Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0052cc',
secondary: '#0747a6',
accent: '#00b8d9',
success: '#36b37e',
warning: '#ffab00',
danger: '#ff5630',
dark: '#172b4d',
light: '#f4f5f7'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
boxShadow: {
'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.transition-all-300 {
transition: all 300ms ease-in-out;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<!-- 登录页面 -->
<div id="login-page" class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary to-secondary p-4">
<div class="w-full max-w-md">
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-white mb-2 text-shadow">AGM闸机维护系统</h1>
<p class="text-gray-200">城市轨道交通自动售检票系统维护平台</p>
</div>
<div class="bg-dark rounded-xl shadow-lg p-8 glass-effect">
<div class="mb-6">
<div class="flex items-center justify-center mb-6">
<div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center">
<i class="fa fa-shield text-2xl"></i>
</div>
</div>
<div class="mb-4">
<label for="username" class="block text-sm font-medium text-gray-300 mb-1">用户名</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
<i class="fa fa-user"></i>
</span>
<input type="text" id="username" class="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-white" placeholder="请输入用户名" value="maintenance01">
</div>
</div>
<div class="mb-4">
<label for="password" class="block text-sm font-medium text-gray-300 mb-1">密码</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
<i class="fa fa-lock"></i>
</span>
<input type="password" id="password" class="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-white" placeholder="请输入密码" value="********">
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-300 mb-2">选择权限</label>
<div class="grid grid-cols-3 gap-3">
<div class="relative">
<input type="radio" id="permission-1" name="permission" class="peer sr-only" value="1" checked>
<label for="permission-1" class="block w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-center cursor-pointer peer-checked:border-primary peer-checked:bg-gray-700">
<i class="fa fa-wrench block mb-1"></i>
<span class="text-sm">普通运维</span>
</label>
</div>
<div class="relative">
<input type="radio" id="permission-2" name="permission" class="peer sr-only" value="2">
<label for="permission-2" class="block w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-center cursor-pointer peer-checked:border-primary peer-checked:bg-gray-700">
<i class="fa fa-cogs block mb-1"></i>
<span class="text-sm">高级维修</span>
</label>
</div>
<div class="relative">
<input type="radio" id="permission-3" name="permission" class="peer sr-only" value="3">
<label for="permission-3" class="block w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-center cursor-pointer peer-checked:border-primary peer-checked:bg-gray-700">
<i class="fa fa-user-circle block mb-1"></i>
<span class="text-sm">系统管理员</span>
</label>
</div>
</div>
</div>
<div class="mb-6">
<label for="hardware-key" class="block text-sm font-medium text-gray-300 mb-1">硬件密钥</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
<i class="fa fa-usb"></i>
</span>
<input type="text" id="hardware-key" class="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-white" placeholder="请输入硬件密钥或刷卡" value="KEY-AGM-2023-001">
</div>
</div>
<button id="login-button" class="w-full bg-primary hover:bg-secondary text-white font-medium py-2.5 px-4 rounded-lg transition-all-300 flex items-center justify-center">
<i class="fa fa-sign-in mr-2"></i>
登录系统
</button>
</div>
<div class="text-center text-xs text-gray-400">
<p>© 2023 城市轨道交通自动售检票系统</p>
<p class="mt-1">版本号: v1.0.0</p>
</div>
</div>
</div>
</div>
<!-- 主界面 -->
<div id="main-app" class="hidden min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-dark border-b border-gray-700">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
<i class="fa fa-shield text-xl"></i>
</div>
<h1 class="text-xl font-bold text-white">AGM闸机维护系统</h1>
</div>
<div class="hidden md:flex space-x-1">
<button class="px-3 py-1.5 text-sm rounded-md bg-gray-800 hover:bg-gray-700 transition-all-300">
<i class="fa fa-question-circle mr-1"></i>
帮助
</button>
<button class="px-3 py-1.5 text-sm rounded-md bg-gray-800 hover:bg-gray-700 transition-all-300">
<i class="fa fa-cog mr-1"></i>
设置
</button>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="hidden md:flex items-center space-x-2 text-sm text-gray-300">
<span class="bg-green-500 w-2 h-2 rounded-full"></span>
<span>在线</span>
</div>
<div class="relative">
<button id="user-menu-button" class="flex items-center space-x-2 focus:outline-none">
<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
<i class="fa fa-user"></i>
</div>
<div class="hidden md:block text-left">
<p class="text-sm font-medium text-white">张工</p>
<p class="text-xs text-gray-400">高级维修</p>
</div>
<i class="fa fa-chevron-down text-xs text-gray-400"></i>
</button>
<div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-dark border border-gray-700 rounded-md shadow-lg py-1 hidden">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800">
<i class="fa fa-user-circle mr-2"></i>
个人资料
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800">
<i class="fa fa-cog mr-2"></i>
账户设置
</a>
<div class="border-t border-gray-700 my-1"></div>
<a href="#" id="logout-button" class="block px-4 py-2 text-sm text-red-400 hover:bg-gray-800">
<i class="fa fa-sign-out mr-2"></i>
退出登录
</a>
</div>
</div>
</div>
</div>
</header>
<!-- 主体内容 -->
<div class="flex flex-1 overflow-hidden">
<!-- 左侧导航 -->
<nav class="bg-dark border-r border-gray-700 w-16 md:w-64 flex-shrink-0">
<div class="h-full flex flex-col">
<div class="p-4 border-b border-gray-700">
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
<i class="fa fa-search"></i>
</span>
<input type="text" class="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-white text-sm" placeholder="搜索设备...">
</div>
</div>
<div class="flex-1 overflow-y-auto scrollbar-hide">
<ul class="py-2">
<li class="mb-1">
<a href="#dashboard" class="nav-link active flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 transition-all-300" data-target="dashboard-section">
<i class="fa fa-dashboard w-6 text-center"></i>
<span class="ml-3 hidden md:inline">设备总览</span>
</a>
</li>
<li class="mb-1">
<a href="#faults" class="nav-link flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 transition-all-300" data-target="faults-section">
<i class="fa fa-exclamation-triangle w-6 text-center"></i>
<span class="ml-3 hidden md:inline">故障管理</span>
<span class="ml-auto bg-danger text-white text-xs px-2 py-0.5 rounded-full">3</span>
</a>
</li>
<li class="mb-1">
<a href="#parameters" class="nav-link flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 transition-all-300" data-target="parameters-section">
<i class="fa fa-sliders w-6 text-center"></i>
<span class="ml-3 hidden md:inline">参数配置</span>
</a>
</li>
<li class="mb-1">
<a href="#firmware" class="nav-link flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 transition-all-300" data-target="firmware-section">
<i class="fa fa-cloud-upload w-6 text-center"></i>
<span class="ml-3 hidden md:inline">固件升级</span>
</a>
</li>
<li class="mb-1">
<a href="#reports" class="nav-link flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 transition-all-300" data-target="reports-section">
<i class="fa fa-bar-chart w-6 text-center"></i>
<span class="ml-3 hidden md:inline">数据报表</span>
</a>
</li>
<li class="mb-1">
<a href="#logs" class="nav-link flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 transition-all-300" data-target="logs-section">
<i class="fa fa-list-alt w-6 text-center"></i>
<span class="ml-3 hidden md:inline">操作日志</span>
</a>
</li>
</ul>
</div>
<div class="p-4 border-t border-gray-700">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3">
<i class="fa fa-headphones"></i>
</div>
<div class="hidden md:block">
<p class="text-sm font-medium text-white">技术支持</p>
<p class="text-xs text-gray-400">400-123-4567</p>
</div>
</div>
</div>
</div>
</nav>
<!-- 主内容区域 -->
<main class="flex-1 overflow-y-auto bg-gray-900 p-4 md:p-6">
<!-- 面包屑导航 -->
<div class="mb-6 flex items-center text-sm">
<a href="#" class="text-gray-400 hover:text-white">首页</a>
<i class="fa fa-chevron-right mx-2 text-gray-600"></i>
<span class="text-white" id="current-page-title">设备总览</span>
</div>
<!-- 各功能模块内容 -->
<div class="space-y-6">
<!-- 设备总览 -->
<section id="dashboard-section" class="space-y-6">
<!-- 状态概览卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-dark rounded-lg shadow-card p-4 border-l-4 border-primary">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">在线设备</p>
<p class="text-2xl font-bold text-white mt-1">42</p>
</div>
<div class="w-12 h-12 rounded-full bg-primary bg-opacity-20 flex items-center justify-center">
<i class="fa fa-plug text-primary text-xl"></i>
</div>
</div>
<div class="mt-4 flex items-center text-xs">
<span class="text-success flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
2
</span>
<span class="text-gray-400 ml-2">较昨日</span>
</div>
</div>
<div class="bg-dark rounded-lg shadow-card p-4 border-l-4 border-danger">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">故障设备</p>
<p class="text-2xl font-bold text-white mt-1">3</p>
</div>
<div class="w-12 h-12 rounded-full bg-danger bg-opacity-20 flex items-center justify-center">
<i class="fa fa-exclamation-circle text-danger text-xl"></i>
</div>
</div>
<div class="mt-4 flex items-center text-xs">
<span class="text-danger flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
1
</span>
<span class="text-gray-400 ml-2">较昨日</span>
</div>
</div>
<div class="bg-dark rounded-lg shadow-card p-4 border-l-4 border-warning">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">维护中</p>
<p class="text-2xl font-bold text-white mt-1">5</p>
</div>
<div class="w-12 h-12 rounded-full bg-warning bg-opacity-20 flex items-center justify-center">
<i class="fa fa-wrench text-warning text-xl"></i>
</div>
</div>
<div class="mt-4 flex items-center text-xs">
<span class="text-gray-400 flex items-center">
<i class="fa fa-minus mr-1"></i>
0
</span>
<span class="text-gray-400 ml-2">较昨日</span>
</div>
</div>
<div class="bg-dark rounded-lg shadow-card p-4 border-l-4 border-success">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">今日客流</p>
<p class="text-2xl font-bold text-white mt-1">12,458</p>
</div>
<div class="w-12 h-12 rounded-full bg-success bg-opacity-20 flex items-center justify-center">
<i class="fa fa-users text-success text-xl"></i>
</div>
</div>
<div class="mt-4 flex items-center text-xs">
<span class="text-success flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
12%
</span>
<span class="text-gray-400 ml-2">较昨日</span>
</div>
</div>
</div>
<!-- 站点选择和筛选 -->
<div class="bg-dark rounded-lg shadow-card p-4">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div class="flex flex-col md:flex-row gap-4">
<div>
<label for="line-select" class="block text-sm text-gray-400 mb-1">线路</label>
<select id="line-select" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="all">全部线路</option>
<option value="line1">1号线</option>
<option value="line2">2号线</option>
<option value="line3">3号线</option>
<option value="line4">4号线</option>
</select>
</div>
<div>
<label for="station-select" class="block text-sm text-gray-400 mb-1">站点</label>
<select id="station-select" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="all">全部站点</option>
<option value="station1">天安门东站</option>
<option value="station2">天安门西站</option>
<option value="station3">王府井站</option>
<option value="station4">东单站</option>
</select>
</div>
<div>
<label for="status-select" class="block text-sm text-gray-400 mb-1">状态</label>
<select id="status-select" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="all">全部状态</option>
<option value="normal">正常</option>
<option value="fault">故障</option>
<option value="maintenance">维护中</option>
</select>
</div>
</div>
<div class="flex gap-2">
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm transition-all-300 flex items-center">
<i class="fa fa-filter mr-2"></i>
筛选
</button>
<button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg text-sm transition-all-300 flex items-center">
<i class="fa fa-refresh mr-2"></i>
刷新
</button>
</div>
</div>
</div>
<!-- 设备列表 -->
<div class="bg-dark rounded-lg shadow-card overflow-hidden">
<div class="p-4 border-b border-gray-700 flex justify-between items-center">
<h2 class="text-lg font-medium text-white">设备列表</h2>
<div class="flex items-center space-x-2">
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
<i class="fa fa-search"></i>
</span>
<input type="text" class="bg-gray-800 border border-gray-700 rounded-lg pl-10 pr-4 py-1.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="搜索设备编号...">
</div>
<button class="bg-gray-800 hover:bg-gray-700 text-white p-1.5 rounded-lg transition-all-300">
<i class="fa fa-th-large"></i>
</button>
<button class="bg-gray-800 hover:bg-gray-700 text-white p-1.5 rounded-lg transition-all-300">
<i class="fa fa-list"></i>
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="bg-gray-800">
<th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">设备编号</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">设备名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">所在站点</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">状态</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">运行时长</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">最近维护</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
<tr class="hover:bg-gray-800 transition-all-300">
<td class="px-4 py-3 text-sm text-white">AGM001</td>
<td class="px-4 py-3 text-sm text-white">进站闸机1号</td>
<td class="px-4 py-3 text-sm text-gray-300">天安门东站</td>
<td class="px-4 py-3 text-sm">
<span class="px-2 py-1 text-xs rounded-full bg-success bg-opacity-20 text-success">正常</span>
</td>
<td class="px-4 py-3 text-sm text-gray-300">3200小时</td>
<td class="px-4 py-3 text-sm text-gray-300">2023-10-15</td>
<td class="px-4 py-3 text-sm">
<div class="flex space-x-2">
<button class="text-primary hover:text-blue-400 transition-all-300">
<i class="fa fa-eye"></i>
</button>
<button class="text-gray-400 hover:text-white transition-all-300">
<i class="fa fa-wrench"></i>
</button>
<button class="text-gray-400 hover:text-white transition-all-300">
<i class="fa fa-cog"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-800 transition-all-300">
<td class="px-4 py-3 text-sm text-white">AGM002</td>
<td class="px-4 py-3 text-sm text-white">进站闸机2号</td>
<td class="px-4 py-3 text-sm text-gray-300">天安门东站</td>
<td class="px-4 py-3 text-sm">
<span class="px-2 py-1 text-xs rounded-full bg-success bg-opacity-20 text-success">正常</span>
</td>
<td class="px-4 py-3 text-sm text-gray-300">3150小时</td>
<td class="px-4 py-3 text-sm text-gray-300">2023-10-15</td>
<td class="px-4 py-3 text-sm">
<div class="flex space-x-2">
<button class="text-primary hover:text-blue-400 transition-all-300">
<i class="fa fa-eye"></i>
</button>
<button class="text-gray-400 hover:text-white transition-all-300">
<i class="fa fa-wrench"></i>
</button>
<button class="text-gray-400 hover:text-white transition-all-300">
<i class="fa fa-cog"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-800 transition-all-300">
<td class="px-4 py-3 text-sm text-white">AGM003</td>
<td class="px-4 py-3 text-sm text-white">出站闸机1号</td>
<td class="px-4 py-3 text-sm text-gray-300">天安门东站</td>
<td class="px-4 py-3 text-sm">
<span class="px-2 py-1 text-xs rounded-full bg-danger bg-opacity-20 text-danger">故障</span>
</td>
<td class="px-4 py-3 text-sm text-gray-300">3000小时</td>
<td class="px-4 py-3 text-sm text-gray-300">2023-10-10</td>
<td class="px-4 py-3 text-sm">
<div class="flex space-x-2">
<button class="text-primary hover:text-blue-400 transition-all-300">
<i class="fa fa-eye"></i>
</button>
<button class="text-danger hover:text-red-400 transition-all-300">
<i class="fa fa-wrench"></i>
</button>
<button class="text-gray-400 hover:text-white transition-all-300">
<i class="fa fa-cog"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-800 transition-all-300">
<td class="px-4 py-3 text-sm text-white">AGM004</td>
<td class="px-4 py-3 text-sm text-white">出站闸机2号</td>
<td class="px-4 py-3 text-sm text-gray-300">天安门东站</td>
<td class="px-4 py-3 text-sm">
<span class="px-2 py-1 text-xs rounded-full bg-warning bg-opacity-20 text-warning">维护中</span>
</td>
<td class="px-4 py-3 text-sm text-gray-300">2950小时</td>
<td class="px-4 py-3 text-sm text-gray-300">2023-10-20</td>
<td class="px-4 py-3 text-sm">
<div class="flex space-x-2">
<button class="text-primary hover:text-blue-400 transition-all-300">
<i class="fa fa-eye"></i>
</button>
<button class="text-warning hover:text-yellow-400 transition-all-300">
<i class="fa fa-wrench"></i>
</button>
<button class="text-gray-400 hover:text-white transition-all-300">
<i class="fa fa-cog"></i>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-gray-800 transition-all-300">
<td class="px-4 py-3 text-sm text-white">AGM005</td>
<td class="px-4 py-3 text-sm text-white">进站闸机1号</td>
<td class="px-4 py-3 text-sm text-gray-300">天安门西站</td>
<td class="px-4 py-3 text-sm">
<span class="px-2 py-1 text-xs rounded-full bg-success bg-opacity-20 text-success">正常</span>
</td>
<td class="px-4 py-3 text-sm text-gray-300">3250小时</td>
<td class="px-4 py-3 text-sm text-gray-300">2023-10-18</td>
<td class="px-4 py-3 text-sm">
<div class="flex space-x-2">
<button class="text-primary hover:text-blue-400 transition-all-300">
<i class="fa fa-eye"></i>
</button>
<button class="text-gray-400 hover:text-white transition-all-300">
<i class="fa fa-wrench"></i>
</button>
<button class="text-gray-400 hover:text-white transition-all-300">
<i class="fa fa-cog"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-gray-700 flex justify-between items-center">
<div class="text-sm text-gray-400">
显示 <span class="text-white">1</span> 到 <span class="text-white">5</span> 条，共 <span class="text-white">42</span> 条
</div>
<div class="flex space-x-1">
<button class="px-3 py-1.5 text-sm rounded-md bg-gray-800 hover:bg-gray-700 transition-all-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<i class="fa fa-chevron-left"></i>
</button>
<button class="px-3 py-1.5 text-sm rounded-md bg-primary text-white">1</button>
<button class="px-3 py-1.5 text-sm rounded-md bg-gray-800 hover:bg-gray-700 transition-all-300">2</button>
<button class="px-3 py-1.5 text-sm rounded-md bg-gray-800 hover:bg-gray-700 transition-all-300">3</button>
<button class="px-3 py-1.5 text-sm rounded-md bg-gray-800 hover:bg-gray-700 transition-all-300">...</button>
<button class="px-3 py-1.5 text-sm rounded-md bg-gray-800 hover:bg-gray-700 transition-all-300">9</button>
<button class="px-3 py-1.5 text-sm rounded-md bg-gray-800 hover:bg-gray-700 transition-all-300">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</section>
<!-- 故障管理 -->
<section id="faults-section" class="hidden space-y-6">
<!-- 故障概览卡片 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-dark rounded-lg shadow-card p-4 border-l-4 border-danger">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">未处理故障</p>
<p class="text-2xl font-bold text-white mt-1">3</p>
</div>
<div class="w-12 h-12 rounded-full bg-danger bg-opacity-20 flex items-center justify-center">
<i class="fa fa-exclamation-circle text-danger text-xl"></i>
</div>
</div>
<div class="mt-4 flex items-center text-xs">
<span class="text-danger flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
1
</span>
<span class="text-gray-400 ml-2">较昨日</span>
</div>
</div>
<div class="bg-dark rounded-lg shadow-card p-4 border-l-4 border-warning">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">处理中故障</p>
<p class="text-2xl font-bold text-white mt-1">2</p>
</div>
<div class="w-12 h-12 rounded-full bg-warning bg-opacity-20 flex items-center justify-center">
<i class="fa fa-spinner text-warning text-xl"></i>
</div>
</div>
<div class="mt-4 flex items-center text-xs">
<span class="text-gray-400 flex items-center">
<i class="fa fa-minus mr-1"></i>
0
</span>
<span class="text-gray-400 ml-2">较昨日</span>
</div>
</div>
<div class="bg-dark rounded-lg shadow-card p-4 border-l-4 border-success">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">已解决故障</p>
<p class="text-2xl font-bold text-white mt-1">15</p>
</div>
<div class="w-12 h-12 rounded-full bg-success bg-opacity-20 flex items-center justify-center">
<i class="fa fa-check-circle text-success text-xl"></i>
</div>
</div>
<div class="mt-4 flex items-center text-xs">
<span class="text-success flex items-center">
<i class="fa fa-arrow-up mr-1"></i>
3
</span>
<span class="text-gray-400 ml-2">较昨日</span>
</div>
</div>
</div>
<!-- 故障标签页 -->
<div class="bg-dark rounded-lg shadow-card overflow-hidden">
<div class="border-b border-gray-700">
<div class="flex">
<button class="fault-tab px-4 py-3 text-primary border-b-2 border-primary font-medium text-sm">
<i class="fa fa-exclamation-circle mr-2"></i>
未处理故障
<span class="ml-2 bg-danger text-white text-xs px-2 py-0.5 rounded-full">3</span>
</button>
<button class="fault-tab px-4 py-3 text-gray-400 hover:text-white transition-all-300 font-medium text-sm">
<i class="fa fa-spinner mr-2"></i>
处理中故障
<span class="ml-2 bg-warning text-white text-xs px-2 py-0.5 rounded-full">2</span>
</button>
<button class="fault-tab px-4 py-3 text-gray-400 hover:text-white transition-all-300 font-medium text-sm">
<i class="fa fa-check-circle mr-2"></i>
已解决故障
<span class="ml-2 bg-success text-white text-xs px-2 py-0.5 rounded-full">15</span>
</button>
</div>
</div>
<div class="p-4">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4">
<div class="flex flex-col md:flex-row gap-4">
<div>
<label for="fault-type-select" class="block text-sm text-gray-400 mb-1">故障类型</label>
<select id="fault-type-select" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="all">全部类型</option>
<option value="communication">通信故障</option>
<option value="mechanical">机械故障</option>
<option value="sensor">传感器故障</option>
<option value="power">电源故障</option>
</select>
</div>
<div>
<label for="fault-time-select" class="block text-sm text-gray-400 mb-1">故障时间</label>
<select id="fault-time-select" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="today">今日</option>
<option value="yesterday">昨日</option>
<option value="week">本周</option>
<option value="month">本月</option>
</select>
</div>
</div>
<div class="flex gap-2">
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm transition-all-300 flex items-center">
<i class="fa fa-filter mr-2"></i>
筛选
</button>
<button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg text-sm transition-all-300 flex items-center">
<i class="fa fa-refresh mr-2"></i>
刷新
</button>
</div>
</div>
<!-- 故障列表 -->
<div class="space-y-4">
<!-- 故障项 1 -->
<div class="bg-gray-800 rounded-lg p-4 border-l-4 border-danger hover:shadow-card-hover transition-all-300 cursor-pointer">
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<div class="flex items-start">
<div class="w-10 h-10 rounded-full bg-danger bg-opacity-20 flex items-center justify-center mr-4 mt-1">
<i class="fa fa-exclamation-circle text-danger"></i>
</div>
<
这里空空如也
有帮助，赞一个