#

luxiaotao1123

2024-11-04 7f70cb15d035f0c233b9e62b9e43aa985317c908

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

@@ -6,29 +6,48 @@
    useListContext,
    useRecordContext,
    useTranslate,
    useResourceContext,
} from 'react-admin';
import { Link as RouterLink, useLocation } from 'react-router-dom';
import {
    Box,
    Button,
    Card,
    CardContent,
    Grid,
    Skeleton,
    Stack,
    Typography,
    Divider,
} from '@mui/material';
import { formatDistance } from 'date-fns';
import request from '@/utils/request';

const ITEM_COL = 3;
const GRID_CONTAINER_MAX_WIDTH = '100%';

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

    useEffect(() => {

    }, []);
        const http = async (agvId) => {
            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);
                }
            }
        }
        const intervalId = setInterval(() => {
            http(agvId);
        }, 1000);
        http(agvId);
        return () => clearInterval(intervalId);
    }, [agvId]);

    if (!record) {
        return (
@@ -54,327 +73,185 @@
            </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 m={2}>
                <AgvMainDetail record={record} />
                <Divider sx={{ mt: 2, mb: 2 }} />
                <AgvMoreDetail record={record} />
                <Divider sx={{ mt: 2, mb: 2 }} />
                <AgvModelDetail record={record} />
            </Box>
        </>
    )
}

const DetailTitle = ({ title, ...rest }) => {
    const translate = useTranslate();
    return (
        <Typography
            color="textSecondary"
            variant="caption"
            {...rest}
        >
            {translate(title)}
        </Typography>
    )
}

const DetailValue = ({ value, fontBold = false }) => {
    return (
        <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} />
            </Grid>
        </Grid>
    )
}

const AgvMoreDetail = ({ record }) => {
    const translate = useTranslate();
    return (
        <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}>

            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvDetail.agvAngle' />
                <DetailValue value={record.agvDetail.agvAngle} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvDetail.gyroAngle' />
                <DetailValue value={record.agvDetail.gyroAngle} />
            </Grid>

            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvDetail.encoderAngle' />
                <DetailValue value={record.agvDetail.encoderAngle} />
            </Grid>

            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvDetail.high' />
                <DetailValue value={record.agvDetail.high} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvDetail.vol' />
                <DetailValue value={record.agvDetail.vol} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvDetail.soc' />
                <DetailValue value={record.agvDetail.soc} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvDetail.soh' />
                <DetailValue value={record.agvDetail.soh} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvDetail.tempe' />
                <DetailValue value={record.agvDetail.tempe} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvDetail.motorFail' />
                <DetailValue value={record.agvDetail.motorFail} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvDetail.workDistance' />
                <DetailValue value={record.agvDetail.workDistance} />
            </Grid>
        </Grid >
    )
}
const AgvModelDetail = ({ record }) => {
    const translate = useTranslate();
    return (
        <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.name' />
                <DetailValue fontBold value={record.agvModelData.name} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.length' />
                <DetailValue value={record.agvModelData.length} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.width' />
                <DetailValue value={record.agvModelData.width} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.height' />
                <DetailValue value={record.agvModelData.height} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.liftHeight' />
                <DetailValue value={record.agvModelData.liftHeight} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.diameter' />
                <DetailValue value={record.agvModelData.diameter} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.backpack' />
                <DetailValue value={record.agvModelData.backpack} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.lowBattery' />
                <DetailValue value={record.agvModelData.lowBattery} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.quaBattery' />
                <DetailValue value={record.agvModelData.quaBattery} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.travelSpeed' />
                <DetailValue value={record.agvModelData.travelSpeed} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.workDirection' />
                <DetailValue value={record.agvModelData.workDirection} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.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' />
                <DetailValue value={record.agvModelData.protocol} />
            </Grid>
            <Grid item xs={ITEM_COL}>
                <DetailTitle title='table.field.agvModel.mqttTopic' />
                <DetailValue value={record.agvModelData.mqttTopic} />
            </Grid>
        </Grid>
    )
}