航线编辑

ruoyi-admin/src/main/resources/application-druid.yml

@@ -8,7 +8,7 @@ spring:
             master:
                 url: jdbc:mysql://localhost:3306/ry?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                 username: root
-                password: 123456
+                password: A20040303ctw!
             # 从库数据源
             slave:
                 # 从数据源开关/默认关闭

ruoyi-system/src/main/java/com/ruoyi/system/domain/Routes.java

@@ -47,6 +47,9 @@ public class Routes extends BaseEntity {
 
     private List<RouteWaypoints> waypoints;
 
+    /** 关联的平台信息（仅用于 API 返回，非数据库字段） */
+    private java.util.Map<String, Object> platform;
+
     public void setId(Long id) {
         this.id = id;
     }
@@ -95,6 +98,14 @@ public class Routes extends BaseEntity {
         this.waypoints = waypoints;
     }
 
+    public java.util.Map<String, Object> getPlatform() {
+        return platform;
+    }
+
+    public void setPlatform(java.util.Map<String, Object> platform) {
+        this.platform = platform;
+    }
+
     @Override
     public String toString() {
         return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)

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

@@ -1,8 +1,12 @@
 package com.ruoyi.system.service.impl;
 
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
+import com.ruoyi.system.domain.PlatformLib;
 import com.ruoyi.system.domain.RouteWaypoints;
+import com.ruoyi.system.service.IPlatformLibService;
 import com.ruoyi.system.service.IRouteWaypointsService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
@@ -26,6 +30,9 @@ public class RoutesServiceImpl implements IRoutesService
     @Autowired
     private IRouteWaypointsService routeWaypointsService;
 
+    @Autowired
+    private IPlatformLibService platformLibService;
+
     /**
      * 查询实体部署与航线
      * 
@@ -45,6 +52,17 @@ public class RoutesServiceImpl implements IRoutesService
 
             // 把查出来的航点列表塞进 routes 对象的 waypoints 属性里
             routes.setWaypoints(wpList);
+            // 如有 platformId，查询平台信息并填充
+            if (routes.getPlatformId() != null) {
+                PlatformLib lib = platformLibService.selectPlatformLibById(routes.getPlatformId());
+                if (lib != null) {
+                    Map<String, Object> platform = new HashMap<>();
+                    platform.put("id", lib.getId());
+                    platform.put("name", lib.getName());
+                    platform.put("iconUrl", lib.getIconUrl());
+                    routes.setPlatform(platform);
+                }
+            }
         }
         return routes;
     }
@@ -66,6 +84,16 @@ public class RoutesServiceImpl implements IRoutesService
             queryWp.setRouteId(r.getId());
             List<RouteWaypoints> wpList = routeWaypointsService.selectRouteWaypointsList(queryWp);
             r.setWaypoints(wpList);
+            if (r.getPlatformId() != null) {
+                PlatformLib lib = platformLibService.selectPlatformLibById(r.getPlatformId());
+                if (lib != null) {
+                    Map<String, Object> platform = new HashMap<>();
+                    platform.put("id", lib.getId());
+                    platform.put("name", lib.getName());
+                    platform.put("iconUrl", lib.getIconUrl());
+                    r.setPlatform(platform);
+                }
+            }
         }
         return list;
     }

ruoyi-ui/.env.development

@@ -8,7 +8,7 @@ ENV = 'development'
 VUE_APP_BASE_API = '/dev-api'
 
 # 访问地址（绕过 /dev-api 代理，用于解决静态资源/图片访问 401 认证问题）
-VUE_APP_BACKEND_URL = 'http://192.168.50.145:8080'
+VUE_APP_BACKEND_URL = 'http://192.168.50.30:8080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

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

@@ -338,8 +338,15 @@ export default {
         }, 200);
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     },
-    //正式航线渲染函数
-    renderRouteWaypoints(waypoints, routeId = 'default') {
+    // 格式化平台图标 URL（与 RouteEditDialog / RightPanel 一致）
+    formatPlatformIconUrl(url) {
+      if (!url) return '';
+      const cleanPath = (url + '').replace(/\/+/g, '/');
+      const backendUrl = process.env.VUE_APP_BACKEND_URL || '';
+      return backendUrl + cleanPath;
+    },
+    //正式航线渲染函数（style 可选：waypoint { pixelSize, color, outlineColor, outlineWidth }，line { style, width, color, gapColor, dashLength }）
+    renderRouteWaypoints(waypoints, routeId = 'default', platformId, platform, style) {
       if (!waypoints || waypoints.length < 1) return;
       // 清理旧线
       const lineId = `route-line-${routeId}`;
@@ -360,6 +367,12 @@ export default {
           this.viewer.entities.remove(existingArc);
         }
       });
+      const wpStyle = (style && style.waypoint) ? style.waypoint : {};
+      const lineStyle = (style && style.line) ? style.line : {};
+      const pixelSize = wpStyle.pixelSize != null ? wpStyle.pixelSize : 7;
+      const wpColor = wpStyle.color || '#ffffff';
+      const wpOutline = wpStyle.outlineColor || '#0078FF';
+      const wpOutlineW = wpStyle.outlineWidth != null ? wpStyle.outlineWidth : 2;
       // 遍历并绘制航点标记
       const originalPositions = [];
       waypoints.forEach((wp, index) => {
@@ -379,16 +392,16 @@ export default {
             dbId: wp.id,
           },
           point: {
-            pixelSize: 10,
-            color: Cesium.Color.WHITE,
-            outlineColor: Cesium.Color.fromCssColorString('#0078FF'),
-            outlineWidth: 3,
+            pixelSize: pixelSize,
+            color: Cesium.Color.fromCssColorString(wpColor),
+            outlineColor: Cesium.Color.fromCssColorString(wpOutline),
+            outlineWidth: wpOutlineW,
             disableDepthTestDistance: Number.POSITIVE_INFINITY
           },
           label: {
             text: wp.name || `WP${index + 1}`,
-            font: '12px MicroSoft YaHei',
-            pixelOffset: new Cesium.Cartesian2(0, -20),
+            font: `${Math.max(9, pixelSize + 2)}px MicroSoft YaHei`,
+            pixelOffset: new Cesium.Cartesian2(0, -Math.max(14, pixelSize + 8)),
             fillColor: Cesium.Color.WHITE,
             outlineColor: Cesium.Color.BLACK,
             outlineWidth: 2,
@@ -396,6 +409,27 @@ export default {
           }
         });
       });
+      // 在起点渲染平台图标（当航线有关联平台且平台有图标时）
+      const iconUrl = (platform && platform.imageUrl) || (platform && platform.iconUrl);
+      if (iconUrl && originalPositions.length > 0) {
+        const platformBillboardId = `route-platform-${routeId}`;
+        const fullUrl = this.formatPlatformIconUrl(iconUrl);
+        this.viewer.entities.add({
+          id: platformBillboardId,
+          name: (platform && platform.name) || '平台',
+          position: originalPositions[0],
+          properties: { routeId: routeId },
+          billboard: {
+            image: fullUrl,
+            width: 144,
+            height: 144,
+            verticalOrigin: Cesium.VerticalOrigin.CENTER,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            scaleByDistance: new Cesium.NearFarScalar(500, 2.0, 200000, 0.4),
+            translucencyByDistance: new Cesium.NearFarScalar(1000, 1.0, 500000, 0.6)
+          }
+        });
+      }
       // 绘制连线
       if (waypoints.length > 1) {
         let finalPathPositions = [];
@@ -431,17 +465,25 @@ export default {
             finalPathPositions.push(...arcPoints);
           }
         }
+        const lineWidth = lineStyle.width != null ? lineStyle.width : 4;
+        const lineColor = lineStyle.color || '#ffffff';
+        const gapColor = lineStyle.gapColor != null ? lineStyle.gapColor : '#000000';
+        const dashLen = lineStyle.dashLength != null ? lineStyle.dashLength : 20;
+        const useDash = (lineStyle.style || 'dash') === 'dash';
+        const lineMaterial = useDash
+          ? new Cesium.PolylineDashMaterialProperty({
+              color: Cesium.Color.fromCssColorString(lineColor),
+              gapColor: Cesium.Color.fromCssColorString(gapColor),
+              dashLength: dashLen
+            })
+          : Cesium.Color.fromCssColorString(lineColor);
         // 绘制包含弧线的 Polyline
         const routeEntity = this.viewer.entities.add({
           id: lineId,
           polyline: {
             positions: finalPathPositions,
-            width: 4,
-            material: new Cesium.PolylineDashMaterialProperty({
-              color: Cesium.Color.WHITE,
-              gapColor: Cesium.Color.BLACK,
-              dashLength: 20.0
-            }),
+            width: lineWidth,
+            material: lineMaterial,
             clampToGround: true,
             zIndex: 1
           },
@@ -495,17 +537,17 @@ export default {
       const entityList = this.viewer.entities.values;
       for (let i = entityList.length - 1; i >= 0; i--) {
         const entity = entityList[i];
-        // 获取 entity 身上绑定的 routeId 属性
-        if (entity.properties && entity.properties.routeId) {
-          // Cesium 的属性系统比较特殊，需要 getValue() 拿原始值
-          const id = entity.properties.routeId.getValue();
-          if (id === routeId) {
-            this.viewer.entities.remove(entity);
-          }
+        let shouldRemove = false;
+        // 平台图标实体：通过 id 匹配
+        if (entity.id === `route-platform-${routeId}`) {
+          shouldRemove = true;
+        } else if (entity.properties && entity.properties.routeId) {
+          const id = entity.properties.routeId.getValue && entity.properties.routeId.getValue();
+          if (id === routeId) shouldRemove = true;
         }
+        if (shouldRemove) this.viewer.entities.remove(entity);
       }
-      // 同时清理你本地维护的 allEntities 数组
-      this.allEntities = this.allEntities.filter(item => item.id !== routeId);
+      this.allEntities = this.allEntities.filter(item => item.id !== routeId && item.id !== `route-platform-${routeId}`);
     },
     checkCesiumLoaded() {
       if (typeof Cesium === 'undefined') {

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

@@ -297,7 +297,7 @@ import RightPanel from './RightPanel'
 import BottomLeftPanel from './BottomLeftPanel'
 import TopHeader from './TopHeader'
 import { listScenario,addScenario,delScenario} from "@/api/system/scenario";
-import { listRoutes, getRoutes, addRoutes,delRoutes } from "@/api/system/routes";
+import { listRoutes, getRoutes, addRoutes, updateRoutes, delRoutes } from "@/api/system/routes";
 import { updateWaypoints } from "@/api/system/waypoints";
 import { listLib,addLib } from "@/api/system/lib";
 import PlatformImportDialog from "@/views/dialogs/PlatformImportDialog.vue";
@@ -569,6 +569,9 @@ export default {
             id: routeData.id,
             name: routeData.callSign,
             scenarioId: routeData.scenarioId,
+            platformId: routeData.platformId,
+            platform: routeData.platform,
+            attributes: routeData.attributes,
             points: routeData.waypoints ? routeData.waypoints.length : 0,
             waypoints: routeData.waypoints || []
           };
@@ -649,25 +652,80 @@ export default {
       // 这里可以添加实际的更新逻辑
       this.$message.success('平台更新成功');
     },
+    /** 从航线 attributes JSON 解析出地图渲染用的样式对象 */
+    parseRouteStyle(attributes) {
+      if (attributes == null || attributes === '') return null;
+      try {
+        const attrs = typeof attributes === 'string' ? JSON.parse(attributes) : attributes;
+        const wp = attrs.waypointStyle || {};
+        const ln = attrs.lineStyle || {};
+        if (!wp.pixelSize && !wp.color && !ln.width && !ln.color) return null;
+        return {
+          waypoint: {
+            pixelSize: wp.pixelSize,
+            color: wp.color,
+            outlineColor: wp.outlineColor,
+            outlineWidth: wp.outlineWidth
+          },
+          line: {
+            style: ln.style,
+            width: ln.width,
+            color: ln.color,
+            gapColor: ln.gapColor,
+            dashLength: ln.dashLength
+          }
+        };
+      } catch (_) {
+        return null;
+      }
+    },
     // 航线编辑弹窗相关方法
     openRouteDialog(route) {
       this.selectedRoute = route;
       this.showRouteDialog = true;
     },
-    // 更新航线数据
-    updateRoute(updatedRoute) {
+    // 更新航线数据（名称、平台等，并持久化到数据库）
+    async updateRoute(updatedRoute) {
       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;
+      if (index === -1) return;
+      try {
+        const apiData = {
+          id: updatedRoute.id,
+          callSign: updatedRoute.name,
+          platformId: updatedRoute.platformId || null,
+          attributes: updatedRoute.attributes != null ? updatedRoute.attributes : undefined
+        };
+        const res = await updateRoutes(apiData);
+        if (res.code === 200) {
+          const newRouteData = {
+            ...this.routes[index],
+            name: updatedRoute.name,
+            platformId: updatedRoute.platformId,
+            platform: updatedRoute.platform,
+            attributes: updatedRoute.attributes
+          };
+          this.routes.splice(index, 1, newRouteData);
+          if (this.selectedRouteDetails && this.selectedRouteId === updatedRoute.id) {
+            this.selectedRouteDetails.name = updatedRoute.name;
+            this.selectedRouteDetails.platformId = updatedRoute.platformId;
+            this.selectedRouteDetails.platform = updatedRoute.platform;
+            this.selectedRouteDetails.attributes = updatedRoute.attributes;
+          }
+          this.$message.success('航线更新成功');
+          const routeStyle = updatedRoute.routeStyle || this.parseRouteStyle(updatedRoute.attributes);
+          if (this.$refs.cesiumMap && this.activeRouteIds.includes(updatedRoute.id)) {
+            const route = this.routes.find(r => r.id === updatedRoute.id);
+            if (route && route.waypoints && route.waypoints.length > 0) {
+              this.$refs.cesiumMap.removeRouteById(updatedRoute.id);
+              this.$refs.cesiumMap.renderRouteWaypoints(route.waypoints, updatedRoute.id, route.platformId, route.platform, routeStyle);
+            }
+          }
+        } else {
+          this.$message.error(res.msg || '航线更新失败');
         }
-
-        this.$message.success('航线名称更新成功');
+      } catch (error) {
+        this.$message.error('航线更新失败');
+        console.error('航线更新失败:', error);
       }
     },
     // 新建航线
@@ -727,12 +785,15 @@ export default {
             routes: []
           }));
         }
-        //获取所有航线
-        const routeRes = await listRoutes({});
+        // 获取所有航线（传大 pageSize 避免分页只返回第一页，新建的航线才能出现在列表中）
+        const routeRes = await listRoutes({ pageNum: 1, pageSize: 9999 });
         if (routeRes.code === 200) {
           const allRoutes = routeRes.rows.map(item => ({
             id: item.id,
             name: item.callSign,
+            platformId: item.platformId,
+            platform: item.platform,
+            attributes: item.attributes,
             points: item.waypoints ? item.waypoints.length : 0,
             waypoints: item.waypoints || [],
             conflict: false,
@@ -753,7 +814,7 @@ export default {
                 if (route && route.waypoints && route.waypoints.length > 0) {
                   if (this.$refs.cesiumMap) {
                     this.$refs.cesiumMap.removeRouteById(id);
-                    this.$refs.cesiumMap.renderRouteWaypoints(route.waypoints, id);
+                    this.$refs.cesiumMap.renderRouteWaypoints(route.waypoints, id, route.platformId, route.platform, this.parseRouteStyle(route.attributes));
                   }
                 }
               });
@@ -846,16 +907,13 @@ export default {
             // 如果 clearAllWaypoints 会清空所有，那这里就不能调用它
           }
 
-          // 5. 渲染新航线
-          this.$nextTick(() => {
-            if (this.$refs.cesiumMap) {
-              // 只画这一条新线，旧线因为没被清除，依然会留在地图上
-              this.$refs.cesiumMap.renderRouteWaypoints(savedRoute.waypoints, newRouteId);
-            }
-            this.$message.success('航线及其航点已成功保存并同步');
-          });
-
-          this.getList();
+          // 5. 刷新右侧列表（拉取最新数据，含新建航线）；getList 内部会根据 activeRouteIds 自动渲染新航线
+          await this.getList();
+          const routeFromList = this.routes.find(r => r.id === newRouteId);
+          if (routeFromList) {
+            this.selectedRouteDetails = { ...routeFromList };
+          }
+          this.$message.success('航线及其航点已成功保存并同步');
         }
       } catch (error) {
         console.error(">>> [保存异常]:", error);
@@ -891,7 +949,9 @@ export default {
               // 重新触发航线渲染
               this.$refs.cesiumMap.renderRouteWaypoints(
                 this.selectedRouteDetails.waypoints,
-                this.selectedRouteDetails.id
+                this.selectedRouteDetails.id,
+                this.selectedRouteDetails.platformId,
+                this.selectedRouteDetails.platform
               );
             }
             this.showWaypointDialog = false;
@@ -1507,7 +1567,7 @@ export default {
           if (waypoints.length > 0) {
             // 通知地图渲染
             if (this.$refs.cesiumMap) {
-              this.$refs.cesiumMap.renderRouteWaypoints(waypoints, route.id);
+              this.$refs.cesiumMap.renderRouteWaypoints(waypoints, route.id, route.platformId, route.platform, this.parseRouteStyle(route.attributes));
             }
           } else {
             this.$message.warning('该航线暂无坐标数据，无法在地图展示');

ruoyi-ui/src/views/dialogs/RouteEditDialog.vue

@@ -2,16 +2,161 @@
   <el-dialog
     title="编辑航线"
     :visible.sync="visible"
-    width="300px"
+    width="560px"
     :close-on-click-modal="false"
     append-to-body
-    custom-class="blue-dialog"
+    custom-class="blue-dialog route-edit-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>
+    <el-tabs v-model="activeTab" type="card" class="route-edit-tabs">
+      <el-tab-pane label="基础" name="basic">
+        <div class="tab-pane-body basic-tab-content">
+        <el-form :model="form" label-width="88px" size="small" class="route-edit-form" @submit.native.prevent>
+          <el-form-item label="航线名称">
+            <el-input v-model="form.name" placeholder="请输入航线名称" clearable />
+          </el-form-item>
+          <el-divider content-position="left">航点样式</el-divider>
+          <div class="form-row two-col">
+            <el-form-item label="大小" class="col-item">
+              <el-slider v-model="styleForm.waypoint.pixelSize" :min="4" :max="20" :step="1" show-input />
+            </el-form-item>
+            <el-form-item label="边框粗细" class="col-item">
+              <el-slider v-model="styleForm.waypoint.outlineWidth" :min="1" :max="5" :step="1" show-input />
+            </el-form-item>
+          </div>
+          <div class="form-row two-col">
+            <el-form-item label="填充颜色" class="col-item">
+              <div class="color-picker-wrap">
+                <el-color-picker v-model="styleForm.waypoint.color" size="small" :predefine="presetColors" />
+                <span class="color-value">{{ styleForm.waypoint.color }}</span>
+              </div>
+            </el-form-item>
+            <el-form-item label="边框颜色" class="col-item">
+              <div class="color-picker-wrap">
+                <el-color-picker v-model="styleForm.waypoint.outlineColor" size="small" :predefine="presetColors" />
+                <span class="color-value">{{ styleForm.waypoint.outlineColor }}</span>
+              </div>
+            </el-form-item>
+          </div>
+          <el-divider content-position="left">航线样式</el-divider>
+          <div class="form-row two-col">
+            <el-form-item label="线段样式" class="col-item">
+              <el-select v-model="styleForm.line.style" placeholder="请选择" style="width: 100%">
+                <el-option label="实线" value="solid" />
+                <el-option label="虚线" value="dash" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="线宽" class="col-item">
+              <el-slider v-model="styleForm.line.width" :min="2" :max="12" :step="1" show-input />
+            </el-form-item>
+          </div>
+          <div class="form-row two-col">
+            <el-form-item label="线条颜色" class="col-item">
+              <div class="color-picker-wrap">
+                <el-color-picker v-model="styleForm.line.color" size="small" :predefine="presetColors" />
+                <span class="color-value">{{ styleForm.line.color }}</span>
+              </div>
+            </el-form-item>
+            <el-form-item v-if="styleForm.line.style === 'dash'" label="间隔颜色" class="col-item">
+              <div class="color-picker-wrap">
+                <el-color-picker v-model="styleForm.line.gapColor" size="small" :predefine="presetColors" />
+                <span class="color-value">{{ styleForm.line.gapColor }}</span>
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="平台" name="platform">
+        <div class="tab-pane-body platform-tab-content">
+          <div v-if="platformLoading" class="platform-loading">加载中...</div>
+          <template v-else>
+            <el-tabs v-model="platformCategory" type="border-card" size="small">
+              <el-tab-pane label="空中" name="Air">
+                <div class="platform-list">
+                  <div
+                    v-for="platform in airPlatforms"
+                    :key="platform.id"
+                    class="platform-item"
+                  >
+                    <div class="platform-icon">
+                      <img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" />
+                      <i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
+                    </div>
+                    <div class="platform-info">
+                      <div class="platform-name">{{ platform.name }}</div>
+                    </div>
+                    <el-button
+                      size="mini"
+                      type="primary"
+                      :plain="selectedPlatformId !== platform.id"
+                      class="select-btn"
+                      @click="selectPlatform(platform)"
+                    >
+                      {{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
+                    </el-button>
+                  </div>
+                  <div v-if="airPlatforms.length === 0" class="empty-tip">暂无空中平台</div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="海上" name="Sea">
+                <div class="platform-list">
+                  <div
+                    v-for="platform in seaPlatforms"
+                    :key="platform.id"
+                    class="platform-item"
+                  >
+                    <div class="platform-icon">
+                      <img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" />
+                      <i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
+                    </div>
+                    <div class="platform-info">
+                      <div class="platform-name">{{ platform.name }}</div>
+                    </div>
+                    <el-button
+                      size="mini"
+                      type="primary"
+                      :plain="selectedPlatformId !== platform.id"
+                      class="select-btn"
+                      @click="selectPlatform(platform)"
+                    >
+                      {{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
+                    </el-button>
+                  </div>
+                  <div v-if="seaPlatforms.length === 0" class="empty-tip">暂无海上平台</div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="地面" name="Ground">
+                <div class="platform-list">
+                  <div
+                    v-for="platform in groundPlatforms"
+                    :key="platform.id"
+                    class="platform-item"
+                  >
+                    <div class="platform-icon">
+                      <img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" />
+                      <i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
+                    </div>
+                    <div class="platform-info">
+                      <div class="platform-name">{{ platform.name }}</div>
+                    </div>
+                    <el-button
+                      size="mini"
+                      type="primary"
+                      :plain="selectedPlatformId !== platform.id"
+                      class="select-btn"
+                      @click="selectPlatform(platform)"
+                    >
+                      {{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
+                    </el-button>
+                  </div>
+                  <div v-if="groundPlatforms.length === 0" class="empty-tip">暂无地面平台</div>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </template>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
 
     <span slot="footer" class="dialog-footer">
       <el-button size="mini" @click="visible = false">取 消</el-button>
@@ -21,57 +166,166 @@
 </template>
 
 <script>
+import { listLib } from '@/api/system/lib'
+
 export default {
   name: 'RouteEditDialog',
   props: {
-    // 配合父组件的 v-model="showRouteDialog"
-    value: {
-      type: Boolean,
-      default: false
-    },
-    route: {
-      type: Object,
-      default: () => ({})
-    }
+    value: { type: Boolean, default: false },
+    route: { type: Object, default: () => ({}) }
   },
   data() {
     return {
+      activeTab: 'basic',
+      platformCategory: 'Air',
+      platformLoading: false,
+      airPlatforms: [],
+      seaPlatforms: [],
+      groundPlatforms: [],
+      selectedPlatformId: null,
+      selectedPlatform: null,
       form: {
         id: '',
         name: ''
-      }
+      },
+      defaultStyle: {
+        waypoint: { pixelSize: 7, color: '#ffffff', outlineColor: '#0078FF', outlineWidth: 2 },
+        line: { style: 'dash', width: 4, color: '#ffffff', gapColor: '#000000', dashLength: 20 }
+      },
+      styleForm: {
+        waypoint: { pixelSize: 7, color: '#ffffff', outlineColor: '#0078FF', outlineWidth: 2 },
+        line: { style: 'dash', width: 4, color: '#ffffff', gapColor: '#000000', dashLength: 20 }
+      },
+      presetColors: [
+        '#ffffff', '#000000', '#0078FF', '#409EFF', '#67C23A', '#E6A23C', '#F56C6C',
+        '#909399', '#303133', '#00CED1', '#FF1493', '#FFD700', '#4B0082', '#00FF00', '#FF4500'
+      ]
     }
   },
   computed: {
     visible: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
     }
   },
   watch: {
-    // 每次打开弹窗或 route 变化时，深拷贝数据到 form
     route: {
       handler(val) {
         if (val) {
-          // 只取需要的字段，防止污染
           this.form = {
             id: val.id,
-            name: val.name
+            name: val.name,
+            attributes: val.attributes != null ? val.attributes : ''
           }
+          this.selectedPlatformId = val.platformId || null
+          this.selectedPlatform = val.platform ? { ...val.platform } : null
+          this.parseStyleFromRoute(val)
         }
       },
       immediate: true,
       deep: true
+    },
+    visible(val) {
+      if (val && this.activeTab === 'platform') {
+        this.loadPlatforms()
+      }
+    },
+    activeTab(val) {
+      if (val === 'platform' && this.visible) {
+        this.loadPlatforms()
+      }
     }
   },
   methods: {
+    loadPlatforms() {
+      this.platformLoading = true
+      listLib().then(res => {
+        const allData = res.rows || []
+        this.airPlatforms = []
+        this.seaPlatforms = []
+        this.groundPlatforms = []
+        allData.forEach(item => {
+          const platform = {
+            id: item.id,
+            name: item.name,
+            type: item.type,
+            imageUrl: item.iconUrl || '',
+            icon: item.iconUrl ? '' : 'el-icon-picture-outline'
+          }
+          if (item.type === 'Air') this.airPlatforms.push(platform)
+          else if (item.type === 'Sea') this.seaPlatforms.push(platform)
+          else if (item.type === 'Ground') this.groundPlatforms.push(platform)
+        })
+      }).catch(() => {
+        this.$message.error('加载平台列表失败')
+      }).finally(() => {
+        this.platformLoading = false
+      })
+    },
+    isImg(path) {
+      if (!path) return false
+      return path.includes('/') || path.includes('data:image')
+    },
+    formatImg(url) {
+      if (!url) return ''
+      const cleanPath = url.replace(/\/+/g, '/')
+      const backendUrl = process.env.VUE_APP_BACKEND_URL || ''
+      return backendUrl + cleanPath
+    },
+    selectPlatform(platform) {
+      this.selectedPlatformId = platform.id
+      this.selectedPlatform = { id: platform.id, name: platform.name, imageUrl: platform.imageUrl }
+    },
+    parseStyleFromRoute(route) {
+      const def = this.defaultStyle
+      try {
+        const attrs = typeof route.attributes === 'string' ? JSON.parse(route.attributes || '{}') : (route.attributes || {})
+        const wp = attrs.waypointStyle || {}
+        const ln = attrs.lineStyle || {}
+        this.styleForm = {
+          waypoint: {
+            pixelSize: wp.pixelSize != null ? wp.pixelSize : def.waypoint.pixelSize,
+            color: wp.color || def.waypoint.color,
+            outlineColor: wp.outlineColor || def.waypoint.outlineColor,
+            outlineWidth: wp.outlineWidth != null ? wp.outlineWidth : def.waypoint.outlineWidth
+          },
+          line: {
+            style: ln.style || def.line.style,
+            width: ln.width != null ? ln.width : def.line.width,
+            color: ln.color || def.line.color,
+            gapColor: ln.gapColor != null ? ln.gapColor : def.line.gapColor,
+            dashLength: ln.dashLength != null ? ln.dashLength : def.line.dashLength
+          }
+        }
+      } catch (_) {
+        this.styleForm = {
+          waypoint: { ...def.waypoint },
+          line: { ...def.line }
+        }
+      }
+    },
+    getAttributesForSave() {
+      const attrs = {}
+      try {
+        const existing = typeof this.form.attributes === 'string' ? JSON.parse(this.form.attributes || '{}') : (this.form.attributes || {})
+        Object.assign(attrs, existing)
+      } catch (_) {}
+      attrs.waypointStyle = { ...this.styleForm.waypoint }
+      attrs.lineStyle = { ...this.styleForm.line }
+      return JSON.stringify(attrs)
+    },
     handleSave() {
-      // 这里的 form 包含了修改后的 name
-      this.$emit('save', this.form)
+      const payload = {
+        ...this.form,
+        attributes: this.getAttributesForSave(),
+        platformId: this.selectedPlatformId,
+        platform: this.selectedPlatform,
+        routeStyle: {
+          waypoint: { ...this.styleForm.waypoint },
+          line: { ...this.styleForm.line }
+        }
+      }
+      this.$emit('save', payload)
       this.visible = false
     }
   }
@@ -79,6 +333,96 @@ export default {
 </script>
 
 <style scoped>
+.tab-pane-body {
+  min-height: 380px;
+  box-sizing: border-box;
+}
+.basic-tab-content {
+  padding-right: 4px;
+}
+.basic-tab-content .form-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 0;
+}
+.basic-tab-content .form-row.two-col .col-item {
+  flex: 1;
+  min-width: 0;
+}
+.basic-tab-content .form-row .el-form-item {
+  margin-bottom: 14px;
+}
+.basic-tab-content .form-row.two-col .el-form-item {
+  margin-bottom: 14px;
+}
+.color-picker-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.platform-tab-content {
+  min-height: 380px;
+  max-height: 380px;
+  overflow-y: auto;
+}
+.platform-loading,
+.empty-tip {
+  padding: 20px;
+  color: #909399;
+  text-align: center;
+}
+.platform-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.platform-item {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+.platform-icon {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+.platform-img {
+  max-width: 32px;
+  max-height: 32px;
+  object-fit: contain;
+}
+.platform-info {
+  flex: 1;
+  min-width: 0;
+}
+.platform-name {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.select-btn {
+  flex-shrink: 0;
+}
+.route-edit-form .el-divider__text {
+  font-size: 12px;
+  color: #606266;
+}
+.route-edit-form .color-value {
+  font-size: 12px;
+  color: #909399;
+  vertical-align: middle;
+}
+.route-edit-form .el-slider {
+  margin-right: 12px;
+}
 .blue-btn {
   background: #008aff;
   border-color: #008aff;

ruoyi-ui/vue.config.js

@@ -15,7 +15,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
-const baseUrl = 'http://192.168.50.145:8080' // 后端接口
+const baseUrl = 'http://192.168.50.30:8080' // 后端接口
 const port = process.env.port || process.env.npm_config_port || 80 // 端口
 
 // 定义 Cesium 源码路径