|  |  | 
 |  |  | 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; | 
 |  |  | 
 |  |  |                                 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; |