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/agv/show/AgvShowDetail.jsx | 525 ++++++++++++++++++++++------------------------------------
1 files changed, 201 insertions(+), 324 deletions(-)
diff --git a/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx b/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx
index 3166e66..6df36d8 100644
--- a/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx
+++ b/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx
@@ -6,29 +6,48 @@
useListContext,
useRecordContext,
useTranslate,
+ useResourceContext,
} from 'react-admin';
import { Link as RouterLink, useLocation } from 'react-router-dom';
import {
Box,
Button,
- Card,
- CardContent,
+ Grid,
Skeleton,
Stack,
Typography,
Divider,
} from '@mui/material';
import { formatDistance } from 'date-fns';
+import request from '@/utils/request';
+const ITEM_COL = 3;
+const GRID_CONTAINER_MAX_WIDTH = '100%';
export const AgvShowDetail = (props) => {
- const { record, ...rest } = props;
- const translate = useTranslate();
- const [data, setData] = useState(null);
+ const { agvId, setOnline } = props;
+ const [record, setRecord] = useState(null);
+ const resource = useResourceContext();
useEffect(() => {
-
- }, []);
+ const http = async (agvId) => {
+ if (agvId) {
+ const res = await request.get(resource + '/' + agvId);
+ const { code, msg, data } = res.data;
+ if (code === 200) {
+ setOnline(data.online);
+ setRecord(data);
+ } else {
+ setRecord(null);
+ }
+ }
+ }
+ const intervalId = setInterval(() => {
+ http(agvId);
+ }, 1000);
+ http(agvId);
+ return () => clearInterval(intervalId);
+ }, [agvId]);
if (!record) {
return (
@@ -54,327 +73,185 @@
</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 m={2}>
+ <AgvMainDetail record={record} />
+ <Divider sx={{ mt: 2, mb: 2 }} />
+ <AgvMoreDetail record={record} />
+ <Divider sx={{ mt: 2, mb: 2 }} />
+ <AgvModelDetail record={record} />
</Box>
</>
)
+}
+
+const DetailTitle = ({ title, ...rest }) => {
+ const translate = useTranslate();
+ return (
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ {...rest}
+ >
+ {translate(title)}
+ </Typography>
+ )
+}
+
+const DetailValue = ({ value, fontBold = false }) => {
+ return (
+ <Typography
+ variant="body2"
+ color={fontBold ? 'textSecondary' : 'textPrimary'}
+ width='80%'
+ sx={{
+ wordWrap: 'break-word',
+ whiteSpace: 'normal',
+ fontWeight: fontBold && 'bold',
+ }}
+ >
+ {value}
+ </Typography>
+ )
+}
+
+
+const AgvMainDetail = ({ record }) => {
+ const translate = useTranslate();
+ return (
+ <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='common.field.status' />
+ <DetailValue fontBold value={record.agvDetail.statusDesc} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.pos' />
+ <DetailValue value={record.agvDetail.pos === 1 ? translate('common.enums.true') : translate('common.enums.false')} />
+ </Grid >
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.code' />
+ <DetailValue value={record.agvDetail.code$} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agv.ip' />
+ <DetailValue value={record.ip} />
+ </Grid>
+ </Grid>
+ )
+}
+
+const AgvMoreDetail = ({ record }) => {
+ const translate = useTranslate();
+ return (
+ <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}>
+
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.agvAngle' />
+ <DetailValue value={record.agvDetail.agvAngle} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.gyroAngle' />
+ <DetailValue value={record.agvDetail.gyroAngle} />
+ </Grid>
+
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.encoderAngle' />
+ <DetailValue value={record.agvDetail.encoderAngle} />
+ </Grid>
+
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.high' />
+ <DetailValue value={record.agvDetail.high} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.vol' />
+ <DetailValue value={record.agvDetail.vol} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.soc' />
+ <DetailValue value={record.agvDetail.soc} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.soh' />
+ <DetailValue value={record.agvDetail.soh} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.tempe' />
+ <DetailValue value={record.agvDetail.tempe} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.motorFail' />
+ <DetailValue value={record.agvDetail.motorFail} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvDetail.workDistance' />
+ <DetailValue value={record.agvDetail.workDistance} />
+ </Grid>
+ </Grid >
+ )
+}
+const AgvModelDetail = ({ record }) => {
+ const translate = useTranslate();
+ return (
+ <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.name' />
+ <DetailValue fontBold value={record.agvModelData.name} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.length' />
+ <DetailValue value={record.agvModelData.length} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.width' />
+ <DetailValue value={record.agvModelData.width} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.height' />
+ <DetailValue value={record.agvModelData.height} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.liftHeight' />
+ <DetailValue value={record.agvModelData.liftHeight} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.diameter' />
+ <DetailValue value={record.agvModelData.diameter} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.backpack' />
+ <DetailValue value={record.agvModelData.backpack} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.lowBattery' />
+ <DetailValue value={record.agvModelData.lowBattery} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.quaBattery' />
+ <DetailValue value={record.agvModelData.quaBattery} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.travelSpeed' />
+ <DetailValue value={record.agvModelData.travelSpeed} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.workDirection' />
+ <DetailValue value={record.agvModelData.workDirection} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.allDirection' />
+ <DetailValue value={record.agvModelData.allDirection === 1 ? translate('common.enums.true') : translate('common.enums.false')} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.protocol' />
+ <DetailValue value={record.agvModelData.protocol} />
+ </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='table.field.agvModel.mqttTopic' />
+ <DetailValue value={record.agvModelData.mqttTopic} />
+ </Grid>
+ </Grid>
+ )
}
\ No newline at end of file
--
Gitblit v1.9.1