|  |  | 
 |  |  | import { useTranslate } from "react-admin"; | 
 |  |  | import { Box, Typography, Tabs, Tab, Stack, useTheme, Divider } from '@mui/material'; | 
 |  |  | import AgvMain from './AgvMain'; | 
 |  |  | import AgvControl from './AgvControl'; | 
 |  |  | import JsonShow from '../../JsonShow'; | 
 |  |  | import { getAgvInfo } from '../../http'; | 
 |  |  |  | 
 |  |  | const AgvInsight = (props) => { | 
 |  |  |     const { sprite, setTitle } = props; | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const themeMode = theme.palette.mode; | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const theme = useTheme(); | 
 |  |  |  | 
 |  |  |     const [activeTab, setActiveTab] = useState(0); | 
 |  |  |     const [curAgvNo, setCurAgvNo] = useState(null); | 
 |  |  |     const [curAgvInfo, setCurAgvInfo] = useState(null); | 
 |  |  |  | 
 |  |  |     const handleTabChange = (event, newValue) => { | 
 |  |  |         setActiveTab(newValue); | 
 |  |  |     }; | 
 |  |  |     const fetchAgvInfo = (agvNo) => { | 
 |  |  |         setTitle(translate('page.map.devices.agv') + ' - ' + agvNo); | 
 |  |  |         setCurAgvNo(agvNo); | 
 |  |  |         getAgvInfo(agvNo, (response) => { | 
 |  |  |             setCurAgvInfo(response); | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         if (curAgvNo) { | 
 |  |  |             setTitle(translate('page.map.devices.agv') + ' - ' + curAgvNo); | 
 |  |  |         if (sprite) { | 
 |  |  |             const agvNo = sprite.data.no; | 
 |  |  |             if (agvNo) { | 
 |  |  |                 fetchAgvInfo(agvNo); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         return () => { | 
 |  |  |             setTitle(null); | 
 |  |  |             setCurAgvInfo(null); | 
 |  |  |         } | 
 |  |  |     }, [curAgvNo]) | 
 |  |  |     }, [sprite]) | 
 |  |  |  | 
 |  |  |     const handleTabChange = (event, newValue) => { | 
 |  |  |         setActiveTab(newValue); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}> | 
 |  |  | 
 |  |  |                 sx={{ mb: 0 }} | 
 |  |  |             > | 
 |  |  |                 <Tab label={translate('page.map.insight.title')} /> | 
 |  |  |                 <Tab label={translate('page.map.insight.tabs.control')} /> | 
 |  |  |                 <Tab label={'JSON'} /> | 
 |  |  |             </Tabs> | 
 |  |  |  | 
 |  |  | 
 |  |  |             <Box flex={1} pt={2}> | 
 |  |  |                 {activeTab === 0 && ( | 
 |  |  |                     <AgvMain | 
 |  |  |                         data={sprite?.data} | 
 |  |  |                         curAgvNo={curAgvNo} | 
 |  |  |                         setCurAgvNo={setCurAgvNo} | 
 |  |  |                         curAgvInfo={curAgvInfo} | 
 |  |  |                         fetchAgvInfo={fetchAgvInfo} | 
 |  |  |                     /> | 
 |  |  |                 )} | 
 |  |  |                 {activeTab === 1 && ( | 
 |  |  |                     <AgvControl | 
 |  |  |                         curAgvNo={curAgvNo} | 
 |  |  |                     /> | 
 |  |  |                 )} | 
 |  |  |                 {activeTab === 2 && ( | 
 |  |  |                     <JsonShow | 
 |  |  |                         data={sprite?.data} | 
 |  |  |                         data={curAgvInfo || sprite?.data} | 
 |  |  |                         height={550} | 
 |  |  |                     /> | 
 |  |  |                 )} |