190 lines
10 KiB
HTML
190 lines
10 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; }
|
||
.search-btn:active { transform: scale(0.95); }
|
||
.result-card { transition: all 0.3s ease; }
|
||
.result-card:active { transform: scale(0.98); }
|
||
.timeline-item { position: relative; }
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 40px;
|
||
bottom: -10px;
|
||
width: 2px;
|
||
background: #e5e7eb;
|
||
}
|
||
.timeline-item:last-child::before {
|
||
display: none;
|
||
}
|
||
</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>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Search Section -->
|
||
<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="space-y-4">
|
||
<div class="relative">
|
||
<input type="text" id="license-plate-input" placeholder="请输入车牌号，如：京A12345"
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
onkeyup="handleInputChange()">
|
||
<svg class="absolute right-3 top-3 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Quick Search Suggestions -->
|
||
<div class="flex flex-wrap gap-2" id="search-suggestions">
|
||
<button onclick="quickSearch('京A')" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">京A</button>
|
||
<button onclick="quickSearch('京B')" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">京B</button>
|
||
<button onclick="quickSearch('京C')" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">京C</button>
|
||
<button onclick="quickSearch('京D')" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">京D</button>
|
||
</div>
|
||
|
||
<button onclick="searchTrajectory()" class="search-btn w-full bg-blue-600 text-white py-3 px-4 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
|
||
查询轨迹
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Search Results -->
|
||
<section id="results-section" class="px-4 pb-20 hidden">
|
||
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h2 class="text-base font-semibold text-gray-900">查询结果</h2>
|
||
<button onclick="clearResults()" class="text-xs text-gray-500">清除结果</button>
|
||
</div>
|
||
<div id="search-results">
|
||
<!-- Results will be populated by JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Trajectory Details -->
|
||
<div id="trajectory-details" class="bg-white rounded-xl shadow-sm p-4 hidden">
|
||
<h3 class="text-base font-semibold text-gray-900 mb-4">轨迹详情</h3>
|
||
<div class="space-y-3" id="trajectory-timeline">
|
||
<!-- Timeline will be populated by JavaScript -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Recent Searches -->
|
||
<section class="px-4 pb-20" id="recent-searches-section">
|
||
<div class="bg-white rounded-xl shadow-sm p-4">
|
||
<h2 class="text-base font-semibold text-gray-900 mb-4">最近查询</h2>
|
||
<div class="space-y-2" id="recent-searches">
|
||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-4 h-4 text-blue-600" 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>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-900">京A12345</p>
|
||
<p class="text-xs text-gray-500">2024-01-15 14:30</p>
|
||
</div>
|
||
</div>
|
||
<button onclick="quickSearch('京A12345')" class="text-xs text-blue-600">查询</button>
|
||
</div>
|
||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-4 h-4 text-green-600" 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>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-900">京B67890</p>
|
||
<p class="text-xs text-gray-500">2024-01-15 13:15</p>
|
||
</div>
|
||
</div>
|
||
<button onclick="quickSearch('京B67890')" class="text-xs text-blue-600">查询</button>
|
||
</div>
|
||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-4 h-4 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<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-sm font-medium text-gray-900">京C24680</p>
|
||
<p class="text-xs text-gray-500">2024-01-15 11:20</p>
|
||
</div>
|
||
</div>
|
||
<button onclick="quickSearch('京C24680')" class="text-xs text-blue-600">查询</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 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 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 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 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 tracking page
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
loadRecentSearches();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |