rcs-flow.git - Gitblit

			@@ -1,98 +1,133 @@
			import React, { useRef, useEffect, useState } from 'react';
			import * as THREE from 'three';
			import { Box, CircularProgress } from '@mui/material';
			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 { getAgvInfo } from '../../http';

			let three;

			const startThree = (dom) => {
			three = new AgvThree(dom);
			three.startup();
			}

			const endThree = () => {
			if (three) {
			three.destroy();
			three = null;
			}
			}

			const renderThree = (info, curAgvNo) => {
			if (info && three) {
			three.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);

			loaderMesh.position.set(0, 150, 0);;
			forkMesh.position.set(0, 165, 0);;

			const agvGroup = new THREE.Group();
			agvGroup.add(bodyMesh);
			agvGroup.add(loaderMesh);
			agvGroup.add(forkMesh);

			agvGroup.name = curAgvNo;

			addObject(agvGroup);

			three.setNewSelectedMesh(curAgvNo);
			three.rePerspective(350, 550);

			}).catch((error) => {
			console.error(error);
			});
			});
			}
			}
			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 { 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);
			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);
			});
			});
			}
			}, [data]);
			}

			useEffect(() => {
			if (info) {
			endThree();
			setLoading(true);
			setTimeout(() => {
			startThree(containerRef.current);
			three.handleClick = (objName) => {
			setCurAgvNo(objName);
			};
			renderThree(info, curAgvNo);
			renderThree(curAgvNo);
			setLoading(false);
			}, 300);
			}, 200);
			}
			return endThree;
			}, [info]);

			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%">
			@@ -110,14 +145,157 @@
			left="50%"
			style={{ transform: 'translate(-50%, -50%)' }}
			>
			<CircularProgress />
			<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.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;