| | |
| | | import * as React from 'react'; |
| | | import { useState } from 'react'; |
| | | import { Paper, Typography, Box } from '@mui/material'; |
| | | import { Paper, Typography, Box, Chip, Stack } from '@mui/material'; |
| | | import ContactsIcon from '@mui/icons-material/AccountCircle'; |
| | | import DealIcon from '@mui/icons-material/MonetizationOn'; |
| | | import { |
| | |
| | | Link, |
| | | useResourceContext, |
| | | } from 'react-admin'; |
| | | |
| | | import PulseSignal from '../components/PulseSignal'; |
| | | import { AgvAvatar } from './AgvAvatar'; |
| | | import BatteryCharging90Icon from '@mui/icons-material/BatteryCharging90'; |
| | | |
| | | export const AgvCard = (props) => { |
| | | const resource = useResourceContext(); |
| | |
| | | }} |
| | | elevation={elevation} |
| | | > |
| | | <Box display="flex" flexDirection="row" alignItems="center" justifyContent='space-between'> |
| | | <PulseSignal |
| | | flag={true} |
| | | /> |
| | | <Box display="flex" alignItems="center"> |
| | | <BatteryCharging90Icon |
| | | sx={{ |
| | | width: 12, |
| | | height: 12, |
| | | color: record.vol > 50 ? 'green' : record.vol > 20 ? 'orange' : 'red', |
| | | }} |
| | | /> |
| | | <Typography variant="body2"> |
| | | {record.vol} |
| | | </Typography> |
| | | </Box> |
| | | </Box> |
| | | <Box display="flex" flexDirection="column" alignItems="center"> |
| | | <AgvAvatar /> |
| | | <Box textAlign="center" marginTop={1}> |
| | |
| | | {record.agvStatus} |
| | | </Typography> |
| | | <Typography variant="overline" sx={{ opacity: .7 }}> |
| | | {record.code} |
| | | code: {record.code} |
| | | </Typography> |
| | | </Box> |
| | | </Box> |
New file |
| | |
| | | import * as React from 'react'; |
| | | import { Paper, Typography, Box, Chip, Avatar } from '@mui/material'; |
| | | |
| | | const PulseSignal = (props) => { |
| | | const { flag = true, width = 8, ...rest } = props; |
| | | |
| | | return ( |
| | | <> |
| | | <Box |
| | | {...rest} |
| | | sx={{ |
| | | width: width, |
| | | height: width, |
| | | borderRadius: '50%', |
| | | backgroundColor: flag ? '#3f51b5' : '#f44336', |
| | | display: 'inline-block', |
| | | animation: 'pulse 1.5s infinite', |
| | | '@keyframes pulse': { |
| | | '0%': { |
| | | transform: 'scale(1)', |
| | | opacity: 1, |
| | | }, |
| | | '50%': { |
| | | transform: 'scale(1.2)', |
| | | opacity: 0.7, |
| | | }, |
| | | '100%': { |
| | | transform: 'scale(1)', |
| | | opacity: 1, |
| | | }, |
| | | }, |
| | | }} |
| | | /> |
| | | </> |
| | | ) |
| | | |
| | | } |
| | | |
| | | export default PulseSignal; |