#

luxiaotao1123

2024-09-20 cc24d53704db8fdf4cd43dfc3b005af73d79d290

#

 zy-acs-flow/src/page/agv/AgvCard.jsx

@@ -1,6 +1,6 @@
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 {
@@ -10,8 +10,9 @@
    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();
@@ -44,6 +45,23 @@
                }}
                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}>
@@ -51,7 +69,7 @@
                            {record.agvStatus}
                        </Typography>
                        <Typography variant="overline" sx={{ opacity: .7 }}>
                            {record.code}
                            code: {record.code}
                        </Typography>
                    </Box>
                </Box>

 zy-acs-flow/src/page/components/PulseSignal.jsx

New file
@@ -0,0 +1,39 @@
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;