|
|
|
@ -1,9 +1,6 @@ |
|
|
|
<template> |
|
|
|
<!-- 以地图为绝对定位背景，所有组件浮动其上 --> |
|
|
|
<div class="mission-planning-container"> |
|
|
|
<!-- 地图背景 --> |
|
|
|
<div id="gis-map-background" class="map-background"> |
|
|
|
<!-- cesiummap组件 --> |
|
|
|
<cesiumMap :drawDomClick="drawDom"/> |
|
|
|
<div class="map-overlay-text"> |
|
|
|
<i class="el-icon-location-outline text-3xl mb-2 block"></i> |
|
|
|
@ -11,7 +8,6 @@ |
|
|
|
<p class="text-sm mt-1">支持标绘/航线/空域/实时态势</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 地图中间的浮动红点（触发左侧菜单） --> |
|
|
|
<div |
|
|
|
class="floating-red-dot left-red-dot" |
|
|
|
:class="{ hidden: !isMenuHidden }" |
|
|
|
@ -23,7 +19,6 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 顶部导航栏 --> |
|
|
|
<top-header |
|
|
|
:room-code="roomCode" |
|
|
|
:online-count="onlineCount" |
|
|
|
@ -71,7 +66,6 @@ |
|
|
|
@show-online-members="showOnlineMembersDialog" |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 左侧折叠菜单栏 - 蓝色主题 --> |
|
|
|
<left-menu |
|
|
|
:is-hidden="isMenuHidden" |
|
|
|
:menu-items="menuItems" |
|
|
|
@ -80,7 +74,6 @@ |
|
|
|
@select="selectMenu" |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 右侧实体列表（浮动）- 蓝色主题 --> |
|
|
|
<right-panel |
|
|
|
:is-hidden="isRightPanelHidden" |
|
|
|
:active-tab="activeRightTab" |
|
|
|
@ -94,6 +87,7 @@ |
|
|
|
:ground-platforms="groundPlatforms" |
|
|
|
@hide="hideRightPanel" |
|
|
|
@select-route="selectRoute" |
|
|
|
@create-route="createRoute" |
|
|
|
@open-route-dialog="openRouteDialog" |
|
|
|
@open-waypoint-dialog="openWaypointDialog" |
|
|
|
@add-waypoint="addWaypoint" |
|
|
|
@ -104,15 +98,12 @@ |
|
|
|
@open-platform-dialog="openPlatformDialog" |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 左下角工具面板 --> |
|
|
|
<bottom-left-panel /> |
|
|
|
|
|
|
|
<!-- 底部时间轴（最初版本的样式）- 蓝色主题 --> |
|
|
|
<div |
|
|
|
class="floating-timeline blue-theme" |
|
|
|
:class="{ 'show': showKTimePopup }" |
|
|
|
> |
|
|
|
<!-- 隐藏按钮（向下箭头） --> |
|
|
|
<div class="popup-hide-btn" @click="hideKTimePopup" title="隐藏K时"> |
|
|
|
<i class="el-icon-arrow-down"></i> |
|
|
|
</div> |
|
|
|
@ -166,26 +157,22 @@ |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 在线成员弹窗 --> |
|
|
|
<online-members-dialog |
|
|
|
v-model="showOnlineMembers" |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 平台编辑弹窗 --> |
|
|
|
<platform-edit-dialog |
|
|
|
v-model="showPlatformDialog" |
|
|
|
:platform="selectedPlatform" |
|
|
|
@save="updatePlatform" |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 航线编辑弹窗 --> |
|
|
|
<route-edit-dialog |
|
|
|
v-model="showRouteDialog" |
|
|
|
:route="selectedRoute" |
|
|
|
@save="updateRoute" |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 航点编辑弹窗 --> |
|
|
|
<waypoint-edit-dialog |
|
|
|
v-model="showWaypointDialog" |
|
|
|
:waypoint="selectedWaypoint" |
|
|
|
@ -348,9 +335,7 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 显示在线成员弹窗 |
|
|
|
showOnlineMembersDialog() { |
|
|
|
this.showOnlineMembers = true; |
|
|
|
}, |
|
|
|
|
|
|
|
// 平台编辑弹窗相关方法 |
|
|
|
openPlatformDialog(platform) { |
|
|
|
this.selectedPlatform = platform; |
|
|
|
@ -365,9 +350,25 @@ export default { |
|
|
|
this.selectedRoute = route; |
|
|
|
this.showRouteDialog = true; |
|
|
|
}, |
|
|
|
// 更新航线数据（修改后） |
|
|
|
updateRoute(updatedRoute) { |
|
|
|
// 这里可以添加实际的更新逻辑 |
|
|
|
this.$message.success('航线更新成功'); |
|
|
|
const index = this.routes.findIndex(r => r.id === updatedRoute.id); |
|
|
|
if (index !== -1) { |
|
|
|
// 使用 splice 触发响应式更新 |
|
|
|
const newRouteData = { ...this.routes[index], ...updatedRoute }; |
|
|
|
this.routes.splice(index, 1, newRouteData); |
|
|
|
|
|
|
|
// 如果当前选中的是这条航线，同步更新详情中的名称 |
|
|
|
if (this.selectedRouteDetails && this.selectedRouteId === updatedRoute.id) { |
|
|
|
this.selectedRouteDetails.name = updatedRoute.name; |
|
|
|
} |
|
|
|
|
|
|
|
this.$message.success('航线名称更新成功'); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 新建航线（占位） |
|
|
|
createRoute() { |
|
|
|
this.$message.info('新建航线功能开发中...'); |
|
|
|
}, |
|
|
|
// 航点编辑弹窗相关方法 |
|
|
|
openWaypointDialog(waypoint) { |
|
|
|
@ -375,8 +376,32 @@ export default { |
|
|
|
this.showWaypointDialog = true; |
|
|
|
}, |
|
|
|
updateWaypoint(updatedWaypoint) { |
|
|
|
// 这里可以添加实际的更新逻辑 |
|
|
|
this.$message.success('航点更新成功'); |
|
|
|
// 1. 检查是否有正在编辑的航线详情 |
|
|
|
if (this.selectedRouteDetails && this.selectedRouteDetails.waypoints) { |
|
|
|
|
|
|
|
// 2. 找到当前被编辑的这个航点在数组中的位置 |
|
|
|
const index = this.selectedRouteDetails.waypoints.indexOf(this.selectedWaypoint); |
|
|
|
|
|
|
|
if (index !== -1) { |
|
|
|
// 3. 使用 splice 方法替换数据 |
|
|
|
this.selectedRouteDetails.waypoints.splice(index, 1, updatedWaypoint); |
|
|
|
|
|
|
|
// 4. 更新当前的选中引用，以便连续编辑 |
|
|
|
this.selectedWaypoint = updatedWaypoint; |
|
|
|
|
|
|
|
this.$message.success('航点更新成功'); |
|
|
|
} else { |
|
|
|
// 如果用 indexOf 没找到，尝试用名字匹配兜底 |
|
|
|
const nameIndex = this.selectedRouteDetails.waypoints.findIndex(p => p.name === this.selectedWaypoint.name); |
|
|
|
if (nameIndex !== -1) { |
|
|
|
this.selectedRouteDetails.waypoints.splice(nameIndex, 1, updatedWaypoint); |
|
|
|
this.selectedWaypoint = updatedWaypoint; |
|
|
|
this.$message.success('航点更新成功'); |
|
|
|
} else { |
|
|
|
this.$message.error('更新失败：未找到对应航点'); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
updateTime() { |
|
|
|
const now = new Date(); |
|
|
|
@ -618,9 +643,9 @@ export default { |
|
|
|
this.isRightPanelHidden = false; |
|
|
|
} |
|
|
|
} else if(item.id === 'modify'){ |
|
|
|
this.drawDom = !this.drawDom |
|
|
|
console.log(this.drawDom,999999) |
|
|
|
} |
|
|
|
this.drawDom = !this.drawDom |
|
|
|
console.log(this.drawDom,999999) |
|
|
|
} |
|
|
|
if (item.id === 'deduction') { |
|
|
|
// 点击推演按钮，显示/隐藏K时弹出框 |
|
|
|
this.showKTimePopup = !this.showKTimePopup; |
|
|
|
@ -725,7 +750,7 @@ export default { |
|
|
|
return `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`; |
|
|
|
}, |
|
|
|
|
|
|
|
// 航线操作 |
|
|
|
// 航线操作：点击列表项只展示详情，不弹窗 |
|
|
|
selectRoute(route) { |
|
|
|
this.selectedRouteId = route.id; |
|
|
|
// 模拟获取航点数据 |
|
|
|
@ -738,8 +763,7 @@ export default { |
|
|
|
{ name: 'WP4', altitude: 5800, speed: '830km/h', eta: 'K+01:25:00' }, |
|
|
|
] |
|
|
|
}; |
|
|
|
// 打开航线编辑弹窗 |
|
|
|
this.openRouteDialog(route); |
|
|
|
// 移除原有的 this.openRouteDialog(route); |
|
|
|
}, |
|
|
|
|
|
|
|
addWaypoint() { |
|
|
|
@ -792,6 +816,7 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* 保持原有样式不变，仅修复背景图语法的注释部分 */ |
|
|
|
.mission-planning-container { |
|
|
|
position: relative; |
|
|
|
width: 100vw; |
|
|
|
@ -806,14 +831,13 @@ export default { |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: linear-gradient(135deg, #1a2f4b 0%, #2c3e50 100%); |
|
|
|
/* 正确的写法，直接复制这行替换 */ |
|
|
|
background: url('~@/assets/map-background.png'); |
|
|
|
/* 修复：使用正确的背景图语法 */ |
|
|
|
background: url('~@/assets/map-background.png'); |
|
|
|
background-size: cover; |
|
|
|
background-position: center; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
/* ...其余样式省略，保持不变... */ |
|
|
|
.map-overlay-text { |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
@ -825,7 +849,6 @@ background: url('~@/assets/map-background.png'); |
|
|
|
pointer-events: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* 地图中间的浮动红点 - 通用样式 */ |
|
|
|
.floating-red-dot { |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
@ -854,7 +877,6 @@ background: url('~@/assets/map-background.png'); |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* 左侧红点 */ |
|
|
|
.left-red-dot { |
|
|
|
left: 20px; |
|
|
|
transform: translateY(-50%); |
|
|
|
@ -886,7 +908,6 @@ background: url('~@/assets/map-background.png'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 蓝色主题通用类 */ |
|
|
|
.blue-theme { |
|
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
|
backdrop-filter: blur(10px); |
|
|
|
@ -951,7 +972,6 @@ background: url('~@/assets/map-background.png'); |
|
|
|
box-shadow: 0 0 10px rgba(0, 138, 255, 0.8); |
|
|
|
} |
|
|
|
|
|
|
|
/* 蓝色主题标签页 */ |
|
|
|
.blue-tabs >>> .el-tabs__item { |
|
|
|
color: #666; |
|
|
|
transition: all 0.3s; |
|
|
|
@ -975,7 +995,6 @@ background: url('~@/assets/map-background.png'); |
|
|
|
background-color: rgba(0, 138, 255, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
/* 底部时间轴（最初版本的样式）- 蓝色主题 */ |
|
|
|
.floating-timeline { |
|
|
|
position: absolute; |
|
|
|
bottom: 20px; |
|
|
|
@ -1146,7 +1165,6 @@ background: url('~@/assets/map-background.png'); |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
/* 滚动条样式 */ |
|
|
|
::-webkit-scrollbar { |
|
|
|
width: 6px; |
|
|
|
} |
|
|
|
|
