From 01883c7d5eca26efb7f844773cae50e5154b9f8b Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 20 八月 2024 15:30:06 +0800
Subject: [PATCH] #
---
src/core/warehouse.jsx | 118 ++++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 92 insertions(+), 26 deletions(-)
diff --git a/src/core/warehouse.jsx b/src/core/warehouse.jsx
index 402571f..b8af939 100644
--- a/src/core/warehouse.jsx
+++ b/src/core/warehouse.jsx
@@ -1,52 +1,114 @@
import { useState, useEffect, useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
-import Agv from '../components/agv';
-import Box from '../components/box';
-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 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;
-let coords = { x: 0, y: 0, z: 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 agvRealData = agvRealDataList[0];
+ 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(() => {
- coords.x++;
- agvRealData[0].position = [coords.x, coords.y, coords.z];
- // console.log(agvRealData);
- setAgvData(agvRealData);
- index++;
- }, 1000);
+ 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();
+ }
}
}, [])
- useEffect(() => {
- console.log(agvData);
- }, [agvData])
-
const tunnelEl = useMemo(() => {
- return tunnelData.map((tunnel, index) => <Tunnel key={index} {...tunnel} />)
+ return tunnelData.map((data, index) => <Tunnel key={index} {...data} />)
}, []);
- const agvEl = agvData.map((data, idx) => <Agv key={idx} {...data} />)
+ const areaEl = useMemo(() => {
+ return areaData.map((area, index) => <Area key={index} {...area} />)
+ }, []);
- const boxEl = boxData.map((data, idx) => <Box key={idx} {...data} />)
+ 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) => {
@@ -56,8 +118,12 @@
<>
<group>
{tunnelEl}
- {agvEl}
+ {areaEl}
+ {shelfEl}
+ {agv1El}
+ {agv2El}
{boxEl}
+ {path1El}
</group>
</>
)
--
Gitblit v1.9.1