From 9483baffba9a24a2a36fc8739fc65b59317d9142 Mon Sep 17 00:00:00 2001 From: zhang <zc857179121@qq.com> Date: 星期四, 03 七月 2025 14:18:46 +0800 Subject: [PATCH] 队列拆分 --- zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx | 334 ++++++++++++++++++++++++++++++++----------------------- 1 files changed, 195 insertions(+), 139 deletions(-) diff --git a/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx b/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx index 6a596e4..545c0bf 100644 --- a/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx +++ b/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx @@ -1,6 +1,5 @@ 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, @@ -10,116 +9,126 @@ Button, Divider, Stack, - Card, - CardContent, } from '@mui/material'; import ShelfThree from './ShelfThree'; import { getLocGroup } from '../../http'; import { grey } from '@mui/material/colors'; -import { styled } from '@mui/system'; - -let shelfThree; - -const startThree = (dom) => { - shelfThree = new ShelfThree(dom); - shelfThree.startup(); -} - -const endThree = () => { - if (shelfThree) { - shelfThree.destroy(); - shelfThree = null; - } -} - -const renderThree = (info, curLocNo) => { - if (info && shelfThree) { - shelfThree.generateMesh((loader, addObject) => { - const promises = []; - const singleHeight = 123; - for (const item of info) { - const { lev } = item; - promises.push(new Promise((resolve) => { - loader.load('model/shelf.fbx', (mesh) => { - mesh.position.set(0, singleHeight * (lev - 1), 0); - mesh.scale.set(5, 5, 5); - mesh.name = item.locNo; - mesh.traverse((child) => { - if (child.isMesh) { - switch (child.name) { - case '璐ф灦': - child.material.color.set(0x4680BF); - break; - case '鎵樼洏': - child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT'; - child.material.color.set(0xBEBEBE); - break; - case '涓嶈鍒�': - child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT'; - child.material.color.set(0xE8B67E); - break; - default: - break; - } - child.name = item.locNo - child.castShadow = true; - child.receiveShadow = true; - } - }); - addObject(mesh); - resolve(); - }) - })); - - } - - Promise.all(promises).then(() => { - shelfThree.setNewSelectedMesh(curLocNo); - shelfThree.rePerspective(singleHeight * info.length, 500); - }).catch(error => { - console.error(error); - }); - }) - } -} +import ConfirmButton from '../../../page/components/ConfirmButton'; const ShelfMain = (props) => { - const { data, curLocNo, setCurLocNo } = props; + const { row, bay, curLocNo, curShelfInfo: info, setCurLocNo } = props; const translate = useTranslate(); + const dataProvider = useDataProvider(); + const redirect = useRedirect(); 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); + const [selectedLoc, setSelectedLoc] = useState(null); // loc obj + const [loading, setLoading] = useState(true); + + const shelfThreeRef = useRef(null); + + const startThree = (dom) => { + if (shelfThreeRef.current) { + shelfThreeRef.current.destroy(); + } + shelfThreeRef.current = new ShelfThree(dom); + shelfThreeRef.current.startup(); + }; + + const endThree = () => { + if (shelfThreeRef.current) { + shelfThreeRef.current.destroy(); + shelfThreeRef.current = null; + } + }; + + const renderThree = (info, curLocNo) => { + if (info && shelfThreeRef.current) { + shelfThreeRef.current.generateMesh((loader, addObject) => { + const promises = []; + const singleHeight = 123; + for (const item of info) { + const { lev } = item; + promises.push(new Promise((resolve) => { + loader.load('model/shelf.fbx', (mesh) => { + mesh.position.set(0, singleHeight * (lev - 1), 0); + mesh.scale.set(5, 5, 5); + mesh.name = item.locNo; + mesh.traverse((child) => { + if (child.isMesh) { + switch (child.name) { + case '璐ф灦': + child.material.color.set(0x4680BF); + break; + case '鎵樼洏': + child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT'; + child.material.color.set(0xBEBEBE); + break; + case '涓嶈鍒�': + child.visible = item.locStsEl === 'STOCK' || item.locStsEl === 'PAKOUT'; + child.material.color.set(0xE8B67E); + break; + default: + break; + } + child.name = item.locNo; + child.castShadow = true; + child.receiveShadow = true; + } + }); + addObject(mesh); + resolve(); + }); + })); + } + + Promise.all(promises).then(() => { + if (shelfThreeRef.current) { + if (typeof shelfThreeRef.current.setNewSelectedMesh === 'function') { + shelfThreeRef.current.setNewSelectedMesh(curLocNo); + } + if (typeof shelfThreeRef.current.rePerspective === 'function') { + shelfThreeRef.current.rePerspective(singleHeight * info.length, 500); + } + } + }).catch(error => { + console.error(error); + }); }); } - }, [data]); + }; useEffect(() => { if (info) { - endThree(); + setSelectedLoc(info[0]); setLoading(true); setTimeout(() => { startThree(containerRef.current); - shelfThree.handleClick = (objName) => { + shelfThreeRef.current.handleClick = (objName) => { setCurLocNo(objName); setSelectedLoc(info.find(loc => objName === loc.locNo)); }; renderThree(info, curLocNo); setLoading(false); - }, 300) + }, 200); } return endThree; }, [info]); - useEffect(() => { - console.log(selectedLoc); - }, [selectedLoc]) + 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%"> @@ -142,65 +151,112 @@ )} </Box> <Box width="50%" height="100%" overflow="auto" pl={1}> - <Paper elevation={3} style={{ padding: '16px' }}> - <Typography - variant="subtitle1" - flexWrap="nowrap" - gutterBottom - > - {translate('table.field.loc.locNo')}: {curLocNo} - </Typography> - <Divider /> - <Grid container spacing={2} style={{ marginTop: '0px' }}> - <Grid item xs={12}> - <Stack direction='row'> - <Typography - variant="body2" - flexWrap="nowrap" - > - {translate('table.field.loc.locSts')} - </Typography> - <Typography - variant="body2" - flexWrap="nowrap" - > - {selectedLoc?.locSts$} - </Typography> - </Stack> + <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.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> - <Grid item xs={12}> - <Typography variant="subtitle1"> - {translate('table.field.loc.zoneId')} - </Typography> - <Typography variant="body1">{info?.zoneId$}</Typography> + </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={2} mt={2}> + <Button + color="primary" + variant="contained" + onClick={() => { + const searchQuery = encodeURIComponent(JSON.stringify({ row, bay })); + redirect(`/loc?filter=${searchQuery}`); + }} + > + {translate('page.map.settings.map.more.title')} + </Button> + <Button + color="primary" // inherit + variant="contained" + onClick={() => { + redirect('edit', 'loc', selectedLoc?.id); + }} + > + {translate('page.map.insight.shelf.updateStatus')} + </Button> + {/* <ConfirmButton + label="page.map.insight.shelf.updateStatus" + color="primary" // inherit + variant="contained" + onConfirm={() => { + redirect('edit', 'loc', selectedLoc?.id); + }} + /> */} + <Button variant="contained" color="error" disabled={selectedLoc?.locStsEl !== 'STOCK'} fullWidth> + {translate('page.map.insight.shelf.outbound')} + </Button> + </Stack> + </Grid> </Grid> - <Grid item xs={12}> - <Typography variant="subtitle1"> - {translate('table.field.loc.code')} - </Typography> - <Typography variant="body1">{info?.code$}</Typography> - </Grid> - <Grid item xs={12}> - <Typography variant="subtitle1"> - {translate('common.field.opt')} - </Typography> - <Stack spacing={2} mt={2}> - <Button variant="contained" color="error" fullWidth> - {translate('map.loc.lock')} - </Button> - <Button variant="contained" disabled fullWidth> - {translate('map.loc.unlock')} - </Button> - <Button variant="contained" fullWidth> - {translate('map.loc.reset')} - </Button> - </Stack> - </Grid> - </Grid> + </Box> </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; -- Gitblit v1.9.1