#

luxiaotao1123

2024-09-21 c3af288c53805cc1b08516cf2f47dcf75f30f67a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React, { useState, useRef, useEffect, useMemo } from "react";
import {
    ShowBase,
    TabbedShowLayout,
    useShowContext,
} from 'react-admin';
import {
    Box,
    Button,
    Card,
    CardContent,
    Stack,
    Typography,
    Avatar,
} from '@mui/material';
import { formatDistance } from 'date-fns';
import { AgvShowDetail } from "./show/AgvShowDetail";
import { AgvShowAside } from "./show/AgvShowAside";
import { AgvShowTask } from "./show/AgvShowTask";
import CustomerTopToolBar from "../components/EditTopToolBar";
import { useTheme } from '@mui/material/styles';
 
export const AgvShow = () => {
 
    return (
        <>
            <ShowBase>
                <AgvShowContent />
            </ShowBase>
        </>
    )
}
 
const AgvShowContent = (props) => {
    const { record, isPending } = useShowContext();
    const theme = useTheme();
    if (isPending || !record) return null;
 
    return (
        <>
            <Box mt={2} display="flex">
                <Box flex="1">
                    <Card>
                        <CardContent sx={{ pt: 0 }}>
                            <Box display="flex" mb={1} sx={{
                                justifyContent: 'space-between',
                                alignItems: 'center',
                            }}>
                                <CustomerTopToolBar />
                                <Box mt={1} mr={1}>
                                    <Stack direction='row'>
                                        <Typography
                                            variant="h5"
                                            sx={{
                                                mt: .5,
                                                mr: 2
                                            }}
                                        >
                                            {record.agvModelData?.type}
                                        </Typography>
                                        <Avatar sx={{ bgcolor: theme.palette.primary.main }}>{record.uuid}</Avatar>
                                    </Stack>
                                </Box>
                            </Box>
 
                            <TabbedShowLayout
                                sx={{
                                    '& .RaTabbedShowLayout-content': { p: 0 },
                                }}
                            >
                                <TabbedShowLayout.Tab label="page.agv.show.tabs.detail">
                                    <AgvShowDetail agvId={record.id} />
                                </TabbedShowLayout.Tab>
                                <TabbedShowLayout.Tab label="page.agv.show.tabs.task">
                                    <AgvShowTask agvId={record.id} />
                                </TabbedShowLayout.Tab>
                            </TabbedShowLayout>
                        </CardContent>
                    </Card>
                </Box>
                <AgvShowAside />
            </Box>
        </>
    )
}