From 3fa7cdec6ce44f07a0dc7e1910511ead606990f3 Mon Sep 17 00:00:00 2001
From: zhang <zc857179121@qq.com>
Date: 星期四, 11 九月 2025 08:19:53 +0800
Subject: [PATCH] 1
---
zy-acs-flow/src/page/mission/MissionCard.jsx | 107 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 70 insertions(+), 37 deletions(-)
diff --git a/zy-acs-flow/src/page/mission/MissionCard.jsx b/zy-acs-flow/src/page/mission/MissionCard.jsx
index 961aac4..99bbe5f 100644
--- a/zy-acs-flow/src/page/mission/MissionCard.jsx
+++ b/zy-acs-flow/src/page/mission/MissionCard.jsx
@@ -1,35 +1,44 @@
+import React, { useState, useEffect } from 'react';
import { Draggable } from '@hello-pangea/dnd';
-import { Box, Card, Typography } from '@mui/material';
-import { ReferenceField, useRedirect } from 'react-admin';
-import { CompanyAvatar } from '../companies/CompanyAvatar';
-import { Deal } from '../types';
+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 = ({ deal, index }) => {
- if (!deal) return null;
+export const MissionCard = ({ mission, index }) => {
+ if (!mission) return null;
return (
- <Draggable draggableId={String(deal.id)} index={index}>
+ <Draggable draggableId={String(mission.id)} index={index}>
{(provided, snapshot) => (
- <DealCardContent
+ <MissionCardContent
provided={provided}
snapshot={snapshot}
- deal={deal}
+ mission={mission}
/>
)}
</Draggable>
);
};
-export const DealCardContent = ({
- provided,
- snapshot,
- deal,
-}) => {
+export const MissionCardContent = ({ provided, snapshot, mission }) => {
+ const theme = useTheme();
+ const translate = useTranslate();
const redirect = useRedirect();
const handleClick = () => {
- redirect(`/deals/${deal.id}/show`, undefined, undefined, undefined, {
+ redirect(`/mission/${mission.id}/show`, undefined, undefined, undefined, {
_scrollToTop: false,
});
+ };
+
+ const [sliderValue, setSliderValue] = useState(mission.progress || 0);
+
+ useEffect(() => {
+ setSliderValue(mission.progress || 0);
+ }, [mission.progress]);
+
+ const handleSliderChange = (event, newValue) => {
+ setSliderValue(newValue);
};
return (
@@ -44,32 +53,56 @@
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">
- <ReferenceField
- source="company_id"
- record={deal}
- reference="companies"
- link={false}
- >
- <CompanyAvatar width={20} height={20} />
- </ReferenceField>
- <Box sx={{ marginLeft: 1 }}>
- <Typography variant="body2" gutterBottom>
- {deal.name}
+ <Box padding={2} pb={1} display="flex" flexDirection="column">
+ <Box display="flex" alignItems="center" mb={1.5}>
+ <Avatar
+ sx={{
+ width: 40,
+ height: 28,
+ bgcolor: theme.palette.primary.main,
+ }}
+ variant="rounded"
+ >
+ {mission.agv}
+ </Avatar>
+ <Divider orientation="vertical" flexItem sx={{ margin: '0 8px' }} />
+ <Typography variant="body1" noWrap>
+ {mission.groupNo}
</Typography>
- <Typography variant="caption" color="textSecondary">
- {deal.amount.toLocaleString('en-US', {
- notation: 'compact',
- style: 'currency',
- currency: 'USD',
- currencyDisplay: 'narrowSymbol',
- minimumSignificantDigits: 3,
- })}
- {deal.category ? `, ${deal.category}` : ''}
- </Typography>
+ </Box>
+ <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}
+ value={sliderValue}
+ onChange={handleSliderChange}
+ getAriaValueText={(value) => {
+ return `${value}%`;
+ }}
+ color="secondary"
+ size="small"
+ marks
+ />
+ </Stack>
</Box>
</Box>
</Card>
--
Gitblit v1.9.1