#

luxiaotao1123

2024-08-20 01883c7d5eca26efb7f844773cae50e5154b9f8b

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
125
126
127
128
129
130
131
132
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 [path1Data, setPath1Data] = 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') {
                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 () => {
            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 path1El = useMemo(() => {
        return <Path list={path1Data} />
    }, [path1Data])
 
    useFrame((state, delta) => {
 
    })
 
    return (
        <>
            <group>
                {tunnelEl}
                {areaEl}
                {shelfEl}
                {agv1El}
                {agv2El}
                {boxEl}
                {path1El}
            </group>
        </>
    )
}
 
export default Warehouse;