From 9d0acfb65c80c4948c305ca01338f894b87346a0 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 08 四月 2024 09:44:37 +0800
Subject: [PATCH] Merge branch 'Four-Way-Rack' of http://47.97.1.152:5880/r/zy-asrs-master into Four-Way-Rack
---
zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx | 191 ++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 184 insertions(+), 7 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx b/zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx
index 331d381..d020f2a 100644
--- a/zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx
+++ b/zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx
@@ -1,28 +1,205 @@
import React, { useState, useRef, useEffect } from 'react';
-import { Card, Form, Button } from 'antd';
+import * as THREE from 'three'
+import { Spin, Descriptions, Button } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
+import { LoadingOutlined } from '@ant-design/icons';
import { createStyles } from 'antd-style';
import * as Utils from '../../utils'
import Http from '@/utils/http';
+import ShelfThree from './shelfThree'
const useStyles = createStyles(({ token, css }) => {
-
+ return {
+ infoBox: {
+ height: '100%',
+ display: 'flex',
+ gap: '0px',
+ },
+ threeInfo: {
+ height: '100%',
+ width: '60%',
+ },
+ spinWrapper: {
+ height: '100%',
+ },
+ threeContainer: {
+ zIndex: 99,
+ width: '100%',
+ height: '100%',
+ },
+ tableInfo: {
+ height: '100%',
+ width: '40%',
+ padding: '0 10px 0 15px',
+ overflow: 'auto',
+ },
+ tableButton: {
+ width: '100%',
+ marginBottom: '10px',
+ fontWeight: 'bold',
+ letterSpacing: '1px',
+ }
+ }
})
+
+let shelfThree;
+
+const startThree = (dom) => {
+ shelfThree = new ShelfThree(dom);
+ shelfThree.startup();
+}
+
+const endThree = () => {
+ if (shelfThree) {
+ shelfThree.destroy();
+ shelfThree = null;
+ }
+}
+
+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();
- useEffect(() => {
+ 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);
+
+ setTimeout(() => {
+ startThree(refContainer.current);
+ shelfThree.handleClick = (objName) => {
+ setCurLocNo(objName);
+ };
+ fetchShelfInfo(originLocNo);
+ setLoading(false);
+ }, 300)
+
+ return endThree;
+ }, [data]);
return (
<>
- <div style={{zIndex: 99}} ref={refContainer}></div>
- <h1>{props.data.uuid}</h1>
+ <div className={styles.infoBox}>
+ <div className={`${styles.threeInfo} three-spin`}>
+ <Spin
+ spinning={loading}
+ indicator={<LoadingOutlined spin />}
+ size={'large'}
+ wrapperClassName={styles.spinWrapper}
+ >
+ <div ref={refContainer} className={styles.threeContainer}></div>
+ </Spin>
+ </div>
+ <div className={styles.tableInfo}>
+ <Descriptions
+ bordered
+ layout="vertical"
+ column={1}
+ items={
+ [
+ {
+ key: '1',
+ label: intl.formatMessage({ id: 'map.loc.no', defaultMessage: '搴撲綅鍙�' }),
+ children: curLocNo,
+ },
+ {
+ key: '2',
+ label: intl.formatMessage({ id: 'map.pallet.barcode', defaultMessage: '鎵樼洏鏉＄爜' }),
+ children: '80000010',
+ },
+ {
+ key: '3',
+ label: intl.formatMessage({ id: 'map.is.enable', defaultMessage: '鏄惁鍚敤' }),
+ children: 'Disabled',
+ },
+ {
+ key: '4',
+ label: intl.formatMessage({ id: 'map.loc.operation', defaultMessage: '搴撲綅鎿嶄綔' }),
+ children: (
+ <>
+ <Button className={styles.tableButton} size='large' type="primary" danger>
+ <FormattedMessage id='map.loc.lock' defaultMessage='閿佸畾' />
+ </Button>
+ <Button className={styles.tableButton} size='large' disabled>
+ <FormattedMessage id='map.loc.unlock' defaultMessage='瑙ｉ攣' />
+ </Button>
+ <Button className={styles.tableButton} size='large'>
+ <FormattedMessage id='map.loc.reset' defaultMessage='娓呴櫎搴撲綅' />
+ </Button>
+ </>
+ )
+ },
+ ]
+ }
+ />
+ </div>
+ </div>
</>
)
}
--
Gitblit v1.9.1