|  |  |  | 
|---|
|  |  |  | import PanelTypography from "../components/PanelTypography"; | 
|---|
|  |  |  | import * as Common from '@/utils/common'; | 
|---|
|  |  |  | import { styled } from '@mui/material/styles'; | 
|---|
|  |  |  | import { format } from 'date-fns'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const BusPanel = () => { | 
|---|
|  |  |  | const record = useRecordContext(); | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <> | 
|---|
|  |  |  | <Card sx={{ maxWidth: '80%', margin: 'auto' }}> | 
|---|
|  |  |  | <Card sx={{ maxWidth: '80%', margin: 'auto', mt: .5, mb: .5 }}> | 
|---|
|  |  |  | <CardContent> | 
|---|
|  |  |  | <Grid container spacing={2}> | 
|---|
|  |  |  | <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between' }}> | 
|---|
|  |  |  | <Typography variant="h6" gutterBottom align="left" sx={{ | 
|---|
|  |  |  | <Typography variant="h5" gutterBottom align="left" sx={{ | 
|---|
|  |  |  | maxWidth: { xs: '100px', sm: '180px', md: '260px', lg: '360px' }, | 
|---|
|  |  |  | whiteSpace: 'nowrap', | 
|---|
|  |  |  | overflow: 'hidden', | 
|---|
|  |  |  | 
|---|
|  |  |  | {Common.camelToPascalWithSpaces(translate('table.field.bus.busNo'))}: {record.busNo} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | {/*  inherit, primary, secondary, textPrimary, textSecondary, error */} | 
|---|
|  |  |  | <Typography variant="h6" gutterBottom align="right" > | 
|---|
|  |  |  | <Typography variant="h5" gutterBottom align="right" > | 
|---|
|  |  |  | ID: {record.id} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Box height={20}> </Box> | 
|---|
|  |  |  | <Box height={10}> </Box> | 
|---|
|  |  |  | <Box> | 
|---|
|  |  |  | <Table size="small"> | 
|---|
|  |  |  | <TableHead> | 
|---|
|  |  |  | 
|---|
|  |  |  | <TableRow key={task.id}> | 
|---|
|  |  |  | <TableCell> | 
|---|
|  |  |  | <Link to={`/task/${task.id}`}> | 
|---|
|  |  |  | {task.seqNum} | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </Link> | 
|---|
|  |  |  | {task.seqNum} | 
|---|
|  |  |  | </TableCell> | 
|---|
|  |  |  | <TableCellRight> | 
|---|
|  |  |  | {task.taskType$} | 
|---|
|  |  |  | 
|---|
|  |  |  | {task.taskSts$} | 
|---|
|  |  |  | </TableCellRight> | 
|---|
|  |  |  | <TableCellRight> | 
|---|
|  |  |  | {task.agv$} | 
|---|
|  |  |  | {task.agvId$} | 
|---|
|  |  |  | </TableCellRight> | 
|---|
|  |  |  | <TableCellRight> | 
|---|
|  |  |  | {task.ioTime$} | 
|---|
|  |  |  | {format(new Date(task.ioTime), 'yyyy-MM-dd HH:mm:ss')} | 
|---|
|  |  |  | </TableCellRight> | 
|---|
|  |  |  | <TableCellRight> | 
|---|
|  |  |  | {task.oriDesc} | 
|---|