From be5c87afd82e50b6ef58a24e06a7a6cb36fb5007 Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期四, 19 三月 2026 17:54:46 +0800
Subject: [PATCH] #仿真优化
---
src/main/webapp/components/MapCanvas.js | 142 ++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 138 insertions(+), 4 deletions(-)
diff --git a/src/main/webapp/components/MapCanvas.js b/src/main/webapp/components/MapCanvas.js
index 5057776..06c06d3 100644
--- a/src/main/webapp/components/MapCanvas.js
+++ b/src/main/webapp/components/MapCanvas.js
@@ -49,7 +49,7 @@
</div>
</div>
`,
- props: ['lev', 'levList', 'crnParam', 'rgvParam', 'devpParam', 'stationTaskRange', 'highlightOnParamChange', 'viewportPadding', 'hudPadding'],
+ props: ['lev', 'levList', 'crnParam', 'rgvParam', 'devpParam', 'stationTaskRange', 'highlightOnParamChange', 'viewportPadding', 'hudPadding', 'traceOverlay'],
data() {
return {
map: [],
@@ -103,6 +103,8 @@
hoverRaf: null,
objectsContainer: null,
objectsContainer2: null,
+ traceOverlayContainer: null,
+ tracePulseTween: null,
tracksContainer: null,
tracksGraphics: null,
shelvesContainer: null,
@@ -176,6 +178,7 @@
if (this.shelfCullRaf) { cancelAnimationFrame(this.shelfCullRaf); this.shelfCullRaf = null; }
if (this.resizeDebounceTimer) { clearTimeout(this.resizeDebounceTimer); this.resizeDebounceTimer = null; }
if (window.gsap && this.pixiApp && this.pixiApp.stage) { window.gsap.killTweensOf(this.pixiApp.stage.position); }
+ this.clearTraceOverlay();
if (this.pixiApp) { this.pixiApp.destroy(true, { children: true }); }
if (this.containerResizeObserver) { this.containerResizeObserver.disconnect(); this.containerResizeObserver = null; }
window.removeEventListener('resize', this.scheduleResizeToContainer);
@@ -234,6 +237,12 @@
window.gsap.fromTo(sprite, { alpha: 1 }, { alpha: 0.2, yoyo: true, repeat: 6, duration: 0.15 });
}
}
+ }
+ },
+ traceOverlay: {
+ deep: true,
+ handler() {
+ this.renderTraceOverlay();
}
}
},
@@ -384,6 +393,7 @@
this.graphicsRgvTrack = this.createTrackTexture(25, 25, 10);
this.objectsContainer = new PIXI.Container();
this.objectsContainer2 = new PIXI.Container();
+ this.traceOverlayContainer = new PIXI.Container();
this.tracksContainer = new PIXI.ParticleContainer(10000, { scale: true, position: true, rotation: false, uvs: false, alpha: false });
this.tracksGraphics = new PIXI.Graphics();
this.shelvesContainer = new PIXI.Container();
@@ -395,6 +405,7 @@
this.mapRoot.addChild(this.shelvesContainer);
this.mapRoot.addChild(this.objectsContainer);
this.mapRoot.addChild(this.objectsContainer2);
+ this.mapRoot.addChild(this.traceOverlayContainer);
this.pixiApp.renderer.roundPixels = true;
this.hoveredShelfCell = null;
this.hoverPointer = { x: 0, y: 0 };
@@ -594,6 +605,7 @@
changeFloor(lev) {
this.currentLev = lev;
this.clearLoopStationHighlight();
+ this.clearTraceOverlay();
this.isSwitchingFloor = true;
this.hideShelfTooltip();
this.hoveredShelfCell = null;
@@ -619,6 +631,7 @@
},
createMapData(map) {
this.clearLoopStationHighlight();
+ this.clearTraceOverlay();
this.hideShelfTooltip();
this.hoveredShelfCell = null;
this.mapRowOffsets = [];
@@ -886,6 +899,7 @@
this.applyMapTransform(true);
this.map = map;
this.isSwitchingFloor = false;
+ this.renderTraceOverlay();
},
initWidth(map) {
let maxRow = map.length;
@@ -1816,6 +1830,129 @@
this.hoverLoopNo = null;
this.hoverLoopStationIdSet = new Set();
},
+ clearTraceOverlay() {
+ if (window.gsap && this.tracePulseTween) {
+ try { this.tracePulseTween.kill(); } catch (e) {}
+ }
+ this.tracePulseTween = null;
+ if (!this.traceOverlayContainer) { return; }
+ const children = this.traceOverlayContainer.removeChildren();
+ children.forEach((child) => {
+ if (child && typeof child.destroy === 'function') {
+ child.destroy({ children: true, texture: false, baseTexture: false });
+ }
+ });
+ },
+ normalizeTraceOverlay(trace) {
+ if (!trace) { return null; }
+ const taskNo = parseInt(trace.taskNo, 10);
+ return {
+ taskNo: isNaN(taskNo) ? null : taskNo,
+ status: trace.status || '',
+ currentStationId: this.parseStationTaskNo(trace.currentStationId),
+ finalTargetStationId: this.parseStationTaskNo(trace.finalTargetStationId),
+ blockedStationId: this.parseStationTaskNo(trace.blockedStationId),
+ passedStationIds: this.normalizeTraceStationIds(trace.passedStationIds),
+ pendingStationIds: this.normalizeTraceStationIds(trace.pendingStationIds),
+ latestAppendedPath: this.normalizeTraceStationIds(trace.latestAppendedPath)
+ };
+ },
+ normalizeTraceStationIds(list) {
+ if (!Array.isArray(list)) { return []; }
+ const result = [];
+ list.forEach((item) => {
+ const stationId = parseInt(item, 10);
+ if (!isNaN(stationId)) { result.push(stationId); }
+ });
+ return result;
+ },
+ getStationCenter(stationId) {
+ if (stationId == null || !this.pixiStaMap) { return null; }
+ const sprite = this.pixiStaMap.get(parseInt(stationId, 10));
+ if (!sprite) { return null; }
+ return {
+ x: sprite.x + sprite.width / 2,
+ y: sprite.y + sprite.height / 2
+ };
+ },
+ drawTracePairs(graphics, stationIds, color, width, alpha) {
+ if (!graphics || !Array.isArray(stationIds) || stationIds.length < 2) { return; }
+ graphics.lineStyle({ width: width, color: color, alpha: alpha, cap: PIXI.LINE_CAP.ROUND, join: PIXI.LINE_JOIN.ROUND });
+ for (let i = 1; i < stationIds.length; i++) {
+ const prev = this.getStationCenter(stationIds[i - 1]);
+ const curr = this.getStationCenter(stationIds[i]);
+ if (!prev || !curr) { continue; }
+ graphics.moveTo(prev.x, prev.y);
+ graphics.lineTo(curr.x, curr.y);
+ }
+ },
+ drawTraceMarker(container, stationId, options) {
+ const point = this.getStationCenter(stationId);
+ if (!container || !point) { return null; }
+ const marker = new PIXI.Container();
+ const ring = new PIXI.Graphics();
+ const fill = new PIXI.Graphics();
+ const radius = options && options.radius ? options.radius : 18;
+ const color = options && options.color != null ? options.color : 0x1d4ed8;
+ ring.lineStyle(3, color, 0.95);
+ ring.drawCircle(0, 0, radius);
+ fill.beginFill(color, 0.18);
+ fill.drawCircle(0, 0, Math.max(6, radius * 0.42));
+ fill.endFill();
+ marker.addChild(ring);
+ marker.addChild(fill);
+ marker.position.set(point.x, point.y);
+ container.addChild(marker);
+ return marker;
+ },
+ buildPendingTraceSequence(trace) {
+ const pending = this.normalizeTraceStationIds(trace && trace.pendingStationIds);
+ const currentStationId = this.parseStationTaskNo(trace && trace.currentStationId);
+ if (pending.length === 0) {
+ return currentStationId > 0 ? [currentStationId] : [];
+ }
+ if (currentStationId > 0 && pending[0] !== currentStationId) {
+ return [currentStationId].concat(pending);
+ }
+ return pending;
+ },
+ renderTraceOverlay() {
+ if (!this.traceOverlayContainer) { return; }
+ this.clearTraceOverlay();
+ const trace = this.normalizeTraceOverlay(this.traceOverlay);
+ if (!trace || !this.pixiStaMap || this.pixiStaMap.size === 0) { return; }
+
+ const graphics = new PIXI.Graphics();
+ this.drawTracePairs(graphics, trace.passedStationIds, 0x2563eb, 5, 0.95);
+ this.drawTracePairs(graphics, this.buildPendingTraceSequence(trace), 0xf97316, 4, 0.9);
+ this.drawTracePairs(graphics, trace.latestAppendedPath, 0xfacc15, 7, 0.88);
+ this.traceOverlayContainer.addChild(graphics);
+
+ const currentMarker = this.drawTraceMarker(this.traceOverlayContainer, trace.currentStationId, {
+ color: 0x2563eb,
+ radius: 20
+ });
+ if (currentMarker && window.gsap) {
+ this.tracePulseTween = window.gsap.to(currentMarker.scale, {
+ x: 1.18,
+ y: 1.18,
+ duration: 0.55,
+ repeat: -1,
+ yoyo: true,
+ ease: 'sine.inOut'
+ });
+ }
+
+ if (trace.blockedStationId > 0) {
+ const blockedMarker = this.drawTraceMarker(this.traceOverlayContainer, trace.blockedStationId, {
+ color: 0xdc2626,
+ radius: 22
+ });
+ if (blockedMarker) {
+ blockedMarker.alpha = 0.95;
+ }
+ }
+ },
handleLoopCardEnter(loopItem) {
if (!loopItem) { return; }
this.hoverLoopNo = loopItem.loopNo;
@@ -2657,9 +2794,6 @@
}
}
});
-
-
-
--
Gitblit v1.9.1