From 519a5658a7fbae2b104948dc7b6118539b277112 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 21 九月 2024 13:22:58 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx | 668 +++++++++++++++++++++++++++++--------------------------
1 files changed, 348 insertions(+), 320 deletions(-)
diff --git a/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx b/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx
index 7aaf316..035fa32 100644
--- a/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx
+++ b/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx
@@ -13,7 +13,7 @@
Box,
Button,
Card,
- CardContent,
+ Grid,
Skeleton,
Stack,
Typography,
@@ -22,9 +22,10 @@
import { formatDistance } from 'date-fns';
import request from '@/utils/request';
+const ITEM_COL = 3;
+
export const AgvShowDetail = (props) => {
- const { agvId, ...rest } = props;
- const translate = useTranslate();
+ const { agvId } = props;
const [record, setRecord] = useState(null);
const resource = useResourceContext();
@@ -67,327 +68,354 @@
</Stack>
);
}
- console.log(record);
return (
<>
- <Box display="flex" m={2}>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- ip
- </Typography>
- <Typography variant="body2">
- {record.ip}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- position
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.pos === 1 ? translate('common.enums.true') : translate('common.enums.false')}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- code
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.code$}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- angle
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.agvAngle}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- gyroAngle
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.gyroAngle}
- </Typography>
- </Box>
-
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- encoderAngle
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.encoderAngle}
- </Typography>
- </Box>
-
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- high
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.high}
- </Typography>
- </Box>
-
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- vol
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.vol}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- soc
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.soc}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- soh
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.soh}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- tempe
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.tempe}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- motorFail
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.motorFail}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- workDistance
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.workDistance}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- status
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.statusDesc}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model name
- </Typography>
- <Typography variant="body2">
- {record.agvModel.name}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model length
- </Typography>
- <Typography variant="body2">
- {record.agvModel.length}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model width
- </Typography>
- <Typography variant="body2">
- {record.agvModel.width}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model height
- </Typography>
- <Typography variant="body2">
- {record.agvModel.height}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model liftHeight
- </Typography>
- <Typography variant="body2">
- {record.agvModel.liftHeight}
- </Typography>
- </Box>
-
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model diameter
- </Typography>
- <Typography variant="body2">
- {record.agvModel.diameter}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model backpack
- </Typography>
- <Typography variant="body2">
- {record.agvModel.backpack}
- </Typography>
- </Box>
-
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model lowBattery
- </Typography>
- <Typography variant="body2">
- {record.agvModel.lowBattery}
- </Typography>
- </Box>
-
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model quaBattery
- </Typography>
- <Typography variant="body2">
- {record.agvModel.quaBattery}
- </Typography>
- </Box>
-
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model travelSpeed
- </Typography>
- <Typography variant="body2">
- {record.agvModel.travelSpeed}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model workDirection
- </Typography>
- <Typography variant="body2">
- {record.agvModel.workDirection}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model allDirection
- </Typography>
- <Typography variant="body2">
- {record.agvModel.allDirection}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model protocol
- </Typography>
- <Typography variant="body2">
- {record.agvModel.protocol}
- </Typography>
- </Box>
- <Box display="flex" mr={5} flexDirection="column">
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model mqttTopic
- </Typography>
- <Typography variant="body2">
- {record.agvModel.mqttTopic}
- </Typography>
- </Box>
+ <Box mt={2}>
+ <AgvMainDetail record={record} />
+ <AgvMoreDetail record={record} />
+ <AgvModelDetail record={record} />
</Box>
</>
)
+}
+
+const AgvMainDetail = ({ record }) => {
+ const translate = useTranslate();
+ return (
+ <Grid container spacing={1} sx={{ maxWidth: '75%' }}>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ ip
+ </Typography>
+ <Typography variant="body2">
+ {record.ip}
+ </Typography>
+ </Grid>
+ </Grid>
+ )
+}
+
+const AgvMoreDetail = ({ record }) => {
+ const translate = useTranslate();
+ return (
+ <Grid container spacing={1} sx={{ maxWidth: '75%' }}>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ position
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.pos === 1 ? translate('common.enums.true') : translate('common.enums.false')}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ code
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.code$}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ angle
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.agvAngle}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ gyroAngle
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.gyroAngle}
+ </Typography>
+ </Grid>
+
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ encoderAngle
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.encoderAngle}
+ </Typography>
+ </Grid>
+
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ high
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.high}
+ </Typography>
+ </Grid>
+
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ vol
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.vol}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ soc
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.soc}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ soh
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.soh}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ tempe
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.tempe}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ motorFail
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.motorFail}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ workDistance
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.workDistance}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ status
+ </Typography>
+ <Typography variant="body2">
+ {record.agvDetail.statusDesc}
+ </Typography>
+ </Grid>
+ </Grid>
+ )
+}
+const AgvModelDetail = ({ record }) => {
+ const translate = useTranslate();
+ console.log(record);
+
+ return (
+ <Grid container spacing={1} sx={{ maxWidth: '75%' }}>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model name
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.name}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model length
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.length}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model width
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.width}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model height
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.height}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model liftHeight
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.liftHeight}
+ </Typography>
+ </Grid>
+
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model diameter
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.diameter}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model backpack
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.backpack}
+ </Typography>
+ </Grid>
+
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model lowBattery
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.lowBattery}
+ </Typography>
+ </Grid>
+
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model quaBattery
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.quaBattery}
+ </Typography>
+ </Grid>
+
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model travelSpeed
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.travelSpeed}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model workDirection
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.workDirection}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model allDirection
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.allDirection}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model protocol
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.protocol}
+ </Typography>
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ model mqttTopic
+ </Typography>
+ <Typography variant="body2">
+ {record.agvModelData.mqttTopic}
+ </Typography>
+ </Grid>
+ </Grid>
+ )
}
\ No newline at end of file
--
Gitblit v1.9.1