From d67e853223b79fea7c0075a31d007d1368eaae78 Mon Sep 17 00:00:00 2001 From: cuitw <1051735452@qq.com> Date: Wed, 11 Mar 2026 13:18:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=AD=E6=AD=A5=E6=B3=95=E5=89=8D=E5=90=8E?= =?UTF-8?q?=E7=AB=AF=EF=BC=8C=E5=8A=A0=E7=A9=BA=E5=9F=9F=E8=BE=85=E5=8A=A9?= =?UTF-8?q?=E7=BA=BF=E7=BB=98=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/ruoyi/web/controller/RoutesController.java | 39 +++ ruoyi-ui/src/api/system/routes.js | 19 + ruoyi-ui/src/utils/imageUrl.js | 14 + ruoyi-ui/src/utils/request.js | 4 + ruoyi-ui/src/views/cesiumMap/ContextMenu.vue | 42 ++- ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue | 1 + ruoyi-ui/src/views/cesiumMap/index.vue | 198 ++++++++++- ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue | 82 ++++- ruoyi-ui/src/views/childRoom/SixStepsOverlay.vue | 218 +++++++++++- ruoyi-ui/src/views/childRoom/StepCanvasContent.vue | 292 ++++++++++++++-- ruoyi-ui/src/views/childRoom/TaskPageContent.vue | 157 ++++----- .../views/childRoom/UnderstandingStepContent.vue | 381 +++++++++++++++++++-- ruoyi-ui/src/views/childRoom/rollCallTemplate.js | 34 +- 13 files changed, 1310 insertions(+), 171 deletions(-) create mode 100644 ruoyi-ui/src/utils/imageUrl.js 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 5ce71d7..ff6fbc4 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 @@ -163,6 +163,45 @@ public class RoutesController extends BaseController } /** + * 保存六步法全部数据到 Redis（任务页、理解、后五步、背景、多页等） + */ + @PreAuthorize("@ss.hasPermi('system:routes:edit')") + @PostMapping("/saveSixStepsData") + public AjaxResult saveSixStepsData(@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) + ":six_steps"; + fourTRedisTemplate.opsForValue().set(key, data.toString()); + return success(); + } + + /** + * 从 Redis 获取六步法全部数据 + */ + @PreAuthorize("@ss.hasPermi('system:routes:query')") + @GetMapping("/getSixStepsData") + public AjaxResult getSixStepsData(Long roomId) + { + if (roomId == null) { + return AjaxResult.error("房间ID不能为空"); + } + String key = "room:" + String.valueOf(roomId) + ":six_steps"; + 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-ui/src/api/system/routes.js b/ruoyi-ui/src/api/system/routes.js index 4a1853b..afcb27f 100644 --- a/ruoyi-ui/src/api/system/routes.js +++ b/ruoyi-ui/src/api/system/routes.js @@ -100,6 +100,25 @@ export function getTaskPageData(params) { }) } +// 保存六步法全部数据到 Redis（任务页、理解、后五步、背景、多页等） +export function saveSixStepsData(data) { + return request({ + url: '/system/routes/saveSixStepsData', + method: 'post', + data, + headers: { repeatSubmit: false } + }) +} + +// 从 Redis 获取六步法全部数据 +export function getSixStepsData(params) { + return request({ + url: '/system/routes/getSixStepsData', + method: 'get', + params + }) +} + // 获取导弹发射参数（Redis：房间+航线+平台为 key） export function getMissileParams(params) { return request({ diff --git a/ruoyi-ui/src/utils/imageUrl.js b/ruoyi-ui/src/utils/imageUrl.js new file mode 100644 index 0000000..dbd9402 --- /dev/null +++ b/ruoyi-ui/src/utils/imageUrl.js @@ -0,0 +1,14 @@ +/** + * 解析背景图/图片 URL + * - data:image/... (base64) 或 http(s):// 开头：原样返回 + * - 否则视为若依 profile 路径，拼接 base API + */ +export function resolveImageUrl(img) { + if (!img) return '' + if (img.startsWith('data:') || img.startsWith('http://') || img.startsWith('https://')) { + return img + } + const base = process.env.VUE_APP_BASE_API || '' + const path = img.startsWith('/') ? img : '/' + img + return base + path +} diff --git a/ruoyi-ui/src/utils/request.js b/ruoyi-ui/src/utils/request.js index 892176c..bd92ba7 100644 --- a/ruoyi-ui/src/utils/request.js +++ b/ruoyi-ui/src/utils/request.js @@ -66,6 +66,10 @@ service.interceptors.request.use(config => { } } } + // FormData 上传时移除 Content-Type，让浏览器自动设置 multipart/form-data; boundary=... + if (config.data instanceof FormData) { + delete config.headers['Content-Type'] + } return config }, error => { console.log(error) diff --git a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue index 77a7f8b..a3c4508 100644 --- a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue +++ b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue @@ -173,7 +173,7 @@ -
+
位置
📍 @@ -275,6 +275,46 @@
+ +
+
辅助线属性
+
+ 🎨 + 颜色 + +
+
+
+
+
+
+
+ 📏 + 线宽 + {{ entityData.width }}px +
+
+
+
+ {{ width }}px +
+
+
+
+
箭头属性
diff --git a/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue b/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue index b0e2ec6..55218e3 100644 --- a/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue +++ b/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue @@ -46,6 +46,7 @@ export default { { id: 'rectangle', name: '矩形空域', icon: 'jx' }, { id: 'circle', name: '圆形空域', icon: 'circle' }, { id: 'sector', name: '扇形空域', icon: 'sx' }, + { id: 'auxiliaryLine', name: '辅助线', icon: 'el-icon-minus' }, { id: 'arrow', name: '箭头', icon: 'el-icon-right' }, { id: 'text', name: '文本', icon: 'el-icon-document' }, { id: 'image', name: '图片', icon: 'el-icon-picture-outline' }, diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index 27c29c8..0b52f5f 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -521,6 +521,7 @@ export default { circle: { color: '#800080', opacity: 0, width: 2 }, sector: { color: '#FF6347', opacity: 0, width: 2 }, arrow: { color: '#FF0000', width: 6 }, + auxiliaryLine: { color: '#000000', width: 2 }, text: { color: '#000000', font: '14px PingFang SC, Microsoft YaHei, Helvetica Neue, sans-serif', backgroundColor: 'rgba(255, 255, 255, 0.92)' }, image: { width: 150, height: 150 } }, @@ -4839,6 +4840,9 @@ export default { case 'sector': this.startSectorDrawing() break + case 'auxiliaryLine': + this.startAuxiliaryLineDrawing() + break case 'arrow': this.startArrowDrawing() break @@ -5882,6 +5886,97 @@ export default { calculateDistance(point1, point2) { return Cesium.Cartesian3.distance(point1, point2); }, + // 绘制辅助线（两点定线段，默认黑色 1px） + startAuxiliaryLineDrawing() { + this.drawingPoints = [] + if (this.tempEntity) this.viewer.entities.remove(this.tempEntity) + if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity) + this.tempEntity = null + this.tempPreviewEntity = null + this.drawingHandler.setInputAction((movement) => { + const newPosition = this.getClickPosition(movement.endPosition) + if (newPosition) { + this.activeCursorPosition = newPosition + if (this.viewer.scene.requestRenderMode) this.viewer.scene.requestRender() + } + }, Cesium.ScreenSpaceEventType.MOUSE_MOVE) + this.drawingHandler.setInputAction((click) => { + const position = this.getClickPosition(click.position) + if (position) { + this.drawingPoints.push(position) + if (this.drawingPoints.length === 1) { + this.activeCursorPosition = position + this.tempPreviewEntity = this.viewer.entities.add({ + polyline: { + positions: new Cesium.CallbackProperty(() => { + if (this.drawingPoints.length > 0 && this.activeCursorPosition) { + return [this.drawingPoints[this.drawingPoints.length - 1], this.activeCursorPosition] + } + return [] + }, false), + width: this.defaultStyles.auxiliaryLine.width, + material: Cesium.Color.fromCssColorString(this.defaultStyles.auxiliaryLine.color), + arcType: Cesium.ArcType.NONE + } + }) + } else { + this.activeCursorPosition = null + this.finishAuxiliaryLineDrawing() + } + } + }, Cesium.ScreenSpaceEventType.LEFT_CLICK) + this.drawingHandler.setInputAction(() => { + this.cancelDrawing() + }, Cesium.ScreenSpaceEventType.RIGHT_CLICK) + }, + finishAuxiliaryLineDrawing() { + if (this.drawingPoints.length >= 2) { + if (this.tempPreviewEntity) { + this.viewer.entities.remove(this.tempPreviewEntity) + this.tempPreviewEntity = null + } + const entity = this.addAuxiliaryLineEntity([...this.drawingPoints]) + this.drawingPoints = [] + this.notifyDrawingEntitiesChanged() + return entity + } else { + this.cancelDrawing() + return null + } + }, + addAuxiliaryLineEntity(positions) { + if (!positions || positions.length < 2) return null + const linePositions = positions.length === 2 ? positions : [positions[0], positions[positions.length - 1]] + this.entityCounter++ + const id = `auxiliaryLine_${this.entityCounter}` + const entity = this.viewer.entities.add({ + id, + name: `辅助线 ${this.entityCounter}`, + polyline: { + positions: linePositions, + width: this.defaultStyles.auxiliaryLine.width, + material: Cesium.Color.fromCssColorString(this.defaultStyles.auxiliaryLine.color), + arcType: Cesium.ArcType.NONE + } + }) + const entityData = { + id, + type: 'auxiliaryLine', + points: linePositions.map(p => this.cartesianToLatLng(p)), + positions: linePositions, + entity, + color: this.defaultStyles.auxiliaryLine.color, + width: this.defaultStyles.auxiliaryLine.width, + label: `辅助线 ${this.entityCounter}` + } + this.allEntities.push(entityData) + entity.clickHandler = (e) => { + this.selectEntity(entityData) + e.stopPropagation() + } + this.notifyDrawingEntitiesChanged() + return entityData + }, // 绘制箭头 startArrowDrawing() { this.drawingPoints = []; // 存储起点和终点 @@ -6725,6 +6820,12 @@ export default { entity.polyline.width = data.width } break + case 'auxiliaryLine': + if (entity.polyline) { + entity.polyline.material = Cesium.Color.fromCssColorString(data.color) + entity.polyline.width = data.width + } + break case 'text': if (entity.label) { entity.label.fillColor = Cesium.Color.fromCssColorString(data.color) @@ -6928,7 +7029,7 @@ export default { /** 开始空域位置调整模式：右键菜单点击「调整位置」后进入，移动鼠标预览，左键确认、右键取消 */ startAirspacePositionEdit() { const ed = this.contextMenu.entityData; - if (!ed || !['polygon', 'rectangle', 'circle', 'sector', 'arrow'].includes(ed.type)) { + if (!ed || !['polygon', 'rectangle', 'circle', 'sector', 'auxiliaryLine', 'arrow'].includes(ed.type)) { this.contextMenu.visible = false; return; } @@ -7124,6 +7225,30 @@ export default { }); break; } + case 'auxiliaryLine': { + const auxColor = entityData.color || this.defaultStyles.auxiliaryLine.color; + const auxWidth = entityData.width != null ? entityData.width : this.defaultStyles.auxiliaryLine.width; + this.airspacePositionEditPreviewEntity = this.viewer.entities.add({ + polyline: { + positions: new Cesium.CallbackProperty(() => { + const mc = that.airspacePositionEditContext?.mouseCartesian; + const oldCenter = that.getAirspaceCenter(entityData); + if (!mc || !oldCenter || !entityData.positions || entityData.positions.length < 2) return entityData.positions || []; + const delta = Cesium.Cartesian3.subtract(mc, oldCenter, new Cesium.Cartesian3()); + const first = entityData.positions[0]; + const last = entityData.positions[entityData.positions.length - 1]; + return [ + Cesium.Cartesian3.add(first, delta, new Cesium.Cartesian3()), + Cesium.Cartesian3.add(last, delta, new Cesium.Cartesian3()) + ]; + }, false), + width: auxWidth, + material: Cesium.Color.fromCssColorString(auxColor), + arcType: Cesium.ArcType.NONE + } + }); + break; + } } }, @@ -7168,6 +7293,7 @@ export default { } break; case 'arrow': + case 'auxiliaryLine': if (entityData.positions && entityData.positions.length >= 2) { const sum = entityData.positions.reduce((acc, p) => Cesium.Cartesian3.add(acc, p, new Cesium.Cartesian3()), new Cesium.Cartesian3()); return Cesium.Cartesian3.divideByScalar(sum, entityData.positions.length, new Cesium.Cartesian3()); @@ -7271,6 +7397,36 @@ export default { }; } break; + case 'auxiliaryLine': + if (entityData.positions && entityData.positions.length >= 2) { + const first = entityData.positions[0]; + const last = entityData.positions[entityData.positions.length - 1]; + const newFirst = Cesium.Cartesian3.add(first, delta, new Cesium.Cartesian3()); + const newLast = Cesium.Cartesian3.add(last, delta, new Cesium.Cartesian3()); + const linePositions = [newFirst, newLast]; + const auxColor = entityData.color || this.defaultStyles.auxiliaryLine.color; + const auxWidth = entityData.width != null ? entityData.width : this.defaultStyles.auxiliaryLine.width; + const oldEntity = entityData.entity; + this.viewer.entities.remove(oldEntity); + const newEntity = this.viewer.entities.add({ + id: oldEntity.id, + name: oldEntity.name, + polyline: { + positions: linePositions, + width: auxWidth, + material: Cesium.Color.fromCssColorString(auxColor), + arcType: Cesium.ArcType.NONE + } + }); + entityData.entity = newEntity; + entityData.positions = linePositions; + entityData.points = [this.cartesianToLatLng(newFirst), this.cartesianToLatLng(newLast)]; + newEntity.clickHandler = (e) => { + this.selectEntity(entityData); + e.stopPropagation(); + }; + } + break; } entityData.entity.show = true; this.notifyDrawingEntitiesChanged(); @@ -8575,7 +8731,7 @@ export default { // ================== 空域/威力区图形持久化 ================== /** 需要持久化到方案的空域图形类型（含测距；不含平台图标、航线） */ getDrawingEntityTypes() { - return ['line', 'polygon', 'rectangle', 'circle', 'sector', 'arrow', 'text', 'image', 'powerZone'] + return ['line', 'polygon', 'rectangle', 'circle', 'sector', 'auxiliaryLine', 'arrow', 'text', 'image', 'powerZone'] }, /** 空域/威力区图形增删时通知父组件，用于自动保存到房间（从房间加载时不触发） */ notifyDrawingEntitiesChanged() { @@ -8655,6 +8811,11 @@ export default { borderColor: entity.borderColor || entity.color, name: entity.name || '' }; break + case 'auxiliaryLine': + data = { + points: entity.points || [], + width: entity.width != null ? entity.width : this.defaultStyles.auxiliaryLine.width + }; break case 'arrow': data = { points: entity.points || [] }; break case 'text': @@ -8755,6 +8916,7 @@ export default { polygon: '面', rectangle: '矩形', circle: '圆形', + auxiliaryLine: '辅助线', ellipse: '椭圆', hold_circle: '圆形盘旋', hold_ellipse: '椭圆盘旋', @@ -9135,6 +9297,38 @@ export default { this.notifyDrawingEntitiesChanged() return } + case 'auxiliaryLine': { + const auxPts = entityData.data.points + if (!auxPts || auxPts.length < 2) break + const auxPositions = auxPts.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat)) + const auxLinePositions = auxPositions.length === 2 ? auxPositions : [auxPositions[0], auxPositions[auxPositions.length - 1]] + const auxColor = entityData.color || this.defaultStyles.auxiliaryLine.color + const auxWidth = entityData.data.width != null ? entityData.data.width : this.defaultStyles.auxiliaryLine.width + entity = this.viewer.entities.add({ + polyline: { + positions: auxLinePositions, + width: auxWidth, + material: Cesium.Color.fromCssColorString(auxColor), + arcType: Cesium.ArcType.NONE + } + }) + this.allEntities.push({ + id: entity.id, + type: 'auxiliaryLine', + points: [auxPts[0], auxPts[auxPts.length - 1]], + positions: auxLinePositions, + entity, + color: auxColor, + width: auxWidth, + label: entityData.label || '辅助线' + }) + entity.clickHandler = (e) => { + this.selectEntity(this.allEntities.find(ed => ed.entity === entity)) + e.stopPropagation() + } + this.notifyDrawingEntitiesChanged() + return + } case 'arrow': { const pts = entityData.data.points if (!pts || pts.length < 2) break diff --git a/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue b/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue index 78dcc61..d3de847 100644 --- a/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue +++ b/ruoyi-ui/src/views/childRoom/BottomLeftPanel.vue @@ -28,6 +28,7 @@ @@ -61,6 +65,9 @@ export default { computed: { showPanel() { return !this.showTimelineBar && !this.showSixStepsBar + }, + progressStorageKey() { + return this.roomId != null ? `six-steps-progress-${this.roomId}` : null } }, watch: { @@ -83,7 +90,8 @@ export default { { title: '准备', desc: '识别和评估潜在风险', active: false, completed: false }, { title: '执行', desc: '实时监控执行过程', active: false, completed: false }, { title: '评估', desc: '评估任务完成效果', active: false, completed: false } - ] + ], + savedProgress: {} } }, methods: { @@ -105,11 +113,8 @@ export default { toggleSixSteps() { this.showSixStepsBar = !this.showSixStepsBar if (this.showSixStepsBar) { + this.restoreProgress() this.showSixStepsOverlay = true - this.taskBlockActive = true - this.sixStepsData.forEach(s => { s.active = false; s.completed = false }) - this.activeStepIndex = 0 - // 点开六步法时同时显示时间轴 this.showTimelineBar = true if (this.$refs.timeline) { this.$refs.timeline.isVisible = true @@ -120,6 +125,63 @@ export default { this.isExpanded = false this.updateBottomPanelVisible() }, + saveProgress(overlayProgress) { + if (!this.progressStorageKey) return + try { + const progress = { + taskBlockActive: this.taskBlockActive, + activeStepIndex: this.activeStepIndex, + sixStepsData: this.sixStepsData.map(s => ({ ...s })), + ...overlayProgress + } + sessionStorage.setItem(this.progressStorageKey, JSON.stringify(progress)) + } catch (e) { + console.warn('SixSteps saveProgress failed:', e) + } + }, + restoreProgress() { + if (!this.progressStorageKey) { + this.taskBlockActive = true + this.activeStepIndex = 0 + this.sixStepsData.forEach(s => { s.active = false; s.completed = false }) + return + } + try { + const raw = sessionStorage.getItem(this.progressStorageKey) + const progress = raw ? JSON.parse(raw) : null + if (progress) { + this.taskBlockActive = progress.taskBlockActive !== false + this.activeStepIndex = Math.min(progress.activeStepIndex || 0, 5) + if (Array.isArray(progress.sixStepsData) && progress.sixStepsData.length === this.sixStepsData.length) { + progress.sixStepsData.forEach((s, i) => { + if (this.sixStepsData[i]) { + this.sixStepsData[i].active = s.active + this.sixStepsData[i].completed = s.completed + } + }) + } + this.savedProgress = { + activeUnderstandingSubIndex: progress.activeUnderstandingSubIndex || 0, + activeTaskSubIndex: progress.activeTaskSubIndex || 0, + activeStepSubIndex: progress.activeStepSubIndex || 0 + } + } else { + this.taskBlockActive = true + this.activeStepIndex = 0 + this.sixStepsData.forEach(s => { s.active = false; s.completed = false }) + this.savedProgress = {} + } + } catch (e) { + console.warn('SixSteps restoreProgress failed:', e) + this.taskBlockActive = true + this.activeStepIndex = 0 + this.savedProgress = {} + } + }, + onSixStepsClose(overlayProgress) { + this.saveProgress(overlayProgress || {}) + this.closeBoth() + }, updateBottomPanelVisible() { this.$emit('bottom-panel-visible', this.showTimelineBar || this.showSixStepsBar) }, @@ -127,9 +189,17 @@ export default { this.closeBoth() }, hideSixStepsBar() { + const overlay = this.$refs.sixStepsOverlay + if (overlay && overlay.getProgress) { + this.saveProgress(overlay.getProgress()) + } this.closeBoth() }, closeBoth() { + const overlay = this.$refs.sixStepsOverlay + if (overlay && overlay.getProgress) { + this.saveProgress(overlay.getProgress()) + } this.showTimelineBar = false this.showSixStepsBar = false this.showSixStepsOverlay = false diff --git a/ruoyi-ui/src/views/childRoom/SixStepsOverlay.vue b/ruoyi-ui/src/views/childRoom/SixStepsOverlay.vue index cd49062..676a77d 100644 --- a/ruoyi-ui/src/views/childRoom/SixStepsOverlay.vue +++ b/ruoyi-ui/src/views/childRoom/SixStepsOverlay.vue @@ -130,6 +130,8 @@ :task-sub-titles="taskSubTitles" @background-change="taskPageBackground = $event" @task-sub-titles-change="taskSubTitles = $event" + @save-request="debouncedSave" + @task-page-data="lastTaskPageData = $event; saveToRedis()" class="task-page-body" /> @@ -140,6 +142,8 @@ :active-sub-index="activeUnderstandingSubIndex" :sub-titles="understandingSubTitles" @background-change="sixStepsSharedBackground = $event" + @save-request="debouncedSave" + @understanding-data="lastUnderstandingData = $event; saveToRedis()" class="understanding-page-body" /> @@ -221,6 +225,7 @@ import { SIMPLE_TITLE_NAMES } from './rollCallTemplate' import { ensurePagesStructure, createEmptySubContent } from './subContentPages' +import { getSixStepsData, saveSixStepsData, getTaskPageData } from '@/api/system/routes' export default { name: 'SixStepsOverlay', @@ -255,6 +260,9 @@ export default { type: Boolean, default: false }, + initialActiveUnderstandingSubIndex: { type: Number, default: 0 }, + initialActiveTaskSubIndex: { type: Number, default: 0 }, + initialActiveStepSubIndex: { type: Number, default: 0 }, draggable: { type: Boolean, default: true @@ -265,10 +273,10 @@ export default { taskPageBackground: null, sixStepsSharedBackground: null, understandingSubTitles: ['点名', '任务目标', '自身任务', '对接任务'], - activeUnderstandingSubIndex: 0, + activeUnderstandingSubIndex: this.initialActiveUnderstandingSubIndex, taskSubTitles: [], - activeTaskSubIndex: 0, - activeStepSubIndex: 0, + activeTaskSubIndex: this.initialActiveTaskSubIndex, + activeStepSubIndex: this.initialActiveStepSubIndex, stepContents: {}, subTitleContextMenu: { visible: false, @@ -276,22 +284,95 @@ export default { y: 0, target: null, index: -1 - } + }, + _saveTimer: null, + lastTaskPageData: null, + lastUnderstandingData: null, + taskPageLoadComplete: false, + _isRestoring: false } }, + created() { + this._isRestoring = this.initialActiveUnderstandingSubIndex !== 0 || this.initialActiveTaskSubIndex !== 0 || this.initialActiveStepSubIndex !== 0 + }, watch: { - currentStepIndex() { + currentStepIndex(val) { + if (this._isRestoring) { + this.$nextTick(() => { this._isRestoring = false }) + return + } this.activeStepSubIndex = 0 + if (val === 0 && !this.overrideTitle) { + this.$nextTick(() => { + if (this.$refs.understandingStep && this.lastUnderstandingData) { + this.$refs.understandingStep.loadFromData(this.lastUnderstandingData) + } + }) + } }, - overrideTitle() { + overrideTitle(val) { + if (this._isRestoring) { + this.$nextTick(() => { this._isRestoring = false }) + return + } this.activeTaskSubIndex = 0 - } + if (val === '任务') { + this.taskPageLoadComplete = false + this.$nextTick(() => { + if (this.$refs.taskPage) { + if (this.lastTaskPageData) { + this.$refs.taskPage.loadFromData(this.lastTaskPageData) + } + this.loadFromRedis() + } + }) + } + if (!val && this.currentStepIndex === 0) { + this.$nextTick(() => { + if (this.$refs.understandingStep) { + if (this.lastUnderstandingData) { + this.$refs.understandingStep.loadFromData(this.lastUnderstandingData) + } + this.loadFromRedis() + } + }) + } + }, + roomId: { + handler(val) { + if (val != null && this.visible) this.loadFromRedis() + }, + immediate: false + }, + visible: { + handler(val) { + if (val && this.roomId != null) { + if (this.overrideTitle === '任务') this.taskPageLoadComplete = false + this.loadFromRedis() + } + }, + immediate: false + }, + taskPageBackground: { handler() { this.debouncedSave() }, deep: false }, + sixStepsSharedBackground: { handler() { this.debouncedSave() }, deep: false }, + understandingSubTitles: { handler() { this.debouncedSave() }, deep: true }, + taskSubTitles: { handler() { this.debouncedSave() }, deep: true }, + stepContents: { handler() { this.debouncedSave() }, deep: true } }, mounted() { document.addEventListener('click', this.onDocumentClickForSubTitleMenu) + if (this.roomId != null && this.visible) { + if (this.overrideTitle === '任务') this.taskPageLoadComplete = false + this.loadFromRedis() + } }, beforeDestroy() { document.removeEventListener('click', this.onDocumentClickForSubTitleMenu) + if (this._saveTimer) { + clearTimeout(this._saveTimer) + this._saveTimer = null + } + this.saveToRedis() }, computed: { currentStepTitle() { @@ -305,8 +386,128 @@ export default { } }, methods: { + getProgress() { + return { + activeUnderstandingSubIndex: this.activeUnderstandingSubIndex, + activeTaskSubIndex: this.activeTaskSubIndex, + activeStepSubIndex: this.activeStepSubIndex + } + }, close() { - this.$emit('close') + this.$emit('close', this.getProgress()) + }, + async loadFromRedis() { + if (this.roomId == null) return + try { + let res = await getSixStepsData({ roomId: this.roomId }) + let data = res && res.data + if (!data) { + res = await getTaskPageData({ roomId: this.roomId }) + data = res && res.data + if (data) { + const tp = typeof data === 'string' ? (() => { try { return JSON.parse(data) } catch (_) { return null } })() : data + if (tp) data = { taskPage: tp } + } + } + if (!data) return + const raw = typeof data === 'string' ? (() => { try { return JSON.parse(data) } catch (_) { return null } })() : data + if (!raw) return + if (raw.taskPage) { + this.taskPageBackground = raw.taskPage.background || null + if (Array.isArray(raw.taskPage.taskSubTitles)) this.taskSubTitles = raw.taskPage.taskSubTitles + this.lastTaskPageData = raw.taskPage + this.taskPageLoadComplete = true + this.$nextTick(() => { + if (this.$refs.taskPage) this.$refs.taskPage.loadFromData(raw.taskPage) + }) + } else if (this.overrideTitle === '任务') { + this.taskPageLoadComplete = true + } + if (raw.sixStepsSharedBackground) this.sixStepsSharedBackground = raw.sixStepsSharedBackground + if (Array.isArray(raw.understanding?.subTitles)) this.understandingSubTitles = raw.understanding.subTitles + if (raw.understanding?.subContents) { + this.lastUnderstandingData = raw.understanding + this.$nextTick(() => { + if (this.$refs.understandingStep) this.$refs.understandingStep.loadFromData(raw.understanding) + }) + } + if (raw.steps && typeof raw.steps === 'object') { + Object.keys(raw.steps).forEach(k => { + const step = raw.steps[k] + if (step && (step.subTitles || step.subContents)) { + this.$set(this.stepContents, parseInt(k, 10), { + subTitles: step.subTitles || [], + subContents: (step.subContents || []).map(sc => { + ensurePagesStructure(sc) + return sc + }) + }) + } + }) + } + } catch (e) { + console.warn('SixSteps loadFromRedis failed:', e) + } finally { + if (this.overrideTitle === '任务') this.taskPageLoadComplete = true + } + }, + saveToRedis() { + if (this.roomId == null) return + let taskPageData + if (this.$refs.taskPage) { + if (this.taskPageLoadComplete) { + taskPageData = this.lastTaskPageData = this.$refs.taskPage.getDataForSave() + } else { + taskPageData = this.lastTaskPageData || { background: this.taskPageBackground, icons: [], textBoxes: [], taskSubTitles: this.taskSubTitles } + } + } else { + taskPageData = this.lastTaskPageData || { background: this.taskPageBackground, icons: [], textBoxes: [], taskSubTitles: this.taskSubTitles } + } + const payload = { + taskPage: taskPageData, + sixStepsSharedBackground: this.sixStepsSharedBackground, + understanding: (() => { + if (this.$refs.understandingStep) { + this.lastUnderstandingData = { subTitles: this.understandingSubTitles, subContents: this.$refs.understandingStep.getDataForSave() } + } + return { + subTitles: this.understandingSubTitles, + subContents: this.lastUnderstandingData?.subContents || [] + } + })(), + steps: {} + } + Object.keys(this.stepContents).forEach(k => { + const step = this.stepContents[k] + if (step && (step.subTitles || step.subContents)) { + payload.steps[k] = { + subTitles: step.subTitles || [], + subContents: (step.subContents || []).map(sc => { + ensurePagesStructure(sc) + return { + pages: (sc.pages || []).map(p => ({ + icons: (p.icons || []).map(i => ({ id: i.id, x: i.x, y: i.y, width: i.width, height: i.height, rotation: i.rotation || 0, src: i.src })), + textBoxes: (p.textBoxes || []).map(t => ({ id: t.id, x: t.x, y: t.y, width: t.width, height: t.height, text: t.text || '', placeholder: t.placeholder, rotation: t.rotation || 0, fontSize: t.fontSize, fontFamily: t.fontFamily, color: t.color, fontWeight: t.fontWeight })) + })), + currentPageIndex: sc.currentPageIndex || 0 + } + }) + } + } + }) + saveSixStepsData({ + roomId: this.roomId, + data: JSON.stringify(payload) + }).catch(e => { + console.warn('SixSteps saveToRedis failed:', e) + }) + }, + debouncedSave() { + if (this._saveTimer) clearTimeout(this._saveTimer) + this._saveTimer = setTimeout(() => { + this._saveTimer = null + this.saveToRedis() + }, 300) }, getStepContent(stepIndex) { let step = this.stepContents[stepIndex] @@ -674,6 +875,7 @@ export default { display: flex; align-items: center; gap: 16px; + margin-left: 2px; } .header-insert { diff --git a/ruoyi-ui/src/views/childRoom/StepCanvasContent.vue b/ruoyi-ui/src/views/childRoom/StepCanvasContent.vue index c7e7e09..3e3e5a4 100644 --- a/ruoyi-ui/src/views/childRoom/StepCanvasContent.vue +++ b/ruoyi-ui/src/views/childRoom/StepCanvasContent.vue @@ -1,15 +1,63 @@ + + diff --git a/ruoyi-ui/src/views/childRoom/rollCallTemplate.js b/ruoyi-ui/src/views/childRoom/rollCallTemplate.js index 0a05d8e..0b96872 100644 --- a/ruoyi-ui/src/views/childRoom/rollCallTemplate.js +++ b/ruoyi-ui/src/views/childRoom/rollCallTemplate.js @@ -10,6 +10,8 @@ function genId() { const DEFAULT_FONT = { fontFamily: '微软雅黑', color: '#333333' } const TITLE_TOP = 16 const TITLE_FONT_SIZE = 32 +const OFFSET_RIGHT = 2 +const CONTENT_WIDTH_REDUCE = 4 const TITLE_WIDTH = 160 const TITLE_HEIGHT = 72 const CONTENT_FONT_SIZE = 22 @@ -20,13 +22,13 @@ export function createRollCallTextBoxes(canvasWidth, canvasHeight) { const h = canvasHeight || 500 const cols = 2 const rows = 3 - const boxWidth = 240 + const boxWidth = 240 - CONTENT_WIDTH_REDUCE const boxHeight = 52 const gapX = 80 const gapY = 48 const groupWidth = cols * boxWidth + (cols - 1) * gapX const groupHeight = rows * boxHeight + (rows - 1) * gapY - const startX = Math.max(0, (w - groupWidth) / 2) + const startX = Math.max(0, (w - groupWidth) / 2) + OFFSET_RIGHT const startY = Math.max(0, (h - groupHeight) / 2) const boxes = [] @@ -60,13 +62,13 @@ export function createSubTitleTemplate(subTitleName, canvasWidth, canvasHeight) const padding = 40 const gap = 12 - const contentWidth = Math.max(300, w - (padding * 2)) + const contentWidth = Math.max(300, w - (padding * 2)) - CONTENT_WIDTH_REDUCE const contentHeight = 600 const titleWidth = ['第一次进度检查', '第二次进度检查'].includes(subTitleName) ? TITLE_WIDTH * 2 : TITLE_WIDTH - const titleX = padding + const titleX = padding + OFFSET_RIGHT const titleY = TITLE_TOP - const contentX = padding + const contentX = padding + OFFSET_RIGHT const contentY = titleY + TITLE_HEIGHT + gap return [ @@ -118,7 +120,7 @@ export function createSimpleTitleTemplate(subTitleName, canvasWidth, canvasHeigh return [ { id: genId(), - x: padding, + x: padding + OFFSET_RIGHT, y: TITLE_TOP, width: TITLE_WIDTH, height: TITLE_HEIGHT, @@ -143,14 +145,14 @@ export function createIntentBriefingTemplate(canvasWidth, canvasHeight) { const padding = 40 const gap = 12 const middleHeight = 62 - const contentWidth = Math.max(300, w - (padding * 2)) + const contentWidth = Math.max(300, w - (padding * 2)) - CONTENT_WIDTH_REDUCE const contentHeight = 500 - const titleX = padding + const titleX = padding + OFFSET_RIGHT const titleY = TITLE_TOP - const middleX = padding + const middleX = padding + OFFSET_RIGHT const middleY = titleY + TITLE_HEIGHT + gap - const contentX = padding + const contentX = padding + OFFSET_RIGHT const contentY = middleY + middleHeight + gap return [ @@ -172,7 +174,7 @@ export function createIntentBriefingTemplate(canvasWidth, canvasHeight) { id: genId(), x: middleX, y: middleY, - width: 420, + width: 420 - CONTENT_WIDTH_REDUCE, height: middleHeight, text: '明确每日任务目标，风险等级', placeholder: undefined, @@ -207,14 +209,14 @@ export function createTaskPlanningTemplate(canvasWidth, canvasHeight) { const padding = 40 const gap = 12 const middleHeight = 62 - const contentWidth = Math.max(300, w - (padding * 2)) + const contentWidth = Math.max(300, w - (padding * 2)) - CONTENT_WIDTH_REDUCE const contentHeight = 500 - const titleX = padding + const titleX = padding + OFFSET_RIGHT const titleY = TITLE_TOP - const middleX = padding + const middleX = padding + OFFSET_RIGHT const middleY = titleY + TITLE_HEIGHT + gap - const contentX = padding + const contentX = padding + OFFSET_RIGHT const contentY = middleY + middleHeight + gap return [ @@ -236,7 +238,7 @@ export function createTaskPlanningTemplate(canvasWidth, canvasHeight) { id: genId(), x: middleX, y: middleY, - width: 240, + width: 240 - CONTENT_WIDTH_REDUCE, height: middleHeight, text: 'XX规划：XXXXX', placeholder: undefined,