#

luxiaotao1123

2024-08-20 4bef71e0cf39ab5f2db45c147d6ab7bbc80e756c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { useState, useEffect, useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
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 [agv1Data, setAgv1Data] = useState({});
    const [agv2Data, setAgv2Data] = useState({});
    const [boxData, setBoxData] = useState([]);
    const [pathData, setPathData] = useState([]);
 
    useEffect(() => {
        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;
                }
            }
            if (data.type === 'path') {
                setPathData(data.obj);
            }
        }
 
        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 () => {
            if (timer) {
                clearInterval(timer);
            }
 
            if (websocket) {
                websocket.onMessage = (data) => { }
                websocket.close();
            }
        }
    }, [])
 
    const tunnelEl = useMemo(() => {
        return tunnelData.map((data, index) => <Tunnel key={index} {...data} />)
    }, []);
 
    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 pathEl = useMemo(() => {
        return pathData.map((data, idx) => <Path key={idx} list={data} />)
    }, [pathData])
 
    useFrame((state, delta) => {
 
    })
 
    return (
        <>
            <group>
                {tunnelEl}
                {areaEl}
                {shelfEl}
                {agv1El}
                {agv2El}
                {boxEl}
                {pathEl}
            </group>
        </>
    )
}
 
export default Warehouse;