#

luxiaotao1123

2024-10-16 e80bda627f5deb30d4517a5509a77c6bfcdffcdd

#

 zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx

New file
@@ -0,0 +1,127 @@
import React, { useRef, useEffect, useState } from 'react';
import * as THREE from 'three';
import { useTranslate } from 'react-admin';
import {
    Box,
    CircularProgress,
    Grid,
    Typography,
    Paper,
    Button,
    Divider,
    Stack,
} from '@mui/material';
import ShelfThree from './ShelfThree';

const ShelfMain = (props) => {
    const { data, curFloor, curLocNo, setCurLocNo } = props;
    const translate = useTranslate();
    const containerRef = useRef();
    const [loading, setLoading] = useState(true);
    const [shelfThree, setShelfThree] = useState(null);
    const [info, setInfo] = useState(null);

    useEffect(() => {
        const initThree = () => {
            const shelfThreeInstance = new ShelfThree(containerRef.current);
            shelfThreeInstance.startup();
            shelfThreeInstance.handleClick = (objName) => {
                setCurLocNo(objName);
            };
            setShelfThree(shelfThreeInstance);
            setLoading(false);
            // Fetch initial data
            fetchShelfInfo(curLocNo);
        };

        initThree();

        return () => {
            if (shelfThree) {
                shelfThree.destroy();
            }
        };
    }, []);

    useEffect(() => {
        if (curLocNo) {
            fetchShelfInfo(curLocNo);
        }
    }, [curLocNo]);

    const fetchShelfInfo = async (locNo) => {
        // 假设有一个函数来获取货架信息
        const res = await fetchShelfData(locNo);
        if (res?.data) {
            setInfo(res.data);
        }
    };

    return (
        <Box display="flex" height="500px">
            <Box
                position="relative"
                width="60%"
                height="100%"
                ref={containerRef}
                style={{ backgroundColor: '#7a7a7a' }}
            >
                {loading && (
                    <Box
                        position="absolute"
                        top="50%"
                        left="50%"
                        style={{ transform: 'translate(-50%, -50%)' }}
                    >
                        <CircularProgress />
                    </Box>
                )}
            </Box>
            <Box width="40%" height="100%" overflow="auto" p={2}>
                <Paper elevation={3} style={{ padding: '16px' }}>
                    <Typography variant="h6" gutterBottom>
                        {translate('map.loc.no', { defaultMessage: '库位号' })}: {curLocNo}
                    </Typography>
                    <Divider />
                    <Grid container spacing={2} style={{ marginTop: '16px' }}>
                        <Grid item xs={12}>
                            <Typography variant="subtitle1">
                                {translate('map.loc.sts', { defaultMessage: '库位状态' })}
                            </Typography>
                            <Typography variant="body1">{info?.locSts}</Typography>
                        </Grid>
                        <Grid item xs={12}>
                            <Typography variant="subtitle1">
                                {translate('map.pallet.barcode', { defaultMessage: '托盘条码' })}
                            </Typography>
                            <Typography variant="body1">{info?.zpallet}</Typography>
                        </Grid>
                        <Grid item xs={12}>
                            <Typography variant="subtitle1">
                                {translate('map.is.enable', { defaultMessage: '是否启用' })}
                            </Typography>
                        </Grid>
                        <Grid item xs={12}>
                            <Typography variant="subtitle1">
                                {translate('map.loc.operation', { defaultMessage: '库位操作' })}
                            </Typography>
                            <Stack spacing={2} mt={2}>
                                <Button variant="contained" color="error" fullWidth>
                                    {translate('map.loc.lock', { defaultMessage: '锁定' })}
                                </Button>
                                <Button variant="contained" disabled fullWidth>
                                    {translate('map.loc.unlock', { defaultMessage: '解锁' })}
                                </Button>
                                <Button variant="contained" fullWidth>
                                    {translate('map.loc.reset', { defaultMessage: '清除库位' })}
                                </Button>
                            </Stack>
                        </Grid>
                    </Grid>
                </Paper>
            </Box>
        </Box>
    );
};

export default ShelfMain;

 zy-acs-flow/src/map/insight/shelf/ShelfThree.js

New file
@@ -0,0 +1,88 @@
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default class ShelfThree {
    constructor(container) {
        this.container = container;
        this.scene = null;
        this.camera = null;
        this.renderer = null;
        this.controls = null;
        this.animationFrameId = null;
    }

    startup() {
        this.initScene();
        this.initCamera();
        this.initRenderer();
        this.initControls();
        this.addLights();
        this.addObjects();
        this.animate();
        window.addEventListener('resize', this.onWindowResize, false);
    }

    initScene() {
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color(0x7a7a7a);
    }

    initCamera() {
        const width = this.container.clientWidth;
        const height = this.container.clientHeight;
        this.camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 1000);
        this.camera.position.set(0, 5, 10);
    }

    initRenderer() {
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
        this.container.appendChild(this.renderer.domElement);
    }

    initControls() {
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.enableDamping = true;
    }

    addLights() {
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        this.scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(5, 10, 7.5);
        this.scene.add(directionalLight);
    }

    addObjects() {
        // 在这里添加您的货架模型或其他对象
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshStandardMaterial({ color: 0x4680BF });
        const cube = new THREE.Mesh(geometry, material);
        this.scene.add(cube);
    }

    animate = () => {
        this.animationFrameId = requestAnimationFrame(this.animate);
        this.controls.update();
        this.renderer.render(this.scene, this.camera);
    };

    onWindowResize = () => {
        const width = this.container.clientWidth;
        const height = this.container.clientHeight;
        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(width, height);
    };

    destroy() {
        cancelAnimationFrame(this.animationFrameId);
        window.removeEventListener('resize', this.onWindowResize);
        this.controls.dispose();
        this.renderer.dispose();
        this.scene = null;
        this.camera = null;
        this.renderer.domElement.remove();
    }
}

 zy-acs-flow/src/map/insight/shelf/index.jsx

@@ -1,6 +1,7 @@
import React, { useState, useRef, useEffect } from 'react';
import { useTranslate } from "react-admin";
import { Box, Typography, Tabs, Tab, Stack, useTheme, Divider } from '@mui/material';
import ShelfMain from './ShelfMain';

const ShelfInsight = (props) => {
    const { } = props;
@@ -32,9 +33,8 @@

            <Box p={3}>
                {activeTab === 0 && (
                    <Box>
                        <h1>1</h1>
                    </Box>
                    <ShelfMain
                    />
                )}
                {activeTab === 1 && (
                    <Box>