|  |  | 
 |  |  | 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 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; | 
 |  |  | let coords = { x: 0, y: 0, z: 0 }; | 
 |  |  |  | 
 |  |  | const Warehouse = (props) => { | 
 |  |  |  | 
 |  |  |     const [agvData, setAgvData] = useState([ | 
 |  |  |         {} | 
 |  |  |     ]); | 
 |  |  |     const [boxData, setBoxData] = useState([ | 
 |  |  |         {} | 
 |  |  |     ]) | 
 |  |  |     const [boxData, setBoxData] = useState([]) | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |  | 
 |  |  |  | 
 |  |  |         const timer = setInterval(() => { | 
 |  |  |             coords.x++; | 
 |  |  |             // agvRealData[0].position = [coords.x, coords.y, coords.z]; | 
 |  |  |             getBoxData().then(res => { | 
 |  |  |                 // res.push({ | 
 |  |  |                 //     locNo: "A100301001", | 
 |  |  |                 //     row: 3, | 
 |  |  |                 //     bay: 1, | 
 |  |  |                 //     lev: 1, | 
 |  |  |                 //     locSts: "STOCK", | 
 |  |  |                 // }) | 
 |  |  |                 // console.log(res); | 
 |  |  |                 setBoxData(res); | 
 |  |  |             }) | 
 |  |  |  | 
 |  |  |             getAgvData().then(res => { | 
 |  |  |                 // console.log(JSON.stringify(res)) | 
 |  |  |                 if (res && res.length > 0) { | 
 |  |  |                     setAgvData(res); | 
 |  |  |                 } | 
 |  |  |             }) | 
 |  |  |  | 
 |  |  |             const agvRealData = agvRealDataList[index]; | 
 |  |  |             console.log(agvRealData); | 
 |  |  |             setAgvData(agvRealData); | 
 |  |  |             if (agvRealData) { | 
 |  |  |                 // setAgvData(agvRealData); | 
 |  |  |             } | 
 |  |  |             index++; | 
 |  |  |         }, 1000); | 
 |  |  |         }, INTERVAL_TIME); | 
 |  |  |  | 
 |  |  |         return () => { | 
 |  |  |             clearInterval(timer); | 
 |  |  | 
 |  |  |     }, []) | 
 |  |  |  | 
 |  |  |     const tunnelEl = useMemo(() => { | 
 |  |  |         return tunnelData.map((tunnel, index) => <Tunnel key={index} {...tunnel} />) | 
 |  |  |         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 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 boxEl = boxData.map((data, idx) => <Box key={idx} {...data} />) | 
 |  |  |  | 
 |  |  |     useFrame((state, delta) => { | 
 |  |  |  | 
 |  |  | 
 |  |  |         <> | 
 |  |  |             <group> | 
 |  |  |                 {tunnelEl} | 
 |  |  |                 {areaEl} | 
 |  |  |                 {shelfEl} | 
 |  |  |                 {agvEl} | 
 |  |  |                 {boxEl} | 
 |  |  |             </group> |