From 0e7f9e1c3c98ed49f4ecbecd88cd5bc7e846b822 Mon Sep 17 00:00:00 2001 From: ctw <1051735452@qq.com> Date: Thu, 22 Jan 2026 12:53:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=88=AA=E7=BA=BF=E8=88=AA?= =?UTF-8?q?=E7=82=B9=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/views/childRoom/index.vue | 1663 +++----------------------------- 1 file changed, 151 insertions(+), 1512 deletions(-) diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue index accb965..6694a8e 100644 --- a/ruoyi-ui/src/views/childRoom/index.vue +++ b/ruoyi-ui/src/views/childRoom/index.vue @@ -1,102 +1,13 @@ @@ -508,9 +187,10 @@ 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.vue' +import LeftMenu from './LeftMenu' import RightPanel from './RightPanel' import BottomLeftPanel from './BottomLeftPanel' +import TopHeader from './TopHeader' export default { name: 'MissionPlanningView', components: { @@ -521,7 +201,8 @@ export default { WaypointEditDialog, LeftMenu, RightPanel, - BottomLeftPanel + BottomLeftPanel, + TopHeader }, data() { return { @@ -533,48 +214,8 @@ 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', @@ -585,8 +226,6 @@ export default { // 左侧菜单栏 isMenuHidden: true, // 是否完全隐藏左侧菜单 activeMenu: 'file', - hoverMenu: '', - showMenuTooltip: false, // 右侧面板控制 isRightPanelHidden: true, // 是否完全隐藏右侧面板 @@ -594,6 +233,11 @@ 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' }, @@ -690,89 +334,8 @@ 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; @@ -787,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) { @@ -797,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(); @@ -844,187 +447,166 @@ 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('坐标换算'); - // 这里可以添加坐标换算的逻辑 }, // 选项下拉菜单方法 - settings() { - 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 ? '显示航线' : '隐藏航线'); }, systemDescription() { this.$message.success('系统说明'); - // 这里可以添加系统说明的逻辑 }, // 收藏下拉菜单方法 layerFavorites() { this.$message.success('图层收藏'); - // 这里可以添加图层收藏的逻辑 }, routeFavorites() { this.$message.success('航线收藏'); - // 这里可以添加航线收藏的逻辑 + }, + + showOnlineMembersDialog() { + this.showOnlineMembers = true; }, hideRightPanel() { @@ -1061,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; @@ -1079,19 +661,6 @@ 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; @@ -1181,7 +750,7 @@ export default { return `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`; }, - // 航线操作 + // 航线操作：点击列表项只展示详情，不弹窗 selectRoute(route) { this.selectedRouteId = route.id; // 模拟获取航点数据 @@ -1194,8 +763,7 @@ export default { { name: 'WP4', altitude: 5800, speed: '830km/h', eta: 'K+01:25:00' }, ] }; - // 打开航线编辑弹窗 - this.openRouteDialog(route); + // 移除原有的 this.openRouteDialog(route); }, addWaypoint() { @@ -1248,6 +816,7 @@ export default {