方案-航线-航点

ruoyi-admin/src/main/java/com/ruoyi/web/controller/RoutesController.java

@@ -77,7 +77,12 @@ public class RoutesController extends BaseController
     @PostMapping
     public AjaxResult add(@RequestBody Routes routes)
     {
-        return toAjax(routesService.insertRoutes(routes));
+        // 1. 执行插入，MyBatis 会通过 useGeneratedKeys="true" 自动将新 ID 注入 routes 对象
+        int rows = routesService.insertRoutes(routes);
+
+        // 2. 不要用 toAjax，直接返回 success 并带上 routes 对象
+        // 这样前端 response.data 就会包含这个带有 ID 的完整对象
+        return rows > 0 ? AjaxResult.success(routes) : AjaxResult.error("新增航线失败");
     }
 
     /**

ruoyi-system/src/main/java/com/ruoyi/system/service/impl/RoutesServiceImpl.java

@@ -58,7 +58,16 @@ public class RoutesServiceImpl implements IRoutesService
     @Override
     public List<Routes> selectRoutesList(Routes routes)
     {
-        return routesMapper.selectRoutesList(routes);
+        // 获取基础列表
+        List<Routes> list = routesMapper.selectRoutesList(routes);
+        // 遍历列表，为每一条航线补全它的航点信息
+        for (Routes r : list) {
+            RouteWaypoints queryWp = new RouteWaypoints();
+            queryWp.setRouteId(r.getId());
+            List<RouteWaypoints> wpList = routeWaypointsService.selectRouteWaypointsList(queryWp);
+            r.setWaypoints(wpList);
+        }
+        return list;
     }
 
     /**

ruoyi-ui/src/views/childRoom/RightPanel.vue

@@ -285,6 +285,15 @@ export default {
     }
   },
   watch: {
+    selectedPlanId(newId) {
+      if (newId) {
+        console.log('>>> [子组件同步] 检测到方案切换，自动展开 ID:', newId);
+        // 如果还没展开，就把它塞进展开数组里
+        if (!this.expandedPlans.includes(newId)) {
+          this.expandedPlans.push(newId);
+        }
+      }
+    },
     activeRouteIds: {
       handler(newVal) {
         console.log('activeRouteIds updated:', newVal);
@@ -297,25 +306,33 @@ export default {
     togglePlan(planId) {
       const index = this.expandedPlans.indexOf(planId)
       if (index > -1) {
-        // 折叠方案时，取消选中该方案的所有航线
         this.expandedPlans.splice(index, 1)
         const planRoutes = this.routes.filter(r => r.scenarioId === planId)
         planRoutes.forEach(route => {
           if (this.activeRouteIds.includes(route.id)) {
-            // 触发航线隐藏
             this.handleToggleRouteVisibility(route)
           }
         })
-        // 折叠方案时，取消选中方案
         this.$emit('select-plan', { id: null })
       } else {
-        // 展开方案时，选中该方案
+        // 展开新方案前，先清空所有已显示的航线和已展开的方案
+        // 清除当前地图上显示的所有航线实体（通知父组件清空 activeRouteIds 并调用地图移除方法）
+        this.activeRouteIds.forEach(activeId => {
+          const activeRoute = this.routes.find(r => r.id === activeId);
+          if (activeRoute) {
+            this.$emit('toggle-route-visibility', activeRoute);
+          }
+        });
+        // 重置展开状态，确保只有一个方案是展开的
+        this.expandedPlans = [];
+        this.expandedRoutes = [];
+        // --- 正常的展开逻辑 ---
         this.expandedPlans.push(planId)
         const plan = this.plans.find(p => p.id === planId)
         if (plan) {
           this.$emit('select-plan', plan)
         }
-        // 选中该方案的所有航线
+        // 仅加载并显示当前新方案的航线
         const planRoutes = this.routes.filter(r => r.scenarioId === planId)
         planRoutes.forEach(route => {
           if (!this.activeRouteIds.includes(route.id)) {
@@ -329,25 +346,25 @@ export default {
     toggleRoute(routeId) {
       const route = this.routes.find(r => r.id === routeId)
       if (!route) return
-
+      if (!route.waypoints) {
+        this.$set(route, 'waypoints', []); // 使用 $set 确保新属性是响应式的
+      }
       const isRouteSelected = this.activeRouteIds.includes(routeId)
       const isRouteExpanded = this.expandedRoutes.includes(routeId)
-
       if (isRouteSelected) {
-        // 航线已选中
         if (isRouteExpanded) {
-          // 航线已展开，点击则收回航点
           const index = this.expandedRoutes.indexOf(routeId)
           this.expandedRoutes.splice(index, 1)
         } else {
-          // 航线未展开，点击则展开航点
           this.expandedRoutes.push(routeId)
         }
       } else {
-        // 航线未选中，点击则选中并显示航线和航点
         this.handleSelectRoute(route)
-        // 选中后自动展开航点
         this.$nextTick(() => {
+          // 检查当前方案是否已展开，如果没展开，可能需要先展开方案才能看到航线
+          if (!this.expandedPlans.includes(route.scenarioId)) {
+            this.expandedPlans.push(route.scenarioId);
+          }
           if (!this.expandedRoutes.includes(routeId)) {
             this.expandedRoutes.push(routeId)
           }
@@ -359,11 +376,6 @@ export default {
       this.$emit('hide')
     },
 
-    // 新建航线事件
-    handleSelectPlan(plan) {
-      this.$emit('select-plan', plan)
-    },
-
     handleSelectRoute(route) {
       // 确保航线有航点数据
       this.$emit('select-route', route)
@@ -373,16 +385,19 @@ export default {
       this.$emit('create-plan')
     },
 
-    handleCreateRoute() {
-      this.$emit('create-route')
-    },
-
     handleCreateRouteForPlan(plan) {
       this.$emit('create-route', plan)
     },
 
     handleDeletePlan(plan) {
-      // 暂时留空，后续实现
+      this.$confirm(`是否确认删除方案 "${plan.name}"？这将同时删除该方案下的所有航线。`, "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$emit('delete-plan', plan);
+      }).catch(() => {
+      });
     },
 
     handleOpenPlanDialog(plan) {

ruoyi-ui/src/views/childRoom/index.vue

@@ -34,7 +34,6 @@
         </div>
       </el-dialog>
     </div>
-
     <!-- 顶部导航栏 -->
     <top-header
       :room-code="roomCode"
@@ -86,7 +85,6 @@
       @route-favorites="routeFavorites"
       @show-online-members="showOnlineMembersDialog"
     />
-
     <!-- 左侧折叠菜单栏 - 蓝色主题 -->
     <left-menu
       :is-hidden="isMenuHidden"
@@ -103,7 +101,6 @@
       @add-items="handleAddMenuItems"
       @delete="handleDeleteMenuItem"
     />
-
     <!-- 右侧实体列表（浮动）- 蓝色主题 -->
     <right-panel
       ref="rightPanel"
@@ -122,11 +119,12 @@
       :sea-platforms="seaPlatforms"
       :ground-platforms="groundPlatforms"
       @hide="hideRightPanel"
-      @select-plan="selectPlan"
       @select-route="selectRoute"
       @create-route="createRoute"
       @delete-route="handleDeleteRoute"
+      @select-plan="selectPlan"
       @create-plan="createPlan"
+      @delete-plan="executeDeletePlan"
       @open-plan-dialog="openPlanDialog"
       @open-route-dialog="openRouteDialog"
       @open-waypoint-dialog="openWaypointDialog"
@@ -138,10 +136,8 @@
       @run-conflict-check="runConflictCheck"
       @open-platform-dialog="openPlatformDialog"
     />
-
     <!-- 左下角工具面板 -->
     <bottom-left-panel />
-
     <!-- 底部时间轴（最初版本的样式）- 蓝色主题 -->
     <div
       class="floating-timeline blue-theme"
@@ -151,13 +147,11 @@
       <div class="popup-hide-btn" @click="hideKTimePopup" title="隐藏K时">
         <i class="el-icon-arrow-down"></i>
       </div>
-
       <div class="timeline-controls">
         <div class="current-time blue-time">
           <i class="el-icon-time"></i>
           <span class="time-text">{{ currentTime }}</span>
         </div>
-
         <div class="timeline-slider">
           <el-slider
             v-model="timeProgress"
@@ -166,7 +160,6 @@
             class="compact-slider blue-slider"
           />
         </div>
-
         <div class="playback-controls">
           <button
             class="control-btn blue-control-btn"
@@ -175,7 +168,6 @@
           >
             <i :class="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
           </button>
-
           <div class="speed-control">
             <button
               class="control-btn blue-control-btn"
@@ -256,6 +248,23 @@
       v-model="showPageLayoutDialog"
       @save="savePageLayout"
     />
+
+    <el-dialog
+      title="新建方案"
+      :visible.sync="showPlanNameDialog"
+      width="400px"
+      append-to-body
+    >
+      <el-form :model="newPlanForm" ref="newPlanForm" :rules="planRules" label-width="80px">
+        <el-form-item label="方案名称" prop="name">
+          <el-input v-model="newPlanForm.name" placeholder="请输入方案名称"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showPlanNameDialog = false">取 消</el-button>
+        <el-button type="primary" @click="confirmCreatePlan">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -273,7 +282,7 @@ import LeftMenu from './LeftMenu'
 import RightPanel from './RightPanel'
 import BottomLeftPanel from './BottomLeftPanel'
 import TopHeader from './TopHeader'
-import { listScenario} from "@/api/system/scenario";
+import { listScenario,addScenario,delScenario} from "@/api/system/scenario";
 import { listRoutes, getRoutes, addRoutes,delRoutes } from "@/api/system/routes";
 import { updateWaypoints } from "@/api/system/waypoints";
 export default {
@@ -328,13 +337,20 @@ export default {
       isMenuHidden: true,      // 是否完全隐藏左侧菜单
       activeMenu: 'file',
       isIconEditMode: false,   // 图标编辑模式
-
       // 方案-航线-航点数据
       selectedPlanId: null,
       selectedPlanDetails: null,
+      routes: [],
       selectedRouteId: null,
       selectedRouteDetails: null,
 
+      showPlanNameDialog: false, // 控制新建方案弹窗
+      newPlanForm: {
+        name: ''
+      },
+      planRules: {
+        name: [{ required: true, message: '请输入方案名称', trigger: 'blur' }]
+      },
       // 顶部导航菜单项（用于图标选择）- 只显示指定的菜单项
       topNavItems: [
         { id: 'routeEdit', name: '航线编辑', icon: 'el-icon-edit-outline' },
@@ -370,7 +386,6 @@ export default {
 
       // 右侧面板控制
       isRightPanelHidden: true, // 是否完全隐藏右侧面板
-
       // K时弹出框控制
       showKTimePopup: false,
 
@@ -394,9 +409,10 @@ export default {
       ],
 
       // 右侧面板
+      currentRoomId: null,
+      plans: [],
       activeRightTab: 'plan',
       activeRouteIds: [], // 存储当前所有选中的航线ID
-
       // 冲突数据
       conflictCount: 2,
       conflicts: [
@@ -437,9 +453,6 @@ export default {
         { id: 10, name: '指挥控制车', type: '指挥车', icon: 'el-icon-monitor', color: '#1890ff', status: 'operating' },
       ],
 
-      // 航线数据 - 改为方案-航线-航点三级结构
-      plans: [],
-
       // 时间控制
       timeProgress: 45,
       currentTime: 'K+01:15:30',
@@ -471,24 +484,44 @@ export default {
       this.playbackInterval = null;
     }
   },
+  created() {
+    this.currentRoomId = this.$route.query.roomId;
+    console.log("从路由接收到的真实房间 ID:", this.currentRoomId);
+    this.getList();
+  },
   methods: {
     // 处理从地图点击传来的编辑请求
-    handleOpenWaypointEdit(wpName) {
-      // 1. 确保当前有选中的航线详情
-      if (!this.selectedRouteDetails || !this.selectedRouteDetails.waypoints) {
-        this.$message.warning('请先在右侧列表选择一条航线');
+    async handleOpenWaypointEdit(wpId, routeId) {
+      console.log(`>>> [父组件接收] 航点 ID: ${wpId}, 所属航线 ID: ${routeId}`);
+      // 如果点击的点不属于当前选中的航线
+      if (this.selectedRouteId != routeId) {
+        console.log(">>> [自动切换] 正在获取新航线详情...");
+        try {
+          const response = await getRoutes(routeId);
+          if (response.code === 200 && response.data) {
+            const fullRouteData = response.data;
+            // 同步更新父组件状态，保持和 selectRoute 方法一致的结构
+            this.selectedRouteId = fullRouteData.id;
+            this.selectedRouteDetails = {
+              id: fullRouteData.id,
+              name: fullRouteData.callSign,
+              waypoints: fullRouteData.waypoints || []
+            };
+          }
+        } catch (error) {
+          this.$message.error('切换航线数据失败');
           return;
         }
-      // 2. 根据点击的航点名称在数据列表中查找
-      const wpData = this.selectedRouteDetails.waypoints.find(item => item.name === wpName);
+      }
+      // 此时账本已确保是最新且正确的，开始找点
+      const wpData = this.selectedRouteDetails.waypoints.find(item => item.id == wpId);
       if (wpData) {
-        // 3. 深拷贝给编辑弹窗绑定的变量，防止直接修改原始数组
+        // 成功找到业务数据，深拷贝后打开弹窗
         this.selectedWaypoint = JSON.parse(JSON.stringify(wpData));
-        // 4. 打开弹窗
         this.showWaypointDialog = true;
-      }
-      else {
+      } else {
         this.$message.info('未找到该航点的业务数据');
+        console.error("查找失败！账本内IDs:", this.selectedRouteDetails.waypoints.map(w => w.id));
       }
     },
     // 显示在线成员弹窗
@@ -527,15 +560,19 @@ export default {
     },
     // 新建航线
     createRoute(plan) {
-      // 保存当前选中的方案，用于后续新建航线时关联
-      if (plan) {
-        this.selectedPlanId = plan.id;
-        this.selectedPlanDetails = plan;
+      if (!plan || !plan.id) return;
+      console.log(`>>> [新建航线触发] 目标方案: ${plan.name}`);
+      // 只有当目标方案和当前方案不同时，才执行“大扫除”
+      if (this.selectedPlanId !== plan.id) {
+        console.log(">>> [执行跨方案切换] 正在清理旧方案数据...");
+        this.selectPlan(plan);
+      } else {
+        console.log(">>> [同方案内操作] 保持当前航线显示，直接进入规划模式");
       }
-
+      // 进入 Cesium 绘图模式
       if (this.$refs.cesiumMap) {
         this.$refs.cesiumMap.startMissionRouteDrawing();
-        this.$message.success('进入航线规划模式');
+        this.$message.success(`${plan.name}开启航线规划`);
       }
     },
     async handleDeleteRoute(route) {
@@ -571,8 +608,8 @@ export default {
     /** 从数据库拉取最新的航线列表数据 */
     async getList() {
       try {
-        // 1. 获取所有方案
-        const scenarioRes = await listScenario({});
+        const roomId = this.$route.query.roomId || this.currentRoomId;
+        const scenarioRes = await listScenario({ roomId: roomId });
         if (scenarioRes.code === 200) {
           this.plans = scenarioRes.rows.map(s => ({
             id: s.id,
@@ -580,8 +617,7 @@ export default {
             routes: []
           }));
         }
-
-        // 2. 获取所有航线
+        //获取所有航线
         const routeRes = await listRoutes({});
         if (routeRes.code === 200) {
           const allRoutes = routeRes.rows.map(item => ({
@@ -592,14 +628,27 @@ 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;
+          // 直接根据 activeRouteIds 同步地图即可
+          if (this.activeRouteIds.length > 0) {
+            this.$nextTick(() => {
+              this.activeRouteIds.forEach(id => {
+                const route = this.routes.find(r => r.id === id);
+                // 只要数据里有点位，直接指挥地图画线
+                if (route && route.waypoints && route.waypoints.length > 0) {
+                  if (this.$refs.cesiumMap) {
+                    this.$refs.cesiumMap.removeRouteById(id);
+                    this.$refs.cesiumMap.renderRouteWaypoints(route.waypoints, id);
+                  }
+                }
+              });
+            });
+          }
         }
       } catch (error) {
         console.error("数据加载失败:", error);
@@ -617,24 +666,19 @@ export default {
     },
     /** 弹窗点击“确定”：正式将数据保存到后端数据库 */
     async confirmSaveNewRoute() {
-      // 严格校验起名逻辑
+      // 1. 严格校验
       if (!this.newRouteName || this.newRouteName.trim() === '') {
         this.$message.error('新增航线未命名，请输入名称后保存！');
         return;
       }
-      // 获取当前选中的方案 ID
       const currentScenarioId = this.selectedPlanId;
       if (!currentScenarioId) {
         this.$message.warning('请先在左侧选择一个方案，再保存航线！');
         return;
       }
-      // 构造符合后端 Routes 实体类的数据结构
-      const routeData = {
-        callSign: this.newRouteName,
-        scenarioId: currentScenarioId || 1,  // 使用当前选中的方案ID，默认1
-        platformId: 1,
-        attributes: "{}",
-        waypoints: this.tempMapPoints.map((p, index) => ({
+
+      // 2. 构造数据
+      const finalWaypoints = this.tempMapPoints.map((p, index) => ({
         name: `WP${index + 1}`,
         lat: p.lat,
         lng: p.lng,
@@ -642,45 +686,70 @@ export default {
         speed: 800.0,
         startTime: 'K+00:00:00',
         turnAngle: 0.0
-        }))
+      }));
+
+      const routeData = {
+        callSign: this.newRouteName,
+        scenarioId: currentScenarioId,
+        platformId: 1,
+        attributes: "{}",
+        waypoints: finalWaypoints
       };
 
       try {
-        // 调用后端 API 保存到数据库
         const response = await addRoutes(routeData);
         if (response.code === 200) {
-          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);
+          const newRouteId = savedRoute?.id;
+
+          if (!newRouteId || !savedRoute.waypoints) {
+            this.$message.error('保存成功但返回数据结构异常，请手动刷新');
+            return;
           }
+
+          // 1. 更新当前选中详情
+          this.selectedRouteId = newRouteId;
+          this.selectedRouteDetails = JSON.parse(JSON.stringify(savedRoute));
+
+          // 2. 【修复关键 A】：使用 push 而不是赋值
+          // 确保新 ID 进去的同时，activeRouteIds 里原有的老 ID（如 112）还在
+          // 这样右侧列表里，老的航线依然会保持勾选状态
+          if (!this.activeRouteIds.includes(newRouteId)) {
+            this.activeRouteIds.push(newRouteId);
           }
-          // 重置 UI 状态
-          this.showNameDialog = false;
+
+          // 3. UI 重置
           this.drawDom = false;
+          this.showNameDialog = false;
           this.newRouteName = '';
           this.tempMapPoints = [];
-          // 重新拉取右侧航线列表以保持同步
-          await this.getList();
+
+          // 4. 【修复关键 B】：千万不要调用 clearAllWaypoints()！
+          // 改为只删除绘制过程中的临时预览实体，保留地图上已有的正式线
+          if (this.$refs.cesiumMap) {
+            // 只清理临时点（假如你的地图组件有这个更细的方法）
+            // 如果没有，就直接删掉 tempPreviewEntity
+            if (this.$refs.cesiumMap.tempPreviewEntity) {
+              this.viewer.entities.remove(this.$refs.cesiumMap.tempPreviewEntity);
+              this.$refs.cesiumMap.tempPreviewEntity = null;
+            }
+            // 如果 clearAllWaypoints 会清空所有，那这里就不能调用它
+          }
+
+          // 5. 渲染新航线
+          this.$nextTick(() => {
+            if (this.$refs.cesiumMap) {
+              // 只画这一条新线，旧线因为没被清除，依然会留在地图上
+              this.$refs.cesiumMap.renderRouteWaypoints(savedRoute.waypoints, newRouteId);
+            }
+            this.$message.success('航线及其航点已成功保存并同步');
+          });
+
+          this.getList();
         }
       } catch (error) {
-        console.error("保存航线失败:", error);
-        this.$message.error('保存失败，请检查后端服务');
+        console.error(">>> [保存异常]:", error);
+        this.$message.error('保存失败，请检查网络或后端日志');
       }
     },
     // 航点编辑弹窗相关方法
@@ -690,22 +759,19 @@ export default {
     },
     /** 航点编辑保存：更新数据库并同步地图显示 */
     async updateWaypoint(updatedWaypoint) {
-      // 确保有选中的航线详情
       if (!this.selectedRouteDetails || !this.selectedRouteDetails.waypoints) return;
       try {
-        const response = await updateWaypoints(updatedWaypoint);
+        const response = await updateWaypoints(updatedWaypoint); // 更新数据库
         if (response.code === 200) {
-          // 找到当前编辑点在本地数组中的位置
           const index = this.selectedRouteDetails.waypoints.findIndex(p => p.id === updatedWaypoint.id);
           if (index !== -1) {
-            // 记录旧名称，用于地图组件定位 Entity
-            const oldName = this.selectedRouteDetails.waypoints[index].name;
-            const newName = updatedWaypoint.name;
-            // 使用 splice 触发 Vue 响应式更新右侧面板 UI
+            // 1. 更新本地 Vue 响应式数据，同步右侧面板 UI
             this.selectedRouteDetails.waypoints.splice(index, 1, {...updatedWaypoint});
-            // 5. 同步更新地图上的图形
+
+            // 2. 【核心修改】通过 ID 通知地图组件更新图形
             if (this.$refs.cesiumMap) {
-              this.$refs.cesiumMap.updateWaypointGraphic(oldName, newName);
+              // 直接传 ID 和新的名字
+              this.$refs.cesiumMap.updateWaypointGraphicById(updatedWaypoint.id, updatedWaypoint.name);
             }
 
             this.showWaypointDialog = false;
@@ -753,7 +819,6 @@ export default {
     },
 
 
-
     // 右侧面板操作
     showRightPanel() {
       this.isRightPanelHidden = false;
@@ -1209,7 +1274,6 @@ export default {
       const minutes = (val % 4) * 15;
       return `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
     },
-    // 航线操作
     selectPlan(plan) {
       if (plan && plan.id) {
         this.selectedPlanId = plan.id;
@@ -1218,8 +1282,17 @@ export default {
         this.selectedPlanId = null;
         this.selectedPlanDetails = null;
       }
+
+      // 重置状态
       this.selectedRouteId = null;
       this.selectedRouteDetails = null;
+      this.activeRouteIds = [];
+
+      // 物理清场
+      if (this.$refs.cesiumMap && this.$refs.cesiumMap.clearAllWaypoints) {
+        this.$refs.cesiumMap.clearAllWaypoints();
+      }
+      console.log(`>>> [切换成功] 已进入方案: ${plan.name}，地图已清空，列表已展开。`);
     },
     /** 切换航线：实现多选/开关逻辑 */
     async selectRoute(route) {
@@ -1228,8 +1301,6 @@ export default {
       // 航线已在选中列表中
       if (index > -1) {
         if (isRouteExpanded) {
-          // 航线已展开，点击则收回航点（不取消选中）
-          // 这个逻辑在 RightPanel 的 toggleRoute 中处理
           return;
         } else {
           // 航线未展开，点击则取消选中（从地图移除）
@@ -1302,14 +1373,34 @@ export default {
     },
 
     createPlan() {
-      const newId = Date.now();
-      const newPlan = {
-        id: newId,
-        name: `新方案${this.plans.length + 1}`,
-        routes: []
+      this.newPlanForm.name = ''; // 重置名称
+      this.showPlanNameDialog = true; // 打开对话框
+    },
+    async confirmCreatePlan() {
+      this.$refs.newPlanForm.validate(async (valid) => {
+        if (!valid) return;
+        try {
+          const postData = {
+            roomId: this.currentRoomId,
+            name: this.newPlanForm.name,
           };
-      this.plans.push(newPlan);
-      this.selectPlan(newPlan);
+          const res = await addScenario(postData);
+          if (res.code === 200) {
+            this.$message.success('方案创建成功');
+            this.showPlanNameDialog = false;
+            // 刷新列表，确保新方案带上后端 ID
+            await this.getList();
+            // 自动选中最新创建的方案
+            if (res.data && res.data.id) {
+              const newPlan = this.plans.find(p => p.id === res.data.id);
+              if (newPlan) this.selectPlan(newPlan);
+            }
+          }
+        } catch (error) {
+          console.error("创建方案失败:", error);
+          this.$message.error('保存方案失败，请检查网络');
+        }
+      });
     },
     openPlanDialog(plan) {
       this.$prompt('请输入方案名称', '编辑方案', {
@@ -1318,7 +1409,33 @@ export default {
         inputValue: plan.name
       }).then(({value}) => {
         plan.name = value;
-      }).catch(() => {});
+      }).catch(() => {
+      });
+    },
+    async executeDeletePlan(plan) {
+      try {
+        const res = await delScenario(plan.id);
+        if (res.code === 200) {
+          this.$message.success('方案删除成功');
+          const relatedRoutes = this.routes.filter(r => r.scenarioId === plan.id);
+          relatedRoutes.forEach(route => {
+            if (this.$refs.cesiumMap) {
+              this.$refs.cesiumMap.removeRouteById(route.id);
+            }
+            const idx = this.activeRouteIds.indexOf(route.id);
+            if (idx > -1) {
+              this.activeRouteIds.splice(idx, 1);
+            }
+          });
+          //重置方案选中状态
+          if (this.selectedPlanId === plan.id) {
+            this.selectedPlanId = null;
+          }
+          await this.getList(); // 刷新列表
+        }
+      } catch (e) {
+        if (e !== 'cancel') console.error("删除方案失败:", e);
+      }
     },
     addWaypoint() {
       if (this.selectedRouteDetails) {
@@ -1337,7 +1454,6 @@ export default {
         }
       }
     },
-
     cancelRoute() {
       // 清空所有选中的航线
       if (this.$refs.cesiumMap) {
@@ -1381,7 +1497,6 @@ export default {
             this.selectedRouteDetails = null;
           }
         }
-        this.$message.info(`已隐藏航线: ${route.name}`);
       } else {
         // 航线已隐藏，显示它
         this.selectRoute(route);
@@ -1440,6 +1555,7 @@ export default {
   background-position: center;
   z-index: 1;
 }
+
 /* ...其余样式省略，保持不变... */
 .map-overlay-text {
   position: absolute;

ruoyi-ui/src/views/selectRoom/index.vue

@@ -192,7 +192,10 @@ export default {
     },
     enterRoom() {
       if (this.selectedRoom) {
-        this.$router.push('/childRoom');
+        this.$router.push({
+          path: '/childRoom',
+          query: { roomId: this.selectedRoom }
+        });
       }
     },
     showContextMenu(event, room) {