| | |
| | | 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> |
| | |
| | | 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"> |
| | | <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 /> |
| | | <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={{ |
| | |
| | | }} |
| | | > |
| | | <TabbedShowLayout.Tab label="page.agv.show.tabs.detail"> |
| | | <AgvShowDetail agvId={record.id} /> |
| | | <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> |