| import React, { useState, useRef, useEffect, useMemo } from "react"; | 
| import { Box, Card, CardContent, Grid, Typography, Tooltip } from '@mui/material'; | 
| import { | 
|     useTranslate, | 
|     useRecordContext, | 
| } from 'react-admin'; | 
| import PanelTypography from "../components/PanelTypography"; | 
| import * as Common from '@/utils/common' | 
|   | 
| const AgvDetailPanel = () => { | 
|     const record = useRecordContext(); | 
|     if (!record) return null; | 
|     const translate = useTranslate(); | 
|     return ( | 
|         <> | 
|             <Card sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: 'auto' }}> | 
|                 <CardContent> | 
|                     <Grid container spacing={2}> | 
|                         <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between' }}> | 
|                             <Typography variant="h6" gutterBottom align="left" sx={{ | 
|                                 maxWidth: { xs: '100px', sm: '180px', md: '260px', lg: '360px' }, | 
|                                 whiteSpace: 'nowrap', | 
|                                 overflow: 'hidden', | 
|                                 textOverflow: 'ellipsis', | 
|                             }}> | 
|                                 {Common.camelToPascalWithSpaces(translate('table.field.agvDetail.uuid'))}: {record.uuid} | 
|                             </Typography> | 
|                             {/*  inherit, primary, secondary, textPrimary, textSecondary, error */} | 
|                             <Typography variant="h6" gutterBottom align="right" > | 
|                                 ID: {record.id} | 
|                             </Typography> | 
|                         </Grid> | 
|                     </Grid> | 
|                     <Grid container spacing={2}> | 
|                         <Grid item xs={12} container alignContent="flex-end"> | 
|                             <Typography variant="caption" color="textSecondary" sx={{ wordWrap: 'break-word', wordBreak: 'break-all' }}> | 
|                                 {Common.camelToPascalWithSpaces(translate('common.field.memo'))}:{record.memo} | 
|                             </Typography> | 
|                         </Grid> | 
|                     </Grid> | 
|                     <Box height={20}> </Box> | 
|                     <Grid container spacing={2}> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.uuid"  | 
|                                 property={record.uuid} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.agvId"  | 
|                                 property={record.agvId$} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.title"  | 
|                                 property={record.title} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.pos"  | 
|                                 property={record.pos$} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.code"  | 
|                                 property={record.code$} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.lastCode"  | 
|                                 property={record.lastCode$} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.codeOffsert"  | 
|                                 property={record.codeOffsert} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.straightVal"  | 
|                                 property={record.straightVal} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.agvAngle"  | 
|                                 property={record.agvAngle} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.gyroAngle"  | 
|                                 property={record.gyroAngle} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.encoderAngle"  | 
|                                 property={record.encoderAngle} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.high"  | 
|                                 property={record.high} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.sensorSts"  | 
|                                 property={record.sensorSts} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.vol"  | 
|                                 property={record.vol} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.soc"  | 
|                                 property={record.soc} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.soh"  | 
|                                 property={record.soh} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.batteryFail"  | 
|                                 property={record.batteryFail} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.tempe"  | 
|                                 property={record.tempe} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.motorFail"  | 
|                                 property={record.motorFail} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.failSign"  | 
|                                 property={record.failSign} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.bootTime"  | 
|                                 property={record.bootTime} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.workTime"  | 
|                                 property={record.workTime} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.workDistance"  | 
|                                 property={record.workDistance} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.backpack" | 
|                                 property={record.backpack} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.error"  | 
|                                 property={record.error} | 
|                             /> | 
|                         </Grid> | 
|                         <Grid item xs={6}> | 
|                             <PanelTypography | 
|                                 title="table.field.agvDetail.errorTime"  | 
|                                 property={record.errorTime} | 
|                             /> | 
|                         </Grid> | 
|                     </Grid> | 
|                 </CardContent> | 
|             </Card > | 
|         </> | 
|     ); | 
| }; | 
|   | 
| export default AgvDetailPanel; |