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 | 583 ++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 483 insertions(+), 100 deletions(-) diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index 09434c5..2993d4e 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -3,16 +3,32 @@ import { DEVICE_TYPE, DEVICE_Z_INDEX, + AGV_STATUS_MODE, + DEVICE_SPRITE_TINT, + DEVICE_SELECTED_EFFECT_PADDING, + DEVICE_SELECTED_EFFECT_COLOR, + POINT_ROUTE_DIRECTION, + DEVICE_SPRITE_TINT_DARK, } from './constants'; +import { getRouteList } from './http'; +import PointRoute from "./PointRoute"; 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; +let selectedSprite, effectCircle, effectTicker; +let tooltip; export function getApp() { return app; @@ -36,6 +52,21 @@ export function setThemeMode(param) { themeMode = param; + if (mapContainer) { + // mapContainer.children.forEach(child => { + // const deviceType = child.data?.type; + // if (deviceType) { + // if (themeMode === 'dark') { + // const tint = DEVICE_SPRITE_TINT_DARK[deviceType] + // if (tint) { + // child.tint = tint; + // } + // } else { + // DEVICE_SPRITE_TINT[deviceType] != null && (child.tint = DEVICE_SPRITE_TINT[deviceType]); + // } + // } + // }) + } } @@ -47,7 +78,7 @@ } } -export const generateSprite = (deviceType) => { +export const generateSprite = (deviceType, texture) => { let sprite; switch (deviceType) { case DEVICE_TYPE.SHELF: @@ -74,8 +105,18 @@ // sprite.height = 63; sprite.zIndex = DEVICE_Z_INDEX.DIRECTION; break; + + + case DEVICE_TYPE.AGV: + if (texture) { + sprite = new PIXI.Sprite(PIXI.Texture.from(texture, { resourceOptions: { scale: 1 } })); + } + sprite.width = 400; + sprite.height = 700; + sprite.zIndex = DEVICE_Z_INDEX.AGV; + break case DEVICE_TYPE.POINT: - sprite = new PIXI.Sprite(PIXI.Texture.from(point, { resourceOptions: { scale: .7 } })); + sprite = new PIXI.Sprite(PIXI.Texture.from(point, { resourceOptions: { scale: 1 } })); // sprite.width = 112; // sprite.height = 63; sprite.zIndex = DEVICE_Z_INDEX.POINT; @@ -83,7 +124,10 @@ default: break; } - if (sprite) { + const tintType = themeMode === 'dark' ? DEVICE_SPRITE_TINT_DARK : DEVICE_SPRITE_TINT; + tintType[deviceType] != null && (sprite.tint = tintType[deviceType]); + + if (sprite && deviceType !== DEVICE_TYPE.AGV) { sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY; } return sprite; @@ -100,49 +144,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) => { @@ -221,17 +243,158 @@ && spriteBounds.y < boxBounds.y + boxBounds.height; } -export const beSettings = (sprite, setSpriteSettings) => { +export const beInsight = (sprite, setCurSprite) => { + if (!sprite?.data?.type) { return } + sprite.off('pointerup'); sprite.off('pointermove'); sprite.off('pointerdown'); + sprite.off('pointerover'); + sprite.off('pointerout'); sprite.off('click'); - sprite.on("click", onClick); + sprite.on("click", (event) => { + setCurSprite(sprite); + }); - function onClick(event) { - setSpriteSettings(sprite); + sprite.on('pointerover', onSpriteMouseOver); + sprite.on('pointermove', onSpriteMouseMove); + sprite.on('pointerout', onSpriteMouseOut); +} + +export const beMovable = (sprite) => { + sprite.off('pointerup'); + sprite.off('pointermove'); + sprite.off('pointerdown'); + sprite.off('pointerover'); + sprite.off('pointerout'); + 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) => { + if (!sprite?.data?.type) { return } + + sprite.off('pointerup'); + sprite.off('pointermove'); + sprite.off('pointerdown'); + sprite.off('pointerover'); + sprite.off('pointerout'); + sprite.off('click'); + + sprite.on("click", (event) => { + setSpriteSettings(sprite); + }); + + sprite.on('pointerover', onSpriteMouseOver); + sprite.on('pointermove', onSpriteMouseMove); + sprite.on('pointerout', onSpriteMouseOut); +} + +const createSpriteTooltip = (sprite) => { + const style = new PIXI.TextStyle({ + fontFamily: 'Roboto', + fontSize: 12, + fill: themeMode === 'light' ? '#000' : '#eee', + }); + const text = new PIXI.Text(`${sprite.data?.type} ${sprite.data?.no}`, style); + const background = new PIXI.Graphics(); + // shadow + background.beginFill(themeMode === 'light' ? '#000' : '#eee', 0.1); + background.drawRoundedRect(4, 4, text.width + 6, text.height + 6, 4); + background.endFill(); + // background + background.beginFill(themeMode === 'light' ? '#fff' : '#333', 1); + background.drawRoundedRect(0, 0, text.width + 8, text.height + 8, 4); + background.endFill(); + + text.x = 5; + text.y = 3; + background.addChild(text); + tooltip = new PIXI.Container(); + tooltip.name = "tooltip"; + tooltip.addChild(background); + return tooltip; +} + +function onSpriteMouseOver(event) { + if (tooltip) { + app?.stage.removeChild(tooltip); + } + tooltip = createSpriteTooltip(this);// this => sprite + tooltip.x = event.data.global.x + 10; + tooltip.y = event.data.global.y + 10; + app.stage.addChild(tooltip); +} + +function onSpriteMouseMove(event) { + if (tooltip) { + tooltip.x = event.data.global.x + 10; + tooltip.y = event.data.global.y + 10; + } +} + +function onSpriteMouseOut() { + if (tooltip && tooltip.parent) { + tooltip.parent?.removeChild(tooltip); + tooltip = null; + } +} + +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 = () => { @@ -260,78 +423,111 @@ if (!sprite?.texture || !sprite?.texture?.valid) { return; } + const { width, height } = sprite; - const scale = sprite.scale.x; - const sideLen = (Math.max(width, height) + 10) * scale; - const color = themeMode === 'light' ? 0x273c75 : 0xffffff; + const maxDimension = Math.max(width, height); + const radius = (maxDimension / 2) + (DEVICE_SELECTED_EFFECT_PADDING[sprite.data?.type] || 10); - effectHalfCircle = new PIXI.Graphics(); - effectHalfCircle.beginFill(color); - effectHalfCircle.lineStyle(2 * scale, color); - effectHalfCircle.arc(0, 0, sideLen, 0, Math.PI); - effectHalfCircle.endFill(); - effectHalfCircle.position.set(sprite.x, sprite.y); - effectHalfCircle.scale.set(1 / scale); - effectHalfCircle.zIndex = 9999; + let color; + const spriteEffectColor = DEVICE_SELECTED_EFFECT_COLOR[sprite.data?.type]; + if (spriteEffectColor) { + color = spriteEffectColor; + } else { + color = themeMode === 'light' ? '#747d8c' : '#718093'; + } - effectRectangle = new PIXI.Graphics(); - effectRectangle.lineStyle(5 * scale, color, 1); - effectRectangle.drawRoundedRect(0, 0, sideLen, sideLen, 16 * scale); - effectRectangle.endFill(); - effectRectangle.mask = effectHalfCircle; - effectRectangle.zIndex = 9999; + const alpha = 1; - const scaledWidth = sideLen * (1 / scale); - const scaledHeight = sideLen * (1 / scale); + effectCircle = new PIXI.Graphics(); + effectCircle.beginFill(color, alpha); + effectCircle.drawCircle(0, 0, radius); + effectCircle.endFill(); + effectCircle.position.set(sprite.x, sprite.y); + effectCircle.zIndex = -1; + effectCircle.blendMode = PIXI.BLEND_MODES.NORMAL; - effectRectangle.scale.set(1 / scale); - effectRectangle.position.set(sprite.x - scaledWidth / 2, sprite.y - scaledHeight / 2); - - mapContainer.addChild(effectRectangle); - mapContainer.addChild(effectHalfCircle); + mapContainer.addChild(effectCircle); selectedSprite = sprite; - let phase = 0; - effectTick = (delta) => { - phase += delta / 10; - phase %= (Math.PI * 2); - if (effectHalfCircle) { - effectHalfCircle.rotation = phase; + let pulseScale = 1; + let scalingUp = true; + effectTicker = (delta) => { + const pulseSpeed = 0.003 * delta; + if (scalingUp) { + pulseScale += pulseSpeed; + if (pulseScale >= 1.1) { + scalingUp = false; + } + } else { + pulseScale -= pulseSpeed; + if (pulseScale <= 1) { + scalingUp = true; + } } + effectCircle.scale.set(pulseScale); + effectCircle.position.set(sprite.x, sprite.y); }; - app.ticker.add(effectTick); -} + app.ticker.add(effectTicker); +}; export const removeSelectedEffect = () => { - if (effectTick) { - app.ticker.remove(effectTick); + if (effectTicker) { + app.ticker.remove(effectTicker); + effectTicker = null; } - if (effectHalfCircle) { - mapContainer.removeChild(effectHalfCircle); - effectHalfCircle = null; - } - if (effectRectangle) { - mapContainer.removeChild(effectRectangle); - effectRectangle = null; + if (effectCircle) { + mapContainer?.removeChild(effectCircle); + effectCircle = null; } selectedSprite = null; +}; + +export const updateEffect = () => { + if (!selectedSprite || !effectCircle) { + return; + } + effectCircle.position.set(selectedSprite.x, selectedSprite.y); +}; + +export const showRoutes = (curZone, setShowRoutes) => { + setShowRoutes(true); + getRouteList(curZone, (routeList) => { + routeList.forEach(route => { + const startPoint = querySprite(DEVICE_TYPE.POINT, route.startCodeStr); + const endPoint = querySprite(DEVICE_TYPE.POINT, route.endCodeStr); + const pointRoute = new PointRoute(POINT_ROUTE_DIRECTION[route.direction]); + pointRoute.setPoint(startPoint, endPoint); + pointRoute.clear(); + pointRoute.lineStyle(Math.max(7, 2 * (1 / mapContainer.scale.x)), themeMode === 'light' ? '#ced6e0' : '#535c68'); + pointRoute.moveTo(startPoint.position.x, startPoint.position.y); + pointRoute.lineTo(endPoint.position.x, endPoint.position.y); + pointRoute.alpha = 1; + mapContainer.addChild(pointRoute); + }) + }) +}; + +export const hideRoutes = (curZone, setShowRoutes) => { + setShowRoutes(false); + for (let i = mapContainer.children.length - 1; i >= 0; i--) { + const child = mapContainer.children[i]; + if (child?.type === DEVICE_TYPE.ROUTE) { + mapContainer.removeChild(child); + } + } } -export const updateEffect = (sprite) => { - if (!sprite || sprite !== selectedSprite || !effectRectangle || !effectHalfCircle) { - return +export const multipleSelectEnhancer = (selectedSprites, setCurSprite, setBatchSprites) => { + selectedSprites = selectedSprites.filter(sprite => sprite.data?.type); + + if (selectedSprites.length === 1) { + unMarkSprite(selectedSprites[0]); + setCurSprite(selectedSprites[0]); + } else { + setBatchSprites(selectedSprites); } - const { width, height } = sprite; - const scale = sprite?.scale.x; - const sideLen = (Math.max(width, height) + 10) * scale; - const scaledWidth = sideLen * (1 / scale); - const scaledHeight = sideLen * (1 / scale); - - effectRectangle.position.set(sprite.x - scaledWidth / 2, sprite.y - scaledHeight / 2); - - effectHalfCircle.position.set(sprite.x, sprite.y); } export const rotationToNum = (rotation) => { @@ -345,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+)/); @@ -375,4 +602,160 @@ parentElement.style.paddingLeft = param; parentElement.style.paddingRight = param; } -} \ No newline at end of file +} + + +// 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) => { + 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, battery, backpack } = agvVo; + if (!code) { return; } + const codeSprite = querySprite(DEVICE_TYPE.POINT, code); + 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) { + 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 = targetRotation + agvRotationOffset; + mapContainer.addChild(agvSprite); + beInsight(agvSprite, setCurSprite); + + // 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) + .to({ + x: codeSprite.position.x, + y: codeSprite.position.y + }, 1000) + .easing(TWEEDLE.Easing.Linear.None) + .start(); +} + +const drawerAgvPath = (curZone, agvVo) => { + if (!mapContainer) { + return; + } + const { agvNo, code: curCode, dynamicRoute } = agvVo; + + const agvPathName = 'agvPath-' + agvNo; + let agvPath = mapContainer.getChildByName(agvPathName); + if (agvPath) { + mapContainer.removeChild(agvPath); + } + agvPath = new PIXI.Graphics(); + 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; + + let firstNode = true; + for (let i = Math.max(0, dynamicRoute.indexOf(curCode)); i < dynamicRoute.length; i++) { + const node = dynamicRoute[i]; + const codeSprite = querySprite(DEVICE_TYPE.POINT, node); + if (!codeSprite) { continue }; + const { x, y } = codeSprite.position; + if (firstNode) { + agvPath.moveTo(x, y); + firstNode = false; + } else { + agvPath.lineTo(x, y); + } + } + + mapContainer.addChild(agvPath); +} -- Gitblit v1.9.1