效果展示：
页面地址：
http://localhost:3000/lessons/day1
具体代码：
import React, { useEffect, useState, useRef } from 'react';
import { Button, Drawer, Tabs, Descriptions, Empty } from 'antd';
import 'antd/dist/antd.css';
import * as THREE from 'three';
// 导入轨道控制器 只能通过这种方法
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// import * as dat from 'dat.gui';
// mockData
import { mockData } from './mockData';
let cartonWidth;
let cartonHeight;
let cartonLength;
let detailIndex = 0;
// let angle = 0;
let intersections;
let intersected;
const defaults = {
result: [],
detailList: [],
dataList: [],
detailNum: 0,
cartonNum: 0,
taskNum: 0,
cartonList: [],
};
let HEIGHT;
let WIDTH;
let boxArr = [];
// 创建场景
const scene = new THREE.Scene();
// 初始化相机
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
99999
);
// 初始化网格
const grid = new THREE.GridHelper(15000, 20, 0x333333, 0x333333);
// 选中子级盒子
const mouse = new THREE.Vector3();
// 射线
const raycaster = new THREE.Raycaster();
// 初始化渲染器
const renderer = new THREE.WebGLRenderer({
antialias: true, // 开启锯齿
alpha: true, // 透明度
});
// 初始化轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 三维坐标轴
const axesHelper = new THREE.AxesHelper(5000);
// gui控制器
// const gui = new dat.GUI();
// const cameraGui = gui.addFolder('调整相机视角');
// cameraGui.add(camera.position, 'x').min(1).max(20000).step(10);
// cameraGui.add(camera.position, 'y').min(1).max(10000).step(10);
// cameraGui.add(camera.position, 'z').min(1).max(10000).step(10);
export default function PackagePreview3D() {
const [selectIndex, setSelectIndex] = useState(0);
const [boxContext, setBoxContext] = useState(null);
const [containerContext, setContainerContext] = useState(null);
// 容器
const container = useRef(null);
// 获取详细数据
const getInfoDetail = async () => {
const res = { status: 200, data: [], success: true };
res.data = mockData.singleContainerLoadingSolutions;
defaults.result = res;
defaults.detailList = [];
// 初始装货箱信息
const { width, length, height } = res.data[0].container.cube;
initBox(width, height, length, res.data[0].container);
// 单个详情
const placedItemsArr = res.data[0].placedItems;
detailIndex = defaults.detailNum = placedItemsArr.length;
// 渲染单个子级盒子
boxArr = [];
for (let i = 0; i < defaults.detailNum; i++) {
const detail = placedItemsArr[i];
defaults.detailList.push(
initObject(
detail.rotatedCube.width,
detail.rotatedCube.height,
detail.rotatedCube.length,
detail.position.x,
detail.position.y,
detail.position.z,
i
)
);
}
};
// 初始化纸箱
const initBox = (xLen, yLen, zLen, context) => {
setContainerContext(context);
cartonWidth = xLen;
cartonHeight = yLen;
cartonLength = zLen;
// 声明几何体
const geometry = new THREE.BoxGeometry(xLen, yLen, zLen);
// 声明材质;
const edges = new THREE.EdgesGeometry(geometry);
// 几何体+ 材质 = 物体
const containerBox = new THREE.LineSegments(edges);
containerBox.material.color = new THREE.Color(0x000000);
containerBox.position.set(0, 0, 0);
// 将物体添加到场景中
scene.add(containerBox);
// 添加网格
grid.position.y = -(cartonHeight / 2) - cartonHeight / 8;
scene.add(grid);
return containerBox;
};
// 材质
function getTextCanvas(width, height, length, i) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.globalAlpha = 0.65;
canvas.width = width;
canvas.height = length;
// 设置箱子面颜色
ctx.fillStyle = 'rgba(255,255,5,1)';
ctx.fillRect(0, 0, width, length);
ctx.save();
// 制作胶带
ctx.fillStyle = 'rgba(183,139,34,1)';
ctx.fillRect(
0,
length / 2 - length / 4 + length / 8,
width,
length / 4
);
ctx.save();
// 设置封条
ctx.fillStyle = 'black';
ctx.fillRect(0, length / 2, width, 10);
ctx.save();
ctx.fillStyle = 'black';
ctx.font = 'normal 180px "楷体"';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(`纸箱${i + 1}`, width / 2, length / 2);
return canvas;
}
// 设置每个子级盒子
const initObject = (width, height, length, x, y, z, index) => {
const mesh = new THREE.Object3D();
const geometry = new THREE.BoxGeometry(width, height, length);
// 设置随机颜色
const color = new THREE.Color(0xff794204);
// 设置子级盒子材质
const material = [];
for (let j = 0; j < geometry.groups.length; j++) {
const mats = new THREE.MeshBasicMaterial({
color,
transparent: true,
opacity: 0.8,
});
material.push(mats);
}
// console.log(
// '宽:',
// width,
// '高:',
// height,
// '长:',
// length,
// '体积:',
// width * height * length,
// );
// 上下面
// for (let j = 0; j < 6; j++) {
material[2].map = new THREE.CanvasTexture(
getTextCanvas(width, height, length, index)
);
// }
// 几何体 + 材质 = 物体
const cube = new THREE.Mesh(geometry, material);
// 3D模型添加 材质和几何体
mesh.add(cube);
// 设置子级盒子边框
const wideFrame = new THREE.BoxGeometry(width, height, length);
const materialBorder = new THREE.EdgesGeometry(wideFrame);
const lineFrame = new THREE.LineSegments(
materialBorder,
new THREE.LineBasicMaterial({ color: 0xff131313 })
);
mesh.add(lineFrame);
// 装箱复位
mesh.position.set(
y + width / 2 - cartonWidth / 2,
z + height / 2 - cartonHeight / 2,
x + length / 2 - cartonLength / 2,
'XYZ'
);
scene.add(mesh);
boxArr.push(cube);
return mesh;
};
// 选中盒子
const onMouseClick = (e) => {
e.preventDefault();
// 修改e精度
mouse.x =
((e.clientX - renderer.domElement.offsetLeft) /
renderer.domElement.clientWidth) *
2 -
1;
mouse.y =
-(
(e.clientY - renderer.domElement.offsetTop) /
renderer.domElement.clientHeight
) *
2 +
1;
raycaster.setFromCamera(mouse, camera);
intersections = raycaster.intersectObjects(boxArr);
if (intersections.length > 0) {
// 计算相交偏移量
intersected = intersections[0].object;
// useEffect 监听筛选出的id变化 确定点的那个盒子
setSelectIndex(
boxArr.findIndex((v) => v.uuid === intersected.uuid)
);
}
};
// 渲染函数
const render = () => {
controls.update();
// 每次执行渲染函数render时候，角度累加0.005
// angle += 0.005;
// 圆周运动网格模型x坐标计算 绕转半径400
// var x = 850 * Math.sin(angle);
// 圆周运动网格模型y坐标计算 绕转半径400
// var z = 400 * Math.cos(angle);
// 每次执行render函数，更新需要做圆周运动网格模型Mesh的位置属性
// controls.object.position.z = x;
// controls.object.position.y = x;
renderer.render(scene, camera);
// 动画帧
requestAnimationFrame(render);
};
const init = () => {
// 实际canvas 宽高
WIDTH = Number(
window
.getComputedStyle(
document.getElementById(
'container'
)
)
.width.split('px')[0]) -
Number(
window
.getComputedStyle(
document.getElementsByClassName(
'ant-drawer-content-wrapper'
)[0]
)
.width.split('px')[0]
);
document.getElementById('canvas-frame').style.width = WIDTH + 'px';
HEIGHT = window.innerHeight;
// 场景颜色
scene.background = new THREE.Color(0x999999);
// 调整相机位置
camera.position.set(12000, 0, 0);
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({
x: 0,
y: 0,
z: 200,
});
scene.add(axesHelper);
scene.add(camera);
raycaster.intersectObjects(scene.children);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setSize(WIDTH, HEIGHT);
// 控制器阻尼
controls.enableDamping = true;
// 动态阻尼系数
controls.dampingFactor = 0.1;
// 旋转中心点
controls.target.set(0, 0, 0);
// 是否允许控制
// controls.enabled = false;
// 是否允许转动
// controls.rotate = false;
// controls.maxPolarAngle = Math.PI / 2;
// 禁用缩放
// controls.enableZoom = false;
// 渲染
render();
// DOM承载渲染器
container.current.appendChild(renderer.domElement);
// 子级盒子选中
document.addEventListener('click', onMouseClick, false);
// 根据页面大小变化，更新渲染
window.addEventListener('resize', () => {
WIDTH = Number(
window
.getComputedStyle(
document.getElementById(
'container'
)
)
.width.split('px')[0]) -
Number(
window
.getComputedStyle(
document.getElementsByClassName(
'ant-drawer-content-wrapper'
)[0]
)
.width.split('px')[0]
);
document.getElementById('canvas-frame').style.width = WIDTH + 'px';
HEIGHT = window.innerHeight;
// 更新camera 宽高比;
camera.aspect = WIDTH / HEIGHT;
// 更新camera 投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器
renderer.setSize(WIDTH, HEIGHT);
// 设置渲染器像素比:
renderer.setPixelRatio(window.devicePixelRatio);
});
};
useEffect(() => {
// 1. 初始化
init();
// 2. 获取详情
getInfoDetail();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
if (defaults?.result?.data?.length) {
if (intersected && intersections) {
boxArr.forEach((v) => {
v.material.forEach(
(i) => (i.color = new THREE.Color(0xff794204))
);
});
boxArr[selectIndex].material.forEach(
(v) => (v.color = new THREE.Color(0xff5e3405))
);
setBoxContext(defaults.result.data[0].placedItems[selectIndex]);
}
}
}, [selectIndex]);
// tab内容
const TabContext = (props) => {
const { active } = props;
// 集装箱信息枚举
const containerContextEnum = {
height: '包装箱高度',
width: '包装箱宽度',
length: '包装箱长度',
containerId: '包装箱id',
price: '价格',
volume: '体积',
weight: '重量',
};
// 纸箱信息枚举
const boxItemContextEnum = {
containerId: '包装箱id',
frontId: '物品前面对应的id',
itemId: '物品id',
itemName: '物品名',
upId: '物品上面对应的id',
height: '纸箱高度',
width: '纸箱宽度',
length: '纸箱长度',
volume: '体积',
};
// 打平JSON，找到对应的枚举★
const flatJSON = (propContext, contextEnum) => {
console.log(propContext, contextEnum);
return Object.entries(propContext).map((v, idx) => {
const [key, value] = v;
if (
Object.prototype.toString.call(value) === '[object Object]'
) {
return flatJSON(value, contextEnum);
}
return contextEnum[key] ? (
<Descriptions.Item label={contextEnum[key]} key={idx}>
{value === 0 || value ? String(value) : '--'}
</Descriptions.Item>
) : null;
});
};
return (
<>
{active === 0 ? (
<Descriptions column={1}>
{props?.containerContext
? flatJSON(
props?.containerContext,
containerContextEnum
)
: null}
</Descriptions>
) : (
<>
{props.boxItemContext ? (
<Descriptions column={1}>
{flatJSON(
props?.boxItemContext,
boxItemContextEnum
)}
</Descriptions>
) : (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={<span>请选中纸箱</span>}
></Empty>
)}
</>
)}
</>
);
};
return (
<div id="container">
<div id="operate">
<Button
style={{ margin: '10px' }}
onClick={() => {
detailIndex = 0;
for (let i = 0; i < defaults.detailNum; i++) {
scene.remove(defaults.detailList[i]);
}
}}
>
清空
</Button>
<Button
style={{ margin: '10px' }}
onClick={() => {
if (detailIndex <= 0) {
return;
}
detailIndex -= 1;
scene.remove(defaults.detailList[detailIndex]);
}}
>
上一步
</Button>
<Button
style={{ margin: '10px' }}
onClick={() => {
if (detailIndex >= defaults.detailNum) {
return;
}
scene.add(defaults.detailList[detailIndex]);
detailIndex += 1;
}}
>
下一步
</Button>
<Button
style={{ margin: '10px' }}
onClick={() => {
detailIndex = defaults.detailNum;
for (let i = 0; i < defaults.detailNum; i++) {
scene.add(defaults.detailList[i]);
}
}}
>
回填
</Button>
</div>
{/* three 承载容器 */}
<div id="canvas-frame" ref={container}></div>
<Drawer
// style={{ width: 0 }}
placement="right"
open
closable={false}
mask={false}
>
<Tabs
defaultActiveKey="1"
items={new Array(2).fill(null).map((_, i) => {
const tabTitle = {
0: '载货箱',
1: '纸箱',
};
return {
label: tabTitle[i],
key: Math.random(),
children: (
<TabContext
active={i}
boxItemContext={boxContext}
containerContext={containerContext}
/>
),
};
})}
/>
</Drawer>
</div>
);
}
假数据：
export const mockData = {
singleContainerLoadingSolutions: [
{
container: {
containerId: 'container',
cube: {
height: 2698,
length: 12032,
volume: 76351414272,
width: 2352,
},
price: 3400.0,
volume: 76351414272,
weight: 30400.0,
},
placedItems: [
{
itemId: 'EBD0100000074785',
orientation: 'FRONT_DOWN',
position: { x: 0, y: 0, z: 0 },
rotatedCube: {
height: 1140,
length: 1270,
volume: 1867662000,
width: 1290,
},
},
{
itemId: 'EBD0100000089800',
orientation: 'FRONT_UP',
position: { x: 1270, y: 0, z: 0 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089800',
orientation: 'FRONT_UP',
position: { x: 2470, y: 0, z: 0 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089800',
orientation: 'FRONT_UP',
position: { x: 3670, y: 0, z: 0 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089800',
orientation: 'FRONT_UP',
position: { x: 4870, y: 0, z: 0 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089800',
orientation: 'FRONT_UP',
position: { x: 0, y: 0, z: 1140 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089800',
orientation: 'FRONT_UP',
position: { x: 6070, y: 0, z: 0 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089801',
orientation: 'FRONT_UP',
position: { x: 7270, y: 0, z: 0 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089801',
orientation: 'FRONT_UP',
position: { x: 1200, y: 0, z: 1160 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089801',
orientation: 'FRONT_UP',
position: { x: 8470, y: 0, z: 0 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089801',
orientation: 'FRONT_UP',
position: { x: 2400, y: 0, z: 1160 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089801',
orientation: 'FRONT_UP',
position: { x: 9670, y: 0, z: 0 },
rotatedCube: {
height: 1160,
length: 1200,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000089801',
orientation: 'BOTTOM_UP',
position: { x: 10870, y: 0, z: 0 },
rotatedCube: {
height: 1200,
length: 1160,
volume: 1670400000,
width: 1200,
},
},
{
itemId: 'EBD0100000083166',
orientation: 'FRONT_UP',
position: { x: 0, y: 1290, z: 0 },
rotatedCube: {
height: 500,
length: 3480,
volume: 1513800000,
width: 870,
},
},
{
itemId: 'EBD0100000083166',
orientation: 'FRONT_UP',
position: { x: 0, y: 1290, z: 500 },
rotatedCube: {
height: 500,
length: 3480,
volume: 1513800000,
width: 870,
},
},
{
itemId: 'EBD010220600022',
orientation: 'FRONT_UP',
position: { x: 3480, y: 1200, z: 0 },
rotatedCube: {
height: 550,
length: 1980,
volume: 1056330000,
width: 970,
},
},
{
itemId: 'EBD0100000072512',
orientation: 'FRONT_UP',
position: { x: 0, y: 1290, z: 1000 },
rotatedCube: {
height: 750,
length: 1380,
volume: 1055700000,
width: 1020,
},
},
{
itemId: 'EBD0100000072513',
orientation: 'FRONT_UP',
position: { x: 5460, y: 1200, z: 0 },
rotatedCube: {
height: 750,
length: 1380,
volume: 1055700000,
width: 1020,
},
},
{
itemId: 'EBD010220600023',
orientation: 'FRONT_UP',
position: { x: 3480, y: 1200, z: 550 },
rotatedCube: {
height: 750,
length: 1380,
volume: 1055700000,
width: 1020,
},
},
{
itemId: 'EBD0100000083503',
orientation: 'SIDE_UP',
position: { x: 1380, y: 1200, z: 1000 },
rotatedCube: {
height: 900,
length: 1020,
volume: 1009800000,
width: 1100,
},
},
{
itemId: 'EBD0100000083503',
orientation: 'SIDE_UP',
position: { x: 6840, y: 1200, z: 0 },
rotatedCube: {
height: 900,
length: 1020,
volume: 1009800000,
width: 1100,
},
},
{
itemId: 'EBD0100000072510',
orientation: 'SIDE_UP',
position: { x: 2400, y: 1200, z: 1000 },
rotatedCube: {
height: 900,
length: 1020,
volume: 1000620000,
width: 1090,
},
},
{
itemId: 'EBD010220600024',
orientation: 'SIDE_UP',
position: { x: 7860, y: 1200, z: 0 },
rotatedCube: {
height: 900,
length: 1020,
volume: 1000620000,
width: 1090,
},
},
{
itemId: 'EBD010220600024',
orientation: 'SIDE_UP',
position: { x: 8880, y: 1200, z: 0 },
rotatedCube: {
height: 900,
length: 1020,
volume: 1000620000,
width: 1090,
},
},
{
itemId: 'EBD010220600024',
orientation: 'SIDE_UP',
position: { x: 4860, y: 1200, z: 750 },
rotatedCube: {
height: 900,
length: 1020,
volume: 1000620000,
width: 1090,
},
},
{
itemId: 'EBD010220600024',
orientation: 'SIDE_UP',
position: { x: 0, y: 1200, z: 1750 },
rotatedCube: {
height: 900,
length: 1020,
volume: 1000620000,
width: 1090,
},
},
{
itemId: 'EBD010220600024',
orientation: 'SIDE_UP',
position: { x: 9900, y: 1200, z: 0 },
rotatedCube: {
height: 900,
length: 1020,
volume: 1000620000,
width: 1090,
},
},
{
itemId: 'EBD010220600024',
orientation: 'FRONT_UP',
position: { x: 10920, y: 1200, z: 0 },
rotatedCube: {
height: 900,
length: 1090,
volume: 1000620000,
width: 1020,
},
},
{
itemId: 'EBD010220600025',
orientation: 'SIDE_UP',
position: { x: 3600, y: 0, z: 1160 },
rotatedCube: {
height: 900,
length: 1020,
volume: 1000620000,
width: 1090,
},
},
{
itemId: 'EBD0100000085086',
orientation: 'SIDE_UP',
position: { x: 3420, y: 1200, z: 1300 },
rotatedCube: {
height: 900,
length: 1010,
volume: 999900000,
width: 1100,
},
},
{
itemId: 'EBD0100000085086',
orientation: 'BOTTOM_UP',
position: { x: 5880, y: 1200, z: 750 },
rotatedCube: {
height: 1010,
length: 900,
volume: 999900000,
width: 1100,
},
},
{
itemId: 'EBD0100000085086',
orientation: 'SIDE_UP',
position: { x: 4620, y: 0, z: 1160 },
rotatedCube: {
height: 900,
length: 1010,
volume: 999900000,
width: 1100,
},
},
{
itemId: 'EBD0100000085086',
orientation: 'SIDE_UP',
position: { x: 6780, y: 1200, z: 900 },
rotatedCube: {
height: 900,
length: 1010,
volume: 999900000,
width: 1100,
},
},
{
itemId: 'EBD0100000085086',
orientation: 'SIDE_UP',
position: { x: 5630, y: 0, z: 1160 },
rotatedCube: {
height: 900,
length: 1010,
volume: 999900000,
width: 1100,
},
},
{
itemId: 'EBD0100000091870',
orientation: 'FRONT_UP',
position: { x: 7790, y: 1200, z: 900 },
rotatedCube: {
height: 850,
length: 1080,
volume: 991440000,
width: 1080,
},
},
{
itemId: 'EBD010220600021',
orientation: 'FRONT_UP',
position: { x: 1020, y: 1200, z: 1900 },
rotatedCube: {
height: 550,
length: 1980,
volume: 838530000,
width: 770,
},
},
{
itemId: 'EBD010220600024',
orientation: 'FRONT_UP',
position: { x: 6640, y: 0, z: 1160 },
rotatedCube: {
height: 550,
length: 1980,
volume: 838530000,
width: 770,
},
},
{
itemId: 'EBD0100000084194',
orientation: 'FRONT_UP',
position: { x: 6640, y: 770, z: 1160 },
rotatedCube: {
height: 550,
length: 3430,
volume: 792330000,
width: 420,
},
},
{
itemId: 'EBD0100000091870',
orientation: 'SIDE_UP',
position: { x: 4430, y: 1100, z: 1650 },
rotatedCube: {
height: 660,
length: 800,
volume: 580800000,
width: 1100,
},
},
{
itemId: 'EBD0100000091870',
orientation: 'FRONT_UP',
position: { x: 8870, y: 1200, z: 900 },
rotatedCube: {
height: 600,
length: 1200,
volume: 576000000,
width: 800,
},
},
{
itemId: 'EBD0100000072510',
orientation: 'BOTTOM_UP',
position: { x: 5230, y: 1100, z: 1760 },
rotatedCube: {
height: 770,
length: 850,
volume: 575960000,
width: 880,
},
},
{
itemId: 'EBD0100000085086',
orientation: 'BOTTOM_UP',
position: { x: 10070, y: 1200, z: 900 },
rotatedCube: {
height: 770,
length: 850,
volume: 575960000,
width: 880,
},
},
{
itemId: 'EBD0100000085086',
orientation: 'FRONT_UP',
position: { x: 8620, y: 0, z: 1160 },
rotatedCube: {
height: 850,
length: 880,
volume: 575960000,
width: 770,
},
},
{
itemId: 'EBD0100000091870',
orientation: 'BOTTOM_UP',
position: { x: 3600, y: 0, z: 2060 },
rotatedCube: {
height: 600,
length: 660,
volume: 475200000,
width: 1200,
},
},
{
itemId: 'EBD0100000085082',
orientation: 'FRONT_UP',
position: { x: 9500, y: 0, z: 1200 },
rotatedCube: {
height: 500,
length: 1480,
volume: 458800000,
width: 620,
},
},
{
itemId: 'EBD0100000085082',
orientation: 'FRONT_UP',
position: { x: 4260, y: 0, z: 2060 },
rotatedCube: {
height: 500,
length: 1480,
volume: 458800000,
width: 620,
},
},
{
itemId: 'EBD0100000093099',
orientation: 'FRONT_UP',
position: { x: 10920, y: 1200, z: 900 },
rotatedCube: {
height: 530,
length: 1060,
volume: 410114000,
width: 730,
},
},
{
itemId: 'EBD0100000095770',
orientation: 'FRONT_DOWN',
position: { x: 6080, y: 1100, z: 1760 },
rotatedCube: {
height: 590,
length: 590,
volume: 313290000,
width: 900,
},
},
{
itemId: 'EBD0100000095770',
orientation: 'FRONT_DOWN',
position: { x: 6640, y: 0, z: 1710 },
rotatedCube: {
height: 590,
length: 590,
volume: 313290000,
width: 900,
},
},
{
itemId: 'EBD0100000095770',
orientation: 'BOTTOM_UP',
position: { x: 10980, y: 0, z: 1200 },
rotatedCube: {
height: 590,
length: 900,
volume: 313290000,
width: 590,
},
},
{
itemId: 'EBD0100000095770',
orientation: 'FRONT_DOWN',
position: { x: 7230, y: 0, z: 1710 },
rotatedCube: {
height: 590,
length: 590,
volume: 313290000,
width: 900,
},
},
{
itemId: 'EBD0100000093099',
orientation: 'FRONT_UP',
position: { x: 6670, y: 900, z: 1800 },
rotatedCube: {
height: 550,
length: 680,
volume: 269280000,
width: 720,
},
},
{
itemId: 'EBD0100000085082',
orientation: 'FRONT_DOWN',
position: { x: 3000, y: 1200, z: 2200 },
rotatedCube: {
height: 420,
length: 1280,
volume: 268800000,
width: 500,
},
},
{
itemId: 'EBD0100000085082',
orientation: 'FRONT_DOWN',
position: { x: 3000, y: 1700, z: 2200 },
rotatedCube: {
height: 420,
length: 1280,
volume: 268800000,
width: 500,
},
},
{
itemId: 'EBD0100000085086',
orientation: 'FRONT_UP',
position: { x: 0, y: 0, z: 2300 },
rotatedCube: {
height: 310,
length: 930,
volume: 268119000,
width: 930,
},
},
{
itemId: 'EBD0100000086191',
orientation: 'FRONT_UP',
position: { x: 10920, y: 1930, z: 900 },
rotatedCube: {
height: 550,
length: 880,
volume: 203280000,
width: 420,
},
},
{
itemId: 'EBD0100000086191',
orientation: 'FRONT_UP',
position: { x: 4260, y: 620, z: 2060 },
rotatedCube: {
height: 550,
length: 880,
volume: 203280000,
width: 420,
},
},
{
itemId: 'EBD0100000085086',
orientation: 'FRONT_UP',
position: { x: 10070, y: 620, z: 1160 },
rotatedCube: {
height: 520,
length: 650,
volume: 192660000,
width: 570,
},
},
{
itemId: 'EBD0100000091870',
orientation: 'FRONT_DOWN',
position: { x: 10980, y: 590, z: 1200 },
rotatedCube: {
height: 400,
length: 790,
volume: 186440000,
width: 590,
},
},
{
itemId: 'EBD0100000091870',
orientation: 'SIDE_UP',
position: { x: 930, y: 0, z: 2320 },
rotatedCube: {
height: 320,
length: 660,
volume: 185856000,
width: 880,
},
},
{
itemId: 'EBD0100000085086',
orientation: 'SIDE_UP',
position: { x: 6670, y: 1620, z: 1800 },
rotatedCube: {
height: 530,
length: 550,
volume: 174900000,
width: 600,
},
},
{
itemId: 'EBD0100000091870',
orientation: 'FRONT_DOWN',
position: { x: 1020, y: 1970, z: 1900 },
rotatedCube: {
height: 600,
length: 800,
volume: 168000000,
width: 350,
},
},
{
itemId: 'EBD0100000085082',
orientation: 'BOTTOM_UP',
position: { x: 4430, y: 1100, z: 1300 },
rotatedCube: {
height: 270,
length: 380,
volume: 121068000,
width: 1180,
},
},
{
itemId: 'EBD0100000085082',
orientation: 'FRONT_DOWN',
position: { x: 1820, y: 1970, z: 1900 },
rotatedCube: {
height: 270,
length: 1180,
volume: 121068000,
width: 380,
},
},
{
itemId: 'EBD0100000083166',
orientation: 'BOTTOM_UP',
position: { x: 3000, y: 1200, z: 1900 },
rotatedCube: {
height: 270,
length: 380,
volume: 112860000,
width: 1100,
},
},
{
itemId: 'EBD0100000091595',
orientation: 'SIDE_UP',
position: { x: 1590, y: 0, z: 2320 },
rotatedCube: {
height: 210,
length: 580,
volume: 87696000,
width: 720,
},
},
{
itemId: 'EBD0100000083166',
orientation: 'FRONT_UP',
position: { x: 0, y: 930, z: 2300 },
rotatedCube: {
height: 380,
length: 680,
volume: 69768000,
width: 270,
},
},
{
itemId: 'EBD0100000085082',
orientation: 'FRONT_DOWN',
position: { x: 1820, y: 1970, z: 2170 },
rotatedCube: {
height: 270,
length: 680,
volume: 69768000,
width: 380,
},
},
{
itemId: 'EBD0100000085082',
orientation: 'FRONT_DOWN',
position: { x: 1590, y: 720, z: 2320 },
rotatedCube: {
height: 270,
length: 680,
volume: 69768000,
width: 380,
},
},
],
totalVolume: 56630547000,
totalWeight: 69.0,
},
],
};
// 纸箱数据
export const itemMockData = {
success: true,
errorCode: null,
errorMessage: null,
data: [
{
containerId: '安琪11号纸箱',
itemId: 'E80002810',
itemName: '',
x: 0,
y: 0,
z: 0,
frontId: null,
upId: null,
length: 97,
width: 212,
height: 52,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: 'E80002810',
itemName: '',
x: 0,
y: 0,
z: 52,
frontId: null,
upId: null,
length: 52,
width: 212,
height: 97,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89006410',
itemName: '',
x: 97,
y: 0,
z: 0,
frontId: null,
upId: null,
length: 79,
width: 56,
height: 159,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89006410',
itemName: '',
x: 97,
y: 56,
z: 0,
frontId: null,
upId: null,
length: 79,
width: 56,
height: 159,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005900',
itemName: '',
x: 52,
y: 112,
z: 52,
frontId: null,
upId: null,
length: 182,
width: 57,
height: 57,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005900',
itemName: '',
x: 52,
y: 112,
z: 109,
frontId: null,
upId: null,
length: 182,
width: 57,
height: 57,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89002686',
itemName: '',
x: 97,
y: 112,
z: 0,
frontId: null,
upId: null,
length: 115,
width: 47,
height: 47,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89002686',
itemName: '',
x: 212,
y: 0,
z: 0,
frontId: null,
upId: null,
length: 115,
width: 47,
height: 47,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005277',
itemName: '',
x: 52,
y: 0,
z: 52,
frontId: null,
upId: null,
length: 45,
width: 45,
height: 115,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005277',
itemName: '',
x: 52,
y: 45,
z: 52,
frontId: null,
upId: null,
length: 45,
width: 45,
height: 115,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89002716',
itemName: '',
x: 176,
y: 0,
z: 47,
frontId: null,
upId: null,
length: 45,
width: 45,
height: 115,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89002716',
itemName: '',
x: 221,
y: 0,
z: 47,
frontId: null,
upId: null,
length: 45,
width: 45,
height: 115,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89002689',
itemName: '',
x: 212,
y: 47,
z: 0,
frontId: null,
upId: null,
length: 115,
width: 45,
height: 45,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89002689',
itemName: '',
x: 212,
y: 92,
z: 0,
frontId: null,
upId: null,
length: 115,
width: 45,
height: 45,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89002684',
itemName: '',
x: 176,
y: 45,
z: 47,
frontId: null,
upId: null,
length: 45,
width: 45,
height: 115,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89002684',
itemName: '',
x: 212,
y: 137,
z: 0,
frontId: null,
upId: null,
length: 115,
width: 45,
height: 45,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89002628',
itemName: '',
x: 97,
y: 159,
z: 0,
frontId: null,
upId: null,
length: 115,
width: 45,
height: 45,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89002628',
itemName: '',
x: 221,
y: 47,
z: 45,
frontId: null,
upId: null,
length: 115,
width: 45,
height: 45,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005783',
itemName: '',
x: 176,
y: 0,
z: 0,
frontId: null,
upId: null,
length: 35,
width: 105,
height: 35,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005783',
itemName: '',
x: 266,
y: 0,
z: 47,
frontId: null,
upId: null,
length: 35,
width: 35,
height: 105,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005712',
itemName: '',
x: 97,
y: 0,
z: 162,
frontId: null,
upId: null,
length: 152,
width: 104,
height: 8,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005712',
itemName: '',
x: 176,
y: 104,
z: 45,
frontId: null,
upId: null,
length: 152,
width: 8,
height: 104,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005711',
itemName: '',
x: 176,
y: 92,
z: 45,
frontId: null,
upId: null,
length: 152,
width: 8,
height: 104,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005711',
itemName: '',
x: 0,
y: 212,
z: 0,
frontId: null,
upId: null,
length: 104,
width: 8,
height: 152,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005970',
itemName: '',
x: 301,
y: 0,
z: 47,
frontId: null,
upId: null,
length: 37,
width: 42,
height: 41,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005970',
itemName: '',
x: 301,
y: 0,
z: 88,
frontId: null,
upId: null,
length: 37,
width: 42,
height: 41,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005959',
itemName: '',
x: 301,
y: 0,
z: 129,
frontId: null,
upId: null,
length: 37,
width: 42,
height: 41,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005959',
itemName: '',
x: 249,
y: 45,
z: 90,
frontId: null,
upId: null,
length: 41,
width: 42,
height: 37,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005958',
itemName: '',
x: 266,
y: 42,
z: 127,
frontId: null,
upId: null,
length: 37,
width: 41,
height: 42,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005958',
itemName: '',
x: 52,
y: 169,
z: 52,
frontId: null,
upId: null,
length: 41,
width: 42,
height: 37,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005957',
itemName: '',
x: 290,
y: 42,
z: 90,
frontId: null,
upId: null,
length: 42,
width: 41,
height: 37,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005957',
itemName: '',
x: 303,
y: 42,
z: 127,
frontId: null,
upId: null,
length: 37,
width: 41,
height: 42,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005956',
itemName: '',
x: 52,
y: 169,
z: 89,
frontId: null,
upId: null,
length: 41,
width: 42,
height: 37,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005956',
itemName: '',
x: 93,
y: 169,
z: 52,
frontId: null,
upId: null,
length: 41,
width: 42,
height: 37,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005955',
itemName: '',
x: 52,
y: 169,
z: 126,
frontId: null,
upId: null,
length: 37,
width: 42,
height: 41,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005955',
itemName: '',
x: 93,
y: 169,
z: 89,
frontId: null,
upId: null,
length: 41,
width: 42,
height: 37,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005954',
itemName: '',
x: 89,
y: 169,
z: 126,
frontId: null,
upId: null,
length: 37,
width: 42,
height: 41,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005954',
itemName: '',
x: 104,
y: 204,
z: 0,
frontId: null,
upId: null,
length: 41,
width: 37,
height: 42,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005953',
itemName: '',
x: 0,
y: 220,
z: 0,
frontId: null,
upId: null,
length: 37,
width: 42,
height: 41,
direction: null,
},
{
containerId: '安琪11号纸箱',
itemId: '89005953',
itemName: '',
x: 0,
y: 220,
z: 41,
frontId: null,
upId: null,
length: 37,
width: 42,
height: 41,
direction: null,
},
],
};
// 载货箱假数据
export const containerMockData = {
success: true,
errorCode: null,
errorMessage: null,
data: [
{
containerId: '安琪11号纸箱',
containerName: '',
totalVolume: 9347474,
totalWeight: 40.0,
fillRate: 0.5674421174042372,
containerOrderId: 1,
length: 340,
width: 285,
height: 170,
},
],
};
//
1056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
