|  |  | 
 |  |  | const GRID_CONTAINER_MAX_WIDTH = '100%'; | 
 |  |  |  | 
 |  |  | export const AgvShowDetail = (props) => { | 
 |  |  |     const { agvId } = props; | 
 |  |  |     const { agvId, setOnline } = props; | 
 |  |  |     const [record, setRecord] = useState(null); | 
 |  |  |     const resource = useResourceContext(); | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         const http = async (agvId) => { | 
 |  |  |             const res = await request.get(resource + '/' + agvId); | 
 |  |  |             const { code, msg, data } = res.data; | 
 |  |  |             if (code === 200) { | 
 |  |  |                 setRecord(data); | 
 |  |  |             } else { | 
 |  |  |                 setRecord(null); | 
 |  |  |             if (agvId) { | 
 |  |  |                 const res = await request.get(resource + '/' + agvId); | 
 |  |  |                 const { code, msg, data } = res.data; | 
 |  |  |                 if (code === 200) { | 
 |  |  |                     setOnline(data.online); | 
 |  |  |                     setRecord(data); | 
 |  |  |                 } else { | 
 |  |  |                     setRecord(null); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |         if (agvId) { | 
 |  |  |         const intervalId = setInterval(() => { | 
 |  |  |             http(agvId); | 
 |  |  |         } | 
 |  |  |         }, 1000); | 
 |  |  |         http(agvId); | 
 |  |  |         return () => clearInterval(intervalId); | 
 |  |  |     }, [agvId]); | 
 |  |  |  | 
 |  |  |     if (!record) { | 
 |  |  | 
 |  |  |         <> | 
 |  |  |             <Box m={2}> | 
 |  |  |                 <AgvMainDetail record={record} /> | 
 |  |  |                 <Divider sx={{ m: 2 }} /> | 
 |  |  |                 <Divider sx={{ mt: 2, mb: 2 }} /> | 
 |  |  |                 <AgvMoreDetail record={record} /> | 
 |  |  |                 <Divider sx={{ m: 2 }} /> | 
 |  |  |                 <Divider sx={{ mt: 2, mb: 2 }} /> | 
 |  |  |                 <AgvModelDetail record={record} /> | 
 |  |  |             </Box> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const DetailTitle = ({ title }) => { | 
 |  |  | const DetailTitle = ({ title, ...rest }) => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     return ( | 
 |  |  |         <Typography | 
 |  |  |             color="textSecondary" | 
 |  |  |             variant="caption" | 
 |  |  |             {...rest} | 
 |  |  |         > | 
 |  |  |             {translate(title)} | 
 |  |  |         </Typography> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const DetailValue = ({ value }) => { | 
 |  |  | const DetailValue = ({ value, fontBold = false }) => { | 
 |  |  |     return ( | 
 |  |  |         <Typography variant="body2"> | 
 |  |  |         <Typography | 
 |  |  |             variant="body2" | 
 |  |  |             color={fontBold ? 'textSecondary' : 'textPrimary'} | 
 |  |  |             width='80%' | 
 |  |  |             sx={{ | 
 |  |  |                 wordWrap: 'break-word', | 
 |  |  |                 whiteSpace: 'normal', | 
 |  |  |                 fontWeight: fontBold && 'bold', | 
 |  |  |             }} | 
 |  |  |         > | 
 |  |  |             {value} | 
 |  |  |         </Typography> | 
 |  |  |     ) | 
 |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  | const AgvMainDetail = ({ record }) => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     return ( | 
 |  |  |         <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}> | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='common.field.status' /> | 
 |  |  |                 <DetailValue fontBold value={record.agvDetail.statusDesc} /> | 
 |  |  |             </Grid> | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='table.field.agvDetail.pos' /> | 
 |  |  |                 <DetailValue value={record.agvDetail.pos === 1 ? translate('common.enums.true') : translate('common.enums.false')} /> | 
 |  |  |             </Grid > | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='table.field.agvDetail.code' /> | 
 |  |  |                 <DetailValue value={record.agvDetail.code$} /> | 
 |  |  |             </Grid> | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='table.field.agv.ip' /> | 
 |  |  |                 <DetailValue value={record.ip} /> | 
 |  |  | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     return ( | 
 |  |  |         <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}> | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='table.field.agvDetail.pos' /> | 
 |  |  |                 <DetailValue value={record.agvDetail.pos === 1 ? translate('common.enums.true') : translate('common.enums.false')} /> | 
 |  |  |             </Grid > | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='table.field.agvDetail.code' /> | 
 |  |  |                 <DetailValue value={record.agvDetail.code$} /> | 
 |  |  |             </Grid> | 
 |  |  |  | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='table.field.agvDetail.agvAngle' /> | 
 |  |  |                 <DetailValue value={record.agvDetail.agvAngle} /> | 
 |  |  | 
 |  |  |                 <DetailTitle title='table.field.agvDetail.workDistance' /> | 
 |  |  |                 <DetailValue value={record.agvDetail.workDistance} /> | 
 |  |  |             </Grid> | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='common.field.status' /> | 
 |  |  |                 <DetailValue value={record.agvDetail.statusDesc} /> | 
 |  |  |             </Grid> | 
 |  |  |         </Grid > | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  | const AgvModelDetail = ({ record }) => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     console.log(record); | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}> | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='table.field.agvModel.name' /> | 
 |  |  |                 <DetailValue value={record.agvModelData.name} /> | 
 |  |  |                 <DetailValue fontBold value={record.agvModelData.name} /> | 
 |  |  |             </Grid> | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='table.field.agvModel.length' /> | 
 |  |  | 
 |  |  |             </Grid> | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='table.field.agvModel.allDirection' /> | 
 |  |  |                 <DetailValue value={record.agvModelData.allDirection} /> | 
 |  |  |                 <DetailValue value={record.agvModelData.allDirection === 1 ? translate('common.enums.true') : translate('common.enums.false')} /> | 
 |  |  |             </Grid> | 
 |  |  |             <Grid item xs={ITEM_COL}> | 
 |  |  |                 <DetailTitle title='table.field.agvModel.protocol' /> |