diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue index 6694a8e..accb965 100644 --- a/ruoyi-ui/src/views/childRoom/index.vue +++ b/ruoyi-ui/src/views/childRoom/index.vue @@ -1,13 +1,102 @@ @@ -187,10 +508,9 @@ import OnlineMembersDialog from '@/views/dialogs/OnlineMembersDialog' import PlatformEditDialog from '@/views/dialogs/PlatformEditDialog' import RouteEditDialog from '@/views/dialogs/RouteEditDialog' import WaypointEditDialog from '@/views/dialogs/WaypointEditDialog' -import LeftMenu from './LeftMenu' +import LeftMenu from './LeftMenu.vue' import RightPanel from './RightPanel' import BottomLeftPanel from './BottomLeftPanel' -import TopHeader from './TopHeader' export default { name: 'MissionPlanningView', components: { @@ -201,8 +521,7 @@ export default { WaypointEditDialog, LeftMenu, RightPanel, - BottomLeftPanel, - TopHeader + BottomLeftPanel }, data() { return { @@ -214,8 +533,48 @@ export default { selectedPlatform: null, showRouteDialog: false, selectedRoute: null, - showWaypointDialog: false, selectedWaypoint: null, + //航线绘制相关数据 + isDrawing: false, // 是否处于地图绘制模式 + showCreateRouteDialog: false, // 是否显示"新建航线"弹窗 + showWaypointDialog: false, // 是否显示"航点信息"弹窗 + + // 暂存正在创建的航线对象 + pendingRoute: { + id: null, + name: '', + startTime: '', + points: [] + }, + // 暂存当前点击地图生成的临时航点坐标 + tempClickPosition: null, + + // 航点表单数据 + waypointForm: { + name: '', + altitude: 0, + speed: 0, + time: '', + radius: 0 + }, + + // 航点表单校验规则（可选） + waypointRules: { + name: [{ required: true, message: '请输入名称', trigger: 'blur' }], + altitude: [{ required: true, message: '请输入高度', trigger: 'blur' }] + }, + // 顶部导航 + activeTopNav: 'file', + topNavItems: [ + { id: 'file', name: '文件', icon: 'el-icon-document' }, + { id: 'edit', name: '编辑', icon: 'el-icon-edit' }, + { id: 'view', name: '视图', icon: 'el-icon-view' }, + { id: 'map', name: '地图', icon: 'el-icon-map-location' }, + { id: 'airspace', name: '空域', icon: 'el-icon-s-grid' }, + { id: 'tools', name: '工具', icon: 'el-icon-setting' }, + { id: 'options', name: '选项', icon: 'el-icon-s-tools' }, + { id: 'favorites', name: '收藏', icon: 'el-icon-star-on' } + ], // 作战信息 roomCode: 'JTF-7-ALPHA', @@ -226,6 +585,8 @@ export default { // 左侧菜单栏 isMenuHidden: true, // 是否完全隐藏左侧菜单 activeMenu: 'file', + hoverMenu: '', + showMenuTooltip: false, // 右侧面板控制 isRightPanelHidden: true, // 是否完全隐藏右侧面板 @@ -233,11 +594,6 @@ export default { // K时弹出框控制 showKTimePopup: false, - // 显示/隐藏控制 - showAirport: true, - showLandmark: true, - showRoute: true, - menuItems: [ { id: 'file', name: '方案', icon: 'el-icon-s-operation' }, { id: 'start', name: '冲突', icon: 'el-icon-warning-outline' }, @@ -334,8 +690,89 @@ export default { } }, methods: { - // 显示在线成员弹窗 +// 添加新航线 + addRoute() { + this.pendingRoute = { + id: Date.now(), // 生成唯一ID + name: '新建计划航线', + startTime: '', + points: [] + }; + this.showCreateRouteDialog = true; + }, + // 2. 确认航线基本信息，进入“绘图模式” + confirmCreateRoute() { + if (!this.pendingRoute.name) { + this.$message.warning('请输入航线名称'); + return; + } + this.showCreateRouteDialog = false; + this.isDrawing = true; + this.$message.info('进入绘制模式：左键点击地图添加航点，右键结束绘制'); + }, + // 3. 【核心】地图点击事件处理 + // 注意：这个方法需要绑定到地图容器的 @click 上，或者在你的 cesiumMap 组件回调里调用 + handleMapClick(event) { + if (!this.isDrawing) return; + + // 模拟获取点击的经纬度，实际项目中请从 cesium 事件中获取 + // const position = event.position || { lat: 30, lng: 120 }; + + // 暂存位置，打开航点录入弹窗 + // this.tempClickPosition = position; + + // 重置表单，自动生成默认值 + const nextIndex = this.pendingRoute.points.length + 1; + this.waypointForm = { + name: `WP-${nextIndex}`, + altitude: 5000, + speed: 800, + time: '', + radius: 5 + }; + + this.showWaypointDialog = true; + }, + // 4. 确认添加一个航点 + confirmWaypoint() { + // 将表单数据和位置信息合并 + const newPoint = { + ...this.waypointForm, + // ...this.tempClickPosition // 这里存入真实的经纬度 + }; + + this.pendingRoute.points.push(newPoint); + this.showWaypointDialog = false; + this.$message.success(`已添加第 ${this.pendingRoute.points.length} 个航点`); + }, + // 5. 右键结束绘制 + finishDrawing() { + if (!this.isDrawing) return; + + if (this.pendingRoute.points.length < 2) { + this.$message.warning('航线至少需要2个航点'); + return; + } + + // 构造最终数据格式，推入主数组 + const finalRoute = { + id: this.pendingRoute.id, + name: this.pendingRoute.name, + points: this.pendingRoute.points.length, // 显示航点数量 + conflict: false, + detailData: this.pendingRoute // 保存完整数据以便后续使用 + }; + + this.routes.push(finalRoute); + this.isDrawing = false; + this.selectRoute(finalRoute); // 选中新航线 + this.$message.success('航线绘制完成！'); + }, + // 显示在线成员弹窗 + showOnlineMembersDialog() { + this.showOnlineMembers = true; + }, // 平台编辑弹窗相关方法 openPlatformDialog(platform) { this.selectedPlatform = platform; @@ -350,25 +787,9 @@ export default { this.selectedRoute = route; this.showRouteDialog = true; }, - // 更新航线数据（修改后） updateRoute(updatedRoute) { - 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('新建航线功能开发中...'); + // 这里可以添加实际的更新逻辑 + this.$message.success('航线更新成功'); }, // 航点编辑弹窗相关方法 openWaypointDialog(waypoint) { @@ -376,32 +797,8 @@ export default { this.showWaypointDialog = true; }, updateWaypoint(updatedWaypoint) { - // 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('更新失败：未找到对应航点'); - } - } - } + // 这里可以添加实际的更新逻辑 + this.$message.success('航点更新成功'); }, updateTime() { const now = new Date(); @@ -447,166 +844,187 @@ export default { }, // 文件下拉菜单方法 + newPlan() { + this.$message.success('新建计划'); + // 这里可以添加新建计划的逻辑 + }, + + openPlan() { + this.$message.success('打开计划'); + // 这里可以添加打开计划的逻辑 + }, + savePlan() { this.$message.success('保存计划'); + // 这里可以添加保存计划的逻辑 + }, + + importPlan() { + this.$message.success('导入计划'); + // 这里可以添加导入计划的逻辑 }, + // 导入二级菜单方法 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() { this.$message.success('图标编辑'); + // 这里可以添加图标编辑的逻辑 }, attributeEdit() { this.$message.success('属性修改'); + // 这里可以添加属性修改的逻辑 + }, + + deductionEdit() { + this.$message.success('推演编辑'); + // 这里可以添加推演编辑的逻辑 }, + // 推演编辑二级菜单方法 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('显示/隐藏网格'); + // 这里可以添加网格显示/隐藏的逻辑 }, toggleScale() { this.$message.success('显示/隐藏比例尺'); + // 这里可以添加比例尺显示/隐藏的逻辑 + }, + + toggleCompass() { + this.$message.success('显示/隐藏指北针'); + // 这里可以添加指北针显示/隐藏的逻辑 }, // 地图下拉菜单方法 loadTerrain() { this.$message.success('加载/切换地形'); + // 这里可以添加地形加载/切换的逻辑 }, changeProjection() { this.$message.success('投影'); + // 这里可以添加投影切换的逻辑 }, loadAeroChart() { this.$message.success('航空图'); - }, - - // 空域下拉菜单方法 - powerZone() { - this.$message.success('威力区'); - }, - - threatZone() { - this.$message.success('威胁区'); + // 这里可以添加航空图加载的逻辑 }, // 工具下拉菜单方法 routeCalculation() { this.$message.success('航线计算'); + // 这里可以添加航线计算的逻辑 }, conflictDisplay() { this.$message.success('冲突显示'); + // 这里可以添加冲突显示的逻辑 }, dataMaterials() { this.$message.success('数据资料'); + // 这里可以添加数据资料管理的逻辑 }, coordinateConversion() { this.$message.success('坐标换算'); + // 这里可以添加坐标换算的逻辑 }, // 选项下拉菜单方法 - pageLayout() { - this.$message.success('页面布局'); - }, - - dataStoragePath() { - this.$message.success('数据存储路径'); - }, - - externalParams() { - this.$message.success('外部参数'); - }, - - toggleAirport() { - this.showAirport = !this.showAirport; - this.$message.success(this.showAirport ? '显示机场' : '隐藏机场'); - }, - - toggleLandmark() { - this.showLandmark = !this.showLandmark; - this.$message.success(this.showLandmark ? '显示地标' : '隐藏地标'); - }, - - toggleRoute() { - this.showRoute = !this.showRoute; - this.$message.success(this.showRoute ? '显示航线' : '隐藏航线'); + settings() { + this.$message.success('设置'); + // 这里可以添加系统设置的逻辑 }, systemDescription() { this.$message.success('系统说明'); + // 这里可以添加系统说明的逻辑 }, // 收藏下拉菜单方法 layerFavorites() { this.$message.success('图层收藏'); + // 这里可以添加图层收藏的逻辑 }, routeFavorites() { this.$message.success('航线收藏'); - }, - - showOnlineMembersDialog() { - this.showOnlineMembers = true; + // 这里可以添加航线收藏的逻辑 }, hideRightPanel() { @@ -643,9 +1061,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; @@ -661,6 +1079,19 @@ export default { } }, + showTooltip(item) { + this.hoverMenu = item.id; + }, + + hideTooltip() { + this.hoverMenu = ''; + }, + + getMenuName(id) { + const menu = this.menuItems.find(item => item.id === id); + return menu ? menu.name : ''; + }, + // K时弹出框操作 hideKTimePopup() { this.showKTimePopup = false; @@ -750,7 +1181,7 @@ export default { return `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`; }, - // 航线操作：点击列表项只展示详情，不弹窗 + // 航线操作 selectRoute(route) { this.selectedRouteId = route.id; // 模拟获取航点数据 @@ -763,7 +1194,8 @@ export default { { name: 'WP4', altitude: 5800, speed: '830km/h', eta: 'K+01:25:00' }, ] }; - // 移除原有的 this.openRouteDialog(route); + // 打开航线编辑弹窗 + this.openRouteDialog(route); }, addWaypoint() { @@ -816,7 +1248,6 @@ export default {