1

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)
     },

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: [
+      plans: [],
-        {
-          id: 1,
-          name: '方案A',
-          routes: [
-            ]
-        },
-        {
-          id: 2,
-          name: '方案B',
-          routes: [
-            ]
-        }
-      ],
 
       // 时间控制
       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);
+        // 1. 获取所有方案
-        if (response.code === 200) {
+        const scenarioRes = await listScenario({});
-          this.routes = response.rows.map(item => ({
+        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.selectedRouteId = fullRouteData.id;
-        this.selectedRouteDetails = {
+          this.selectedRouteDetails = {
-          id: fullRouteData.id,
+            id: fullRouteData.id,
-          name: fullRouteData.callSign,
+            name: fullRouteData.callSign,
-          waypoints: waypoints
+            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];
+            const lastId = this.activeRouteIds[this.activeRouteIds.length - 1];
-                getRoutes(lastId).then(res => {
+            getRoutes(lastId).then(res => {
-                  if (res.code === 200 && res.data) {
+              if (res.code === 200 && res.data) {
-                    this.selectedRouteId = res.data.id;
+                this.selectedRouteId = res.data.id;
-                    this.selectedRouteDetails = {
+                this.selectedRouteDetails = {
-                      id: res.data.id,
+                  id: res.data.id,
-                      name: res.data.callSign,
+                  name: res.data.callSign,
-                      waypoints: res.data.waypoints || []
+                  waypoints: res.data.waypoints || []
-                    };
+                };
-                  }
-                }).catch(e => {
-                  console.error("获取航线详情失败", e);
-                });
-              } else {
-                this.selectedRouteId = null;
-                this.selectedRouteDetails = null;
               }
+            }).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%;