From e7b63195381a69534f5f10fc3e66d8d5d9a50dd6 Mon Sep 17 00:00:00 2001
From: ctw <1051735452@qq.com>
Date: Thu, 22 Jan 2026 11:06:14 +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=E5=87=BA=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/cesiumMap/index.vue            | 653 +++-------------------
 ruoyi-ui/src/views/childRoom/RightPanel.vue       |  67 ++-
 ruoyi-ui/src/views/childRoom/index.vue            |  92 +--
 ruoyi-ui/src/views/dialogs/RouteEditDialog.vue    | 255 ++-------
 ruoyi-ui/src/views/dialogs/WaypointEditDialog.vue | 114 ++--
 5 files changed, 301 insertions(+), 880 deletions(-)

diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue
index 7ce9d22..fecb74a 100644
--- a/ruoyi-ui/src/views/cesiumMap/index.vue
+++ b/ruoyi-ui/src/views/cesiumMap/index.vue
@@ -12,7 +12,6 @@
       @import-data="importData"
       @locate="handleLocate"
     />
-
     <measurement-panel
       v-if="measurementResult"
       :result="measurementResult"
@@ -20,7 +19,6 @@
     />
   </div>
 </template>
-
 <script>
 import * as Cesium from 'cesium'
 import 'cesium/Build/Cesium/Widgets/widgets.css'
@@ -57,13 +55,6 @@ export default {
     return {
       viewer: null,
       scaleBar: null,
-      isToolbarCollapsed: false,
-
-      // ================== 新增：定位数据 ==================
-      targetLng: 116.3974, // 默认经度 (北京)
-      targetLat: 39.9093,  // 默认纬度
-      // =================================================
-
       // 绘制相关
       drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle'
       drawingHandler: null,
@@ -72,15 +63,12 @@ export default {
       drawingPoints: [],
       drawingStartPoint: null,
       isDrawing: false,
-
       // 实体管理
       allEntities: [], // 所有绘制的实体
       entityCounter: 0,
       selectedEntity: null, // 当前选中的实体
-
       // 测量结果
       measurementResult: null,
-
       // 默认样式
       defaultStyles: {
         point: { color: '#FF0000', size: 12 },
@@ -100,11 +88,9 @@ export default {
     // this.initMap()
     this.checkCesiumLoaded()
   },
-
   beforeDestroy() {
     this.destroyViewer()
   },
-
   methods: {
     checkCesiumLoaded() {
       if (typeof Cesium === 'undefined') {
@@ -126,7 +112,6 @@ export default {
         // 确保 Cesium 已加载
         Cesium.buildModuleUrl.setBaseUrl(window.CESIUM_BASE_URL)
         Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjN2MzMmE5OS01NGU3LTQzOGQtYjdjZi1mNGIwZTFjZjQ0NmEiLCJpZCI6MTQ0MDc2LCJpYXQiOjE2ODU3NjY1OTN9.iCmFY-5WNdvyAT-EO2j-unrFm4ZN9J6aSuB2wElQZ-I'
-
         this.viewer = new Cesium.Viewer('cesiumViewer', {
           animation: false,
           fullscreenButton: false,
@@ -145,11 +130,9 @@ export default {
           terrainProvider: new Cesium.EllipsoidTerrainProvider(),
           baseLayer: false
         })
-
         this.viewer.cesiumWidget.creditContainer.style.display = "none"
         this.loadOfflineMap()
         this.setup2DConstraints()
-
         this.viewer.camera.setView({
           destination: Cesium.Cartesian3.fromDegrees(116.3974, 39.9093, 5000000),
           orientation: {
@@ -158,10 +141,8 @@ export default {
             roll: 0
           }
         })
-
         this.initScaleBar()
         console.log('Cesium离线二维地图已加载')
-
       } catch (error) {
         console.error('地图错误:', error)
         // 如果Cesium加载失败，显示错误信息
@@ -205,47 +186,39 @@ export default {
         `;
       }
     },
-
     setup2DConstraints() {
       const scene = this.viewer.scene
       const controller = scene.screenSpaceCameraController
-
       controller.enableTilt = false
       controller.enableRotate = false
       controller.enableLook = false
       scene.screenSpaceCameraController.maximumPitch = 0
       scene.screenSpaceCameraController.minimumPitch = 0
     },
-
     loadOfflineMap() {
-  this.viewer.imageryLayers.removeAll()
-  try {
-    // 修改部分：将原来的 ArcGIS 卫星图替换为高德矢量行政图
-    const administrativeMap = new Cesium.UrlTemplateImageryProvider({
-      // 高德地图矢量瓦片服务（纯 2D 行政图风格）
-      url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
-      minimumLevel: 0,
-      maximumLevel: 18,
-      // 高德不需要专门的 TilingScheme，默认即可，或者使用 WebMercator
-      tilingScheme: new Cesium.WebMercatorTilingScheme()
-    })
-
-    this.viewer.imageryLayers.addImageryProvider(administrativeMap)
-
-    // 如果需要叠加路网或注记，可以在这里再 add 一个图层
-
-  } catch (error) {
-    console.error('加载地图失败:', error)
-    this.showGridLayer()
-  }
-},
-
+      this.viewer.imageryLayers.removeAll()
+      try {
+        // 修改部分：将原来的 ArcGIS 卫星图替换为高德矢量行政图
+        const administrativeMap = new Cesium.UrlTemplateImageryProvider({
+          // 高德地图矢量瓦片服务（纯 2D 行政图风格）
+          url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+          minimumLevel: 0,
+          maximumLevel: 18,
+          // 高德不需要专门的 TilingScheme，默认即可，或者使用 WebMercator
+          tilingScheme: new Cesium.WebMercatorTilingScheme()
+        })
+        this.viewer.imageryLayers.addImageryProvider(administrativeMap)
+        // 如果需要叠加路网或注记，可以在这里再 add 一个图层
+      } catch (error) {
+        console.error('加载地图失败:', error)
+        this.showGridLayer()
+      }
+    },
     showGridLayer() {
       const gridProvider = new Cesium.GridImageryProvider()
       this.viewer.imageryLayers.addImageryProvider(gridProvider)
       this.addCoordinateLabels()
     },
-
     addCoordinateLabels() {
       for (let lon = -180; lon <= 180; lon += 30) {
         for (let lat = -90; lat <= 90; lat += 30) {
@@ -265,9 +238,7 @@ export default {
         }
       }
     },
-
     // ================== 绘制功能 ==================
-
     toggleDrawing(mode) {
       if (this.drawingMode === mode) {
         // 停止当前绘制
@@ -278,21 +249,17 @@ export default {
         if (this.drawingMode) {
           this.stopDrawing()
         }
-
         // 开始新的绘制
         this.drawingMode = mode
         this.startDrawing(mode)
       }
     },
-
     startDrawing(mode) {
       this.stopDrawing()
       this.drawingPoints = []
       this.drawingStartPoint = null
       this.isDrawing = true
-
       this.drawingHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
-
       // 根据模式设置不同的鼠标样式和事件
       switch(mode) {
         case 'point':
@@ -311,32 +278,26 @@ export default {
           this.startCircleDrawing()
           break
       }
-
       this.viewer.scene.canvas.style.cursor = 'crosshair'
       console.log(`开始绘制 ${this.getTypeName(mode)}`)
     },
-
     stopDrawing() {
       if (this.drawingHandler) {
         this.drawingHandler.destroy();
         this.drawingHandler = null;
       }
-
       if (this.tempEntity) {
         this.viewer.entities.remove(this.tempEntity);
         this.tempEntity = null;
       }
-
       // 确保也清理预览实体
       if (this.tempPreviewEntity) {
         this.viewer.entities.remove(this.tempPreviewEntity);
         this.tempPreviewEntity = null;
       }
-
       this.drawingPoints = [];
       this.drawingStartPoint = null;
       this.isDrawing = false;
-
       this.viewer.scene.canvas.style.cursor = 'default';
     },
     // ********************************************************************
@@ -350,20 +311,17 @@ export default {
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
     },
-
     // 绘制线
     // 绘制线
     startLineDrawing() {
       this.drawingPoints = [];
       // 记录当前鼠标的实时位置
       let activeCursorPosition = null;
-
       // 清除可能存在的旧实体
       if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
       if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
       this.tempEntity = null;
       this.tempPreviewEntity = null;
-
       // 1. 鼠标移动事件：仅更新坐标变量，不操作实体
       this.drawingHandler.setInputAction((movement) => {
         const newPosition = this.getClickPosition(movement.endPosition);
@@ -371,17 +329,14 @@ export default {
           activeCursorPosition = newPosition;
         }
       }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-
       // 2. 鼠标点击事件：确定点位
       this.drawingHandler.setInputAction((click) => {
         const position = this.getClickPosition(click.position);
         if (position) {
           this.drawingPoints.push(position);
-
           // === 第一步：点击第一个点后，立即创建“动态虚线” ===
           if (this.drawingPoints.length === 1) {
             activeCursorPosition = position; // 初始化鼠标位置
-
             // 创建预览虚线（只创建这一次，之后它会自动随数据更新）
             this.tempPreviewEntity = this.viewer.entities.add({
               polyline: {
@@ -423,7 +378,6 @@ export default {
           }
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
       // 3. 右键完成绘制
       this.drawingHandler.setInputAction(() => {
         // 完成绘制前，移除那条动态虚线
@@ -431,18 +385,15 @@ export default {
           this.viewer.entities.remove(this.tempPreviewEntity);
           this.tempPreviewEntity = null;
         }
-
         if (this.drawingPoints.length > 1) {
           this.finishLineDrawing();
         } else {
           this.cancelDrawing();
         }
-
         // 重置局部变量
         activeCursorPosition = null;
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     },
-
     finishLineDrawing() {
       // 将预览线段转换为最终线段
       if (this.drawingPoints.length > 1) {
@@ -451,17 +402,14 @@ export default {
           this.viewer.entities.remove(this.tempPreviewEntity);
           this.tempPreviewEntity = null;
         }
-
         // 创建最终的实线实体
         const entity = this.addLineEntity([...this.drawingPoints]);
-
         // 计算长度
         const length = this.calculateLineLength([...this.drawingPoints]);
         this.measurementResult = {
           distance: length,
           type: 'line'
         };
-
         this.stopDrawing();
         return entity;
       } else {
@@ -469,19 +417,16 @@ export default {
         return null;
       }
     },
-
     // 绘制多边形
     startPolygonDrawing() {
       this.drawingPoints = [];
       let activeCursorPosition = null; // 存储鼠标实时位置
-
       // 1. 清理旧实体
       // 移除之前可能遗留的实体，确保干净的画布
       if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
       if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
       this.tempEntity = null;
       this.tempPreviewEntity = null;
-
       // 2. 鼠标移动事件：只负责更新坐标变量，不涉及繁重的绘图逻辑
       this.drawingHandler.setInputAction((movement) => {
         const newPosition = this.getClickPosition(movement.endPosition);
@@ -489,17 +434,14 @@ export default {
           activeCursorPosition = newPosition;
         }
       }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-
       // 3. 鼠标点击事件：添加关键点
       this.drawingHandler.setInputAction((click) => {
         const position = this.getClickPosition(click.position);
         if (position) {
           this.drawingPoints.push(position);
-
           // === 关键逻辑：点击第一个点时，创建唯一的“动态多边形” ===
           if (this.drawingPoints.length === 1) {
             activeCursorPosition = position; // 初始化鼠标位置
-
             this.tempEntity = this.viewer.entities.add({
               // --- 填充面配置 ---
               polygon: {
@@ -538,7 +480,6 @@ export default {
           }
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
       // 4. 右键完成绘制
       this.drawingHandler.setInputAction(() => {
         if (this.drawingPoints.length >= 3) {
@@ -546,37 +487,30 @@ export default {
         } else {
           this.cancelDrawing(); // 点数不够则取消
         }
-
         // 重置状态
         activeCursorPosition = null;
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     },
-
     finishPolygonDrawing() {
       const positions = [...this.drawingPoints]
       const entity = this.addPolygonEntity(positions)
-
       // 计算面积
       const area = this.calculatePolygonArea(positions)
       this.measurementResult = {
         area: area,
         type: 'polygon'
       }
-
       this.stopDrawing()
       return entity
     },
-
     // 绘制矩形（优化版：两点定矩形，实时预览）
     startRectangleDrawing() {
       this.drawingPoints = []; // 存储起点和终点
       let activeCursorPosition = null; // 实时鼠标位置
       let startPoint = null; // 记录起点
-
       // 1. 清理旧实体
       if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
       this.tempEntity = null;
-
       // 2. 鼠标移动事件：更新鼠标位置
       this.drawingHandler.setInputAction((movement) => {
         const newPosition = this.getClickPosition(movement.endPosition);
@@ -584,7 +518,6 @@ export default {
           activeCursorPosition = newPosition;
         }
       }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-
       // 3. 鼠标点击事件
       this.drawingHandler.setInputAction((click) => {
         const position = this.getClickPosition(click.position);
@@ -594,7 +527,6 @@ export default {
             startPoint = position;
             this.drawingPoints.push(startPoint);
             activeCursorPosition = startPoint; // 初始化鼠标位置
-
             // 创建动态预览矩形
             this.tempEntity = this.viewer.entities.add({
               rectangle: {
@@ -620,29 +552,24 @@ export default {
             this.drawingPoints.push(position);
             // 停止监听鼠标移动，因为形状已确定
             activeCursorPosition = null;
-
             // 调用完成逻辑
             this.finishRectangleDrawing();
           }
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
       // 4. 右键取消
       this.drawingHandler.setInputAction(() => {
         this.cancelDrawing();
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     },
-
     finishRectangleDrawing() {
       // 1. 获取最终的矩形范围对象
       const rect = Cesium.Rectangle.fromCartesianArray(this.drawingPoints);
-
       // 2. 移除动态预览的临时实体
       if (this.tempEntity) {
         this.viewer.entities.remove(this.tempEntity);
         this.tempEntity = null;
       }
-
       // 3. 创建最终显示的静态实体
       const finalEntity = this.viewer.entities.add({
         id: 'rectangle-' + new Date().getTime(), // 给个唯一ID
@@ -655,52 +582,41 @@ export default {
           clampToGround: true
         }
       });
-
       // 4. 记录到实体列表
       this.allEntities.push(finalEntity);
-
       // 5. 计算并显示面积
       const area = this.calculateRectangleArea(rect);
       this.measurementResult = {
         area: area,
         type: 'rectangle'
       };
-
       // 6. 重置状态
       this.stopDrawing();
     },
-
     // 计算矩形面积（辅助方法）
     calculateRectangleArea(rectangle) {
       // 获取地球椭球体对象
       const ellipsoid = this.viewer.scene.globe.ellipsoid;
-
       // 方法一：使用 Cesium 几何管道计算（更精确，但需要特定模块支持）
       // const geometry = new Cesium.RectangleGeometry({ rectangle: rectangle });
       // const geometryInstance = Cesium.RectangleGeometry.createGeometry(geometry);
       // ...比较复杂
-
       // 方法二：使用采样估算（简单且足够精确）
       // 获取矩形的四个角（弧度）
       const west = rectangle.west;
       const south = rectangle.south;
       const east = rectangle.east;
       const north = rectangle.north;
-
       // 计算中心点的纬度
       const centerLat = (south + north) / 2;
-
       // 计算宽度（东西向距离）：使用余弦定理校正纬度影响
       // 地球半径约为 6378137 米
       const R = 6378137;
       const width = (east - west) * R * Math.cos(centerLat);
-
       // 计算高度（南北向距离）
       const height = (north - south) * R;
-
       // 面积 = 宽 * 高
       const area = Math.abs(width * height);
-
       return area;
     },
     // 绘制圆形
@@ -708,11 +624,9 @@ export default {
       this.drawingPoints = []; // 存储圆心
       let activeCursorPosition = null; // 实时鼠标位置
       let centerPoint = null; // 圆心坐标
-
       // 1. 清理旧实体
       if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
       this.tempEntity = null;
-
       // 2. 鼠标移动事件
       this.drawingHandler.setInputAction((movement) => {
         const newPosition = this.getClickPosition(movement.endPosition);
@@ -720,7 +634,6 @@ export default {
           activeCursorPosition = newPosition;
         }
       }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-
       // 3. 鼠标点击事件
       this.drawingHandler.setInputAction((click) => {
         const position = this.getClickPosition(click.position);
@@ -730,7 +643,6 @@ export default {
             centerPoint = position;
             this.drawingPoints.push(centerPoint);
             activeCursorPosition = centerPoint;
-
             // 创建动态预览圆形
             this.tempEntity = this.viewer.entities.add({
               position: centerPoint, // 圆心固定
@@ -762,31 +674,25 @@ export default {
             // 记录边缘点（虽然圆只需要圆心和半径，但记录下来方便后续处理）
             this.drawingPoints.push(position);
             activeCursorPosition = null; // 停止动态更新
-
             // 传递边缘点位置去结束绘制
             this.finishCircleDrawing(position);
           }
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
       // 4. 右键取消
       this.drawingHandler.setInputAction(() => {
         this.cancelDrawing();
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     },
-
     finishCircleDrawing(edgePosition) {
       const centerPoint = this.drawingPoints[0];
-
       // 1. 计算最终半径
       const radius = Cesium.Cartesian3.distance(centerPoint, edgePosition);
-
       // 2. 移除动态预览实体
       if (this.tempEntity) {
         this.viewer.entities.remove(this.tempEntity);
         this.tempEntity = null;
       }
-
       // 3. 创建最终显示的静态实体
       const finalEntity = this.viewer.entities.add({
         id: 'circle-' + new Date().getTime(),
@@ -800,63 +706,23 @@ export default {
           outlineWidth: 2
         }
       });
-
       // 4. 记录实体
       this.allEntities.push(finalEntity);
-
       // 5. 计算面积 (π * r²) 并显示
       // 半径单位是米，面积单位是平方米
       const area = Math.PI * Math.pow(radius, 2);
-
       this.measurementResult = {
         radius: radius, // 也可以额外显示半径
         area: area,
         type: 'circle'
       };
-
       // 6. 结束绘制状态
       this.stopDrawing();
     },
-
-    flyToLocation() {
-      // 1. 校验输入
-      if (!this.targetLng || !this.targetLat) {
-        alert("请输入有效的经度和纬度！");
-        return;
-      }
-
-      const lng = parseFloat(this.targetLng);
-      const lat = parseFloat(this.targetLat);
-
-      // 简单校验范围
-      if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
-        alert("经纬度超出有效范围！");
-        return;
-      }
-
-      // 2. 执行飞行
-      if (this.viewer) {
-        this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(lng, lat, 5000), // 5000是默认高度，可调整
-          orientation: {
-            heading: Cesium.Math.toRadians(0.0),
-            pitch: Cesium.Math.toRadians(-90.0), // 俯视
-            roll: 0.0
-          },
-          duration: 2 // 飞行持续时间（秒）
-        });
-
-        // 可选：添加一个临时的标记点来指示位置
-        this.addTempMarker(lng, lat);
-      }
-    },
-
     // ================== 实体创建方法 ==================
-
     addPointEntity(lat, lng) {
       this.entityCounter++
       const id = `point_${this.entityCounter}`
-
       const entity = this.viewer.entities.add({
         id: id,
         name: `点 ${this.entityCounter}`,
@@ -878,7 +744,6 @@ export default {
           horizontalOrigin: Cesium.HorizontalOrigin.CENTER
         }
       })
-
       const entityData = {
         id,
         type: 'point',
@@ -889,22 +754,17 @@ export default {
         size: this.defaultStyles.point.size,
         label: `点 ${this.entityCounter}`
       }
-
       this.allEntities.push(entityData)
-
       // 添加点击事件
       entity.clickHandler = (e) => {
         this.selectEntity(entityData)
         e.stopPropagation()
       }
-
       return entityData
     },
-
     addLineEntity(positions) {
       this.entityCounter++
       const id = `line_${this.entityCounter}`
-
       const entity = this.viewer.entities.add({
         id: id,
         name: `线 ${this.entityCounter}`,
@@ -915,7 +775,6 @@ export default {
           clampToGround: true
         }
       })
-
       const entityData = {
         id,
         type: 'line',
@@ -926,24 +785,18 @@ export default {
         width: this.defaultStyles.line.width,
         label: `线 ${this.entityCounter}`
       }
-
       this.allEntities.push(entityData)
-
       entity.clickHandler = (e) => {
         this.selectEntity(entityData)
         e.stopPropagation()
       }
-
       return entityData
     },
-
     addPolygonEntity(positions) {
       this.entityCounter++
       const id = `polygon_${this.entityCounter}`
-
       // 闭合多边形
       const polygonPositions = [...positions, positions[0]]
-
       const entity = this.viewer.entities.add({
         id: id,
         name: `面 ${this.entityCounter}`,
@@ -956,7 +809,6 @@ export default {
           outlineWidth: this.defaultStyles.polygon.width
         }
       })
-
       const entityData = {
         id,
         type: 'polygon',
@@ -968,51 +820,42 @@ export default {
         width: this.defaultStyles.polygon.width,
         label: `面 ${this.entityCounter}`
       }
-
       this.allEntities.push(entityData)
-
       entity.clickHandler = (e) => {
         this.selectEntity(entityData)
         e.stopPropagation()
       }
-
       return entityData
     },
-
     addRectangleEntity(coordinates) {
-  this.entityCounter++
-  const id = `rectangle_${this.entityCounter}`
-
-  const entity = this.viewer.entities.add({
-    id: id,
-    name: `矩形 ${this.entityCounter}`,
-    rectangle: {
-      coordinates: coordinates,
-      material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
-        .withAlpha(this.defaultStyles.rectangle.opacity),
-      outline: true,
-      outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
-      outlineWidth: this.defaultStyles.rectangle.width
-    }
-  })
-
-  // 【重要修改】直接把 entity 推入数组，修复清除功能的 bug
-  this.allEntities.push(entity)
-
-  return entity
-},
+      this.entityCounter++
+      const id = `rectangle_${this.entityCounter}`
+      const entity = this.viewer.entities.add({
+        id: id,
+        name: `矩形 ${this.entityCounter}`,
+        rectangle: {
+          coordinates: coordinates,
+          material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
+            .withAlpha(this.defaultStyles.rectangle.opacity),
+          outline: true,
+          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
+          outlineWidth: this.defaultStyles.rectangle.width
+        }
+      })
+      // 【重要修改】直接把 entity 推入数组，修复清除功能的 bug
+      this.allEntities.push(entity)
+      return entity
+    },
     addCircleEntity(center, radius) {
       // 确保半径有效
       const validRadius = Math.max(radius, 1)
-      
+
       this.entityCounter++
       const id = `circle_${this.entityCounter}`
-
       const entity = this.viewer.entities.add({
         id: id,
         name: `圆形 ${this.entityCounter}`,
         position: center, // 圆心位置
-
         // 【优化】使用 ellipse (椭圆) 绘制圆形
         ellipse: {
           semiMinorAxis: validRadius, // 半短轴 = 半径
@@ -1024,20 +867,15 @@ export default {
           outlineWidth: this.defaultStyles.circle.width
         }
       })
-
       // 【重要修改】直接把 entity 推入数组
       this.allEntities.push(entity)
-
       return entity
     },
-
     // ================== 工具方法 ==================
-
     getClickPosition(pixelPosition) {
       const cartesian = this.viewer.camera.pickEllipsoid(pixelPosition, this.viewer.scene.globe.ellipsoid)
       return cartesian
     },
-
     cartesianToLatLng(cartesian) {
       const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
       return {
@@ -1045,11 +883,9 @@ export default {
         lng: Cesium.Math.toDegrees(cartographic.longitude)
       }
     },
-
     calculateRectangle(start, end) {
       const startLL = this.cartesianToLatLng(start)
       const endLL = this.cartesianToLatLng(end)
-
       return Cesium.Rectangle.fromDegrees(
         Math.min(startLL.lng, endLL.lng),
         Math.min(startLL.lat, endLL.lat),
@@ -1057,22 +893,17 @@ export default {
         Math.max(startLL.lat, endLL.lat)
       )
     },
-
     calculateCircle(center, radius, segments) {
       const positions = []
       const centerLL = Cesium.Cartographic.fromCartesian(center)
-
       for (let i = 0; i < segments; i++) {
         const angle = (i / segments) * Math.PI * 2
         const lat = centerLL.latitude + (radius / 6378137) * Math.sin(angle)
         const lon = centerLL.longitude + (radius / 6378137) * Math.cos(angle) / Math.cos(centerLL.latitude)
-
         positions.push(Cesium.Cartesian3.fromRadians(lon, lat))
       }
-
       return positions
     },
-
     calculateLineLength(positions) {
       let totalLength = 0
       for (let i = 0; i < positions.length - 1; i++) {
@@ -1080,25 +911,19 @@ export default {
       }
       return totalLength
     },
-
     calculatePolygonArea(positions) {
       if (positions.length < 3) return 0
-
       let area = 0
       const n = positions.length
-
       for (let i = 0; i < n; i++) {
         const j = (i + 1) % n
         const p1 = Cesium.Cartographic.fromCartesian(positions[i])
         const p2 = Cesium.Cartographic.fromCartesian(positions[j])
-
         area += p1.longitude * p2.latitude - p2.longitude * p1.latitude
       }
-
       area = Math.abs(area) * 6378137 * 6378137 / 2
       return area
     },
-
     calculateRectangleArea(coordinates) {
       const rect = coordinates.getValue ? coordinates.getValue() : coordinates
       const width = Cesium.Cartesian3.distance(
@@ -1109,15 +934,11 @@ export default {
         Cesium.Cartesian3.fromRadians(rect.west, rect.north),
         Cesium.Cartesian3.fromRadians(rect.west, rect.south)
       )
-
       return width * height
     },
-
     // ================== 实体管理 ==================
-
     selectEntity(entity) {
       this.selectedEntity = entity
-
       // 居中显示
       if (entity.type === 'point') {
         this.viewer.camera.flyTo({
@@ -1134,13 +955,10 @@ export default {
         })
       }
     },
-
     updateEntityStyle() {
       if (!this.selectedEntity || !this.selectedEntity.entity) return
-
       const entity = this.selectedEntity.entity
       const data = this.selectedEntity
-
       switch(data.type) {
         case 'point':
           entity.point.color = Cesium.Color.fromCssColorString(data.color)
@@ -1167,91 +985,76 @@ export default {
           break
       }
     },
-
     updateEntityLabel() {
       if (!this.selectedEntity || !this.selectedEntity.entity) return
-
       const entity = this.selectedEntity.entity
       entity.name = this.selectedEntity.label
-
       // 如果是点，更新标签
       if (this.selectedEntity.type === 'point') {
         entity.label.text = this.selectedEntity.label
       }
     },
-
     deleteSelectedEntity() {
       if (this.selectedEntity) {
         this.removeEntity(this.selectedEntity.id)
         this.selectedEntity = null
       }
     },
-
     removeEntity(id) {
       const index = this.allEntities.findIndex(e => e.id === id)
       if (index > -1) {
         const entity = this.allEntities[index]
-
         // 从地图中移除
         if (entity.entity) {
           this.viewer.entities.remove(entity.entity)
         }
-
         // 从数组中移除
         this.allEntities.splice(index, 1)
-
         // 如果删除的是选中的实体，清空选中状态
         if (this.selectedEntity && this.selectedEntity.id === id) {
           this.selectedEntity = null
         }
       }
     },
-
     clearAll() {
-  // 1. 检查数组是否有内容
-  if (this.allEntities && this.allEntities.length > 0) {
-
-    // 2. 遍历每一个对象进行删除
-    this.allEntities.forEach(item => {
-      try {
-        // 情况 A: 数组里存的是原生的 Cesium Entity (点、线通常是这种情况)
-        if (item instanceof Cesium.Entity) {
-          this.viewer.entities.remove(item);
-        }
-        // 情况 B: 数组里存的是包装对象 (你的矩形、圆可能是这种 { entity: ... })
-        else if (item.entity && item.entity instanceof Cesium.Entity) {
-          this.viewer.entities.remove(item.entity);
-        }
-        // 情况 C: 兜底方案，尝试通过 ID 删除
-        else if (item.id) {
-          this.viewer.entities.removeById(item.id);
-        }
-      } catch (e) {
-        console.warn('删除实体失败:', e);
+      // 1. 检查数组是否有内容
+      if (this.allEntities && this.allEntities.length > 0) {
+        // 2. 遍历每一个对象进行删除
+        this.allEntities.forEach(item => {
+          try {
+            // 情况 A: 数组里存的是原生的 Cesium Entity (点、线通常是这种情况)
+            if (item instanceof Cesium.Entity) {
+              this.viewer.entities.remove(item);
+            }
+            // 情况 B: 数组里存的是包装对象 (你的矩形、圆可能是这种 { entity: ... })
+            else if (item.entity && item.entity instanceof Cesium.Entity) {
+              this.viewer.entities.remove(item.entity);
+            }
+            // 情况 C: 兜底方案，尝试通过 ID 删除
+            else if (item.id) {
+              this.viewer.entities.removeById(item.id);
+            }
+          } catch (e) {
+            console.warn('删除实体失败:', e);
+          }
+        });
       }
-    });
-  }
-
-  // 3. 清空数组
-  this.allEntities = [];
-
-  // 4. 清理可能残留的绘制过程中的临时图形
-  if (this.tempEntity) {
-    this.viewer.entities.remove(this.tempEntity);
-    this.tempEntity = null;
-  }
-  if (this.tempPreviewEntity) {
-    this.viewer.entities.remove(this.tempPreviewEntity);
-    this.tempPreviewEntity = null;
-  }
-
-  // 5. 重置其他状态（如测量面板、绘制状态）
-  this.measurementResult = null;
-  this.stopDrawing();
-},
-
+      // 3. 清空数组
+      this.allEntities = [];
+      // 4. 清理可能残留的绘制过程中的临时图形
+      if (this.tempEntity) {
+        this.viewer.entities.remove(this.tempEntity);
+        this.tempEntity = null;
+      }
+      if (this.tempPreviewEntity) {
+        this.viewer.entities.remove(this.tempPreviewEntity);
+        this.tempPreviewEntity = null;
+      }
+      // 5. 重置其他状态（如测量面板、绘制状态）
+      this.measurementResult = null;
+      this.stopDrawing();
+    },
     // ================== 其他方法 ==================
-
     getTypeName(type) {
       const names = {
         point: '点',
@@ -1262,7 +1065,6 @@ export default {
       }
       return names[type] || type
     },
-
     exportData() {
       const data = {
         version: '1.0',
@@ -1285,7 +1087,6 @@ export default {
           }
         }))
       }
-
       const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
       const url = URL.createObjectURL(blob)
       const a = document.createElement('a')
@@ -1293,10 +1094,8 @@ export default {
       a.download = `cesium-drawing-${new Date().toISOString().slice(0, 10)}.json`
       a.click()
       URL.revokeObjectURL(url)
-
       console.log('数据已导出', data)
     },
-
     importData() {
       const input = document.createElement('input')
       input.type = 'file'
@@ -1304,7 +1103,6 @@ export default {
       input.onchange = (e) => {
         const file = e.target.files[0]
         if (!file) return
-
         const reader = new FileReader()
         reader.onload = (event) => {
           try {
@@ -1327,11 +1125,9 @@ export default {
       }
       input.click()
     },
-
     importEntity(entityData) {
       let entity
       const color = entityData.color || '#008aff'
-
       switch (entityData.type) {
         case 'point':
           entity = this.viewer.entities.add({
@@ -1354,7 +1150,6 @@ export default {
             }
           })
           break
-
         case 'line':
           const linePositions = entityData.data.points.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat))
           entity = this.viewer.entities.add({
@@ -1375,7 +1170,6 @@ export default {
             }
           })
           break
-
         case 'polygon':
           const polygonPositions = entityData.data.points.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat))
           entity = this.viewer.entities.add({
@@ -1397,7 +1191,6 @@ export default {
             }
           })
           break
-
         case 'rectangle':
           const rectCoords = entityData.data.coordinates
           entity = this.viewer.entities.add({
@@ -1419,7 +1212,6 @@ export default {
             }
           })
           break
-
         case 'circle':
           // 检查半径是否有效
           const radius = entityData.data.radius || 1000
@@ -1450,7 +1242,6 @@ export default {
           })
           break
       }
-
       if (entity) {
         this.allEntities.push({
           id: entity.id,
@@ -1461,7 +1252,6 @@ export default {
         })
       }
     },
-
     handleLocate() {
       const h = this.$createElement
       this.$msgbox({
@@ -1503,7 +1293,6 @@ export default {
             const latInput = instance.$el.querySelector('input[placeholder="例如 39.90"]')
             const lng = parseFloat(lngInput.value)
             const lat = parseFloat(latInput.value)
-
             if (!lng || !lat || isNaN(lng) || isNaN(lat)) {
               this.$message.error('请输入有效的经度和纬度！')
               return
@@ -1512,7 +1301,6 @@ export default {
               this.$message.error('经纬度超出有效范围！')
               return
             }
-
             if (this.viewer) {
               this.viewer.camera.flyTo({
                 destination: Cesium.Cartesian3.fromDegrees(lng, lat, 5000),
@@ -1569,284 +1357,6 @@ export default {
   height: 100%;
 }
 
-/* 主工具栏 - 修改后 */
-.main-toolbar {
-  position: absolute;
-  top: 365px; /* 增大这个数值即可整体下移，比如从100px改成150px */
-  left: 62px;
-  z-index: 1000;
-  display: flex;
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  transition: all 0.3s ease;
-}
-
-.main-toolbar.collapsed {
-  background: rgba(255, 255, 255, 0.9);
-}
-
-/* 工具栏内容 - 无需修改 */
-.toolbar-content {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  padding: 15px;
-  min-width: 180px;
-}
-
-/* 收起按钮 */
-.collapse-btn {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  cursor: pointer;
-  background: #f8f9fa;
-  border-top-left-radius: 12px;
-  border-bottom-left-radius: 12px;
-  border-right: 1px solid #e9ecef;
-  transition: all 0.3s ease;
-  user-select: none;
-}
-
-.collapse-btn:hover {
-  background: #e9ecef;
-}
-
-.collapse-icon {
-  font-size: 14px;
-  font-weight: bold;
-  color: #495057;
-  margin-right: 5px;
-}
-
-.collapse-text {
-  font-size: 12px;
-  color: #6c757d;
-  white-space: nowrap;
-}
-
-/* 工具栏组 */
-.toolbar-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #e9ecef;
-}
-
-.toolbar-group:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-/* 收起时的最小化工具栏 */
-.toolbar-minimized {
-  display: flex;
-  flex-direction: column;
-  padding: 10px 8px;
-  gap: 8px;
-}
-
-.min-tool-btn {
-  width: 36px;
-  height: 36px;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
-  background: white;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  color: #495057;
-  transition: all 0.3s ease;
-}
-
-.min-tool-btn:hover {
-  background: #f8f9fa;
-  border-color: #4dabf7;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.min-tool-btn.active {
-  background: #4dabf7;
-  color: white;
-  border-color: #4dabf7;
-}
-
-.min-tool-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none !important;
-}
-
-.min-tool-btn.danger {
-  color: #dc3545;
-}
-
-.min-tool-btn.danger:hover {
-  background: #f8d7da;
-  border-color: #dc3545;
-}
-
-.min-tool-btn.success {
-  color: #28a745;
-}
-
-.min-tool-btn.success:hover {
-  background: #d4edda;
-  border-color: #28a745;
-}
-
-.min-tool-separator {
-  height: 1px;
-  background: #e9ecef;
-  margin: 5px 0;
-}
-
-/* 定位面板样式 */
-.location-panel {
-  position: absolute;
-  top: -80px;
-  right: -180px; /* 放在右上角 */
-  z-index: 1000;
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 8px;
-  padding: 10px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-}
-
-.input-group {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.input-group input {
-  width: 100px;
-  padding: 6px 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  outline: none;
-  font-size: 14px;
-}
-
-.input-group input:focus {
-  border-color: #4dabf7;
-}
-
-.location-btn {
-  background: #4dabf7;
-  color: white;
-  border: none;
-  padding: 6px 15px;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  transition: background 0.3s;
-}
-
-.location-btn:hover {
-  background: #3b8dbd;
-}
-
-/* 原来的工具按钮样式保持不变，但添加展开/收起状态的调整 */
-.tool-btn {
-  padding: 10px 15px;
-  background: white;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #495057;
-  transition: all 0.3s ease;
-  min-width: 120px;
-}
-
-.tool-btn:hover {
-  background: #f8f9fa;
-  border-color: #4dabf7;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.tool-btn.active {
-  background: #4dabf7;
-  color: white;
-  border-color: #4dabf7;
-}
-
-.tool-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none !important;
-}
-
-.tool-btn.danger {
-  color: #dc3545;
-}
-
-.tool-btn.danger:hover {
-  background: #f8d7da;
-  border-color: #dc3545;
-}
-
-.tool-btn.success {
-  color: #28a745;
-}
-
-.tool-btn.success:hover {
-  background: #d4edda;
-  border-color: #28a745;
-}
-
-.tool-btn .icon {
-  font-size: 16px;
-  width: 20px;
-  text-align: center;
-}
-
-.tool-btn .text {
-  white-space: nowrap;
-}
-
-/* 其他样式保持不变... */
-
-/* 属性面板 */
-.property-panel {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  z-index: 1000;
-  background: rgba(255, 255, 255, 0.98);
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  min-width: 250px;
-  max-width: 300px;
-}
-
-/* 测量结果面板 */
-.measurement-panel {
-  position: absolute;
-  bottom: 80px;
-  left: 20px;
-  z-index: 1000;
-  background: rgba(255, 255, 255, 0.98);
-  border-radius: 12px;
-  padding: 15px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  min-width: 200px;
-}
-
 /* 自定义比例尺样式 */
 :deep(.scale-bar-container) {
   user-select: none;
@@ -1865,21 +1375,4 @@ export default {
 :deep(.cesium-credit-textContainer) {
   display: none !important;
 }
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-  .main-toolbar {
-    right: 10px;
-    top: 80px;
-  }
-
-  .toolbar-content {
-    min-width: 150px;
-  }
-
-  .tool-btn {
-    min-width: 100px;
-    padding: 8px 12px;
-  }
-}
 </style>
diff --git a/ruoyi-ui/src/views/childRoom/RightPanel.vue b/ruoyi-ui/src/views/childRoom/RightPanel.vue
index ec856e0..c199ccb 100644
--- a/ruoyi-ui/src/views/childRoom/RightPanel.vue
+++ b/ruoyi-ui/src/views/childRoom/RightPanel.vue
@@ -15,17 +15,19 @@
     >
       <div v-if="activeTab === 'plan'" class="tab-content plan-content">
         <div class="section">
-          <div class="section-title" style="display: flex; justify-content: space-between; align-items: center;">
-  <span>航线列表</span>
-  <el-button 
-    type="text" 
-    icon="el-icon-circle-plus-outline" 
-    style="padding: 0; color: #008aff; font-size: 14px;" 
-    @click="handleCreateRoute"
-  >
-    新建航线
-  </el-button>
-</div>
+          <div class="section-header">
+            <div class="section-title">航线列表</div>
+            <el-button
+              type="text"
+              icon="el-icon-plus"
+              size="mini"
+              class="header-action-btn"
+              @click="handleCreateRoute"
+            >
+              新建
+            </el-button>
+          </div>
+
           <div class="route-list">
             <div
               v-for="route in routes"
@@ -53,6 +55,7 @@
             </div>
           </div>
         </div>
+
         <div v-if="selectedRouteDetails" class="section">
           <div class="section-title">航点列表</div>
           <div class="waypoint-list">
@@ -60,7 +63,6 @@
               v-for="point in selectedRouteDetails.waypoints"
               :key="point.name"
               class="waypoint-item"
-              @click="handleOpenWaypointDialog(point)"
             >
               <i class="el-icon-location"></i>
               <div class="waypoint-info">
@@ -259,6 +261,11 @@ export default {
       this.$emit('select-route', route)
     },
 
+    // 新增：新建航线事件
+    handleCreateRoute() {
+      this.$emit('create-route')
+    },
+
     handleOpenRouteDialog(route) {
       this.$emit('open-route-dialog', route)
     },
@@ -286,18 +293,14 @@ export default {
     handleRunConflictCheck() {
       this.$emit('run-conflict-check')
     },
-// ... existing code ...
+
     handleOpenPlatformDialog(platform) {
       this.$emit('open-platform-dialog', platform)
-    },
-
-    handleCreateRoute() {
-      this.$emit('create-route')
     }
-
   }
 }
 </script>
+
 <style scoped>
 /* 右侧外部隐藏按钮 */
 .right-external-hide-btn {
@@ -368,13 +371,31 @@ export default {
   margin-bottom: 20px;
 }
 
+/* 新增：标题栏容器样式 */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid rgba(0, 138, 255, 0.2);
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+}
+
+/* 修改：移除了原有的 border-bottom，改在 section-header 中统一定义 */
 .section-title {
   font-size: 14px;
   font-weight: 600;
   color: #008aff;
-  margin-bottom: 10px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid rgba(0, 138, 255, 0.2);
+}
+
+/* 新增：头部按钮样式 */
+.header-action-btn {
+  padding: 0;
+  color: #008aff;
+}
+
+.header-action-btn:hover {
+  color: #0066cc;
 }
 
 .route-list {
@@ -455,7 +476,7 @@ export default {
   padding: 10px;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 6px;
-  cursor: pointer;
+  /* 移除 cursor: pointer 因为不再整行可点 */
   transition: all 0.3s;
   border: 1px solid rgba(0, 138, 255, 0.1);
 }
@@ -723,4 +744,4 @@ export default {
 .blue-warning {
   color: #e6a23c;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue
index ecea06a..6694a8e 100644
--- a/ruoyi-ui/src/views/childRoom/index.vue
+++ b/ruoyi-ui/src/views/childRoom/index.vue
@@ -1,9 +1,6 @@
 <template>
-  <!-- 以地图为绝对定位背景，所有组件浮动其上 -->
   <div class="mission-planning-container">
-    <!-- 地图背景 -->
     <div id="gis-map-background" class="map-background">
-      <!-- cesiummap组件 -->
       <cesiumMap :drawDomClick="drawDom"/>
       <div class="map-overlay-text">
         <i class="el-icon-location-outline text-3xl mb-2 block"></i>
@@ -11,7 +8,6 @@
         <p class="text-sm mt-1">支持标绘/航线/空域/实时态势</p>
       </div>
 
-      <!-- 地图中间的浮动红点（触发左侧菜单） -->
       <div
         class="floating-red-dot left-red-dot"
         :class="{ hidden: !isMenuHidden }"
@@ -23,7 +19,6 @@
       </div>
     </div>
 
-    <!-- 顶部导航栏 -->
     <top-header
       :room-code="roomCode"
       :online-count="onlineCount"
@@ -71,7 +66,6 @@
       @show-online-members="showOnlineMembersDialog"
     />
 
-    <!-- 左侧折叠菜单栏 - 蓝色主题 -->
     <left-menu
       :is-hidden="isMenuHidden"
       :menu-items="menuItems"
@@ -80,7 +74,6 @@
       @select="selectMenu"
     />
 
-    <!-- 右侧实体列表（浮动）- 蓝色主题 -->
     <right-panel
       :is-hidden="isRightPanelHidden"
       :active-tab="activeRightTab"
@@ -94,6 +87,7 @@
       :ground-platforms="groundPlatforms"
       @hide="hideRightPanel"
       @select-route="selectRoute"
+      @create-route="createRoute"
       @open-route-dialog="openRouteDialog"
       @open-waypoint-dialog="openWaypointDialog"
       @add-waypoint="addWaypoint"
@@ -104,15 +98,12 @@
       @open-platform-dialog="openPlatformDialog"
     />
 
-    <!-- 左下角工具面板 -->
     <bottom-left-panel />
 
-    <!-- 底部时间轴（最初版本的样式）- 蓝色主题 -->
     <div
       class="floating-timeline blue-theme"
       :class="{ 'show': showKTimePopup }"
     >
-      <!-- 隐藏按钮（向下箭头） -->
       <div class="popup-hide-btn" @click="hideKTimePopup" title="隐藏K时">
         <i class="el-icon-arrow-down"></i>
       </div>
@@ -166,26 +157,22 @@
 
     </div>
 
-    <!-- 在线成员弹窗 -->
     <online-members-dialog
       v-model="showOnlineMembers"
     />
 
-    <!-- 平台编辑弹窗 -->
     <platform-edit-dialog
       v-model="showPlatformDialog"
       :platform="selectedPlatform"
       @save="updatePlatform"
     />
 
-    <!-- 航线编辑弹窗 -->
     <route-edit-dialog
       v-model="showRouteDialog"
       :route="selectedRoute"
       @save="updateRoute"
     />
 
-    <!-- 航点编辑弹窗 -->
     <waypoint-edit-dialog
       v-model="showWaypointDialog"
       :waypoint="selectedWaypoint"
@@ -348,9 +335,7 @@ export default {
   },
   methods: {
     // 显示在线成员弹窗
-    showOnlineMembersDialog() {
-      this.showOnlineMembers = true;
-    },
+
     // 平台编辑弹窗相关方法
     openPlatformDialog(platform) {
       this.selectedPlatform = platform;
@@ -365,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) {
@@ -375,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();
@@ -618,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;
@@ -725,7 +750,7 @@ export default {
       return `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
     },
 
-    // 航线操作
+    // 航线操作：点击列表项只展示详情，不弹窗
     selectRoute(route) {
       this.selectedRouteId = route.id;
       // 模拟获取航点数据
@@ -738,8 +763,7 @@ export default {
           { name: 'WP4', altitude: 5800, speed: '830km/h', eta: 'K+01:25:00' },
         ]
       };
-      // 打开航线编辑弹窗
-      this.openRouteDialog(route);
+      // 移除原有的 this.openRouteDialog(route);
     },
 
     addWaypoint() {
@@ -792,6 +816,7 @@ export default {
 </script>
 
 <style scoped>
+/* 保持原有样式不变，仅修复背景图语法的注释部分 */
 .mission-planning-container {
   position: relative;
   width: 100vw;
@@ -806,14 +831,13 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(135deg, #1a2f4b 0%, #2c3e50 100%);
-  /* 正确的写法，直接复制这行替换 */
-background: url('~@/assets/map-background.png');
+  /* 修复：使用正确的背景图语法 */
+  background: url('~@/assets/map-background.png');
   background-size: cover;
   background-position: center;
   z-index: 1;
 }
-
+/* ...其余样式省略，保持不变... */
 .map-overlay-text {
   position: absolute;
   top: 50%;
@@ -825,7 +849,6 @@ background: url('~@/assets/map-background.png');
   pointer-events: none;
 }
 
-/* 地图中间的浮动红点 - 通用样式 */
 .floating-red-dot {
   position: absolute;
   top: 50%;
@@ -854,7 +877,6 @@ background: url('~@/assets/map-background.png');
   display: none;
 }
 
-/* 左侧红点 */
 .left-red-dot {
   left: 20px;
   transform: translateY(-50%);
@@ -886,7 +908,6 @@ background: url('~@/assets/map-background.png');
   }
 }
 
-/* 蓝色主题通用类 */
 .blue-theme {
   background: rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(10px);
@@ -951,7 +972,6 @@ background: url('~@/assets/map-background.png');
   box-shadow: 0 0 10px rgba(0, 138, 255, 0.8);
 }
 
-/* 蓝色主题标签页 */
 .blue-tabs >>> .el-tabs__item {
   color: #666;
   transition: all 0.3s;
@@ -975,7 +995,6 @@ background: url('~@/assets/map-background.png');
   background-color: rgba(0, 138, 255, 0.3);
 }
 
-/* 底部时间轴（最初版本的样式）- 蓝色主题 */
 .floating-timeline {
   position: absolute;
   bottom: 20px;
@@ -1146,7 +1165,6 @@ background: url('~@/assets/map-background.png');
   font-weight: 500;
 }
 
-/* 滚动条样式 */
 ::-webkit-scrollbar {
   width: 6px;
 }
diff --git a/ruoyi-ui/src/views/dialogs/RouteEditDialog.vue b/ruoyi-ui/src/views/dialogs/RouteEditDialog.vue
index ecee213..f62fd46 100644
--- a/ruoyi-ui/src/views/dialogs/RouteEditDialog.vue
+++ b/ruoyi-ui/src/views/dialogs/RouteEditDialog.vue
@@ -1,66 +1,30 @@
 <template>
-  <div v-if="value" class="route-edit-dialog">
-    <!-- 遮罩层 -->
-    <div class="dialog-overlay" @click="closeDialog"></div>
-    
-    <!-- 弹窗内容 -->
-    <div class="dialog-content">
-      <div class="dialog-header">
-        <h3>航线编辑</h3>
-        <div class="close-btn" @click="closeDialog">×</div>
-      </div>
-      
-      <div class="dialog-body">
-        <el-form :model="formData" :rules="rules" ref="formRef" label-width="80px" size="small">
-          <!-- 基本信息 -->
-          <el-form-item label="名称" prop="name">
-            <el-input v-model="formData.name" placeholder="请输入航线名称"></el-input>
-          </el-form-item>
-          
-          <el-form-item label="航向" prop="heading">
-            <el-input-number 
-              v-model="formData.heading" 
-              :min="0" 
-              :max="360"
-              placeholder="请输入航向"
-              style="width: 100%;"
-              suffix="°"
-            ></el-input-number>
-          </el-form-item>
-          
-          <el-form-item label="时间" prop="time">
-            <el-input v-model="formData.time" placeholder="请输入时间（如：K+00:40:00）"></el-input>
-          </el-form-item>
-          
-          <el-form-item label="速度" prop="speed">
-            <el-input v-model="formData.speed" placeholder="请输入速度" suffix="km/h"></el-input>
-          </el-form-item>
-          
-          <el-form-item label="距离" prop="distance">
-            <el-input-number 
-              v-model="formData.distance" 
-              :min="0" 
-              :precision="2"
-              placeholder="请输入距离"
-              style="width: 100%;"
-              suffix="km"
-            ></el-input-number>
-          </el-form-item>
-        </el-form>
-      </div>
-      
-      <div class="dialog-footer">
-        <el-button @click="closeDialog">取消</el-button>
-        <el-button type="primary" @click="saveRoute">保存</el-button>
-      </div>
-    </div>
-  </div>
+  <el-dialog
+    title="编辑航线"
+    :visible.sync="visible"
+    width="300px"
+    :close-on-click-modal="false"
+    append-to-body
+    custom-class="blue-dialog"
+  >
+    <el-form :model="form" label-width="70px" size="small" @submit.native.prevent>
+      <el-form-item label="航线名称">
+        <el-input v-model="form.name" placeholder="请输入航线名称"></el-input>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="visible = false">取 消</el-button>
+      <el-button type="primary" size="mini" class="blue-btn" @click="handleSave">确 定</el-button>
+    </span>
+  </el-dialog>
 </template>
 
 <script>
 export default {
   name: 'RouteEditDialog',
   props: {
+    // 配合父组件的 v-model="showRouteDialog"
     value: {
       type: Boolean,
       default: false
@@ -72,158 +36,55 @@ export default {
   },
   data() {
     return {
-      formData: {
-        name: '',
-        heading: 0,
-        time: '',
-        speed: '',
-        distance: 0
+      form: {
+        id: '',
+        name: ''
+      }
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
       },
-      rules: {
-        name: [
-          { required: true, message: '请输入航线名称', trigger: 'blur' }
-        ],
-        heading: [
-          { type: 'number', message: '航向必须为数字', trigger: 'blur' },
-          { min: 0, max: 360, message: '航向必须在0-360度之间', trigger: 'blur' }
-        ],
-        time: [
-          { required: true, message: '请输入时间', trigger: 'blur' }
-        ],
-        speed: [
-          { required: true, message: '请输入速度', trigger: 'blur' },
-          { type: 'number', message: '速度必须为数字', trigger: 'blur' }
-        ],
-        distance: [
-          { type: 'number', message: '距离必须为数字', trigger: 'blur' }
-        ]
+      set(val) {
+        this.$emit('input', val)
       }
-    };
+    }
   },
   watch: {
-    value(newVal) {
-      if (newVal && this.route) {
-        this.initFormData();
-      }
-    },
-    route(newVal) {
-      if (this.value && newVal) {
-        this.initFormData();
-      }
+    // 每次打开弹窗或 route 变化时，深拷贝数据到 form
+    route: {
+      handler(val) {
+        if (val) {
+          // 只取需要的字段，防止污染
+          this.form = {
+            id: val.id,
+            name: val.name
+          }
+        }
+      },
+      immediate: true,
+      deep: true
     }
   },
   methods: {
-    initFormData() {
-      // 初始化表单数据，如果航线有相关属性则使用，否则使用默认值
-      this.formData = {
-        name: this.route.name || '',
-        heading: this.route.heading || 0,
-        time: this.route.time || '',
-        speed: this.route.speed || '',
-        distance: this.route.distance || 0
-      };
-    },
-    closeDialog() {
-      this.$emit('input', false);
-    },
-    saveRoute() {
-      this.$refs.formRef.validate((valid) => {
-        if (valid) {
-          // 发送保存事件，将更新后的数据传递给父组件
-          this.$emit('save', {
-            ...this.route,
-            ...this.formData
-          });
-          this.closeDialog();
-        }
-      });
+    handleSave() {
+      // 这里的 form 包含了修改后的 name
+      this.$emit('save', this.form)
+      this.visible = false
     }
   }
-};
+}
 </script>
 
 <style scoped>
-.route-edit-dialog {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dialog-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(2px);
+.blue-btn {
+  background: #008aff;
+  border-color: #008aff;
 }
-
-.dialog-content {
-  position: relative;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  width: 90%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-  animation: dialog-fade-in 0.3s ease;
-}
-
-@keyframes dialog-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.dialog-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.close-btn {
-  font-size: 20px;
-  color: #999;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.close-btn:hover {
-  color: #666;
-}
-
-.dialog-body {
-  padding: 20px;
-}
-
-.dialog-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 16px 20px;
-  border-top: 1px solid #e8e8e8;
-  gap: 10px;
+.blue-btn:hover {
+  background: #0066cc;
+  border-color: #0066cc;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/ruoyi-ui/src/views/dialogs/WaypointEditDialog.vue b/ruoyi-ui/src/views/dialogs/WaypointEditDialog.vue
index f32ec32..57e05d4 100644
--- a/ruoyi-ui/src/views/dialogs/WaypointEditDialog.vue
+++ b/ruoyi-ui/src/views/dialogs/WaypointEditDialog.vue
@@ -1,52 +1,61 @@
 <template>
   <div v-if="value" class="waypoint-edit-dialog">
-    <!-- 遮罩层 -->
     <div class="dialog-overlay" @click="closeDialog"></div>
-    
-    <!-- 弹窗内容 -->
+
     <div class="dialog-content">
       <div class="dialog-header">
         <h3>航点编辑</h3>
         <div class="close-btn" @click="closeDialog">×</div>
       </div>
-      
+
       <div class="dialog-body">
-        <el-form :model="formData" :rules="rules" ref="formRef" label-width="80px" size="small">
-          <!-- 基本信息 -->
+        <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px" size="small">
           <el-form-item label="名称" prop="name">
             <el-input v-model="formData.name" placeholder="请输入航点名称"></el-input>
           </el-form-item>
-          
+
           <el-form-item label="高度" prop="altitude">
-            <el-input-number 
-              v-model="formData.altitude" 
-              :min="0" 
+            <el-input-number
+              v-model="formData.altitude"
+              :min="0"
+              controls-position="right"
               placeholder="请输入高度"
               style="width: 100%;"
-              suffix="m"
             ></el-input-number>
           </el-form-item>
-          
+
           <el-form-item label="速度" prop="speed">
-            <el-input v-model="formData.speed" placeholder="请输入速度" suffix="km/h"></el-input>
-          </el-form-item>
-          
-          <el-form-item label="时间" prop="eta">
-            <el-input v-model="formData.eta" placeholder="请输入到达时间（如：K+00:40:00）"></el-input>
+            <el-input-number
+              v-model="formData.speed"
+              :min="0"
+              controls-position="right"
+              placeholder="请输入速度"
+              style="width: 100%;"
+            ></el-input-number>
           </el-form-item>
-          
-          <el-form-item label="转弯半径" prop="turnRadius">
-            <el-input-number 
-              v-model="formData.turnRadius" 
-              :min="0" 
-              placeholder="请输入转弯半径"
+
+          <el-form-item label="转弯坡度" prop="turnBank">
+            <el-input-number
+              v-model="formData.turnBank"
+              controls-position="right"
+              placeholder="请输入转弯坡度"
               style="width: 100%;"
-              suffix="m"
             ></el-input-number>
           </el-form-item>
+
+          <el-form-item label="起始时间" prop="startTime">
+            <el-time-picker
+              v-model="formData.startTime"
+              placeholder="请选择起始时间"
+              value-format="HH:mm:ss"
+              style="width: 100%;"
+            >
+            </el-time-picker>
+          </el-form-item>
+
         </el-form>
       </div>
-      
+
       <div class="dialog-footer">
         <el-button @click="closeDialog">取消</el-button>
         <el-button type="primary" @click="saveWaypoint">保存</el-button>
@@ -69,31 +78,43 @@ export default {
     }
   },
   data() {
+    // 定义一个通用的数字校验函数，允许 0
+    const validateNumber = (rule, value, callback) => {
+      // 检查 value 是否为 undefined, null 或 空字符串
+      // 注意：这里不能简单用 !value，因为 !0 是 true
+      if (value === undefined || value === null || value === '') {
+        callback(new Error(rule.message));
+      } else {
+        callback();
+      }
+    };
+
     return {
       formData: {
         name: '',
         altitude: 0,
-        speed: '',
-        eta: '',
-        turnRadius: 0
+        speed: 0,
+        turnBank: 0,
+        startTime: ''
       },
       rules: {
         name: [
           { required: true, message: '请输入航点名称', trigger: 'blur' }
         ],
         altitude: [
-          { required: true, message: '请输入高度', trigger: 'blur' },
-          { type: 'number', message: '高度必须为数字', trigger: 'blur' }
+          // 使用自定义 validator 替代 type: 'number' 组合，确保 0 被接受
+          { required: true, validator: validateNumber, message: '请输入有效高度', trigger: ['blur', 'change'] }
         ],
         speed: [
-          { required: true, message: '请输入速度', trigger: 'blur' },
-          { type: 'number', message: '速度必须为数字', trigger: 'blur' }
+          // 重点修改：使用自定义 validator，允许速度为 0
+          { required: true, validator: validateNumber, message: '请输入有效速度', trigger: ['blur', 'change'] }
         ],
-        eta: [
-          { required: true, message: '请输入到达时间', trigger: 'blur' }
+        turnBank: [
+          // 同样应用到转弯坡度
+          { required: true, validator: validateNumber, message: '请输入有效转弯坡度', trigger: ['blur', 'change'] }
         ],
-        turnRadius: [
-          { type: 'number', message: '转弯半径必须为数字', trigger: 'blur' }
+        startTime: [
+          { required: true, message: '请选择起始时间', trigger: 'change' }
         ]
       }
     };
@@ -112,14 +133,22 @@ export default {
   },
   methods: {
     initFormData() {
-      // 初始化表单数据，如果航点有相关属性则使用，否则使用默认值
+      // 保持数据类型正确，确保是 Number 类型
       this.formData = {
         name: this.waypoint.name || '',
-        altitude: this.waypoint.altitude || 0,
-        speed: this.waypoint.speed || '',
-        eta: this.waypoint.eta || '',
-        turnRadius: this.waypoint.turnRadius || 0
+        // 确保初始化时也是数字类型
+        altitude: this.waypoint.altitude !== undefined && this.waypoint.altitude !== null ? Number(this.waypoint.altitude) : 0,
+        speed: this.waypoint.speed !== undefined && this.waypoint.speed !== null ? Number(this.waypoint.speed) : 0,
+        turnBank: this.waypoint.turnBank !== undefined && this.waypoint.turnBank !== null ? Number(this.waypoint.turnBank) : 0,
+        startTime: this.waypoint.startTime || ''
       };
+
+      // 弹窗打开时，尝试清除之前的校验痕迹
+      this.$nextTick(() => {
+        if (this.$refs.formRef) {
+          this.$refs.formRef.clearValidate();
+        }
+      });
     },
     closeDialog() {
       this.$emit('input', false);
@@ -127,7 +156,6 @@ export default {
     saveWaypoint() {
       this.$refs.formRef.validate((valid) => {
         if (valid) {
-          // 发送保存事件，将更新后的数据传递给父组件
           this.$emit('save', {
             ...this.waypoint,
             ...this.formData
@@ -224,4 +252,4 @@ export default {
   border-top: 1px solid #e8e8e8;
   gap: 10px;
 }
-</style>
\ No newline at end of file
+</style>