From 27c410ed7bbf44d6031c8cc62095a64a1f6bdad2 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 20 九月 2024 09:58:14 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/page/agv/AgvAvatar.jsx | 23 +++++++
zy-acs-flow/src/page/agv/GridList.jsx | 47 +++++++--------
zy-acs-flow/src/page/agv/AgvCard.jsx | 94 +++++++++++++++++++++++++++++++
3 files changed, 140 insertions(+), 24 deletions(-)
diff --git a/zy-acs-flow/src/page/agv/AgvAvatar.jsx b/zy-acs-flow/src/page/agv/AgvAvatar.jsx
new file mode 100644
index 0000000..4b894ed
--- /dev/null
+++ b/zy-acs-flow/src/page/agv/AgvAvatar.jsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Avatar } from '@mui/material';
+import { useRecordContext } from 'react-admin';
+
+export const AgvAvatar = (props) => {
+ const { width = 40, height = 40 } = props;
+ const record = useRecordContext(props);
+ if (!record) return null;
+ return (
+ <Avatar
+ src={record.logo?.src}
+ alt={record.name}
+ sx={{
+ '& img': { objectFit: 'contain' },
+ width,
+ height,
+ fontSize: height !== 40 ? '0.6rem' : undefined,
+ }}
+ >
+ {record.name.charAt(0)}
+ </Avatar>
+ );
+};
diff --git a/zy-acs-flow/src/page/agv/AgvCard.jsx b/zy-acs-flow/src/page/agv/AgvCard.jsx
new file mode 100644
index 0000000..b18bb74
--- /dev/null
+++ b/zy-acs-flow/src/page/agv/AgvCard.jsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Paper, Typography, Box } from '@mui/material';
+import ContactsIcon from '@mui/icons-material/AccountCircle';
+import DealIcon from '@mui/icons-material/MonetizationOn';
+import {
+ useCreatePath,
+ SelectField,
+ useRecordContext,
+ Link,
+ useResourceContext,
+} from 'react-admin';
+
+import { AgvAvatar } from './AgvAvatar';
+
+export const AgvCard = (props) => {
+ const resource = useResourceContext();
+ const [elevation, setElevation] = useState(1);
+ const createPath = useCreatePath();
+ const record = useRecordContext(props);
+ if (!record) return null;
+
+ return (
+ <Link
+ to={createPath({
+ resource: resource,
+ id: record.id,
+ type: 'show',
+ })}
+ underline="none"
+ onMouseEnter={() => setElevation(3)}
+ onMouseLeave={() => setElevation(1)}
+ >
+ <Paper
+ sx={{
+ height: 200,
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ padding: '1em',
+ }}
+ elevation={elevation}
+ >
+ <Box display="flex" flexDirection="column" alignItems="center">
+ <AgvAvatar />
+ <Box textAlign="center" marginTop={1}>
+ <Typography variant="subtitle2">
+ {record.name}
+ </Typography>
+ <SelectField
+ color="textSecondary"
+ source="sector"
+ choices={[
+ { id: '1', name: '1' }
+ ]}
+ />
+ </Box>
+ </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>
+ </Box>
+ </Box>
+ </Paper>
+ </Link>
+ );
+};
diff --git a/zy-acs-flow/src/page/agv/GridList.jsx b/zy-acs-flow/src/page/agv/GridList.jsx
index be1e4b1..2351198 100644
--- a/zy-acs-flow/src/page/agv/GridList.jsx
+++ b/zy-acs-flow/src/page/agv/GridList.jsx
@@ -2,7 +2,7 @@
import { Box, Paper, Typography } from '@mui/material';
import { RecordContextProvider, useListContext } from 'react-admin';
-// import { CompanyCard } from './CompanyCard';
+import { AgvCard } from './AgvCard';
const times = (nbChildren, fn) => Array.from({ length: nbChildren }, (_, key) => fn(key));
@@ -23,33 +23,32 @@
</Box>
);
-// const LoadedGridList = () => {
-// const { data, error, isPending } = useListContext();
+const LoadedGridList = () => {
+ const { data, error, isPending } = useListContext();
-// if (isPending || error) return null;
+ if (isPending || error) return null;
-// return (
-// <Box
-// width="100%"
-// gap={1}
-// display="grid"
-// gridTemplateColumns="repeat(auto-fill, minmax(180px, 1fr))"
-// >
-// {data.map(record => (
-// <RecordContextProvider key={record.id} value={record}>
-// <CompanyCard />
-// </RecordContextProvider>
-// ))}
+ return (
+ <Box
+ width="100%"
+ gap={1}
+ display="grid"
+ gridTemplateColumns="repeat(auto-fill, minmax(180px, 1fr))"
+ >
+ {data.map(record => (
+ <RecordContextProvider key={record.id} value={record}>
+ <AgvCard />
+ </RecordContextProvider>
+ ))}
-// {data.length === 0 && (
-// <Typography p={2}>No companies found</Typography>
-// )}
-// </Box>
-// );
-// };
+ {data.length === 0 && (
+ <Typography p={2}>No companies found</Typography>
+ )}
+ </Box>
+ );
+};
export const ImageList = () => {
const { isPending } = useListContext();
- // return isPending ? <LoadingGridList /> : <LoadedGridList />;
- return <LoadingGridList />;
+ return isPending ? <LoadingGridList /> : <LoadedGridList />;
};
--
Gitblit v1.9.1