#

luxiaotao1123

2024-11-04 7f70cb15d035f0c233b9e62b9e43aa985317c908

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

@@ -1,36 +1,57 @@
import * as React from 'react';
import { Paper, Typography, Box, Chip, Avatar } from '@mui/material';
import { teal, red } from '@mui/material/colors';

const PulseSignal = (props) => {
    const { flag = true, width = 8, ...rest } = props;
    const {
        flag = true,
        width = 8,
        negative = false,
        positiveColor = teal[400],
        negativeColor = red[400],
        ...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,
            {flag ? (
                <Box
                    {...rest}
                    sx={{
                        width: width,
                        height: width,
                        borderRadius: '50%',
                        backgroundColor: positiveColor,
                        display: 'inline-block',
                        animation: `pulse ${negative ? '2' : '1.2'}s infinite`,
                        '@keyframes pulse': {
                            '0%': {
                                transform: 'scale(1)',
                                opacity: 1,
                            },
                            '50%': {
                                transform: 'scale(1.3)',
                                opacity: 0.7,
                            },
                            '100%': {
                                transform: 'scale(1)',
                                opacity: 1,
                            },
                        },
                        '50%': {
                            transform: 'scale(1.2)',
                            opacity: 0.7,
                        },
                        '100%': {
                            transform: 'scale(1)',
                            opacity: 1,
                        },
                    },
                }}
            />
                    }}
                />
            ) : (
                <Box
                    {...rest}
                    sx={{
                        width: width + width / 10,
                        height: width + width / 10,
                        borderRadius: '50%',
                        backgroundColor: negativeColor,
                        display: 'inline-block',
                    }}
                />
            )}
        </>
    )