#

luxiaotao1123

2024-08-20 f97ee12c96d96e2f529e4248695d643245ec4243

 src/core/warehouse.jsx

@@ -1,49 +1,114 @@
import { useState, useEffect, useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
import Agv from '../components/agv';
import Box from '../components/box';
import tunnelData from '../assets/data/tunnel';
import WebSocketClient from './websocket'
import Tunnel from '../components/tunnel';
import Area from '../components/area';
import Shelf from '../components/shelf';
import Box from '../components/box';
import Agv from '../components/agv';
import Path from '../components/path'

import tunnelData from '@/assets/data/tunnel';
import areaData from '@/assets/data/area';
import shelfData from '@/assets/data/shelf';
import agvRealDataList from '@/assets/data/agv';
import { getBoxData } from '../api/box';
import { getAgvData } from '../api/agv';
import { INTERVAL_TIME } from '@/config/setting'

let index = 0;

const Warehouse = (props) => {

    const [agvData, setAgvData] = useState([
        {}
    ]);
    const [boxData, setBoxData] = useState([
        {}
    ])
    const [agv1Data, setAgv1Data] = useState({});
    const [agv2Data, setAgv2Data] = useState({});
    const [boxData, setBoxData] = useState([]);
    const [path1Data, setPath1Data] = useState([]);

    useEffect(() => {
        const timer = setInterval(() => {
            const agvRealData = agvRealDataList[index];
            if (agvRealData) {
                setAgvData(agvRealData);
        const websocket = new WebSocketClient('/ws/digitalTwin/websocket');
        websocket.connect();
        websocket.onMessage = (jsonStr) => {
            const data = JSON.parse(jsonStr);
            if (data.type === 'agv') {
                switch (data.no) {
                    case "1":
                        setAgv1Data(data.obj);
                        break;
                    case "2":
                        setAgv2Data(data.obj);
                        break;
                    default:
                        break;
                }
            }
            index++;
        }, INTERVAL_TIME * 1.1);
            if (data.type === 'path') {
                switch (data.no) {
                    case "1":
                        setPath1Data(data.obj);
                        break;
                    case "2":
                        break;
                    default:
                        break;
                }
            }
        }

        const timer = setInterval(() => {
            getBoxData().then(res => {
                // res.push({
                //     locNo: "A100301001",
                //     row: 3,
                //     bay: 1,
                //     lev: 1,
                //     locSts: "STOCK",
                // })
                // console.log(res);
                setBoxData(res);
            })
        }, INTERVAL_TIME);

        return () => {
            clearInterval(timer);
            if (timer) {
                clearInterval(timer);
            }

            if (websocket) {
                websocket.onMessage = (data) => { }
                websocket.close();
            }
        }
    }, [])

    const tunnelEl = useMemo(() => {
        return tunnelData.map((tunnel, index) => <Tunnel key={index} {...tunnel} />)
        return tunnelData.map((data, index) => <Tunnel key={index} {...data} />)
    }, []);

    const agvEl = useMemo(() => {
        return agvData.map((data, idx) => <Agv key={idx} {...data} />)
    }, [agvData]);
    const areaEl = useMemo(() => {
        return areaData.map((area, index) => <Area key={index} {...area} />)
    }, []);

    const shelfEl = useMemo(() => {
        return shelfData.map((data, index) => <Shelf key={index} {...data} />)
    }, []);

    const boxEl = useMemo(() => {
        return boxData.map((data, idx) => <Box key={idx} {...data} />)
    }, [boxData]);

    const agv1El = useMemo(() => {
        return <Agv key={1} {...agv1Data} />
    }, [agv1Data]);

    const agv2El = useMemo(() => {
        return <Agv key={2} {...agv2Data} />
    }, [agv2Data]);

    const path1El = useMemo(() => {
        return <Path list={path1Data} />
    }, [path1Data])

    useFrame((state, delta) => {

@@ -53,8 +118,12 @@
        <>
            <group>
                {tunnelEl}
                {agvEl}
                {areaEl}
                {shelfEl}
                {agv1El}
                {agv2El}
                {boxEl}
                {path1El}
            </group>
        </>
    )