|  |  |  | 
|---|
|  |  |  | import React, { useRef, useEffect, useState } from 'react'; | 
|---|
|  |  |  | import * as THREE from 'three'; | 
|---|
|  |  |  | import { useTranslate } from 'react-admin'; | 
|---|
|  |  |  | import { useTranslate, useDataProvider } from 'react-admin'; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | Box, | 
|---|
|  |  |  | CircularProgress, | 
|---|
|  |  |  | 
|---|
|  |  |  | const ShelfMain = (props) => { | 
|---|
|  |  |  | const { data, curLocNo, setCurLocNo } = props; | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const dataProvider = useDataProvider(); | 
|---|
|  |  |  | const containerRef = useRef(); | 
|---|
|  |  |  | const [loading, setLoading] = useState(true); | 
|---|
|  |  |  | const [info, setInfo] = useState(null); | 
|---|
|  |  |  | const [selectedLoc, setSelectedLoc] = useState(null); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | if (data) { | 
|---|
|  |  |  | getLocGroup(data.row, data.bay, (response) => { | 
|---|
|  |  |  | setInfo(response); | 
|---|
|  |  |  | setCurLocNo(response[0]?.locNo); | 
|---|
|  |  |  | setSelectedLoc(response[0]); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, [data]); | 
|---|
|  |  |  | 
|---|
|  |  |  | startThree(containerRef.current); | 
|---|
|  |  |  | shelfThree.handleClick = (objName) => { | 
|---|
|  |  |  | setCurLocNo(objName); | 
|---|
|  |  |  | setSelectedLoc(info.find(loc => objName === loc.locNo)); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | renderThree(info, curLocNo); | 
|---|
|  |  |  | setLoading(false); | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return endThree; | 
|---|
|  |  |  | }, [info]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const updateStatus = () => { | 
|---|
|  |  |  | dataProvider.update('loc', { | 
|---|
|  |  |  | 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 ( | 
|---|
|  |  |  | <Box display="flex" height="100%"> | 
|---|
|  |  |  | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | <Box width="50%" height="100%" overflow="auto" p={2}> | 
|---|
|  |  |  | {/* <Paper elevation={3} style={{ padding: '16px' }}> | 
|---|
|  |  |  | <Typography variant="h6" gutterBottom> | 
|---|
|  |  |  | {translate('map.loc.no', { defaultMessage: '库位号' })}: {curLocNo} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | <Divider /> | 
|---|
|  |  |  | <Grid container spacing={2} style={{ marginTop: '16px' }}> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <Typography variant="subtitle1"> | 
|---|
|  |  |  | {translate('map.loc.sts', { defaultMessage: '库位状态' })} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | <Typography variant="body1">{info?.locSts}</Typography> | 
|---|
|  |  |  | <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.loc.locNo')} value={selectedLoc?.locNo || 'N/A'} /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <KeyValuePair label={translate('table.field.loc.row')} value={selectedLoc?.row || 'N/A'} /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <KeyValuePair label={translate('table.field.loc.bay')} value={selectedLoc?.bay || 'N/A'} /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <KeyValuePair label={translate('table.field.loc.lev')} value={selectedLoc?.lev || 'N/A'} /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <KeyValuePair label={translate('table.field.loc.offset')} value={selectedLoc?.offset || 'N/A'} /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <KeyValuePair label={translate('table.field.loc.locSts')} value={selectedLoc?.locSts$ || 'N/A'} /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <KeyValuePair label={translate('table.field.loc.zoneId')} value={selectedLoc?.zoneId$ || 'N/A'} /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <KeyValuePair label={translate('table.field.loc.code')} value={selectedLoc?.code$ || 'N/A'} /> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <Grid container spacing={2} style={{ marginTop: '0px' }}> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <Typography variant="subtitle1"> | 
|---|
|  |  |  | {translate('map.pallet.barcode', { defaultMessage: '托盘条码' })} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | <Typography variant="body1">{info?.zpallet}</Typography> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <Typography variant="subtitle1"> | 
|---|
|  |  |  | {translate('map.is.enable', { defaultMessage: '是否启用' })} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | <Grid item xs={12}> | 
|---|
|  |  |  | <Typography variant="subtitle1"> | 
|---|
|  |  |  | {translate('map.loc.operation', { defaultMessage: '库位操作' })} | 
|---|
|  |  |  | {translate('common.field.opt')} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | <Stack spacing={2} mt={2}> | 
|---|
|  |  |  | <Button variant="contained" color="error" fullWidth> | 
|---|
|  |  |  | {translate('map.loc.lock', { defaultMessage: '锁定' })} | 
|---|
|  |  |  | </Button> | 
|---|
|  |  |  | <Button variant="contained" disabled fullWidth> | 
|---|
|  |  |  | {translate('map.loc.unlock', { defaultMessage: '解锁' })} | 
|---|
|  |  |  | </Button> | 
|---|
|  |  |  | <Button variant="contained" fullWidth> | 
|---|
|  |  |  | {translate('map.loc.reset', { defaultMessage: '清除库位' })} | 
|---|
|  |  |  | {translate('page.map.insight.shelf.updateStatus')} | 
|---|
|  |  |  | </Button> | 
|---|
|  |  |  | <Button variant="contained" color="error" disabled={selectedLoc?.locStsEl !== 'STOCK'} fullWidth> | 
|---|
|  |  |  | {translate('page.map.insight.shelf.outbound')} | 
|---|
|  |  |  | </Button> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </Grid> | 
|---|
|  |  |  | </Paper> */} | 
|---|
|  |  |  | </Paper> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const KeyValuePair = ({ label, value }) => ( | 
|---|
|  |  |  | <> | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | <Typography | 
|---|
|  |  |  | variant="body2" | 
|---|
|  |  |  | sx={{ flexGrow: 1, color: 'text.primary', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {value} | 
|---|
|  |  |  | </Typography> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | <Divider /> | 
|---|
|  |  |  | </> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default ShelfMain; | 
|---|