From f4d50b49b828b9722d6e6cd63e7bdacf5cf05bea Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 09 十月 2024 10:45:49 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/page/agv/AgvCard.jsx | 131 +++++++++++++++++++++++++++----------------
1 files changed, 82 insertions(+), 49 deletions(-)
diff --git a/zy-acs-flow/src/page/agv/AgvCard.jsx b/zy-acs-flow/src/page/agv/AgvCard.jsx
index e86aae0..04e7e75 100644
--- a/zy-acs-flow/src/page/agv/AgvCard.jsx
+++ b/zy-acs-flow/src/page/agv/AgvCard.jsx
@@ -1,18 +1,16 @@
import * as React from 'react';
import { useState } from 'react';
-import { Paper, Typography, Box, Chip, Stack } from '@mui/material';
-import ContactsIcon from '@mui/icons-material/AccountCircle';
-import DealIcon from '@mui/icons-material/MonetizationOn';
+import { Paper, Typography, Box, AvatarGroup, Avatar } from '@mui/material';
import {
useCreatePath,
- SelectField,
useRecordContext,
Link,
useResourceContext,
+ useDataProvider,
} from 'react-admin';
import PulseSignal from '../components/PulseSignal';
import { AgvAvatar } from './AgvAvatar';
-import BatteryCharging90Icon from '@mui/icons-material/BatteryCharging90';
+import { red, blue, blueGrey } from '@mui/material/colors';
export const AgvCard = (props) => {
const resource = useResourceContext();
@@ -20,9 +18,6 @@
const createPath = useCreatePath();
const record = useRecordContext(props);
if (!record) return null;
-
- console.log(record);
-
return (
<Link
@@ -42,30 +37,47 @@
flexDirection: 'column',
justifyContent: 'space-between',
padding: '1em',
+ ...(!record.online && {
+ animation: 'cardBorderPulse 2s infinite',
+ '@keyframes cardBorderPulse': {
+ '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)',
+ },
+ },
+ })
}}
elevation={elevation}
>
<Box display="flex" flexDirection="row" alignItems="center" justifyContent='space-between'>
<PulseSignal
- flag={true}
+ flag={record.online}
/>
- <Box display="flex" alignItems="center">
- <BatteryCharging90Icon
+ <Typography variant="caption" >
+ vol:
+ <Box
+ component={"span"}
sx={{
- width: 12,
- height: 12,
- color: record.vol > 50 ? 'green' : record.vol > 20 ? 'orange' : 'red',
- }}
- />
- <Typography variant="body2">
+ color: record.vol < record.chargeLine ? red[400] : 'inherit'
+ }}>
{record.vol}
- </Typography>
- </Box>
+ </Box>
+ </Typography>
</Box>
<Box display="flex" flexDirection="column" alignItems="center">
<AgvAvatar />
- <Box textAlign="center" marginTop={1}>
- <Typography variant="subtitle2">
+ <Box textAlign="center" marginTop={2}>
+ <Typography
+ variant="subtitle2"
+ color="textSecondary"
+ component="div"
+ sx={{ fontWeight: 'bold' }}
+ >
{record.agvStatus}
</Typography>
<Typography variant="overline" sx={{ opacity: .7 }}>
@@ -75,37 +87,58 @@
</Box>
<Box display="flex" justifyContent="space-around" width="100%">
<Box display="flex" alignItems="center">
- <ContactsIcon color="disabled" sx={{ mr: 1 }} />
- <div>
- <Typography variant="subtitle2" sx={{ mb: -1 }}>
- {record.nb_contacts}
- </Typography>
- <Typography variant="caption" color="textSecondary">
- {record.nb_contacts
- ? record.nb_contacts > 1
- ? 'contacts'
- : 'contact'
- : 'contact'}
- </Typography>
- </div>
- </Box>
- <Box sx={{ display: 'flex', alignItems: 'center' }}>
- <DealIcon color="disabled" sx={{ mr: 1 }} />
- <div>
- <Typography variant="subtitle2" sx={{ mb: -1 }}>
- {record.nb_deals}
- </Typography>
- <Typography variant="caption" color="textSecondary">
- {record.nb_deals
- ? record.nb_deals > 1
- ? 'deals'
- : 'deal'
- : 'deal'}
- </Typography>
- </div>
+ <TaskAvatarGroupIterator taskIds={record.taskIds} />
</Box>
</Box>
</Paper>
</Link>
);
};
+
+const TaskAvatarGroupIterator = ({ taskIds }) => {
+ const dataProvider = useDataProvider();
+ const [data, setData] = React.useState([]);
+ const [total, setTotal] = React.useState(0);
+
+ React.useEffect(() => {
+ if (taskIds?.length > 0) {
+ dataProvider.getMany('task', { ids: taskIds }).then(res => {
+ if (res.data?.length > 0) {
+ setTotal(res.data.length);
+ setData(res.data);
+ }
+ })
+ }
+ }, [taskIds])
+
+ return (
+ <AvatarGroup
+ max={4}
+ total={total}
+ spacing="medium"
+ sx={{
+ '& .MuiAvatar-circular': {
+ width: 35,
+ height: 25,
+ fontSize: '0.7rem',
+ },
+ }}
+ >
+ {data.length > 0 ? (
+ data.map((record) => (
+ <Avatar
+ key={record.id}
+ title={`${record.seqNum}`}
+ sx={{ bgcolor: blueGrey[500] }}
+ >
+ {record.seqNum.slice(0, 4)}
+ </Avatar>
+ ))
+ ) : (
+ <Avatar title="No tasks" >
+ N/A
+ </Avatar>
+ )}
+ </AvatarGroup>
+ );
+}
--
Gitblit v1.9.1