diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/RoutesController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/RoutesController.java index cfaccec..7d2b615 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/RoutesController.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/RoutesController.java @@ -25,6 +25,7 @@ import com.alibaba.fastjson2.JSON; import com.alibaba.fastjson2.JSONArray; import com.alibaba.fastjson2.JSONObject; import org.springframework.data.redis.core.RedisTemplate; +import org.springframework.beans.factory.annotation.Qualifier; import java.util.ArrayList; @@ -44,6 +45,10 @@ public class RoutesController extends BaseController @Autowired private RedisTemplate redisTemplate; + @Autowired + @Qualifier("fourTRedisTemplate") + private RedisTemplate fourTRedisTemplate; + /** * 保存平台样式到 Redis */ @@ -78,6 +83,45 @@ public class RoutesController extends BaseController } /** + * 保存4T数据到 Redis（按房间存储） + */ + @PreAuthorize("@ss.hasPermi('system:routes:edit')") + @PostMapping("/save4TData") + public AjaxResult save4TData(@RequestBody java.util.Map params) + { + Object roomId = params.get("roomId"); + Object data = params.get("data"); + if (roomId == null || data == null) { + return AjaxResult.error("参数不完整"); + } + String key = "room:" + String.valueOf(roomId) + ":4t"; + fourTRedisTemplate.opsForValue().set(key, data.toString()); + return success(); + } + + /** + * 从 Redis 获取4T数据 + */ + @PreAuthorize("@ss.hasPermi('system:routes:query')") + @GetMapping("/get4TData") + public AjaxResult get4TData(Long roomId) + { + if (roomId == null) { + return AjaxResult.error("房间ID不能为空"); + } + String key = "room:" + String.valueOf(roomId) + ":4t"; + String val = fourTRedisTemplate.opsForValue().get(key); + if (val != null && !val.isEmpty()) { + try { + return success(JSON.parseObject(val)); + } catch (Exception e) { + return success(val); + } + } + return success(); + } + + /** * 获取导弹发射参数列表（Redis，房间+航线+平台为 key，值为数组，每项含 angle/distance/launchTimeMinutesFromK/startLng/startLat/platformHeadingDeg） */ @PreAuthorize("@ss.hasPermi('system:routes:query')") diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/monitor/CacheController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/monitor/CacheController.java index c8c49c9..3760365 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/monitor/CacheController.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/monitor/CacheController.java @@ -9,6 +9,7 @@ import java.util.Properties; import java.util.Set; import java.util.TreeSet; import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.beans.factory.annotation.Qualifier; import org.springframework.data.redis.core.RedisCallback; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.security.access.prepost.PreAuthorize; @@ -32,6 +33,7 @@ import com.ruoyi.system.domain.SysCache; public class CacheController { @Autowired + @Qualifier("stringRedisTemplate") private RedisTemplate redisTemplate; private final static List caches = new ArrayList(); diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysTimelineSegmentController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysTimelineSegmentController.java new file mode 100644 index 0000000..25a06a1 --- /dev/null +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysTimelineSegmentController.java @@ -0,0 +1,81 @@ +package com.ruoyi.web.controller.system; + +import java.util.List; +import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.security.access.prepost.PreAuthorize; +import org.springframework.web.bind.annotation.DeleteMapping; +import org.springframework.web.bind.annotation.GetMapping; +import org.springframework.web.bind.annotation.PathVariable; +import org.springframework.web.bind.annotation.PostMapping; +import org.springframework.web.bind.annotation.PutMapping; +import org.springframework.web.bind.annotation.RequestBody; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.RestController; +import com.ruoyi.common.annotation.Log; +import com.ruoyi.common.core.controller.BaseController; +import com.ruoyi.common.core.domain.AjaxResult; +import com.ruoyi.common.core.domain.entity.SysTimelineSegment; +import com.ruoyi.common.enums.BusinessType; +import com.ruoyi.system.service.ISysTimelineSegmentService; + +@RestController +@RequestMapping("/system/timeline") +public class SysTimelineSegmentController extends BaseController +{ + @Autowired + private ISysTimelineSegmentService segmentService; + + @PreAuthorize("@ss.hasPermi('system:timeline:list')") + @GetMapping("/list") + public AjaxResult list(SysTimelineSegment segment) + { + List list = segmentService.selectSegmentList(segment); + return success(list); + } + + @GetMapping("/listByRoomId/{roomId}") + public AjaxResult listByRoomId(@PathVariable Long roomId) + { + List list = segmentService.selectSegmentListByRoomId(roomId); + return success(list); + } + + @PreAuthorize("@ss.hasPermi('system:timeline:query')") + @GetMapping(value = "/{segmentId}") + public AjaxResult getInfo(@PathVariable Long segmentId) + { + return success(segmentService.selectSegmentById(segmentId)); + } + + @PreAuthorize("@ss.hasPermi('system:timeline:add')") + @Log(title = "时间轴管理", businessType = BusinessType.INSERT) + @PostMapping + public AjaxResult add(@RequestBody SysTimelineSegment segment) + { + return toAjax(segmentService.insertSegment(segment)); + } + + @PreAuthorize("@ss.hasPermi('system:timeline:edit')") + @Log(title = "时间轴管理", businessType = BusinessType.UPDATE) + @PutMapping + public AjaxResult edit(@RequestBody SysTimelineSegment segment) + { + return toAjax(segmentService.updateSegment(segment)); + } + + @PreAuthorize("@ss.hasPermi('system:timeline:remove')") + @Log(title = "时间轴管理", businessType = BusinessType.DELETE) + @DeleteMapping("/{segmentId}") + public AjaxResult remove(@PathVariable Long segmentId) + { + return toAjax(segmentService.deleteSegmentById(segmentId)); + } + + @PreAuthorize("@ss.hasPermi('system:timeline:remove')") + @Log(title = "时间轴管理", businessType = BusinessType.DELETE) + @DeleteMapping("/room/{roomId}") + public AjaxResult removeByRoomId(@PathVariable Long roomId) + { + return toAjax(segmentService.deleteSegmentByRoomId(roomId)); + } +} diff --git a/ruoyi-common/src/main/java/com/ruoyi/common/core/domain/entity/SysTimelineSegment.java b/ruoyi-common/src/main/java/com/ruoyi/common/core/domain/entity/SysTimelineSegment.java new file mode 100644 index 0000000..03476e4 --- /dev/null +++ b/ruoyi-common/src/main/java/com/ruoyi/common/core/domain/entity/SysTimelineSegment.java @@ -0,0 +1,89 @@ +package com.ruoyi.common.core.domain.entity; + +import javax.validation.constraints.NotBlank; +import javax.validation.constraints.NotNull; +import javax.validation.constraints.Size; +import org.apache.commons.lang3.builder.ToStringBuilder; +import org.apache.commons.lang3.builder.ToStringStyle; + +public class SysTimelineSegment +{ + private static final long serialVersionUID = 1L; + + private Long segmentId; + + private Long roomId; + + @NotBlank(message = "时间点不能为空") + @Size(min = 0, max = 8, message = "时间点长度不能超过8个字符") + private String segmentTime; + + @NotBlank(message = "时间段名称不能为空") + @Size(min = 0, max = 50, message = "时间段名称长度不能超过50个字符") + private String segmentName; + + @Size(max = 500, message = "时间段描述长度不能超过500个字符") + private String segmentDesc; + + public Long getSegmentId() + { + return segmentId; + } + + public void setSegmentId(Long segmentId) + { + this.segmentId = segmentId; + } + + @NotNull(message = "房间ID不能为空") + public Long getRoomId() + { + return roomId; + } + + public void setRoomId(Long roomId) + { + this.roomId = roomId; + } + + public String getSegmentTime() + { + return segmentTime; + } + + public void setSegmentTime(String segmentTime) + { + this.segmentTime = segmentTime; + } + + public String getSegmentName() + { + return segmentName; + } + + public void setSegmentName(String segmentName) + { + this.segmentName = segmentName; + } + + public String getSegmentDesc() + { + return segmentDesc; + } + + public void setSegmentDesc(String segmentDesc) + { + this.segmentDesc = segmentDesc; + } + + @Override + public String toString() { + return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE) + .append("segmentId", getSegmentId()) + .append("roomId", getRoomId()) + .append("segmentTime", getSegmentTime()) + .append("segmentName", getSegmentName()) + .append("segmentDesc", getSegmentDesc()) + .toString(); + } +} diff --git a/ruoyi-framework/src/main/java/com/ruoyi/framework/config/RedisConfig.java b/ruoyi-framework/src/main/java/com/ruoyi/framework/config/RedisConfig.java index 113521b..8a372c3 100644 --- a/ruoyi-framework/src/main/java/com/ruoyi/framework/config/RedisConfig.java +++ b/ruoyi-framework/src/main/java/com/ruoyi/framework/config/RedisConfig.java @@ -63,6 +63,23 @@ public class RedisConfig extends CachingConfigurerSupport return template; } + /** + * 纯字符串 RedisTemplate，用于存储 4T 等 JSON 字符串，避免 FastJson 序列化问题 + * 命名为 fourTRedisTemplate 避免与 Spring Boot 自带的 stringRedisTemplate 冲突 + */ + @Bean("fourTRedisTemplate") + public RedisTemplate fourTRedisTemplate(RedisConnectionFactory connectionFactory) + { + RedisTemplate template = new RedisTemplate<>(); + template.setConnectionFactory(connectionFactory); + template.setKeySerializer(new StringRedisSerializer()); + template.setValueSerializer(new StringRedisSerializer()); + template.setHashKeySerializer(new StringRedisSerializer()); + template.setHashValueSerializer(new StringRedisSerializer()); + template.afterPropertiesSet(); + return template; + } + @Bean public DefaultRedisScript limitScript() { diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/domain/dto/PlatformStyleDTO.java b/ruoyi-system/src/main/java/com/ruoyi/system/domain/dto/PlatformStyleDTO.java index f39f7c7..7d9ef64 100644 --- a/ruoyi-system/src/main/java/com/ruoyi/system/domain/dto/PlatformStyleDTO.java +++ b/ruoyi-system/src/main/java/com/ruoyi/system/domain/dto/PlatformStyleDTO.java @@ -27,6 +27,26 @@ public class PlatformStyleDTO implements Serializable { /** 平台颜色 */ private String platformColor; + /** 探测区半径（千米），整圆 */ + private Double detectionZoneRadius; + /** 探测区填充颜色 */ + private String detectionZoneColor; + /** 探测区透明度 0-1 */ + private Double detectionZoneOpacity; + /** 探测区是否在地图上显示 */ + private Boolean detectionZoneVisible; + + /** 威力区半径（千米） */ + private Double powerZoneRadius; + /** 威力区扇形夹角（度），如 60 表示 60 度扇形 */ + private Double powerZoneAngle; + /** 威力区填充颜色 */ + private String powerZoneColor; + /** 威力区透明度 0-1 */ + private Double powerZoneOpacity; + /** 威力区是否在地图上显示 */ + private Boolean powerZoneVisible; + public String getRoomId() { return roomId; } @@ -90,4 +110,76 @@ public class PlatformStyleDTO implements Serializable { public void setPlatformColor(String platformColor) { this.platformColor = platformColor; } + + public Double getPowerZoneRadius() { + return powerZoneRadius; + } + + public void setPowerZoneRadius(Double powerZoneRadius) { + this.powerZoneRadius = powerZoneRadius; + } + + public String getPowerZoneColor() { + return powerZoneColor; + } + + public void setPowerZoneColor(String powerZoneColor) { + this.powerZoneColor = powerZoneColor; + } + + public Double getDetectionZoneRadius() { + return detectionZoneRadius; + } + + public void setDetectionZoneRadius(Double detectionZoneRadius) { + this.detectionZoneRadius = detectionZoneRadius; + } + + public String getDetectionZoneColor() { + return detectionZoneColor; + } + + public void setDetectionZoneColor(String detectionZoneColor) { + this.detectionZoneColor = detectionZoneColor; + } + + public Double getDetectionZoneOpacity() { + return detectionZoneOpacity; + } + + public void setDetectionZoneOpacity(Double detectionZoneOpacity) { + this.detectionZoneOpacity = detectionZoneOpacity; + } + + public Boolean getDetectionZoneVisible() { + return detectionZoneVisible; + } + + public void setDetectionZoneVisible(Boolean detectionZoneVisible) { + this.detectionZoneVisible = detectionZoneVisible; + } + + public Double getPowerZoneAngle() { + return powerZoneAngle; + } + + public void setPowerZoneAngle(Double powerZoneAngle) { + this.powerZoneAngle = powerZoneAngle; + } + + public Double getPowerZoneOpacity() { + return powerZoneOpacity; + } + + public void setPowerZoneOpacity(Double powerZoneOpacity) { + this.powerZoneOpacity = powerZoneOpacity; + } + + public Boolean getPowerZoneVisible() { + return powerZoneVisible; + } + + public void setPowerZoneVisible(Boolean powerZoneVisible) { + this.powerZoneVisible = powerZoneVisible; + } } diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/mapper/SysTimelineSegmentMapper.java b/ruoyi-system/src/main/java/com/ruoyi/system/mapper/SysTimelineSegmentMapper.java new file mode 100644 index 0000000..9325299 --- /dev/null +++ b/ruoyi-system/src/main/java/com/ruoyi/system/mapper/SysTimelineSegmentMapper.java @@ -0,0 +1,22 @@ +package com.ruoyi.system.mapper; + +import java.util.List; +import org.apache.ibatis.annotations.Param; +import com.ruoyi.common.core.domain.entity.SysTimelineSegment; + +public interface SysTimelineSegmentMapper +{ + public List selectSegmentList(SysTimelineSegment segment); + + public List selectSegmentListByRoomId(@Param("roomId") Long roomId); + + public SysTimelineSegment selectSegmentById(Long segmentId); + + public int insertSegment(SysTimelineSegment segment); + + public int updateSegment(SysTimelineSegment segment); + + public int deleteSegmentById(Long segmentId); + + public int deleteSegmentByRoomId(@Param("roomId") Long roomId); +} diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/service/ISysTimelineSegmentService.java b/ruoyi-system/src/main/java/com/ruoyi/system/service/ISysTimelineSegmentService.java new file mode 100644 index 0000000..7889654 --- /dev/null +++ b/ruoyi-system/src/main/java/com/ruoyi/system/service/ISysTimelineSegmentService.java @@ -0,0 +1,21 @@ +package com.ruoyi.system.service; + +import java.util.List; +import com.ruoyi.common.core.domain.entity.SysTimelineSegment; + +public interface ISysTimelineSegmentService +{ + public List selectSegmentList(SysTimelineSegment segment); + + public List selectSegmentListByRoomId(Long roomId); + + public SysTimelineSegment selectSegmentById(Long segmentId); + + public int insertSegment(SysTimelineSegment segment); + + public int updateSegment(SysTimelineSegment segment); + + public int deleteSegmentById(Long segmentId); + + public int deleteSegmentByRoomId(Long roomId); +} diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysTimelineSegmentServiceImpl.java b/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysTimelineSegmentServiceImpl.java new file mode 100644 index 0000000..4623bc5 --- /dev/null +++ b/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysTimelineSegmentServiceImpl.java @@ -0,0 +1,57 @@ +package com.ruoyi.system.service.impl; + +import java.util.List; +import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.stereotype.Service; +import com.ruoyi.common.core.domain.entity.SysTimelineSegment; +import com.ruoyi.system.mapper.SysTimelineSegmentMapper; +import com.ruoyi.system.service.ISysTimelineSegmentService; + +@Service +public class SysTimelineSegmentServiceImpl implements ISysTimelineSegmentService +{ + @Autowired + private SysTimelineSegmentMapper segmentMapper; + + @Override + public List selectSegmentList(SysTimelineSegment segment) + { + return segmentMapper.selectSegmentList(segment); + } + + @Override + public List selectSegmentListByRoomId(Long roomId) + { + return segmentMapper.selectSegmentListByRoomId(roomId); + } + + @Override + public SysTimelineSegment selectSegmentById(Long segmentId) + { + return segmentMapper.selectSegmentById(segmentId); + } + + @Override + public int insertSegment(SysTimelineSegment segment) + { + return segmentMapper.insertSegment(segment); + } + + @Override + public int updateSegment(SysTimelineSegment segment) + { + return segmentMapper.updateSegment(segment); + } + + @Override + public int deleteSegmentById(Long segmentId) + { + return segmentMapper.deleteSegmentById(segmentId); + } + + @Override + public int deleteSegmentByRoomId(Long roomId) + { + return segmentMapper.deleteSegmentByRoomId(roomId); + } +} diff --git a/ruoyi-system/src/main/resources/mapper/system/RouteWaypointsMapper.xml b/ruoyi-system/src/main/resources/mapper/system/RouteWaypointsMapper.xml index a484b4d..7971efc 100644 --- a/ruoyi-system/src/main/resources/mapper/system/RouteWaypointsMapper.xml +++ b/ruoyi-system/src/main/resources/mapper/system/RouteWaypointsMapper.xml @@ -27,7 +27,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" + + where 1=1 + + AND room_id = #{roomId} + + + AND segment_name like concat('%', #{segmentName}, '%') + + order by s.segment_time + + + + + + + + insert into sys_timeline_segment( + room_id, + segment_time, + segment_name, + segment_desc, + segment_id + )values( + #{roomId}, + #{segmentTime}, + #{segmentName}, + #{segmentDesc}, + #{segmentId} + ) + + + + update sys_timeline_segment + + segment_time = #{segmentTime}, + segment_name = #{segmentName}, + segment_desc = #{segmentDesc}, + + where segment_id = #{segmentId} + + + + delete from sys_timeline_segment where segment_id = #{segmentId} + + + + delete from sys_timeline_segment where room_id = #{roomId} + + + diff --git a/ruoyi-ui/src/api/system/routes.js b/ruoyi-ui/src/api/system/routes.js index 58c7677..8282b58 100644 --- a/ruoyi-ui/src/api/system/routes.js +++ b/ruoyi-ui/src/api/system/routes.js @@ -61,6 +61,25 @@ export function getPlatformStyle(query) { }) } +// 保存4T数据到Redis（禁用防重复提交，因拖拽/调整大小可能快速连续触发保存） +export function save4TData(data) { + return request({ + url: '/system/routes/save4TData', + method: 'post', + data, + headers: { repeatSubmit: false } + }) +} + +// 从Redis获取4T数据 +export function get4TData(params) { + return request({ + url: '/system/routes/get4TData', + method: 'get', + params + }) +} + // 获取导弹发射参数（Redis：房间+航线+平台为 key） export function getMissileParams(params) { return request({ diff --git a/ruoyi-ui/src/api/system/timeline.js b/ruoyi-ui/src/api/system/timeline.js new file mode 100644 index 0000000..11c9873 --- /dev/null +++ b/ruoyi-ui/src/api/system/timeline.js @@ -0,0 +1,53 @@ +import request from '@/utils/request' + +export function listTimelineSegments(query) { + return request({ + url: '/system/timeline/list', + method: 'get', + params: query + }) +} + +export function getTimelineSegmentsByRoomId(roomId) { + return request({ + url: '/system/timeline/listByRoomId/' + roomId, + method: 'get' + }) +} + +export function getTimelineSegment(id) { + return request({ + url: '/system/timeline/' + id, + method: 'get' + }) +} + +export function addTimelineSegment(data) { + return request({ + url: '/system/timeline', + method: 'post', + data: data + }) +} + +export function updateTimelineSegment(data) { + return request({ + url: '/system/timeline', + method: 'put', + data: data + }) +} + +export function delTimelineSegment(id) { + return request({ + url: '/system/timeline/' + id, + method: 'delete' + }) +} + +export function delTimelineSegmentsByRoomId(roomId) { + return request({ + url: '/system/timeline/room/' + roomId, + method: 'delete' + }) +} diff --git a/ruoyi-ui/src/assets/icons/svg/T.svg b/ruoyi-ui/src/assets/icons/svg/T.svg new file mode 100644 index 0000000..697e8c5 --- /dev/null +++ b/ruoyi-ui/src/assets/icons/svg/T.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ruoyi-ui/src/lang/en.js b/ruoyi-ui/src/lang/en.js index 57a7351..3d55431 100644 --- a/ruoyi-ui/src/lang/en.js +++ b/ruoyi-ui/src/lang/en.js @@ -71,6 +71,13 @@ export default { systemDescription: 'System Description', language: 'Language' }, + tools: { + routeCalculation: 'Route Calculation', + conflictDisplay: 'Conflict Display', + dataMaterials: 'Data Materials', + coordinateConversion: 'Coordinate Conversion', + generateGanttChart: 'Generate Gantt Chart' + }, favorites: { layerFavorites: 'Layer Favorites', routeFavorites: 'Route Favorites' diff --git a/ruoyi-ui/src/lang/zh.js b/ruoyi-ui/src/lang/zh.js index ece9c1f..11c1864 100644 --- a/ruoyi-ui/src/lang/zh.js +++ b/ruoyi-ui/src/lang/zh.js @@ -71,6 +71,13 @@ export default { systemDescription: '系统说明', language: '语言' }, + tools: { + routeCalculation: '航线计算', + conflictDisplay: '冲突显示', + dataMaterials: '数据资料', + coordinateConversion: '坐标转换', + generateGanttChart: '生成甘特图' + }, favorites: { layerFavorites: '图层收藏', routeFavorites: '航线收藏' diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js index 1015974..1770a53 100644 --- a/ruoyi-ui/src/router/index.js +++ b/ruoyi-ui/src/router/index.js @@ -70,6 +70,11 @@ export const constantRoutes = [ hidden: true }, { + path: '/ganttChart', + component: () => import('@/views/ganttChart'), + hidden: true + }, + { path: '/register', component: () => import('@/views/register'), hidden: true diff --git a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue index f1ae068..7e45967 100644 --- a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue +++ b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue @@ -7,8 +7,29 @@ - -
+ +
+
航点
+
+ 📝 + 编辑航点 +
+
+ ⬅️ + 向前增加航点 +
+
+ ➡️ + 向后增加航点 +
+
+ 🔄 + 切换盘旋航点 +
+
+ + +
航线编辑
{{ isRouteLocked ? '🔓' : '🔒' }} @@ -31,10 +52,22 @@ 📝 编辑
+
+ 🔍 + 探测区 +
⭕ 威力区
+
+ {{ detectionZoneVisible ? '👁' : '👁‍🗨' }} + {{ detectionZoneVisible ? '隐藏探测区' : '显示探测区' }} +
+
+ {{ powerZoneVisible ? '👁' : '👁‍🗨' }} + {{ powerZoneVisible ? '隐藏威力区' : '显示威力区' }} +
🚀 发射导弹 @@ -315,18 +348,21 @@
平台图标
-
- 📐 - 显示伸缩框 +
+ 🔍 + 探测区
-
- 📍 - 修改位置 +
+ ⭕ + 威力区
-
- 🧭 - 修改朝向 - {{ entityData.heading != null ? entityData.heading + '°' : '0°' }} +
+ {{ detectionZoneVisible ? '👁' : '👁‍🗨' }} + {{ detectionZoneVisible ? '隐藏探测区' : '显示探测区' }} +
+
+ {{ powerZoneVisible ? '👁' : '👁‍🗨' }} + {{ powerZoneVisible ? '隐藏威力区' : '显示威力区' }}
航线
@@ -360,6 +396,14 @@ export default { routeLocked: { type: Object, default: () => ({}) + }, + detectionZoneVisible: { + type: Boolean, + default: true + }, + powerZoneVisible: { + type: Boolean, + default: true } }, data() { @@ -389,7 +433,7 @@ export default { } }, isRouteLocked() { - if (!this.entityData || this.entityData.type !== 'route' || this.entityData.routeId == null) return false + if (!this.entityData || this.entityData.routeId == null) return false return !!this.routeLocked[this.entityData.routeId] } }, @@ -398,16 +442,20 @@ export default { this.$emit('delete') }, - handleShowTransformBox() { - this.$emit('show-transform-box') + handleDetectionZonePlatform() { + this.$emit('detection-zone') }, - handleEditPlatformPosition() { - this.$emit('edit-platform-position') + handlePowerZonePlatform() { + this.$emit('power-zone') + }, + + handleToggleDetectionZone() { + this.$emit('toggle-detection-zone') }, - handleEditPlatformHeading() { - this.$emit('edit-platform-heading') + handleTogglePowerZone() { + this.$emit('toggle-power-zone') }, handleStartRouteBeforePlatform() { @@ -437,10 +485,30 @@ export default { this.$emit('copy-route') }, + handleEditWaypoint() { + this.$emit('open-waypoint-dialog', this.entityData.dbId, this.entityData.routeId, this.entityData.waypointIndex) + }, + + handleAddWaypointBefore() { + this.$emit('add-waypoint-at', { routeId: this.entityData.routeId, waypointIndex: this.entityData.waypointIndex, mode: 'before' }) + }, + + handleAddWaypointAfter() { + this.$emit('add-waypoint-at', { routeId: this.entityData.routeId, waypointIndex: this.entityData.waypointIndex, mode: 'after' }) + }, + + handleToggleWaypointHold() { + this.$emit('toggle-waypoint-hold', { routeId: this.entityData.routeId, dbId: this.entityData.dbId, waypointIndex: this.entityData.waypointIndex }) + }, + handleEditPlatform() { this.$emit('edit-platform') }, + handleDetectionZone() { + this.$emit('detection-zone') + }, + handlePowerZone() { this.$emit('power-zone') }, @@ -648,6 +716,17 @@ export default { flex: 1; } +.menu-item-sub { + padding: 6px 16px 6px 24px; + font-size: 12px; + color: #666; +} + +.menu-item-sub:hover { + background-color: #f0f7ff; + color: #333; +} + /* 颜色选择器样式 */ .color-picker-container { padding: 8px 16px; diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index f76be1a..a2db5d5 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -33,6 +33,8 @@ :position="contextMenu.position" :entity-data="contextMenu.entityData" :route-locked="routeLocked" + :detection-zone-visible="contextMenuZoneDetectionVisible" + :power-zone-visible="contextMenuZonePowerVisible" @delete="deleteEntityFromContextMenu" @update-property="updateEntityProperty" @edit-platform-position="openPlatformIconPositionDialog" @@ -44,7 +46,13 @@ @start-route-after-platform="handleStartRouteAfterPlatform" @copy-route="handleCopyRouteFromMenu" @edit-platform="openEditPlatformDialog" + @detection-zone="openDetectionZoneDialog" @power-zone="openPowerZoneDialog" + @toggle-detection-zone="toggleDetectionZoneVisibility" + @toggle-power-zone="togglePowerZoneVisibility" + @open-waypoint-dialog="handleContextMenuOpenWaypointDialog" + @add-waypoint-at="handleAddWaypointAt" + @toggle-waypoint-hold="handleToggleWaypointHold" @launch-missile="openLaunchMissileDialog" /> @@ -90,10 +98,16 @@ :max="32" controls-position="right" style="width: 100%;" + @change="handleEditPlatformFormChange" /> - + 平台设置 @@ -104,31 +118,100 @@ :max="256" controls-position="right" style="width: 100%;" + @change="handleEditPlatformFormChange" /> - + - 取 消 + 取 消 确 定 - + + + + + + + + + + + + +
+
+
+ + + + + + + 取 消 + 确 定 + + + + + - - + + + + + + + + @@ -136,6 +219,21 @@ + +
+
+
+ + + + 取 消 @@ -181,7 +279,7 @@ -
+
{{ scaleBarText }}
@@ -241,6 +339,10 @@ export default { type: String, default: 'dms' // 'decimal' 或 'dms' }, + bottomPanelVisible: { + type: Boolean, + default: false + }, /** 航线上锁状态（由父组件维护，与右侧列表锁图标同步） */ routeLocked: { type: Object, @@ -296,6 +398,7 @@ export default { } } }, + data() { return { viewer: null, @@ -311,6 +414,7 @@ export default { missionHoldParamsByIndex: {}, missionPendingHold: null, tempHoldEntity: null, + tempHoldOutlineEntity: null, // 盘旋圆/椭圆轮廓 activeCursorPosition: null, // 实时鼠标位置 // 实体管理 allEntities: [], // 所有绘制的实体 @@ -343,14 +447,53 @@ export default { fontSize: 16, fontColor: '#333333', iconSize: 144, - iconColor: '#ffffff' + iconColor: '#000000' + }, + /** 编辑平台属性时用于还原的原始样式快照（只影响预览，不直接改缓存与后端） */ + editPlatformOriginalStyle: null, + // 编辑平台属性：字体颜色、平台颜色预选 + presetColors: [ + '#000000', '#333333', '#666666', '#999999', '#FFFFFF', + '#FF0000', '#FF6600', '#FFA500', '#FFFF00', '#00FF00', + '#00FFFF', '#0066FF', '#0000FF', '#6600FF', '#FF00FF', + '#800080', '#FF69B4', '#A52A2A', '#228B22' + ], + detectionZoneDialogVisible: false, + detectionZoneForm: { + routeId: null, + platformIconId: null, + roomId: null, + platformId: null, + radius: 50, + color: 'rgba(0, 150, 255, 0.35)', + opacity: 0.35, + visible: true }, powerZoneDialogVisible: false, powerZoneForm: { routeId: null, - radius: 1000, - color: 'rgba(255, 0, 0, 0.3)' + platformIconId: null, + roomId: null, + platformId: null, + radius: 300, + angle: 120, + color: 'rgba(255, 0, 0, 0.3)', + opacity: 0.3, + visible: true }, + /** 独立平台图标（非航线）的探测区/威力区样式缓存：platformIconId -> { ... } */ + platformIconZoneStyles: {}, + /** 探测区/威力区弹窗预选颜色（可与透明度组合） */ + zonePresetColors: [ + 'rgba(0, 150, 255, 0.35)', + 'rgba(255, 0, 0, 0.3)', + 'rgba(255, 165, 0, 0.35)', + 'rgba(255, 255, 0, 0.3)', + 'rgba(0, 200, 100, 0.3)', + 'rgba(128, 0, 128, 0.35)', + 'rgba(255, 105, 180, 0.3)', + 'rgba(100, 100, 100, 0.4)' + ], missileDialogVisible: false, missileForm: { angle: 0, @@ -430,13 +573,18 @@ export default { waypointDragging: null, waypointDragPending: null, WAYPOINT_DRAG_THRESHOLD_PX: 8, + /** 虚拟点（entry/exit）拖拽时的实时预览：{ routeId, dbId, position }，拖拽时用 position 作为航点中心重算弧线 */ + waypointDragPreview: null, /** 拖拽航点前相机 enableInputs 状态，松开时恢复 */ waypointDragCameraInputsEnabled: undefined, lastClickWasDrag: false, // 航线复制预览：整条航线跟随鼠标，左键放置 copyPreviewWaypoints: null, copyPreviewEntity: null, - copyPreviewMouseCartesian: null + copyPreviewMouseCartesian: null, + // 在航点前/后增加航点：{ routeId, waypointIndex, mode: 'before'|'after', waypoints }，预览折线实体 + addWaypointContext: null, + addWaypointPreviewEntity: null } }, components: { @@ -450,6 +598,28 @@ export default { watch: { // 监听 routeLabelVisible 的变化，当航线显示状态改变时，重新应用样式 // 这样当从隐藏切换为显示时，可以确保样式被正确应用 + drawDomClick: { + immediate: true, // 组件初始化时立即执行一次 + handler(newVal, oldVal) { + // 可选：如果需要在值变化时执行额外逻辑（比如初始化地图） + if (newVal) { + // this.initMap() + } + } + }, + scaleConfig: { + deep: true, + handler(newVal) { + if (newVal) { + this.updateScaleFromConfig(newVal) + } + } + }, + coordinateFormat: { + handler(newVal) { + this.updateCoordinatesDisplay() + } + }, routeLabelVisible: { handler(newVal) { // 使用 debounce 或 setTimeout 避免频繁调用 @@ -465,7 +635,35 @@ export default { if (this.applyStylesTimer) clearTimeout(this.applyStylesTimer); this.applyStylesTimer = setTimeout(() => { this.applyRedisPlatformStyles(); - }, 500); + }, 80); + } + }, + computed: { + contextMenuZoneDetectionVisible() { + const ed = this.contextMenu && this.contextMenu.entityData + if (!ed) return true + if (ed.type === 'routePlatform' && ed.routeId != null) { + const c = this.platformCustomStyles && this.platformCustomStyles[ed.routeId] + return c && c.detectionZoneVisible === false ? false : true + } + if (ed.type === 'platformIcon' && ed.id) { + const c = this.platformIconZoneStyles && this.platformIconZoneStyles[ed.id] + return c && c.detectionZoneVisible === false ? false : true + } + return true + }, + contextMenuZonePowerVisible() { + const ed = this.contextMenu && this.contextMenu.entityData + if (!ed) return true + if (ed.type === 'routePlatform' && ed.routeId != null) { + const c = this.platformCustomStyles && this.platformCustomStyles[ed.routeId] + return c && c.powerZoneVisible === false ? false : true + } + if (ed.type === 'platformIcon' && ed.id) { + const c = this.platformIconZoneStyles && this.platformIconZoneStyles[ed.id] + return c && c.powerZoneVisible === false ? false : true + } + return true } }, mounted() { @@ -526,6 +724,94 @@ export default { }, 1000) }, + /** 编辑平台属性表单变更时，仅做实时预览（不保存到缓存与后端） */ + handleEditPlatformFormChange() { + const routeId = this.editPlatformForm.routeId + if (!routeId || !this.viewer || !this.viewer.entities) return + + const fontSize = Math.max(10, Math.min(32, Number(this.editPlatformForm.fontSize) || 16)) + const fontColor = this.editPlatformForm.fontColor || '#333333' + const iconSize = Math.max(48, Math.min(256, Number(this.editPlatformForm.iconSize) || 144)) + const iconColor = this.editPlatformForm.iconColor || '#000000' + + // 实时更新标牌外观 + const labelEntity = this.viewer.entities.getById(`route-platform-label-${routeId}`) + if (labelEntity) { + if (labelEntity.billboard) { + const data = labelEntity.labelDataCache || { name: '平台', altitude: 0, speed: 0, headingDeg: 0 } + const labelResult = this.createRoundedLabelCanvas({ + name: data.name, + altitude: data.altitude, + speed: data.speed, + heading: data.headingDeg, + fontSize, + fontColor + }) + labelEntity.billboard.image = new Cesium.ConstantProperty(labelResult.canvas) + labelEntity.billboard.scale = labelResult.scale + } else if (labelEntity.label) { + labelEntity.label.font = `${fontSize}px Microsoft YaHei` + labelEntity.label.fillColor = Cesium.Color.fromCssColorString(fontColor) + labelEntity.label.backgroundColor = Cesium.Color.fromCssColorString('rgba(255, 255, 255, 0.6)') + } + } + + // 实时更新平台外观 + const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`) + if (platformEntity && platformEntity.billboard) { + platformEntity.billboard.width = iconSize + platformEntity.billboard.height = iconSize + platformEntity.billboard.color = Cesium.Color.fromCssColorString(iconColor) + } + + if (this.viewer.scene && this.viewer.scene.requestRenderMode) { + this.viewer.scene.requestRender() + } + }, + + /** 取消编辑平台属性：还原到打开弹窗前的样式，只关闭弹窗不保存 */ + cancelEditPlatform() { + const snapshot = this.editPlatformOriginalStyle + if (snapshot && snapshot.routeId && this.viewer && this.viewer.entities) { + const { routeId, fontSize, fontColor, iconSize, iconColor } = snapshot + + const labelEntity = this.viewer.entities.getById(`route-platform-label-${routeId}`) + if (labelEntity) { + if (labelEntity.billboard) { + const data = labelEntity.labelDataCache || { name: '平台', altitude: 0, speed: 0, headingDeg: 0 } + const labelResult = this.createRoundedLabelCanvas({ + name: data.name, + altitude: data.altitude, + speed: data.speed, + heading: data.headingDeg, + fontSize, + fontColor + }) + labelEntity.billboard.image = new Cesium.ConstantProperty(labelResult.canvas) + labelEntity.billboard.scale = labelResult.scale + } else if (labelEntity.label) { + labelEntity.label.font = `${fontSize}px Microsoft YaHei` + labelEntity.label.fillColor = Cesium.Color.fromCssColorString(fontColor) + labelEntity.label.backgroundColor = Cesium.Color.fromCssColorString('rgba(255, 255, 255, 0.6)') + } + } + + const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`) + if (platformEntity && platformEntity.billboard) { + platformEntity.billboard.width = iconSize + platformEntity.billboard.height = iconSize + platformEntity.billboard.color = Cesium.Color.fromCssColorString(iconColor) + } + + if (this.viewer.scene && this.viewer.scene.requestRenderMode) { + this.viewer.scene.requestRender() + } + } + + this.editPlatformDialogVisible = false + this.editPlatformOriginalStyle = null + }, + applyScaleToCamera(metersPerPixel) { if (!this.viewer || !this.viewer.camera) return @@ -722,7 +1008,7 @@ export default { polyline: { positions: solidPositions, width: 3, - material: Cesium.Color.fromCssColorString('#800080'), + material: Cesium.Color.fromCssColorString('#2E5C3E'), arcType: Cesium.ArcType.NONE } }); @@ -744,7 +1030,7 @@ export default { }, false), width: 3, material: new Cesium.PolylineDashMaterialProperty({ - color: Cesium.Color.fromCssColorString('#800080'), + color: Cesium.Color.fromCssColorString('#2E5C3E'), dashLength: 16 }), arcType: Cesium.ArcType.NONE @@ -886,7 +1172,7 @@ export default { }, false), width: 3, material: new Cesium.PolylineDashMaterialProperty({ - color: Cesium.Color.fromCssColorString('#800080'), + color: Cesium.Color.fromCssColorString('#2E5C3E'), dashLength: 16 }), arcType: Cesium.ArcType.NONE @@ -946,7 +1232,7 @@ export default { polyline: { positions: solidPositions, width: 3, - material: Cesium.Color.fromCssColorString('#800080'), + material: Cesium.Color.fromCssColorString('#2E5C3E'), arcType: Cesium.ArcType.NONE } }); @@ -960,7 +1246,7 @@ export default { }, false), width: 3, material: new Cesium.PolylineDashMaterialProperty({ - color: Cesium.Color.fromCssColorString('#800080'), + color: Cesium.Color.fromCssColorString('#2E5C3E'), dashLength: 16 }), arcType: Cesium.ArcType.NONE @@ -976,9 +1262,14 @@ export default { setTimeout(() => window.removeEventListener('contextmenu', this.preventContextMenu, true), 200); return; } - let pointsToEmit = this.drawingPoints; + let pointsToEmit; + if (this.missionPendingHold && this.drawingPoints.length >= 2) { + pointsToEmit = this.getMissionRouteSolidPositions(); + } else { + pointsToEmit = [...this.drawingPoints]; + } if (pr.mode === 'before') { - if (this.drawingPoints.length < 1) { + if (pointsToEmit.length < 1) { this.$message && this.$message.info('已取消'); this.platformRouteDrawing = null; this.stopDrawing(); @@ -987,7 +1278,7 @@ export default { return; } // 顺序反转：先点的为倒数第二个点，最后点的为起点；平台为最后一个点 - pointsToEmit = [...this.drawingPoints].reverse(); + pointsToEmit = [...pointsToEmit].reverse(); pointsToEmit.push(platformCartesian); const lastId = `temp_wp_${pointsToEmit.length}`; this.viewer.entities.add({ @@ -1022,16 +1313,22 @@ export default { return; } const latLngPoints = []; + const holdCenter = this.missionPendingHold ? this.missionPendingHold.center : null; pointsToEmit.forEach((pos, i) => { const coords = this.cartesianToLatLng(pos); - const name = (pr.mode === 'after' && i === 0) || (pr.mode === 'before' && i === pointsToEmit.length - 1) ? pr.platformName : `WP${i + 1}`; + const isPlatform = (pr.mode === 'after' && i === 0) || (pr.mode === 'before' && i === pointsToEmit.length - 1); + const isHold = holdCenter && Cesium.Cartesian3.equalsEpsilon(pos, holdCenter, 0.1); latLngPoints.push({ id: i + 1, - name, + name: isPlatform ? pr.platformName : (isHold ? 'HOLD' : `WP${i + 1}`), lat: coords.lat, lng: coords.lng, alt: 5000, - speed: 800 + speed: 800, + ...(isHold && { + pointType: this.missionPendingHold.params.radius != null ? 'hold_circle' : 'hold_ellipse', + holdParams: JSON.stringify(this.missionPendingHold.params) + }) }); }); this.$emit('draw-complete', latLngPoints, pr.platformInfo); @@ -1054,16 +1351,41 @@ export default { center: Cesium.Cartesian3.clone(last), params: holdParams }; + if (this.tempHoldOutlineEntity) { + try { this.viewer.entities.remove(this.tempHoldOutlineEntity); } catch (e) {} + this.tempHoldOutlineEntity = null; + } if (this.tempHoldEntity) { try { this.viewer.entities.remove(this.tempHoldEntity); } catch (e) {} this.tempHoldEntity = null; } + const center = this.missionPendingHold.center; + const p = holdParams; + const isCircle = p.radius != null; + const radius = isCircle ? (p.radius || 500) : 500; + const semiMajor = !isCircle ? (p.semiMajor ?? p.semiMajorAxis ?? 500) : radius; + const semiMinor = !isCircle ? (p.semiMinor ?? p.semiMinorAxis ?? 300) : radius; + const headingRad = !isCircle ? ((p.headingDeg ?? 0) * Math.PI) / 180 : 0; + this.tempHoldOutlineEntity = this.viewer.entities.add({ + id: 'temp_hold_outline', + position: center, + ellipse: { + semiMajorAxis: semiMajor, + semiMinorAxis: semiMinor, + rotation: headingRad, + material: Cesium.Color.TRANSPARENT, + outline: true, + outlineColor: Cesium.Color.ORANGE.withAlpha(0.8), + outlineWidth: 2, + arcType: Cesium.ArcType.NONE + } + }); this.tempHoldEntity = this.viewer.entities.add({ id: 'temp_hold_preview', name: 'HOLD', - position: this.missionPendingHold.center, + position: center, point: { pixelSize: 10, color: Cesium.Color.ORANGE, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, disableDepthTestDistance: Number.POSITIVE_INFINITY }, - label: { text: 'HOLD', font: '14px Microsoft YaHei', fillColor: Cesium.Color.ORANGE, outlineColor: Cesium.Color.BLACK, outlineWidth: 1 } + label: { text: '盘旋', font: '14px Microsoft YaHei', pixelOffset: new Cesium.Cartesian2(0, -20), fillColor: Cesium.Color.ORANGE, outlineColor: Cesium.Color.BLACK, outlineWidth: 1 } }); // 更新实线预览（含盘旋点） if (this.tempEntity) { @@ -1076,7 +1398,7 @@ export default { polyline: { positions: solidPositions, width: 3, - material: Cesium.Color.fromCssColorString('#800080'), + material: Cesium.Color.fromCssColorString('#2E5C3E'), arcType: Cesium.ArcType.NONE } }); @@ -1184,10 +1506,10 @@ export default { const colorLabel = '#888888'; // 属性名灰色 const colorValue = fontColor; // 属性值（默认黑，可配置） - // 文本内容 - const labelAlt = '高度: '; - const labelSpeed = ' 速度: '; - const labelHeading = ' 航向: '; + // 文本内容（h: 高度，v: 速度，s: 航向） + const labelAlt = 'h: '; + const labelSpeed = ' v: '; + const labelHeading = ' s: '; const textAlt = altitude + 'm'; const textSpeed = speed + 'km/h'; const textHeading = Math.round(heading) + '°'; @@ -1514,6 +1836,10 @@ export default { toRemove.forEach(ed => { this.removeTransformHandles(ed); if (this.selectedPlatformIcon === ed) this.selectedPlatformIcon = null; + if (ed.id && this.viewer) { + this.viewer.entities.removeById(`detection-zone-platformIcon-${ed.id}`); + this.viewer.entities.removeById(`power-zone-platformIcon-${ed.id}`); + } if (ed.entity) this.viewer && this.viewer.entities.remove(ed.entity); }); this.allEntities = this.allEntities.filter(e => !(e.type === 'platformIcon' && e.roomId === roomId)); @@ -1575,6 +1901,35 @@ export default { }; this.allEntities.push(entityData); }); + // 从 Redis 加载独立平台的探测区/威力区（routeId=0） + list.forEach((item) => { + const platformIconId = `platformIcon_room_${roomId}_${item.id}`; + const platformId = item.platformId; + if (!platformId) return; + getPlatformStyle({ roomId, routeId: 0, platformId }).then(res => { + const style = res.data; + if (!style) return; + if (style.detectionZoneVisible !== false && style.detectionZoneRadius != null && Number(style.detectionZoneRadius) > 0) { + this.ensureDetectionZoneForPlatformIcon(platformIconId, style.detectionZoneRadius, style.detectionZoneColor || 'rgba(0, 150, 255, 0.35)', style.detectionZoneOpacity); + } + if (style.powerZoneVisible !== false && style.powerZoneRadius != null && Number(style.powerZoneRadius) > 0) { + this.ensurePowerZoneForPlatformIcon(platformIconId, style.powerZoneRadius, style.powerZoneAngle ?? 120, style.powerZoneColor || 'rgba(255, 0, 0, 0.3)', style.powerZoneOpacity); + } + if (style.detectionZoneRadius != null || style.powerZoneRadius != null) { + this.$set(this.platformIconZoneStyles, platformIconId, { + detectionZoneRadius: style.detectionZoneRadius, + detectionZoneColor: style.detectionZoneColor, + detectionZoneOpacity: style.detectionZoneOpacity, + detectionZoneVisible: style.detectionZoneVisible !== false, + powerZoneRadius: style.powerZoneRadius, + powerZoneAngle: style.powerZoneAngle, + powerZoneColor: style.powerZoneColor, + powerZoneOpacity: style.powerZoneOpacity, + powerZoneVisible: style.powerZoneVisible !== false + }); + } + }).catch(() => {}); + }); }, /** 为已放置的平台图标设置服务端 ID（保存成功后由父组件调用） */ setPlatformIconServerId(entityId, serverId, roomId) { @@ -1587,6 +1942,7 @@ export default { //正式航线渲染函数 renderRouteWaypoints(waypoints, routeId = 'default', platformId, platform, style) { if (!waypoints || waypoints.length < 1) return; + this.waypointDragPreview = null; // 清理旧线 const lineId = `route-line-${routeId}`; const existingLine = this.viewer.entities.getById(lineId); @@ -1633,9 +1989,9 @@ export default { const wpColor = wpStyle.color || '#ffffff'; const wpOutline = wpStyle.outlineColor || '#0078FF'; const wpOutlineW = wpStyle.outlineWidth != null ? wpStyle.outlineWidth : 2; - // 航线默认紫色、线宽 3；与主航线一致的线型用于主线和转弯半径弧 + // 航线默认墨绿色、线宽 3；与主航线一致的线型用于主线和转弯半径弧 const lineWidth = lineStyle.width != null ? lineStyle.width : 3; - const lineColor = lineStyle.color || '#800080'; + const lineColor = lineStyle.color || '#2E5C3E'; const gapColor = lineStyle.gapColor != null ? lineStyle.gapColor : '#000000'; const dashLen = lineStyle.dashLength != null ? lineStyle.dashLength : 20; const useDash = (lineStyle.style || 'solid') === 'dash'; @@ -1656,11 +2012,12 @@ export default { }); if (!this._routeWaypointIdsByRoute) this._routeWaypointIdsByRoute = {}; this._routeWaypointIdsByRoute[routeId] = waypoints.map((wp) => wp.id); - // 判断航点 i 是否为“转弯半径”航点（将用弧线两端两个点替代中心点） + // 判断航点 i 是否为“转弯半径”航点（将用弧线两端两个点替代中心点）；非首尾默认 45° 坡度 const isTurnWaypointWithArc = (i) => { if (i < 1 || i >= waypoints.length - 1) return false; const wp = waypoints[i]; - if (this.getWaypointRadius(wp) <= 0) return false; + const effectiveAngle = this.getEffectiveTurnAngle(wp, i, waypoints.length); + if (this.getWaypointRadius({ ...wp, turnAngle: effectiveAngle }) <= 0) return false; const nextPos = originalPositions[i + 1]; let nextLogical = nextPos; if (this.isHoldWaypoint(waypoints[i + 1])) { @@ -1671,10 +2028,40 @@ export default { } return !!nextLogical; }; - // 遍历并绘制航点标记：转弯半径处不画中心点，改在下面画弧线时画两端两个点 + // 遍历并绘制航点标记：盘旋处在圆心画点+标签；有转弯半径时只画 entry/exit 两个虚拟点（见下方连线逻辑），不画原航点中心 waypoints.forEach((wp, index) => { - if (isTurnWaypointWithArc(index)) return; const pos = originalPositions[index]; + if (this.isHoldWaypoint(wp)) { + this.viewer.entities.add({ + id: `wp_${routeId}_${wp.id}`, + name: wp.name || `盘旋${index + 1}`, + position: pos, + properties: { + isMissionWaypoint: true, + routeId: routeId, + dbId: wp.id, + }, + point: { + pixelSize: Math.max(4, pixelSize - 2), + color: Cesium.Color.fromCssColorString(wpColor), + outlineColor: Cesium.Color.fromCssColorString(wpOutline), + outlineWidth: wpOutlineW, + disableDepthTestDistance: Number.POSITIVE_INFINITY + }, + label: { + text: wp.name || `盘旋${index + 1}`, + font: `${wp.labelFontSize != null ? Math.min(28, Math.max(10, Number(wp.labelFontSize))) : 14}px PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif`, + pixelOffset: new Cesium.Cartesian2(0, -Math.max(14, pixelSize + 8)), + fillColor: Cesium.Color.fromCssColorString(wp.labelColor || '#2c2c2c'), + outlineColor: Cesium.Color.fromCssColorString('#e8e8e8'), + outlineWidth: 0.5, + style: Cesium.LabelStyle.FILL_AND_OUTLINE + } + }); + return; + } + // 有转弯半径的航点不显示中心点，只显示下方连线逻辑里添加的 entry/exit 两个虚拟点，点击虚拟点弹窗仍控制原航点（dbId） + if (isTurnWaypointWithArc(index)) return; this.viewer.entities.add({ id: `wp_${routeId}_${wp.id}`, name: wp.name || `WP${index + 1}`, @@ -1707,55 +2094,159 @@ export default { if (iconUrl && originalPositions.length > 0) { const platformBillboardId = `route-platform-${routeId}`; const fullUrl = this.formatPlatformIconUrl(iconUrl); + const platId = (platform && platform.id) || 0; let initialRotation; const pathData = this.getRoutePathWithSegmentIndices(waypoints); if (pathData.path && pathData.path.length >= 2) { const heading = this.computeHeadingFromPositions(pathData.path[0], pathData.path[1]); if (heading !== undefined) initialRotation = Math.PI / 2 - heading; } - this.viewer.entities.add({ - id: platformBillboardId, - name: (platform && platform.name) || '平台', - position: originalPositions[0], - properties: { - routeId: routeId, - platformId: (platform && platform.id) || 0 - }, - billboard: { - image: fullUrl, - width: 144, - height: 144, - color: Cesium.Color.BLACK, // 航线飞机默认黑色，可通过编辑飞机颜色功能修改 - 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), - ...(initialRotation !== undefined && { rotation: initialRotation }) - } - }); + const currentRoomId = this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId); + const cachedStyle = this.platformCustomStyles && this.platformCustomStyles[routeId]; - // 异步加载并处理图片为白色，以便支持后续染色 - this.loadAndWhitenImage(fullUrl).then(whiteImage => { - const target = this.viewer.entities.getById(platformBillboardId); - if (target && target.billboard) { - target.billboard.image = whiteImage; - // 此时 target.billboard.color 已在创建时设为 BLACK（航线飞机默认黑色），染色后显示为黑色图标 - - // 如果在图片处理期间已经加载了自定义样式（Redis），需要重新应用一次颜色否则这里会保持默认黑色，覆盖掉 applyRedisPlatformStyles 的效果（如果它先执行了） - - if (this.platformCustomStyles && this.platformCustomStyles[routeId]) { - const style = this.platformCustomStyles[routeId]; - if (style.platformColor) { - target.billboard.color = Cesium.Color.fromCssColorString(style.platformColor); - } + const addPlatformBillboard = (initialColor, initialSize) => { + this.viewer.entities.add({ + id: platformBillboardId, + name: (platform && platform.name) || '平台', + position: originalPositions[0], + properties: { + routeId: routeId, + platformId: platId + }, + billboard: { + image: fullUrl, + width: initialSize, + height: initialSize, + color: Cesium.Color.fromCssColorString(initialColor), + 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), + ...(initialRotation !== undefined && { rotation: initialRotation }) } + }); - // 触发一次渲染刷新 - if (this.viewer.scene.requestRenderMode) { - this.viewer.scene.requestRender(); + this.loadAndWhitenImage(fullUrl).then(whiteImage => { + const target = this.viewer.entities.getById(platformBillboardId); + if (target && target.billboard) { + target.billboard.image = whiteImage; + if (this.platformCustomStyles && this.platformCustomStyles[routeId] && this.platformCustomStyles[routeId].platformColor) { + target.billboard.color = Cesium.Color.fromCssColorString(this.platformCustomStyles[routeId].platformColor); + } + if (this.viewer.scene.requestRenderMode) { + this.viewer.scene.requestRender(); + } } + }); + }; + + if (cachedStyle && cachedStyle.platformColor != null) { + const size = (cachedStyle.platformSize != null) ? Math.max(48, Math.min(256, Number(cachedStyle.platformSize))) : 144; + addPlatformBillboard(cachedStyle.platformColor, size); + if (cachedStyle.detectionZoneVisible !== false && cachedStyle.detectionZoneRadius != null && Number(cachedStyle.detectionZoneRadius) > 0) { + this.$nextTick(() => { + this.ensureDetectionZoneForRoute(routeId, cachedStyle.detectionZoneRadius, cachedStyle.detectionZoneColor || 'rgba(0, 150, 255, 0.35)', cachedStyle.detectionZoneOpacity); + }); } - }); + if (cachedStyle.powerZoneVisible !== false && cachedStyle.powerZoneRadius != null && Number(cachedStyle.powerZoneRadius) > 0) { + this.$nextTick(() => { + this.ensurePowerZoneForRoute(routeId, cachedStyle.powerZoneRadius, cachedStyle.powerZoneAngle ?? 120, cachedStyle.powerZoneColor || 'rgba(255, 0, 0, 0.3)', cachedStyle.powerZoneOpacity); + }); + } + } else if (currentRoomId && Number(platId) > 0) { + getPlatformStyle({ + roomId: currentRoomId, + routeId: routeId, + platformId: platId + }).then(res => { + let style = res.data; + const defaultColor = '#000000'; + const defaultSize = 144; + const hasZoneOnRoute = style && (style.detectionZoneRadius != null || style.powerZoneRadius != null); + const applyStyle = (s) => { + const color = (s && s.platformColor) ? s.platformColor : defaultColor; + const size = (s && s.platformSize != null) ? Math.max(48, Math.min(256, Number(s.platformSize))) : defaultSize; + this.$set(this.platformCustomStyles, routeId, { + labelFontSize: s && s.labelFontSize, + labelFontColor: s && s.labelFontColor, + platformSize: size, + platformColor: color, + detectionZoneRadius: s && s.detectionZoneRadius, + detectionZoneColor: s && s.detectionZoneColor, + detectionZoneOpacity: s && s.detectionZoneOpacity, + detectionZoneVisible: s && s.detectionZoneVisible !== false, + powerZoneRadius: s && s.powerZoneRadius, + powerZoneAngle: s && s.powerZoneAngle, + powerZoneColor: s && s.powerZoneColor, + powerZoneOpacity: s && s.powerZoneOpacity, + powerZoneVisible: s && s.powerZoneVisible !== false + }); + addPlatformBillboard(color, size); + if (s && s.detectionZoneVisible !== false && s.detectionZoneRadius != null && Number(s.detectionZoneRadius) > 0) { + this.$nextTick(() => this.ensureDetectionZoneForRoute(routeId, s.detectionZoneRadius, s.detectionZoneColor || 'rgba(0, 150, 255, 0.35)', s.detectionZoneOpacity)); + } + if (s && s.powerZoneVisible !== false && s.powerZoneRadius != null && Number(s.powerZoneRadius) > 0) { + this.$nextTick(() => this.ensurePowerZoneForRoute(routeId, s.powerZoneRadius, s.powerZoneAngle ?? 120, s.powerZoneColor || 'rgba(255, 0, 0, 0.3)', s.powerZoneOpacity)); + } + if (!s || s.platformColor == null) { + savePlatformStyle({ + roomId: String(currentRoomId), + routeId: routeId, + platformId: platId, + platformName: (platform && platform.name) || undefined, + labelFontSize: (s && s.labelFontSize != null) ? s.labelFontSize : 16, + labelFontColor: (s && s.labelFontColor) || '#333333', + platformSize: size, + platformColor: defaultColor + }).catch(() => {}); + } + }; + if (currentRoomId && platId && !hasZoneOnRoute) { + getPlatformStyle({ roomId: currentRoomId, routeId: 0, platformId: platId }).then(standRes => { + const stand = standRes.data; + if (stand && (stand.detectionZoneRadius != null || stand.powerZoneRadius != null)) { + style = Object.assign({}, style || {}, { + detectionZoneRadius: stand.detectionZoneRadius, + detectionZoneColor: stand.detectionZoneColor, + detectionZoneOpacity: stand.detectionZoneOpacity, + detectionZoneVisible: stand.detectionZoneVisible !== false, + powerZoneRadius: stand.powerZoneRadius, + powerZoneAngle: stand.powerZoneAngle, + powerZoneColor: stand.powerZoneColor, + powerZoneOpacity: stand.powerZoneOpacity, + powerZoneVisible: stand.powerZoneVisible !== false + }); + savePlatformStyle({ + roomId: String(currentRoomId), + routeId: routeId, + platformId: platId, + platformName: (style.platformName || (platform && platform.name)) || undefined, + labelFontSize: style.labelFontSize, + labelFontColor: style.labelFontColor, + platformSize: style.platformSize, + platformColor: style.platformColor, + detectionZoneRadius: style.detectionZoneRadius, + detectionZoneColor: style.detectionZoneColor, + detectionZoneOpacity: style.detectionZoneOpacity, + detectionZoneVisible: style.detectionZoneVisible, + powerZoneRadius: style.powerZoneRadius, + powerZoneAngle: style.powerZoneAngle, + powerZoneColor: style.powerZoneColor, + powerZoneOpacity: style.powerZoneOpacity, + powerZoneVisible: style.powerZoneVisible + }).catch(() => {}); + } + applyStyle(style); + }).catch(() => applyStyle(style)); + return; + } + applyStyle(style); + }).catch(() => { + addPlatformBillboard('#000000', 144); + }); + } else { + addPlatformBillboard('#000000', 144); + } // 飞机标牌：显示名字、高度、速度、航向，随飞机实时运动 const firstWp = waypoints[0]; @@ -1833,7 +2324,7 @@ export default { const exit = params && params.radius != null ? this.getCircleTangentExitPoint(currPos, nextPos || currPos, radius, clockwise) : this.getEllipseTangentExitPoint(currPos, nextPos || currPos, semiMajor, semiMinor, headingRad, clockwise); - finalPathPositions.push(entry); + let fullCirclePoints; let arcPoints; if (params && params.radius != null) { const enu = Cesium.Transforms.eastNorthUpToFixedFrame(currPos); @@ -1841,7 +2332,8 @@ export default { const north = Cesium.Matrix4.getColumn(enu, 1, new Cesium.Cartesian3()); const toEntry = Cesium.Cartesian3.subtract(entry, currPos, new Cesium.Cartesian3()); const entryAngle = Math.atan2(Cesium.Cartesian3.dot(toEntry, east), Cesium.Cartesian3.dot(toEntry, north)); - arcPoints = this.getCircleFullCircle(currPos, radius, entryAngle, clockwise, 48); + fullCirclePoints = this.getCircleFullCircle(currPos, radius, entryAngle, clockwise, 48); + arcPoints = this.getCircleArcEntryToExit(currPos, radius, entry, exit, clockwise, 48); } else { const enuE = Cesium.Transforms.eastNorthUpToFixedFrame(currPos); const eastE = Cesium.Matrix4.getColumn(enuE, 0, new Cesium.Cartesian3()); @@ -1849,18 +2341,23 @@ export default { const toEntryE = Cesium.Cartesian3.subtract(entry, currPos, new Cesium.Cartesian3()); const thetaE = Math.atan2(Cesium.Cartesian3.dot(toEntryE, eastE), Cesium.Cartesian3.dot(toEntryE, northE)); const entryLocalAngle = thetaE - headingRad; - arcPoints = this.getEllipseFullCircle(currPos, semiMajor, semiMinor, headingRad, entryLocalAngle, clockwise, 48); + fullCirclePoints = this.getEllipseFullCircle(currPos, semiMajor, semiMinor, headingRad, entryLocalAngle, clockwise, 48); + arcPoints = this.getEllipseArcEntryToExit(currPos, semiMajor, semiMinor, headingRad, entry, exit, clockwise, 48); } - for (let k = 1; k < arcPoints.length; k++) finalPathPositions.push(arcPoints[k]); - finalPathPositions.push(exit); + // 整圈 + entry→exit 弧段，避免弦线：entry → 整圈(回到entry) → 弧段到exit + const holdPositions = [entry, ...fullCirclePoints.slice(1), ...arcPoints.slice(1)]; + for (let k = 0; k < holdPositions.length; k++) finalPathPositions.push(holdPositions[k]); + // 盘旋不单独着色：仅作为主航线取点数据源，show:false 由主航线折线用 lineWidth/lineMaterial 统一绘制 this.viewer.entities.add({ id: `hold-line-${routeId}-${i}`, - polyline: { positions: [entry, ...arcPoints.slice(1), exit], width: 8, material: Cesium.Color.ORANGE, arcType: Cesium.ArcType.NONE, zIndex: 20 }, + show: false, + polyline: { positions: holdPositions, width: lineWidth, material: lineMaterial, arcType: Cesium.ArcType.NONE, zIndex: 20 }, properties: { routeId: routeId } }); lastPos = exit; } else { - const radius = this.getWaypointRadius(wp); + const effectiveAngle = this.getEffectiveTurnAngle(wp, i, waypoints.length); + const radius = this.getWaypointRadius({ ...wp, turnAngle: effectiveAngle }); let nextLogical = nextPos; if (nextPos && i + 1 < waypoints.length && this.isHoldWaypoint(waypoints[i + 1])) { const holdParams = this.parseHoldParams(waypoints[i + 1]); @@ -1869,22 +2366,42 @@ export default { : this.getEllipseEntryPoint(originalPositions[i + 1], currPos, holdParams.semiMajor ?? 500, holdParams.semiMinor ?? 300, ((holdParams.headingDeg || 0) * Math.PI) / 180); } if (i < waypoints.length - 1 && radius > 0 && nextLogical) { - const arcPoints = this.computeArcPositions(lastPos, currPos, nextLogical, radius); + const lastPosCloned = Cesium.Cartesian3.clone(lastPos); + const currPosCloned = Cesium.Cartesian3.clone(currPos); + const nextLogicalCloned = Cesium.Cartesian3.clone(nextLogical); + const routeIdCloned = routeId; + const dbIdCloned = wp.id; + const that = this; + const getArcPoints = () => { + const center = (that.waypointDragPreview && that.waypointDragPreview.routeId === routeIdCloned && that.waypointDragPreview.dbId === dbIdCloned) + ? that.waypointDragPreview.position : currPosCloned; + return that.computeArcPositions(lastPosCloned, center, nextLogicalCloned, radius); + }; + // 弧线用 CallbackProperty，拖拽虚拟点时实时重算实现动态预览 this.viewer.entities.add({ id: `arc-line-${routeId}-${i}`, - polyline: { positions: arcPoints, width: lineWidth, material: lineMaterial, arcType: Cesium.ArcType.NONE, zIndex: 20 }, + show: false, + polyline: { + positions: new Cesium.CallbackProperty(getArcPoints, false), + width: lineWidth, + material: lineMaterial, + arcType: Cesium.ArcType.NONE, + zIndex: 20 + }, properties: { routeId: routeId } }); - // 转弯半径两侧航点与航线整体航点风格一致，点击均打开原航点编辑（dbId 为当前 wp.id） + // 转弯半径两侧虚拟点也用 CallbackProperty，拖拽时随弧线实时更新 const wpName = wp.name || `WP${i + 1}`; - const arcEntry = arcPoints[0]; - const arcExit = arcPoints[arcPoints.length - 1]; - [arcEntry, arcExit].forEach((pos, idx) => { + [0, 1].forEach((idx) => { const suffix = idx === 0 ? '_entry' : '_exit'; + const getPos = () => { + const pts = getArcPoints(); + return idx === 0 ? pts[0] : pts[pts.length - 1]; + }; this.viewer.entities.add({ id: `wp_${routeId}_${wp.id}${suffix}`, name: wpName, - position: pos, + position: new Cesium.CallbackProperty(getPos, false), properties: { isMissionWaypoint: true, routeId: routeId, @@ -1908,6 +2425,7 @@ export default { } }); }); + const arcPoints = getArcPoints(); finalPathPositions.push(...arcPoints); lastPos = arcPoints[arcPoints.length - 1]; } else { @@ -1936,21 +2454,23 @@ export default { } } }, - /** 从各航点/弧线/盘旋实体取当前位置，供主航线折线实时连线（拖拽时动态跟随） */ + /** 从各航点/弧线/盘旋实体取当前位置，供主航线折线实时连线（拖拽时动态跟随）。转弯处优先用弧线，不经过航点中心，只展示转弯半径 */ getRouteLinePositionsFromWaypointEntities(routeId) { const ids = this._routeWaypointIdsByRoute && this._routeWaypointIdsByRoute[routeId]; if (!ids || !ids.length || !this.viewer) return null; const now = Cesium.JulianDate.now(); const positions = []; for (let i = 0; i < ids.length; i++) { - const ent = this.viewer.entities.getById(`wp_${routeId}_${ids[i]}`); - if (ent && ent.position) { - const pos = ent.position.getValue(now); - if (pos) { - positions.push(Cesium.Cartesian3.clone(pos)); + // 盘旋段优先用整圆弧线，不取圆心点 + const holdEnt = this.viewer.entities.getById(`hold-line-${routeId}-${i}`); + if (holdEnt && holdEnt.polyline && holdEnt.polyline.positions) { + const arr = holdEnt.polyline.positions.getValue(now); + if (arr && arr.length) { + for (let k = 0; k < arr.length; k++) positions.push(Cesium.Cartesian3.clone(arr[k])); continue; } } + // 转弯处优先取弧线，避免主航线显示“原直线”（中心点连线），只显示转弯半径弧 const arcEnt = this.viewer.entities.getById(`arc-line-${routeId}-${i}`); if (arcEnt && arcEnt.polyline && arcEnt.polyline.positions) { const arr = arcEnt.polyline.positions.getValue(now); @@ -1959,11 +2479,11 @@ export default { continue; } } - const holdEnt = this.viewer.entities.getById(`hold-line-${routeId}-${i}`); - if (holdEnt && holdEnt.polyline && holdEnt.polyline.positions) { - const arr = holdEnt.polyline.positions.getValue(now); - if (arr && arr.length) { - for (let k = 0; k < arr.length; k++) positions.push(Cesium.Cartesian3.clone(arr[k])); + const ent = this.viewer.entities.getById(`wp_${routeId}_${ids[i]}`); + if (ent && ent.position) { + const pos = ent.position.getValue(now); + if (pos) { + positions.push(Cesium.Cartesian3.clone(pos)); continue; } } @@ -1971,6 +2491,11 @@ export default { return positions.length > 0 ? positions : null; }, + /** 渲染/路径用：非首尾航点默认转弯坡度 45°，首尾为 0 */ + getEffectiveTurnAngle(wp, index, waypointsLength) { + if (index === 0 || index === waypointsLength - 1) return wp.turnAngle != null ? wp.turnAngle : 0; + return wp.turnAngle != null ? wp.turnAngle : 45; + }, // 计算单个点的转弯半径 getWaypointRadius(wp) { const speed = wp.speed || 800; @@ -2003,22 +2528,16 @@ export default { } }, - /** 圆上从 entry 到 exit 的弧段（按顺时针/逆时针），采样点数 */ - getCircleArcEntryToExit(centerCartesian, radiusMeters, entryCartesian, exitCartesian, clockwise, numPoints) { + /** 圆上整圈（360°）采样，从 startAngleRad 起按顺时针/逆时针，用于盘旋段渲染为整圆 */ + getCircleFullCircle(centerCartesian, radiusMeters, startAngleRad, clockwise, numPoints) { const enu = Cesium.Transforms.eastNorthUpToFixedFrame(centerCartesian); const east = Cesium.Matrix4.getColumn(enu, 0, new Cesium.Cartesian3()); const north = Cesium.Matrix4.getColumn(enu, 1, new Cesium.Cartesian3()); - const toEntry = Cesium.Cartesian3.subtract(entryCartesian, centerCartesian, new Cesium.Cartesian3()); - const toExit = Cesium.Cartesian3.subtract(exitCartesian, centerCartesian, new Cesium.Cartesian3()); - let entryAngle = Math.atan2(Cesium.Cartesian3.dot(toEntry, east), Cesium.Cartesian3.dot(toEntry, north)); - let exitAngle = Math.atan2(Cesium.Cartesian3.dot(toExit, east), Cesium.Cartesian3.dot(toExit, north)); - let diff = exitAngle - entryAngle; const sign = clockwise ? -1 : 1; - if (sign * diff <= 0) diff += sign * 2 * Math.PI; const points = []; for (let i = 0; i <= numPoints; i++) { const t = i / numPoints; - const angle = entryAngle + sign * t * Math.abs(diff); + const angle = startAngleRad + sign * t * 2 * Math.PI; const offset = Cesium.Cartesian3.add( Cesium.Cartesian3.multiplyByScalar(north, Math.cos(angle) * radiusMeters, new Cesium.Cartesian3()), Cesium.Cartesian3.multiplyByScalar(east, Math.sin(angle) * radiusMeters, new Cesium.Cartesian3()), @@ -2029,16 +2548,24 @@ export default { return points; }, - /** 圆上整圈（360°）采样，从 startAngleRad 起按顺时针/逆时针，用于盘旋段渲染为整圆 */ - getCircleFullCircle(centerCartesian, radiusMeters, startAngleRad, clockwise, numPoints) { + /** 圆上从 entry 到 exit 的弧段（按顺时针/逆时针），避免整圈后产生弦线 */ + getCircleArcEntryToExit(centerCartesian, radiusMeters, entryCartesian, exitCartesian, clockwise, numPoints) { const enu = Cesium.Transforms.eastNorthUpToFixedFrame(centerCartesian); const east = Cesium.Matrix4.getColumn(enu, 0, new Cesium.Cartesian3()); const north = Cesium.Matrix4.getColumn(enu, 1, new Cesium.Cartesian3()); + const toAngle = (cart) => { + const toP = Cesium.Cartesian3.subtract(cart, centerCartesian, new Cesium.Cartesian3()); + return Math.atan2(Cesium.Cartesian3.dot(toP, east), Cesium.Cartesian3.dot(toP, north)); + }; + let entryAngle = toAngle(entryCartesian); + let exitAngle = toAngle(exitCartesian); + let diff = exitAngle - entryAngle; const sign = clockwise ? -1 : 1; + if (sign * diff <= 0) diff += sign * 2 * Math.PI; const points = []; for (let i = 0; i <= numPoints; i++) { const t = i / numPoints; - const angle = startAngleRad + sign * t * 2 * Math.PI; + const angle = entryAngle + sign * t * Math.abs(diff); const offset = Cesium.Cartesian3.add( Cesium.Cartesian3.multiplyByScalar(north, Math.cos(angle) * radiusMeters, new Cesium.Cartesian3()), Cesium.Cartesian3.multiplyByScalar(east, Math.sin(angle) * radiusMeters, new Cesium.Cartesian3()), @@ -2306,8 +2833,8 @@ export default { const exit = params && params.radius != null ? this.getCircleTangentExitPoint(currPos, nextPos || currPos, radius, clockwise) : this.getEllipseTangentExitPoint(currPos, nextPos || currPos, semiMajor, semiMinor, headingRad, clockwise); - path.push(toLngLatAlt(entry)); - const arcStartIdx = path.length - 1; + const arcStartIdx = path.length; + let fullCirclePoints; let arcPoints; if (params && params.radius != null) { const enu = Cesium.Transforms.eastNorthUpToFixedFrame(currPos); @@ -2315,7 +2842,8 @@ export default { const north = Cesium.Matrix4.getColumn(enu, 1, new Cesium.Cartesian3()); const toEntry = Cesium.Cartesian3.subtract(entry, currPos, new Cesium.Cartesian3()); const entryAngle = Math.atan2(Cesium.Cartesian3.dot(toEntry, east), Cesium.Cartesian3.dot(toEntry, north)); - arcPoints = this.getCircleFullCircle(currPos, radius, entryAngle, clockwise, 48); + fullCirclePoints = this.getCircleFullCircle(currPos, radius, entryAngle, clockwise, 48); + arcPoints = this.getCircleArcEntryToExit(currPos, radius, entry, exit, clockwise, 48); } else { const enuE = Cesium.Transforms.eastNorthUpToFixedFrame(currPos); const eastE = Cesium.Matrix4.getColumn(enuE, 0, new Cesium.Cartesian3()); @@ -2323,10 +2851,11 @@ export default { const toEntryE = Cesium.Cartesian3.subtract(entry, currPos, new Cesium.Cartesian3()); const thetaE = Math.atan2(Cesium.Cartesian3.dot(toEntryE, eastE), Cesium.Cartesian3.dot(toEntryE, northE)); const entryLocalAngle = thetaE - headingRad; - arcPoints = this.getEllipseFullCircle(currPos, semiMajor, semiMinor, headingRad, entryLocalAngle, clockwise, 48); + fullCirclePoints = this.getEllipseFullCircle(currPos, semiMajor, semiMinor, headingRad, entryLocalAngle, clockwise, 48); + arcPoints = this.getEllipseArcEntryToExit(currPos, semiMajor, semiMinor, headingRad, entry, exit, clockwise, 48); } - for (let k = 1; k < arcPoints.length; k++) path.push(toLngLatAlt(arcPoints[k])); - path.push(toLngLatAlt(exit)); + const holdPositions = [entry, ...fullCirclePoints.slice(1), ...arcPoints.slice(1)]; + for (let k = 0; k < holdPositions.length; k++) path.push(toLngLatAlt(holdPositions[k])); holdArcRanges[i - 1] = { start: arcStartIdx, end: path.length - 1 }; segmentEndIndices[i - 1] = path.length - 1; lastPos = exit; @@ -2338,7 +2867,8 @@ export default { ? this.getCircleEntryPoint(originalPositions[i + 1], currPos, holdParams.radius) : this.getEllipseEntryPoint(originalPositions[i + 1], currPos, holdParams.semiMajor ?? 500, holdParams.semiMinor ?? 300, ((holdParams.headingDeg || 0) * Math.PI) / 180); } - const radius = this.getWaypointRadius(wp); + const effectiveAngle = this.getEffectiveTurnAngle(wp, i, waypoints.length); + const radius = this.getWaypointRadius({ ...wp, turnAngle: effectiveAngle }); if (i < waypoints.length - 1 && radius > 0 && nextLogical) { const arcPoints = this.computeArcPositions(lastPos, currPos, nextLogical, radius); arcPoints.forEach(p => path.push(toLngLatAlt(p))); @@ -2354,8 +2884,10 @@ export default { }, removePowerZoneByRouteId(routeId) { - const zoneId = `power-zone-${routeId}`; - this.viewer.entities.removeById(zoneId); + this.viewer.entities.removeById(`power-zone-${routeId}`); + }, + removeDetectionZoneByRouteId(routeId) { + this.viewer.entities.removeById(`detection-zone-${routeId}`); }, removeRouteById(routeId) { @@ -2365,7 +2897,7 @@ export default { const entity = entityList[i]; let shouldRemove = false; // 平台图标与标牌实体：通过 id 匹配 - if (entity.id === `route-platform-${routeId}` || entity.id === `route-platform-label-${routeId}` || entity.id === `power-zone-${routeId}`) { + if (entity.id === `route-platform-${routeId}` || entity.id === `route-platform-label-${routeId}` || entity.id === `detection-zone-${routeId}` || entity.id === `power-zone-${routeId}`) { shouldRemove = true; } else if (entity.properties && entity.properties.routeId) { const id = entity.properties.routeId.getValue && entity.properties.routeId.getValue(); @@ -2399,14 +2931,14 @@ export default { return heading; }, - /** 格式化飞机标牌文案：名字、高度(m)、速度(km/h)、航向(°) */ + /** 格式化飞机标牌文案：名字、h(m)、v(km/h)、s(°) */ formatPlatformLabelText(data) { const name = (data && data.name != null) ? String(data.name) : '—'; const alt = (data && data.altitude != null) ? Number(data.altitude) : 0; const speed = (data && data.speed != null) ? Number(data.speed) : 0; const hdg = (data && data.headingDeg != null) ? Number(data.headingDeg) : 0; const headingNorm = ((hdg % 360) + 360) % 360; - return `${name}\n高度: ${Math.round(alt)}m 速度: ${Math.round(speed)}km/h 航向: ${Math.round(headingNorm)}°`; + return `${name}\nh: ${Math.round(alt)}m v: ${Math.round(speed)}km/h s: ${Math.round(headingNorm)}°`; }, /** 动态推演：更新某条航线的平台图标位置与朝向（position: { lng, lat, alt } 或 Cesium.Cartesian3；directionPoint 为用于计算机头朝向的另一点；labelData 可选，用于更新标牌 { name, altitude, speed, headingDeg }） */ @@ -2443,7 +2975,7 @@ export default { // 优先使用 Redis 自定义样式，如果没有则使用 routeLabelStyles（可能为空或旧值） const customStyle = this.platformCustomStyles[routeId]; let style = { fontSize: 16, fontColor: '#000000' }; - + if (customStyle) { style.fontSize = customStyle.labelFontSize || 16; style.fontColor = customStyle.labelFontColor || '#000000'; @@ -2970,6 +3502,29 @@ export default { } return; } + // 增加航点模式：左键放置新航点 + if (this.addWaypointContext) { + const ctx = this.addWaypointContext; + const waypoints = ctx.waypoints || []; + const refAlt = ctx.mode === 'before' + ? (waypoints[ctx.waypointIndex - 1] && Number(waypoints[ctx.waypointIndex - 1].alt)) || (waypoints[ctx.waypointIndex] && Number(waypoints[ctx.waypointIndex].alt)) || 5000 + : (waypoints[ctx.waypointIndex] && Number(waypoints[ctx.waypointIndex].alt)) || (waypoints[ctx.waypointIndex + 1] && Number(waypoints[ctx.waypointIndex + 1].alt)) || 5000; + const placePosition = this.getClickPositionWithHeight(click.position, refAlt); + if (placePosition) { + const carto = Cesium.Cartographic.fromCartesian(placePosition); + const lng = Cesium.Math.toDegrees(carto.longitude); + const lat = Cesium.Math.toDegrees(carto.latitude); + const alt = carto.height; + this.$emit('add-waypoint-placed', { + routeId: ctx.routeId, + waypointIndex: ctx.waypointIndex, + mode: ctx.mode, + position: { lng, lat, alt } + }); + } + this.clearAddWaypointContext(); + return; + } const pickedObject = this.viewer.scene.pick(click.position); if (Cesium.defined(pickedObject) && pickedObject.id) { @@ -3095,7 +3650,12 @@ export default { } const pos = this.getClickPositionWithHeight(movement.endPosition, this.waypointDragging.originalAlt); if (pos) { - this.waypointDragging.entity.position = pos; + const entityId = this.waypointDragging.entity.id || ''; + if (entityId.endsWith('_entry') || entityId.endsWith('_exit')) { + this.waypointDragPreview = { routeId: this.waypointDragging.routeId, dbId: this.waypointDragging.dbId, position: pos }; + } else { + this.waypointDragging.entity.position = pos; + } if (this.viewer.scene.requestRender) this.viewer.scene.requestRender(); } } @@ -3104,7 +3664,12 @@ export default { if (this.waypointDragging) { const pos = this.getClickPositionWithHeight(movement.endPosition, this.waypointDragging.originalAlt); if (pos) { - this.waypointDragging.entity.position = pos; + const entityId = this.waypointDragging.entity.id || ''; + if (entityId.endsWith('_entry') || entityId.endsWith('_exit')) { + this.waypointDragPreview = { routeId: this.waypointDragging.routeId, dbId: this.waypointDragging.dbId, position: pos }; + } else { + this.waypointDragging.entity.position = pos; + } if (this.viewer.scene.requestRender) this.viewer.scene.requestRender(); } return; @@ -3117,6 +3682,14 @@ export default { if (this.viewer.scene.requestRender) this.viewer.scene.requestRender(); } } + if (this.addWaypointContext) { + const cartesian = this.getClickPosition(movement.endPosition); + if (cartesian) { + this.addWaypointContext.mouseCartesian = cartesian; + this.updateAddWaypointPreview(); + if (this.viewer.scene.requestRender) this.viewer.scene.requestRender(); + } + } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 拖拽结束：恢复地图操作、持久化新位置并清除状态；未超过阈值则只清 pending（视为点击） @@ -3129,7 +3702,15 @@ export default { const entity = this.waypointDragging.entity; const routeId = this.waypointDragging.routeId; const dbId = this.waypointDragging.dbId; - const pos = entity.position.getValue(Cesium.JulianDate.now()); + const entityId = entity.id || ''; + let pos; + if (entityId.endsWith('_entry') || entityId.endsWith('_exit')) { + pos = this.waypointDragPreview && this.waypointDragPreview.routeId === routeId && this.waypointDragPreview.dbId === dbId + ? this.waypointDragPreview.position : entity.position.getValue(Cesium.JulianDate.now()); + this.waypointDragPreview = null; + } else { + pos = entity.position.getValue(Cesium.JulianDate.now()); + } const ll = this.cartesianToLatLngAlt(pos); if (ll) { this.$emit('waypoint-position-changed', { dbId, routeId, lat: ll.lat, lng: ll.lng, alt: ll.alt }); @@ -3137,6 +3718,7 @@ export default { this.lastClickWasDrag = true; this.waypointDragging = null; } + this.waypointDragPreview = null; this.waypointDragPending = null; }, Cesium.ScreenSpaceEventType.LEFT_UP); } catch (error) { @@ -3160,6 +3742,13 @@ export default { this.contextMenu.visible = false; return; } + // 若处于“增加航点”预览，右键取消 + if (this.addWaypointContext) { + this.clearAddWaypointContext(); + this.contextMenu.visible = false; + this.$message && this.$message.info('已取消增加航点'); + return; + } // 隐藏之前可能显示的菜单 this.contextMenu.visible = false; @@ -3232,20 +3821,37 @@ export default { } } } - // 特殊处理：右键点击航点或航线时，从实体属性解析出 routeId，用于显示航线“上锁/解锁”菜单 + // 特殊处理：右键点击航点或航线时，从实体属性解析出 routeId；航点需区分为 routeWaypoint 以支持“向前/向后增加航点” if (!entityData && pickedEntity.properties) { const now = Cesium.JulianDate.now(); const props = pickedEntity.properties.getValue ? pickedEntity.properties.getValue(now) : null; if (props) { const isWp = props.isMissionWaypoint && props.isMissionWaypoint.getValue ? props.isMissionWaypoint.getValue() : props.isMissionWaypoint; const isLine = props.isMissionRouteLine && props.isMissionRouteLine.getValue ? props.isMissionRouteLine.getValue() : props.isMissionRouteLine; - if (isWp || isLine) { + if (isWp) { + let rId = props.routeId; + if (rId && rId.getValue) rId = rId.getValue(); + let dbId = props.dbId; + if (dbId && dbId.getValue) dbId = dbId.getValue(); + const ids = this._routeWaypointIdsByRoute && this._routeWaypointIdsByRoute[rId]; + const waypointIndex = ids && dbId != null ? ids.indexOf(dbId) : -1; + if (rId != null) entityData = { type: 'routeWaypoint', routeId: rId, dbId, waypointIndex }; + } else if (isLine) { let rId = props.routeId; if (rId && rId.getValue) rId = rId.getValue(); if (rId) entityData = { type: 'route', routeId: rId }; } } } + // 盘旋弧线（hold-line-routeId-i）右键视为在该盘旋航点处，waypointIndex = i+1 + if (!entityData && idStr && idStr.startsWith('hold-line-')) { + const parts = idStr.split('-'); + if (parts.length >= 4) { + const routeId = parts[2]; + const segIdx = parseInt(parts[3], 10); + if (!isNaN(segIdx)) entityData = { type: 'routeWaypoint', routeId, waypointIndex: segIdx + 1, fromHold: true }; + } + } } // 航线实体在 allEntities 中可能没有 routeId，从 id 解析 if (entityData && entityData.type === 'route' && entityData.id && !entityData.routeId) { @@ -3329,7 +3935,7 @@ export default { const routeId = ed.routeId const platformEntity = this.viewer && this.viewer.entities && this.viewer.entities.getById(`route-platform-${routeId}`) let size = 144 - let color = '#ffffff' + let color = '#000000' if (platformEntity && platformEntity.billboard) { const now = Cesium.JulianDate.now() const widthValue = platformEntity.billboard.width && platformEntity.billboard.width.getValue @@ -3362,7 +3968,7 @@ export default { const entity = this.viewer.entities.getById(`route-platform-${routeId}`) if (entity && entity.billboard) { const size = Math.max(48, Math.min(256, Number(this.editPlatformStyleForm.size) || 144)) - const color = this.editPlatformStyleForm.color || '#ffffff' + const color = this.editPlatformStyleForm.color || '#000000' entity.billboard.width = size entity.billboard.height = size entity.billboard.color = Cesium.Color.fromCssColorString(color) @@ -3846,11 +4452,16 @@ export default { if (entity.id && ( entity.id.toString().startsWith('temp_wp_') || entity.id.toString().includes('temp-preview') || - entity.id === 'temp_hold_preview' + entity.id === 'temp_hold_preview' || + entity.id === 'temp_hold_outline' )) { this.viewer.entities.remove(entity); } } + if (this.tempHoldOutlineEntity) { + try { this.viewer.entities.remove(this.tempHoldOutlineEntity); } catch (e) {} + this.tempHoldOutlineEntity = null; + } if (this.tempHoldEntity) { try { this.viewer.entities.remove(this.tempHoldEntity); } catch (e) {} this.tempHoldEntity = null; @@ -5685,6 +6296,90 @@ export default { this.copyPreviewWaypoints = null; this.copyPreviewMouseCartesian = null; }, + /** 右键菜单：打开航点编辑（支持 dbId 或 waypointIndex） */ + handleContextMenuOpenWaypointDialog(dbId, routeId, waypointIndex) { + this.contextMenu.visible = false; + this.$emit('open-waypoint-dialog', dbId, routeId, waypointIndex); + }, + /** 右键菜单：选择向前/向后增加航点，由父组件调用 startAddWaypointAt 传入 waypoints */ + handleAddWaypointAt(payload) { + this.contextMenu.visible = false; + this.$emit('add-waypoint-at', payload); + }, + handleToggleWaypointHold(payload) { + this.contextMenu.visible = false; + this.$emit('toggle-waypoint-hold', payload); + }, + /** 开始“在航点前/后增加航点”模式：显示预览折线，左键放置、右键取消。waypoints 为当前航线航点数组。 */ + startAddWaypointAt(routeId, waypointIndex, mode, waypoints) { + if (!waypoints || waypoints.length === 0) return; + this.clearAddWaypointContext(); + const ctx = { + routeId, + waypointIndex: Math.max(0, Math.min(waypointIndex, waypoints.length - 1)), + mode, + waypoints, + mouseCartesian: null + }; + const toCartesian = (wp) => Cesium.Cartesian3.fromDegrees(parseFloat(wp.lng), parseFloat(wp.lat), Number(wp.alt) || 5000); + ctx.mouseCartesian = toCartesian(waypoints[ctx.waypointIndex]); + this.addWaypointContext = ctx; + this.$message && this.$message.info(mode === 'before' ? '点击地图在当前位置前插入新航点，右键取消' : '点击地图在当前位置后插入新航点，右键取消'); + this.updateAddWaypointPreview(); + }, + /** 更新“增加航点”预览折线：上一/当前/下一与鼠标位置连线，含盘旋段视觉效果 */ + updateAddWaypointPreview() { + const ctx = this.addWaypointContext; + if (!ctx || !this.viewer || !ctx.waypoints || ctx.waypoints.length === 0) return; + const waypoints = ctx.waypoints; + const idx = ctx.waypointIndex; + const toCartesian = (wp) => { + const lon = parseFloat(wp.lng); + const lat = parseFloat(wp.lat); + const alt = Number(wp.alt) || 5000; + return Cesium.Cartesian3.fromDegrees(lon, lat, alt); + }; + let positions = []; + if (ctx.mode === 'before') { + const prev = idx > 0 ? toCartesian(waypoints[idx - 1]) : null; + const curr = toCartesian(waypoints[idx]); + if (ctx.mouseCartesian) { + if (prev) positions = [prev, ctx.mouseCartesian, curr]; + else positions = [ctx.mouseCartesian, curr]; + } + } else { + const curr = toCartesian(waypoints[idx]); + const next = idx + 1 < waypoints.length ? toCartesian(waypoints[idx + 1]) : null; + if (ctx.mouseCartesian) { + if (next) positions = [curr, ctx.mouseCartesian, next]; + else positions = [curr, ctx.mouseCartesian]; + } + } + if (positions.length < 2) return; + if (this.addWaypointPreviewEntity) { + this.viewer.entities.remove(this.addWaypointPreviewEntity); + this.addWaypointPreviewEntity = null; + } + this.addWaypointPreviewEntity = this.viewer.entities.add({ + polyline: { + positions: positions, + width: 3, + material: new Cesium.PolylineDashMaterialProperty({ + color: Cesium.Color.fromCssColorString('#2E5C3E'), + dashLength: 16 + }), + arcType: Cesium.ArcType.NONE + } + }); + }, + /** 清除“增加航点”模式及预览折线 */ + clearAddWaypointContext() { + if (this.addWaypointPreviewEntity) { + this.viewer.entities.remove(this.addWaypointPreviewEntity); + this.addWaypointPreviewEntity = null; + } + this.addWaypointContext = null; + }, toggleRouteLock() { const ed = this.contextMenu.entityData; if (!ed || ed.type !== 'route' || ed.routeId == null) { @@ -5753,9 +6448,9 @@ export default { // 读取平台设置 const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`) let iconSize = 144 - let iconColor = '#ffffff' + let iconColor = '#000000' let platformName = '平台' // 默认名称 - + // 尝试获取平台名称 if (labelEntity && labelEntity.label && labelEntity.label.text) { const now = Cesium.JulianDate.now() @@ -5786,7 +6481,16 @@ export default { this.editPlatformForm.iconSize = iconSize this.editPlatformForm.iconColor = iconColor this.editPlatformForm.platformName = platformName - this.editPlatformForm.platformId = ed.platformId || 0 + this.editPlatformForm.platformId = ed.platformId || 0 + + // 记录打开弹窗时的原始样式，供取消时还原、以及区分“预览 vs 真正保存” + this.editPlatformOriginalStyle = { + routeId, + fontSize, + fontColor, + iconSize, + iconColor + } // 异步获取最新航线信息，更新 platformId 和 platformName if (routeId) { @@ -5855,18 +6559,18 @@ export default { const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`) if (platformEntity && platformEntity.billboard) { const size = Math.max(48, Math.min(256, Number(this.editPlatformForm.iconSize) || 144)) - const color = this.editPlatformForm.iconColor || '#ffffff' + const color = this.editPlatformForm.iconColor || '#000000' platformEntity.billboard.width = size platformEntity.billboard.height = size platformEntity.billboard.color = Cesium.Color.fromCssColorString(color) } - + // 更新样式缓存 this.$set(this.platformCustomStyles, routeId, { labelFontSize: fontSize, labelFontColor: fontColor, platformSize: Math.max(48, Math.min(256, Number(this.editPlatformForm.iconSize) || 144)), - platformColor: this.editPlatformForm.iconColor || '#ffffff' + platformColor: this.editPlatformForm.iconColor || '#000000' }); // 调用后端接口保存样式到Redis @@ -5881,7 +6585,7 @@ export default { labelFontSize: fontSize, labelFontColor: fontColor, platformSize: Math.max(48, Math.min(256, Number(this.editPlatformForm.iconSize) || 144)), - platformColor: this.editPlatformForm.iconColor || '#ffffff' + platformColor: this.editPlatformForm.iconColor || '#000000' }; savePlatformStyle(styleData).then(() => { // console.log("样式保存成功"); @@ -5899,43 +6603,210 @@ export default { }, 0); }, - /** 右键飞机：打开威力区设置弹窗 */ + /** 右键飞机/平台图标：打开探测区设置弹窗（支持航线上的平台与直接摆放的平台图标） */ + openDetectionZoneDialog() { + const ed = this.contextMenu.entityData + if (!ed) { + this.contextMenu.visible = false + return + } + this.contextMenu.visible = false + if (ed.type === 'platformIcon') { + const platformIconId = ed.id + const roomId = ed.roomId || this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId) + const platformId = ed.platformId + const cached = this.platformIconZoneStyles && this.platformIconZoneStyles[platformIconId] + this.detectionZoneForm = { + routeId: null, + platformIconId, + roomId, + platformId, + radius: (cached && cached.detectionZoneRadius != null) ? Number(cached.detectionZoneRadius) : 50, + color: (cached && cached.detectionZoneColor) ? cached.detectionZoneColor : 'rgba(0, 150, 255, 0.35)', + opacity: (cached && cached.detectionZoneOpacity != null) ? Number(cached.detectionZoneOpacity) : 0.35, + visible: cached && cached.detectionZoneVisible === false ? false : true + } + if (roomId && platformId && !cached) { + getPlatformStyle({ roomId, routeId: 0, platformId }).then(res => { + const style = res.data + if (style && (style.detectionZoneRadius != null || style.detectionZoneColor)) { + this.detectionZoneForm.radius = style.detectionZoneRadius != null ? Number(style.detectionZoneRadius) : 50 + this.detectionZoneForm.color = style.detectionZoneColor || 'rgba(0, 150, 255, 0.35)' + this.detectionZoneForm.opacity = style.detectionZoneOpacity != null ? Number(style.detectionZoneOpacity) : 0.35 + } + if (style && style.detectionZoneVisible === false) this.detectionZoneForm.visible = false + this.detectionZoneDialogVisible = true + }).catch(() => { this.detectionZoneDialogVisible = true }) + } else { + this.detectionZoneDialogVisible = true + } + return + } + if (ed.type !== 'routePlatform' || ed.routeId == null) return + const routeId = ed.routeId + const cached = this.platformCustomStyles && this.platformCustomStyles[routeId] + this.detectionZoneForm = { + routeId, + platformIconId: null, + roomId: null, + platformId: null, + radius: (cached && cached.detectionZoneRadius != null) ? Number(cached.detectionZoneRadius) : 50, + color: (cached && cached.detectionZoneColor) ? cached.detectionZoneColor : 'rgba(0, 150, 255, 0.35)', + opacity: (cached && cached.detectionZoneOpacity != null) ? Number(cached.detectionZoneOpacity) : 0.35, + visible: cached && cached.detectionZoneVisible === false ? false : true + } + this.detectionZoneDialogVisible = true + }, + + /** 右键飞机/平台图标：打开威力区设置弹窗 */ openPowerZoneDialog() { const ed = this.contextMenu.entityData - if (!ed || ed.type !== 'routePlatform' || ed.routeId == null) { + if (!ed) { this.contextMenu.visible = false return } - // 重置表单，保留上次的 routeId + this.contextMenu.visible = false + if (ed.type === 'platformIcon') { + const platformIconId = ed.id + const roomId = ed.roomId || this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId) + const platformId = ed.platformId + const cached = this.platformIconZoneStyles && this.platformIconZoneStyles[platformIconId] + this.powerZoneForm = { + routeId: null, + platformIconId, + roomId, + platformId, + radius: (cached && cached.powerZoneRadius != null) ? Number(cached.powerZoneRadius) : 300, + angle: (cached && cached.powerZoneAngle != null) ? Number(cached.powerZoneAngle) : 120, + color: (cached && cached.powerZoneColor) ? cached.powerZoneColor : 'rgba(255, 0, 0, 0.3)', + opacity: (cached && cached.powerZoneOpacity != null) ? Number(cached.powerZoneOpacity) : 0.3, + visible: cached && cached.powerZoneVisible === false ? false : true + } + if (roomId && platformId && !cached) { + getPlatformStyle({ roomId, routeId: 0, platformId }).then(res => { + const style = res.data + if (style && (style.powerZoneRadius != null || style.powerZoneColor)) { + this.powerZoneForm.radius = style.powerZoneRadius != null ? Number(style.powerZoneRadius) : 300 + this.powerZoneForm.angle = style.powerZoneAngle != null ? Number(style.powerZoneAngle) : 120 + this.powerZoneForm.color = style.powerZoneColor || 'rgba(255, 0, 0, 0.3)' + this.powerZoneForm.opacity = style.powerZoneOpacity != null ? Number(style.powerZoneOpacity) : 0.3 + } + if (style && style.powerZoneVisible === false) this.powerZoneForm.visible = false + this.powerZoneDialogVisible = true + }).catch(() => { this.powerZoneDialogVisible = true }) + } else { + this.powerZoneDialogVisible = true + } + return + } + if (ed.type !== 'routePlatform' || ed.routeId == null) return + const routeId = ed.routeId + const cached = this.platformCustomStyles && this.platformCustomStyles[routeId] this.powerZoneForm = { - routeId: ed.routeId, - radius: 1000, - color: 'rgba(255, 0, 0, 0.3)' + routeId, + platformIconId: null, + roomId: null, + platformId: null, + radius: (cached && cached.powerZoneRadius != null) ? Number(cached.powerZoneRadius) : 300, + angle: (cached && cached.powerZoneAngle != null) ? Number(cached.powerZoneAngle) : 120, + color: (cached && cached.powerZoneColor) ? cached.powerZoneColor : 'rgba(255, 0, 0, 0.3)', + opacity: (cached && cached.powerZoneOpacity != null) ? Number(cached.powerZoneOpacity) : 0.3, + visible: cached && cached.powerZoneVisible === false ? false : true } - this.contextMenu.visible = false this.powerZoneDialogVisible = true }, - /** 应用威力区：以当前平台位置为中心画圆 */ - applyPowerZone() { - const routeId = this.powerZoneForm.routeId - if (!routeId || !this.viewer) { - this.powerZoneDialogVisible = false - return - } + /** + * 以平台位置为中心绘制探测区整圆（供 applyDetectionZone 与 applyRedisPlatformStyles 复用） + */ + ensureDetectionZoneForRoute(routeId, radiusKm, color, opacity) { + if (!routeId || !this.viewer) return const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`) - if (!platformEntity) { - this.$message.error('未找到对应平台，无法添加威力区') - this.powerZoneDialogVisible = false - return + if (!platformEntity) return + const oldZoneId = `detection-zone-${routeId}` + this.viewer.entities.removeById(oldZoneId) + const radius = Number(radiusKm) || 50 + const alpha = opacity != null ? Number(opacity) : 0.35 + const fillColor = (color ? Cesium.Color.fromCssColorString(color) : new Cesium.Color(0, 0.59, 1, 1)).withAlpha(alpha) + this.viewer.entities.add({ + id: oldZoneId, + position: new Cesium.CallbackProperty(() => { + const now = Cesium.JulianDate.now() + return platformEntity.position.getValue(now) + }, false), + ellipse: { + semiMinorAxis: radius * 1000, + semiMajorAxis: radius * 1000, + material: fillColor, + outline: true, + outlineColor: fillColor.clone().withAlpha(1.0), + outlineWidth: 2 + } + }) + if (this.viewer.scene.requestRenderMode) { + this.viewer.scene.requestRender() } + }, - // 移除旧的威力区（如果存在） + /** + * 以平台位置与航向为中心绘制威力区扇形（供 applyPowerZone 与 applyRedisPlatformStyles 复用） + * @param {string} routeId + * @param {number} radiusKm 半径千米 + * @param {number} angleDeg 扇形夹角（度），如 120 + * @param {string} color 填充颜色 + * @param {number} opacity 透明度 0-1 + */ + ensurePowerZoneForRoute(routeId, radiusKm, angleDeg, color, opacity) { + if (!routeId || !this.viewer) return + const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`) + const labelEntity = this.viewer.entities.getById(`route-platform-label-${routeId}`) + if (!platformEntity) return const oldZoneId = `power-zone-${routeId}` this.viewer.entities.removeById(oldZoneId) + const radiusMeters = (Number(radiusKm) || 300) * 1000 + const angleRad = ((Number(angleDeg) || 120) * Math.PI) / 180 + const halfAngle = angleRad / 2 + const alpha = opacity != null ? Number(opacity) : 0.3 + const fillColor = (color ? Cesium.Color.fromCssColorString(color) : new Cesium.Color(1, 0, 0, 1)).withAlpha(alpha) + this.viewer.entities.add({ + id: oldZoneId, + polygon: { + hierarchy: new Cesium.CallbackProperty(() => { + const now = Cesium.JulianDate.now() + const center = platformEntity.position.getValue(now) + // 航向：北为 0° 顺时针为正（东 90°）；generateSectorPositions 中 0=东、π/2=北（逆时针），故中心角 = π/2 - 航向弧度 + let headingRad = 0 + if (labelEntity && labelEntity.labelDataCache && labelEntity.labelDataCache.headingDeg != null) { + headingRad = (Number(labelEntity.labelDataCache.headingDeg) * Math.PI) / 180 + } + const centerMathAngle = Math.PI / 2 - headingRad + const startAngle = centerMathAngle + halfAngle + const endAngle = centerMathAngle - halfAngle + return new Cesium.PolygonHierarchy(this.generateSectorPositions(center, radiusMeters, startAngle, endAngle)) + }, false), + material: fillColor, + outline: true, + outlineColor: fillColor.clone().withAlpha(1.0), + outlineWidth: 2 + } + }) + if (this.viewer.scene.requestRenderMode) { + this.viewer.scene.requestRender() + } + }, - // 添加新威力区 - // 使用 CallbackProperty 绑定位置，使其随飞机移动 + /** + * 以独立平台图标位置为中心绘制探测区整圆（routeId=0 存 Redis） + */ + ensureDetectionZoneForPlatformIcon(platformIconId, radiusKm, color, opacity) { + if (!platformIconId || !this.viewer) return + const platformEntity = this.viewer.entities.getById(platformIconId) + if (!platformEntity) return + const oldZoneId = `detection-zone-platformIcon-${platformIconId}` + this.viewer.entities.removeById(oldZoneId) + const radius = Number(radiusKm) || 50 + const alpha = opacity != null ? Number(opacity) : 0.35 + const fillColor = (color ? Cesium.Color.fromCssColorString(color) : new Cesium.Color(0, 0.59, 1, 1)).withAlpha(alpha) this.viewer.entities.add({ id: oldZoneId, position: new Cesium.CallbackProperty(() => { @@ -5943,21 +6814,436 @@ export default { return platformEntity.position.getValue(now) }, false), ellipse: { - semiMinorAxis: this.powerZoneForm.radius, - semiMajorAxis: this.powerZoneForm.radius, - material: Cesium.Color.fromCssColorString(this.powerZoneForm.color), + semiMinorAxis: radius * 1000, + semiMajorAxis: radius * 1000, + material: fillColor, outline: true, - outlineColor: Cesium.Color.fromCssColorString(this.powerZoneForm.color).withAlpha(1.0), + outlineColor: fillColor.clone().withAlpha(1.0), outlineWidth: 2 } }) + if (this.viewer.scene.requestRenderMode) this.viewer.scene.requestRender() + }, - if (this.viewer.scene.requestRenderMode) { - this.viewer.scene.requestRender() + /** + * 以独立平台图标位置与朝向绘制威力区扇形（routeId=0 存 Redis） + */ + ensurePowerZoneForPlatformIcon(platformIconId, radiusKm, angleDeg, color, opacity) { + if (!platformIconId || !this.viewer) return + const platformEntity = this.viewer.entities.getById(platformIconId) + if (!platformEntity) return + const oldZoneId = `power-zone-platformIcon-${platformIconId}` + this.viewer.entities.removeById(oldZoneId) + const radiusMeters = (Number(radiusKm) || 300) * 1000 + const angleRad = ((Number(angleDeg) || 120) * Math.PI) / 180 + const halfAngle = angleRad / 2 + const alpha = opacity != null ? Number(opacity) : 0.3 + const fillColor = (color ? Cesium.Color.fromCssColorString(color) : new Cesium.Color(1, 0, 0, 1)).withAlpha(alpha) + this.viewer.entities.add({ + id: oldZoneId, + polygon: { + hierarchy: new Cesium.CallbackProperty(() => { + const now = Cesium.JulianDate.now() + const center = platformEntity.position.getValue(now) + let headingRad = 0 + if (platformEntity.billboard && platformEntity.billboard.rotation) { + const rot = platformEntity.billboard.rotation.getValue(now) + headingRad = typeof rot === 'number' ? (Math.PI / 2 - rot) : 0 + } + const centerMathAngle = Math.PI / 2 - headingRad + const startAngle = centerMathAngle + halfAngle + const endAngle = centerMathAngle - halfAngle + return new Cesium.PolygonHierarchy(this.generateSectorPositions(center, radiusMeters, startAngle, endAngle)) + }, false), + material: fillColor, + outline: true, + outlineColor: fillColor.clone().withAlpha(1.0), + outlineWidth: 2 + } + }) + if (this.viewer.scene.requestRenderMode) this.viewer.scene.requestRender() + }, + + _applyDetectionZoneForPlatformIcon() { + const platformIconId = this.detectionZoneForm.platformIconId + const roomId = this.detectionZoneForm.roomId + const platformId = this.detectionZoneForm.platformId + const visible = this.detectionZoneForm.visible !== false + if (!platformIconId || !this.viewer) { + this.detectionZoneDialogVisible = false + return } + const radius = this.detectionZoneForm.radius + const color = this.detectionZoneForm.color + const opacity = this.detectionZoneForm.opacity != null ? Number(this.detectionZoneForm.opacity) : 0.35 + if (visible) { + this.ensureDetectionZoneForPlatformIcon(platformIconId, radius, color, opacity) + this.$message.success(`已添加半径 ${radius} 千米的探测区`) + } else { + this.viewer.entities.removeById(`detection-zone-platformIcon-${platformIconId}`) + this.$message.success('已隐藏探测区') + } + this.$set(this.platformIconZoneStyles, platformIconId, { + ...this.platformIconZoneStyles[platformIconId], + detectionZoneRadius: radius, + detectionZoneColor: color, + detectionZoneOpacity: opacity, + detectionZoneVisible: visible + }) + this.detectionZoneDialogVisible = false + if (roomId && platformId) { + getPlatformStyle({ roomId, routeId: 0, platformId }).then(res => { + const existing = res.data || {} + const styleData = { + roomId: String(roomId), + routeId: 0, + platformId, + platformName: existing.platformName || undefined, + detectionZoneRadius: radius, + detectionZoneColor: color, + detectionZoneOpacity: opacity, + detectionZoneVisible: visible, + powerZoneRadius: existing.powerZoneRadius, + powerZoneAngle: existing.powerZoneAngle, + powerZoneColor: existing.powerZoneColor, + powerZoneOpacity: existing.powerZoneOpacity, + powerZoneVisible: existing.powerZoneVisible + } + savePlatformStyle(styleData).catch(() => {}) + }).catch(() => {}) + } + }, + + /** 应用探测区：整圆并保存到 Redis（支持航线平台与独立平台图标） */ + applyDetectionZone() { + const platformIconId = this.detectionZoneForm.platformIconId + if (platformIconId) { + this._applyDetectionZoneForPlatformIcon() + return + } + const routeId = this.detectionZoneForm.routeId + if (!routeId || !this.viewer) { + this.detectionZoneDialogVisible = false + return + } + const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`) + if (!platformEntity) { + this.$message.error('未找到对应平台，无法添加探测区') + this.detectionZoneDialogVisible = false + return + } + const currentRoomId = this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId) + let platformId = 0 + if (platformEntity.properties && platformEntity.properties.platformId) { + const now = Cesium.JulianDate.now() + platformId = platformEntity.properties.platformId.getValue ? platformEntity.properties.platformId.getValue(now) : platformEntity.properties.platformId + } + const radius = this.detectionZoneForm.radius + const color = this.detectionZoneForm.color + const opacity = this.detectionZoneForm.opacity != null ? Number(this.detectionZoneForm.opacity) : 0.35 + const visible = this.detectionZoneForm.visible !== false + + const doDrawAndClose = () => { + if (visible) { + this.ensureDetectionZoneForRoute(routeId, radius, color, opacity) + this.$message.success(`已添加半径 ${radius} 千米的探测区`) + } else { + this.viewer.entities.removeById(`detection-zone-${routeId}`) + this.$message.success('已隐藏探测区') + } + this.$set(this.platformCustomStyles, routeId, { + ...this.platformCustomStyles[routeId], + detectionZoneRadius: radius, + detectionZoneColor: color, + detectionZoneOpacity: opacity, + detectionZoneVisible: visible + }) + this.detectionZoneDialogVisible = false + } + + if (currentRoomId && Number(platformId) > 0) { + getPlatformStyle({ roomId: currentRoomId, routeId, platformId }).then(res => { + const existing = res.data || {} + const styleData = { + roomId: String(currentRoomId), + routeId, + platformId, + platformName: existing.platformName || undefined, + labelFontSize: existing.labelFontSize, + labelFontColor: existing.labelFontColor, + platformSize: existing.platformSize, + platformColor: existing.platformColor, + detectionZoneRadius: radius, + detectionZoneColor: color, + detectionZoneOpacity: opacity, + detectionZoneVisible: visible, + powerZoneRadius: existing.powerZoneRadius, + powerZoneAngle: existing.powerZoneAngle, + powerZoneColor: existing.powerZoneColor, + powerZoneOpacity: existing.powerZoneOpacity, + powerZoneVisible: existing.powerZoneVisible + } + savePlatformStyle(styleData).then(doDrawAndClose).catch(() => doDrawAndClose()) + }).catch(() => doDrawAndClose()) + } else { + doDrawAndClose() + } + }, + + _applyPowerZoneForPlatformIcon() { + const platformIconId = this.powerZoneForm.platformIconId + const roomId = this.powerZoneForm.roomId + const platformId = this.powerZoneForm.platformId + const visible = this.powerZoneForm.visible !== false + if (!platformIconId || !this.viewer) { + this.powerZoneDialogVisible = false + return + } + const radius = this.powerZoneForm.radius + const angle = this.powerZoneForm.angle + const color = this.powerZoneForm.color + const opacity = this.powerZoneForm.opacity != null ? Number(this.powerZoneForm.opacity) : 0.3 + if (visible) { + this.ensurePowerZoneForPlatformIcon(platformIconId, radius, angle, color, opacity) + this.$message.success(`已添加半径 ${radius} 千米、夹角 ${angle}° 的威力区`) + } else { + this.viewer.entities.removeById(`power-zone-platformIcon-${platformIconId}`) + this.$message.success('已隐藏威力区') + } + this.$set(this.platformIconZoneStyles, platformIconId, { + ...this.platformIconZoneStyles[platformIconId], + powerZoneRadius: radius, + powerZoneAngle: angle, + powerZoneColor: color, + powerZoneOpacity: opacity, + powerZoneVisible: visible + }) this.powerZoneDialogVisible = false - this.$message.success(`已添加半径 ${this.powerZoneForm.radius} 米的威力区`) + if (roomId && platformId) { + getPlatformStyle({ roomId, routeId: 0, platformId }).then(res => { + const existing = res.data || {} + const styleData = { + roomId: String(roomId), + routeId: 0, + platformId, + platformName: existing.platformName || undefined, + detectionZoneRadius: existing.detectionZoneRadius, + detectionZoneColor: existing.detectionZoneColor, + detectionZoneOpacity: existing.detectionZoneOpacity, + detectionZoneVisible: existing.detectionZoneVisible, + powerZoneRadius: radius, + powerZoneAngle: angle, + powerZoneColor: color, + powerZoneOpacity: opacity, + powerZoneVisible: visible + } + savePlatformStyle(styleData).catch(() => {}) + }).catch(() => {}) + } }, + + /** 应用威力区：扇形并保存到 Redis（支持航线平台与独立平台图标） */ + applyPowerZone() { + const platformIconId = this.powerZoneForm.platformIconId + if (platformIconId) { + this._applyPowerZoneForPlatformIcon() + return + } + const routeId = this.powerZoneForm.routeId + if (!routeId || !this.viewer) { + this.powerZoneDialogVisible = false + return + } + const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`) + if (!platformEntity) { + this.$message.error('未找到对应平台，无法添加威力区') + this.powerZoneDialogVisible = false + return + } + const currentRoomId = this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId) + let platformId = 0 + if (platformEntity.properties && platformEntity.properties.platformId) { + const now = Cesium.JulianDate.now() + platformId = platformEntity.properties.platformId.getValue ? platformEntity.properties.platformId.getValue(now) : platformEntity.properties.platformId + } + const radius = this.powerZoneForm.radius + const angle = this.powerZoneForm.angle + const color = this.powerZoneForm.color + const opacity = this.powerZoneForm.opacity != null ? Number(this.powerZoneForm.opacity) : 0.3 + const visible = this.powerZoneForm.visible !== false + + const doDrawAndClose = () => { + if (visible) { + this.ensurePowerZoneForRoute(routeId, radius, angle, color, opacity) + this.$message.success(`已添加半径 ${radius} 千米、夹角 ${angle}° 的威力区`) + } else { + this.viewer.entities.removeById(`power-zone-${routeId}`) + this.$message.success('已隐藏威力区') + } + this.$set(this.platformCustomStyles, routeId, { + ...this.platformCustomStyles[routeId], + powerZoneRadius: radius, + powerZoneAngle: angle, + powerZoneColor: color, + powerZoneOpacity: opacity, + powerZoneVisible: visible + }) + this.powerZoneDialogVisible = false + } + + if (currentRoomId && Number(platformId) > 0) { + getPlatformStyle({ roomId: currentRoomId, routeId, platformId }).then(res => { + const existing = res.data || {} + const styleData = { + roomId: String(currentRoomId), + routeId, + platformId, + platformName: existing.platformName || undefined, + labelFontSize: existing.labelFontSize, + labelFontColor: existing.labelFontColor, + platformSize: existing.platformSize, + platformColor: existing.platformColor, + detectionZoneRadius: existing.detectionZoneRadius, + detectionZoneColor: existing.detectionZoneColor, + detectionZoneOpacity: existing.detectionZoneOpacity, + detectionZoneVisible: existing.detectionZoneVisible, + powerZoneRadius: radius, + powerZoneAngle: angle, + powerZoneColor: color, + powerZoneOpacity: opacity, + powerZoneVisible: visible + } + savePlatformStyle(styleData).then(doDrawAndClose).catch(() => doDrawAndClose()) + }).catch(() => doDrawAndClose()) + } else { + doDrawAndClose() + } + }, + + /** 右键菜单：切换探测区显示/隐藏（航线平台与独立平台图标通用） */ + toggleDetectionZoneVisibility() { + const ed = this.contextMenu.entityData + this.contextMenu.visible = false + if (!ed || !this.viewer) return + if (ed.type === 'routePlatform' && ed.routeId != null) { + const routeId = ed.routeId + const c = this.platformCustomStyles && this.platformCustomStyles[routeId] + const nextVisible = c && c.detectionZoneVisible === false + const radius = (c && c.detectionZoneRadius != null) ? Number(c.detectionZoneRadius) : 50 + const color = (c && c.detectionZoneColor) || 'rgba(0, 150, 255, 0.35)' + const opacity = (c && c.detectionZoneOpacity != null) ? Number(c.detectionZoneOpacity) : 0.35 + if (nextVisible) { + this.ensureDetectionZoneForRoute(routeId, radius, color, opacity) + this.$message.success('已显示探测区') + } else { + this.viewer.entities.removeById(`detection-zone-${routeId}`) + this.$message.success('已隐藏探测区') + } + this.$set(this.platformCustomStyles, routeId, { ...this.platformCustomStyles[routeId], detectionZoneVisible: nextVisible }) + const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`) + let platformId = 0 + if (platformEntity && platformEntity.properties && platformEntity.properties.platformId) { + const now = Cesium.JulianDate.now() + platformId = platformEntity.properties.platformId.getValue ? platformEntity.properties.platformId.getValue(now) : platformEntity.properties.platformId + } + const currentRoomId = this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId) + if (currentRoomId && Number(platformId) > 0) { + getPlatformStyle({ roomId: currentRoomId, routeId, platformId }).then(res => { + const existing = res.data || {} + savePlatformStyle({ ...existing, roomId: currentRoomId, routeId, platformId, detectionZoneVisible: nextVisible }).catch(() => {}) + }).catch(() => {}) + } + return + } + if (ed.type === 'platformIcon' && ed.id) { + const platformIconId = ed.id + const c = this.platformIconZoneStyles && this.platformIconZoneStyles[platformIconId] + const nextVisible = c && c.detectionZoneVisible === false + const radius = (c && c.detectionZoneRadius != null) ? Number(c.detectionZoneRadius) : 50 + const color = (c && c.detectionZoneColor) || 'rgba(0, 150, 255, 0.35)' + const opacity = (c && c.detectionZoneOpacity != null) ? Number(c.detectionZoneOpacity) : 0.35 + if (nextVisible) { + this.ensureDetectionZoneForPlatformIcon(platformIconId, radius, color, opacity) + this.$message.success('已显示探测区') + } else { + this.viewer.entities.removeById(`detection-zone-platformIcon-${platformIconId}`) + this.$message.success('已隐藏探测区') + } + this.$set(this.platformIconZoneStyles, platformIconId, { ...this.platformIconZoneStyles[platformIconId], detectionZoneVisible: nextVisible }) + const roomId = ed.roomId || this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId) + const platformId = ed.platformId + if (roomId && platformId) { + getPlatformStyle({ roomId, routeId: 0, platformId }).then(res => { + const existing = res.data || {} + savePlatformStyle({ ...existing, roomId: String(roomId), routeId: 0, platformId, detectionZoneVisible: nextVisible }).catch(() => {}) + }).catch(() => {}) + } + } + }, + + /** 右键菜单：切换威力区显示/隐藏 */ + togglePowerZoneVisibility() { + const ed = this.contextMenu.entityData + this.contextMenu.visible = false + if (!ed || !this.viewer) return + if (ed.type === 'routePlatform' && ed.routeId != null) { + const routeId = ed.routeId + const c = this.platformCustomStyles && this.platformCustomStyles[routeId] + const nextVisible = c && c.powerZoneVisible === false + const radius = (c && c.powerZoneRadius != null) ? Number(c.powerZoneRadius) : 300 + const angle = (c && c.powerZoneAngle != null) ? Number(c.powerZoneAngle) : 120 + const color = (c && c.powerZoneColor) || 'rgba(255, 0, 0, 0.3)' + const opacity = (c && c.powerZoneOpacity != null) ? Number(c.powerZoneOpacity) : 0.3 + if (nextVisible) { + this.ensurePowerZoneForRoute(routeId, radius, angle, color, opacity) + this.$message.success('已显示威力区') + } else { + this.viewer.entities.removeById(`power-zone-${routeId}`) + this.$message.success('已隐藏威力区') + } + this.$set(this.platformCustomStyles, routeId, { ...this.platformCustomStyles[routeId], powerZoneVisible: nextVisible }) + const platformEntity = this.viewer.entities.getById(`route-platform-${routeId}`) + let platformId = 0 + if (platformEntity && platformEntity.properties && platformEntity.properties.platformId) { + const now = Cesium.JulianDate.now() + platformId = platformEntity.properties.platformId.getValue ? platformEntity.properties.platformId.getValue(now) : platformEntity.properties.platformId + } + const currentRoomId = this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId) + if (currentRoomId && Number(platformId) > 0) { + getPlatformStyle({ roomId: currentRoomId, routeId, platformId }).then(res => { + const existing = res.data || {} + savePlatformStyle({ ...existing, roomId: currentRoomId, routeId, platformId, powerZoneVisible: nextVisible }).catch(() => {}) + }).catch(() => {}) + } + return + } + if (ed.type === 'platformIcon' && ed.id) { + const platformIconId = ed.id + const c = this.platformIconZoneStyles && this.platformIconZoneStyles[platformIconId] + const nextVisible = c && c.powerZoneVisible === false + const radius = (c && c.powerZoneRadius != null) ? Number(c.powerZoneRadius) : 300 + const angle = (c && c.powerZoneAngle != null) ? Number(c.powerZoneAngle) : 120 + const color = (c && c.powerZoneColor) || 'rgba(255, 0, 0, 0.3)' + const opacity = (c && c.powerZoneOpacity != null) ? Number(c.powerZoneOpacity) : 0.3 + if (nextVisible) { + this.ensurePowerZoneForPlatformIcon(platformIconId, radius, angle, color, opacity) + this.$message.success('已显示威力区') + } else { + this.viewer.entities.removeById(`power-zone-platformIcon-${platformIconId}`) + this.$message.success('已隐藏威力区') + } + this.$set(this.platformIconZoneStyles, platformIconId, { ...this.platformIconZoneStyles[platformIconId], powerZoneVisible: nextVisible }) + const roomId = ed.roomId || this.$route.query.roomId || (this.$parent && this.$parent.currentRoomId) + const platformId = ed.platformId + if (roomId && platformId) { + getPlatformStyle({ roomId, routeId: 0, platformId }).then(res => { + const existing = res.data || {} + savePlatformStyle({ ...existing, roomId: String(roomId), routeId: 0, platformId, powerZoneVisible: nextVisible }).catch(() => {}) + }).catch(() => {}) + } + } + }, + // 从右键菜单删除实体 deleteEntityFromContextMenu() { if (this.contextMenu.entityData) { @@ -5973,6 +7259,30 @@ export default { }, /** + * 由父组件在渲染航线前调用，预先写入平台样式，使 renderRouteWaypoints 创建实体时可直接用该颜色（无延迟） + * @param {string} routeId - 航线 id + * @param {Object} style - { labelFontSize, labelFontColor, platformSize, platformColor, detectionZoneRadius, detectionZoneColor, detectionZoneOpacity, powerZoneRadius, powerZoneAngle, powerZoneColor, powerZoneOpacity } + */ + setPlatformStyle(routeId, style) { + if (!routeId || !style) return; + this.$set(this.platformCustomStyles, routeId, { + labelFontSize: style.labelFontSize, + labelFontColor: style.labelFontColor, + platformSize: style.platformSize != null ? style.platformSize : 144, + platformColor: style.platformColor != null ? style.platformColor : '#000000', + detectionZoneRadius: style.detectionZoneRadius, + detectionZoneColor: style.detectionZoneColor, + detectionZoneOpacity: style.detectionZoneOpacity, + detectionZoneVisible: style.detectionZoneVisible !== false, + powerZoneRadius: style.powerZoneRadius, + powerZoneAngle: style.powerZoneAngle, + powerZoneColor: style.powerZoneColor, + powerZoneOpacity: style.powerZoneOpacity, + powerZoneVisible: style.powerZoneVisible !== false + }); + }, + + /** * 批量获取并应用航线平台样式（Redis） * 遍历 allEntities 中的所有航线平台，调用 getPlatformStyle */ @@ -5987,14 +7297,14 @@ export default { const idStr = entity.id || ''; if (idStr.startsWith('route-platform-') && !idStr.startsWith('route-platform-label-')) { const routeId = idStr.replace('route-platform-', ''); - + // 获取 platformId let platformId = 0; if (entity.properties && entity.properties.platformId) { const now = Cesium.JulianDate.now(); platformId = entity.properties.platformId.getValue ? entity.properties.platformId.getValue(now) : entity.properties.platformId; } - + // 确保 platformId 存在（可能是字符串或数字，需转为数字判断） if (Number(platformId) > 0) { getPlatformStyle({ @@ -6004,23 +7314,32 @@ export default { }).then(res => { if (res.data) { const style = res.data; - - // 缓存样式 + + // 缓存样式（含探测区、威力区及显示开关） this.$set(this.platformCustomStyles, routeId, { labelFontSize: style.labelFontSize, labelFontColor: style.labelFontColor, platformSize: style.platformSize, - platformColor: style.platformColor + platformColor: style.platformColor, + detectionZoneRadius: style.detectionZoneRadius, + detectionZoneColor: style.detectionZoneColor, + detectionZoneOpacity: style.detectionZoneOpacity, + detectionZoneVisible: style.detectionZoneVisible !== false, + powerZoneRadius: style.powerZoneRadius, + powerZoneAngle: style.powerZoneAngle, + powerZoneColor: style.powerZoneColor, + powerZoneOpacity: style.powerZoneOpacity, + powerZoneVisible: style.powerZoneVisible !== false }); - + // 应用标牌样式 const labelEntity = this.viewer.entities.getById(`route-platform-label-${routeId}`); if (labelEntity) { // 触发重绘（借助 updatePlatformPosition 中的逻辑） // 这里手动设置一下样式，updatePlatformPosition 会在下次更新时使用 - this.$set(this.routeLabelStyles, routeId, { - fontSize: style.labelFontSize || 16, - fontColor: style.labelFontColor || '#333333' + this.$set(this.routeLabelStyles, routeId, { + fontSize: style.labelFontSize || 16, + fontColor: style.labelFontColor || '#333333' }); // 强制更新标牌内容 if (labelEntity.labelDataCache) { @@ -6029,16 +7348,25 @@ export default { this.updatePlatformPosition(routeId, entity.position.getValue(Cesium.JulianDate.now()), null, labelEntity.labelDataCache); } } - + // 应用平台图标样式 if (entity.billboard) { const size = Math.max(48, Math.min(256, Number(style.platformSize) || 144)); - const color = style.platformColor || '#ffffff'; + const color = style.platformColor || '#000000'; entity.billboard.width = size; entity.billboard.height = size; entity.billboard.color = Cesium.Color.fromCssColorString(color); } - + + // 应用探测区（从 Redis 读出，仅当显示开关为 true 时绘制） + if (style.detectionZoneVisible !== false && style.detectionZoneRadius != null && style.detectionZoneRadius > 0) { + this.ensureDetectionZoneForRoute(routeId, style.detectionZoneRadius, style.detectionZoneColor || 'rgba(0, 150, 255, 0.35)', style.detectionZoneOpacity); + } + // 应用威力区（从 Redis 读出） + if (style.powerZoneVisible !== false && style.powerZoneRadius != null && style.powerZoneRadius > 0) { + this.ensurePowerZoneForRoute(routeId, style.powerZoneRadius, style.powerZoneAngle ?? 120, style.powerZoneColor || 'rgba(255, 0, 0, 0.3)', style.powerZoneOpacity); + } + if (this.viewer.scene.requestRenderMode) { this.viewer.scene.requestRender(); } @@ -6142,11 +7470,13 @@ export default { ) if (index > -1) { const entity = this.allEntities[index] - // 平台图标：移除伸缩框并清除选中；若已保存到服务端则通知父组件删除 + // 平台图标：移除伸缩框、探测区/威力区实体并清除选中；若已保存到服务端则通知父组件删除 if (entity.type === 'platformIcon') { if (entity.serverId) this.$emit('platform-icon-removed', { serverId: entity.serverId }) this.removeTransformHandles(entity) if (this.selectedPlatformIcon === entity) this.selectedPlatformIcon = null + this.viewer.entities.removeById(`detection-zone-platformIcon-${entity.id}`) + this.viewer.entities.removeById(`power-zone-platformIcon-${entity.id}`) } // 从地图中移除 if (entity instanceof Cesium.Entity) { @@ -6183,6 +7513,10 @@ export default { if (!ed) return this.removeTransformHandles(ed) if (this.selectedPlatformIcon === ed) this.selectedPlatformIcon = null + if (ed.id) { + this.viewer.entities.removeById(`detection-zone-platformIcon-${ed.id}`) + this.viewer.entities.removeById(`power-zone-platformIcon-${ed.id}`) + } if (ed.entity) this.viewer.entities.remove(ed.entity) this.allEntities = this.allEntities.filter(e => !(e.type === 'platformIcon' && e.serverId === serverId)) }, @@ -7524,6 +8858,11 @@ export default { gap: 6px; z-index: 1000; pointer-events: none; + transition: bottom 0.3s ease; +} + +.map-info-panel.panel-raised { + bottom: 75px; } /* 比例尺：高德风格，浅色底、圆角、刻度线 */ @@ -7616,4 +8955,27 @@ export default { padding: 10px 20px; background-color: #fff; } + +/* 探测区/威力区弹窗预选颜色块 */ +.zone-color-grid { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 4px; +} +.zone-color-item { + width: 24px; + height: 24px; + border-radius: 4px; + cursor: pointer; + border: 2px solid transparent; + flex-shrink: 0; +} +.zone-color-item:hover { + border-color: #409eff; +} +.zone-color-item.active { + border-color: #409eff; + box-shadow: 0 0 0 1px #409eff; +} diff --git a/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue b/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue index 5e4db4e..9eede47 100644 --- a/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue +++ b/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue @@ -1,6 +1,6 @@
+
+
+
该航线暂无航点数据
+ +
+
取 消 @@ -217,6 +303,8 @@ export default { groundPlatforms: [], selectedPlatformId: null, selectedPlatform: null, + waypointsTableData: [], + waypointsEditMode: false, form: { id: '', name: '' @@ -254,6 +342,7 @@ export default { this.selectedPlatformId = val.platformId || null this.selectedPlatform = val.platform ? { ...val.platform } : null this.parseStyleFromRoute(val) + this.syncWaypointsTableData(val.waypoints || []) } }, immediate: true, @@ -352,6 +441,75 @@ export default { attrs.lineStyle = { ...this.styleForm.line } return JSON.stringify(attrs) }, + /** 将 startTime 字符串（如 K+00:40:00）转为相对 K 的分钟数 */ + startTimeToMinutes(s) { + if (!s || typeof s !== 'string') return 0 + const m = s.match(/K([+-])(\d{2}):(\d{2})/) + if (!m) return 0 + const sign = m[1] === '+' ? 1 : -1 + const h = parseInt(m[2], 10) + const min = parseInt(m[3], 10) + return sign * (h * 60 + min) + }, + /** 将相对 K 的分钟数转为 startTime 字符串 */ + minutesToStartTime(m) { + const num = Number(m) + if (isNaN(num)) return 'K+00:00:00' + if (num >= 0) { + const h = Math.floor(num / 60) + const min = num % 60 + return `K+${String(h).padStart(2, '0')}:${String(min).padStart(2, '0')}:00` + } + const abs = Math.abs(num) + const h = Math.floor(abs / 60) + const min = abs % 60 + return `K-${String(h).padStart(2, '0')}:${String(min).padStart(2, '0')}:00` + }, + isHoldRow(row) { + const t = (row && (row.pointType || row.point_type)) || 'normal' + return t === 'hold_circle' || t === 'hold_ellipse' + }, + syncWaypointsTableData(waypoints) { + this.waypointsTableData = (waypoints || []).map(wp => ({ + ...wp, + minutesFromK: this.startTimeToMinutes(wp.startTime), + labelFontSize: wp.labelFontSize != null ? Number(wp.labelFontSize) : 14, + labelColor: wp.labelColor || '#333333' + })) + this.waypointsEditMode = false + }, + formatNum(val) { + if (val === undefined || val === null || val === '') return '—' + const n = Number(val) + return isNaN(n) ? String(val) : n + }, + confirmWaypointsEdit() { + this.waypointsEditMode = false + this.$message.success('表格已保存，点击下方「确定」将提交航线与航点') + }, + cancelWaypointsEdit() { + this.syncWaypointsTableData(this.route.waypoints || []) + this.$message.info('已取消编辑') + }, + getWaypointsPayloadForSave() { + const routeId = this.form.id + return this.waypointsTableData.map(row => ({ + id: row.id, + routeId, + seq: row.seq, + name: row.name, + lng: row.lng, + lat: row.lat, + alt: row.alt, + speed: row.speed, + startTime: this.minutesToStartTime(row.minutesFromK), + turnAngle: row.turnAngle != null ? row.turnAngle : 0, + pointType: row.pointType || null, + holdParams: row.holdParams || null, + labelFontSize: row.labelFontSize != null ? row.labelFontSize : 14, + labelColor: row.labelColor || '#333333' + })) + }, handleSave() { const payload = { ...this.form, @@ -363,6 +521,9 @@ export default { line: { ...this.styleForm.line } } } + if (this.waypointsTableData.length > 0) { + payload.waypoints = this.getWaypointsPayloadForSave() + } this.$emit('save', payload) this.visible = false } @@ -662,6 +823,52 @@ export default { font-size: 12px; } +/* 航点表格页 */ +.waypoints-tab-content { + min-height: 380px; + max-height: 380px; + overflow: hidden; + padding: 0 16px; + background: #fff; +} +.waypoints-table-actions { + margin-bottom: 10px; + display: flex; + align-items: center; + gap: 8px; +} +.waypoints-table-wrap { + background: #fff; + border-radius: 8px; + padding: 12px 0; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05); +} +.waypoints-table { + width: 100%; +} +.waypoints-table .el-input-number { + width: 100%; +} +.waypoints-table .el-input-number .el-input__inner { + text-align: left; +} +.table-color-wrap { + display: inline-flex; + align-items: center; + gap: 6px; +} +.table-color-wrap .color-value { + font-size: 11px; + color: #909399; + max-width: 48px; + overflow: hidden; + text-overflow: ellipsis; +} +.waypoints-table .color-text { + font-size: 12px; + color: #606266; +} + .blue-btn { background: #165dff; border-color: #165dff; diff --git a/ruoyi-ui/src/views/ganttChart/index.vue b/ruoyi-ui/src/views/ganttChart/index.vue new file mode 100644 index 0000000..0f3b6d5 --- /dev/null +++ b/ruoyi-ui/src/views/ganttChart/index.vue @@ -0,0 +1,540 @@ + + + + + diff --git a/sql/sys_timeline_segment.sql b/sql/sys_timeline_segment.sql new file mode 100644 index 0000000..4345d60 --- /dev/null +++ b/sql/sys_timeline_segment.sql @@ -0,0 +1,22 @@ +-- ---------------------------- +-- 时间轴信息表 +-- ---------------------------- +drop table if exists sys_timeline_segment; +create table sys_timeline_segment ( + segment_id bigint(20) not null auto_increment comment '时间段ID', + room_id bigint(20) not null comment '房间ID', + segment_time varchar(8) not null comment '时间点（HH:mm:ss）', + segment_name varchar(50) not null comment '时间段名称', + segment_desc varchar(500) default '' comment '时间段描述', + primary key (segment_id), + key idx_room_id (room_id) +) engine=innodb auto_increment=100 comment = '时间轴信息表'; + +-- ---------------------------- +-- 初始化时间轴信息表数据（示例数据） +-- ---------------------------- +insert into sys_timeline_segment values(1, 1, '08:00:00', '任务准备', '开始准备任务所需的资源和设备'); +insert into sys_timeline_segment values(2, 1, '10:00:00', '资源调配', '完成资源的调配和分配'); +insert into sys_timeline_segment values(3, 1, '12:00:00', '任务执行', '开始执行主要任务'); +insert into sys_timeline_segment values(4, 1, '14:00:00', '任务监控', '监控任务执行进度'); +insert into sys_timeline_segment values(5, 1, '16:00:00', '任务完成', '任务完成，进行总结');