chiyu1468/AirTrapMine
2
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 多任務群組系統 — 四欄式面板、地圖框選分配、可調參數

Browse Source 
- 新增 mission_group.py：MissionGroup 資料結構、DroneAssignDialog、GroupPanel
- GroupPanel 四欄式佈局：控制指令 / 任務規劃 / 任務參數 / 選取與分組
- 任務參數欄依任務類型動態切換（間距、高度、偏移量等），規劃時從 UI 讀值
- 框選/全選可直接分配無人機到群組，清除分組一鍵重置
- 地圖清理：移除右下角 overlay，功能整合至 GroupPanel
- 修復 JS clearSelectionMode 引用已移除元素導致框選/Grid Sweep 失效
- 每群組獨立 MissionExecutor，共用 MavlinkSender

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
wenchun
2026-04-01 18:15:49 +08:00
co-authored by Claude Opus 4.6
parent 693a55c289
commit c2196153ff
4 changed files with 1104 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/GUI/map_layout.py
+128 -149
View File
@@ -178,35 +178,8 @@ class DroneMap:
</head>
<body>
<div id="map"></div>
<div class="map-controls">
<button class="selection-button" onclick="clearAllTrajectories()">清除軌跡</button>
<div style="border-top: 1px solid #ddd; padding-top: 5px; margin-top: 5px;">
<label style="font-size: 12px; color: #555; font-weight: bold;">任務模式</label>
<select id="mission-mode-select" onchange="onMissionModeChanged(this.value)" style="width: 100%; padding: 6px; border-radius: 4px; border: 1px solid #ccc; font-size: 12px; margin-top: 3px;">
<option value="M_FORMATION">列隊飛行</option>
<option value="CIRCLE_FORMATION">環狀包圍</option>
<option value="LEADER_FOLLOWER">跟隨模式</option>
<option value="GRID_SWEEP">柵狀偵查</option>
</select>
</div>
<button class="confirm-route-button" id="confirm-route-btn" onclick="confirmRoute()" style="display: none;">確認路徑</button>
<button class="selection-button" id="select-polygon-btn" onclick="togglePolygonSelection()">多點選擇區域 (開發中)</button>
</div>
<div class="mission-info-panel">
<div class="selection-buttons">
<button class="selection-button-blue" onclick="toggleSelectAllDrones()">全選無人機</button>
<button class="selection-button-blue" id="select-drones-btn" onclick="toggleDroneSelection()">框選無人機</button>
</div>
<div class="mission-info-row">
<span class="mission-info-label">中心點: </span>
<span class="mission-info-value" id="center-position">未設定</span>
</div>
<div class="mission-info-row">
<span class="mission-info-label">目標點: </span>
<span class="mission-info-value" id="target-position">未設定</span>
</div>
<button class="mission-start-button" id="start-mission-btn" onclick="startMission()" disabled>開始任務</button>
<button class="mission-start-button" id="pause-mission-btn" onclick="pauseMission()">暫停任務</button>
<div class="map-controls" id="map-controls-panel" style="display: none;">
<button class="confirm-route-button" id="confirm-route-btn" onclick="confirmRoute()">確認路徑</button>
</div>
<script>
@@ -374,6 +347,9 @@ class DroneMap:
var missionLine = null;
var centerPosition = null;
var targetPosition = null;
// 多群組任務規劃 — 每個 group 各自的 layer group
var groupMissionLayers = {}; // group_id → L.layerGroup
// 選擇工具變量
var selectionMode = null; // 'drones', 'rect', 'polygon', 'route', null
@@ -393,30 +369,8 @@ class DroneMap:
var routeLayer = L.layerGroup().addTo(map);
// ================================================================================
// 更新任務信息面板
function updateMissionInfo() {
const centerElem = document.getElementById('center-position');
const targetElem = document.getElementById('target-position');
const startBtn = document.getElementById('start-mission-btn');
if (centerPosition) {
centerElem.textContent = `${centerPosition.lat.toFixed(6)}°, ${centerPosition.lng.toFixed(6)}°`;
} else {
centerElem.textContent = '未設定';
}
if (targetPosition) {
targetElem.textContent = `${targetPosition.lat.toFixed(6)}°, ${targetPosition.lng.toFixed(6)}°`;
} else {
targetElem.textContent = '未設定';
}
if (centerPosition && targetPosition) {
startBtn.disabled = false;
} else {
startBtn.disabled = true;
}
}
// 任務信息已移至 GroupPanel 顯示
function updateMissionInfo() {}
// ================================================================================
// 選擇工具函數
@@ -429,14 +383,14 @@ class DroneMap:
}
function toggleDroneSelection() {
clearSelectionMode();
if (selectionMode === 'drones') {
selectionMode = null;
document.getElementById('select-drones-btn').classList.remove('active');
selectionLayer.clearLayers();
tempRectangle = null;
map.dragging.enable();
} else {
clearSelectionMode();
selectionMode = 'drones';
document.getElementById('select-drones-btn').classList.add('active');
map.dragging.disable();
}
}
@@ -450,7 +404,7 @@ class DroneMap:
clearSelectionMode();
clearPolygonPoints();
selectionMode = null;
document.getElementById('select-polygon-btn').classList.remove('active');
// select-polygon-btn removed from map overlay
}
} else {
clearSelectionMode();
@@ -462,17 +416,12 @@ class DroneMap:
}
function clearSelectionMode() {
document.getElementById('select-drones-btn').classList.remove('active');
document.getElementById('select-polygon-btn').classList.remove('active');
selectionLayer.clearLayers();
tempRectangle = null;
// 不清除 routeLayer（由 clearRoutePoints 單獨管理）
map.dragging.enable();
// 如果離開 route 模式，重置 selectionMode
if (selectionMode !== 'route') {
selectionMode = null;
}
@@ -527,7 +476,7 @@ class DroneMap:
}
selectionMode = null;
document.getElementById('select-polygon-btn').classList.remove('active');
// select-polygon-btn removed from map overlay
map.dragging.enable();
}
@@ -554,6 +503,10 @@ class DroneMap:
}
});
console.log('框選無人機:', selectedDrones);
// 通知 Python 完整的框選結果
if (bridge && selectedDrones.length > 0) {
bridge.droneBoxSelected(JSON.stringify(selectedDrones));
}
} else if (selectionMode === 'rect') {
var rectPoints = [
@@ -588,18 +541,7 @@ class DroneMap:
// 重置狀態
selectionMode = null;
document.getElementById('select-drones-btn').classList.remove('active');
map.dragging.enable();
// 如果仍在 Grid Sweep 模式，重新進入框選
var currentMode = document.getElementById('mission-mode-select').value;
if (currentMode === 'GRID_SWEEP') {
setTimeout(function() {
selectionMode = 'rect';
map.dragging.disable();
console.log('Grid Sweep: 重新進入框選模式');
}, 500);
}
}
// ================================================================================
@@ -708,19 +650,19 @@ class DroneMap:
selectionMode = null;
clearSelectionMode();
clearRoutePoints();
// 隱藏確認路徑按鈕
document.getElementById('confirm-route-btn').style.display = 'none';
// 預設隱藏控制面板
document.getElementById('map-controls-panel').style.display = 'none';
if (mode === 'GRID_SWEEP') {
// 自動進入框選模式
selectionMode = 'rect';
map.dragging.disable();
console.log('Grid Sweep: 進入框選模式');
} else if (mode === 'LEADER_FOLLOWER') {
// 進入路徑標記模式
// 進入路徑標記模式 + 顯示確認路徑按鈕
selectionMode = 'route';
document.getElementById('confirm-route-btn').style.display = 'block';
document.getElementById('map-controls-panel').style.display = 'flex';
console.log('跟隨模式: 進入路徑標記模式，點擊地圖添加路徑點');
}
@@ -839,76 +781,74 @@ class DroneMap:
// 任務規劃視覺化函式
// ================================================================================
function drawMissionPlan(centerLat, centerLon, targetLat, targetLon) {
clearMissionPlan();
drawMissionPlanForGroup('_default', '#FF4444', centerLat, centerLon, targetLat, targetLon);
}
function drawMissionPlanForGroup(groupId, color, centerLat, centerLon, targetLat, targetLon) {
clearMissionPlanForGroup(groupId);
centerPosition = {lat: centerLat, lng: centerLon};
targetPosition = {lat: targetLat, lng: targetLon};
updateMissionInfo();
var layerGroup = L.layerGroup().addTo(map);
groupMissionLayers[groupId] = layerGroup;
var centerIcon = L.divIcon({
className: 'mission-center',
html: `<div style="
background-color: #FF4444;
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 12px;
border: 2px solid white;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
">C</div>`,
iconSize: [20, 20],
iconAnchor: [10, 10]
html: '<div style="' +
'background-color: ' + color + ';' +
'color: white;' +
'width: 22px; height: 22px;' +
'border-radius: 50%;' +
'display: flex; align-items: center; justify-content: center;' +
'font-weight: bold; font-size: 10px;' +
'border: 2px solid white;' +
'box-shadow: 0 2px 5px rgba(0,0,0,0.3);' +
'">' + groupId + '</div>',
iconSize: [22, 22],
iconAnchor: [11, 11]
});
centerMarker = L.marker([centerLat, centerLon], {
icon: centerIcon,
zIndexOffset: 2000
}).addTo(missionPlanGroup);
L.marker([centerLat, centerLon], {
icon: centerIcon, zIndexOffset: 2000
}).addTo(layerGroup);
var targetIcon = L.divIcon({
className: 'mission-target',
html: `<div style="
background-color: #FFD700;
color: #FF4444;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
border: 2px solid white;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
">★</div>`,
iconSize: [20, 20],
iconAnchor: [10, 10]
html: '<div style="' +
'background-color: #FFD700;' +
'color: ' + color + ';' +
'width: 22px; height: 22px;' +
'border-radius: 50%;' +
'display: flex; align-items: center; justify-content: center;' +
'font-weight: bold; font-size: 14px;' +
'border: 2px solid white;' +
'box-shadow: 0 2px 5px rgba(0,0,0,0.3);' +
'">★</div>',
iconSize: [22, 22],
iconAnchor: [11, 11]
});
targetMarker = L.marker([targetLat, targetLon], {
icon: targetIcon,
zIndexOffset: 2000
}).addTo(missionPlanGroup);
console.log('任務規劃已繪製: C(' + centerLat + ', ' + centerLon + ') -> T(' + targetLat + ', ' + targetLon + ')');
L.marker([targetLat, targetLon], {
icon: targetIcon, zIndexOffset: 2000
}).addTo(layerGroup);
console.log('Group ' + groupId + ' 任務規劃已繪製');
}
function clearMissionPlan() {
if (centerMarker) {
missionPlanGroup.removeLayer(centerMarker);
centerMarker = null;
function clearMissionPlanForGroup(groupId) {
if (groupMissionLayers[groupId]) {
map.removeLayer(groupMissionLayers[groupId]);
delete groupMissionLayers[groupId];
}
if (targetMarker) {
missionPlanGroup.removeLayer(targetMarker);
targetMarker = null;
}
function clearAllMissionPlans() {
for (var gid in groupMissionLayers) {
map.removeLayer(groupMissionLayers[gid]);
}
groupMissionLayers = {};
centerPosition = null;
targetPosition = null;
updateMissionInfo();
@@ -969,17 +909,45 @@ class DroneMap:
# 任務規劃視覺化方法
# ================================================================================
def draw_mission_plan(self, center_lat, center_lon, target_lat, target_lon):
"""在地圖上繪製任務規劃"""
"""在地圖上繪製任務規劃（舊介面，相容用）"""
self.draw_mission_plan_for_group('_default', '#FF4444',
center_lat, center_lon, target_lat, target_lon)
def draw_mission_plan_for_group(self, group_id, color,
center_lat, center_lon, target_lat, target_lon):
"""在地圖上繪製指定群組的任務規劃（帶顏色區分）"""
if self.map_loaded:
js_code = f"drawMissionPlan({center_lat:.6f}, {center_lon:.6f}, {target_lat:.6f}, {target_lon:.6f});"
js_code = (
f"drawMissionPlanForGroup("
f"'{group_id}', '{color}', "
f"{center_lat:.6f}, {center_lon:.6f}, "
f"{target_lat:.6f}, {target_lon:.6f});"
)
self.map_view.page().runJavaScript(js_code)
print(f"📍 地圖已繪製任務規劃: C({center_lat:.6f}, {center_lon:.6f}) -> T({target_lat:.6f}, {target_lon:.6f})")
print(f"📍 地圖已繪製 Group {group_id} 任務規劃: "
f"C({center_lat:.6f}, {center_lon:.6f}) -> T({target_lat:.6f}, {target_lon:.6f})")
def clear_mission_plan(self):
"""清除地圖上的任務規劃標記"""
"""清除地圖上所有任務規劃標記"""
if self.map_loaded:
self.map_view.page().runJavaScript("clearMissionPlan();")
print("🗑️ 地圖已清除任務規劃")
self.map_view.page().runJavaScript("clearAllMissionPlans();")
print("🗑️ 地圖已清除所有任務規劃")
def clear_mission_plan_for_group(self, group_id):
"""清除指定群組的任務規劃標記"""
if self.map_loaded:
self.map_view.page().runJavaScript(f"clearMissionPlanForGroup('{group_id}');")
print(f"🗑️ 地圖已清除 Group {group_id} 任務規劃")
def set_mission_mode(self, mode):
"""從 Python 端切換地圖的任務模式（觸發框選/路徑標記等）"""
if self.map_loaded:
self.map_view.page().runJavaScript(f"onMissionModeChanged('{mode}');")
def toggle_drone_box_select(self):
"""切換地圖上的無人機框選模式"""
if self.map_loaded:
self.map_view.page().runJavaScript("toggleDroneSelection();")
# ================================================================================
def get_widget(self):
@@ -1029,6 +997,10 @@ class DroneMap:
def get_route_confirmed_signal(self):
"""獲取路徑確認信號"""
return self.bridge.route_confirmed
def get_drone_box_selected_signal(self):
"""獲取框選無人機完成信號"""
return self.bridge.drone_box_selected
class MapBridge(QObject):
"""JavaScript 和 Python 之間的橋接類"""
@@ -1042,7 +1014,8 @@ class MapBridge(QObject):
polygon_selected = pyqtSignal(str)
mission_mode_changed = pyqtSignal(str)
route_confirmed = pyqtSignal(str) # 路徑確認 (JSON 字串)
drone_box_selected = pyqtSignal(str) # 框選無人機完成 (JSON 字串)
def __init__(self):
super().__init__()
@@ -1102,4 +1075,10 @@ class MapBridge(QObject):
def routeConfirmed(self, points_json):
"""供 JavaScript 調用的方法 - 路徑確認"""
self.route_confirmed.emit(points_json)
print(f"📍 路徑已確認: {points_json}")
print(f"📍 路徑已確認: {points_json}")
@pyqtSlot(str)
def droneBoxSelected(self, drone_ids_json):
"""供 JavaScript 調用的方法 - 框選無人機完成"""
self.drone_box_selected.emit(drone_ids_json)
print(f"📦 框選無人機: {drone_ids_json}")