From de6a34c248036d65a3d6797c83e051acdeb78bf7 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期一, 21 十月 2024 15:18:33 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/tool.js | 107 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 99 insertions(+), 8 deletions(-) diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index 05c3f3c..ade4711 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -7,7 +7,11 @@ 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'; @@ -48,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]); + // } + // } + // }) + } } @@ -105,7 +124,8 @@ default: break; } - DEVICE_SPRITE_TINT[deviceType] != null && (sprite.tint = DEVICE_SPRITE_TINT[deviceType]); + 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; @@ -304,16 +324,16 @@ const style = new PIXI.TextStyle({ fontFamily: 'Roboto', fontSize: 12, - fill: '#000000', + 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(0x000000, 0.1); + background.beginFill(themeMode === 'light' ? '#000' : '#eee', 0.1); background.drawRoundedRect(4, 4, text.width + 6, text.height + 6, 4); background.endFill(); // background - background.beginFill(0xffffff, 1); + background.beginFill(themeMode === 'light' ? '#fff' : '#333', 1); background.drawRoundedRect(0, 0, text.width + 8, text.height + 8, 4); background.endFill(); @@ -321,11 +341,15 @@ 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; @@ -467,6 +491,34 @@ 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, 1.5 * (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 multipleSelectEnhancer = (selectedSprites, setCurSprite, setBatchSprites) => { selectedSprites = selectedSprites.filter(sprite => sprite.data?.type); @@ -569,14 +621,16 @@ export const generateDynamicGraphic = (curZone, data, setCurSprite) => { // console.log("ws", curZone, data); - for (const agv of data.agvVos) { - showAgvSprite(curZone, agv, setCurSprite) + for (const agvVo of data.agvVos) { + // console.log(agvVo); + showAgvSprite(curZone, agvVo, setCurSprite); + drawerAgvPath(curZone, agvVo); } } -const showAgvSprite = (curZone, agv, setCurSprite) => { - const { agvNo, code, direction, backpack, battery, ...rest } = agv; +const showAgvSprite = (curZone, agvVo, setCurSprite) => { + const { agvNo, code, direction, backpack, dynamicRoute, battery, ...rest } = agvVo; if (!code) { return } const codeSprite = querySprite(DEVICE_TYPE.POINT, code); if (!codeSprite) { return } @@ -593,4 +647,41 @@ beInsight(agvSprite, setCurSprite); // agv no on sprite } +} + +const drawerAgvPath = (curZone, agvVo) => { + if (!mapContainer) { + return; + } + const { agvNo, code: curCode, dynamicRoute } = agvVo; + if (dynamicRoute?.length <= 1) { + return; + } + + 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); } \ No newline at end of file -- Gitblit v1.9.1