From 470f9f005ab52e75907d5b1051ec748f445dfc11 Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期五, 06 三月 2026 17:02:27 +0800
Subject: [PATCH] #
---
src/main/webapp/components/MapCanvas.js | 79 +++++++++++++++++++++++++++++++++++----
1 files changed, 70 insertions(+), 9 deletions(-)
diff --git a/src/main/webapp/components/MapCanvas.js b/src/main/webapp/components/MapCanvas.js
index 4554b71..5fd1cba 100644
--- a/src/main/webapp/components/MapCanvas.js
+++ b/src/main/webapp/components/MapCanvas.js
@@ -20,12 +20,13 @@
:style="shelfTooltipStyle()">
{{ shelfTooltip.text }}
</div>
- <div style="position: absolute; top: 20px; right: 50px; text-align: right;">
- <div>FPS:{{mapFps}}</div>
- <div style="margin-top: 6px; display: flex; gap: 6px; justify-content: flex-end;">
- <button type="button" @click="toggleStationDirection" style="padding: 2px 8px; font-size: 12px; cursor: pointer;">{{ showStationDirection ? '闅愯棌绔欑偣鏂瑰悜' : '鏄剧ず绔欑偣鏂瑰悜' }}</button>
- <button type="button" @click="rotateMap" style="padding: 2px 8px; font-size: 12px; cursor: pointer;">鏃嬭浆</button>
- <button type="button" @click="toggleMirror" style="padding: 2px 8px; font-size: 12px; cursor: pointer;">{{ mapMirrorX ? '鍙栨秷闀滃儚' : '闀滃儚' }}</button>
+ <div style="position: absolute; top: 18px; right: 34px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;">
+ <div :style="mapToolFpsStyle()">FPS {{ mapFps }}</div>
+ <button type="button" @click="toggleMapToolPanel" :style="mapToolToggleStyle(showMapToolPanel)">{{ showMapToolPanel ? '鏀惰捣鎿嶄綔' : '鍦板浘鎿嶄綔' }}</button>
+ <div v-show="showMapToolPanel" :style="mapToolBarStyle()">
+ <button type="button" @click="toggleStationDirection" :style="mapToolButtonStyle(showStationDirection)">{{ showStationDirection ? '闅愯棌绔欑偣鏂瑰悜' : '鏄剧ず绔欑偣鏂瑰悜' }}</button>
+ <button type="button" @click="rotateMap" :style="mapToolButtonStyle(false)">鏃嬭浆</button>
+ <button type="button" @click="toggleMirror" :style="mapToolButtonStyle(mapMirrorX)">{{ mapMirrorX ? '鍙栨秷闀滃儚' : '闀滃儚' }}</button>
</div>
</div>
</div>
@@ -105,6 +106,7 @@
taskStationCount: 0,
currentLoad: 0
},
+ showMapToolPanel: false,
showStationDirection: false,
hoverLoopNo: null,
hoverLoopStationIdSet: new Set(),
@@ -190,6 +192,68 @@
}
},
methods: {
+ mapToolBarStyle() {
+ return {
+ display: 'flex',
+ gap: '8px',
+ alignItems: 'center',
+ padding: '7px',
+ borderRadius: '14px',
+ background: 'rgba(255, 255, 255, 0.72)',
+ border: '1px solid rgba(160, 180, 205, 0.3)',
+ boxShadow: '0 8px 20px rgba(37, 64, 97, 0.08)',
+ backdropFilter: 'blur(4px)'
+ };
+ },
+ mapToolFpsStyle() {
+ return {
+ padding: '4px 10px',
+ borderRadius: '999px',
+ background: 'rgba(255, 255, 255, 0.7)',
+ border: '1px solid rgba(160, 180, 205, 0.28)',
+ color: '#48617c',
+ fontSize: '12px',
+ lineHeight: '18px',
+ letterSpacing: '0.04em',
+ boxShadow: '0 6px 16px rgba(37, 64, 97, 0.06)'
+ };
+ },
+ mapToolToggleStyle(active) {
+ return {
+ appearance: 'none',
+ border: '1px solid ' + (active ? 'rgba(96, 132, 170, 0.36)' : 'rgba(160, 180, 205, 0.3)'),
+ background: active ? 'rgba(235, 243, 251, 0.96)' : 'rgba(255, 255, 255, 0.82)',
+ color: '#46617b',
+ height: '30px',
+ padding: '0 12px',
+ borderRadius: '999px',
+ fontSize: '12px',
+ lineHeight: '30px',
+ cursor: 'pointer',
+ whiteSpace: 'nowrap',
+ boxShadow: '0 6px 16px rgba(37, 64, 97, 0.06)'
+ };
+ },
+ mapToolButtonStyle(active) {
+ return {
+ appearance: 'none',
+ border: '1px solid ' + (active ? 'rgba(255, 136, 93, 0.38)' : 'rgba(160, 180, 205, 0.3)'),
+ background: active ? 'rgba(255, 119, 77, 0.16)' : 'rgba(255, 255, 255, 0.88)',
+ color: active ? '#d85a31' : '#4d647d',
+ height: '30px',
+ padding: '0 12px',
+ borderRadius: '10px',
+ fontSize: '12px',
+ lineHeight: '30px',
+ cursor: 'pointer',
+ transition: 'all 0.2s ease',
+ boxShadow: active ? '0 4px 10px rgba(255, 119, 77, 0.12)' : 'none',
+ whiteSpace: 'nowrap'
+ };
+ },
+ toggleMapToolPanel() {
+ this.showMapToolPanel = !this.showMapToolPanel;
+ },
createMap() {
this.pixiApp = new PIXI.Application({ backgroundColor: 0xF5F7F9, antialias: false, powerPreference: 'high-performance', autoDensity: true, resolution: Math.min(window.devicePixelRatio || 1, 2) });
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;
@@ -2161,9 +2225,6 @@
}
}
});
-
-
-
--
Gitblit v1.9.1