|  |  | 
 |  |  | 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 && ( |