| | |
| | | import { grey } from '@mui/material/colors'; |
| | | import ConfirmButton from '../../../page/components/ConfirmButton'; |
| | | |
| | | 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); |
| | | }); |
| | | }) |
| | | } |
| | | } |
| | | |
| | | const ShelfMain = (props) => { |
| | | const { row, bay, curLocNo, curShelfInfo: info, setCurLocNo } = props; |
| | | const translate = useTranslate(); |
| | |
| | | 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); |
| | | }); |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | useEffect(() => { |
| | | if (info) { |
| | | setSelectedLoc(info[0]); |
| | | endThree(); |
| | | 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]); |
| | |
| | | notify.success(translate('common.response.fail')); |
| | | console.error(`Error: ${error.message}`); |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | return ( |
| | | <Box display="flex" height="100%"> |