220 lines
12 KiB
HTML
220 lines
12 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-critical { border-left: 4px solid #ef4444; }
|
||
|
|
.alert-warning { border-left: 4px solid #f59e0b; }
|
||
|
|
.alert-info { border-left: 4px solid #3b82f6; }
|
||
|
|
.pulse-red { animation: pulse-red 1.5s infinite; }
|
||
|
|
@keyframes pulse-red {
|
||
|
|
0%, 100% { background-color: #ef4444; }
|
||
|
|
50% { background-color: #f87171; }
|
||
|
|
}
|
||
|
|
</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">
|
||
|
|
<div class="w-2 h-2 bg-red-500 rounded-full pulse-red"></div>
|
||
|
|
<span class="text-xs text-gray-600">1条未处理</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="pending-count">3</p>
|
||
|
|
<p class="text-xs text-gray-500">待处理</p>
|
||
|
|
</div>
|
||
|
|
<div class="text-center">
|
||
|
|
<p class="text-2xl font-bold text-yellow-600" id="processing-count">2</p>
|
||
|
|
<p class="text-xs text-gray-500">处理中</p>
|
||
|
|
</div>
|
||
|
|
<div class="text-center">
|
||
|
|
<p class="text-2xl font-bold text-green-600" id="resolved-count">15</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-4 gap-1">
|
||
|
|
<button onclick="filterAlerts('all')" class="filter-tab active px-3 py-2 rounded-lg text-xs font-medium text-center bg-blue-100 text-blue-800">
|
||
|
|
全部 <span class="ml-1 bg-blue-200 px-1 rounded" id="count-all">20</span>
|
||
|
|
</button>
|
||
|
|
<button onclick="filterAlerts('pending')" 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-pending">3</span>
|
||
|
|
</button>
|
||
|
|
<button onclick="filterAlerts('processing')" 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-processing">2</span>
|
||
|
|
</button>
|
||
|
|
<button onclick="filterAlerts('resolved')" 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-resolved">15</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>
|
||
|
|
|
||
|
|
<!-- Alert Detail Modal -->
|
||
|
|
<div id="alert-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
|
||
|
|
<div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-xl max-h-[80vh] overflow-y-auto">
|
||
|
|
<div class="p-4">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="text-lg font-bold text-gray-900" id="modal-title">报警详情</h3>
|
||
|
|
<button onclick="closeAlertModal()" class="p-1 text-gray-400">
|
||
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div id="alert-modal-content">
|
||
|
|
<!-- Modal content will be populated by JavaScript -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Processing Modal -->
|
||
|
|
<div id="processing-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
|
||
|
|
<div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-xl">
|
||
|
|
<div class="p-4">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h3 class="text-lg font-bold text-gray-900">处理报警</h3>
|
||
|
|
<button onclick="closeProcessingModal()" class="p-1 text-gray-400">
|
||
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-4">
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">处理措施</label>
|
||
|
|
<div class="grid grid-cols-2 gap-2">
|
||
|
|
<button onclick="selectAction('contact')" class="action-btn p-3 border border-gray-300 rounded-lg text-sm text-left">
|
||
|
|
<div class="font-medium">联系驾驶员</div>
|
||
|
|
<div class="text-xs text-gray-500">直接通话确认情况</div>
|
||
|
|
</button>
|
||
|
|
<button onclick="selectAction('dispatch')" class="action-btn p-3 border border-gray-300 rounded-lg text-sm text-left">
|
||
|
|
<div class="font-medium">派遣救援</div>
|
||
|
|
<div class="text-xs text-gray-500">安排应急处理团队</div>
|
||
|
|
</button>
|
||
|
|
<button onclick="selectAction('reroute')" class="action-btn p-3 border border-gray-300 rounded-lg text-sm text-left">
|
||
|
|
<div class="font-medium">调整路线</div>
|
||
|
|
<div class="text-xs text-gray-500">重新规划安全路线</div>
|
||
|
|
</button>
|
||
|
|
<button onclick="selectAction('monitor')" class="action-btn p-3 border border-gray-300 rounded-lg text-sm text-left">
|
||
|
|
<div class="font-medium">持续监控</div>
|
||
|
|
<div class="text-xs text-gray-500">加强跟踪观察</div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">处理备注</label>
|
||
|
|
<textarea id="processing-note" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="请输入处理过程和结果..."></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="flex space-x-3">
|
||
|
|
<button onclick="submitProcessing()" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg text-sm font-medium">
|
||
|
|
提交处理结果
|
||
|
|
</button>
|
||
|
|
<button onclick="closeProcessingModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700">
|
||
|
|
取消
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 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-4 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 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="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="navigateToAlerts()" 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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||
|
|
</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 alerts page
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
loadAlerts();
|
||
|
|
updateAlertCounts();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|