#

luxiaotao1123

2024-04-08 d6b3df3a92a6d1325926b98a49f1b22b77a8c71b

 zy-asrs-flow/src/pages/map/utils.js

@@ -12,7 +12,7 @@
let app = null;
let mapContainer = null;
let notify = null;
let effectTick, effectHalfCircle, effectRectangle;
let selectedSprite, effectTick, effectHalfCircle, effectRectangle;

export function syncApp(param) {
    app = param;
@@ -111,6 +111,17 @@
        type: type,
        uuid: generateID()
    };
}

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;
        }
    }
}

// show sprite feature from sprite click event
@@ -278,6 +289,8 @@
    mapContainer.addChild(effectRectangle);
    mapContainer.addChild(effectHalfCircle);

    selectedSprite = sprite;

    let phase = 0;
    effectTick = (delta) => {
        phase += delta / 10;
@@ -288,6 +301,21 @@
    };

    app.ticker.add(effectTick);
}

export const updateEffect = (sprite) => {
    if (!sprite || sprite !== selectedSprite || !effectRectangle || !effectHalfCircle) {
        return
    }
    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 removeSelectedEffect = () => {
@@ -302,6 +330,7 @@
        mapContainer.removeChild(effectRectangle);
        effectRectangle = null;
    }
    selectedSprite = null;
}

export const copySprite = (sprite) => {
@@ -585,5 +614,53 @@
}

export const updateMapStatusInRealTime = (data) => {
    console.log('map: ' + data);
    const mapVo = JSON.parse(data);
    // shuttle
    for (const shuttleVo of mapVo.shuttleVos) {

        const shuttle = querySprite(SENSOR_TYPE.SHUTTLE, shuttleVo.shuttleNo);
        if (!shuttle && !shuttleVo.curLocNo) { continue; }
        const { row, bay, lev } = parseLocNo(shuttleVo.curLocNo);
        const shelf = querySprite(SENSOR_TYPE.SHELF, row + '-' + bay);
        if (!shelf) { continue; }

        drawPreTravelPath(shuttleVo.preTravelPath)

        new TWEEDLE.Tween(shuttle?.position).easing(TWEEDLE.Easing.Linear.None).to({
            x: shelf.position.x,
            y: shelf.position.y
        }, 1000).onUpdate(() => {
            updateEffect(shuttle);
        }).start();
    }
}


export const drawPreTravelPath = (path) => {
    if (!mapContainer) {
        return;
    }

    let graphics = mapContainer.getChildByName('preTravelPath');
    if (graphics) mapContainer.removeChild(graphics);

    graphics = new PIXI.Graphics();
    graphics.name = 'preTravelPath';
    graphics.lineStyle(3 * (1 / mapContainer.scale.x), 0x3498db, 1);
    graphics.zIndex = 9999;
    for (let i = 0; i < path.length; i++) {
        const { row, bay, lev } = parseLocNo(path[i]);
        const shelf = querySprite(SENSOR_TYPE.SHELF, row + '-' + bay);

        if (!shelf) continue;
        let position = shelf.position;
        let x = position.x;
        let y = position.y;
        if (i === 0) {
            graphics.moveTo(x, y);
        } else {
            graphics.lineTo(x, y);
        }
    }
    mapContainer.addChild(graphics);
}