From 41da932b9629d7f1426e2030412df1a41f65ff6e Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期一, 21 十月 2024 11:05:14 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/insight/agv/AgvMain.jsx | 129 ++++++++++++++++++++++++++----------------- 1 files changed, 78 insertions(+), 51 deletions(-) diff --git a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx index 1ab1139..68fbd29 100644 --- a/zy-acs-flow/src/map/insight/agv/AgvMain.jsx +++ b/zy-acs-flow/src/map/insight/agv/AgvMain.jsx @@ -1,6 +1,6 @@ import React, { useRef, useEffect, useState } from 'react'; import * as THREE from 'three'; -import { useTranslate } from 'react-admin'; +import { useTranslate, useDataProvider, useRedirect } from 'react-admin'; import { Box, CircularProgress, @@ -12,10 +12,12 @@ Stack, useTheme, } from '@mui/material'; +import { useNotification } from '../../Notification'; import AgvThree from './AgvThree'; -import { getAgvInfo } from '../../http'; +import { handleRestoreAgvAll } from '../../http'; import BoolValueIcon from '../BoolValueIcon'; import ConfirmButton from '../../../page/components/ConfirmButton'; +import { grey } from '@mui/material/colors'; let three; @@ -31,8 +33,8 @@ } } -const renderThree = (info, curAgvNo) => { - if (info && three) { +const renderThree = (curAgvNo) => { + if (curAgvNo && three) { three.generateMesh((loader, addObject) => { const loadModel = (path) => { return new Promise((resolve, reject) => { @@ -67,7 +69,7 @@ addObject(agvGroup); - three.rePerspective(350, 450); + three?.rePerspective(350, 450); }).catch((error) => { console.error(error); @@ -77,41 +79,45 @@ } const AgvMain = (props) => { - const { data, curAgvNo, setCurAgvNo } = props; + const { curAgvNo, curAgvInfo: info, fetchAgvInfo } = props; const theme = useTheme(); const translate = useTranslate(); + const dataProvider = useDataProvider(); + const redirect = useRedirect(); + const notify = useNotification(); const containerRef = useRef(); const [loading, setLoading] = useState(true); - const [info, setInfo] = useState(null); - - useEffect(() => { - if (data) { - getAgvInfo(data.no, (response) => { - setInfo(response); - setCurAgvNo(data.no); - }); - } - }, [data]); useEffect(() => { if (info) { - // console.log(info); endThree(); setLoading(true); setTimeout(() => { startThree(containerRef.current); - three.handleClick = (objName) => { - setCurAgvNo(objName); - }; - renderThree(info, curAgvNo); + renderThree(curAgvNo); setLoading(false); }, 200); } return endThree; }, [info]); - const handleReset = () => { - alert(1) + const handleRestoreAll = () => { + handleRestoreAgvAll({ agvNo: info.agvNo }); + } + + const updateStatus = () => { + dataProvider.update('agv', { + id: info.agvId, + data: { + status: info.status === 0 ? 1 : 0 + } + }).then(({ data }) => { + fetchAgvInfo(curAgvNo); + notify.success(translate('common.response.success')); + }).catch((error) => { + notify.success(translate('common.response.fail')); + console.error(`Error: ${error.message}`); + }); } return ( @@ -130,7 +136,7 @@ left="50%" style={{ transform: 'translate(-50%, -50%)' }} > - <CircularProgress /> + <CircularProgress sx={{ color: grey[50] }} /> </Box> )} </Box> @@ -142,8 +148,11 @@ flexDirection: 'column', justifyContent: 'space-between', }}> - <Box> - <Grid container spacing={2} style={{ marginTop: '0px' }}> + <Box sx={{ + height: "70%", + overflowY: 'auto' + }}> + <Grid container spacing={1.5} style={{ marginTop: '0px' }}> <Grid item xs={12}> <KeyValuePair label={translate('table.field.agv.uuid')} value={info?.agvNo} /> </Grid> @@ -174,29 +183,49 @@ </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> + <Box sx={{ + height: "30%", + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-end' + }}> + <Grid container spacing={2} style={{ marginTop: '0px' }}> + <Grid item xs={12}> + <Stack spacing={2} mt={2}> + <Button + color="primary" + variant="contained" + onClick={() => { + redirect(`/agv/${info?.agvId}/show`); + }} + > + {translate('page.map.settings.map.more.title')} + </Button> + {info && ( + info.status === 1 + ? <Button variant="contained" color="error" fullWidth onClick={() => { + updateStatus(); + }}> + {translate('page.map.action.disable')} + </Button> + : <Button variant="contained" fullWidth onClick={() => { + updateStatus(); + }}> + {translate('page.map.action.enable')} + </Button> + )} + <ConfirmButton + label="page.map.action.restoreALl" + color="inherit" + // variant="contained" + onConfirm={() => { + handleRestoreAll(); + }} + /> + </Stack> + </Grid> </Grid> - </Grid> + </Box> </Paper> </Box> </Box> @@ -204,14 +233,12 @@ } const KeyValuePair = ({ label, value, bool }) => { - console.log({ 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' }} + sx={{ minWidth: '80px', fontWeight: 'bold', color: 'text.secondary', textAlign: 'left' }} > {label}: </Typography> -- Gitblit v1.9.1