#

vincentlu

2025-05-13 ebd2f4397a92c6a5096de1b86d59154363344720

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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 { AgvShowError } from "./show/AgvShowError";
import CustomerTopToolBar from "../components/EditTopToolBar";
import { useTheme } from '@mui/material/styles';
import PulseSignal from "../components/PulseSignal";
 
export const AgvShow = () => {
    return (
        <>
            <ShowBase>
                <AgvShowContent />
            </ShowBase>
        </>
    )
}
 
const AgvShowContent = (props) => {
    const { record, isPending } = useShowContext();
    const theme = useTheme();
    const [online, setOnline] = useState(false);
 
    useEffect(() => {
        if (record) {
            setOnline(record.online)
        }
    }, [record])
 
    if (isPending || !record) return null;
 
    return (
        <>
            <Box mt={2} display="flex">
                <Box flex="1" sx={{
                    ...(!record.online && {
                        animation: 'showBorderPulse 2s infinite',
                        '@keyframes showBorderPulse': {
                            '0%': {
                                boxShadow: '0 0 2px 1px rgba(255, 0, 0, 0.1)',
                            },
                            '50%': {
                                boxShadow: '0 0 3px 2px rgba(255, 0, 0, 0.3)',
                            },
                            '100%': {
                                boxShadow: '0 0 2px 1px rgba(255, 0, 0, 0.1)',
                            },
                        },
                    })
                }}>
                    <Card>
                        <CardContent sx={{ pt: 0 }}>
                            <Box display="flex" mb={1} sx={{
                                justifyContent: 'space-between',
                                alignItems: 'center',
                            }}>
                                <CustomerTopToolBar backPrevious />
                                <Box mt={1} mr={1}>
                                    <Stack direction='row'>
                                        <Box mt={.8} mr={2}>
                                            <PulseSignal
                                                flag={online}
                                                width={10}
                                            />
                                        </Box>
                                        <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} setOnline={setOnline} />
                                </TabbedShowLayout.Tab>
                                <TabbedShowLayout.Tab label="page.agv.show.tabs.task" path="tasks">
                                    <AgvShowTask agvId={record.id} />
                                </TabbedShowLayout.Tab>
                                <TabbedShowLayout.Tab label="page.agv.show.tabs.error" path="errors">
                                    <AgvShowError agvId={record.id} />
                                </TabbedShowLayout.Tab>
                            </TabbedShowLayout>
                        </CardContent>
                    </Card>
                </Box>
                <AgvShowAside />
            </Box>
        </>
    )
}