From 196ad66f41fe77fff13b15b05095dc7661251a5d Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 18 十月 2024 13:27:28 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/insight/agv/AgvMain.jsx |  122 ++++++++++++++++++++++++++++++++++++++--
 1 files changed, 116 insertions(+), 6 deletions(-)

diff --git a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx
index 8651c52..f507cd5 100644
--- a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx
+++ b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx
@@ -1,8 +1,21 @@
 import React, { useRef, useEffect, useState } from 'react';
 import * as THREE from 'three';
-import { Box, CircularProgress } from '@mui/material';
+import { useTranslate } from 'react-admin';
+import {
+    Box,
+    CircularProgress,
+    Grid,
+    Typography,
+    Paper,
+    Button,
+    Divider,
+    Stack,
+    useTheme,
+} from '@mui/material';
 import AgvThree from './AgvThree';
 import { getAgvInfo } from '../../http';
+import BoolValueIcon from '../BoolValueIcon';
+import ConfirmButton from '../../../page/components/ConfirmButton';
 
 let three;
 
@@ -41,8 +54,9 @@
                 loaderMesh.scale.set(scaleVal, scaleVal, scaleVal);
                 forkMesh.scale.set(scaleVal, scaleVal, scaleVal);
 
-                loaderMesh.position.set(0, 150, 0);;
-                forkMesh.position.set(0, 165, 0);;
+                bodyMesh.position.set(55, 0, 0);;
+                loaderMesh.position.set(55, 150, 0);;
+                forkMesh.position.set(55, 165, 0);;
 
                 const agvGroup = new THREE.Group();
                 agvGroup.add(bodyMesh);
@@ -53,8 +67,7 @@
 
                 addObject(agvGroup);
 
-                three.setNewSelectedMesh(curAgvNo);
-                three.rePerspective(350, 550);
+                three.rePerspective(350, 450);
 
             }).catch((error) => {
                 console.error(error);
@@ -65,6 +78,8 @@
 
 const AgvMain = (props) => {
     const { data, curAgvNo, setCurAgvNo } = props;
+    const theme = useTheme();
+    const translate = useTranslate();
     const containerRef = useRef();
     const [loading, setLoading] = useState(true);
     const [info, setInfo] = useState(null);
@@ -80,6 +95,7 @@
 
     useEffect(() => {
         if (info) {
+            // console.log(info);
             endThree();
             setLoading(true);
             setTimeout(() => {
@@ -89,10 +105,14 @@
                 };
                 renderThree(info, curAgvNo);
                 setLoading(false);
-            }, 300);
+            }, 200);
         }
         return endThree;
     }, [info]);
+
+    const handleReset = () => {
+        alert(1)
+    }
 
     return (
         <Box display="flex" height="100%">
@@ -115,9 +135,99 @@
                 )}
             </Box>
             <Box width="50%" height="100%" overflow="auto" pl={1}>
+                <Paper elevation={1} style={{
+                    height: "100%",
+                    padding: '16px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                }}>
+                    <Box>
+                        <Grid container spacing={2} style={{ marginTop: '0px' }}>
+                            <Grid item xs={12}>
+                                <KeyValuePair label={translate('table.field.agv.uuid')} value={info?.agvNo} />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <KeyValuePair label={translate('table.field.agvDetail.online')} value={info?.online} bool />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <KeyValuePair label={translate('table.field.agvDetail.pos')} value={info?.pos} bool />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <KeyValuePair label={translate('common.field.status')} value={info?.agvStatus} />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <KeyValuePair label={translate('table.field.agvDetail.vol')} value={info?.vol} />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <KeyValuePair label={translate('table.field.agvDetail.soc')} value={info?.soc} />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <KeyValuePair label={translate('table.field.agvDetail.agvAngle')} value={info?.direction} />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <KeyValuePair label={translate('table.field.agvDetail.backpack')} value={info?.backpack.filter(item => item.loaded === true).length} />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <KeyValuePair label={translate('table.field.agvDetail.task')} value={info?.taskIds?.join(',')} />
+                            </Grid>
+                        </Grid>
+                    </Box>
+
+                    <Grid container spacing={2} style={{ marginTop: '0px' }}>
+                        <Grid item xs={12}>
+                            <Stack spacing={2} mt={2}>
+                                <ConfirmButton
+                                    label="page.map.action.reset"
+                                    color="primary"
+                                    variant="contained"
+                                    onConfirm={() => {
+                                        handleReset();
+                                    }}
+                                />
+                                {info && (
+                                    info.status === 1
+                                        ? <Button variant="contained" color="error" fullWidth>
+                                            {translate('page.map.action.disable')}
+                                        </Button>
+                                        : <Button variant="contained" fullWidth>
+                                            {translate('page.map.action.enable')}
+                                        </Button>
+                                )}
+                            </Stack>
+                        </Grid>
+                    </Grid>
+                </Paper>
             </Box>
         </Box>
     );
 }
 
+const KeyValuePair = ({ label, value, bool }) => {
+    return (
+        <>
+            <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
+                <Typography
+                    variant="body2"
+                    sx={{ width: '80px', fontWeight: 'bold', color: 'text.secondary', textAlign: 'left' }}
+                >
+                    {label}:
+                </Typography>
+                {bool
+                    ? <BoolValueIcon
+                        value={value}
+                    />
+                    : <Typography
+                        variant="body2"
+                        sx={{ flexGrow: 1, color: 'text.primary', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+                    >
+                        {value}
+                    </Typography>
+                }
+            </Stack>
+            <Divider />
+        </>
+    )
+};
+
 export default AgvMain;

--
Gitblit v1.9.1