|  |  | 
 |  |  | import { | 
 |  |  |     DEVICE_TYPE, | 
 |  |  | } from '../constants'; | 
 |  |  | import JsonShow from '../JsonShow'; | 
 |  |  | import ShelfInsight from './shelf'; | 
 |  |  | import AgvInsight from './agv'; | 
 |  |  | import PointInsight from './point'; | 
 |  |  |  | 
 |  |  | const Insight = (props) => { | 
 |  |  |     const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH } = props; | 
 |  |  | 
 |  |  |                 {open && ( | 
 |  |  |                     <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 100px);'} mt={{ xs: 2, sm: 1 }} sx={{ | 
 |  |  |                     }}> | 
 |  |  |                         <Stack direction="row" p={2}> | 
 |  |  |                         <Stack direction="row" p={2} pt={3}> | 
 |  |  |                             <Typography variant="h6" flex="1"> | 
 |  |  |                                 {title || translate('page.map.insight.title')} | 
 |  |  |                                 {title || ''} | 
 |  |  |                             </Typography> | 
 |  |  |                             <IconButton onClick={handleClose} size="small"> | 
 |  |  |                                 <CloseIcon /> | 
 |  |  |                             </IconButton> | 
 |  |  |                         </Stack> | 
 |  |  |                         <Box p={2} pt={1} height='100%'> | 
 |  |  |                         <Box p={2} pt={0} height='100%'> | 
 |  |  |                             <Card sx={{ | 
 |  |  |                                 height: '100%', | 
 |  |  |                                 transition: '0.3s', | 
 |  |  | 
 |  |  |                                 borderRadius: '8px', | 
 |  |  |                             }}> | 
 |  |  |                                 <CardContent sx={{ height: '100%' }}> | 
 |  |  |                                     {deviceType === DEVICE_TYPE.SHELF && ( | 
 |  |  |                                         <> | 
 |  |  |                                             <ShelfInsight | 
 |  |  |                                                 sprite={sprite} | 
 |  |  |                                                 setTitle={setTitle} | 
 |  |  |                                             /> | 
 |  |  |                                         </> | 
 |  |  |                                     )} | 
 |  |  |  | 
 |  |  |                                     {deviceType === DEVICE_TYPE.AGV && ( | 
 |  |  |                                         <> | 
 |  |  |                                             <AgvInsight | 
 |  |  |                                                 sprite={sprite} | 
 |  |  |                                                 setTitle={setTitle} | 
 |  |  |                                             /> | 
 |  |  |                                         </> | 
 |  |  |                                     )} | 
 |  |  |                                     <DeviceContent | 
 |  |  |                                         deviceType={deviceType} | 
 |  |  |                                         sprite={sprite} | 
 |  |  |                                         setTitle={setTitle} | 
 |  |  |                                     /> | 
 |  |  |                                 </CardContent> | 
 |  |  |                             </Card> | 
 |  |  |                         </Box> | 
 |  |  | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const DeviceContent = ({ deviceType, sprite, setTitle }) => { | 
 |  |  |     switch (deviceType) { | 
 |  |  |         case DEVICE_TYPE.SHELF: | 
 |  |  |             return ( | 
 |  |  |                 <ShelfInsight | 
 |  |  |                     sprite={sprite} | 
 |  |  |                     setTitle={setTitle} | 
 |  |  |                 /> | 
 |  |  |             ) | 
 |  |  |         case DEVICE_TYPE.AGV: | 
 |  |  |             return ( | 
 |  |  |                 <AgvInsight | 
 |  |  |                     sprite={sprite} | 
 |  |  |                     setTitle={setTitle} | 
 |  |  |                 /> | 
 |  |  |             ) | 
 |  |  |         case DEVICE_TYPE.POINT: | 
 |  |  |             return ( | 
 |  |  |                 <PointInsight | 
 |  |  |                     sprite={sprite} | 
 |  |  |                     setTitle={setTitle} | 
 |  |  |                 /> | 
 |  |  |             ) | 
 |  |  |         default: | 
 |  |  |             return ( | 
 |  |  |                 <JsonShow | 
 |  |  |                     data={sprite?.data} | 
 |  |  |                     height={550} | 
 |  |  |                 /> | 
 |  |  |             ) | 
 |  |  |     } | 
 |  |  | } | 
 |  |  |  | 
 |  |  | export default Insight; |