#

luxiaotao1123

2024-09-21 519a5658a7fbae2b104948dc7b6118539b277112

#

 zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx

@@ -13,7 +13,7 @@
    Box,
    Button,
    Card,
    CardContent,
    Grid,
    Skeleton,
    Stack,
    Typography,
@@ -22,9 +22,10 @@
import { formatDistance } from 'date-fns';
import request from '@/utils/request';

const ITEM_COL = 3;

export const AgvShowDetail = (props) => {
    const { agvId, ...rest } = props;
    const translate = useTranslate();
    const { agvId } = props;
    const [record, setRecord] = useState(null);
    const resource = useResourceContext();

@@ -67,327 +68,354 @@
            </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 mt={2}>
                <AgvMainDetail record={record} />
                <AgvMoreDetail record={record} />
                <AgvModelDetail record={record} />
            </Box>
        </>
    )
}

const AgvMainDetail = ({ record }) => {
    const translate = useTranslate();
    return (
        <Grid container spacing={1} sx={{ maxWidth: '75%' }}>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    ip
                </Typography>
                <Typography variant="body2">
                    {record.ip}
                </Typography>
            </Grid>
        </Grid>
    )
}

const AgvMoreDetail = ({ record }) => {
    const translate = useTranslate();
    return (
        <Grid container spacing={1} sx={{ maxWidth: '75%' }}>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    position
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.pos === 1 ? translate('common.enums.true') : translate('common.enums.false')}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    code
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.code$}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    angle
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.agvAngle}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    gyroAngle
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.gyroAngle}
                </Typography>
            </Grid>

            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    encoderAngle
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.encoderAngle}
                </Typography>
            </Grid>

            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    high
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.high}
                </Typography>
            </Grid>

            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    vol
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.vol}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    soc
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.soc}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    soh
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.soh}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    tempe
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.tempe}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    motorFail
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.motorFail}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    workDistance
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.workDistance}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    status
                </Typography>
                <Typography variant="body2">
                    {record.agvDetail.statusDesc}
                </Typography>
            </Grid>
        </Grid>
    )
}
const AgvModelDetail = ({ record }) => {
    const translate = useTranslate();
    console.log(record);

    return (
        <Grid container spacing={1} sx={{ maxWidth: '75%' }}>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model name
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.name}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model length
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.length}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model width
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.width}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model height
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.height}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model liftHeight
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.liftHeight}
                </Typography>
            </Grid>

            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model diameter
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.diameter}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model backpack
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.backpack}
                </Typography>
            </Grid>

            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model lowBattery
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.lowBattery}
                </Typography>
            </Grid>

            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model quaBattery
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.quaBattery}
                </Typography>
            </Grid>

            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model travelSpeed
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.travelSpeed}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model workDirection
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.workDirection}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model allDirection
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.allDirection}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model protocol
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.protocol}
                </Typography>
            </Grid>
            <Grid item xs={ITEM_COL}>
                <Typography
                    color="textSecondary"
                    variant="caption"
                >
                    model mqttTopic
                </Typography>
                <Typography variant="body2">
                    {record.agvModelData.mqttTopic}
                </Typography>
            </Grid>
        </Grid>
    )
}