|
|
|
@ -106,6 +106,7 @@ |
|
|
|
|
|
|
|
<!-- 右侧实体列表（浮动）- 蓝色主题 --> |
|
|
|
<right-panel |
|
|
|
ref="rightPanel" |
|
|
|
:is-hidden="isRightPanelHidden" |
|
|
|
:active-tab="activeRightTab" |
|
|
|
:plans="plans" |
|
|
|
@ -123,14 +124,14 @@ |
|
|
|
@hide="hideRightPanel" |
|
|
|
@select-plan="selectPlan" |
|
|
|
@select-route="selectRoute" |
|
|
|
@create-plan="createPlan" |
|
|
|
@create-route="createRoute" |
|
|
|
@delete-route="handleDeleteRoute" |
|
|
|
@create-plan="createPlan" |
|
|
|
@open-plan-dialog="openPlanDialog" |
|
|
|
@open-route-dialog="openRouteDialog" |
|
|
|
@open-waypoint-dialog="openWaypointDialog" |
|
|
|
@add-waypoint="addWaypoint" |
|
|
|
@cancel-route="cancelRoute" |
|
|
|
@toggle-route-visibility="toggleRouteVisibility" |
|
|
|
@view-conflict="viewConflict" |
|
|
|
@resolve-conflict="resolveConflict" |
|
|
|
@run-conflict-check="runConflictCheck" |
|
|
|
@ -329,6 +330,8 @@ export default { |
|
|
|
// 方案-航线-航点数据 |
|
|
|
selectedPlanId: null, |
|
|
|
selectedPlanDetails: null, |
|
|
|
selectedRouteId: null, |
|
|
|
selectedRouteDetails: null, |
|
|
|
|
|
|
|
// 顶部导航菜单项（用于图标选择）- 只显示指定的菜单项 |
|
|
|
topNavItems: [ |
|
|
|
@ -391,7 +394,6 @@ export default { |
|
|
|
// 右侧面板 |
|
|
|
activeRightTab: 'plan', |
|
|
|
activeRouteIds: [], // 存储当前所有选中的航线ID |
|
|
|
selectedRouteDetails: null, |
|
|
|
|
|
|
|
// 冲突数据 |
|
|
|
conflictCount: 2, |
|
|
|
@ -439,18 +441,13 @@ export default { |
|
|
|
id: 1, |
|
|
|
name: '方案A', |
|
|
|
routes: [ |
|
|
|
{ id: 101, name: 'Alpha进场航线', points: 8, conflict: true }, |
|
|
|
{ id: 102, name: 'Beta巡逻航线', points: 6, conflict: false }, |
|
|
|
{ id: 103, name: '侦察覆盖区', points: 4, conflict: false }, |
|
|
|
] |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
name: '方案B', |
|
|
|
routes: [ |
|
|
|
{ id: 201, name: 'Gamma突击航线', points: 10, conflict: false }, |
|
|
|
{ id: 202, name: 'Delta支援航线', points: 5, conflict: true }, |
|
|
|
] |
|
|
|
] |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
@ -471,8 +468,6 @@ export default { |
|
|
|
this.isMenuHidden = true; |
|
|
|
// 初始化时右侧面板隐藏 |
|
|
|
this.isRightPanelHidden = true; |
|
|
|
// 初始化选中的方案 |
|
|
|
this.selectPlan(this.plans[0]); |
|
|
|
|
|
|
|
// 更新时间 |
|
|
|
this.updateTime(); |
|
|
|
@ -542,7 +537,13 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
// 新建航线 |
|
|
|
createRoute() { |
|
|
|
createRoute(plan) { |
|
|
|
// 保存当前选中的方案，用于后续新建航线时关联 |
|
|
|
if (plan) { |
|
|
|
this.selectedPlanId = plan.id; |
|
|
|
this.selectedPlanDetails = plan; |
|
|
|
} |
|
|
|
|
|
|
|
if (this.$refs.cesiumMap) { |
|
|
|
this.$refs.cesiumMap.startMissionRouteDrawing(); |
|
|
|
this.$message.success('进入航线规划模式'); |
|
|
|
@ -580,7 +581,7 @@ export default { |
|
|
|
}, |
|
|
|
/** 从数据库拉取最新的航线列表数据 */ |
|
|
|
async getList() { |
|
|
|
const query = { scenarioId: 1 }; |
|
|
|
const query = {}; // 移除固定的 scenarioId，获取所有航线 |
|
|
|
try { |
|
|
|
const response = await listRoutes(query); |
|
|
|
if (response.code === 200) { |
|
|
|
@ -588,7 +589,9 @@ export default { |
|
|
|
id: item.id, |
|
|
|
name: item.callSign, |
|
|
|
points: item.waypoints ? item.waypoints.length : 0, |
|
|
|
conflict: false |
|
|
|
waypoints: item.waypoints || [], |
|
|
|
conflict: false, |
|
|
|
scenarioId: item.scenarioId |
|
|
|
})); |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
@ -620,7 +623,7 @@ export default { |
|
|
|
// 构造符合后端 Routes 实体类的数据结构 |
|
|
|
const routeData = { |
|
|
|
callSign: this.newRouteName, |
|
|
|
scenarioId: currentScenarioId, |
|
|
|
scenarioId: currentScenarioId || 1, // 使用当前选中的方案ID，默认1 |
|
|
|
platformId: 1, |
|
|
|
attributes: "{}", |
|
|
|
waypoints: this.tempMapPoints.map((p, index) => ({ |
|
|
|
@ -741,9 +744,7 @@ export default { |
|
|
|
this.isMenuHidden = true; |
|
|
|
}, |
|
|
|
|
|
|
|
selectTopNav(item) { |
|
|
|
console.log('选中顶部导航:', item); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 右侧面板操作 |
|
|
|
showRightPanel() { |
|
|
|
@ -751,6 +752,11 @@ export default { |
|
|
|
this.$message.info('显示右侧面板'); |
|
|
|
}, |
|
|
|
|
|
|
|
// 顶部导航栏操作 |
|
|
|
selectTopNav(item) { |
|
|
|
this.activeMenu = item.id; |
|
|
|
}, |
|
|
|
|
|
|
|
// 文件下拉菜单方法 |
|
|
|
savePlan() { |
|
|
|
this.$message.success('保存计划'); |
|
|
|
@ -758,35 +764,43 @@ export default { |
|
|
|
|
|
|
|
importPlanFile() { |
|
|
|
this.$message.success('导入计划'); |
|
|
|
// 这里可以添加导入计划文件的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
importACD() { |
|
|
|
this.$message.success('导入ACD'); |
|
|
|
// 这里可以添加导入ACD文件的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
importATO() { |
|
|
|
this.$message.success('导入ATO'); |
|
|
|
// 这里可以添加导入ATO文件的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
importLayer() { |
|
|
|
this.$message.success('导入图层'); |
|
|
|
// 这里可以添加导入图层的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
importRoute() { |
|
|
|
this.$message.success('导入航线'); |
|
|
|
// 这里可以添加导入航线的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
exportPlan() { |
|
|
|
this.$message.success('导出计划'); |
|
|
|
// 这里可以添加导出计划的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
// 编辑下拉菜单方法 |
|
|
|
routeEdit() { |
|
|
|
this.$message.success('航线编辑'); |
|
|
|
// 这里可以添加航线编辑的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
militaryMarking() { |
|
|
|
this.$message.success('军事标绘'); |
|
|
|
// 这里可以添加军事标绘的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
iconEdit() { |
|
|
|
@ -879,31 +893,38 @@ export default { |
|
|
|
|
|
|
|
timeSettings() { |
|
|
|
this.$message.success('时间设置'); |
|
|
|
// 这里可以添加时间设置的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
aircraftSettings() { |
|
|
|
this.$message.success('机型设置'); |
|
|
|
// 这里可以添加机型设置的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
keyEventEdit() { |
|
|
|
this.$message.success('关键事件编辑'); |
|
|
|
// 这里可以添加关键事件编辑的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
missileLaunch() { |
|
|
|
this.$message.success('导弹发射'); |
|
|
|
// 这里可以添加导弹发射的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
// 视图下拉菜单方法 |
|
|
|
toggle2D3D() { |
|
|
|
this.$message.success('2D/3D切换'); |
|
|
|
// 这里可以添加2D/3D切换的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
toggleRuler() { |
|
|
|
this.$message.success('显示/隐藏标尺'); |
|
|
|
// 这里可以添加标尺显示/隐藏的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
toggleGrid() { |
|
|
|
this.$message.success('显示/隐藏网格'); |
|
|
|
// 这里可以添加网格显示/隐藏的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
saveScale(scale) { |
|
|
|
@ -915,10 +936,12 @@ export default { |
|
|
|
// 地图下拉菜单方法 |
|
|
|
loadTerrain() { |
|
|
|
this.$message.success('加载/切换地形'); |
|
|
|
// 这里可以添加地形加载/切换的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
changeProjection() { |
|
|
|
this.$message.success('投影'); |
|
|
|
// 这里可以添加投影切换的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
loadAeroChart() { |
|
|
|
@ -938,18 +961,22 @@ export default { |
|
|
|
// 工具下拉菜单方法 |
|
|
|
routeCalculation() { |
|
|
|
this.$message.success('航线计算'); |
|
|
|
// 这里可以添加航线计算的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
conflictDisplay() { |
|
|
|
this.$message.success('冲突显示'); |
|
|
|
// 这里可以添加冲突显示的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
dataMaterials() { |
|
|
|
this.$message.success('数据资料'); |
|
|
|
// 这里可以添加数据资料管理的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
coordinateConversion() { |
|
|
|
this.$message.success('坐标换算'); |
|
|
|
// 这里可以添加坐标换算的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
// 选项下拉菜单方法 |
|
|
|
@ -1013,17 +1040,20 @@ export default { |
|
|
|
|
|
|
|
systemDescription() { |
|
|
|
this.$message.success('系统说明'); |
|
|
|
// 这里可以添加系统说明的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
// 收藏下拉菜单方法 |
|
|
|
layerFavorites() { |
|
|
|
this.$message.success('图层收藏'); |
|
|
|
// 这里可以添加图层收藏的逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
routeFavorites() { |
|
|
|
this.$message.success('航线收藏'); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
hideRightPanel() { |
|
|
|
this.isRightPanelHidden = true; |
|
|
|
this.$message.info('隐藏右侧面板'); |
|
|
|
@ -1035,6 +1065,11 @@ export default { |
|
|
|
this.handleMenuAction(item.action) |
|
|
|
} |
|
|
|
|
|
|
|
// 点击方案、平台、冲突等菜单项时，停止地图绘制状态 |
|
|
|
if (item.id === 'file' || item.id === 'start' || item.id === 'insert') { |
|
|
|
this.drawDom = false; |
|
|
|
} |
|
|
|
|
|
|
|
// 点击左侧的方案、冲突、平台时，切换右侧面板内容 |
|
|
|
if (item.id === 'file') { |
|
|
|
// 如果当前已经是方案标签页，则关闭右侧面板 |
|
|
|
@ -1062,14 +1097,19 @@ export default { |
|
|
|
} |
|
|
|
} else if(item.id === 'modify'){ |
|
|
|
this.drawDom = !this.drawDom |
|
|
|
// 点击修改图标进行地图绘制时，自动收起右侧面板 |
|
|
|
this.isRightPanelHidden = true; |
|
|
|
console.log(this.drawDom,999999) |
|
|
|
} |
|
|
|
if (item.id === 'deduction') { |
|
|
|
} else if (item.id === 'deduction') { |
|
|
|
// 点击推演按钮，显示/隐藏K时弹出框 |
|
|
|
this.showKTimePopup = !this.showKTimePopup; |
|
|
|
} |
|
|
|
if (item.id === 'save') { |
|
|
|
this.savePlan(); |
|
|
|
// 点击推演时，也停止地图绘制状态 |
|
|
|
this.drawDom = false; |
|
|
|
} else { |
|
|
|
// 点击其他菜单项时，也自动收起右侧面板 |
|
|
|
this.isRightPanelHidden = true; |
|
|
|
// 点击其他菜单项时，也停止地图绘制状态 |
|
|
|
this.drawDom = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@ -1161,49 +1201,83 @@ export default { |
|
|
|
const minutes = (val % 4) * 15; |
|
|
|
return `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`; |
|
|
|
}, |
|
|
|
// 航线操作 |
|
|
|
selectPlan(plan) { |
|
|
|
if (plan && plan.id) { |
|
|
|
this.selectedPlanId = plan.id; |
|
|
|
this.selectedPlanDetails = plan; |
|
|
|
} else { |
|
|
|
this.selectedPlanId = null; |
|
|
|
this.selectedPlanDetails = null; |
|
|
|
} |
|
|
|
this.selectedRouteId = null; |
|
|
|
this.selectedRouteDetails = null; |
|
|
|
}, |
|
|
|
/** 切换航线：实现多选/开关逻辑 */ |
|
|
|
async selectRoute(route) { |
|
|
|
const index = this.activeRouteIds.indexOf(route.id); |
|
|
|
const isRouteExpanded = this.$refs.rightPanel ? this.$refs.rightPanel.expandedRoutes.includes(route.id) : false; |
|
|
|
// 航线已在选中列表中 |
|
|
|
if (index > -1) { |
|
|
|
this.activeRouteIds.splice(index, 1); |
|
|
|
if (this.$refs.cesiumMap) { |
|
|
|
this.$refs.cesiumMap.removeRouteById(route.id); |
|
|
|
} |
|
|
|
if (this.selectedRouteDetails && this.selectedRouteDetails.id === route.id) { |
|
|
|
if (this.activeRouteIds.length > 0) { |
|
|
|
const lastId = this.activeRouteIds[this.activeRouteIds.length - 1]; |
|
|
|
try { |
|
|
|
const res = await getRoutes(lastId); |
|
|
|
if (res.code === 200 && res.data) { |
|
|
|
this.selectedRouteDetails = { |
|
|
|
id: res.data.id, |
|
|
|
name: res.data.callSign, |
|
|
|
waypoints: res.data.waypoints || [] |
|
|
|
}; |
|
|
|
if (isRouteExpanded) { |
|
|
|
// 航线已展开，点击则收回航点（不取消选中） |
|
|
|
// 这个逻辑在 RightPanel 的 toggleRoute 中处理 |
|
|
|
return; |
|
|
|
} else { |
|
|
|
// 航线未展开，点击则取消选中（从地图移除） |
|
|
|
this.activeRouteIds.splice(index, 1); |
|
|
|
if (this.$refs.cesiumMap) { |
|
|
|
this.$refs.cesiumMap.removeRouteById(route.id); |
|
|
|
} |
|
|
|
if (this.selectedRouteDetails && this.selectedRouteDetails.id === route.id) { |
|
|
|
if (this.activeRouteIds.length > 0) { |
|
|
|
const lastId = this.activeRouteIds[this.activeRouteIds.length - 1]; |
|
|
|
try { |
|
|
|
const res = await getRoutes(lastId); |
|
|
|
if (res.code === 200 && res.data) { |
|
|
|
this.selectedRouteId = res.data.id; |
|
|
|
this.selectedRouteDetails = { |
|
|
|
id: res.data.id, |
|
|
|
name: res.data.callSign, |
|
|
|
waypoints: res.data.waypoints || [] |
|
|
|
}; |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.error("回显剩余航线失败", e); |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.error("回显剩余航线失败", e); |
|
|
|
} else { |
|
|
|
this.selectedRouteId = null; |
|
|
|
this.selectedRouteDetails = null; |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.selectedRouteDetails = null; |
|
|
|
} |
|
|
|
this.$message.info(`已取消航线: ${route.name}`); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.$message.info(`已移除航线: ${route.name}`); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 航线未被选中 |
|
|
|
|
|
|
|
// 航线未被选中，点击则选中并显示航线和航点 |
|
|
|
try { |
|
|
|
const response = await getRoutes(route.id); |
|
|
|
if (response.code === 200 && response.data) { |
|
|
|
const fullRouteData = response.data; |
|
|
|
const waypoints = fullRouteData.waypoints || []; |
|
|
|
this.activeRouteIds.push(route.id); |
|
|
|
this.selectedRouteId = fullRouteData.id; |
|
|
|
this.selectedRouteDetails = { |
|
|
|
id: fullRouteData.id, |
|
|
|
name: fullRouteData.callSign, |
|
|
|
waypoints: waypoints |
|
|
|
}; |
|
|
|
|
|
|
|
// 更新 routes 数组中对应航线的 waypoints 字段 |
|
|
|
const routeIndex = this.routes.findIndex(r => r.id === route.id); |
|
|
|
if (routeIndex > -1) { |
|
|
|
this.$set(this.routes, routeIndex, { |
|
|
|
...this.routes[routeIndex], |
|
|
|
waypoints: waypoints |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if (waypoints.length > 0) { |
|
|
|
// 通知地图渲染 |
|
|
|
if (this.$refs.cesiumMap) { |
|
|
|
@ -1218,13 +1292,7 @@ export default { |
|
|
|
this.$message.error('无法加载该航线的详细航点数据'); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 航线操作 |
|
|
|
selectPlan(plan) { |
|
|
|
this.selectedPlanId = plan.id; |
|
|
|
this.selectedPlanDetails = plan; |
|
|
|
this.selectedRouteId = null; |
|
|
|
this.selectedRouteDetails = null; |
|
|
|
}, |
|
|
|
|
|
|
|
createPlan() { |
|
|
|
const newId = Date.now(); |
|
|
|
const newPlan = { |
|
|
|
@ -1249,8 +1317,9 @@ export default { |
|
|
|
const count = this.selectedRouteDetails.waypoints.length + 1; |
|
|
|
this.selectedRouteDetails.waypoints.push({ |
|
|
|
name: `WP${count}`, |
|
|
|
altitude: 1000, |
|
|
|
speed: 250 |
|
|
|
altitude: 5000, |
|
|
|
speed: '800km/h', |
|
|
|
eta: `K+01:${(count * 15).toString().padStart(2, '0')}:00` |
|
|
|
}); |
|
|
|
if (this.selectedPlanDetails) { |
|
|
|
const route = this.selectedPlanDetails.routes.find(r => r.id === this.selectedRouteId); |
|
|
|
@ -1273,6 +1342,44 @@ export default { |
|
|
|
this.$message.info('已清空所有选中航线'); |
|
|
|
}, |
|
|
|
|
|
|
|
// 切换航线显示/隐藏 |
|
|
|
toggleRouteVisibility(route) { |
|
|
|
const index = this.activeRouteIds.indexOf(route.id); |
|
|
|
|
|
|
|
if (index > -1) { |
|
|
|
// 航线已显示，隐藏它 |
|
|
|
// 使用过滤创建新数组，确保 Vue 能够检测到变化 |
|
|
|
this.activeRouteIds = this.activeRouteIds.filter(id => id !== route.id); |
|
|
|
if (this.$refs.cesiumMap) { |
|
|
|
this.$refs.cesiumMap.removeRouteById(route.id); |
|
|
|
} |
|
|
|
if (this.selectedRouteDetails && this.selectedRouteDetails.id === route.id) { |
|
|
|
if (this.activeRouteIds.length > 0) { |
|
|
|
const lastId = this.activeRouteIds[this.activeRouteIds.length - 1]; |
|
|
|
getRoutes(lastId).then(res => { |
|
|
|
if (res.code === 200 && res.data) { |
|
|
|
this.selectedRouteId = res.data.id; |
|
|
|
this.selectedRouteDetails = { |
|
|
|
id: res.data.id, |
|
|
|
name: res.data.callSign, |
|
|
|
waypoints: res.data.waypoints || [] |
|
|
|
}; |
|
|
|
} |
|
|
|
}).catch(e => { |
|
|
|
console.error("获取航线详情失败", e); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.selectedRouteId = null; |
|
|
|
this.selectedRouteDetails = null; |
|
|
|
} |
|
|
|
} |
|
|
|
this.$message.info(`已隐藏航线: ${route.name}`); |
|
|
|
} else { |
|
|
|
// 航线已隐藏，显示它 |
|
|
|
this.selectRoute(route); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 冲突操作 |
|
|
|
runConflictCheck() { |
|
|
|
this.conflictCount = 2; |
|
|
|
@ -1304,7 +1411,6 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* 保持原有样式不变，仅修复背景图语法的注释部分 */ |
|
|
|
.mission-planning-container { |
|
|
|
position: relative; |
|
|
|
width: 100vw; |
|
|
|
@ -1326,7 +1432,7 @@ export default { |
|
|
|
background-position: center; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
/* ...其余样式省略，保持不变... */ |
|
|
|
.map-overlay-text { |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
@ -1464,6 +1570,7 @@ export default { |
|
|
|
box-shadow: 0 0 10px rgba(0, 138, 255, 0.8); |
|
|
|
} |
|
|
|
|
|
|
|
/* 蓝色主题标签页 */ |
|
|
|
.blue-tabs >>> .el-tabs__item { |
|
|
|
color: #666; |
|
|
|
transition: all 0.3s; |
|
|
|
|
