135 lines
6.6 KiB
HTML
135 lines
6.6 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>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Noto Sans SC', sans-serif; }
|
|
.dashboard-bg {
|
|
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(30,58,138,0.1) 1px, transparent 0);
|
|
background-size: 20px 20px;
|
|
}
|
|
.nav-item.active { color: #1e3a8a; }
|
|
.nav-item.active svg { fill: #1e3a8a; }
|
|
.alert-card { transition: all 0.3s ease; }
|
|
.alert-card:active { transform: scale(0.98); }
|
|
.alert-unread { border-left: 4px solid #ef4444; }
|
|
.alert-read { border-left: 4px solid #6b7280; }
|
|
.filter-tab.active { background: #dbeafe; color: #1e40af; }
|
|
</style>
|
|
</head>
|
|
<body class="dashboard-bg min-h-screen">
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="px-4 py-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-3">
|
|
<button onclick="goBack()" class="p-1">
|
|
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
|
</svg>
|
|
</button>
|
|
<div>
|
|
<h1 class="text-lg font-bold text-gray-900">报警监控</h1>
|
|
<p class="text-xs text-gray-500">实时报警管理</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-xs text-gray-600" id="unread-count">3条未查看</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Alert Statistics -->
|
|
<section class="px-4 py-4">
|
|
<div class="bg-white rounded-xl shadow-sm p-4">
|
|
<h2 class="text-base font-semibold text-gray-900 mb-4">报警统计</h2>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold text-red-600" id="total-alerts">12</p>
|
|
<p class="text-xs text-gray-500">今日报警</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold text-orange-600" id="unread-alerts">3</p>
|
|
<p class="text-xs text-gray-500">未查看</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-2xl font-bold text-green-600" id="read-alerts">9</p>
|
|
<p class="text-xs text-gray-500">已查看</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Filter Tabs -->
|
|
<section class="px-4 pb-4">
|
|
<div class="bg-white rounded-xl shadow-sm p-2">
|
|
<div class="grid grid-cols-3 gap-1">
|
|
<button onclick="filterAlerts('all')" class="filter-tab active px-3 py-2 rounded-lg text-xs font-medium text-center">
|
|
全部 <span class="ml-1 bg-blue-200 px-1 rounded" id="count-all">12</span>
|
|
</button>
|
|
<button onclick="filterAlerts('unread')" class="filter-tab px-3 py-2 rounded-lg text-xs font-medium text-center text-gray-600">
|
|
未查看 <span class="ml-1 bg-gray-200 px-1 rounded" id="count-unread">3</span>
|
|
</button>
|
|
<button onclick="filterAlerts('read')" class="filter-tab px-3 py-2 rounded-lg text-xs font-medium text-center text-gray-600">
|
|
已查看 <span class="ml-1 bg-gray-200 px-1 rounded" id="count-read">9</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Alert List -->
|
|
<main class="px-4 pb-20">
|
|
<div id="alert-list" class="space-y-3">
|
|
<!-- Alert cards will be populated by JavaScript -->
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="empty-state" class="hidden text-center py-12">
|
|
<svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<p class="text-gray-500 text-sm">暂无报警信息</p>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50">
|
|
<div class="grid grid-cols-3 h-16">
|
|
<button onclick="navigateToHome()" class="nav-item flex flex-col items-center justify-center space-y-1 text-gray-400">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
|
|
</svg>
|
|
<span class="text-xs">首页</span>
|
|
</button>
|
|
<button onclick="navigateToMonitor()" class="nav-item active flex flex-col items-center justify-center space-y-1">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<span class="text-xs">监控</span>
|
|
</button>
|
|
<button onclick="navigateToTracking()" class="nav-item flex flex-col items-center justify-center space-y-1 text-gray-400">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<span class="text-xs">轨迹</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<script src="main.js"></script>
|
|
<script>
|
|
// Initialize monitor page
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadAllAlerts();
|
|
updateAlertStats();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |