From 1e465fcab874dd5bf60fdff4151a3742b5a755b0 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期四, 17 十月 2024 14:21:12 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/tool.js | 233 ++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 194 insertions(+), 39 deletions(-) diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index 5a8e868..8ef7d0b 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -3,12 +3,21 @@ import { DEVICE_TYPE, DEVICE_Z_INDEX, + AGV_STATUS_MODE, } from './constants'; import shelf from '/map/shelf.svg'; import charge from '/map/charge.svg'; import station from '/map/station.svg'; import direction from '/map/direction.svg'; +import point from '/map/point.svg'; +// agv +import ctuEmptyNoBattery from '/map/agv/ctuEmptyNoBattery.svg'; +import ctuEmptyHalfBattery from '/map/agv/ctuEmptyHalfBattery.svg'; +import ctuEmptyFullBattery from '/map/agv/ctuEmptyFullBattery.svg'; +import ctuLoadedNoBattery from '/map/agv/ctuLoadedNoBattery.svg'; +import ctuLoadedHalfBattery from '/map/agv/ctuLoadedHalfBattery.svg'; +import ctuLoadedFullBattery from '/map/agv/ctuLoadedFullBattery.svg'; let app, mapContainer, themeMode; let selectedSprite, effectTick, effectHalfCircle, effectRectangle; @@ -46,7 +55,7 @@ } } -export const generateSprite = (deviceType) => { +export const generateSprite = (deviceType, source) => { let sprite; switch (deviceType) { case DEVICE_TYPE.SHELF: @@ -73,10 +82,26 @@ // sprite.height = 63; sprite.zIndex = DEVICE_Z_INDEX.DIRECTION; break; + + + case DEVICE_TYPE.AGV: + if (source) { + sprite = new PIXI.Sprite(PIXI.Texture.from(source, { resourceOptions: { scale: 1 } })); + } + sprite.width = 300; + sprite.height = 500; + sprite.zIndex = DEVICE_Z_INDEX.AGV; + break + case DEVICE_TYPE.POINT: + sprite = new PIXI.Sprite(PIXI.Texture.from(point, { resourceOptions: { scale: 1 } })); + // sprite.width = 112; + // sprite.height = 63; + sprite.zIndex = DEVICE_Z_INDEX.POINT; + break default: break; } - if (sprite) { + if (sprite && deviceType !== DEVICE_TYPE.AGV) { sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY; } return sprite; @@ -93,49 +118,27 @@ }; } +export const querySprite = (type, no) => { + if (!mapContainer) { + return; + } + for (const sprite of mapContainer.children) { + if (sprite.data?.type === type && sprite.data?.no === no) { + return sprite; + } + } +} + +export const findSpriteByUuid = (uuid) => { + return mapContainer?.children?.find(child => child?.data?.uuid === uuid); +} + export const markSprite = (sprite) => { sprite.alpha = 0.5; } export const unMarkSprite = (sprite) => { sprite.alpha = 1; -} - -export const beMovable = (sprite) => { - sprite.off('pointerup'); - sprite.off('pointermove'); - sprite.off('pointerdown'); - sprite.off('click'); - - sprite.on("pointerdown", onDragStart); - - let dragTarget; - function onDragStart(event) { - if (event.button === 0) { - dragTarget = event.currentTarget; - mapContainer.parent.off('pointermove'); - mapContainer.parent.on('pointermove', onDragMove, dragTarget); - - mapContainer.parent.off('pointerup'); - mapContainer.parent.on('pointerup', onDragEnd.bind(mapContainer)); - } - } - - function onDragMove(event) { - if (this) { - this.parent.toLocal(event.global, null, this.position); - } - } - - function onDragEnd() { - if (dragTarget) { - this.parent.off('pointermove'); - this.parent.off('pointerup'); - dragTarget.alpha = 1; - dragTarget = null; - } - } - } export const spriteListBeMovable = (selectedSprites, endFn) => { @@ -214,6 +217,57 @@ && spriteBounds.y < boxBounds.y + boxBounds.height; } +export const beInsight = (sprite, setCurSprite) => { + sprite.off('pointerup'); + sprite.off('pointermove'); + sprite.off('pointerdown'); + sprite.off('click'); + + sprite.on("click", onClick); + + function onClick(event) { + setCurSprite(sprite); + } + +} + +export const beMovable = (sprite) => { + sprite.off('pointerup'); + sprite.off('pointermove'); + sprite.off('pointerdown'); + sprite.off('click'); + + sprite.on("pointerdown", onDragStart); + + let dragTarget; + function onDragStart(event) { + if (event.button === 0) { + dragTarget = event.currentTarget; + mapContainer.parent.off('pointermove'); + mapContainer.parent.on('pointermove', onDragMove, dragTarget); + + mapContainer.parent.off('pointerup'); + mapContainer.parent.on('pointerup', onDragEnd.bind(mapContainer)); + } + } + + function onDragMove(event) { + if (this) { + this.parent.toLocal(event.global, null, this.position); + } + } + + function onDragEnd() { + if (dragTarget) { + this.parent.off('pointermove'); + this.parent.off('pointerup'); + dragTarget.alpha = 1; + dragTarget = null; + } + } + +} + export const beSettings = (sprite, setSpriteSettings) => { sprite.off('pointerup'); sprite.off('pointermove'); @@ -225,6 +279,33 @@ function onClick(event) { setSpriteSettings(sprite); } +} + +export const focusSprite = (sprite) => { + if (!sprite || !app || !mapContainer) { + return; + } + + mapContainer.scale.set(0.3); + mapContainer.position.set(0, 0); + + let bounds = sprite.getBounds(); + let focusPoint = { + x: bounds.x + bounds.width / 2, + y: bounds.y + bounds.height / 2 + }; + + let targetPos = { + x: app.renderer.width / 4 - focusPoint.x, + y: app.renderer.height / 2 - focusPoint.y + }; + + new TWEEDLE.Tween(mapContainer.position) + .easing(TWEEDLE.Easing.Quadratic.Out) + .to(targetPos, 500) + .onComplete(() => { + }) + .start(); } export const clearMapData = () => { @@ -368,4 +449,78 @@ parentElement.style.paddingLeft = param; parentElement.style.paddingRight = param; } +} + + +// service ------------------------ + +export const getAgvStatusMode = (backpack, battery) => { + if (backpack === 0) { + if (battery < 10) { + return AGV_STATUS_MODE.EMPTY_NO_BATTERY; + } + if (battery < 80) { + return AGV_STATUS_MODE.EMPTY_HALF_BATTERY; + } + return AGV_STATUS_MODE.EMPTY_FULL_BATTERY; + } else { + if (battery < 10) { + return AGV_STATUS_MODE.LOADED_NO_BATTERY; + } + if (battery < 80) { + return AGV_STATUS_MODE.LOADED_HALF_BATTERY; + } + return AGV_STATUS_MODE.LOADED_FULL_BATTERY; + } +} + +export const generateAgvSpriteTexture = (agvStatusMode) => { + switch (agvStatusMode) { + case AGV_STATUS_MODE.EMPTY_NO_BATTERY: + return ctuEmptyNoBattery; + case AGV_STATUS_MODE.EMPTY_HALF_BATTERY: + return ctuEmptyHalfBattery; + case AGV_STATUS_MODE.EMPTY_FULL_BATTERY: + return ctuEmptyFullBattery; + case AGV_STATUS_MODE.LOADED_NO_BATTERY: + return ctuLoadedNoBattery; + case AGV_STATUS_MODE.LOADED_HALF_BATTERY: + return ctuLoadedHalfBattery; + case AGV_STATUS_MODE.LOADED_FULL_BATTERY: + return ctuLoadedFullBattery; + default: + return; + } +} + + +// dynamic graphic ---------------- + +export const generateDynamicGraphic = (curZone, data, setCurSprite) => { + // console.log("ws", curZone, data); + + for (const agv of data.agvVos) { + showAgvSprite(curZone, agv, setCurSprite) + } + +} + +const showAgvSprite = (curZone, agv, setCurSprite) => { + const { agvNo, code, direction, backpack, battery, ...rest } = agv; + if (!code) { return } + const codeSprite = querySprite(DEVICE_TYPE.POINT, code); + if (!codeSprite) { return } + let agvSprite = querySprite(DEVICE_TYPE.AGV, agvNo); + if (!agvSprite) { + agvSprite = generateSprite(DEVICE_TYPE.AGV, + generateAgvSpriteTexture(getAgvStatusMode(backpack.filter(item => item.loaded === true).length, battery)) + ); + initSprite(agvSprite, DEVICE_TYPE.AGV); + agvSprite.data.no = agvNo; + agvSprite.position.set(codeSprite.position.x, codeSprite.position.y); + agvSprite.rotation = rotationParseNum(direction); + mapContainer.addChild(agvSprite); + beInsight(agvSprite, setCurSprite); + // agv no on sprite + } } \ No newline at end of file -- Gitblit v1.9.1