Cargo-Planner Docs

在您的应用程序中包含

虽然我们的网络应用程序应该涵盖大多数用例，但有时可能需要将装载规划功能添加到现有的WMS或ERP系统中——或者您自己定制的网络门户中。您可以通过使用我们的Rest API和JavaScript SDK来利用大部分功能。

三种将Cargo-Planner添加到您的应用程序的方法

有三种方法可以将货物规划功能添加到您的应用程序中。哪一种最适合您的用例是在复杂性、功能和定制之间的权衡。

1. 嵌入到iframe中 - 几乎无需代码

集成我们的装载规划工具的最简单方法是将视图嵌入到iframe html元素中。

这种方法的最大缺点是它将以非认证的方式完成，这意味着装载列表对象需要事先创建，然后启用公共共享的读写访问权限。为此，您需要创建一个新的装载计划（您只需创建它——无需填写任何数据），然后启用共享。

完成后，复制共享链接并将其嵌入到iframe中，如下所示：

<iframe
  src="https://app.cargo-planner.com/loadlist/10405cacde654075kjf53bd1f78520/workspace/0?length_dim=IN&weight_dim=LB&primary=1e3a8a"></iframe>

从API生成的装载计划

请注意，您可以添加一个带有十六进制颜色的primary查询参数。提供您的主题颜色，它将更好地融入您的环境

您还可以将查询参数hide_navigation设置为true以隐藏导航栏。如果您例如只想显示装载计划视图，这可能会很有用。

2. 使用API上传数据 - 在iframe中显示结果

虽然上述解决方案可以快速将装载规划功能附加到您的网站，但主要缺点是您需要手动创建每个列表。如果您的应用程序有多个用户使用，可能会导致一些奇怪的行为，因为同一个装载列表可能会同时被更新。

另一个缺点是货物数据需要手动添加（当然，您仍然可以使用各种导入功能）。您的应用程序可能已经有这些信息——因此，如果可以自动上传这些信息，那将是很好的。

解决方案是使用我们的API。

假设您的应用程序有以下端点：

# 您的服务器位于https://example.com的/calculate端点

import requests
import json

CARGO_PLANNER_TOKEN = 'Token your-token'

def calculate(request):

    # 这些数据可能来自您的前端网站或您的内部数据源
    data = {
        "loadlist": {
            "name": "Purchase-order 1234",
            "public_access": "RW"
        },
        "calculation": {
            "length_dim": "CM",
            "weight_dim": "KG"
            "container_types": [
                {
                    "id": 1,
                    "payload": 20000
                }
            ],
            "items": [
                {
                    "label": "product 1",
                    "l": 30,
                    "w": 80,
                    "h": 90,
                    "wt": 70,
                    "qty": 2
                },
                {
                    "label": "product 2",
                    "l": 50,
                    "w": 40,
                    "h": 50,
                    "wt": 40,
                    "qty": 3
                }
            ],
        }
    }

    # 调用我们的API
    response = requests.post(
        url="https://api.cargo-planner.com/api/2/create_and_calculate/",
        data=json.dumps(data),
        headers={
            'Content-type': 'application/json',
            'Authorization': CARGO_PLANNER_TOKEN
        })
    if response.status_code == 200:
        # 返回您的页面链接以供iframe使用
        return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
    #...

3. 使用API上传数据 - 使用我们的SDK显示结果

为了实现外观和感觉的完全定制，同时也不需要使用iframe，您可以使用我们的JavaScript SDK。

通过这种方式，您可以显示每个集装箱的3D布局，并呈现您认为最重要的指标。

以下是一个简单的Python服务器端代码片段和一个用于您的前端应用程序的JavaScript代码片段：

# 您的服务器位于https://example.com的/calculate端点

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()
    #...

<meta charset="utf-8">
<title>我的客户门户</title>
<script src="https://usermedia.cargoplanner.net/sdk/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": "Cargo 1",
                "l": 1.2,
                "w": 0.8,
                "h": 0.5,
                "wt": 300,
                "qty": 20,
                "layers": 2,
                "color":"#48c9b0"
            },
            {
                "label": "Cargo 2",
                "l": 1.2,
                "w": 1.0,
                "h": 0.9,
                "wt": 300,
                "qty": 20,
                "layers": 2,
                "color":"#ec7063"
            },

        ],
        "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} 最大使用空间: ${container.items_bb.max.x}, 使用重量: ${container.WT}  `)
                        containerDiv.appendChild(label);
                        containerDiv.appendChild(canvas);

                        document.body.appendChild(containerDiv);
                    });

                });
            });
        }
    });
}

</script>

上述示例将生成以下装载计划：

从API生成的装载计划