#path similarity

Junjie

2024-12-11 8ef2bb5e46d84594e6ed632c07ea0b47a1bf6c4d

 zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx

@@ -1,4 +1,5 @@
import React, { useState, useRef, useEffect } from 'react';
import * as THREE from 'three'
import { Spin, Descriptions, Button } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { LoadingOutlined } from '@ant-design/icons';
@@ -6,6 +7,7 @@
import * as Utils from '../../utils'
import Http from '@/utils/http';
import ShelfThree from './shelfThree'
import BoolValueIcon from '@/components/BoolValueIcon';

const useStyles = createStyles(({ token, css }) => {
    return {
@@ -31,40 +33,130 @@
            width: '40%',
            padding: '0 10px 0 15px',
            overflow: 'auto',
        },
        tableButton: {
            width: '100%',
            marginBottom: '10px',
            fontWeight: 'bold',
            letterSpacing: '1px',
        }
    }
})

let shelfThree;

const startThree = (dom) => {
    shelfThree = new ShelfThree(dom);
    shelfThree.startup();
}

const endThree = () => {
    if (shelfThree) {
        shelfThree.destroy();
        shelfThree = null;
    }
}

const fetchShelfGroup = async (locNo) => {
    const res = await Http.doGet('/api/map/shelf/group', { locNo: locNo });
    if (res?.data && shelfThree) {
        shelfThree.generateMesh((loader, addObject) => {
            const promises = [];
            const singleHeight = 123;
            for (const item of res.data) {
                const { lev } = Utils.parseLocNo(item.locNo);
                promises.push(new Promise((resolve) => {
                    loader.load('model/shelf.fbx', (mesh) => {
                        mesh.position.set(0, singleHeight * (lev - 1), 0);
                        mesh.scale.set(5, 5, 5);
                        mesh.name = item.locNo;
                        mesh.traverse(function (child) {
                            if (child.isMesh) {
                                if (child.name === '货架') {
                                    child.material.color.set(0x4680BF);
                                }
                                let palletVisible = true, cargoVisible = true;
                                switch (item.locSts) {
                                    case 'D':
                                        cargoVisible = false;
                                        break;
                                    case 'O':
                                        palletVisible = false;
                                        cargoVisible = false;
                                        break;
                                    default:
                                        break;
                                }
                                if (child.name === '托盘') {
                                    child.visible = palletVisible;
                                    child.material.color.set(0xBEBEBE);
                                }
                                if (child.name === '不规则') {
                                    child.visible = cargoVisible;
                                    child.material.color.set(0xE8B67E);
                                }
                                child.name = item.locNo
                                child.castShadow = true;
                                child.receiveShadow = true;
                            }
                        });
                        addObject(mesh);
                        resolve();
                    })
                }));
            }

            Promise.all(promises).then(() => {
                shelfThree.setNewSelectedMesh(locNo);
                shelfThree.rePerspective(singleHeight * res.data.length, 500);
            }).catch(error => {
                console.error(error);
            });
        })
    }
}

const ShelfView = (props) => {
    const intl = useIntl();
    const { styles } = useStyles();
    const refContainer = useRef();

    const { data, curFloor, curLocNo, setCurLocNo } = props;
    const [loading, setLoading] = React.useState(false);

    const startThree = () => {
        shelfThree = new ShelfThree(refContainer.current);
        shelfThree.startup();
    }

    const endThree = () => {
        if (shelfThree) {
            shelfThree.destroy();
            shelfThree = null;
        }
    }
    const [info, setInfo] = React.useState(null);

    useEffect(() => {
        setLoading(true);
        // init curLocNo
        const originLocNo = data.no + '-' + curFloor;
        setCurLocNo(originLocNo);

        endThree();
        setLoading(true);

        setTimeout(() => {
            startThree(refContainer.current);
            shelfThree.handleClick = (objName) => {
                setCurLocNo(objName);
            };
            fetchShelfGroup(originLocNo);
            setLoading(false);
            startThree();
        }, 300)

        return endThree;
    }, [props.data.uuid]);
    }, [data]);

    useEffect(() => {
        if (!curLocNo) {
            return;
        }
        const fetchShelfInfo = async (locNo) => {
            const res = await Http.doGet('/api/map/shelf/info', { locNo: locNo });
            if (res?.data) {
                setInfo(res.data);
            }
        }
        fetchShelfInfo(curLocNo);
    }, [curLocNo])

    return (
        <>
@@ -87,24 +179,36 @@
                        items={
                            [
                                {
                                    key: '1',
                                    label: intl.formatMessage({ id: 'map.loc.no', defaultMessage: '库位号' }),
                                    children: props.locNo,
                                    children: curLocNo,
                                },
                                {
                                    key: '2',
                                    label: intl.formatMessage({ id: 'map.loc.sts', defaultMessage: '库位状态' }),
                                    children: info?.locSts,
                                },
                                {
                                    label: intl.formatMessage({ id: 'map.pallet.barcode', defaultMessage: '托盘条码' }),
                                    children: '80000010',
                                    children: info?.zpallet,
                                },
                                {
                                    key: '3',
                                    label: intl.formatMessage({ id: 'map.is.enable', defaultMessage: '是否启用' }),
                                    children: 'Disabled',
                                    children: <BoolValueIcon value={info?.enable} />,
                                },
                                {
                                    key: '2',
                                    label: intl.formatMessage({ id: 'map.loc.operation', defaultMessage: '库位操作' }),
                                    children: <Button> submit</Button>,
                                    children: (
                                        <>
                                            <Button className={styles.tableButton} size='large' type="primary" danger>
                                                <FormattedMessage id='map.loc.lock' defaultMessage='锁定' />
                                            </Button>
                                            <Button className={styles.tableButton} size='large' disabled>
                                                <FormattedMessage id='map.loc.unlock' defaultMessage='解锁' />
                                            </Button>
                                            <Button className={styles.tableButton} size='large'>
                                                <FormattedMessage id='map.loc.reset' defaultMessage='清除库位' />
                                            </Button>
                                        </>
                                    )
                                },
                            ]
                        }