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 |  152 +++++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 125 insertions(+), 27 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 f88d398..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,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import * as THREE from 'three'
 import { Spin, Descriptions, Button } from 'antd';
 import { FormattedMessage, useIntl, useModel } from '@umijs/max';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -16,60 +17,141 @@
         },
         threeInfo: {
             height: '100%',
-            width: '50%',
+            width: '60%',
+        },
+        spinWrapper: {
+            height: '100%',
         },
         threeContainer: {
             zIndex: 99,
             width: '100%',
-            height: '688.88px',
+            height: '100%',
         },
         tableInfo: {
             height: '100%',
-            width: '50%',
-            padding: '0 10px 0 15px'
+            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();
+
+    const { data, curFloor, curLocNo, setCurLocNo } = props;
     const [loading, setLoading] = React.useState(false);
 
-    const startThree = () => {
-        shelfThree = new ShelfThree(refContainer.current);
-        shelfThree.startup();
-    }
-
-    const endThree = () => {
-        if (shelfThree) {
-            shelfThree.destroy();
-            shelfThree = null;
-        }
-    }
-
     useEffect(() => {
-        setLoading(true);
+        // 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);
-            startThree();
         }, 300)
 
         return endThree;
-    }, [props.data.uuid]);
+    }, [data]);
 
     return (
         <>
             <div className={styles.infoBox}>
-                <div className={styles.threeInfo}>
+                <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>
@@ -83,25 +165,41 @@
                             [
                                 {
                                     key: '1',
-                                    label: 'Product',
-                                    children: 'Cloud Database',
+                                    label: intl.formatMessage({ id: 'map.loc.no', defaultMessage: '搴撲綅鍙�' }),
+                                    children: curLocNo,
                                 },
                                 {
                                     key: '2',
-                                    label: 'Billing Mode',
-                                    children: 'Prepaid',
+                                    label: intl.formatMessage({ id: 'map.pallet.barcode', defaultMessage: '鎵樼洏鏉$爜' }),
+                                    children: '80000010',
                                 },
                                 {
                                     key: '3',
-                                    label: 'Automatic Renewal',
-                                    children: <Button> submit</Button>,
+                                    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='瑙i攣' />
+                                            </Button>
+                                            <Button className={styles.tableButton} size='large'>
+                                                <FormattedMessage id='map.loc.reset' defaultMessage='娓呴櫎搴撲綅' />
+                                            </Button>
+                                        </>
+                                    )
                                 },
                             ]
                         }
                     />
                 </div>
             </div>
-
         </>
     )
 }

--
Gitblit v1.9.1