From 7f70cb15d035f0c233b9e62b9e43aa985317c908 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 04 十一月 2024 10:22:45 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/page/components/PulseSignal.jsx | 71 +++++++++++++++++++++++------------
1 files changed, 46 insertions(+), 25 deletions(-)
diff --git a/zy-acs-flow/src/page/components/PulseSignal.jsx b/zy-acs-flow/src/page/components/PulseSignal.jsx
index b4a0750..c1d33c5 100644
--- a/zy-acs-flow/src/page/components/PulseSignal.jsx
+++ b/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',
+ }}
+ />
+ )}
</>
)
--
Gitblit v1.9.1