import React, { useRef, useEffect, useState } from 'react';
|
import * as THREE from 'three';
|
import { useTranslate, useDataProvider, useRedirect } from 'react-admin';
|
import {
|
Box,
|
CircularProgress,
|
Grid,
|
Typography,
|
Paper,
|
Button,
|
Divider,
|
Stack,
|
useTheme,
|
} from '@mui/material';
|
import { useNotification } from '../../Notification';
|
import AgvThree from './AgvThree';
|
import { handleRestoreAgvAll, handleAgvPatrol } from '../../http';
|
import BoolValueIcon from '../BoolValueIcon';
|
import ConfirmButton from '../../../page/components/ConfirmButton';
|
import { grey } from '@mui/material/colors';
|
|
const AgvMain = (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 threeRef = useRef(null);
|
|
const startThree = (dom) => {
|
if (threeRef.current) {
|
threeRef.current.destroy();
|
}
|
threeRef.current = new AgvThree(dom);
|
threeRef.current.startup();
|
}
|
|
const endThree = () => {
|
if (threeRef.current) {
|
threeRef.current.destroy();
|
threeRef.current = null;
|
}
|
}
|
|
const renderThree = (curAgvNo) => {
|
if (curAgvNo && threeRef.current) {
|
threeRef.current.generateMesh((loader, addObject) => {
|
const loadModel = (path) => {
|
return new Promise((resolve, reject) => {
|
loader.load(path, (mesh) => {
|
resolve(mesh);
|
}, undefined, (error) => {
|
reject(error);
|
});
|
});
|
};
|
|
Promise.all([
|
loadModel('model/agv/body.fbx'),
|
loadModel('model/agv/loader.fbx'),
|
loadModel('model/agv/fork.fbx'),
|
]).then(([bodyMesh, loaderMesh, forkMesh]) => {
|
const scaleVal = 1;
|
bodyMesh.scale.set(scaleVal, scaleVal, scaleVal);
|
loaderMesh.scale.set(scaleVal, scaleVal, scaleVal);
|
forkMesh.scale.set(scaleVal, scaleVal, scaleVal);
|
|
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);
|
agvGroup.add(loaderMesh);
|
agvGroup.add(forkMesh);
|
|
agvGroup.name = curAgvNo;
|
|
addObject(agvGroup);
|
|
threeRef.current?.rePerspective(350, 450);
|
|
}).catch((error) => {
|
console.error(error);
|
});
|
});
|
}
|
}
|
|
useEffect(() => {
|
if (curAgvNo) {
|
setLoading(true);
|
setTimeout(() => {
|
startThree(containerRef.current);
|
renderThree(curAgvNo);
|
setLoading(false);
|
}, 200);
|
}
|
return endThree;
|
}, [curAgvNo]);
|
|
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}`);
|
});
|
}
|
|
const patrolControl = async () => {
|
const res = await handleAgvPatrol({ agvNo: info.agvNo })
|
if (res) {
|
fetchAgvInfo(curAgvNo);
|
}
|
}
|
|
return (
|
<Box display="flex" height="100%">
|
<Box
|
position="relative"
|
width="50%"
|
height="100%"
|
ref={containerRef}
|
style={{ backgroundColor: '#7a7a7a' }}
|
>
|
{loading && (
|
<Box
|
position="absolute"
|
top="50%"
|
left="50%"
|
style={{ transform: 'translate(-50%, -50%)' }}
|
>
|
<CircularProgress sx={{ color: grey[50] }} />
|
</Box>
|
)}
|
</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 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>
|
<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('table.field.agvDetail.code')} value={info?.code} />
|
</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.error')} value={info?.error} />
|
</Grid>
|
<Grid item xs={12}>
|
<KeyValuePair label={translate('table.field.agvDetail.task')} value={info?.taskIds?.join(',')} />
|
</Grid>
|
</Grid>
|
</Box>
|
|
<Box sx={{
|
height: "30%",
|
display: 'flex',
|
flexDirection: 'column',
|
justifyContent: 'flex-end'
|
}}>
|
<Grid container spacing={2} style={{ marginTop: '0px' }}>
|
<Grid item xs={12}>
|
<Stack spacing={1} mt={2}>
|
{/* more */}
|
<Button
|
color="primary"
|
variant="contained"
|
onClick={() => {
|
redirect(`/agv/${info?.agvId}/show`);
|
}}
|
>
|
{translate('page.map.settings.map.more.title')}
|
</Button>
|
{/* patrol */}
|
{info && (
|
info.patrol
|
?
|
<Button variant="contained" color="error" fullWidth onClick={() => {
|
patrolControl();
|
}}>
|
{translate('page.map.action.stopPatrol')}
|
</Button>
|
:
|
// <Button variant="contained" fullWidth onClick={() => {
|
// patrolControl();
|
// }}>
|
// {translate('page.map.action.startPatrol')}
|
// </Button>
|
<ConfirmButton
|
label="page.map.action.startPatrol"
|
color="primary"
|
variant="contained"
|
onConfirm={() => {
|
patrolControl();
|
}}
|
/>
|
)}
|
{/* status */}
|
{info && (
|
info.status === 0
|
? <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>
|
)}
|
{/* restore all */}
|
<ConfirmButton
|
label="page.map.action.restoreALl"
|
color="inherit"
|
// variant="contained"
|
onConfirm={() => {
|
handleRestoreAll();
|
}}
|
/>
|
</Stack>
|
</Grid>
|
</Grid>
|
</Box>
|
</Paper>
|
</Box>
|
</Box>
|
);
|
}
|
|
const KeyValuePair = ({ label, value, bool }) => {
|
return (
|
<>
|
<Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
|
<Typography
|
variant="body2"
|
sx={{ minWidth: '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;
|
