From 600a80aafda97b23f693640647aee902e9d39e61 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 21 九月 2024 13:42:32 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/i18n/en.js | 4
zy-acs-flow/src/i18n/zh.js | 4
zy-acs-flow/src/page/agv/AgvShow.jsx | 2
zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx | 373 +++++++++++++---------------------------------------
4 files changed, 102 insertions(+), 281 deletions(-)
diff --git a/zy-acs-flow/src/i18n/en.js b/zy-acs-flow/src/i18n/en.js
index eef5fe8..2805f4b 100644
--- a/zy-acs-flow/src/i18n/en.js
+++ b/zy-acs-flow/src/i18n/en.js
@@ -322,8 +322,8 @@
},
agvModel: {
uuid: "uuid",
- type: "type",
- name: "name",
+ type: "model type",
+ name: "model name",
length: "length",
width: "width",
height: "height",
diff --git a/zy-acs-flow/src/i18n/zh.js b/zy-acs-flow/src/i18n/zh.js
index 7c2c629..ee673c8 100644
--- a/zy-acs-flow/src/i18n/zh.js
+++ b/zy-acs-flow/src/i18n/zh.js
@@ -321,8 +321,8 @@
},
agvModel: {
uuid: "缂栧彿",
- type: "绫诲瀷",
- name: "鍚嶇О",
+ type: "杞︾被鍨�",
+ name: "杞﹀瀷鍚�",
length: "闀垮害",
width: "瀹藉害",
height: "楂樺害",
diff --git a/zy-acs-flow/src/page/agv/AgvShow.jsx b/zy-acs-flow/src/page/agv/AgvShow.jsx
index f0288eb..690b006 100644
--- a/zy-acs-flow/src/page/agv/AgvShow.jsx
+++ b/zy-acs-flow/src/page/agv/AgvShow.jsx
@@ -57,7 +57,7 @@
alignItems: 'center',
}}>
<CustomerTopToolBar />
- <Box mt={1}>
+ <Box mt={1} mr={1}>
<Stack direction='row'>
<Typography
variant="h5"
diff --git a/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx b/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx
index 035fa32..5c4c26a 100644
--- a/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx
+++ b/zy-acs-flow/src/page/agv/show/AgvShowDetail.jsx
@@ -12,7 +12,6 @@
import {
Box,
Button,
- Card,
Grid,
Skeleton,
Stack,
@@ -23,6 +22,7 @@
import request from '@/utils/request';
const ITEM_COL = 3;
+const GRID_CONTAINER_MAX_WIDTH = '100%';
export const AgvShowDetail = (props) => {
const { agvId } = props;
@@ -71,29 +71,44 @@
return (
<>
- <Box mt={2}>
+ <Box m={2}>
<AgvMainDetail record={record} />
+ <Divider sx={{ m: 2 }} />
<AgvMoreDetail record={record} />
+ <Divider sx={{ m: 2 }} />
<AgvModelDetail record={record} />
</Box>
</>
)
}
-const AgvMainDetail = ({ record }) => {
+const DetailTitle = ({ title }) => {
const translate = useTranslate();
return (
- <Grid container spacing={1} sx={{ maxWidth: '75%' }}>
+ <Typography
+ color="textSecondary"
+ variant="caption"
+ >
+ {translate(title)}
+ </Typography>
+ )
+}
+
+const DetailValue = ({ value }) => {
+ return (
+ <Typography variant="body2">
+ {value}
+ </Typography>
+ )
+}
+
+
+const AgvMainDetail = ({ record }) => {
+ return (
+ <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- ip
- </Typography>
- <Typography variant="body2">
- {record.ip}
- </Typography>
+ <DetailTitle title='table.field.agv.ip' />
+ <DetailValue value={record.ip} />
</Grid>
</Grid>
)
@@ -102,154 +117,62 @@
const AgvMoreDetail = ({ record }) => {
const translate = useTranslate();
return (
- <Grid container spacing={1} sx={{ maxWidth: '75%' }}>
+ <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}>
<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>
+ <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}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- code
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.code$}
- </Typography>
+ <DetailTitle title='table.field.agvDetail.agvAngle' />
+ <DetailValue value={record.agvDetail.agvAngle} />
</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>
+ <DetailTitle title='table.field.agvDetail.gyroAngle' />
+ <DetailValue value={record.agvDetail.gyroAngle} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- encoderAngle
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.encoderAngle}
- </Typography>
+ <DetailTitle title='table.field.agvDetail.encoderAngle' />
+ <DetailValue value={record.agvDetail.encoderAngle} />
</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>
+ <DetailTitle title='table.field.agvDetail.high' />
+ <DetailValue value={record.agvDetail.high} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- soc
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.soc}
- </Typography>
+ <DetailTitle title='table.field.agvDetail.vol' />
+ <DetailValue value={record.agvDetail.vol} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- soh
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.soh}
- </Typography>
+ <DetailTitle title='table.field.agvDetail.soc' />
+ <DetailValue value={record.agvDetail.soc} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- tempe
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.tempe}
- </Typography>
+ <DetailTitle title='table.field.agvDetail.soh' />
+ <DetailValue value={record.agvDetail.soh} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- motorFail
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.motorFail}
- </Typography>
+ <DetailTitle title='table.field.agvDetail.tempe' />
+ <DetailValue value={record.agvDetail.tempe} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- workDistance
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.workDistance}
- </Typography>
+ <DetailTitle title='table.field.agvDetail.motorFail' />
+ <DetailValue value={record.agvDetail.motorFail} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- status
- </Typography>
- <Typography variant="body2">
- {record.agvDetail.statusDesc}
- </Typography>
+ <DetailTitle title='table.field.agvDetail.workDistance' />
+ <DetailValue value={record.agvDetail.workDistance} />
</Grid>
- </Grid>
+ <Grid item xs={ITEM_COL}>
+ <DetailTitle title='common.field.status' />
+ <DetailValue value={record.agvDetail.statusDesc} />
+ </Grid>
+ </Grid >
)
}
const AgvModelDetail = ({ record }) => {
@@ -257,164 +180,62 @@
console.log(record);
return (
- <Grid container spacing={1} sx={{ maxWidth: '75%' }}>
+ <Grid container spacing={1} sx={{ maxWidth: GRID_CONTAINER_MAX_WIDTH }}>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model name
- </Typography>
- <Typography variant="body2">
- {record.agvModelData.name}
- </Typography>
+ <DetailTitle title='table.field.agvModel.name' />
+ <DetailValue value={record.agvModelData.name} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model length
- </Typography>
- <Typography variant="body2">
- {record.agvModelData.length}
- </Typography>
+ <DetailTitle title='table.field.agvModel.length' />
+ <DetailValue value={record.agvModelData.length} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model width
- </Typography>
- <Typography variant="body2">
- {record.agvModelData.width}
- </Typography>
+ <DetailTitle title='table.field.agvModel.width' />
+ <DetailValue value={record.agvModelData.width} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model height
- </Typography>
- <Typography variant="body2">
- {record.agvModelData.height}
- </Typography>
+ <DetailTitle title='table.field.agvModel.height' />
+ <DetailValue value={record.agvModelData.height} />
</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>
+ <DetailTitle title='table.field.agvModel.liftHeight' />
+ <DetailValue value={record.agvModelData.liftHeight} />
</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>
+ <DetailTitle title='table.field.agvModel.diameter' />
+ <DetailValue value={record.agvModelData.diameter} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model workDirection
- </Typography>
- <Typography variant="body2">
- {record.agvModelData.workDirection}
- </Typography>
+ <DetailTitle title='table.field.agvModel.backpack' />
+ <DetailValue value={record.agvModelData.backpack} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model allDirection
- </Typography>
- <Typography variant="body2">
- {record.agvModelData.allDirection}
- </Typography>
+ <DetailTitle title='table.field.agvModel.lowBattery' />
+ <DetailValue value={record.agvModelData.lowBattery} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model protocol
- </Typography>
- <Typography variant="body2">
- {record.agvModelData.protocol}
- </Typography>
+ <DetailTitle title='table.field.agvModel.quaBattery' />
+ <DetailValue value={record.agvModelData.quaBattery} />
</Grid>
<Grid item xs={ITEM_COL}>
- <Typography
- color="textSecondary"
- variant="caption"
- >
- model mqttTopic
- </Typography>
- <Typography variant="body2">
- {record.agvModelData.mqttTopic}
- </Typography>
+ <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} />
+ </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>
)
--
Gitblit v1.9.1