From c59b06d910301d24dcc9a1c2f942d6261be5cd4b Mon Sep 17 00:00:00 2001 From: ctw <1051735452@qq.com> Date: Mon, 26 Jan 2026 15:31:48 +0800 Subject: [PATCH] 1 --- ruoyi-ui/src/views/childRoom/RightPanel.vue | 5 +- ruoyi-ui/src/views/childRoom/index.vue | 213 +++++++++++++++++++--------- 2 files changed, 148 insertions(+), 70 deletions(-) diff --git a/ruoyi-ui/src/views/childRoom/RightPanel.vue b/ruoyi-ui/src/views/childRoom/RightPanel.vue index d035038..3633faa 100644 --- a/ruoyi-ui/src/views/childRoom/RightPanel.vue +++ b/ruoyi-ui/src/views/childRoom/RightPanel.vue @@ -324,7 +324,7 @@ export default { }) } }, - + // 切换航线展开/折叠 toggleRoute(routeId) { const route = this.routes.find(r => r.id === routeId) @@ -354,11 +354,12 @@ export default { }) } }, - + handleHide() { this.$emit('hide') }, + // 新建航线事件 handleSelectPlan(plan) { this.$emit('select-plan', plan) }, diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue index 72a0ef6..2574340 100644 --- a/ruoyi-ui/src/views/childRoom/index.vue +++ b/ruoyi-ui/src/views/childRoom/index.vue @@ -114,7 +114,7 @@ :selected-plan-details="selectedPlanDetails" :selected-route-id="selectedRouteId" :routes="routes" - :activeRouteIds="activeRouteIds" + :active-route-ids="activeRouteIds" :selected-route-details="selectedRouteDetails" :conflicts="conflicts" :conflict-count="conflictCount" @@ -272,7 +272,8 @@ import LeftMenu from './LeftMenu' import RightPanel from './RightPanel' import BottomLeftPanel from './BottomLeftPanel' import TopHeader from './TopHeader' -import { listRoutes, getRoutes, addRoutes } from "@/api/system/routes"; +import { listScenario} from "@/api/system/scenario"; +import { listRoutes, getRoutes, addRoutes,delRoutes } from "@/api/system/routes"; import { updateWaypoints } from "@/api/system/waypoints"; export default { name: 'MissionPlanningView', @@ -303,9 +304,6 @@ export default { selectedRoute: null, showWaypointDialog: false, selectedWaypoint: null, - showNameDialog: false, - newRouteName: '', - tempMapPoints: [], // 威力区、比例尺、外部参数弹窗 showPowerZoneDialog: false, currentPowerZone: {}, @@ -315,6 +313,9 @@ export default { currentExternalParams: {}, showPageLayoutDialog: false, menuPosition: 'left', + showNameDialog: false, + newRouteName: '', + tempMapPoints: [], // 作战信息 roomCode: 'JTF-7-ALPHA', @@ -395,7 +396,6 @@ export default { activeRightTab: 'plan', activeRouteIds: [], // 存储当前所有选中的航线ID - // 冲突数据 conflictCount: 2, conflicts: [ @@ -437,20 +437,7 @@ export default { ], // 航线数据 - 改为方案-航线-航点三级结构 - plans: [ - { - id: 1, - name: '方案A', - routes: [ - ] - }, - { - id: 2, - name: '方案B', - routes: [ - ] - } - ], + plans: [], // 时间控制 timeProgress: 45, @@ -544,20 +531,60 @@ export default { this.selectedPlanId = plan.id; this.selectedPlanDetails = plan; } - + if (this.$refs.cesiumMap) { this.$refs.cesiumMap.startMissionRouteDrawing(); this.$message.success('进入航线规划模式'); } - + }, + async handleDeleteRoute(route) { + try { + // 二次确认，防止误删 + await this.$confirm(`确定要彻底删除航线 "${route.name}" 吗？`, '提示', { + type: 'warning' + }); + if (this.selectedRouteDetails && this.selectedRouteDetails.id === route.id) { + this.selectedRouteDetails = null; + } + const res = await delRoutes(route.id); + if (res.code === 200) { + this.$message.success('删除成功'); + // 同步地图：如果该航线正在显示，立即清除 + if (this.$refs.cesiumMap) { + this.$refs.cesiumMap.removeRouteById(route.id); + } + // 同步状态：从选中列表中移除该 ID + const idx = this.activeRouteIds.indexOf(route.id); + if (idx > -1) { + this.activeRouteIds.splice(idx, 1); + } + await this.getList(); + } + } catch (e) { + if (e !== 'cancel') { + console.error("删除航线失败:", e); + this.$message.error('删除操作失败'); + } + } }, /** 从数据库拉取最新的航线列表数据 */ + /** 从数据库拉取最新的数据 */ async getList() { - const query = {}; // 移除固定的 scenarioId，获取所有航线 try { - const response = await listRoutes(query); - if (response.code === 200) { - this.routes = response.rows.map(item => ({ + // 1. 获取所有方案 + const scenarioRes = await listScenario({}); + if (scenarioRes.code === 200) { + this.plans = scenarioRes.rows.map(s => ({ + id: s.id, + name: s.name, + routes: [] + })); + } + + // 2. 获取所有航线 + const routeRes = await listRoutes({}); + if (routeRes.code === 200) { + const allRoutes = routeRes.rows.map(item => ({ id: item.id, name: item.callSign, points: item.waypoints ? item.waypoints.length : 0, @@ -565,9 +592,18 @@ export default { conflict: false, scenarioId: item.scenarioId })); + + // 3. 将航线分配到对应的方案中 + this.plans.forEach(plan => { + plan.routes = allRoutes.filter(r => r.scenarioId === plan.id); + }); + + // 保存一份扁平的 routes 供搜索或其他组件使用 + this.routes = allRoutes; } } catch (error) { - this.$message.error("获取航线列表失败"); + console.error("数据加载失败:", error); + this.$message.error("获取方案列表失败"); } }, handleMapDrawComplete(points) { @@ -586,10 +622,16 @@ export default { this.$message.error('新增航线未命名，请输入名称后保存！'); return; } + // 获取当前选中的方案 ID + const currentScenarioId = this.selectedPlanId; + if (!currentScenarioId) { + this.$message.warning('请先在左侧选择一个方案，再保存航线！'); + return; + } // 构造符合后端 Routes 实体类的数据结构 const routeData = { callSign: this.newRouteName, - scenarioId: this.selectedPlanId || 1, // 使用当前选中的方案ID，默认1 + scenarioId: currentScenarioId || 1, // 使用当前选中的方案ID，默认1 platformId: 1, attributes: "{}", waypoints: this.tempMapPoints.map((p, index) => ({ @@ -607,7 +649,27 @@ export default { // 调用后端 API 保存到数据库 const response = await addRoutes(routeData); if (response.code === 200) { - this.$message.success('航线及其航点已成功保存至数据库'); + this.$message.success('航线及其航点已成功保存至当前方案'); + // 获取后端生成的正式 ID + const savedRoute = response.data; + const newRouteId = savedRoute ? savedRoute.id : null; + if (this.$refs.cesiumMap) { + this.$refs.cesiumMap.clearRoute(); + // 如果拿到了正式 ID，则按照“正式航线”的规则渲染一次 + if (newRouteId) { + if (!this.activeRouteIds.includes(savedRoute.id)) { + this.activeRouteIds.push(savedRoute.id); + } + // 更新当前详情，确保右侧下方航点列表立刻显示 + this.selectedRouteDetails = { + id: newRouteId, + name: this.newRouteName, + waypoints: routeData.waypoints + }; + //使用正式 ID 渲染点和线 + this.$refs.cesiumMap.renderRouteWaypoints(routeData.waypoints, newRouteId); + } + } // 重置 UI 状态 this.showNameDialog = false; this.drawDom = false; @@ -1147,15 +1209,7 @@ export default { const minutes = (val % 4) * 15; return `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`; }, - - createPlan() { - this.$message.success('创建方案'); - }, - - openPlanDialog(plan) { - this.$message.success('打开方案编辑对话框'); - }, - + // 航线操作 selectPlan(plan) { if (plan && plan.id) { this.selectedPlanId = plan.id; @@ -1167,11 +1221,10 @@ export default { 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) { if (isRouteExpanded) { @@ -1209,7 +1262,7 @@ export default { return; } } - + // 航线未被选中，点击则选中并显示航线和航点 try { const response = await getRoutes(route.id); @@ -1217,13 +1270,13 @@ export default { 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 - }; - + 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) { @@ -1232,7 +1285,7 @@ export default { waypoints: waypoints }); } - + if (waypoints.length > 0) { // 通知地图渲染 if (this.$refs.cesiumMap) { @@ -1248,6 +1301,25 @@ export default { } }, + createPlan() { + const newId = Date.now(); + const newPlan = { + id: newId, + name: `新方案${this.plans.length + 1}`, + routes: [] + }; + this.plans.push(newPlan); + this.selectPlan(newPlan); + }, + openPlanDialog(plan) { + this.$prompt('请输入方案名称', '编辑方案', { + confirmButtonText: '确定', + cancelButtonText: '取消', + inputValue: plan.name + }).then(({ value }) => { + plan.name = value; + }).catch(() => {}); + }, addWaypoint() { if (this.selectedRouteDetails) { const count = this.selectedRouteDetails.waypoints.length + 1; @@ -1257,7 +1329,12 @@ export default { speed: '800km/h', eta: `K+01:${(count * 15).toString().padStart(2, '0')}:00` }); - this.$message.success('添加航点成功'); + if (this.selectedPlanDetails) { + const route = this.selectedPlanDetails.routes.find(r => r.id === this.selectedRouteId); + if (route) { + route.points = this.selectedRouteDetails.waypoints.length; + } + } } }, @@ -1276,7 +1353,7 @@ export default { // 切换航线显示/隐藏 toggleRouteVisibility(route) { const index = this.activeRouteIds.indexOf(route.id); - + if (index > -1) { // 航线已显示，隐藏它 // 使用过滤创建新数组，确保 Vue 能够检测到变化 @@ -1286,23 +1363,23 @@ export default { } 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; + 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 { @@ -1363,7 +1440,7 @@ export default { background-position: center; z-index: 1; } - +/* ...其余样式省略，保持不变... */ .map-overlay-text { position: absolute; top: 50%;