From e80bda627f5deb30d4517a5509a77c6bfcdffcdd Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 16 十月 2024 14:08:55 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/insight/shelf/ShelfThree.js | 88 ++++++++++++++++++++++
zy-acs-flow/src/map/insight/shelf/index.jsx | 6
zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx | 127 +++++++++++++++++++++++++++++++
3 files changed, 218 insertions(+), 3 deletions(-)
diff --git a/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx b/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx
new file mode 100644
index 0000000..ac4d63d
--- /dev/null
+++ b/zy-acs-flow/src/map/insight/shelf/ShelfMain.jsx
@@ -0,0 +1,127 @@
+import React, { useRef, useEffect, useState } from 'react';
+import * as THREE from 'three';
+import { useTranslate } from 'react-admin';
+import {
+ Box,
+ CircularProgress,
+ Grid,
+ Typography,
+ Paper,
+ Button,
+ Divider,
+ Stack,
+} from '@mui/material';
+import ShelfThree from './ShelfThree';
+
+const ShelfMain = (props) => {
+ const { data, curFloor, curLocNo, setCurLocNo } = props;
+ const translate = useTranslate();
+ const containerRef = useRef();
+ const [loading, setLoading] = useState(true);
+ const [shelfThree, setShelfThree] = useState(null);
+ const [info, setInfo] = useState(null);
+
+ useEffect(() => {
+ const initThree = () => {
+ const shelfThreeInstance = new ShelfThree(containerRef.current);
+ shelfThreeInstance.startup();
+ shelfThreeInstance.handleClick = (objName) => {
+ setCurLocNo(objName);
+ };
+ setShelfThree(shelfThreeInstance);
+ setLoading(false);
+ // Fetch initial data
+ fetchShelfInfo(curLocNo);
+ };
+
+ initThree();
+
+ return () => {
+ if (shelfThree) {
+ shelfThree.destroy();
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ if (curLocNo) {
+ fetchShelfInfo(curLocNo);
+ }
+ }, [curLocNo]);
+
+ const fetchShelfInfo = async (locNo) => {
+ // 鍋囪鏈変竴涓嚱鏁版潵鑾峰彇璐ф灦淇℃伅
+ const res = await fetchShelfData(locNo);
+ if (res?.data) {
+ setInfo(res.data);
+ }
+ };
+
+ return (
+ <Box display="flex" height="500px">
+ <Box
+ position="relative"
+ width="60%"
+ height="100%"
+ ref={containerRef}
+ style={{ backgroundColor: '#7a7a7a' }}
+ >
+ {loading && (
+ <Box
+ position="absolute"
+ top="50%"
+ left="50%"
+ style={{ transform: 'translate(-50%, -50%)' }}
+ >
+ <CircularProgress />
+ </Box>
+ )}
+ </Box>
+ <Box width="40%" height="100%" overflow="auto" p={2}>
+ <Paper elevation={3} style={{ padding: '16px' }}>
+ <Typography variant="h6" gutterBottom>
+ {translate('map.loc.no', { defaultMessage: '搴撲綅鍙�' })}: {curLocNo}
+ </Typography>
+ <Divider />
+ <Grid container spacing={2} style={{ marginTop: '16px' }}>
+ <Grid item xs={12}>
+ <Typography variant="subtitle1">
+ {translate('map.loc.sts', { defaultMessage: '搴撲綅鐘舵��' })}
+ </Typography>
+ <Typography variant="body1">{info?.locSts}</Typography>
+ </Grid>
+ <Grid item xs={12}>
+ <Typography variant="subtitle1">
+ {translate('map.pallet.barcode', { defaultMessage: '鎵樼洏鏉＄爜' })}
+ </Typography>
+ <Typography variant="body1">{info?.zpallet}</Typography>
+ </Grid>
+ <Grid item xs={12}>
+ <Typography variant="subtitle1">
+ {translate('map.is.enable', { defaultMessage: '鏄惁鍚敤' })}
+ </Typography>
+ </Grid>
+ <Grid item xs={12}>
+ <Typography variant="subtitle1">
+ {translate('map.loc.operation', { defaultMessage: '搴撲綅鎿嶄綔' })}
+ </Typography>
+ <Stack spacing={2} mt={2}>
+ <Button variant="contained" color="error" fullWidth>
+ {translate('map.loc.lock', { defaultMessage: '閿佸畾' })}
+ </Button>
+ <Button variant="contained" disabled fullWidth>
+ {translate('map.loc.unlock', { defaultMessage: '瑙ｉ攣' })}
+ </Button>
+ <Button variant="contained" fullWidth>
+ {translate('map.loc.reset', { defaultMessage: '娓呴櫎搴撲綅' })}
+ </Button>
+ </Stack>
+ </Grid>
+ </Grid>
+ </Paper>
+ </Box>
+ </Box>
+ );
+};
+
+export default ShelfMain;
diff --git a/zy-acs-flow/src/map/insight/shelf/ShelfThree.js b/zy-acs-flow/src/map/insight/shelf/ShelfThree.js
new file mode 100644
index 0000000..a77d3c1
--- /dev/null
+++ b/zy-acs-flow/src/map/insight/shelf/ShelfThree.js
@@ -0,0 +1,88 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+
+export default class ShelfThree {
+ constructor(container) {
+ this.container = container;
+ this.scene = null;
+ this.camera = null;
+ this.renderer = null;
+ this.controls = null;
+ this.animationFrameId = null;
+ }
+
+ startup() {
+ this.initScene();
+ this.initCamera();
+ this.initRenderer();
+ this.initControls();
+ this.addLights();
+ this.addObjects();
+ this.animate();
+ window.addEventListener('resize', this.onWindowResize, false);
+ }
+
+ initScene() {
+ this.scene = new THREE.Scene();
+ this.scene.background = new THREE.Color(0x7a7a7a);
+ }
+
+ initCamera() {
+ const width = this.container.clientWidth;
+ const height = this.container.clientHeight;
+ this.camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 1000);
+ this.camera.position.set(0, 5, 10);
+ }
+
+ initRenderer() {
+ this.renderer = new THREE.WebGLRenderer({ antialias: true });
+ this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+ this.container.appendChild(this.renderer.domElement);
+ }
+
+ initControls() {
+ this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+ this.controls.enableDamping = true;
+ }
+
+ addLights() {
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+ this.scene.add(ambientLight);
+
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+ directionalLight.position.set(5, 10, 7.5);
+ this.scene.add(directionalLight);
+ }
+
+ addObjects() {
+ // 鍦ㄨ繖閲屾坊鍔犳偍鐨勮揣鏋舵ā鍨嬫垨鍏朵粬瀵硅薄
+ const geometry = new THREE.BoxGeometry(1, 1, 1);
+ const material = new THREE.MeshStandardMaterial({ color: 0x4680BF });
+ const cube = new THREE.Mesh(geometry, material);
+ this.scene.add(cube);
+ }
+
+ animate = () => {
+ this.animationFrameId = requestAnimationFrame(this.animate);
+ this.controls.update();
+ this.renderer.render(this.scene, this.camera);
+ };
+
+ onWindowResize = () => {
+ const width = this.container.clientWidth;
+ const height = this.container.clientHeight;
+ this.camera.aspect = width / height;
+ this.camera.updateProjectionMatrix();
+ this.renderer.setSize(width, height);
+ };
+
+ destroy() {
+ cancelAnimationFrame(this.animationFrameId);
+ window.removeEventListener('resize', this.onWindowResize);
+ this.controls.dispose();
+ this.renderer.dispose();
+ this.scene = null;
+ this.camera = null;
+ this.renderer.domElement.remove();
+ }
+}
diff --git a/zy-acs-flow/src/map/insight/shelf/index.jsx b/zy-acs-flow/src/map/insight/shelf/index.jsx
index 75f55fd..fe7f02d 100644
--- a/zy-acs-flow/src/map/insight/shelf/index.jsx
+++ b/zy-acs-flow/src/map/insight/shelf/index.jsx
@@ -1,6 +1,7 @@
import React, { useState, useRef, useEffect } from 'react';
import { useTranslate } from "react-admin";
import { Box, Typography, Tabs, Tab, Stack, useTheme, Divider } from '@mui/material';
+import ShelfMain from './ShelfMain';
const ShelfInsight = (props) => {
const { } = props;
@@ -32,9 +33,8 @@
<Box p={3}>
{activeTab === 0 && (
- <Box>
- <h1>1</h1>
- </Box>
+ <ShelfMain
+ />
)}
{activeTab === 1 && (
<Box>
--
Gitblit v1.9.1