From f51029f35beb182ed442e9d211fc39112ed6a5c0 Mon Sep 17 00:00:00 2001
From: zhang <zc857179121@qq.com>
Date: 星期一, 16 六月 2025 17:01:19 +0800
Subject: [PATCH] 1

---
 zy-acs-flow/src/map/tool.js |  523 +++++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 429 insertions(+), 94 deletions(-)

diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js
index 8ef7d0b..5dc1e83 100644
--- a/zy-acs-flow/src/map/tool.js
+++ b/zy-acs-flow/src/map/tool.js
@@ -1,10 +1,21 @@
 import * as PIXI from 'pixi.js';
 import * as TWEEDLE from 'tweedle.js';
 import {
+    MAP_DEFAULT_ROTATION,
+    MAP_MIRROR,
     DEVICE_TYPE,
     DEVICE_Z_INDEX,
     AGV_STATUS_MODE,
+    DEVICE_SPRITE_TINT,
+    DEVICE_SPRITE_TINT_DARK,
+    DEVICE_SELECTED_EFFECT_PADDING,
+    DEVICE_SELECTED_EFFECT_COLOR,
+    POINT_ROUTE_DIRECTION,
+    ANIMATE_DURING_TIME,
+    AGV_ANGLE_OFFSET_VAL,
 } from './constants';
+import { getRouteList } from './http';
+import PointRoute from "./PointRoute";
 
 import shelf from '/map/shelf.svg';
 import charge from '/map/charge.svg';
@@ -20,7 +31,8 @@
 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;
@@ -44,18 +56,29 @@
 
 export function setThemeMode(param) {
     themeMode = param;
+    if (mapContainer) {
+        mapContainer.children.forEach(child => {
+            const deviceType = child.data?.type;
+            if (deviceType) {
+                if (themeMode === 'dark') {
+                    DEVICE_SPRITE_TINT_DARK[deviceType] != null && (child.tint = DEVICE_SPRITE_TINT_DARK[deviceType]);
+                } else {
+                    DEVICE_SPRITE_TINT[deviceType] != null && (child.tint = DEVICE_SPRITE_TINT[deviceType]);
+                }
+            }
+        })
+    }
 }
 
 
 export const getRealPosition = (x, y) => {
-    const rect = app.view.getBoundingClientRect();
-    return {
-        mapX: (x - rect.left) / mapContainer.scale.x - mapContainer.x / mapContainer.scale.x,
-        mapY: (y - rect.top) / mapContainer.scale.y - mapContainer.y / mapContainer.scale.y
-    }
+    const globalPoint = new PIXI.Point();
+    app.renderer.plugins.interaction.mapPositionToPoint(globalPoint, x, y);
+    const mapPoint = mapContainer.toLocal(globalPoint);
+    return { mapX: mapPoint.x, mapY: mapPoint.y };
 }
 
-export const generateSprite = (deviceType, source) => {
+export const generateSprite = (deviceType, texture) => {
     let sprite;
     switch (deviceType) {
         case DEVICE_TYPE.SHELF:
@@ -85,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 = 750;
+            sprite.height = 1300;
             sprite.zIndex = DEVICE_Z_INDEX.AGV;
             break
         case DEVICE_TYPE.POINT:
@@ -101,6 +124,9 @@
         default:
             break;
     }
+    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;
     }
@@ -147,16 +173,17 @@
         let batchMoveStartPos = null;
 
         const batchMoving = (event) => {
-            const scale = mapContainer.scale.x;
+            const scaleX = mapContainer.scale.x;
+            const scaleY = mapContainer.scale.y;
             if (batchMove && batchMoveStartPos) {
                 // offset move val
                 var mouseMovement = {
-                    x: (event.global.x - batchMoveStartPos.x) / scale,
-                    y: (event.global.y - batchMoveStartPos.y) / scale
+                    x: (event.global.x - batchMoveStartPos.x) / scaleX,
+                    y: (event.global.y - batchMoveStartPos.y) / scaleY
                 };
                 for (let sprite of selectedSprites) {
-                    sprite.position.x = sprite.batchMoveStartPos.x + mouseMovement.x;
-                    sprite.position.y = sprite.batchMoveStartPos.y + mouseMovement.y;
+                    sprite.position.x = sprite.batchMoveStartPos.x - mouseMovement.x;
+                    sprite.position.y = sprite.batchMoveStartPos.y - mouseMovement.y;
                 }
             }
         }
@@ -218,23 +245,30 @@
 }
 
 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);
-
-    function onClick(event) {
+    sprite.on("click", (event) => {
         setCurSprite(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);
@@ -269,15 +303,71 @@
 }
 
 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", onClick);
-
-    function onClick(event) {
+    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;
     }
 }
 
@@ -286,7 +376,8 @@
         return;
     }
 
-    mapContainer.scale.set(0.3);
+    const focusScale = 0.1;
+    mapContainer.scale.set(MAP_MIRROR ? -focusScale : focusScale, focusScale);
     mapContainer.position.set(0, 0);
 
     let bounds = sprite.getBounds();
@@ -334,78 +425,124 @@
     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, setLoading) => {
+    setLoading(true);
+    getRouteList(
+        curZone,
+        (routeList) => {
+            routeList.forEach(route => {
+                const startPoint = querySprite(DEVICE_TYPE.POINT, route.startCodeStr);
+                const endPoint = querySprite(DEVICE_TYPE.POINT, route.endCodeStr);
+                if (!startPoint || !endPoint) {
+                    console.error("route", route)
+                    console.error("start", startPoint)
+                    console.error("end", endPoint)
+                }
+                const pointRoute = new PointRoute(POINT_ROUTE_DIRECTION[route.direction]);
+                pointRoute.setPoint(startPoint, endPoint);
+                pointRoute.clear();
+                pointRoute.lineStyle(Math.max(7, 2 * (1 / Math.abs(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);
+            })
+            setLoading(false);
+            setShowRoutes(true);
+        },
+        () => {
+            setLoading(false);
+        },
+    )
+};
+
+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) => {
@@ -419,8 +556,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 }, ANIMATE_DURING_TIME)
+        .easing(TWEEDLE.Easing.Linear.None)
+        .onUpdate(() => {
+            // agv
+            if (sprite.updateTextRotation) {
+                sprite.updateTextRotation();
+            }
+        })
+        .start();
+};
 
 export const incrementSpriteNo = (str, incrementValue) => {
     const match = str.match(/(\D*)(\d+)/);
@@ -493,34 +661,201 @@
     }
 }
 
+export function createAgvJobPanel(parentContainer, text) {
+    const panelScale = 4;
+
+    const panel = new PIXI.Container();
+
+    const sideLen = 50 * panelScale;
+    const halfCircle = new PIXI.Graphics();
+    halfCircle.beginFill(themeMode === 'light' ? '#333333' : '#eee');
+    halfCircle.lineStyle(2 * panelScale, themeMode === 'light' ? '#333333' : '#eee');
+    halfCircle.arc(0, 0, sideLen, 0, Math.PI);
+    halfCircle.endFill();
+
+    const rectangle = new PIXI.Graphics();
+    rectangle.lineStyle(2 * panelScale, themeMode === 'light' ? '#333333' : '#eee', .8);
+    rectangle.drawRoundedRect(
+        -sideLen / 2,   // 宸︿笂瑙� x
+        -sideLen / 2,   // 宸︿笂瑙� y
+        sideLen,       // 瀹�
+        sideLen - (20 * panelScale),  // 楂� (鐣欎竴鐐圭┖闂达紝鐪嬭捣鏉ユ洿鍍忓崐鍦嗗鍣�)
+        16 * panelScale             // 鍦嗚
+    );
+    rectangle.endFill();
+    rectangle.mask = halfCircle;
+
+    panel.addChild(rectangle, halfCircle);
+
+    const msg = new PIXI.Text(text, {
+        fill: themeMode === 'light' ? '#2b2b2b' : '#eee',
+        fontSize: 12 * panelScale,
+        fontFamily: 'MicrosoftYaHei',
+        fontWeight: 'bolder',
+        align: 'center',
+    });
+    msg.anchor.set(0.5);
+    msg.position.set(0, -10 * panelScale);
+
+    panel.addChild(msg);
+    parentContainer.addChild(panel);
+
+    let phase = 0;
+    function onTick(delta) {
+        phase += delta / 6;  // 鏃嬭浆閫熷害鍙皟
+        phase %= (Math.PI * 2);
+        halfCircle.rotation = phase;
+    }
+    app.ticker.add(onTick);
+
+    panel._onTick = onTick;
+    return panel;
+}
 
 // dynamic graphic ----------------
 
 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) {
+        showAgvSprite(curZone, agvVo, setCurSprite);
+        drawerAgvPath(curZone, agvVo);
     }
-
 }
 
-const showAgvSprite = (curZone, agv, setCurSprite) => {
-    const { agvNo, code, direction, backpack, battery, ...rest } = agv;
-    if (!code) { return }
+const agvRotationOffset = rotationParseNum(AGV_ANGLE_OFFSET_VAL);
+
+const showAgvSprite = (curZone, agvVo, setCurSprite) => {
+    const { agvNo, code, direction, battery, jobType, backpack: backpackCount, slots, error } = 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))
-        );
+        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: 50,
+            fill: 0x000000,
+        });
+        agvText.anchor.set(0.5, 0.5);
+        agvText.position.set(0, 8);
+        agvText.scale.set(MAP_MIRROR ? -1 : 1, 1)
+        agvSprite.addChild(agvText);
+
+        agvSprite.updateTextRotation = () => {
+            if (agvText && agvSprite) {
+                agvText.rotation = -agvSprite.rotation - rotationParseNum(MAP_DEFAULT_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, agvRotationOffset);
     }
-}
\ No newline at end of file
+
+    // job effect
+    if (jobType) {
+        if (!agvSprite.data.jobEffect) {
+            agvSprite.data.jobEffect = createAgvJobPanel(agvSprite, jobType + " (" + backpackCount + "/" + slots + ")");
+            agvSprite.data.jobEffect.x = -80;
+            agvSprite.data.jobEffect.y = 0;
+        }
+        if (agvSprite.data.jobEffect) {
+            agvSprite.data.jobEffect.rotation = -agvSprite.rotation - rotationParseNum(MAP_DEFAULT_ROTATION);
+        }
+    } else {
+        if (agvSprite.data.jobEffect) {
+            app.ticker.remove(agvSprite.data.jobEffect._onTick);
+            agvSprite.removeChild(agvSprite.data.jobEffect);
+            agvSprite.data.jobEffect.destroy(true);
+            agvSprite.data.jobEffect = null;
+        }
+    }
+
+    if (error) {
+        agvSprite.tint = 0xff3f34;
+    } else {
+        agvSprite.tint = themeMode === 'dark'
+            ? DEVICE_SPRITE_TINT_DARK[DEVICE_TYPE.AGV]
+            : DEVICE_SPRITE_TINT[DEVICE_TYPE.AGV];
+    }
+
+    beInsight(agvSprite, setCurSprite);
+
+    new TWEEDLE.Tween(agvSprite.position)
+        .to({
+            x: codeSprite.position.x,
+            y: codeSprite.position.y
+        }, ANIMATE_DURING_TIME)
+        .easing(TWEEDLE.Easing.Linear.None)
+        .start();
+}
+
+const drawerAgvPath = (curZone, agvVo) => {
+    if (!mapContainer) {
+        return;
+    }
+    const { agvNo, code: curCode, dynamicRoute } = agvVo;
+    if (!dynamicRoute || dynamicRoute.indexOf(curCode) === -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(200, 4 * (1 / mapContainer?.scale.x || 1)),
+        themeMode === 'dark' ? 0x40739e : 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