From 9d71e24e7982f6915e5f832512925bee9b245f35 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期二, 20 八月 2024 16:13:26 +0800 Subject: [PATCH] # --- src/core/warehouse.jsx | 84 +++++++++++++++++++++++++++++------------- 1 files changed, 58 insertions(+), 26 deletions(-) diff --git a/src/core/warehouse.jsx b/src/core/warehouse.jsx index bcad617..c9b74c3 100644 --- a/src/core/warehouse.jsx +++ b/src/core/warehouse.jsx @@ -1,11 +1,13 @@ 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'; @@ -19,30 +21,56 @@ const Warehouse = (props) => { - const [agvData, setAgvData] = useState([ - {} - ]); - const [boxData, setBoxData] = useState([]) + 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); }) - - // getAgvData().then(res => { - // setAgvData(res); - // }) - - const agvRealData = agvRealDataList[index]; - if (agvRealData) { - setAgvData(agvRealData); - } - index++; - }, INTERVAL_TIME * 1.1); + }, INTERVAL_TIME); return () => { - clearInterval(timer); + if (timer) { + clearInterval(timer); + } + + if (websocket) { + websocket.onMessage = (data) => { } + websocket.close(); + } } }, []) @@ -58,18 +86,21 @@ return shelfData.map((data, index) => <Shelf key={index} {...data} />) }, []); - const shelfEl1 = useMemo(() => { - return shelfData.slice(0, 1).map((data, index) => <Shelf key={index} {...data} />) - }, []); - const boxEl = useMemo(() => { 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]); + + const pathEl = useMemo(() => { + return pathData.map((data, idx) => <Path key={idx} list={data} />) + }, [pathData]) useFrame((state, delta) => { @@ -81,9 +112,10 @@ {tunnelEl} {areaEl} {shelfEl} - {/* {shelfEl1} */} - {agvEl} + {agv1El} + {agv2El} {boxEl} + {pathEl} </group> </> ) -- Gitblit v1.9.1