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/mission/MissionCard.jsx |   78 ++++++++++++++++++++-------------------
 1 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/zy-acs-flow/src/page/mission/MissionCard.jsx b/zy-acs-flow/src/page/mission/MissionCard.jsx
index 62bb4d9..2a7bdae 100644
--- a/zy-acs-flow/src/page/mission/MissionCard.jsx
+++ b/zy-acs-flow/src/page/mission/MissionCard.jsx
@@ -1,7 +1,8 @@
 import { Draggable } from '@hello-pangea/dnd';
-import { Box, Card, Typography, Avatar, Divider } from '@mui/material';
-import { ReferenceField, useRedirect } from 'react-admin';
+import { Box, Card, Typography, Avatar, Divider, Stack, Slider, useTheme } from '@mui/material';
+import { ReferenceField, useRedirect, useTranslate } from 'react-admin';
 import { blueGrey } from '@mui/material/colors';
+import { styled } from '@mui/material/styles';
 
 export const MissionCard = ({ mission, index }) => {
     if (!mission) return null;
@@ -20,15 +21,14 @@
 };
 
 export const MissionCardContent = ({ provided, snapshot, mission, }) => {
+    const theme = useTheme();
+    const translate = useTranslate();
     const redirect = useRedirect();
     const handleClick = () => {
         redirect(`/mission/${mission.id}/show`, undefined, undefined, undefined, {
             _scrollToTop: false,
         });
     };
-
-    console.log(mission);
-
 
     return (
         <Box
@@ -42,51 +42,53 @@
                 style={{
                     opacity: snapshot?.isDragging ? 0.9 : 1,
                     transform: snapshot?.isDragging ? 'rotate(-2deg)' : '',
+                    transition: '0.3s',
                 }}
                 elevation={snapshot?.isDragging ? 3 : 1}
             >
-                <Box padding={1} display="flex" flexDirection="column">
-                    <Box display="flex" flexDirection="row">
+                <Box padding={2} pb={1} display="flex" flexDirection="column">
+                    <Box display="flex" alignItems="center" mb={1.5}>
                         <Avatar
                             sx={{
-                                '& img': { objectFit: 'contain' },
-                                width: 20,
-                                height: 20,
-                                fontSize: '.8rem',
-                                bgcolor: blueGrey[500]
+                                width: 30,
+                                height: 30,
+                                bgcolor: theme.palette.primary.main,
                             }}
                         >
                             {mission.agv}
                         </Avatar>
-                        <Divider />
-                        <Typography variant="body2" >
+                        <Divider orientation="vertical" flexItem sx={{ margin: '0 8px' }} />
+                        <Typography variant="body1" noWrap>
                             {mission.groupNo}
                         </Typography>
                     </Box>
-
-                    <Box sx={{ marginLeft: 1 }}>
-                        <Typography variant="body2" gutterBottom>
-                            groupNo {mission.groupNo}
-                        </Typography>
-                        <Typography variant="caption" color="textSecondary">
-                            posType  {mission.posType}
-                        </Typography>
-                    </Box>
-                    <Box sx={{ marginLeft: 1 }}>
-                        <Typography variant="body2" gutterBottom>
-                            taskNos  {mission.taskNos}
-                        </Typography>
-                        <Typography variant="caption" color="textSecondary">
-                            backpack{mission.backpack}
-                        </Typography>
-                    </Box>
-                    <Box sx={{ marginLeft: 1 }}>
-                        <Typography variant="body2" gutterBottom>
-                            destCode {mission.destCode}
-                        </Typography>
-                        <Typography variant="caption" color="textSecondary">
-                            agv {mission.agv}
-                        </Typography>
+                    <Box>
+                        <Stack direction="row" justifyContent="space-between" mb={1}>
+                            <Typography variant="caption" color="textSecondary">
+                                {translate('table.field.mission.backpack')} : {mission.backpack}
+                            </Typography>
+                            <Typography variant="caption" color="textPrimary">
+                                {translate('table.field.mission.code')}: {mission.currCode}
+                            </Typography>
+                        </Stack>
+                        <Divider orientation="horizontal" flexItem />
+                        <Stack direction="row" justifyContent="space-between" >
+                            <Typography variant="overline">
+                                {translate('table.field.mission.task')}: [{mission.taskNos.join(',')}]
+                            </Typography>
+                        </Stack>
+                        <Stack pl={0.5} pr={0.5} direction="row" spacing={1} alignItems="center" mb={.6}>
+                            <Slider
+                                aria-label="Progress"
+                                defaultValue={mission.progress}
+                                getAriaValueText={(value) => {
+                                    return `${value}%`;
+                                }}
+                                color="secondary"
+                                size="small"
+                                marks
+                            />
+                        </Stack>
                     </Box>
                 </Box>
             </Card>

--
Gitblit v1.9.1