222 lines
12 KiB
HTML
222 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; }
|
||
|
|
.stat-card { transition: all 0.3s ease; }
|
||
|
|
.stat-card:active { transform: scale(0.98); }
|
||
|
|
.alert-unread { border-left: 4px solid #ef4444; }
|
||
|
|
.alert-read { border-left: 4px solid #6b7280; }
|
||
|
|
.pulse-dot { animation: pulse 2s infinite; }
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { opacity: 1; }
|
||
|
|
50% { opacity: 0.5; }
|
||
|
|
}
|
||
|
|
</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">
|
||
|
|
<div class="w-8 h-8 bg-blue-800 rounded-lg flex items-center justify-center">
|
||
|
|
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<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-green-500 rounded-full pulse-dot"></div>
|
||
|
|
<span class="text-xs text-gray-600">在线</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main class="px-4 py-6 pb-20">
|
||
|
|
<!-- Vehicle Statistics -->
|
||
|
|
<section class="mb-6">
|
||
|
|
<h2 class="text-base font-semibold text-gray-900 mb-4">园区车辆概览</h2>
|
||
|
|
<div class="grid grid-cols-1 gap-4">
|
||
|
|
<!-- Total Vehicles -->
|
||
|
|
<div class="stat-card bg-white rounded-xl shadow-sm p-4" onclick="showVehicleDetail('total')">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-2xl font-bold text-blue-600" id="total-vehicles">156</p>
|
||
|
|
<p class="text-sm text-gray-500">园区车辆总数</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<p class="text-xs text-green-600">+5 今日新增</p>
|
||
|
|
<p class="text-xs text-gray-400">较前日</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Today's Applications -->
|
||
|
|
<div class="stat-card bg-white rounded-xl shadow-sm p-4" onclick="showVehicleDetail('applications')">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-2xl font-bold text-green-600" id="today-applications">23</p>
|
||
|
|
<p class="text-sm text-gray-500">今日入园申请</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<p class="text-xs text-blue-600">18 已批准</p>
|
||
|
|
<p class="text-xs text-yellow-600">5 待审批</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Active Orders -->
|
||
|
|
<div class="stat-card bg-white rounded-xl shadow-sm p-4" onclick="showVehicleDetail('orders')">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-orange-600" fill="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-2xl font-bold text-orange-600" id="active-orders">89</p>
|
||
|
|
<p class="text-sm text-gray-500">有运单车辆数</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-right">
|
||
|
|
<p class="text-xs text-green-600">67 运输中</p>
|
||
|
|
<p class="text-xs text-gray-400">22 待装卸</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Recent Alerts -->
|
||
|
|
<section class="mb-6">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<h2 class="text-base font-semibold text-gray-900">最新报警</h2>
|
||
|
|
<button onclick="navigateToMonitor()" class="text-xs text-blue-600 font-medium">查看全部</button>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-3" id="recent-alerts">
|
||
|
|
<!-- Alerts will be populated by JavaScript -->
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Quick Actions -->
|
||
|
|
<section class="mb-6">
|
||
|
|
<h2 class="text-base font-semibold text-gray-900 mb-4">快速操作</h2>
|
||
|
|
<div class="grid grid-cols-2 gap-3">
|
||
|
|
<button onclick="navigateToMonitor()" class="bg-white rounded-xl shadow-sm p-4 text-left hover:shadow-md transition-shadow">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 24 24">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="font-medium text-gray-900">报警管理</p>
|
||
|
|
<p class="text-xs text-gray-500">处理报警事件</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
<button onclick="navigateToTracking()" class="bg-white rounded-xl shadow-sm p-4 text-left hover:shadow-md transition-shadow">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="font-medium text-gray-900">轨迹查询</p>
|
||
|
|
<p class="text-xs text-gray-500">车辆轨迹回放</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- Statistics Detail Modal -->
|
||
|
|
<div id="stats-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-[70vh] 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="stats-modal-title">统计详情</h3>
|
||
|
|
<button onclick="closeStatsModal()" 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="stats-modal-content">
|
||
|
|
<!-- Modal content will be populated by JavaScript -->
|
||
|
|
</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-3 h-16">
|
||
|
|
<button onclick="navigateToHome()" 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="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="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 home page
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
loadRecentAlerts();
|
||
|
|
animateStatistics();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|