import React, { useState, useRef, useEffect, useMemo } from "react";
|
import {
|
useDataProvider,
|
SortButton,
|
TabbedShowLayout,
|
useListContext,
|
useRecordContext,
|
useTranslate,
|
} from 'react-admin';
|
import { Link as RouterLink, useLocation } from 'react-router-dom';
|
import {
|
Box,
|
Button,
|
Card,
|
CardContent,
|
Skeleton,
|
Stack,
|
Typography,
|
Divider,
|
} from '@mui/material';
|
import { formatDistance } from 'date-fns';
|
|
|
export const AgvShowDetail = (props) => {
|
const { record, ...rest } = props;
|
const translate = useTranslate();
|
const [data, setData] = useState(null);
|
|
useEffect(() => {
|
|
}, []);
|
|
if (!record) {
|
return (
|
<Stack mt={0.5}>
|
{Array.from({ length: 5 }).map((_, index) => (
|
<Stack spacing={2} sx={{ mt: 1 }} key={index}>
|
<Stack
|
direction="row"
|
spacing={2}
|
sx={{ alignItems: 'center' }}
|
>
|
<Skeleton
|
variant="circular"
|
width={20}
|
height={20}
|
/>
|
<Skeleton width="100%" />
|
</Stack>
|
<Skeleton variant="rectangular" height={50} />
|
<Divider />
|
</Stack>
|
))}
|
</Stack>
|
);
|
}
|
console.log(record);
|
|
return (
|
<>
|
<Box display="flex" m={2}>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
ip
|
</Typography>
|
<Typography variant="body2">
|
{record.ip}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
position
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.pos === 1 ? translate('common.enums.true') : translate('common.enums.false')}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
code
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.code$}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
angle
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.agvAngle}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
gyroAngle
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.gyroAngle}
|
</Typography>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
encoderAngle
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.encoderAngle}
|
</Typography>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
high
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.high}
|
</Typography>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
vol
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.vol}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
soc
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.soc}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
soh
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.soh}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
tempe
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.tempe}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
motorFail
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.motorFail}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
workDistance
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.workDistance}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
status
|
</Typography>
|
<Typography variant="body2">
|
{record.agvDetail.statusDesc}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model name
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.name}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model length
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.length}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model width
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.width}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model height
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.height}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model liftHeight
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.liftHeight}
|
</Typography>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model diameter
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.diameter}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model backpack
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.backpack}
|
</Typography>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model lowBattery
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.lowBattery}
|
</Typography>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model quaBattery
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.quaBattery}
|
</Typography>
|
</Box>
|
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model travelSpeed
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.travelSpeed}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model workDirection
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.workDirection}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model allDirection
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.allDirection}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model protocol
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.protocol}
|
</Typography>
|
</Box>
|
<Box display="flex" mr={5} flexDirection="column">
|
<Typography
|
color="textSecondary"
|
variant="caption"
|
>
|
model mqttTopic
|
</Typography>
|
<Typography variant="body2">
|
{record.agvModel.mqttTopic}
|
</Typography>
|
</Box>
|
</Box>
|
</>
|
)
|
}
|
