Cargo-Planner Docs
在您的应用程序中使用Cargo-Planner
虽然我们的网络应用程序应该可以覆盖大多数使用场景,但有时可能需要将装载规划功能添加到现有的WMS或ERP系统中,或者您自己的定制网络门户中。您可以通过使用我们的Rest API和JavaScript SDK来利用大部分功能。
服务器端
虽然实际上您不需要使用服务器,但它是作为Cargo-Planner和客户端之间的中介的一个好方法。 如果您有办法安全地将API令牌发布到客户端(请记住,将密钥存储在localStorage或代码中不是好的做法) - 您可以直接从客户端调用我们的API。
# /calculate endpoint at your server located at https://api.acme.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
response = requests.post(
url="https://api.cargo-planner.com/api/2/calculate/",
data=json.dumps(request.data),
headers={
'Content-type': 'application/json',
'Authorization': CARGO_PLANNER_TOKEN
})
if response.status_code == 200:
return response.json()
#...
客户端
在这里获取我们的SDK。下面的示例将调用上述端点,该端点将调用我们的API并返回您的计算数据的装载计划/解决方案,然后显示每个集装箱的3D图像。
<meta charset="utf-8">
<title>我的客户门户</title>
<script src="./cargoPlannerSDK.umd.min.js"></script>
<body>
<h1>装载计划</h1>
</body>
<script>
calculate();
async function calculate() {
// 初始化3D引擎
await cargoPlannerSDK.SceneManager.init();
// 请参阅API文档以获取更多选项
let calculationData = {
length_dim: "M",
weight_dim: "KG",
"items": [
{
"label": "货物 1",
"l": 1.2,
"w": 0.8,
"h": 0.5,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#48c9b0"
},
{
"label": "货物 2",
"l": 1.2,
"w": 1.0,
"h": 0.9,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#ec7063"
},
],
"settings": {
"group_items": true
},
"container_types": [
{
"name": "40ft DV",
"L": 12,
"W": 2.33,
"H": 2.38,
"payload": 22000,
"door": {
H: 2.33,
W: 2.28
}
}
]
}
fetch('/calculate/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(calculationData),
})
.then(response => response.json())
.then(data => {
// 如果我们收到任何解决方案
if(data.solutions) {
// 目前每次计算给出一个解决方案(将来我们可能会提供更多)
data.solutions.forEach((solution) => {
// 遍历每个集装箱
solution.containers.forEach((container, index) => {
// 渲染画布
cargoPlannerSDK.SceneManager.createScene(
container, // 集装箱数据
null, // 交互模式(显示多个集装箱时设置为null)
400, // 像素宽度
200 // 像素高度
).then((canvas) => {
const containerDiv = document.createElement("div");
const label = document.createTextNode(`集装箱 ${index+1}: ${container.name}`)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
上述示例将生成以下装载计划:
