diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json index 92bbe25..915ace5 100644 --- a/ruoyi-ui/package.json +++ b/ruoyi-ui/package.json @@ -52,6 +52,7 @@ "devDependencies": { "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6", "@babel/plugin-transform-optional-chaining": "^7.28.6", + "@open-wc/webpack-import-meta-loader": "^0.4.7", "@vue/cli-plugin-babel": "4.4.6", "@vue/cli-service": "4.4.6", "babel-plugin-dynamic-import-node": "2.3.3", diff --git a/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue b/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue new file mode 100644 index 0000000..f53a9c0 --- /dev/null +++ b/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue @@ -0,0 +1,128 @@ + + + + + diff --git a/ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue b/ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue new file mode 100644 index 0000000..d09f8d4 --- /dev/null +++ b/ruoyi-ui/src/views/cesiumMap/MeasurementPanel.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index 309ef03..a72c2b2 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -2,200 +2,30 @@
- -
- - - - -
-
- - - -
-
-
-
- - - - - -
- -
- - - -
- -
- - - -
-
- - -
- - - - - -
- - -
-
- - -
-
-
测量结果
-
- 长度： - {{ measurementResult.distance.toFixed(2) }} 米 -
-
- 面积： - {{ measurementResult.area.toFixed(2) }} 平方米 -
-
- 半径： - {{ measurementResult.radius.toFixed(2) }} 米 -
- -
-
+ + +
+ + + + diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue index 869b09f..924ef63 100644 --- a/ruoyi-ui/src/views/childRoom/index.vue +++ b/ruoyi-ui/src/views/childRoom/index.vue @@ -280,6 +280,9 @@ @open-platform-dialog="openPlatformDialog" /> + + +
-
- K-02:00 - K-01:00 - K时 - K+01:00 - K+02:00 +
+ + +
+ + {{ playbackSpeed }}x + +
@@ -353,6 +378,7 @@ import RouteEditDialog from '@/views/dialogs/RouteEditDialog' import WaypointEditDialog from '@/views/dialogs/WaypointEditDialog' import LeftMenu from './LeftMenu' import RightPanel from './RightPanel' +import BottomLeftPanel from './BottomLeftPanel' export default { name: 'MissionPlanningView', components: { @@ -362,7 +388,8 @@ export default { RouteEditDialog, WaypointEditDialog, LeftMenu, - RightPanel + RightPanel, + BottomLeftPanel }, data() { return { @@ -473,6 +500,9 @@ export default { // 时间控制 timeProgress: 45, currentTime: 'K+01:15:30', + isPlaying: false, + playbackSpeed: 1, + playbackInterval: null, // 用户 userAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', @@ -490,6 +520,13 @@ export default { // 作战时间也需要实时更新 setInterval(this.updateCombatTime, 1000); }, + beforeDestroy() { + // 清除播放定时器 + if (this.playbackInterval) { + clearInterval(this.playbackInterval); + this.playbackInterval = null; + } + }, methods: { // 显示在线成员弹窗 showOnlineMembersDialog() { @@ -813,6 +850,68 @@ export default { this.$message.info('隐藏推演时钟控制'); }, + // 播放控制 + togglePlay() { + this.isPlaying = !this.isPlaying; + if (this.isPlaying) { + this.startPlayback(); + this.$message.success('开始播放'); + } else { + this.stopPlayback(); + this.$message.info('暂停播放'); + } + }, + + startPlayback() { + if (this.playbackInterval) { + clearInterval(this.playbackInterval); + } + this.playbackInterval = setInterval(() => { + this.timeProgress += this.playbackSpeed * 0.1; + if (this.timeProgress >= 100) { + this.timeProgress = 0; + } + this.updateTimeFromProgress(); + }, 100); + }, + + stopPlayback() { + if (this.playbackInterval) { + clearInterval(this.playbackInterval); + this.playbackInterval = null; + } + }, + + increaseSpeed() { + if (this.playbackSpeed < 25) { + this.playbackSpeed++; + if (this.isPlaying) { + this.startPlayback(); + } + } + }, + + decreaseSpeed() { + if (this.playbackSpeed > 1) { + this.playbackSpeed--; + if (this.isPlaying) { + this.startPlayback(); + } + } + }, + + updateTimeFromProgress() { + const totalSeconds = Math.floor(this.timeProgress * 72); + const hours = Math.floor(totalSeconds / 3600) - 2; + const minutes = Math.floor((totalSeconds % 3600) / 60); + const seconds = totalSeconds % 60; + + const sign = hours >= 0 ? '+' : '-'; + const absHours = Math.abs(hours); + + this.currentTime = `K${sign}${String(absHours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; + }, + // 时间控制（保留用于底部时间轴） play() { this.$message.success('推演开始'); @@ -1495,16 +1594,56 @@ background: url('~@/assets/map-background.png'); background-color: rgba(0, 138, 255, 0.8); } -.timeline-marks { +.playback-controls { display: flex; - justify-content: space-between; - font-size: 11px; - color: #666; - margin-top: 5px; + align-items: center; + gap: 10px; } -.mark.current { - font-weight: bold; +.control-btn { + width: 26px; + height: 26px; + border: 1px solid rgba(0, 138, 255, 0.3); + background: rgba(255, 255, 255, 0.9); + border-radius: 4px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; + color: #008aff; +} + +.control-btn:hover:not(:disabled) { + background: rgba(0, 138, 255, 0.1); + border-color: rgba(0, 138, 255, 0.5); +} + +.control-btn:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.control-btn i { + font-size: 14px; +} + +.speed-control { + display: flex; + align-items: center; + gap: 6px; + padding: 2px 8px; + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(0, 138, 255, 0.3); + border-radius: 4px; +} + +.speed-text { + font-size: 11px; + font-weight: 600; + color: #008aff; + min-width: 24px; + text-align: center; } .system-status {