pp3xivymc
/
Software_Architecture
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6bc4fb50b9'
${ noResults }
Software_Architecture/design-geimi.html

467 lines
23 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JT-101 战场探索系统</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0a2463',
secondary: '#1e3a8a',
accent: '#ff7d00',
success: '#3dd598',
warning: '#ffbe0b',
danger: '#e63946',
dark: '#051937',
'dark-light': '#112140'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.scrollbar-thin {
scrollbar-width: thin;
}
.scrollbar-thin::-webkit-scrollbar {
width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 2px;
}
.device-card {
@apply bg-dark-light rounded-lg p-3 mb-2 transition-all duration-300 hover:bg-secondary/50 border border-gray-700/50;
}
.status-indicator {
@apply w-2 h-2 rounded-full inline-block mr-2;
}
.btn-primary {
@apply bg-accent hover:bg-accent/80 text-white font-medium py-2 px-4 rounded transition-all duration-300;
}
.tab-active {
@apply border-b-2 border-accent text-white;
}
.tab-inactive {
@apply border-b-2 border-transparent text-gray-400 hover:text-gray-300;
}
}
</style>
</head>
<body class="bg-dark text-gray-200 h-screen flex flex-col overflow-hidden">
<!-- 顶部导航栏 -->
<header class="bg-primary/80 backdrop-blur-sm border-b border-gray-700/50 px-4 py-2 flex justify-between items-center">
<div class="flex items-center space-x-4">
<button class="text-gray-300 hover:text-white transition-colors">
<i class="fa fa-bars text-xl"></i>
</button>
<h1 class="text-xl font-bold text-white">JT-101 战场探索系统</h1>
<div class="hidden md:flex space-x-6 ml-8">
<button class="text-sm hover:text-white transition-colors">任务</button>
<button class="text-sm hover:text-white transition-colors">设置</button>
</div>
</div>
<div class="flex items-center space-x-4">
<button class="bg-dark-light hover:bg-secondary text-sm py-1 px-3 rounded flex items-center transition-colors">
<i class="fa fa-power-off mr-2"></i>电源
</button>
<button class="bg-dark-light hover:bg-secondary text-sm py-1 px-3 rounded flex items-center transition-colors">
<i class="fa fa-refresh mr-2"></i>同步
</button>
<button class="bg-dark-light hover:bg-secondary text-sm py-1 px-3 rounded flex items-center transition-colors relative">
<i class="fa fa-bell mr-2"></i>警报
<span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">1</span>
</button>
<div class="hidden md:flex items-center space-x-2 ml-6">
<button class="bg-dark-light hover:bg-secondary text-sm py-1 px-3 rounded transition-colors">标准视图</button>
<button class="bg-dark-light hover:bg-secondary text-sm py-1 px-3 rounded transition-colors">全屏视图</button>
</div>
<div class="ml-4 flex items-center">
<span class="text-success flex items-center text-sm">
<i class="fa fa-circle mr-1 text-xs"></i>系统正常运行中
</span>
</div>
</div>
</header> <!-- 主内容区 -->
<main class="flex flex-1 overflow-hidden">
<!-- 左侧设备管理面板 -->
<aside class="w-64 bg-dark-light border-r border-gray-700/50 flex flex-col">
<div class="p-3 border-b border-gray-700/50">
<h2 class="font-bold text-lg mb-2">设备管理</h2>
<button class="w-full btn-primary flex items-center justify-center">
<i class="fa fa-plus mr-2"></i>添加设备
</button>
</div>
<div class="flex-1 overflow-y-auto p-2 scrollbar-thin">
<!-- 无人机设备 -->
<div class="device-card">
<div class="flex items-start">
<div class="text-blue-400 mr-3 mt-1">
<i class="fa fa-plane text-xl"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<h3 class="font-medium text-white">侦察机-01</h3>
<span class="text-xs bg-success/20 text-success px-2 py-0.5 rounded-full">在线</span>
</div>
<p class="text-xs text-gray-400 mt-1">IP: 192.168.1.101</p>
<p class="text-xs text-gray-400">N39.90, E116.40</p>
<div class="mt-2 flex items-center">
<span class="text-xs text-gray-400 mr-2">信号:</span>
<div class="w-full bg-gray-700 rounded-full h-1.5">
<div class="bg-success h-1.5 rounded-full" style="width: 90%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 机器狗设备 -->
<div class="device-card">
<div class="flex items-start">
<div class="text-green-400 mr-3 mt-1">
<i class="fa fa-paw text-xl"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<h3 class="font-medium text-white">探测狗-02</h3>
<span class="text-xs bg-warning/20 text-warning px-2 py-0.5 rounded-full">信号弱</span>
</div>
<p class="text-xs text-gray-400 mt-1">IP: 192.168.1.102</p>
<p class="text-xs text-gray-400">N39.91, E116.41</p>
<div class="mt-2 flex items-center">
<span class="text-xs text-gray-400 mr-2">信号:</span>
<div class="w-full bg-gray-700 rounded-full h-1.5">
<div class="bg-warning h-1.5 rounded-full" style="width: 40%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 离线设备 -->
<div class="device-card opacity-70">
<div class="flex items-start">
<div class="text-gray-400 mr-3 mt-1">
<i class="fa fa-plane text-xl"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<h3 class="font-medium text-gray-400">侦察机-03</h3>
<span class="text-xs bg-gray-700 text-gray-400 px-2 py-0.5 rounded-full">离线</span>
</div>
<p class="text-xs text-gray-500 mt-1">IP: 192.168.1.103</p>
<p class="text-xs text-gray-500">N39.92, E116.39</p>
<div class="mt-2 flex items-center">
<span class="text-xs text-gray-500 mr-2">信号:</span>
<div class="w-full bg-gray-700 rounded-full h-1.5">
<div class="bg-gray-500 h-1.5 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 机器狗设备 -->
<div class="device-card">
<div class="flex items-start">
<div class="text-green-400 mr-3 mt-1">
<i class="fa fa-paw text-xl"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<h3 class="font-medium text-white">探测狗-04</h3>
<span class="text-xs bg-success/20 text-success px-2 py-0.5 rounded-full">在线</span>
</div>
<p class="text-xs text-gray-400 mt-1">IP: 192.168.1.104</p>
<p class="text-xs text-gray-400">N39.89, E116.42</p>
<div class="mt-2 flex items-center">
<span class="text-xs text-gray-400 mr-2">信号:</span>
<div class="w-full bg-gray-700 rounded-full h-1.5">
<div class="bg-success h-1.5 rounded-full" style="width: 75%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
<!-- 中央地图区域 -->
<section class="flex-1 relative">
<div id="map" class="w-full h-full"></div>
<!-- 地图控制按钮 -->
<div class="absolute bottom-4 left-4 bg-dark-light/80 backdrop-blur-sm rounded-lg p-2 border border-gray-700/50 flex space-x-2">
<button class="bg-secondary text-white px-3 py-1 text-sm rounded">标准</button>
<button class="bg-dark-light hover:bg-secondary px-3 py-1 text-sm rounded transition-colors">卫星</button>
<button class="bg-dark-light hover:bg-secondary px-3 py-1 text-sm rounded transition-colors">地形</button>
</div>
<!-- 地图缩放控制 -->
<div class="absolute top-4 right-4 bg-dark-light/80 backdrop-blur-sm rounded-lg border border-gray-700/50 flex flex-col">
<button class="w-8 h-8 flex items-center justify-center hover:bg-secondary transition-colors border-b border-gray-700/50">
<i class="fa fa-plus"></i>
</button>
<button class="w-8 h-8 flex items-center justify-center hover:bg-secondary transition-colors">
<i class="fa fa-minus"></i>
</button>
<button class="w-8 h-8 flex items-center justify-center hover:bg-secondary transition-colors border-t border-gray-700/50">
<i class="fa fa-location-arrow"></i>
</button>
</div>
</section>
<!-- 右侧功能面板 -->
<aside class="w-80 bg-dark-light border-l border-gray-700/50 flex flex-col">
<!-- 功能标签页 -->
<div class="flex border-b border-gray-700/50">
<button class="flex-1 py-3 text-sm font-medium tab-inactive">战场探索</button>
<button class="flex-1 py-3 text-sm font-medium tab-active">情报传输</button>
<button class="flex-1 py-3 text-sm font-medium tab-inactive">敌情统计</button>
<button class="flex-1 py-3 text-sm font-medium tab-inactive">实时情报</button>
</div>
<!-- 情报传输面板 -->
<div class="flex-1 overflow-y-auto p-4 scrollbar-thin">
<div class="text-center mb-6">
<div class="w-24 h-24 bg-danger/20 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fa fa-microphone text-3xl text-danger"></i>
</div>
<p class="text-sm text-gray-400">按住说话</p>
</div>
<div class="mb-4">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-400">音量</span>
<span class="text-sm text-gray-400">80%</span>
</div>
<input type="range" min="0" max="100" value="80" class="w-full accent-accent h-1.5">
</div>
<h3 class="text-sm font-medium mb-3 mt-6">最近通话</h3>
<div class="space-y-3">
<div class="bg-primary/30 p-3 rounded-lg hover:bg-primary/50 transition-colors cursor-pointer">
<div class="flex justify-between">
<span class="font-medium text-white">指挥中心</span>
<span class="text-xs text-gray-400">05:23</span>
</div>
<p class="text-xs text-gray-400 mt-1">今天 09:45</p>
</div>
<div class="bg-primary/30 p-3 rounded-lg hover:bg-primary/50 transition-colors cursor-pointer">
<div class="flex justify-between">
<span class="font-medium text-white">侦察小队A</span>
<span class="text-xs text-gray-400">02:47</span>
</div>
<p class="text-xs text-gray-400 mt-1">今天 08:12</p>
</div>
<div class="bg-primary/30 p-3 rounded-lg hover:bg-primary/50 transition-colors cursor-pointer">
<div class="flex justify-between">
<span class="font-medium text-white">火力支援单位</span>
<span class="text-xs text-gray-400">08:15</span>
</div>
<p class="text-xs text-gray-400 mt-1">昨天 16:30</p>
</div>
</div>
</div>
</aside>
</main>
<!-- 底部状态栏 -->
<footer class="bg-primary/80 backdrop-blur-sm border-t border-gray-700/50 px-4 py-2 text-xs flex justify-between items-center">
<div class="flex space-x-6">
<div class="flex items-center">
<i class="fa fa-wifi text-success mr-2"></i>
<span>连接状态: 正常</span>
</div>
<div class="flex items-center">
<i class="fa fa-sync text-blue-400 mr-2"></i>
<span>数据同步: 最新</span>
</div>
<div class="flex items-center">
<i class="fa fa-clock-o text-gray-400 mr-2"></i>
<span id="system-time">系统时间: 2023-11-15 14:30:45</span>
</div>
</div>
<div class="flex space-x-6">
<div class="flex items-center">
<i class="fa fa-microchip text-gray-400 mr-2"></i>
<span>CPU: 35%</span>
</div>
<div class="flex items-center">
<i class="fa fa-memory text-gray-400 mr-2"></i>
<span>内存: 42%</span>
</div>
<div class="flex items-center">
<i class="fa fa-user text-gray-400 mr-2"></i>
<span>操作员: Admin</span>
</div>
</div>
</footer>
<!-- 实时情报侧边栏 (默认隐藏) -->
<div id="intelligence-panel" class="fixed top-0 right-0 h-full w-80 bg-dark-light transform translate-x-full transition-transform duration-300 ease-in-out border-l border-gray-700/50 z-50">
<div class="p-3 border-b border-gray-700/50 flex justify-between items-center">
<h2 class="font-bold text-lg">实时情报 & 日志</h2>
<button id="close-intel-panel" class="text-gray-400 hover:text-white">
<i class="fa fa-times"></i>
</button>
</div>
<div class="p-3">
<div class="bg-danger/20 text-danger p-3 rounded-lg mb-4 flex items-start">
<i class="fa fa-exclamation-triangle mt-1 mr-2"></i>
<div>
<p class="font-medium">系统警报: 1</p>
<p class="text-xs mt-1">探测狗-02 信号强度较低</p>
</div>
</div>
<div class="space-y-2 max-h-[calc(100vh-180px)] overflow-y-auto scrollbar-thin">
<div class="text-danger text-sm">
<span class="text-gray-400">[14:30:50]</span> 识别到敌情! 坐标 [116.39, 39.91]
</div>
<div class="text-blue-400 text-sm">
<span class="text-gray-400">[14:30:48]</span> 无人机-01 已拍摄照片 [IMG_0255.JPG]
</div>
<div class="text-warning text-sm">
<span class="text-gray-400">[14:30:12]</span> 机器狗-A 信号强度较低
</div>
<div class="text-gray-300 text-sm">
<span class="text-gray-400">[14:29:55]</span> 机器狗-A 已到达指定导航点
</div>
<div class="text-gray-300 text-sm">
<span class="text-gray-400">[14:28:40]</span> 无人机-01 起飞成功，高度 50m
</div>
<div class="text-gray-300 text-sm">
<span class="text-gray-400">[14:27:15]</span> 系统同步完成，数据更新至最新
</div>
<div class="text-gray-300 text-sm">
<span class="text-gray-400">[14:25:30]</span> 探测狗-04 开始自主建图
</div>
<div class="text-gray-300 text-sm">
<span class="text-gray-400">[14:20:10]</span> 与指挥中心建立语音连接
</div>
</div>
</div>
</div>
<script>
// 初始化地图
const map = L.map('map').setView([39.9042, 116.4074], 15); // 默认北京坐标
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 自定义设备图标
const droneIcon = L.icon({
iconUrl: 'https://cdn-icons-png.flaticon.com/512/1637/1637445.png',
iconSize: [32, 32],
iconAnchor: [16, 16]
});
const robotDogIcon = L.icon({
iconUrl: 'https://cdn-icons-png.flaticon.com/512/616/616559.png',
iconSize: [32, 32],
iconAnchor: [16, 16]
});
const enemyIcon = L.icon({
iconUrl: 'https://cdn-icons-png.flaticon.com/512/616/616559.png',
iconSize: [36, 36],
iconAnchor: [18, 18]
});
// 添加设备标记
L.marker([39.90, 116.40], {icon: droneIcon}).addTo(map)
.bindPopup('<b>侦察机-01</b><br>在线 - 飞行中').openPopup();
L.marker([39.91, 116.41], {icon: robotDogIcon}).addTo(map)
.bindPopup('<b>探测狗-02</b><br>在线 - 信号弱');
L.marker([39.89, 116.42], {icon: robotDogIcon}).addTo(map)
.bindPopup('<b>探测狗-04</b><br>在线 - 待命');
// 添加敌人标记
L.marker([39.905, 116.395], {icon: enemyIcon}).addTo(map)
.bindPopup('<b>敌军位置</b><br>坐标: [116.39, 39.91]<br>最后更新: 14:30:50');
// 更新系统时间
function updateSystemTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('system-time').textContent =
`系统时间: ${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
setInterval(updateSystemTime, 1000);
updateSystemTime();
// 标签页切换功能
const tabs = document.querySelectorAll('.tab-inactive, .tab-active');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// 移除所有标签页的active状态
document.querySelectorAll('.tab-active').forEach(activeTab => {
activeTab.classList.remove('tab-active');
activeTab.classList.add('tab-inactive');
});
// 设置当前标签页为active
tab.classList.remove('tab-inactive');
tab.classList.add('tab-active');
// 如果点击的是"实时情报"标签，显示侧边栏
if (tab.textContent.trim() === '实时情报') {
document.getElementById('intelligence-panel').classList.remove('translate-x-full');
}
});
});
// 关闭实时情报面板
document.getElementById('close-intel-panel').addEventListener('click', () => {
document.getElementById('intelligence-panel').classList.add('translate-x-full');
// 重置标签页状态
tabs.forEach(tab => {
if (tab.textContent.trim() === '情报传输') {
tab.classList.remove('tab-inactive');
tab.classList.add('tab-active');
} else if (tab.textContent.trim() === '实时情报') {
tab.classList.remove('tab-active');
tab.classList.add('tab-inactive');
}
});
});
</script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink