#

luxiaotao1123

2024-04-03 f69c6c78bd95e38773b17a45da5e6bde17bdcee2

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

@@ -1,28 +1,174 @@
import React, { useState, useRef, useEffect } from 'react';
import { Card, Form, Button } from 'antd';
import * as THREE from 'three'
import { Spin, Descriptions, Button } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { LoadingOutlined } from '@ant-design/icons';
import { createStyles } from 'antd-style';
import * as Utils from '../../utils'
import Http from '@/utils/http';
import ShelfThree from './shelfThree'

const useStyles = createStyles(({ token, css }) => {

    return {
        infoBox: {
            height: '100%',
            display: 'flex',
            gap: '0px',
        },
        threeInfo: {
            height: '100%',
            width: '60%',
        },
        spinWrapper: {
            height: '100%',
        },
        threeContainer: {
            zIndex: 99,
            width: '100%',
            height: '100%',
        },
        tableInfo: {
            height: '100%',
            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 fetchShelfInfo = async (locNo) => {
    const res = await Http.doGet('/api/map/shelf/info', { locNo: locNo });
    if (res?.data && shelfThree) {
        shelfThree.generateMesh((addObject) => {
            for (const item of res.data) {
                const { row, bay, lev } = Utils.parseLocNo(item.locNo);
                // shelf
                const shelfMesh = new THREE.Mesh(new THREE.BoxGeometry(100, 40, 100), new THREE.MeshStandardMaterial({
                    color: '#006266',
                }));
                shelfMesh.name = item.locNo;
                shelfMesh.position.set(0, 20 + 100 * (lev - 1), 0);
                addObject(shelfMesh)

                // pallet
                const palletMesh = new THREE.Mesh(new THREE.BoxGeometry(100, 60, 100), new THREE.MeshStandardMaterial({
                    color: '#2c2c54',
                }));
                palletMesh.name = item.locNo;
                palletMesh.position.set(0, 70 + 100 * (lev - 1), 0);
                addObject(palletMesh)
            }
        }).then(() => {
            shelfThree.setNewSelectedMesh(locNo);
        });
    }
}

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

    const refContainer = useRef();

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

    }, []);
    useEffect(() => {
        // init curLocNo
        const originLocNo = data.no + '-' + curFloor;
        setCurLocNo(originLocNo);

        endThree();
        setLoading(true);

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

        return endThree;
    }, [data]);

    return (
        <>
           <div style={{zIndex: 99}} ref={refContainer}></div>
            <h1>{props.data.uuid}</h1>
            <div className={styles.infoBox}>
                <div className={`${styles.threeInfo} three-spin`}>
                    <Spin
                        spinning={loading}
                        indicator={<LoadingOutlined spin />}
                        size={'large'}
                        wrapperClassName={styles.spinWrapper}
                    >
                        <div ref={refContainer} className={styles.threeContainer}></div>
                    </Spin>
                </div>
                <div className={styles.tableInfo}>
                    <Descriptions
                        bordered
                        layout="vertical"
                        column={1}
                        items={
                            [
                                {
                                    key: '1',
                                    label: intl.formatMessage({ id: 'map.loc.no', defaultMessage: '库位号' }),
                                    children: curLocNo,
                                },
                                {
                                    key: '2',
                                    label: intl.formatMessage({ id: 'map.pallet.barcode', defaultMessage: '托盘条码' }),
                                    children: '80000010',
                                },
                                {
                                    key: '3',
                                    label: intl.formatMessage({ id: 'map.is.enable', defaultMessage: '是否启用' }),
                                    children: 'Disabled',
                                },
                                {
                                    key: '4',
                                    label: intl.formatMessage({ id: 'map.loc.operation', defaultMessage: '库位操作' }),
                                    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>
                                        </>
                                    )
                                },
                            ]
                        }
                    />
                </div>
            </div>
        </>
    )
}