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.
1106 lines
37 KiB
1106 lines
37 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>战场探索系统</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #1F2937;
|
|
color: #F3F4F6;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 顶部控制栏 */
|
|
.top-bar {
|
|
background-color: #374151;
|
|
padding: 10px 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #4B5563;
|
|
z-index: 100;
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
.menu-item {
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background-color: #4B5563;
|
|
}
|
|
|
|
.device-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.view-toggle {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.system-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.status-indicator {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #10B981;
|
|
}
|
|
|
|
/* 主内容区 */
|
|
.main-content {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 左侧设备管理面板 */
|
|
.left-panel {
|
|
width: 300px;
|
|
background-color: #374151;
|
|
border-radius: 8px;
|
|
margin: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #F9FAFB;
|
|
padding: 10px 15px;
|
|
border-bottom: 1px solid #4B5563;
|
|
}
|
|
|
|
.add-device {
|
|
margin: 10px;
|
|
padding: 8px 0;
|
|
background-color: #F59E0B;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.device-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.device-item {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #4B5563;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.device-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.drone-icon {
|
|
background-color: #3B82F6;
|
|
}
|
|
|
|
.robot-icon {
|
|
background-color: #10B981;
|
|
}
|
|
|
|
.device-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.device-name {
|
|
font-weight: bold;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.device-ip {
|
|
font-size: 12px;
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
.device-coords {
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.device-status {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #10B981;
|
|
}
|
|
|
|
.battery-bar {
|
|
width: 60px;
|
|
height: 8px;
|
|
background-color: #4B5563;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.battery-level {
|
|
height: 100%;
|
|
}
|
|
|
|
.battery-high {
|
|
background-color: #10B981;
|
|
}
|
|
|
|
.battery-medium {
|
|
background-color: #F59E0B;
|
|
}
|
|
|
|
.battery-low {
|
|
background-color: #EF4444;
|
|
}
|
|
|
|
/* 中央地图区域 */
|
|
.map-area {
|
|
flex: 1;
|
|
border-radius: 8px;
|
|
margin: 10px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.map-controls {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background-color: rgba(55, 65, 81, 0.8);
|
|
border-radius: 4px;
|
|
padding: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.map-control-btn {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 4px;
|
|
background-color: #4B5563;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.map-control-btn:hover {
|
|
background-color: #6B7280;
|
|
}
|
|
|
|
.layer-toggle {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
background-color: rgba(55, 65, 81, 0.8);
|
|
border-radius: 4px;
|
|
padding: 5px;
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.layer-btn {
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
background-color: #4B5563;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.layer-btn.active {
|
|
background-color: #3B82F6;
|
|
}
|
|
|
|
/* 右侧功能面板 */
|
|
.right-panel {
|
|
width: 350px;
|
|
background-color: #374151;
|
|
border-radius: 8px;
|
|
margin: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-buttons {
|
|
display: flex;
|
|
border-bottom: 1px solid #4B5563;
|
|
}
|
|
|
|
.tab-btn {
|
|
flex: 1;
|
|
padding: 10px;
|
|
background-color: #4B5563;
|
|
border: none;
|
|
color: #F3F4F6;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
background-color: #374151;
|
|
border-bottom: 2px solid #3B82F6;
|
|
}
|
|
|
|
.tab-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
.tab-pane {
|
|
display: none;
|
|
}
|
|
|
|
.tab-pane.active {
|
|
display: block;
|
|
}
|
|
|
|
/* 战场探索模块样式 */
|
|
.sub-tab {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.sub-tab-buttons {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
gap: 5px;
|
|
}
|
|
|
|
.sub-tab-btn {
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
background-color: #4B5563;
|
|
border: none;
|
|
color: #F3F4F6;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.sub-tab-btn.active {
|
|
background-color: #3B82F6;
|
|
}
|
|
|
|
.map-display {
|
|
background-color: #1F2937;
|
|
height: 180px;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
.control-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.control-btn {
|
|
flex: 1;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
background-color: #4B5563;
|
|
border: none;
|
|
color: #F3F4F6;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.control-btn i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.control-btn span {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.camera-view {
|
|
background-color: #1F2937;
|
|
height: 180px;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.camera-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
.camera-overlay {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.camera-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background-color: rgba(55, 65, 81, 0.8);
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.camera-btn:hover {
|
|
background-color: rgba(75, 85, 99, 0.8);
|
|
}
|
|
|
|
.slider-control {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.slider-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
input[type="range"] {
|
|
width: 100%;
|
|
height: 4px;
|
|
background-color: #4B5563;
|
|
border-radius: 2px;
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background-color: #3B82F6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 情报传输模块样式 */
|
|
.talk-control {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.talk-button {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background-color: #EF4444;
|
|
border: none;
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 10px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.talk-button:hover {
|
|
background-color: #DC2626;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.talk-button.active {
|
|
background-color: #10B981;
|
|
}
|
|
|
|
.volume-control {
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.call-history {
|
|
border-top: 1px solid #4B5563;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.history-item {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #4B5563;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.history-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.history-contact {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.history-time {
|
|
font-size: 12px;
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
.history-duration {
|
|
font-size: 12px;
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
/* 敌情统计模块样式 */
|
|
.enemy-overview {
|
|
background-color: #1F2937;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.overview-title {
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.threat-level {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 12px;
|
|
color: #F59E0B;
|
|
}
|
|
|
|
.chart-container {
|
|
height: 150px;
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
.enemy-list {
|
|
border-top: 1px solid #4B5563;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.enemy-item {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #4B5563;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.enemy-type {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.enemy-details {
|
|
text-align: right;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.analysis-section {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.analysis-input {
|
|
width: 100%;
|
|
background-color: #1F2937;
|
|
border: 1px solid #4B5563;
|
|
border-radius: 4px;
|
|
padding: 8px 10px;
|
|
color: #F3F4F6;
|
|
margin-bottom: 10px;
|
|
resize: none;
|
|
height: 60px;
|
|
}
|
|
|
|
.analysis-btn {
|
|
background-color: #3B82F6;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 8px 15px;
|
|
cursor: pointer;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.analysis-result {
|
|
background-color: #1F2937;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
font-size: 13px;
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 底部状态栏 */
|
|
.status-bar {
|
|
background-color: #374151;
|
|
padding: 5px 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
color: #9CA3AF;
|
|
border-top: 1px solid #4B5563;
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1200px) {
|
|
.left-panel, .right-panel {
|
|
width: 250px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.left-panel {
|
|
width: 200px;
|
|
}
|
|
.right-panel {
|
|
width: 220px;
|
|
}
|
|
}
|
|
|
|
/* 自定义滚动条 */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #374151;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #4B5563;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #6B7280;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 顶部控制栏 -->
|
|
<div class="top-bar">
|
|
<div class="menu">
|
|
<div class="menu-item"><i class="fas fa-bars"></i> 菜单</div>
|
|
<div class="menu-item"><i class="fas fa-file-alt"></i> 任务</div>
|
|
<div class="menu-item"><i class="fas fa-cog"></i> 设置</div>
|
|
</div>
|
|
|
|
<div class="device-controls">
|
|
<button class="menu-item"><i class="fas fa-power-off"></i> 电源</button>
|
|
<button class="menu-item"><i class="fas fa-sync"></i> 同步</button>
|
|
<button class="menu-item"><i class="fas fa-bell"></i> 警报</button>
|
|
</div>
|
|
|
|
<div class="view-toggle">
|
|
<button class="menu-item active">标准视图</button>
|
|
<button class="menu-item">全屏视图</button>
|
|
</div>
|
|
|
|
<div class="system-status">
|
|
<div class="status-indicator"></div>
|
|
<span>系统正常运行中</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="main-content">
|
|
<!-- 左侧设备管理面板 -->
|
|
<div class="left-panel">
|
|
<div class="panel-title">设备管理</div>
|
|
<button class="add-device"><i class="fas fa-plus"></i> 添加设备</button>
|
|
|
|
<div class="device-list">
|
|
<div class="device-item">
|
|
<div class="device-icon drone-icon">
|
|
<i class="fas fa-drone"></i>
|
|
</div>
|
|
<div class="device-info">
|
|
<div class="device-name">侦察机-01</div>
|
|
<div class="device-ip">IP: 192.168.1.101</div>
|
|
</div>
|
|
<div class="device-coords">N39.90, E116.40</div>
|
|
<div class="device-status"></div>
|
|
<div class="battery-bar">
|
|
<div class="battery-level battery-high" style="width: 75%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-item">
|
|
<div class="device-icon robot-icon">
|
|
<i class="fas fa-robot"></i>
|
|
</div>
|
|
<div class="device-info">
|
|
<div class="device-name">探测狗-02</div>
|
|
<div class="device-ip">IP: 192.168.1.102</div>
|
|
</div>
|
|
<div class="device-coords">N39.91, E116.41</div>
|
|
<div class="device-status"></div>
|
|
<div class="battery-bar">
|
|
<div class="battery-level battery-medium" style="width: 45%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-item">
|
|
<div class="device-icon drone-icon">
|
|
<i class="fas fa-drone"></i>
|
|
</div>
|
|
<div class="device-info">
|
|
<div class="device-name">侦察机-03</div>
|
|
<div class="device-ip">IP: 192.168.1.103</div>
|
|
</div>
|
|
<div class="device-coords">N39.92, E116.39</div>
|
|
<div class="device-status" style="background-color: #F59E0B;"></div>
|
|
<div class="battery-bar">
|
|
<div class="battery-level battery-low" style="width: 15%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-item">
|
|
<div class="device-icon robot-icon">
|
|
<i class="fas fa-robot"></i>
|
|
</div>
|
|
<div class="device-info">
|
|
<div class="device-name">探测狗-04</div>
|
|
<div class="device-ip">IP: 192.168.1.104</div>
|
|
</div>
|
|
<div class="device-coords">N39.89, E116.42</div>
|
|
<div class="device-status" style="background-color: #EF4444;"></div>
|
|
<div class="battery-bar">
|
|
<div class="battery-level battery-high" style="width: 85%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 中央地图区域 -->
|
|
<div class="map-area">
|
|
<div id="map"></div>
|
|
<div class="map-controls">
|
|
<button class="map-control-btn" title="放大"><i class="fas fa-plus"></i></button>
|
|
<button class="map-control-btn" title="缩小"><i class="fas fa-minus"></i></button>
|
|
<button class="map-control-btn" title="重置视图"><i class="fas fa-compress-arrows-alt"></i></button>
|
|
</div>
|
|
<div class="layer-toggle">
|
|
<button class="layer-btn active">标准</button>
|
|
<button class="layer-btn">卫星</button>
|
|
<button class="layer-btn">地形</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧功能面板 -->
|
|
<div class="right-panel">
|
|
<div class="panel-title">功能面板</div>
|
|
<div class="tab-buttons">
|
|
<button class="tab-btn active" data-tab="exploration">战场探索</button>
|
|
<button class="tab-btn" data-tab="intelligence">情报传输</button>
|
|
<button class="tab-btn" data-tab="statistics">敌情统计</button>
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
<!-- 战场探索模块 -->
|
|
<div class="tab-pane active" id="exploration">
|
|
<div class="sub-tab">
|
|
<div class="sub-tab-buttons">
|
|
<button class="sub-tab-btn active">机器狗</button>
|
|
<button class="sub-tab-btn">无人机</button>
|
|
</div>
|
|
|
|
<div class="map-display">
|
|
<i class="fas fa-map-marked-alt fa-2x"></i>
|
|
</div>
|
|
|
|
<div class="control-buttons">
|
|
<button class="control-btn">
|
|
<i class="fas fa-play"></i>
|
|
<span>开始建图</span>
|
|
</button>
|
|
<button class="control-btn">
|
|
<i class="fas fa-pause"></i>
|
|
<span>暂停</span>
|
|
</button>
|
|
<button class="control-btn">
|
|
<i class="fas fa-save"></i>
|
|
<span>保存</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="slider-control">
|
|
<div class="slider-label">
|
|
<span>导航速度</span>
|
|
<span>50%</span>
|
|
</div>
|
|
<input type="range" min="0" max="100" value="50">
|
|
</div>
|
|
|
|
<div class="slider-control">
|
|
<div class="slider-label">
|
|
<span>避障灵敏度</span>
|
|
<span>70%</span>
|
|
</div>
|
|
<input type="range" min="0" max="100" value="70">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 情报传输模块 -->
|
|
<div class="tab-pane" id="intelligence">
|
|
<div class="talk-control">
|
|
<button class="talk-button" id="talkButton">
|
|
<i class="fas fa-microphone"></i>
|
|
</button>
|
|
<span>按住说话</span>
|
|
</div>
|
|
|
|
<div class="volume-control slider-control">
|
|
<div class="slider-label">
|
|
<span>音量</span>
|
|
<span>80%</span>
|
|
</div>
|
|
<input type="range" min="0" max="100" value="80">
|
|
</div>
|
|
|
|
<div class="call-history">
|
|
<div class="history-item">
|
|
<div class="history-info">
|
|
<div class="history-contact">指挥中心</div>
|
|
<div class="history-time">今天 09:45</div>
|
|
</div>
|
|
<div class="history-duration">05:23</div>
|
|
</div>
|
|
|
|
<div class="history-item">
|
|
<div class="history-info">
|
|
<div class="history-contact">侦察小队A</div>
|
|
<div class="history-time">今天 08:12</div>
|
|
</div>
|
|
<div class="history-duration">02:47</div>
|
|
</div>
|
|
|
|
<div class="history-item">
|
|
<div class="history-info">
|
|
<div class="history-contact">火力支援单位</div>
|
|
<div class="history-time">昨天 16:30</div>
|
|
</div>
|
|
<div class="history-duration">08:15</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 敌情统计模块 -->
|
|
<div class="tab-pane" id="statistics">
|
|
<div class="enemy-overview">
|
|
<div class="overview-title">
|
|
<span>敌情概览</span>
|
|
<div class="threat-level">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<span>威胁等级: 中</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<canvas id="enemyChart"></canvas>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: space-around; font-size: 12px;">
|
|
<div><span style="color: #3B82F6;">●</span> 步兵</div>
|
|
<div><span style="color: #10B981;">●</span> 装甲车辆</div>
|
|
<div><span style="color: #F59E0B;">●</span> 防空单位</div>
|
|
<div><span style="color: #EF4444;">●</span> 指挥中心</div>
|
|
<div><span style="color: #9CA3AF;">●</span> 未知</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="enemy-list">
|
|
<div class="enemy-item">
|
|
<div class="enemy-type">步兵单位</div>
|
|
<div class="enemy-details">
|
|
<div>数量: 35</div>
|
|
<div>最后更新: 10分钟前</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="enemy-item">
|
|
<div class="enemy-type">装甲车辆</div>
|
|
<div class="enemy-details">
|
|
<div>数量: 15</div>
|
|
<div>最后更新: 30分钟前</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="enemy-item">
|
|
<div class="enemy-type">防空单位</div>
|
|
<div class="enemy-details">
|
|
<div>数量: 10</div>
|
|
<div>最后更新: 1小时前</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analysis-section">
|
|
<textarea class="analysis-input" placeholder="输入分析请求..."></textarea>
|
|
<button class="analysis-btn">获取分析结果</button>
|
|
<div class="analysis-result">
|
|
分析结果：根据当前敌情分布，建议优先摧毁西北方向的防空单位，以确保无人机侦察路线安全。步兵单位主要集中在东部区域，可能设有伏击点。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部状态栏 -->
|
|
<div class="status-bar">
|
|
<div class="status-item"><i class="fas fa-wifi"></i> 连接状态: 正常</div>
|
|
<div class="status-item"><i class="fas fa-sync-alt"></i> 数据同步: 最新</div>
|
|
<div class="status-item"><i class="fas fa-clock"></i> 系统时间: 2023-11-15 14:30:45</div>
|
|
<div class="status-item"><i class="fas fa-microchip"></i> CPU: 35% 内存: 42%</div>
|
|
</div> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
// 初始化地图
|
|
const map = L.map('map').setView([39.9042, 116.4074], 14);
|
|
|
|
// 添加地图图层
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
// 添加设备标记
|
|
const droneIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: '<div style="background-color: #3B82F6; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;"><i class="fas fa-drone" style="color: white; font-size: 12px;"></i></div>',
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10]
|
|
});
|
|
|
|
const robotIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: '<div style="background-color: #10B981; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;"><i class="fas fa-robot" style="color: white; font-size: 12px;"></i></div>',
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10]
|
|
});
|
|
|
|
const enemyIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: '<div style="background-color: #EF4444; width: 16px; height: 16px; border-radius: 50%; border: 2px solid white;"></div>',
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10]
|
|
});
|
|
|
|
// 添加设备标记到地图
|
|
L.marker([39.9042, 116.4074], {icon: droneIcon}).addTo(map)
|
|
.bindPopup("<b>侦察机-01</b><br>状态: 正常<br>电量: 75%");
|
|
|
|
L.marker([39.9142, 116.4174], {icon: robotIcon}).addTo(map)
|
|
.bindPopup("<b>探测狗-02</b><br>状态: 正常<br>电量: 45%");
|
|
|
|
L.marker([39.9242, 116.3974], {icon: droneIcon}).addTo(map)
|
|
.bindPopup("<b>侦察机-03</b><br>状态: 低电量警告<br>电量: 15%");
|
|
|
|
// 添加敌军标记
|
|
L.marker([39.90, 116.42], {icon: enemyIcon}).addTo(map)
|
|
.bindPopup("<b>敌军步兵</b><br>数量: 约10人<br>最后更新: 5分钟前");
|
|
|
|
L.marker([39.92, 116.43], {icon: enemyIcon}).addTo(map)
|
|
.bindPopup("<b>装甲车辆</b><br>类型: 坦克x2<br>最后更新: 20分钟前");
|
|
|
|
L.marker([39.89, 116.39], {icon: enemyIcon}).addTo(map)
|
|
.bindPopup("<b>防空单位</b><br>状态: 活跃<br>最后更新: 35分钟前");
|
|
|
|
// 初始化敌情统计图表
|
|
const ctx = document.getElementById('enemyChart').getContext('2d');
|
|
const enemyChart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['步兵', '装甲车辆', '防空单位', '指挥中心', '未知'],
|
|
datasets: [{
|
|
data: [35, 15, 10, 5, 35],
|
|
backgroundColor: [
|
|
'#3B82F6',
|
|
'#10B981',
|
|
'#F59E0B',
|
|
'#EF4444',
|
|
'#9CA3AF'
|
|
],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
const label = context.label || '';
|
|
const value = context.raw || 0;
|
|
const total = context.dataset.data.reduce((a, b) => a + b, 0);
|
|
const percentage = Math.round((value / total) * 100);
|
|
return `${label}: ${value} (${percentage}%)`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
cutout: '70%'
|
|
}
|
|
});
|
|
|
|
// 标签页切换功能
|
|
document.querySelectorAll('.tab-btn').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
// 移除所有标签按钮的active类
|
|
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
|
// 给当前点击的按钮添加active类
|
|
button.classList.add('active');
|
|
|
|
// 获取目标标签页ID
|
|
const tabId = button.getAttribute('data-tab');
|
|
|
|
// 隐藏所有标签页内容
|
|
document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
|
|
// 显示目标标签页内容
|
|
document.getElementById(tabId).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// 子标签页切换功能
|
|
document.querySelectorAll('.sub-tab-btn').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
// 移除所有子标签按钮的active类
|
|
document.querySelectorAll('.sub-tab-btn').forEach(btn => btn.classList.remove('active'));
|
|
// 给当前点击的按钮添加active类
|
|
button.classList.add('active');
|
|
|
|
// 这里可以添加切换内容的逻辑
|
|
const isRobot = button.textContent === '机器狗';
|
|
const mapDisplay = document.querySelector('.map-display');
|
|
const controlButtons = document.querySelectorAll('.control-btn span');
|
|
|
|
if (isRobot) {
|
|
mapDisplay.innerHTML = '<i class="fas fa-map-marked-alt fa-2x"></i>';
|
|
controlButtons[0].textContent = '开始建图';
|
|
controlButtons[1].textContent = '暂停';
|
|
controlButtons[2].textContent = '保存';
|
|
} else {
|
|
mapDisplay.innerHTML = '<div class="camera-view"><div class="camera-placeholder"><i class="fas fa-video fa-2x"></i></div></div>';
|
|
controlButtons[0].textContent = '开始拍摄';
|
|
controlButtons[1].textContent = '暂停';
|
|
controlButtons[2].textContent = '分析';
|
|
}
|
|
});
|
|
});
|
|
|
|
// 通话按钮功能
|
|
const talkButton = document.getElementById('talkButton');
|
|
talkButton.addEventListener('mousedown', () => {
|
|
talkButton.classList.add('active');
|
|
talkButton.innerHTML = '<i class="fas fa-microphone-slash"></i>';
|
|
document.querySelector('.talk-control span').textContent = '正在录音...';
|
|
});
|
|
|
|
talkButton.addEventListener('mouseup', () => {
|
|
talkButton.classList.remove('active');
|
|
talkButton.innerHTML = '<i class="fas fa-microphone"></i>';
|
|
document.querySelector('.talk-control span').textContent = '按住说话';
|
|
});
|
|
|
|
talkButton.addEventListener('mouseleave', () => {
|
|
talkButton.classList.remove('active');
|
|
talkButton.innerHTML = '<i class="fas fa-microphone"></i>';
|
|
document.querySelector('.talk-control span').textContent = '按住说话';
|
|
});
|
|
|
|
// 地图图层切换
|
|
document.querySelectorAll('.layer-btn').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
document.querySelectorAll('.layer-btn').forEach(btn => btn.classList.remove('active'));
|
|
button.classList.add('active');
|
|
|
|
// 这里可以添加切换地图图层的逻辑
|
|
const layerType = button.textContent;
|
|
console.log(`切换到${layerType}图层`);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |