From 7f70cb15d035f0c233b9e62b9e43aa985317c908 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 04 十一月 2024 10:22:45 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/tool.js | 131 +++++++++++++++++++++++++++++++++----------
1 files changed, 99 insertions(+), 32 deletions(-)
diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js
index 5f7f0a3..2993d4e 100644
--- a/zy-acs-flow/src/map/tool.js
+++ b/zy-acs-flow/src/map/tool.js
@@ -78,7 +78,7 @@
}
}
-export const generateSprite = (deviceType, source) => {
+export const generateSprite = (deviceType, texture) => {
let sprite;
switch (deviceType) {
case DEVICE_TYPE.SHELF:
@@ -108,11 +108,11 @@
case DEVICE_TYPE.AGV:
- if (source) {
- sprite = new PIXI.Sprite(PIXI.Texture.from(source, { resourceOptions: { scale: 1 } }));
+ if (texture) {
+ sprite = new PIXI.Sprite(PIXI.Texture.from(texture, { resourceOptions: { scale: 1 } }));
}
- sprite.width = 300;
- sprite.height = 500;
+ sprite.width = 400;
+ sprite.height = 700;
sprite.zIndex = DEVICE_Z_INDEX.AGV;
break
case DEVICE_TYPE.POINT:
@@ -348,7 +348,7 @@
function onSpriteMouseOver(event) {
if (tooltip) {
- app.stage.removeChild(tooltip);
+ app?.stage.removeChild(tooltip);
}
tooltip = createSpriteTooltip(this);// this => sprite
tooltip.x = event.data.global.x + 10;
@@ -365,7 +365,7 @@
function onSpriteMouseOut() {
if (tooltip && tooltip.parent) {
- tooltip.parent.removeChild(tooltip);
+ tooltip.parent?.removeChild(tooltip);
tooltip = null;
}
}
@@ -478,7 +478,7 @@
effectTicker = null;
}
if (effectCircle) {
- mapContainer.removeChild(effectCircle);
+ mapContainer?.removeChild(effectCircle);
effectCircle = null;
}
selectedSprite = null;
@@ -541,8 +541,39 @@
}
export const rotationParseNum = (num) => {
- return num * Math.PI / 180;
+ return num * (Math.PI / 180);
}
+
+const animateRotation = (sprite, targetRotation, rotationOffset = 0) => {
+ if (!mapContainer || !sprite) {
+ return;
+ }
+ // origin
+ let currentRotation = sprite.rotation + rotationOffset;
+ // target
+ targetRotation += rotationOffset;
+
+ // diff
+ let rotationDifference = targetRotation - currentRotation;
+ if (rotationDifference === 0) {
+ return;
+ }
+ rotationDifference = ((rotationDifference + Math.PI) % (2 * Math.PI)) - Math.PI;
+
+ // destination
+ const endRotation = sprite.rotation + rotationDifference;
+
+ new TWEEDLE.Tween(sprite)
+ .to({ rotation: endRotation }, 1000)
+ .easing(TWEEDLE.Easing.Linear.None)
+ .onUpdate(() => {
+ // agv
+ if (sprite.updateTextRotation) {
+ sprite.updateTextRotation();
+ }
+ })
+ .start();
+};
export const incrementSpriteNo = (str, incrementValue) => {
const match = str.match(/(\D*)(\d+)/);
@@ -619,41 +650,80 @@
// dynamic graphic ----------------
export const generateDynamicGraphic = (curZone, data, setCurSprite) => {
- // console.log("ws", curZone, data);
- console.log(JSON.stringify(data));
for (const agvVo of data.agvVos) {
showAgvSprite(curZone, agvVo, setCurSprite);
drawerAgvPath(curZone, agvVo);
}
-
}
+const agvRotationOffsetDegrees = 0;
+const agvRotationOffset = rotationParseNum(agvRotationOffsetDegrees);
+
const showAgvSprite = (curZone, agvVo, setCurSprite) => {
- const { agvNo, code, direction, backpack, dynamicRoute, battery, ...rest } = agvVo;
- if (!code) { return }
+ const { agvNo, code, direction, battery, backpack } = agvVo;
+ if (!code) { return; }
const codeSprite = querySprite(DEVICE_TYPE.POINT, code);
- if (!codeSprite) { return }
+ if (!codeSprite) { return; }
+
+ const targetRotation = rotationParseNum(direction);
+ const backpackCount = backpack?.filter(item => item.loaded === true).length || 0;
+
let agvSprite = querySprite(DEVICE_TYPE.AGV, agvNo);
if (!agvSprite) {
- agvSprite = generateSprite(DEVICE_TYPE.AGV,
- // generateAgvSpriteTexture(getAgvStatusMode(backpack.filter(item => item.loaded === true).length, battery));
- generateAgvSpriteTexture(getAgvStatusMode(1, battery))
- );
+ const agvStatusMode = getAgvStatusMode(backpackCount, battery);
+ const agvTexture = generateAgvSpriteTexture(agvStatusMode);
+ agvSprite = generateSprite(DEVICE_TYPE.AGV, agvTexture);
+
initSprite(agvSprite, DEVICE_TYPE.AGV);
+
agvSprite.data.no = agvNo;
+ agvSprite.data.backpackCount = backpackCount;
+ agvSprite.data.battery = battery;
+
agvSprite.position.set(codeSprite.position.x, codeSprite.position.y);
- agvSprite.rotation = rotationParseNum(direction);
+ agvSprite.rotation = targetRotation + agvRotationOffset;
mapContainer.addChild(agvSprite);
beInsight(agvSprite, setCurSprite);
- // agv no on sprite
+
+ // agvNo sprite
+ const agvText = new PIXI.Text(agvNo.toString(), {
+ fontSize: 60,
+ fill: 0x000000,
+ });
+ agvText.anchor.set(0.5, 0.5);
+ agvText.position.set(0, 0);
+ agvSprite.addChild(agvText);
+
+ agvSprite.updateTextRotation = () => {
+ if (agvText && agvSprite) {
+ agvText.rotation = -agvSprite.rotation;
+ }
+ };
+ agvSprite.updateTextRotation();
+
+ } else {
+ const prevBackpackCount = agvSprite.data.backpackCount;
+ const prevBattery = agvSprite.data.battery;
+
+ if (backpackCount !== prevBackpackCount || battery !== prevBattery) {
+ const agvStatusMode = getAgvStatusMode(backpackCount, battery);
+ const agvTexture = generateAgvSpriteTexture(agvStatusMode);
+ agvSprite.texture = PIXI.Texture.from(agvTexture, { resourceOptions: { scale: 1 } });
+ // update backpackCount and battery
+ agvSprite.data.backpackCount = backpackCount;
+ agvSprite.data.battery = battery;
+ }
+
+ animateRotation(agvSprite, targetRotation, agvRotationOffset);
}
- new TWEEDLE.Tween(agvSprite?.position).easing(TWEEDLE.Easing.Linear.None).to({
- x: codeSprite.position.x,
- y: codeSprite.position.y
- }, 1000).onUpdate(() => {
- updateEffect(agvSprite);
- }).start();
+ new TWEEDLE.Tween(agvSprite.position)
+ .to({
+ x: codeSprite.position.x,
+ y: codeSprite.position.y
+ }, 1000)
+ .easing(TWEEDLE.Easing.Linear.None)
+ .start();
}
const drawerAgvPath = (curZone, agvVo) => {
@@ -661,9 +731,6 @@
return;
}
const { agvNo, code: curCode, dynamicRoute } = agvVo;
- // if (dynamicRoute?.length <= 1) {
- // return;
- // }
const agvPathName = 'agvPath-' + agvNo;
let agvPath = mapContainer.getChildByName(agvPathName);
@@ -674,7 +741,7 @@
agvPath.name = agvPathName;
agvPath.lineStyle(Math.max(20, 4 * (1 / mapContainer.scale.x)), 0x2f68ac, 0.8);
agvPath.zIndex = DEVICE_Z_INDEX.DYNAMIC_ROUTE;
- agvPath.blendMode = PIXI.BLEND_MODES.NORMAL;
+ // agvPath.blendMode = PIXI.BLEND_MODES.NORMAL;
let firstNode = true;
for (let i = Math.max(0, dynamicRoute.indexOf(curCode)); i < dynamicRoute.length; i++) {
@@ -691,4 +758,4 @@
}
mapContainer.addChild(agvPath);
-}
\ No newline at end of file
+}
--
Gitblit v1.9.1