From c07c14d7768098f82807d8598ad3fb5c392bd3c0 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期五, 20 九月 2024 14:52:36 +0800 Subject: [PATCH] # --- zy-acs-flow/src/page/agv/AgvCard.jsx | 78 ++++++++++++++++++++++---------------- 1 files changed, 45 insertions(+), 33 deletions(-) diff --git a/zy-acs-flow/src/page/agv/AgvCard.jsx b/zy-acs-flow/src/page/agv/AgvCard.jsx index 6e695e8..53e4a00 100644 --- a/zy-acs-flow/src/page/agv/AgvCard.jsx +++ b/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, Chip, Stack } from '@mui/material'; +import { Paper, Typography, Box, AvatarGroup, Avatar } from '@mui/material'; import ContactsIcon from '@mui/icons-material/AccountCircle'; import DealIcon from '@mui/icons-material/MonetizationOn'; import { @@ -9,6 +9,7 @@ useRecordContext, Link, useResourceContext, + useDataProvider, } from 'react-admin'; import PulseSignal from '../components/PulseSignal'; import { AgvAvatar } from './AgvAvatar'; @@ -20,10 +21,7 @@ const createPath = useCreatePath(); const record = useRecordContext(props); if (!record) return null; - console.log(record); - - return ( <Link to={createPath({ @@ -62,7 +60,7 @@ </Box> <Box display="flex" flexDirection="column" alignItems="center"> <AgvAvatar /> - <Box textAlign="center" marginTop={1}> + <Box textAlign="center" marginTop={2}> <Typography variant="subtitle2"> {record.agvStatus} </Typography> @@ -73,37 +71,51 @@ </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.map((record) => ( + <Avatar + key={record.id} + title={`${record.seqNum}`} + > + {record.seqNum} + </Avatar> + ))} + </AvatarGroup> + ); +} -- Gitblit v1.9.1