From bd6f16c7a6695606d7ebb5baa56eefe65b603cf2 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期二, 11 六月 2024 16:48:01 +0800 Subject: [PATCH] # --- src/core/warehouse.jsx | 99 ++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 88 insertions(+), 11 deletions(-) diff --git a/src/core/warehouse.jsx b/src/core/warehouse.jsx index 54a317e..b37c8ae 100644 --- a/src/core/warehouse.jsx +++ b/src/core/warehouse.jsx @@ -1,25 +1,98 @@ -import { useEffect, useRef, useMemo } from 'react'; +import { useState, useEffect, useRef, useMemo } from 'react'; import { useFrame } from '@react-three/fiber'; import * as THREE from 'three'; -import Agv from '../components/agv'; -import tunnelData from '../assets/data/tunnel'; +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 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) => { - useEffect(() => { + const [agv1Data, setAgv1Data] = useState({}); + const [agv2Data, setAgv2Data] = useState({}); + const [boxData, setBoxData] = 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; + } + } + } + + 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 agvEl = useMemo(() => { - return ( - <Agv /> - ) + const tunnelEl = useMemo(() => { + return tunnelData.map((data, index) => <Tunnel key={index} {...data} />) }, []); - const tunnelEl = useMemo(() => { - return tunnelData.map((tunnel, index) => <Tunnel key={index} {...tunnel} />) + 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]); + useFrame((state, delta) => { @@ -28,8 +101,12 @@ return ( <> <group> - {agvEl} {tunnelEl} + {areaEl} + {shelfEl} + {agv1El} + {agv2El} + {boxEl} </group> </> ) -- Gitblit v1.9.1