|  |  |  | 
|---|
|  |  |  | import React, { useState, useRef, useEffect } from 'react'; | 
|---|
|  |  |  | import { useTranslate } from "react-admin"; | 
|---|
|  |  |  | import { Box, Typography, Tabs, Tab, Stack, useTheme, Divider } from '@mui/material'; | 
|---|
|  |  |  | import { CUSTOM_PAGES_DATA_INTERVAL } from '@/config/setting'; | 
|---|
|  |  |  | import AgvMain from './AgvMain'; | 
|---|
|  |  |  | import AgvControl from './AgvControl'; | 
|---|
|  |  |  | import JsonShow from '../../JsonShow'; | 
|---|
|  |  |  | 
|---|
|  |  |  | const [curAgvNo, setCurAgvNo] = useState(null); | 
|---|
|  |  |  | const [curAgvInfo, setCurAgvInfo] = useState(null); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const fetchAgvInfo = (agvNo) => { | 
|---|
|  |  |  | setTitle(translate('page.map.devices.agv') + ' - ' + agvNo); | 
|---|
|  |  |  | setCurAgvNo(agvNo); | 
|---|
|  |  |  | getAgvInfo(agvNo, (response) => { | 
|---|
|  |  |  | setCurAgvInfo(response); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | let intervalId; | 
|---|
|  |  |  | if (sprite) { | 
|---|
|  |  |  | const agvNo = sprite.data.no; | 
|---|
|  |  |  | if (agvNo) { | 
|---|
|  |  |  | setTitle(translate('page.map.devices.agv') + ' - ' + agvNo); | 
|---|
|  |  |  | setCurAgvNo(agvNo); | 
|---|
|  |  |  | getAgvInfo(agvNo, (response) => { | 
|---|
|  |  |  | setCurAgvInfo(response); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | fetchAgvInfo(agvNo); | 
|---|
|  |  |  | intervalId = setInterval(() => { | 
|---|
|  |  |  | fetchAgvInfo(agvNo); | 
|---|
|  |  |  | }, CUSTOM_PAGES_DATA_INTERVAL); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return () => { | 
|---|
|  |  |  | setTitle(null); | 
|---|
|  |  |  | setCurAgvInfo(null); | 
|---|
|  |  |  | if (intervalId) { | 
|---|
|  |  |  | clearInterval(intervalId) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, [sprite]) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | <AgvMain | 
|---|
|  |  |  | curAgvNo={curAgvNo} | 
|---|
|  |  |  | curAgvInfo={curAgvInfo} | 
|---|
|  |  |  | fetchAgvInfo={fetchAgvInfo} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | {activeTab === 1 && ( | 
|---|