-
@@ -453,10 +452,6 @@ export default {
this.$emit('create-route', plan)
},
- handleCreateRouteWithHold(plan) {
- this.$emit('create-route-with-hold', plan)
- },
-
handleDeletePlan(plan) {
this.$confirm(`是否确认删除方案 "${plan.name}"？这将同时删除该方案下的所有航线。`, "警告", {
confirmButtonText: "确定",
diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue
index ae32850..ba97f03 100644
--- a/ruoyi-ui/src/views/childRoom/index.vue
+++ b/ruoyi-ui/src/views/childRoom/index.vue
@@ -160,7 +160,6 @@
@hide="hideRightPanel"
@select-route="selectRoute"
@create-route="createRoute"
- @create-route-with-hold="openAddHoldThenCreateRoute"
@delete-route="handleDeleteRoute"
@select-plan="selectPlan"
@create-plan="createPlan"
@@ -631,14 +630,12 @@ export default {
addHoldDialogTitle() {
if (!this.addHoldContext) return '添加盘旋';
if (this.addHoldContext.mode === 'drawing') return '在最后两航点之间插入盘旋';
- if (this.addHoldContext.mode === 'drawing_first') return '先画盘旋再画航线';
return '在此航段添加盘旋';
},
addHoldDialogTip() {
if (!this.addHoldContext) return '';
if (this.addHoldContext.mode === 'drawing') return '在最后两航点之间插入盘旋，保存航线时生效。';
- if (this.addHoldContext.mode === 'drawing_first') return '设置盘旋参数后，将进入航线绘制：第一个点击为盘旋中心，第二个点击为下一航点。';
- return `在 ${this.addHoldContext.fromName} 与 ${this.addHoldContext.toName} 之间添加盘旋，到计划时间后沿切线飞往下一航点（原「下一格」航点将被移除）。`;
+ return `将冲突位置「${this.addHoldContext.toName}」替换为盘旋航点，到计划时间后沿切线飞往下一航点，路径顺序不变。`;
}
},
mounted() {
@@ -1034,12 +1031,6 @@ export default {
this.showAddHoldDialog = true;
},
- openAddHoldThenCreateRoute(plan) {
- if (!plan || !plan.id) return;
- this.addHoldContext = { mode: 'drawing_first', plan };
- this.addHoldForm = { holdType: 'hold_circle', radius: 500, semiMajor: 500, semiMinor: 300, headingDeg: 0, clockwise: true, startTime: '', startTimeMinutes: 60 };
- this.showAddHoldDialog = true;
- },
/** 弹窗点击“确定”：正式将数据保存到后端数据库 */
async confirmSaveNewRoute() {
// 1. 严格校验
@@ -2230,22 +2221,6 @@ export default {
this.$message.success('已插入盘旋，继续点选航点后右键结束保存');
return;
}
- if (this.addHoldContext.mode === 'drawing_first') {
- const holdParams = this.addHoldForm.holdType === 'hold_circle'
- ? { radius: this.addHoldForm.radius, clockwise: this.addHoldForm.clockwise }
- : { semiMajor: this.addHoldForm.semiMajor, semiMinor: this.addHoldForm.semiMinor, headingDeg: this.addHoldForm.headingDeg, clockwise: this.addHoldForm.clockwise };
- this.showAddHoldDialog = false;
- const plan = this.addHoldContext.plan;
- this.addHoldContext = null;
- this.createRoute(plan);
- this.$nextTick(() => {
- if (this.$refs.cesiumMap && this.$refs.cesiumMap.setInitialHoldParams) {
- this.$refs.cesiumMap.setInitialHoldParams(holdParams);
- }
- });
- this.$message.success('请先点击盘旋中心，再点击下一航点，然后继续绘制或右键结束');
- return;
- }
const { routeId, legIndex } = this.addHoldContext;
const route = this.routes.find(r => r.id === routeId);
if (!route || !route.waypoints || route.waypoints.length < 2) {
@@ -2253,36 +2228,32 @@ export default {
return;
}
const waypoints = route.waypoints;
- const prevWp = waypoints[legIndex];
- const nextWp = waypoints[legIndex + 1];
- const newSeq = (prevWp.seq != null ? Number(prevWp.seq) : legIndex + 1) + 1;
- const baseSeq = prevWp.seq != null ? Number(prevWp.seq) : legIndex + 1;
+ const targetWp = waypoints[legIndex + 1];
+ if (!targetWp || !targetWp.id) {
+ this.$message.warning('目标航点无效');
+ return;
+ }
const holdParams = this.addHoldForm.holdType === 'hold_circle'
? { radius: this.addHoldForm.radius, clockwise: this.addHoldForm.clockwise }
: { semiMajor: this.addHoldForm.semiMajor, semiMinor: this.addHoldForm.semiMinor, headingDeg: this.addHoldForm.headingDeg, clockwise: this.addHoldForm.clockwise };
const startTime = this.addHoldForm.startTimeMinutes !== '' && this.addHoldForm.startTimeMinutes != null && !Number.isNaN(Number(this.addHoldForm.startTimeMinutes))
? this.minutesToStartTime(Number(this.addHoldForm.startTimeMinutes))
- : (nextWp.startTime || 'K+01:00');
+ : (targetWp.startTime || 'K+01:00');
try {
- await addWaypoints({
- routeId,
+ await updateWaypoints({
+ id: targetWp.id,
+ routeId: routeId,
name: 'HOLD',
- seq: newSeq,
- lat: nextWp.lat,
- lng: nextWp.lng,
- alt: nextWp.alt != null ? nextWp.alt : prevWp.alt,
- speed: prevWp.speed || 800,
+ seq: targetWp.seq,
+ lat: targetWp.lat,
+ lng: targetWp.lng,
+ alt: targetWp.alt,
+ speed: targetWp.speed != null ? targetWp.speed : 800,
startTime,
+ turnAngle: targetWp.turnAngle != null ? targetWp.turnAngle : 0,
pointType: this.addHoldForm.holdType,
holdParams: JSON.stringify(holdParams)
});
- await delWaypoints(nextWp.id);
- for (let i = legIndex + 2; i < waypoints.length; i++) {
- const w = waypoints[i];
- if (w.id) {
- await updateWaypoints({ ...w, seq: baseSeq + (i - legIndex) });
- }
- }
this.showAddHoldDialog = false;
this.addHoldContext = null;
await this.getList();
@@ -2292,9 +2263,9 @@ export default {
this.$refs.cesiumMap.renderRouteWaypoints(updated.waypoints, routeId, updated.platformId, updated.platform, this.parseRouteStyle(updated.attributes));
this.$nextTick(() => this.updateDeductionPositions());
}
- this.$message.success('已添加盘旋航点');
+ this.$message.success('已将冲突位置航点替换为盘旋航点');
} catch (e) {
- this.$message.error(e.msg || '添加盘旋失败');
+ this.$message.error(e.msg || '替换盘旋失败');
console.error(e);
}
},
From b9f3daa8c6c9c856a92810b370b472027775b04b Mon Sep 17 00:00:00 2001
From: ctw <1051735452@qq.com>
Date: Sun, 8 Feb 2026 14:53:58 +0800
Subject: [PATCH 04/12] =?UTF-8?q?=E5=8F=AF=E6=8B=96=E6=8B=BD=E5=9B=BE?=
=?UTF-8?q?=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ruoyi-ui/.env.development | 2 +-
ruoyi-ui/src/views/cesiumMap/ContextMenu.vue | 30 ++
ruoyi-ui/src/views/cesiumMap/index.vue | 526 ++++++++++++++++++++++++++-
ruoyi-ui/src/views/childRoom/RightPanel.vue | 58 ++-
ruoyi-ui/src/views/childRoom/index.vue | 87 +++--
ruoyi-ui/vue.config.js | 2 +-
6 files changed, 659 insertions(+), 46 deletions(-)
diff --git a/ruoyi-ui/.env.development b/ruoyi-ui/.env.development
index 4d098ba..0e7127a 100644
--- a/ruoyi-ui/.env.development
+++ b/ruoyi-ui/.env.development
@@ -8,7 +8,7 @@ ENV = 'development'
VUE_APP_BASE_API = '/dev-api'
# 访问地址（绕过 /dev-api 代理，用于解决静态资源/图片访问 401 认证问题）
-VUE_APP_BACKEND_URL = 'http://localhost:8080'
+VUE_APP_BACKEND_URL = 'http://127.0.0.1:8080'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue
index 796c828..096d43b 100644
--- a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue
+++ b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue
@@ -272,6 +272,24 @@
+
+
+
@@ -324,6 +342,18 @@ export default {
this.$emit('delete')
},
+ handleShowTransformBox() {
+ this.$emit('show-transform-box')
+ },
+
+ handleEditPlatformPosition() {
+ this.$emit('edit-platform-position')
+ },
+
+ handleEditPlatformHeading() {
+ this.$emit('edit-platform-heading')
+ },
+
toggleColorPicker(property) {
if (this.showColorPickerFor === property) {
this.showColorPickerFor = null
diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue
index 9843259..f25a40e 100644
--- a/ruoyi-ui/src/views/cesiumMap/index.vue
+++ b/ruoyi-ui/src/views/cesiumMap/index.vue
@@ -34,6 +34,9 @@
:entity-data="contextMenu.entityData"
@delete="deleteEntityFromContextMenu"
@update-property="updateEntityProperty"
+ @edit-platform-position="openPlatformIconPositionDialog"
+ @edit-platform-heading="openPlatformIconHeadingDialog"
+ @show-transform-box="showPlatformIconTransformBox"
/>
@@ -44,6 +47,11 @@
@cancel="handleLocateCancel"
/>
+
+
+
@@ -174,7 +182,25 @@ export default {
currentScaleUnit: 'm',
isApplyingScale: false,
// 定位相关
- locateDialogVisible: false
+ locateDialogVisible: false,
+ // 平台图标图形化编辑：拖拽移动、旋转、伸缩框
+ draggingPlatformIcon: null,
+ rotatingPlatformIcon: null,
+ platformIconRotateTip: '',
+ platformIconDragCameraEnabled: true,
+ selectedPlatformIcon: null,
+ pendingDragIcon: null,
+ dragStartScreenPos: null,
+ draggingRotateHandle: null,
+ draggingScaleHandle: null,
+ clickedOnEmpty: false,
+ PLATFORM_ICON_BASE_SIZE: 72,
+ PLATFORM_SCALE_BOX_HALF_DEG: 0.0005,
+ PLATFORM_SCALE_BOX_MIN_HALF_DEG: 0.0007,
+ PLATFORM_ROTATE_HANDLE_OFFSET_DEG: 0.0009,
+ PLATFORM_DRAG_THRESHOLD_PX: 10,
+ DESIRED_BOX_HALF_PX: 58,
+ DESIRED_ROTATE_OFFSET_PX: 50
}
},
components: {
@@ -538,6 +564,234 @@ export default {
const backendUrl = process.env.VUE_APP_BACKEND_URL || '';
return backendUrl + cleanPath;
},
+
+ /** 默认平台图标（无 imageUrl 时使用）：简单飞机剪影 SVG */
+ getDefaultPlatformIconDataUrl() {
+ const svg = '';
+ return 'data:image/svg+xml,' + encodeURIComponent(svg);
+ },
+
+ /** 伸缩框旋转手柄图标 SVG：蓝底、白边、白色弧形箭头 */
+ getRotationHandleIconDataUrl() {
+ const svg = '';
+ return 'data:image/svg+xml,' + encodeURIComponent(svg);
+ },
+
+ /** 从手柄实体 id 解析出平台图标 entityData 与类型（rotate / scale-0~3） */
+ getPlatformIconDataFromHandleId(handleEntityId) {
+ if (!handleEntityId || typeof handleEntityId !== 'string') return null;
+ if (handleEntityId.endsWith('-rotate-handle')) {
+ const baseId = handleEntityId.replace(/-rotate-handle$/, '');
+ const ed = this.allEntities.find(e => e.type === 'platformIcon' && e.id === baseId);
+ return ed ? { entityData: ed, type: 'rotate' } : null;
+ }
+ const scaleIdx = handleEntityId.lastIndexOf('-scale-');
+ if (scaleIdx !== -1) {
+ const baseId = handleEntityId.substring(0, scaleIdx);
+ const cornerIndex = parseInt(handleEntityId.substring(scaleIdx + 7), 10);
+ if (!isNaN(cornerIndex) && cornerIndex >= 0 && cornerIndex <= 3) {
+ const ed = this.allEntities.find(e => e.type === 'platformIcon' && e.id === baseId);
+ return ed ? { entityData: ed, type: 'scale', cornerIndex } : null;
+ }
+ }
+ return null;
+ },
+
+ /** 在当前视野下，图标位置处 1 像素对应的经纬度（用于伸缩框固定屏幕尺寸） */
+ getDegreesPerPixelAt(lng, lat) {
+ if (!this.viewer || this.viewer.scene.mode !== Cesium.SceneMode.SCENE2D) {
+ return { degPerPxLng: this.PLATFORM_SCALE_BOX_HALF_DEG / this.DESIRED_BOX_HALF_PX, degPerPxLat: this.PLATFORM_SCALE_BOX_HALF_DEG / this.DESIRED_BOX_HALF_PX };
+ }
+ const center = Cesium.Cartesian3.fromDegrees(lng, lat);
+ const east = Cesium.Cartesian3.fromDegrees(lng + 0.005, lat);
+ const north = Cesium.Cartesian3.fromDegrees(lng, lat + 0.005);
+ const sc = Cesium.SceneTransforms.worldToWindowCoordinates(this.viewer.scene, center);
+ const se = Cesium.SceneTransforms.worldToWindowCoordinates(this.viewer.scene, east);
+ const sn = Cesium.SceneTransforms.worldToWindowCoordinates(this.viewer.scene, north);
+ if (!sc || !se || !sn) {
+ return { degPerPxLng: this.PLATFORM_SCALE_BOX_HALF_DEG / this.DESIRED_BOX_HALF_PX, degPerPxLat: this.PLATFORM_SCALE_BOX_HALF_DEG / this.DESIRED_BOX_HALF_PX };
+ }
+ const pxLng = Math.max(1, Math.abs(se.x - sc.x));
+ const pxLat = Math.max(1, Math.abs(sn.y - sc.y));
+ return {
+ degPerPxLng: 0.005 / pxLng,
+ degPerPxLat: 0.005 / pxLat
+ };
+ },
+
+ /** 更新平台图标 billboard 的宽高（根据 iconScale） */
+ updatePlatformIconBillboardSize(entityData) {
+ if (!entityData || !entityData.entity || !entityData.entity.billboard) return;
+ const scale = Math.max(0.2, Math.min(3, entityData.iconScale || 1));
+ entityData.iconScale = scale;
+ const size = this.PLATFORM_ICON_BASE_SIZE * scale;
+ entityData.entity.billboard.width = new Cesium.ConstantProperty(size);
+ entityData.entity.billboard.height = new Cesium.ConstantProperty(size);
+ },
+
+ /** 显示伸缩框：旋转手柄 + 四角缩放手柄 + 矩形边线（按屏幕像素固定尺寸，任意缩放都易点） */
+ showTransformHandles(entityData) {
+ if (!this.viewer || !entityData || entityData.type !== 'platformIcon') return;
+ this.removeTransformHandles(entityData);
+ const id = entityData.id;
+ const lng = entityData.lng;
+ const lat = entityData.lat;
+ const dpp = this.getDegreesPerPixelAt(lng, lat);
+ const baseHalfDeg = this.DESIRED_BOX_HALF_PX * Math.min(dpp.degPerPxLng, dpp.degPerPxLat);
+ const half = Math.max((entityData.iconScale || 1) * baseHalfDeg, baseHalfDeg * 0.5);
+ const rotOffsetLat = this.DESIRED_ROTATE_OFFSET_PX * dpp.degPerPxLat;
+ const rotOffset = Math.max(rotOffsetLat, this.PLATFORM_ROTATE_HANDLE_OFFSET_DEG);
+ const rotationHandle = this.viewer.entities.add({
+ id: id + '-rotate-handle',
+ position: Cesium.Cartesian3.fromDegrees(lng, lat + rotOffset),
+ billboard: {
+ image: this.getRotationHandleIconDataUrl(),
+ width: 36,
+ height: 36,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
+ }
+ });
+ const corners = [
+ Cesium.Cartesian3.fromDegrees(lng + half, lat + half),
+ Cesium.Cartesian3.fromDegrees(lng - half, lat + half),
+ Cesium.Cartesian3.fromDegrees(lng - half, lat - half),
+ Cesium.Cartesian3.fromDegrees(lng + half, lat - half)
+ ];
+ const scaleHandles = corners.map((pos, i) =>
+ this.viewer.entities.add({
+ id: id + '-scale-' + i,
+ position: pos,
+ point: {
+ pixelSize: 14,
+ color: Cesium.Color.WHITE,
+ outlineColor: Cesium.Color.fromCssColorString('#008aff'),
+ outlineWidth: 3,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
+ }
+ })
+ );
+ const linePositions = [corners[0], corners[1], corners[2], corners[3], corners[0]];
+ const frameLine = this.viewer.entities.add({
+ id: id + '-scale-frame',
+ polyline: {
+ positions: linePositions,
+ width: 3,
+ material: Cesium.Color.fromCssColorString('#008aff'),
+ clampToGround: true,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
+ }
+ });
+ entityData.transformHandles = {
+ rotation: rotationHandle,
+ scale: scaleHandles,
+ frame: frameLine
+ };
+ },
+
+ /** 移除伸缩框手柄与边线 */
+ removeTransformHandles(entityData) {
+ if (!entityData || !entityData.transformHandles) return;
+ const h = entityData.transformHandles;
+ if (h.rotation) this.viewer.entities.remove(h.rotation);
+ if (h.scale) h.scale.forEach(e => this.viewer.entities.remove(e));
+ if (h.frame) this.viewer.entities.remove(h.frame);
+ entityData.transformHandles = null;
+ },
+
+ /** 根据图标当前位置、iconScale 与当前视野更新伸缩框（保持固定像素尺寸） */
+ updateTransformHandlePositions(entityData) {
+ if (!entityData || !entityData.transformHandles) return;
+ const lng = entityData.lng;
+ const lat = entityData.lat;
+ const dpp = this.getDegreesPerPixelAt(lng, lat);
+ const baseHalfDeg = this.DESIRED_BOX_HALF_PX * Math.min(dpp.degPerPxLng, dpp.degPerPxLat);
+ const half = Math.max((entityData.iconScale || 1) * baseHalfDeg, baseHalfDeg * 0.5);
+ const rotOffsetLat = this.DESIRED_ROTATE_OFFSET_PX * dpp.degPerPxLat;
+ const rotOffset = Math.max(rotOffsetLat, this.PLATFORM_ROTATE_HANDLE_OFFSET_DEG);
+ entityData.transformHandles.rotation.position = Cesium.Cartesian3.fromDegrees(lng, lat + rotOffset);
+ const corners = [
+ Cesium.Cartesian3.fromDegrees(lng + half, lat + half),
+ Cesium.Cartesian3.fromDegrees(lng - half, lat + half),
+ Cesium.Cartesian3.fromDegrees(lng - half, lat - half),
+ Cesium.Cartesian3.fromDegrees(lng + half, lat - half)
+ ];
+ entityData.transformHandles.scale.forEach((ent, i) => { ent.position = corners[i]; });
+ const linePositions = [corners[0], corners[1], corners[2], corners[3], corners[0]];
+ entityData.transformHandles.frame.polyline.positions = new Cesium.ConstantProperty(linePositions);
+ this.viewer.scene.requestRender();
+ },
+
+ /**
+ * 从右侧平台列表拖拽放置到地图：在放置点添加平台图标实体，支持后续修改位置与朝向。
+ * @param {Object} platform - 平台数据 { id, name, type, imageUrl, iconUrl, icon, color }
+ * @param {number} clientX - 放置点的视口 X
+ * @param {number} clientY - 放置点的视口 Y
+ */
+ addPlatformIconFromDrag(platform, clientX, clientY) {
+ if (!this.viewer || !platform) return;
+ const canvas = this.viewer.scene.canvas;
+ const rect = canvas.getBoundingClientRect();
+ const x = clientX - rect.left;
+ const y = clientY - rect.top;
+ const cartesian = this.viewer.camera.pickEllipsoid(new Cesium.Cartesian2(x, y), this.viewer.scene.globe.ellipsoid);
+ if (!cartesian) {
+ this.$message && this.$message.warning('请将图标放置到地图有效区域内');
+ return;
+ }
+ const iconUrl = platform.imageUrl || platform.iconUrl;
+ const imageSrc = iconUrl ? this.formatPlatformIconUrl(iconUrl) : this.getDefaultPlatformIconDataUrl();
+ this.entityCounter++;
+ const id = `platformIcon_${this.entityCounter}`;
+ const headingDeg = 0;
+ const rotation = Math.PI / 2 - (headingDeg * Math.PI / 180);
+ const iconScale = 1.0;
+ const size = this.PLATFORM_ICON_BASE_SIZE * iconScale;
+ const entity = this.viewer.entities.add({
+ id,
+ name: platform.name || '平台',
+ position: cartesian,
+ billboard: {
+ image: imageSrc,
+ width: size,
+ height: size,
+ verticalOrigin: Cesium.VerticalOrigin.CENTER,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ rotation,
+ scaleByDistance: new Cesium.NearFarScalar(500, 1.2, 200000, 0.35),
+ translucencyByDistance: new Cesium.NearFarScalar(1000, 1.0, 500000, 0.6)
+ }
+ });
+ const { lat, lng } = this.cartesianToLatLng(cartesian);
+ const entityData = {
+ id,
+ type: 'platformIcon',
+ platformId: platform.id,
+ platform,
+ name: platform.name || '平台',
+ heading: headingDeg,
+ lat,
+ lng,
+ entity,
+ imageUrl: iconUrl,
+ label: platform.name || '平台',
+ iconScale,
+ transformHandles: null
+ };
+ this.allEntities.push(entityData);
+ this.$nextTick(() => {
+ if (this.selectedPlatformIcon) this.removeTransformHandles(this.selectedPlatformIcon);
+ this.selectedPlatformIcon = entityData;
+ this.showTransformHandles(entityData);
+ this.$message && this.$message.success('已放置。上方箭头旋转、四角调大小、拖动图标移动；点击空白收起');
+ });
+ },
//正式航线渲染函数
renderRouteWaypoints(waypoints, routeId = 'default', platformId, platform, style) {
if (!waypoints || waypoints.length < 1) return;
@@ -1238,6 +1492,7 @@ export default {
})
this.initScaleBar()
this.initPointMovement()
+ this.initPlatformIconInteraction()
this.initRightClickHandler()
this.initHoverHandler()
this.initMouseCoordinates()
@@ -1254,6 +1509,10 @@ export default {
const pickedObject = this.viewer.scene.pick(click.position);
if (Cesium.defined(pickedObject) && pickedObject.id) {
const entity = pickedObject.id;
+ const idStr = (entity && entity.id) ? entity.id : '';
+ if (idStr && (idStr.endsWith('-rotate-handle') || idStr.indexOf('-scale-') !== -1)) return;
+ const platformIconData = this.allEntities.find(e => e.type === 'platformIcon' && e.entity === entity);
+ if (platformIconData) return;
// --- 修正后的安全日志 ---
console.log(">>> [点击检测] 实体ID:", entity.id);
@@ -1328,6 +1587,183 @@ export default {
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
},
+
+ /** 平台图标图形化操作：伸缩框（旋转手柄 + 四角缩放）、拖拽移动、单击选中 */
+ initPlatformIconInteraction() {
+ const canvas = this.viewer.scene.canvas;
+ this.platformIconHandler = new Cesium.ScreenSpaceEventHandler(canvas);
+
+ this.platformIconHandler.setInputAction((click) => {
+ if (this.isDrawing || this.rotatingPlatformIcon) return;
+ const picked = this.viewer.scene.pick(click.position);
+ this.clickedOnEmpty = !Cesium.defined(picked) || !picked.id;
+ if (picked && picked.id) {
+ const idStr = typeof picked.id === 'string' ? picked.id : (picked.id.id || '');
+ if (idStr.endsWith('-scale-frame')) {
+ this.clickedOnEmpty = false;
+ return;
+ }
+ const handleInfo = this.getPlatformIconDataFromHandleId(idStr);
+ if (handleInfo) {
+ this.clickedOnEmpty = false;
+ if (handleInfo.type === 'rotate') {
+ this.draggingRotateHandle = handleInfo.entityData;
+ this.platformIconDragCameraEnabled = this.viewer.scene.screenSpaceCameraController.enableInputs;
+ this.viewer.scene.screenSpaceCameraController.enableInputs = false;
+ return;
+ }
+ if (handleInfo.type === 'scale') {
+ this.draggingScaleHandle = { entityData: handleInfo.entityData, cornerIndex: handleInfo.cornerIndex };
+ this.platformIconDragCameraEnabled = this.viewer.scene.screenSpaceCameraController.enableInputs;
+ this.viewer.scene.screenSpaceCameraController.enableInputs = false;
+ return;
+ }
+ }
+ const entityData = this.allEntities.find(e => e.type === 'platformIcon' && e.entity === picked.id);
+ if (entityData) {
+ this.pendingDragIcon = entityData;
+ this.dragStartScreenPos = { x: click.position.x, y: click.position.y };
+ return;
+ }
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+
+ this.platformIconHandler.setInputAction((movement) => {
+ if (this.draggingRotateHandle) {
+ const ed = this.draggingRotateHandle;
+ if (ed.entity && ed.entity.position) {
+ const now = Cesium.JulianDate.now();
+ const position = ed.entity.position.getValue(now);
+ if (position) {
+ const screenPos = Cesium.SceneTransforms.worldToWindowCoordinates(this.viewer.scene, position);
+ if (screenPos) {
+ const dx = movement.endPosition.x - screenPos.x;
+ const dy = movement.endPosition.y - screenPos.y;
+ const screenAngle = Math.atan2(dy, dx);
+ ed.entity.billboard.rotation = -screenAngle;
+ let headingDeg = (screenAngle + Math.PI / 2) * (180 / Math.PI);
+ if (headingDeg < 0) headingDeg += 360;
+ if (headingDeg >= 360) headingDeg -= 360;
+ ed.heading = Math.round(headingDeg);
+ }
+ }
+ }
+ this.viewer.scene.requestRender();
+ return;
+ }
+ if (this.draggingScaleHandle) {
+ const { entityData: ed, cornerIndex } = this.draggingScaleHandle;
+ const cartesian = this.viewer.camera.pickEllipsoid(movement.endPosition, this.viewer.scene.globe.ellipsoid);
+ if (cartesian) {
+ const { lat: newLat, lng: newLng } = this.cartesianToLatLng(cartesian);
+ const lng = ed.lng;
+ const lat = ed.lat;
+ const dpp = this.getDegreesPerPixelAt(lng, lat);
+ const baseHalf = this.DESIRED_BOX_HALF_PX * Math.min(dpp.degPerPxLng, dpp.degPerPxLat);
+ let newHalfDeg;
+ if (cornerIndex === 0) newHalfDeg = Math.min(newLng - lng, newLat - lat);
+ else if (cornerIndex === 1) newHalfDeg = Math.min(lng - newLng, newLat - lat);
+ else if (cornerIndex === 2) newHalfDeg = Math.min(lng - newLng, lat - newLat);
+ else newHalfDeg = Math.min(newLng - lng, lat - newLat);
+ if (newHalfDeg > 0.0001 && baseHalf > 1e-10) {
+ ed.iconScale = Math.max(0.2, Math.min(3, newHalfDeg / baseHalf));
+ this.updatePlatformIconBillboardSize(ed);
+ this.updateTransformHandlePositions(ed);
+ }
+ }
+ return;
+ }
+ if (this.pendingDragIcon) {
+ const dx = movement.endPosition.x - this.dragStartScreenPos.x;
+ const dy = movement.endPosition.y - this.dragStartScreenPos.y;
+ if (Math.sqrt(dx * dx + dy * dy) > (this.PLATFORM_DRAG_THRESHOLD_PX || 10)) {
+ this.draggingPlatformIcon = this.pendingDragIcon;
+ this.pendingDragIcon = null;
+ this.platformIconDragCameraEnabled = this.viewer.scene.screenSpaceCameraController.enableInputs;
+ this.viewer.scene.screenSpaceCameraController.enableInputs = false;
+ }
+ }
+ if (this.draggingPlatformIcon) {
+ const cartesian = this.viewer.camera.pickEllipsoid(movement.endPosition, this.viewer.scene.globe.ellipsoid);
+ if (cartesian) {
+ this.draggingPlatformIcon.entity.position = cartesian;
+ const { lat, lng } = this.cartesianToLatLng(cartesian);
+ this.draggingPlatformIcon.lat = lat;
+ this.draggingPlatformIcon.lng = lng;
+ if (this.selectedPlatformIcon === this.draggingPlatformIcon) {
+ this.updateTransformHandlePositions(this.draggingPlatformIcon);
+ }
+ }
+ this.viewer.scene.requestRender();
+ }
+ if (this.rotatingPlatformIcon && this.rotatingPlatformIcon.entity && this.rotatingPlatformIcon.entity.position) {
+ const now = Cesium.JulianDate.now();
+ const position = this.rotatingPlatformIcon.entity.position.getValue(now);
+ if (position) {
+ const screenPos = Cesium.SceneTransforms.worldToWindowCoordinates(this.viewer.scene, position);
+ if (screenPos) {
+ const dx = movement.endPosition.x - screenPos.x;
+ const dy = movement.endPosition.y - screenPos.y;
+ const screenAngle = Math.atan2(dy, dx);
+ this.rotatingPlatformIcon.entity.billboard.rotation = -screenAngle;
+ let headingDeg = (screenAngle + Math.PI / 2) * (180 / Math.PI);
+ if (headingDeg < 0) headingDeg += 360;
+ if (headingDeg >= 360) headingDeg -= 360;
+ this.rotatingPlatformIcon.heading = Math.round(headingDeg);
+ }
+ }
+ this.viewer.scene.requestRender();
+ }
+ }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+ this.platformIconHandler.setInputAction(() => {
+ if (this.pendingDragIcon) {
+ if (this.selectedPlatformIcon === this.pendingDragIcon) {
+ this.removeTransformHandles(this.selectedPlatformIcon);
+ this.selectedPlatformIcon = null;
+ } else {
+ if (this.selectedPlatformIcon) this.removeTransformHandles(this.selectedPlatformIcon);
+ this.selectedPlatformIcon = this.pendingDragIcon;
+ this.showTransformHandles(this.pendingDragIcon);
+ }
+ this.pendingDragIcon = null;
+ this.dragStartScreenPos = null;
+ }
+ if (this.clickedOnEmpty && this.selectedPlatformIcon) {
+ this.removeTransformHandles(this.selectedPlatformIcon);
+ this.selectedPlatformIcon = null;
+ }
+ this.clickedOnEmpty = false;
+ if (this.draggingRotateHandle) {
+ this.viewer.scene.screenSpaceCameraController.enableInputs = this.platformIconDragCameraEnabled;
+ this.draggingRotateHandle = null;
+ }
+ if (this.draggingScaleHandle) {
+ this.viewer.scene.screenSpaceCameraController.enableInputs = this.platformIconDragCameraEnabled;
+ this.draggingScaleHandle = null;
+ }
+ if (this.draggingPlatformIcon) {
+ this.viewer.scene.screenSpaceCameraController.enableInputs = this.platformIconDragCameraEnabled;
+ this.draggingPlatformIcon = null;
+ }
+ if (this.rotatingPlatformIcon) {
+ this.viewer.scene.screenSpaceCameraController.enableInputs = this.platformIconDragCameraEnabled;
+ this.rotatingPlatformIcon = null;
+ this.platformIconRotateTip = '';
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_UP);
+
+ const onCameraMoveEnd = () => {
+ if (this.selectedPlatformIcon && this.selectedPlatformIcon.transformHandles) {
+ this.updateTransformHandlePositions(this.selectedPlatformIcon);
+ }
+ };
+ this.viewer.camera.moveEnd.addEventListener(onCameraMoveEnd);
+ this.platformIconCameraListener = () => {
+ this.viewer.camera.moveEnd.removeEventListener(onCameraMoveEnd);
+ };
+ },
+
// 初始化鼠标悬停事件处理器
initHoverHandler() {
// 创建屏幕空间事件处理器
@@ -3385,6 +3821,53 @@ export default {
this.contextMenu.visible = false
}
},
+
+ /** 右键「显示伸缩框」：选中该图标并显示旋转/缩放手柄 */
+ showPlatformIconTransformBox() {
+ const fromMenu = this.contextMenu.entityData
+ if (!fromMenu || fromMenu.type !== 'platformIcon' || !fromMenu.entity) {
+ this.contextMenu.visible = false
+ return
+ }
+ const ed = this.allEntities.find(e => e.type === 'platformIcon' && e.id === fromMenu.id) || fromMenu
+ if (!ed.entity) {
+ this.contextMenu.visible = false
+ return
+ }
+ if (ed.lat == null || ed.lng == null) {
+ const now = Cesium.JulianDate.now()
+ const pos = ed.entity.position && ed.entity.position.getValue(now)
+ if (pos) {
+ const ll = this.cartesianToLatLng(pos)
+ ed.lat = ll.lat
+ ed.lng = ll.lng
+ }
+ }
+ if (this.selectedPlatformIcon) this.removeTransformHandles(this.selectedPlatformIcon)
+ this.selectedPlatformIcon = ed
+ this.showTransformHandles(ed)
+ this.contextMenu.visible = false
+ this.viewer.scene.requestRender()
+ this.$message && this.$message.success('已显示伸缩框')
+ },
+
+ /** 位置改为图形化：直接拖动图标即可，无需弹窗 */
+ openPlatformIconPositionDialog() {
+ this.contextMenu.visible = false
+ this.$message && this.$message.info('请直接拖动图标以修改位置')
+ },
+
+ /** 进入旋转模式：移动鼠标设置朝向，单击结束（期间锁定地图） */
+ openPlatformIconHeadingDialog() {
+ const ed = this.contextMenu.entityData
+ if (!ed || ed.type !== 'platformIcon' || !ed.entity) return
+ this.rotatingPlatformIcon = ed
+ this.platformIconRotateTip = '移动鼠标设置朝向，单击结束'
+ this.platformIconDragCameraEnabled = this.viewer.scene.screenSpaceCameraController.enableInputs
+ this.viewer.scene.screenSpaceCameraController.enableInputs = false
+ this.contextMenu.visible = false
+ this.$message && this.$message.info('移动鼠标可调整朝向，单击地图任意处结束')
+ },
removeEntity(id) {
// 查找对应的实体数据
const index = this.allEntities.findIndex(e =>
@@ -3394,23 +3877,23 @@ export default {
)
if (index > -1) {
const entity = this.allEntities[index]
+ // 平台图标：移除伸缩框并清除选中
+ if (entity.type === 'platformIcon') {
+ this.removeTransformHandles(entity)
+ if (this.selectedPlatformIcon === entity) this.selectedPlatformIcon = null
+ }
// 从地图中移除
if (entity instanceof Cesium.Entity) {
- // 情况 A: 直接是 Cesium Entity 对象
this.viewer.entities.remove(entity)
} else if (entity.entity) {
- // 情况 B: 包装对象，包含 entity 属性
this.viewer.entities.remove(entity.entity)
}
- // 移除线实体相关的点实体
if (entity.type === 'line' && entity.pointEntities) {
entity.pointEntities.forEach(pointEntity => {
this.viewer.entities.remove(pointEntity)
})
}
- // 从数组中移除
this.allEntities.splice(index, 1)
- // 如果删除的是选中的实体，清空选中状态
if (this.selectedEntity && (this.selectedEntity.id === id || (this.selectedEntity.entity && this.selectedEntity.entity.id === id))) {
this.selectedEntity = null
}
@@ -3466,12 +3949,15 @@ export default {
this.viewer.entities.remove(entity);
}
- // 移除线实体相关的点实体
if (item.type === 'line' && item.pointEntities) {
item.pointEntities.forEach(pointEntity => {
this.viewer.entities.remove(pointEntity);
});
}
+ if (item.type === 'platformIcon') {
+ this.removeTransformHandles(item);
+ if (this.selectedPlatformIcon === item) this.selectedPlatformIcon = null;
+ }
} catch (e) {
console.warn('删除实体失败:', e);
}
@@ -4093,6 +4579,15 @@ export default {
this.pointMovementHandler = null
}
+ if (this.platformIconHandler) {
+ this.platformIconHandler.destroy()
+ this.platformIconHandler = null
+ }
+ if (typeof this.platformIconCameraListener === 'function') {
+ this.platformIconCameraListener()
+ this.platformIconCameraListener = null
+ }
+
if (this.rightClickHandler) {
this.rightClickHandler.destroy()
this.rightClickHandler = null
@@ -4209,6 +4704,23 @@ export default {
display: none !important;
}
+/* 平台图标旋转模式提示条：放在顶部菜单下方，避免被遮挡（顶部栏约 60px） */
+.platform-icon-rotate-tip {
+ position: absolute;
+ top: 72px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 99;
+ background: rgba(0, 138, 255, 0.95);
+ color: #fff;
+ padding: 10px 20px;
+ border-radius: 6px;
+ font-size: 14px;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
+ pointer-events: none;
+ white-space: nowrap;
+}
+
/* 地图右下角信息面板：比例尺在上、经纬度在下，整体略下移减少遮挡 */
.map-info-panel {
position: absolute;
diff --git a/ruoyi-ui/src/views/childRoom/RightPanel.vue b/ruoyi-ui/src/views/childRoom/RightPanel.vue
index 17eaaa0..27c6bbb 100644
--- a/ruoyi-ui/src/views/childRoom/RightPanel.vue
+++ b/ruoyi-ui/src/views/childRoom/RightPanel.vue
@@ -164,8 +164,10 @@
![]()
![]()
![]()
{ this.platformJustDragged = false }, 300)
+ try {
+ ev.dataTransfer.setData('application/json', JSON.stringify({
+ id: platform.id,
+ name: platform.name,
+ type: platform.type,
+ imageUrl: platform.imageUrl,
+ iconUrl: platform.iconUrl,
+ icon: platform.icon,
+ color: platform.color
+ }))
+ ev.dataTransfer.effectAllowed = 'copy'
+ } catch (e) {
+ console.warn('Platform drag start failed', e)
+ }
}
}
}
@@ -829,6 +865,14 @@ export default {
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.15);
}
+.platform-item-draggable {
+ cursor: grab;
+}
+
+.platform-item-draggable:active {
+ cursor: grabbing;
+}
+
.platform-icon {
width: 40px;
height: 40px;
diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue
index 09fe537..5c8a99c 100644
--- a/ruoyi-ui/src/views/childRoom/index.vue
+++ b/ruoyi-ui/src/views/childRoom/index.vue
@@ -1,8 +1,13 @@
-
-
+
+
String(r).toLowerCase() === 'admin'))
);
},
canSetKTime() {
@@ -637,7 +640,7 @@ export default {
addHoldDialogTip() {
if (!this.addHoldContext) return '';
if (this.addHoldContext.mode === 'drawing') return '在最后两航点之间插入盘旋，保存航线时生效。';
- return `将冲突位置「${this.addHoldContext.toName}」替换为盘旋航点，到计划时间后沿切线飞往下一航点，路径顺序不变。`;
+ return `在 ${this.addHoldContext.fromName} 与 ${this.addHoldContext.toName} 之间添加盘旋，到计划时间后沿切线飞往下一航点（原「下一格」航点将被移除）。`;
}
},
mounted() {
@@ -1248,7 +1251,6 @@ export default {
openKTimeSetDialog() {
console.log("当前登录 ID (myId):", this.$store.getters.id);
console.log("当前房间 ownerId:", this.roomDetail ? this.roomDetail.ownerId : '无房间信息');
- console.log("当前房间 userLevel:", this.$store.getters.userLevel);
console.log("当前角色 roles:", this.$store.getters.roles);
if (!this.canSetKTime) {
this.$message.info('仅房主或管理员可设定或修改 K 时');
@@ -1553,6 +1555,27 @@ export default {
this.showScaleDialog = true
},
+ /** 拖拽经过地图时允许放置 */
+ handleMapDragover(ev) {
+ ev.preventDefault()
+ if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'copy'
+ },
+
+ /** 将平台图标放置到地图上 */
+ handleMapDrop(ev) {
+ ev.preventDefault()
+ const raw = ev.dataTransfer && ev.dataTransfer.getData('application/json')
+ if (!raw) return
+ try {
+ const platform = JSON.parse(raw)
+ if (this.$refs.cesiumMap && typeof this.$refs.cesiumMap.addPlatformIconFromDrag === 'function') {
+ this.$refs.cesiumMap.addPlatformIconFromDrag(platform, ev.clientX, ev.clientY)
+ }
+ } catch (e) {
+ console.warn('Parse platform drag data failed', e)
+ }
+ },
+
handleScaleUnitChange(unit) {
this.scaleConfig.unit = unit
if (this.$refs.cesiumMap) {
@@ -2231,32 +2254,36 @@ export default {
return;
}
const waypoints = route.waypoints;
- const targetWp = waypoints[legIndex + 1];
- if (!targetWp || !targetWp.id) {
- this.$message.warning('目标航点无效');
- return;
- }
+ const prevWp = waypoints[legIndex];
+ const nextWp = waypoints[legIndex + 1];
+ const newSeq = (prevWp.seq != null ? Number(prevWp.seq) : legIndex + 1) + 1;
+ const baseSeq = prevWp.seq != null ? Number(prevWp.seq) : legIndex + 1;
const holdParams = this.addHoldForm.holdType === 'hold_circle'
? { radius: this.addHoldForm.radius, clockwise: this.addHoldForm.clockwise }
: { semiMajor: this.addHoldForm.semiMajor, semiMinor: this.addHoldForm.semiMinor, headingDeg: this.addHoldForm.headingDeg, clockwise: this.addHoldForm.clockwise };
const startTime = this.addHoldForm.startTimeMinutes !== '' && this.addHoldForm.startTimeMinutes != null && !Number.isNaN(Number(this.addHoldForm.startTimeMinutes))
? this.minutesToStartTime(Number(this.addHoldForm.startTimeMinutes))
- : (targetWp.startTime || 'K+01:00');
+ : (nextWp.startTime || 'K+01:00');
try {
- await updateWaypoints({
- id: targetWp.id,
- routeId: routeId,
+ await addWaypoints({
+ routeId,
name: 'HOLD',
- seq: targetWp.seq,
- lat: targetWp.lat,
- lng: targetWp.lng,
- alt: targetWp.alt,
- speed: targetWp.speed != null ? targetWp.speed : 800,
+ seq: newSeq,
+ lat: nextWp.lat,
+ lng: nextWp.lng,
+ alt: nextWp.alt != null ? nextWp.alt : prevWp.alt,
+ speed: prevWp.speed || 800,
startTime,
- turnAngle: targetWp.turnAngle != null ? targetWp.turnAngle : 0,
pointType: this.addHoldForm.holdType,
holdParams: JSON.stringify(holdParams)
});
+ await delWaypoints(nextWp.id);
+ for (let i = legIndex + 2; i < waypoints.length; i++) {
+ const w = waypoints[i];
+ if (w.id) {
+ await updateWaypoints({ ...w, seq: baseSeq + (i - legIndex) });
+ }
+ }
this.showAddHoldDialog = false;
this.addHoldContext = null;
await this.getList();
@@ -2266,9 +2293,9 @@ export default {
this.$refs.cesiumMap.renderRouteWaypoints(updated.waypoints, routeId, updated.platformId, updated.platform, this.parseRouteStyle(updated.attributes));
this.$nextTick(() => this.updateDeductionPositions());
}
- this.$message.success('已将冲突位置航点替换为盘旋航点');
+ this.$message.success('已添加盘旋航点');
} catch (e) {
- this.$message.error(e.msg || '替换盘旋失败');
+ this.$message.error(e.msg || '添加盘旋失败');
console.error(e);
}
},
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index daef08e..5632e77 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -15,7 +15,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
-const baseUrl = 'http://localhost:8080' // 后端接口
+const baseUrl = 'http://127.0.0.1:8080' // 后端接口
const port = process.env.port || process.env.npm_config_port || 80 // 端口
// 定义 Cesium 源码路径
From 54fdf44ca56cd3575db1a5a81bf078b9182d962d Mon Sep 17 00:00:00 2001
From: ctw <1051735452@qq.com>
Date: Sun, 8 Feb 2026 15:55:47 +0800
Subject: [PATCH 05/12] =?UTF-8?q?=E6=8B=96=E6=8B=BD=E5=9B=BE=E6=A0=87?=
=?UTF-8?q?=E6=8C=81=E4=B9=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ruoyi-ui/src/permission.js | 31 +++++++++---
ruoyi-ui/src/router/index.js | 2 +-
ruoyi-ui/src/store/modules/permission.js | 14 +++++-
ruoyi-ui/src/views/cesiumMap/index.vue | 85 +++++++++++++++++++++++++++++++-
ruoyi-ui/src/views/childRoom/index.vue | 63 ++++++++++++++++++++---
5 files changed, 178 insertions(+), 17 deletions(-)
diff --git a/ruoyi-ui/src/permission.js b/ruoyi-ui/src/permission.js
index 9dc7480..f89b765 100644
--- a/ruoyi-ui/src/permission.js
+++ b/ruoyi-ui/src/permission.js
@@ -28,20 +28,37 @@ router.beforeEach((to, from, next) => {
} else {
if (store.getters.roles.length === 0) {
isRelogin.show = true
+ // 超时保护：若 getInfo/getRouters 长时间不返回则关闭加载条并提示，避免页面一直白屏
+ const timeoutMs = 15000
+ const timeoutId = setTimeout(() => {
+ if (store.getters.roles.length === 0) {
+ isRelogin.show = false
+ NProgress.done()
+ Message.error('获取用户信息超时，请确认后端服务已启动（默认 8080 端口）')
+ store.dispatch('LogOut').then(() => {
+ next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
+ })
+ }
+ }, timeoutMs)
+ const clearTimeoutAndNext = () => {
+ clearTimeout(timeoutId)
+ }
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => {
+ clearTimeoutAndNext()
isRelogin.show = false
store.dispatch('GenerateRoutes').then(accessRoutes => {
- // 根据roles权限生成可访问的路由表
- router.addRoutes(accessRoutes) // 动态添加可访问路由表
- next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+ router.addRoutes(accessRoutes)
+ next({ ...to, replace: true })
})
}).catch(err => {
- store.dispatch('LogOut').then(() => {
- Message.error(err)
- next({ path: '/' })
- })
+ clearTimeoutAndNext()
+ isRelogin.show = false
+ store.dispatch('LogOut').then(() => {
+ Message.error(err || '获取用户信息失败')
+ next({ path: '/' })
})
+ })
} else {
next()
}
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 0e68209..1015974 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -87,7 +87,7 @@ export const constantRoutes = [
{
path: '',
component: Layout,
- redirect: 'index',
+ redirect: '/selectRoom',
children: [
{
path: 'index',
diff --git a/ruoyi-ui/src/store/modules/permission.js b/ruoyi-ui/src/store/modules/permission.js
index b549ef0..f21d328 100644
--- a/ruoyi-ui/src/store/modules/permission.js
+++ b/ruoyi-ui/src/store/modules/permission.js
@@ -52,9 +52,18 @@ const permission = {
}
}
+// 确保路由必有 path，避免 [vue-router] "path" is required 报错（后端菜单 path 为空时）
+function ensureRoutePath(route, fallback) {
+ const id = route.menuId || route.id || route.name || ('menu-' + Math.random().toString(36).slice(2, 9))
+ if (route.path === undefined || route.path === null || (typeof route.path === 'string' && route.path.trim() === '')) {
+ route.path = fallback || ('/hidden-' + id)
+ }
+}
+
// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
return asyncRouterMap.filter(route => {
+ ensureRoutePath(route)
if (type && route.children) {
route.children = filterChildren(route.children)
}
@@ -82,8 +91,9 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
function filterChildren(childrenMap, lastRouter = false) {
var children = []
- childrenMap.forEach(el => {
- el.path = lastRouter ? lastRouter.path + '/' + el.path : el.path
+ childrenMap.forEach((el, idx) => {
+ ensureRoutePath(el, 'item-' + idx)
+ el.path = lastRouter ? (lastRouter.path + '/' + el.path).replace(/\/+/g, '/') : el.path
if (el.children && el.children.length && el.component === 'ParentView') {
children = children.concat(filterChildren(el.children, el))
} else {
diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue
index f25a40e..c03f07e 100644
--- a/ruoyi-ui/src/views/cesiumMap/index.vue
+++ b/ruoyi-ui/src/views/cesiumMap/index.vue
@@ -791,6 +791,84 @@ export default {
this.showTransformHandles(entityData);
this.$message && this.$message.success('已放置。上方箭头旋转、四角调大小、拖动图标移动；点击空白收起');
});
+ return entityData;
+ },
+ /** 清除某房间下由 loadRoomPlatformIcons 加载的平台图标（仅从地图与 allEntities 移除） */
+ clearRoomPlatformIcons(roomId) {
+ if (!roomId || !this.allEntities) return;
+ const toRemove = this.allEntities.filter(e => e.type === 'platformIcon' && e.roomId === roomId);
+ toRemove.forEach(ed => {
+ this.removeTransformHandles(ed);
+ if (this.selectedPlatformIcon === ed) this.selectedPlatformIcon = null;
+ if (ed.entity) this.viewer && this.viewer.entities.remove(ed.entity);
+ });
+ this.allEntities = this.allEntities.filter(e => !(e.type === 'platformIcon' && e.roomId === roomId));
+ },
+ /** 加载某房间下保存的平台图标到地图；list 项含 id, lng, lat, heading, iconScale, platformId, platformName, platformType, iconUrl */
+ loadRoomPlatformIcons(roomId, list) {
+ if (!this.viewer || !roomId || !list || !list.length) return;
+ this.clearRoomPlatformIcons(roomId);
+ const baseHalfDeg = 0.00015;
+ list.forEach((item, idx) => {
+ const platform = {
+ id: item.platformId,
+ name: item.platformName,
+ type: item.platformType,
+ imageUrl: item.iconUrl,
+ iconUrl: item.iconUrl
+ };
+ const iconUrl = item.iconUrl || platform.iconUrl;
+ const imageSrc = iconUrl ? this.formatPlatformIconUrl(iconUrl) : this.getDefaultPlatformIconDataUrl();
+ this.entityCounter++;
+ const id = `platformIcon_room_${roomId}_${item.id}`;
+ const headingDeg = (item.heading != null ? item.heading : 0);
+ const rotation = Math.PI / 2 - (headingDeg * Math.PI / 180);
+ const scaleVal = item.iconScale ?? item.icon_scale ?? 1;
+ const iconScale = Math.max(0.2, Math.min(3, scaleVal));
+ const size = this.PLATFORM_ICON_BASE_SIZE * iconScale;
+ const cartesian = Cesium.Cartesian3.fromDegrees(item.lng, item.lat);
+ const entity = this.viewer.entities.add({
+ id,
+ name: platform.name || '平台',
+ position: cartesian,
+ billboard: {
+ image: imageSrc,
+ width: size,
+ height: size,
+ verticalOrigin: Cesium.VerticalOrigin.CENTER,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ rotation,
+ scaleByDistance: new Cesium.NearFarScalar(500, 1.2, 200000, 0.35),
+ translucencyByDistance: new Cesium.NearFarScalar(1000, 1.0, 500000, 0.6)
+ }
+ });
+ const entityData = {
+ id,
+ type: 'platformIcon',
+ platformId: platform.id,
+ platform,
+ name: platform.name || '平台',
+ heading: headingDeg,
+ lat: item.lat,
+ lng: item.lng,
+ entity,
+ imageUrl: iconUrl,
+ label: platform.name || '平台',
+ iconScale,
+ transformHandles: null,
+ serverId: item.id,
+ roomId
+ };
+ this.allEntities.push(entityData);
+ });
+ },
+ /** 为已放置的平台图标设置服务端 ID（保存成功后由父组件调用） */
+ setPlatformIconServerId(entityId, serverId, roomId) {
+ const ed = this.allEntities.find(e => e.type === 'platformIcon' && (e.id === entityId || (e.entity && e.entity.id === entityId)));
+ if (ed) {
+ ed.serverId = serverId;
+ if (roomId != null) ed.roomId = roomId;
+ }
},
//正式航线渲染函数
renderRouteWaypoints(waypoints, routeId = 'default', platformId, platform, style) {
@@ -1735,18 +1813,22 @@ export default {
}
this.clickedOnEmpty = false;
if (this.draggingRotateHandle) {
+ this.$emit('platform-icon-updated', this.draggingRotateHandle);
this.viewer.scene.screenSpaceCameraController.enableInputs = this.platformIconDragCameraEnabled;
this.draggingRotateHandle = null;
}
if (this.draggingScaleHandle) {
+ this.$emit('platform-icon-updated', this.draggingScaleHandle.entityData);
this.viewer.scene.screenSpaceCameraController.enableInputs = this.platformIconDragCameraEnabled;
this.draggingScaleHandle = null;
}
if (this.draggingPlatformIcon) {
+ this.$emit('platform-icon-updated', this.draggingPlatformIcon);
this.viewer.scene.screenSpaceCameraController.enableInputs = this.platformIconDragCameraEnabled;
this.draggingPlatformIcon = null;
}
if (this.rotatingPlatformIcon) {
+ this.$emit('platform-icon-updated', this.rotatingPlatformIcon);
this.viewer.scene.screenSpaceCameraController.enableInputs = this.platformIconDragCameraEnabled;
this.rotatingPlatformIcon = null;
this.platformIconRotateTip = '';
@@ -3877,8 +3959,9 @@ 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
}
diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue
index 5c8a99c..99717d2 100644
--- a/ruoyi-ui/src/views/childRoom/index.vue
+++ b/ruoyi-ui/src/views/childRoom/index.vue
@@ -16,7 +16,9 @@
@drawing-points-update="missionDrawingPointsCount = $event"
@open-waypoint-dialog="handleOpenWaypointEdit"
@open-route-dialog="handleOpenRouteEdit"
- @scale-click="handleScaleClick" />
+ @scale-click="handleScaleClick"
+ @platform-icon-updated="onPlatformIconUpdated"
+ @platform-icon-removed="onPlatformIconRemoved" />
二维GIS地图区域
@@ -390,6 +392,7 @@ import { updateWaypoints, addWaypoints, delWaypoints } from "@/api/system/waypoi import { listLib,addLib,delLib} from "@/api/system/lib"; import { getRooms, updateRooms } from "@/api/system/rooms"; import { getMenuConfig, saveMenuConfig } from "@/api/system/userMenuConfig"; +import { listByRoomId as listRoomPlatformIcons, addRoomPlatformIcon, updateRoomPlatformIcon, delRoomPlatformIcon } from "@/api/system/roomPlatformIcon"; import PlatformImportDialog from "@/views/dialogs/PlatformImportDialog.vue"; export default { name: 'MissionPlanningView', @@ -443,6 +446,7 @@ export default { showNameDialog: false, newRouteName: '', tempMapPoints: [], + platformIconSaveTimer: null, //导入平台弹窗 showImportDialog: false, @@ -1013,6 +1017,13 @@ export default { }); }); } + // 加载该房间下保存的地图平台图标 + const rId = roomId || this.currentRoomId; + if (rId && this.$refs.cesiumMap && typeof this.$refs.cesiumMap.loadRoomPlatformIcons === 'function') { + listRoomPlatformIcons(rId).then(res => { + if (res.code === 200 && res.data) this.$refs.cesiumMap.loadRoomPlatformIcons(rId, res.data); + }).catch(() => {}); + } } } catch (error) { console.error("数据加载失败:", error); @@ -1561,20 +1572,60 @@ export default { if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'copy' }, - /** 将平台图标放置到地图上 */ - handleMapDrop(ev) { + /** 将平台图标放置到地图上，并保存到当前房间 */ + async handleMapDrop(ev) { ev.preventDefault() const raw = ev.dataTransfer && ev.dataTransfer.getData('application/json') if (!raw) return try { const platform = JSON.parse(raw) - if (this.$refs.cesiumMap && typeof this.$refs.cesiumMap.addPlatformIconFromDrag === 'function') { - this.$refs.cesiumMap.addPlatformIconFromDrag(platform, ev.clientX, ev.clientY) + const map = this.$refs.cesiumMap + if (!map || typeof map.addPlatformIconFromDrag !== 'function') return + const entityData = map.addPlatformIconFromDrag(platform, ev.clientX, ev.clientY) + if (!entityData || !this.currentRoomId) return + const payload = { + roomId: this.currentRoomId, + platformId: platform.id, + platformName: platform.name || '', + platformType: platform.type || '', + iconUrl: platform.imageUrl || platform.iconUrl || '', + lng: entityData.lng, + lat: entityData.lat, + heading: entityData.heading != null ? entityData.heading : 0, + iconScale: entityData.iconScale != null ? entityData.iconScale : 1 + } + const res = await addRoomPlatformIcon(payload) + if (res.code === 200 && res.data && res.data.id) { + map.setPlatformIconServerId(entityData.id, res.data.id, this.currentRoomId) + entityData.serverId = res.data.id + entityData.roomId = this.currentRoomId + this.$message.success('平台图标已保存到当前房间') } } catch (e) { - console.warn('Parse platform drag data failed', e) + console.warn('Parse platform drag data or save failed', e) + this.$message && this.$message.error('保存平台图标失败') } }, + /** 平台图标移动/旋转/缩放结束：防抖更新到服务端 */ + onPlatformIconUpdated(entityData) { + if (!entityData || !entityData.serverId) return + if (this.platformIconSaveTimer) clearTimeout(this.platformIconSaveTimer) + this.platformIconSaveTimer = setTimeout(() => { + this.platformIconSaveTimer = null + updateRoomPlatformIcon({ + id: entityData.serverId, + lng: entityData.lng, + lat: entityData.lat, + heading: entityData.heading != null ? entityData.heading : 0, + iconScale: entityData.iconScale != null ? entityData.iconScale : 1 + }).then(() => {}).catch(() => {}) + }, 500) + }, + /** 平台图标从地图删除时同步删除服务端记录 */ + onPlatformIconRemoved({ serverId }) { + if (!serverId) return + delRoomPlatformIcon(serverId).then(() => {}).catch(() => {}) + }, handleScaleUnitChange(unit) { this.scaleConfig.unit = unit From 8e8a37bfd1668fdb149122800cd1422dfafe79bb Mon Sep 17 00:00:00 2001 From: ctw <1051735452@qq.com> Date: Mon, 9 Feb 2026 09:04:09 +0800 Subject: [PATCH 06/12] =?UTF-8?q?=E6=88=AA=E5=9B=BE=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/views/cesiumMap/index.vue | 6 +- ruoyi-ui/src/views/childRoom/index.vue | 149 +++++++++++++++++++++++++++++++-- 2 files changed, 147 insertions(+), 8 deletions(-) diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index eb61278..d44aef4 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -1568,7 +1568,11 @@ export default { mapProjection: new Cesium.WebMercatorProjection(), imageryProvider: false, terrainProvider: new Cesium.EllipsoidTerrainProvider(), - baseLayer: false + baseLayer: false, + // 允许截图时读取 canvas 内容（否则 toDataURL 会得到黑屏） + contextOptions: { + preserveDrawingBuffer: true + } }) this.viewer.cesiumWidget.creditContainer.style.display = "none" this.loadOfflineMap() diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue index dfdd111..f60e3f6 100644 --- a/ruoyi-ui/src/views/childRoom/index.vue +++ b/ruoyi-ui/src/views/childRoom/index.vue @@ -1,6 +1,6 @@ -
+
-
+
-
+
+
+
+
+
+
+
@@ -441,6 +471,12 @@ export default {
//导入平台弹窗
showImportDialog: false,
+ // 地图截图
+ screenshotMode: false,
+ showScreenshotDialog: false,
+ screenshotDataUrl: '',
+ screenshotFileName: '',
+
// 作战信息
roomCode: 'JTF-7-ALPHA',
onlineCount: 30,
@@ -463,7 +499,7 @@ export default {
{ id: 'pattern', name: '空域', icon: 'ky' },
{ id: 'deduction', name: '推演', icon: 'el-icon-video-play' },
{ id: 'modify', name: '测距', icon: 'cj' },
- { id: 'refresh', name: '刷新', icon: 'el-icon-refresh' },
+ { id: 'refresh', name: '截图', icon: 'screenshot', action: 'refresh' },
{ id: 'basemap', name: '底图', icon: 'dt' },
{ id: 'save', name: '保存', icon: 'el-icon-document-checked' },
{ id: 'import', name: '导入', icon: 'el-icon-upload2' },
@@ -1435,7 +1471,8 @@ export default {
'toggleLandmark': () => this.toggleLandmark(),
'toggleRoute': () => this.toggleRoute(),
'layerFavorites': () => this.layerFavorites(),
- 'routeFavorites': () => this.routeFavorites()
+ 'routeFavorites': () => this.routeFavorites(),
+ 'refresh': () => this.captureMapScreenshot()
}
if (actionMap[actionId]) {
@@ -1443,6 +1480,76 @@ export default {
}
},
+ /** 截图：隐藏上下左右菜单只保留地图，用 postRender + readPixels 避免 WebGL 缓冲被清空导致黑屏 */
+ async captureMapScreenshot() {
+ const cm = this.$refs.cesiumMap
+ if (!cm || !cm.viewer || !cm.viewer.scene || !cm.viewer.scene.canvas) {
+ this.$message.warning('地图未就绪，请稍后再试')
+ return
+ }
+ this.screenshotMode = true
+ await this.$nextTick()
+ await new Promise(r => setTimeout(r, 350))
+ const viewer = cm.viewer
+ const canvas = viewer.scene.canvas
+ const self = this
+ const removeListener = viewer.scene.postRender.addEventListener(function captureFrame() {
+ removeListener()
+ self.screenshotMode = false
+ try {
+ const gl = canvas.getContext('webgl2') || canvas.getContext('webgl')
+ if (!gl) {
+ self.$message.error('无法获取 WebGL 上下文')
+ return
+ }
+ const width = canvas.width
+ const height = canvas.height
+ if (width === 0 || height === 0) {
+ self.$message.error('画布尺寸为 0')
+ return
+ }
+ const pixels = new Uint8Array(width * height * 4)
+ gl.bindFramebuffer(gl.FRAMEBUFFER, null)
+ gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels)
+ const offscreen = document.createElement('canvas')
+ offscreen.width = width
+ offscreen.height = height
+ const ctx = offscreen.getContext('2d')
+ const imageData = ctx.createImageData(width, height)
+ for (let y = 0; y < height; y++) {
+ const srcRow = (height - 1 - y) * width * 4
+ const dstRow = y * width * 4
+ for (let i = 0; i < width * 4; i++) imageData.data[dstRow + i] = pixels[srcRow + i]
+ }
+ ctx.putImageData(imageData, 0, 0)
+ const dataUrl = offscreen.toDataURL('image/png')
+ const now = new Date()
+ const timeStr = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0') + '_' + String(now.getHours()).padStart(2, '0') + String(now.getMinutes()).padStart(2, '0') + String(now.getSeconds()).padStart(2, '0')
+ self.screenshotFileName = `地图截图_${timeStr}.png`
+ self.screenshotDataUrl = dataUrl
+ self.showScreenshotDialog = true
+ } catch (e) {
+ self.$message.error('截图失败：' + (e && e.message ? e.message : '未知错误'))
+ }
+ })
+ viewer.scene.requestRender()
+ },
+
+ /** 确认保存截图：触发浏览器下载（用户可在保存对话框中选择路径） */
+ confirmSaveScreenshot() {
+ if (!this.screenshotDataUrl) return
+ let name = (this.screenshotFileName || '地图截图.png').trim()
+ if (!name) name = '地图截图.png'
+ if (!/\.(png|jpg|jpeg)$/i.test(name)) name = name + '.png'
+ const a = document.createElement('a')
+ a.href = this.screenshotDataUrl
+ a.download = name
+ a.click()
+ this.showScreenshotDialog = false
+ this.screenshotDataUrl = ''
+ this.$message.success('已触发下载，请在浏览器保存对话框中选择保存位置')
+ },
+
handleDeleteMenuItem(deletedItem) {
const index = this.menuItems.findIndex(item => item.id === deletedItem.id)
if (index > -1) {
@@ -1478,7 +1585,12 @@ export default {
arr = typeof data.menuItems === 'string' ? JSON.parse(data.menuItems) : data.menuItems
} catch (e) { /* 解析失败保留默认 */ }
if (Array.isArray(arr) && arr.length > 0) {
- this.menuItems = arr
+ const defaultMap = (this.defaultMenuItems || []).reduce((m, it) => { m[it.id] = it; return m }, {})
+ this.menuItems = arr.map(item => {
+ const def = defaultMap[item.id]
+ if (def) return { ...item, name: def.name, icon: def.icon, action: def.action }
+ return item
+ })
}
}
if (data.position && ['left', 'top', 'bottom'].includes(data.position)) {
@@ -2646,6 +2758,29 @@ export default {
z-index: 1;
}
+/* 截图保存弹窗 */
+.screenshot-save-dialog .screenshot-preview {
+ max-height: 320px;
+ overflow: hidden;
+ border-radius: 4px;
+ background: #f5f5f5;
+ margin-bottom: 12px;
+}
+.screenshot-save-dialog .screenshot-preview img {
+ display: block;
+ max-width: 100%;
+ width: auto;
+ height: auto;
+ max-height: 320px;
+ object-fit: contain;
+}
+.screenshot-save-dialog .screenshot-tip {
+ font-size: 12px;
+ color: #909399;
+ margin-top: 8px;
+ margin-bottom: 0;
+}
+
/* ...其余样式省略，保持不变... */
.map-overlay-text {
position: absolute;
From 2b8edb72d257ba22a86b55d2e70829bd885980aa Mon Sep 17 00:00:00 2001
From: ctw <1051735452@qq.com>
Date: Mon, 9 Feb 2026 10:26:37 +0800
Subject: [PATCH 07/12] =?UTF-8?q?=E8=BD=AC=E5=BC=AF=E5=8D=8A=E5=BE=84?=
=?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ruoyi-ui/src/views/cesiumMap/index.vue | 97 +++++++++++++++++++++++++++-------
1 file changed, 77 insertions(+), 20 deletions(-)
diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue
index d44aef4..6f9b205 100644
--- a/ruoyi-ui/src/views/cesiumMap/index.vue
+++ b/ruoyi-ui/src/views/cesiumMap/index.vue
@@ -899,13 +899,18 @@ export default {
if (existingPlatform) {
this.viewer.entities.remove(existingPlatform);
}
- // 清理所有属于该航线的旧点
+ // 清理所有属于该航线的旧点（含转弯半径两侧的 entry/exit 点）
waypoints.forEach((wp,index) => {
const waypointEntityId = `wp_${routeId}_${wp.id}`;
const existingWaypoint = this.viewer.entities.getById(waypointEntityId);
if (existingWaypoint) {
this.viewer.entities.remove(existingWaypoint);
}
+ ['_entry', '_exit'].forEach(suffix => {
+ const entryExitId = `wp_${routeId}_${wp.id}${suffix}`;
+ const existingEntryExit = this.viewer.entities.getById(entryExitId);
+ if (existingEntryExit) this.viewer.entities.remove(existingEntryExit);
+ });
const arcId = `arc-line-${routeId}-${index}`;
const existingArc = this.viewer.entities.getById(arcId);
if (existingArc) {
@@ -923,15 +928,46 @@ export default {
const wpColor = wpStyle.color || '#ffffff';
const wpOutline = wpStyle.outlineColor || '#0078FF';
const wpOutlineW = wpStyle.outlineWidth != null ? wpStyle.outlineWidth : 2;
- // 遍历并绘制航点标记
+ // 航线默认紫色、线宽 3；与主航线一致的线型用于主线和转弯半径弧
+ const lineWidth = lineStyle.width != null ? lineStyle.width : 3;
+ const lineColor = lineStyle.color || '#800080';
+ const gapColor = lineStyle.gapColor != null ? lineStyle.gapColor : '#000000';
+ const dashLen = lineStyle.dashLength != null ? lineStyle.dashLength : 20;
+ const useDash = (lineStyle.style || 'dash') === 'dash';
+ const lineMaterial = useDash
+ ? new Cesium.PolylineDashMaterialProperty({
+ color: Cesium.Color.fromCssColorString(lineColor),
+ gapColor: Cesium.Color.fromCssColorString(gapColor),
+ dashLength: dashLen
+ })
+ : Cesium.Color.fromCssColorString(lineColor);
+ // 先收集所有航点的世界坐标
const originalPositions = [];
- waypoints.forEach((wp, index) => {
+ waypoints.forEach((wp) => {
const lon = parseFloat(wp.lng);
const lat = parseFloat(wp.lat);
- // 使用 Number 转换 Double 类型
const altValue = Number(wp.alt || 5000);
- const pos = Cesium.Cartesian3.fromDegrees(lon, lat, altValue);
- originalPositions.push(pos);
+ originalPositions.push(Cesium.Cartesian3.fromDegrees(lon, lat, altValue));
+ });
+ // 判断航点 i 是否为“转弯半径”航点（将用弧线两端两个点替代中心点）
+ const isTurnWaypointWithArc = (i) => {
+ if (i < 1 || i >= waypoints.length - 1) return false;
+ const wp = waypoints[i];
+ if (this.getWaypointRadius(wp) <= 0) return false;
+ const nextPos = originalPositions[i + 1];
+ let nextLogical = nextPos;
+ if (this.isHoldWaypoint(waypoints[i + 1])) {
+ const holdParams = this.parseHoldParams(waypoints[i + 1]);
+ nextLogical = holdParams && holdParams.radius != null
+ ? this.getCircleEntryPoint(originalPositions[i + 1], originalPositions[i], holdParams.radius)
+ : this.getEllipseEntryPoint(originalPositions[i + 1], originalPositions[i], holdParams.semiMajor ?? 500, holdParams.semiMinor ?? 300, ((holdParams.headingDeg || 0) * Math.PI) / 180);
+ }
+ return !!nextLogical;
+ };
+ // 遍历并绘制航点标记：转弯半径处不画中心点，改在下面画弧线时画两端两个点
+ waypoints.forEach((wp, index) => {
+ if (isTurnWaypointWithArc(index)) return;
+ const pos = originalPositions[index];
this.viewer.entities.add({
id: `wp_${routeId}_${wp.id}`,
name: wp.name || `WP${index + 1}`,
@@ -1047,9 +1083,42 @@ export default {
const arcPoints = this.computeArcPositions(lastPos, currPos, nextLogical, radius);
this.viewer.entities.add({
id: `arc-line-${routeId}-${i}`,
- polyline: { positions: arcPoints, width: 8, material: Cesium.Color.RED, clampToGround: true, zIndex: 20 },
+ polyline: { positions: arcPoints, width: lineWidth, material: lineMaterial, clampToGround: true, zIndex: 20 },
properties: { routeId: routeId }
});
+ // 转弯半径两侧航点与航线整体航点风格一致，点击均打开原航点编辑（dbId 为当前 wp.id）
+ const wpName = wp.name || `WP${i + 1}`;
+ const arcEntry = arcPoints[0];
+ const arcExit = arcPoints[arcPoints.length - 1];
+ [arcEntry, arcExit].forEach((pos, idx) => {
+ const suffix = idx === 0 ? '_entry' : '_exit';
+ this.viewer.entities.add({
+ id: `wp_${routeId}_${wp.id}${suffix}`,
+ name: wpName,
+ position: pos,
+ properties: {
+ isMissionWaypoint: true,
+ routeId: routeId,
+ dbId: wp.id,
+ },
+ point: {
+ pixelSize: pixelSize,
+ color: Cesium.Color.fromCssColorString(wpColor),
+ outlineColor: Cesium.Color.fromCssColorString(wpOutline),
+ outlineWidth: wpOutlineW,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
+ },
+ label: {
+ text: wpName,
+ font: `${Math.max(9, pixelSize + 2)}px MicroSoft YaHei`,
+ pixelOffset: new Cesium.Cartesian2(0, -Math.max(14, pixelSize + 8)),
+ fillColor: Cesium.Color.WHITE,
+ outlineColor: Cesium.Color.BLACK,
+ outlineWidth: 2,
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE
+ }
+ });
+ });
finalPathPositions.push(...arcPoints);
lastPos = arcPoints[arcPoints.length - 1];
} else {
@@ -1058,19 +1127,7 @@ export default {
}
}
}
- const lineWidth = lineStyle.width != null ? lineStyle.width : 4;
- const lineColor = lineStyle.color || '#ffffff';
- const gapColor = lineStyle.gapColor != null ? lineStyle.gapColor : '#000000';
- const dashLen = lineStyle.dashLength != null ? lineStyle.dashLength : 20;
- const useDash = (lineStyle.style || 'dash') === 'dash';
- const lineMaterial = useDash
- ? new Cesium.PolylineDashMaterialProperty({
- color: Cesium.Color.fromCssColorString(lineColor),
- gapColor: Cesium.Color.fromCssColorString(gapColor),
- dashLength: dashLen
- })
- : Cesium.Color.fromCssColorString(lineColor);
- // 绘制包含弧线的 Polyline
+ // 绘制包含弧线的 Polyline（lineWidth/lineMaterial 已在上方与航点样式一起计算，默认紫色线宽3）
const routeEntity = this.viewer.entities.add({
id: lineId,
polyline: {
From c2a861b317292b63d22cddda3d8800ae23db8982 Mon Sep 17 00:00:00 2001
From: ctw <1051735452@qq.com>
Date: Mon, 9 Feb 2026 10:39:56 +0800
Subject: [PATCH 08/12] =?UTF-8?q?=E8=BD=AC=E5=BC=AF=E5=8D=8A=E5=BE=84?=
=?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../web/controller/RoomPlatformIconController.java | 64 +++++++++++++++
.../com/ruoyi/system/domain/RoomPlatformIcon.java | 57 +++++++++++++
.../system/mapper/RoomPlatformIconMapper.java | 22 +++++
.../system/service/IRoomPlatformIconService.java | 20 +++++
.../service/impl/RoomPlatformIconServiceImpl.java | 50 ++++++++++++
.../mapper/system/RoomPlatformIconMapper.xml | 95 ++++++++++++++++++++++
ruoyi-ui/src/api/system/roomPlatformIcon.js | 36 ++++++++
ruoyi-ui/src/assets/icons/svg/screenshot.svg | 1 +
8 files changed, 345 insertions(+)
create mode 100644 ruoyi-admin/src/main/java/com/ruoyi/web/controller/RoomPlatformIconController.java
create mode 100644 ruoyi-system/src/main/java/com/ruoyi/system/domain/RoomPlatformIcon.java
create mode 100644 ruoyi-system/src/main/java/com/ruoyi/system/mapper/RoomPlatformIconMapper.java
create mode 100644 ruoyi-system/src/main/java/com/ruoyi/system/service/IRoomPlatformIconService.java
create mode 100644 ruoyi-system/src/main/java/com/ruoyi/system/service/impl/RoomPlatformIconServiceImpl.java
create mode 100644 ruoyi-system/src/main/resources/mapper/system/RoomPlatformIconMapper.xml
create mode 100644 ruoyi-ui/src/api/system/roomPlatformIcon.js
create mode 100644 ruoyi-ui/src/assets/icons/svg/screenshot.svg
diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/RoomPlatformIconController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/RoomPlatformIconController.java
new file mode 100644
index 0000000..4af5fca
--- /dev/null
+++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/RoomPlatformIconController.java
@@ -0,0 +1,64 @@
+package com.ruoyi.web.controller;
+
+import java.util.List;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.*;
+import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.common.annotation.Log;
+import com.ruoyi.common.enums.BusinessType;
+import com.ruoyi.system.domain.RoomPlatformIcon;
+import com.ruoyi.system.service.IRoomPlatformIconService;
+
+/**
+ * 房间地图平台图标Controller
+ */
+@RestController
+@RequestMapping("/system/roomPlatformIcon")
+public class RoomPlatformIconController extends BaseController {
+
+ @Autowired
+ private IRoomPlatformIconService roomPlatformIconService;
+
+ /**
+ * 按房间ID查询该房间下所有地图平台图标（不分页）
+ */
+ @PreAuthorize("@ss.hasPermi('system:roomPlatformIcon:list')")
+ @GetMapping("/list")
+ public AjaxResult list(@RequestParam Long roomId) {
+ List list = roomPlatformIconService.selectListByRoomId(roomId);
+ return success(list);
+ }
+
+ /**
+ * 新增
+ */
+ @PreAuthorize("@ss.hasPermi('system:roomPlatformIcon:add')")
+ @Log(title = "房间地图平台图标", businessType = BusinessType.INSERT)
+ @PostMapping
+ public AjaxResult add(@RequestBody RoomPlatformIcon roomPlatformIcon) {
+ int rows = roomPlatformIconService.insert(roomPlatformIcon);
+ return rows > 0 ? success(roomPlatformIcon) : error("新增失败");
+ }
+
+ /**
+ * 修改（位置/朝向/缩放）
+ */
+ @PreAuthorize("@ss.hasPermi('system:roomPlatformIcon:edit')")
+ @Log(title = "房间地图平台图标", businessType = BusinessType.UPDATE)
+ @PutMapping
+ public AjaxResult edit(@RequestBody RoomPlatformIcon roomPlatformIcon) {
+ return toAjax(roomPlatformIconService.update(roomPlatformIcon));
+ }
+
+ /**
+ * 删除
+ */
+ @PreAuthorize("@ss.hasPermi('system:roomPlatformIcon:remove')")
+ @Log(title = "房间地图平台图标", businessType = BusinessType.DELETE)
+ @DeleteMapping("/{id}")
+ public AjaxResult remove(@PathVariable Long id) {
+ return toAjax(roomPlatformIconService.deleteById(id));
+ }
+}
diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/domain/RoomPlatformIcon.java b/ruoyi-system/src/main/java/com/ruoyi/system/domain/RoomPlatformIcon.java
new file mode 100644
index 0000000..319298d
--- /dev/null
+++ b/ruoyi-system/src/main/java/com/ruoyi/system/domain/RoomPlatformIcon.java
@@ -0,0 +1,57 @@
+package com.ruoyi.system.domain;
+
+import com.ruoyi.common.annotation.Excel;
+import com.ruoyi.common.core.domain.BaseEntity;
+
+/**
+ * 房间地图平台图标对象 room_platform_icon
+ */
+public class RoomPlatformIcon extends BaseEntity {
+ private static final long serialVersionUID = 1L;
+
+ @Excel(name = "主键")
+ private Long id;
+ @Excel(name = "房间ID")
+ private Long roomId;
+ @Excel(name = "平台库ID")
+ private Long platformId;
+ @Excel(name = "平台名称快照")
+ private String platformName;
+ @Excel(name = "平台类型快照")
+ private String platformType;
+ @Excel(name = "图标URL快照")
+ private String iconUrl;
+ @Excel(name = "经度")
+ private Double lng;
+ @Excel(name = "纬度")
+ private Double lat;
+ @Excel(name = "朝向(度)")
+ private Double heading;
+ @Excel(name = "图标缩放")
+ private Double iconScale;
+ @Excel(name = "排序")
+ private Integer sortOrder;
+
+ public void setId(Long id) { this.id = id; }
+ public Long getId() { return id; }
+ public void setRoomId(Long roomId) { this.roomId = roomId; }
+ public Long getRoomId() { return roomId; }
+ public void setPlatformId(Long platformId) { this.platformId = platformId; }
+ public Long getPlatformId() { return platformId; }
+ public void setPlatformName(String platformName) { this.platformName = platformName; }
+ public String getPlatformName() { return platformName; }
+ public void setPlatformType(String platformType) { this.platformType = platformType; }
+ public String getPlatformType() { return platformType; }
+ public void setIconUrl(String iconUrl) { this.iconUrl = iconUrl; }
+ public String getIconUrl() { return iconUrl; }
+ public void setLng(Double lng) { this.lng = lng; }
+ public Double getLng() { return lng; }
+ public void setLat(Double lat) { this.lat = lat; }
+ public Double getLat() { return lat; }
+ public void setHeading(Double heading) { this.heading = heading; }
+ public Double getHeading() { return heading; }
+ public void setIconScale(Double iconScale) { this.iconScale = iconScale; }
+ public Double getIconScale() { return iconScale; }
+ public void setSortOrder(Integer sortOrder) { this.sortOrder = sortOrder; }
+ public Integer getSortOrder() { return sortOrder; }
+}
diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/mapper/RoomPlatformIconMapper.java b/ruoyi-system/src/main/java/com/ruoyi/system/mapper/RoomPlatformIconMapper.java
new file mode 100644
index 0000000..e6ffa3e
--- /dev/null
+++ b/ruoyi-system/src/main/java/com/ruoyi/system/mapper/RoomPlatformIconMapper.java
@@ -0,0 +1,22 @@
+package com.ruoyi.system.mapper;
+
+import java.util.List;
+import com.ruoyi.system.domain.RoomPlatformIcon;
+
+/**
+ * 房间地图平台图标Mapper接口
+ */
+public interface RoomPlatformIconMapper {
+
+ RoomPlatformIcon selectRoomPlatformIconById(Long id);
+
+ List selectRoomPlatformIconList(RoomPlatformIcon roomPlatformIcon);
+
+ int insertRoomPlatformIcon(RoomPlatformIcon roomPlatformIcon);
+
+ int updateRoomPlatformIcon(RoomPlatformIcon roomPlatformIcon);
+
+ int deleteRoomPlatformIconById(Long id);
+
+ int deleteRoomPlatformIconByRoomId(Long roomId);
+}
diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/service/IRoomPlatformIconService.java b/ruoyi-system/src/main/java/com/ruoyi/system/service/IRoomPlatformIconService.java
new file mode 100644
index 0000000..9c7f7f8
--- /dev/null
+++ b/ruoyi-system/src/main/java/com/ruoyi/system/service/IRoomPlatformIconService.java
@@ -0,0 +1,20 @@
+package com.ruoyi.system.service;
+
+import java.util.List;
+import com.ruoyi.system.domain.RoomPlatformIcon;
+
+/**
+ * 房间地图平台图标Service接口
+ */
+public interface IRoomPlatformIconService {
+
+ List selectListByRoomId(Long roomId);
+
+ RoomPlatformIcon selectById(Long id);
+
+ int insert(RoomPlatformIcon roomPlatformIcon);
+
+ int update(RoomPlatformIcon roomPlatformIcon);
+
+ int deleteById(Long id);
+}
diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/RoomPlatformIconServiceImpl.java b/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/RoomPlatformIconServiceImpl.java
new file mode 100644
index 0000000..4cfea80
--- /dev/null
+++ b/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/RoomPlatformIconServiceImpl.java
@@ -0,0 +1,50 @@
+package com.ruoyi.system.service.impl;
+
+import java.util.Date;
+import java.util.List;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import com.ruoyi.system.mapper.RoomPlatformIconMapper;
+import com.ruoyi.system.domain.RoomPlatformIcon;
+import com.ruoyi.system.service.IRoomPlatformIconService;
+
+/**
+ * 房间地图平台图标Service业务层
+ */
+@Service
+public class RoomPlatformIconServiceImpl implements IRoomPlatformIconService {
+
+ @Autowired
+ private RoomPlatformIconMapper roomPlatformIconMapper;
+
+ @Override
+ public List selectListByRoomId(Long roomId) {
+ RoomPlatformIcon query = new RoomPlatformIcon();
+ query.setRoomId(roomId);
+ return roomPlatformIconMapper.selectRoomPlatformIconList(query);
+ }
+
+ @Override
+ public RoomPlatformIcon selectById(Long id) {
+ return roomPlatformIconMapper.selectRoomPlatformIconById(id);
+ }
+
+ @Override
+ public int insert(RoomPlatformIcon roomPlatformIcon) {
+ Date now = new Date();
+ roomPlatformIcon.setCreateTime(now);
+ roomPlatformIcon.setUpdateTime(now);
+ return roomPlatformIconMapper.insertRoomPlatformIcon(roomPlatformIcon);
+ }
+
+ @Override
+ public int update(RoomPlatformIcon roomPlatformIcon) {
+ roomPlatformIcon.setUpdateTime(new Date());
+ return roomPlatformIconMapper.updateRoomPlatformIcon(roomPlatformIcon);
+ }
+
+ @Override
+ public int deleteById(Long id) {
+ return roomPlatformIconMapper.deleteRoomPlatformIconById(id);
+ }
+}
diff --git a/ruoyi-system/src/main/resources/mapper/system/RoomPlatformIconMapper.xml b/ruoyi-system/src/main/resources/mapper/system/RoomPlatformIconMapper.xml
new file mode 100644
index 0000000..286db42
--- /dev/null
+++ b/ruoyi-system/src/main/resources/mapper/system/RoomPlatformIconMapper.xml
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+
+
+ select id, room_id, platform_id, platform_name, platform_type, icon_url,
+ lng, lat, heading, icon_scale, sort_order, create_time, update_time
+ from room_platform_icon
+
+
+
+
+
+
+
+ insert into room_platform_icon
+
+ room_id,
+ platform_id,
+ platform_name,
+ platform_type,
+ icon_url,
+ lng,
+ lat,
+ heading,
+ icon_scale,
+ sort_order,
+ create_time,
+ update_time,
+
+
+ #{roomId},
+ #{platformId},
+ #{platformName},
+ #{platformType},
+ #{iconUrl},
+ #{lng},
+ #{lat},
+ #{heading},
+ #{iconScale},
+ #{sortOrder},
+ #{createTime},
+ #{updateTime},
+
+
+
+
+ update room_platform_icon
+
+ lng = #{lng},
+ lat = #{lat},
+ heading = #{heading},
+ icon_scale = #{iconScale},
+ sort_order = #{sortOrder},
+ update_time = #{updateTime},
+
+ where id = #{id}
+
+
+
+ delete from room_platform_icon where id = #{id}
+
+
+
+ delete from room_platform_icon where room_id = #{roomId}
+
+
diff --git a/ruoyi-ui/src/api/system/roomPlatformIcon.js b/ruoyi-ui/src/api/system/roomPlatformIcon.js
new file mode 100644
index 0000000..d160f78
--- /dev/null
+++ b/ruoyi-ui/src/api/system/roomPlatformIcon.js
@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+/** 按房间ID查询该房间下所有地图平台图标 */
+export function listByRoomId(roomId) {
+ return request({
+ url: '/system/roomPlatformIcon/list',
+ method: 'get',
+ params: { roomId }
+ })
+}
+
+/** 新增房间地图平台图标 */
+export function addRoomPlatformIcon(data) {
+ return request({
+ url: '/system/roomPlatformIcon',
+ method: 'post',
+ data
+ })
+}
+
+/** 修改房间地图平台图标（位置/朝向/缩放） */
+export function updateRoomPlatformIcon(data) {
+ return request({
+ url: '/system/roomPlatformIcon',
+ method: 'put',
+ data
+ })
+}
+
+/** 删除房间地图平台图标 */
+export function delRoomPlatformIcon(id) {
+ return request({
+ url: '/system/roomPlatformIcon/' + id,
+ method: 'delete'
+ })
+}
diff --git a/ruoyi-ui/src/assets/icons/svg/screenshot.svg b/ruoyi-ui/src/assets/icons/svg/screenshot.svg
new file mode 100644
index 0000000..bc07916
--- /dev/null
+++ b/ruoyi-ui/src/assets/icons/svg/screenshot.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
From 27c363640a65c396013c4d2847821bc1b68a483a Mon Sep 17 00:00:00 2001
From: ctw <1051735452@qq.com>
Date: Mon, 9 Feb 2026 14:33:55 +0800
Subject: [PATCH 09/12] =?UTF-8?q?=E8=88=AA=E7=82=B9=E5=AD=97=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../com/ruoyi/system/domain/RouteWaypoints.java | 24 +++++++++++++
.../service/impl/RouteWaypointsServiceImpl.java | 8 +++++
.../mapper/system/RouteWaypointsMapper.xml | 10 +++++-
ruoyi-ui/src/views/cesiumMap/index.vue | 42 ++++++++++++----------
ruoyi-ui/src/views/childRoom/index.vue | 6 +++-
ruoyi-ui/src/views/dialogs/WaypointEditDialog.vue | 40 +++++++++++++++++++--
6 files changed, 106 insertions(+), 24 deletions(-)
diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/domain/RouteWaypoints.java b/ruoyi-system/src/main/java/com/ruoyi/system/domain/RouteWaypoints.java
index 4d83b21..b2aea1b 100644
--- a/ruoyi-system/src/main/java/com/ruoyi/system/domain/RouteWaypoints.java
+++ b/ruoyi-system/src/main/java/com/ruoyi/system/domain/RouteWaypoints.java
@@ -63,6 +63,12 @@ public class RouteWaypoints extends BaseEntity
@Excel(name = "盘旋参数")
private String holdParams;
+ /** 航点标签文字大小(px)，用于地图显示 */
+ private Integer labelFontSize;
+
+ /** 航点标签文字颜色(如 #333333)，用于地图显示 */
+ private String labelColor;
+
public void setId(Long id)
{
this.id = id;
@@ -179,6 +185,22 @@ public class RouteWaypoints extends BaseEntity
return holdParams;
}
+ public void setLabelFontSize(Integer labelFontSize) {
+ this.labelFontSize = labelFontSize;
+ }
+
+ public Integer getLabelFontSize() {
+ return labelFontSize;
+ }
+
+ public void setLabelColor(String labelColor) {
+ this.labelColor = labelColor;
+ }
+
+ public String getLabelColor() {
+ return labelColor;
+ }
+
@Override
public String toString() {
return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
@@ -194,6 +216,8 @@ public class RouteWaypoints extends BaseEntity
.append("turnAngle", getTurnAngle())
.append("pointType", getPointType())
.append("holdParams", getHoldParams())
+ .append("labelFontSize", getLabelFontSize())
+ .append("labelColor", getLabelColor())
.toString();
}
diff --git a/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/RouteWaypointsServiceImpl.java b/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/RouteWaypointsServiceImpl.java
index 63be94c..75c5ea1 100644
--- a/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/RouteWaypointsServiceImpl.java
+++ b/ruoyi-system/src/main/java/com/ruoyi/system/service/impl/RouteWaypointsServiceImpl.java
@@ -62,6 +62,14 @@ public class RouteWaypointsServiceImpl implements IRouteWaypointsService
routeWaypoints.setSeq((long) (maxSeq + 1));
}
+ // 2.5 地图标签默认值：字号 14、颜色 #333333（微软雅黑、不加粗）
+ if (routeWaypoints.getLabelFontSize() == null) {
+ routeWaypoints.setLabelFontSize(14);
+ }
+ if (routeWaypoints.getLabelColor() == null || routeWaypoints.getLabelColor().isEmpty()) {
+ routeWaypoints.setLabelColor("#333333");
+ }
+
// 3. 执行若依生成的原始插入方法
return routeWaypointsMapper.insertRouteWaypoints(routeWaypoints);
}
diff --git a/ruoyi-system/src/main/resources/mapper/system/RouteWaypointsMapper.xml b/ruoyi-system/src/main/resources/mapper/system/RouteWaypointsMapper.xml
index b5d6df5..a484b4d 100644
--- a/ruoyi-system/src/main/resources/mapper/system/RouteWaypointsMapper.xml
+++ b/ruoyi-system/src/main/resources/mapper/system/RouteWaypointsMapper.xml
@@ -17,10 +17,12 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
- select id, route_id, name, seq, lat, lng, alt, speed, start_time, turn_angle, point_type, hold_params from route_waypoints
+ select id, route_id, name, seq, lat, lng, alt, speed, start_time, turn_angle, point_type, hold_params, label_font_size, label_color from route_waypoints
已 {{ missionDrawingPointsCount }} 个航点，右键结束
插入盘旋
@@ -364,6 +369,31 @@
确 定
+
+
+
+ ![截图预览]()
+
+ 点击「保存」后，浏览器将弹出保存对话框，您可选择保存路径。
+