| | |
| | | |
| | | const Warehouse = (props) => { |
| | | |
| | | const [agvData, setAgvData] = useState([ |
| | | {} |
| | | ]); |
| | | const [boxData, setBoxData] = useState([]) |
| | | const [agv1Data, setAgv1Data] = useState({}); |
| | | const [agv2Data, setAgv2Data] = useState({}); |
| | | const [boxData, setBoxData] = useState([]); |
| | | |
| | | useEffect(() => { |
| | | const websocket = new WebSocketClient('/ws/digitalTwin/websocket'); |
| | | websocket.connect(); |
| | | // websocket.onMessage = (data) => { |
| | | // Utils.updateMapStatusInRealTime(data, () => curFloorRef.current, setCurSPrite); |
| | | // } |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | |
| | | const timer = setInterval(() => { |
| | | getBoxData().then(res => { |
| | |
| | | // console.log(res); |
| | | setBoxData(res); |
| | | }) |
| | | |
| | | getAgvData().then(res => { |
| | | // console.log(JSON.stringify(res)) |
| | | if (res && res.length > 0) { |
| | | setAgvData(res); |
| | | } |
| | | }) |
| | | |
| | | const agvRealData = agvRealDataList[index]; |
| | | if (agvRealData) { |
| | | // setAgvData(agvRealData); |
| | | } |
| | | index++; |
| | | }, INTERVAL_TIME); |
| | | |
| | | return () => { |
| | | if (timer) { |
| | | clearInterval(timer); |
| | | } |
| | | |
| | | |
| | | if (websocket) { |
| | | websocket.onMessage = (data) => {} |
| | | websocket.onMessage = (data) => { } |
| | | websocket.close(); |
| | | } |
| | | } |
| | |
| | | return boxData.map((data, idx) => <Box key={idx} {...data} />) |
| | | }, [boxData]); |
| | | |
| | | const agvEl = useMemo(() => { |
| | | return agvData.map((data, idx) => <Agv key={idx} {...data} />) |
| | | }, [agvData]); |
| | | const agv1El = useMemo(() => { |
| | | return <Agv key={1} {...agv1Data} /> |
| | | }, [agv1Data]); |
| | | |
| | | const agv2El = useMemo(() => { |
| | | return <Agv key={2} {...agv2Data} /> |
| | | }, [agv2Data]); |
| | | |
| | | |
| | | useFrame((state, delta) => { |
| | |
| | | {tunnelEl} |
| | | {areaEl} |
| | | {shelfEl} |
| | | {agvEl} |
| | | {agv1El} |
| | | {agv2El} |
| | | {boxEl} |
| | | </group> |
| | | </> |