From f97ee12c96d96e2f529e4248695d643245ec4243 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期二, 20 八月 2024 15:21:56 +0800 Subject: [PATCH] # --- src/core/warehouse.jsx | 99 +++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 79 insertions(+), 20 deletions(-) diff --git a/src/core/warehouse.jsx b/src/core/warehouse.jsx index 035b9f3..b8af939 100644 --- a/src/core/warehouse.jsx +++ b/src/core/warehouse.jsx @@ -1,40 +1,84 @@ 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 [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(); + } } }, []) @@ -42,17 +86,29 @@ 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 agvEl = useMemo(() => { - return agvData.map((data, idx) => <Agv key={idx} {...data} />) - }, [agvData]); - 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) => { @@ -62,9 +118,12 @@ <> <group> {tunnelEl} + {areaEl} {shelfEl} - {agvEl} + {agv1El} + {agv2El} {boxEl} + {path1El} </group> </> ) -- Gitblit v1.9.1