| | |
| | | } |
| | | } |
| | | |
| | | const fetchShelfInfo = async (locNo) => { |
| | | const res = await Http.doGet('/api/map/shelf/info', { locNo: locNo }); |
| | | if (res?.data && shelfThree) { |
| | | shelfThree.generateMesh((loader, addObject) => { |
| | | const promises = []; |
| | | const singleHeight = 123; |
| | | for (const item of res.data) { |
| | | const { lev } = Utils.parseLocNo(item.locNo); |
| | | promises.push(new Promise((resolve) => { |
| | | loader.load('model/04.fbx', (mesh) => { |
| | | mesh.position.set(0, singleHeight * (lev - 1), 0); |
| | | mesh.scale.set(5, 5, 5); |
| | | mesh.name = item.locNo; |
| | | mesh.traverse(function (child) { |
| | | if (child.isMesh) { |
| | | if (child.name === '货架') { |
| | | child.material.color.set(0x4680BF); |
| | | } |
| | | let palletVisible = true, cargoVisible = true; |
| | | switch (item.locSts) { |
| | | case 'D': |
| | | cargoVisible = false; |
| | | break; |
| | | case 'O': |
| | | palletVisible = false; |
| | | cargoVisible = false; |
| | | break; |
| | | default: |
| | | break; |
| | | } |
| | | if (child.name === '托盘') { |
| | | child.visible = palletVisible; |
| | | child.material.color.set(0xBEBEBE); |
| | | } |
| | | if (child.name === '不规则') { |
| | | child.visible = cargoVisible; |
| | | child.material.color.set(0xE8B67E); |
| | | } |
| | | child.name = item.locNo |
| | | child.castShadow = true; |
| | | child.receiveShadow = true; |
| | | } |
| | | }); |
| | | addObject(mesh); |
| | | resolve(); |
| | | }) |
| | | })); |
| | | } |
| | | |
| | | Promise.all(promises).then(() => { |
| | | shelfThree.setNewSelectedMesh(locNo); |
| | | shelfThree.rePerspective(singleHeight * res.data.length); |
| | | }).catch(error => { |
| | | console.error(error); |
| | | }); |
| | | }) |
| | | } |
| | | } |
| | | |
| | | const ShelfView = (props) => { |
| | | const intl = useIntl(); |
| | | const { styles } = useStyles(); |
| | | const refContainer = useRef(); |
| | | |
| | | const { data, curLocNo, setCurLocNo } = props; |
| | | const { data, curFloor, curLocNo, setCurLocNo } = props; |
| | | const [loading, setLoading] = React.useState(false); |
| | | |
| | | useEffect(() => { |
| | | // init curLocNo |
| | | const originLocNo = data.no + '-' + curFloor; |
| | | setCurLocNo(originLocNo); |
| | | |
| | | endThree(); |
| | | setLoading(true); |
| | | |
| | | const fetchShelfInfo = async (locNo) => { |
| | | console.log("api-" + locNo); |
| | | const res = await Http.doGet('/api/map/shelf/info', { locNo: locNo }); |
| | | if (res?.data && shelfThree) { |
| | | shelfThree.generateMesh((addObject) => { |
| | | for (const item of res.data) { |
| | | const { row, bay, lev } = Utils.parseLocNo(item.locNo); |
| | | // shelf |
| | | const shelfMesh = new THREE.Mesh(new THREE.BoxGeometry(100, 40, 100), new THREE.MeshStandardMaterial({ |
| | | color: '#006266', |
| | | })); |
| | | shelfMesh.name = item.locNo; |
| | | shelfMesh.position.set(0, 20 + 100 * (lev - 1), 0); |
| | | addObject(shelfMesh) |
| | | |
| | | // pallet |
| | | const palletMesh = new THREE.Mesh(new THREE.BoxGeometry(100, 60, 100), new THREE.MeshStandardMaterial({ |
| | | color: '#2c2c54', |
| | | })); |
| | | palletMesh.name = item.locNo; |
| | | palletMesh.position.set(0, 70 + 100 * (lev - 1), 0); |
| | | addObject(palletMesh) |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | |
| | | setTimeout(() => { |
| | | startThree(refContainer.current); |
| | | shelfThree.handleClick = (locNo) => { |
| | | setCurLocNo(locNo); |
| | | } |
| | | fetchShelfInfo(curLocNo); // curLoc更新不及时 |
| | | shelfThree.handleClick = (objName) => { |
| | | setCurLocNo(objName); |
| | | }; |
| | | fetchShelfInfo(originLocNo); |
| | | setLoading(false); |
| | | }, 300) |
| | | |