基於 WEB 的 WMS 3D 可視化管理系統

基於 WEB 的 WMS 3D 可視化管理系統

前言

首先介紹一下什么是WMS。WMS是倉庫管理系統(Warehouse Management System) 的縮寫，倉庫管理系統是通過入庫業務、出庫業務、倉庫調撥、庫存調撥和虛倉管理等功能，對批次管理、物料對應、庫存盤點、質檢管理、虛倉管理和即時庫存管理等功能綜合運用的管理系統，有效控制並跟蹤倉庫業務的物流和成本管理全過程，實現或完善的企業倉儲信息管理。該系統可以獨立執行庫存操作，也可與其他系統的單據和憑證等結合使用，可為企業提供更為完整企業物流管理流程和財務管理信息。

目前主流的 WMS 倉庫管理系統大都采用了 B/S 模式，但數據可視化技術上仍采用的是傳統圖表顯示方式。本文從數據可視化的角度介紹了一種基於 WEB 的 3D 可視化實現方案，底層基於標准的 HTML5 WebGL 技術，以 3D 的方式顯示倉庫立體場景，包括貨架、貨物、堆垛機、穿梭車、輸送機等。相對於傳統圖表顯示方式，三維的倉庫管理可視化顯示方式，顯得更加直觀和立體化，無論是用戶體驗還是產品質量都得到了巨大提升。

 

一、WebGL 介紹以及 3D 引擎的選擇

WebGL（全寫Web Graphics Library）是一種3D繪圖協議，這種繪圖技術標准允許把JavaScript和 OpenGL ES 2.0 結合在一起，通過增加 OpenGL ES 2. 0的一個 JavaScript 綁定，WebGL 可以為HTML5 Canvas 提供硬件 3D 加速渲染，這樣Web開發人員就可以借助系統顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創建復雜的導航和數據視覺化。顯然，WebGL 技術標准免去了開發網頁專用渲染插件的麻煩，可被用於創建具有復雜3D結構的網站頁面，甚至可以用來設計 3D 網頁游戲等等。

由於 WebGL 是一種偏底層的技術，為了降低開發難度和節省開發成本，不建議直接基於 WebGL進行開發。目前業內大都采用基於 WebGL 實現的 3D 引擎進行開發。Web 3D 引擎比較多，很多是面向不同行業和不同的應用場景的，下面我們介紹幾個常見的且有代表性的 3D 引擎，並選擇一個適合來用來構建 WMS 3D 可視化倉庫管理系統。

1. Three.js

Three.js 是純渲染引擎，而且代碼易讀，容易作為學習WebGL、3D圖形、3D數學應用的平台，也可以做中小型的重表現的Web項目。但如果要做中大型項目，尤其是多種媒體混雜的或者是游戲項目VR體驗項目，Three.js必須要配合更多擴展庫才能完成。

 

2. Babylon.js

Babylon.js 是微軟發布的開源的 Web 3D 引擎。最初設計作為一個Silverlight游戲引擎，Babylon.js 的維護傾向於基於 Web 的游戲開發與碰撞檢測和抗鋸齒等特性。在其官網上可以看到很多例子： http://www.babylonjs.com/ 。

 

3. HT for Web

HT for Web 是基於 HTML5標准的企業應用圖形界面一站式解決方案，其包含通用組件、拓撲組件和3D渲染引擎等豐富的圖形界面開發類庫。雖然 HT for Web 是商業軟件但其提供的一站式解決方案可以極大縮短產品開發周期、減少研發成本、補齊我們在 Web 圖形界面可視化技術上的短板。

 

我們選擇的 3D 引擎是 HT for Web，雖然需要一定的授權費，但總體上來看是有價值的，我們在很短的時間內就可以開發出一套定制化的 WMS 3D 可視化倉庫管理系統。由於是商用軟件，對方提供了很好的技術支持，官網有完善的文檔手冊，開發包的使用也很容易上手。

 

二、功能實現

WMS 數據可視化主要包括以下幾部分功能：

1. 狀態管理

用於顯示WMS通訊狀態、堆垛機狀態，包括是否故障、通訊狀態、故障信息。

 

顯示狀態面板只需要引用 HT 的圖紙文件：

const g2d = new ht.graph.GraphView()
g2d.setPannable(false)
g2d.setRectSelectable(false)
g2d.handleScroll = function () {}
g2d.setScrollBarVisible(false)

ht.Default.xhrLoad('displays/狀態面板.json', function (json) {
    g2d.dm().deserialize(json)
})

2. 任務管理

顯示當前出庫入庫任務列表

 

 

出庫入庫任務列表也可以用 HT 圖紙進行顯示：

const g2d = new ht.graph.GraphView()

g2d.setPannable(false)
g2d.setRectSelectable(false)
g2d.handleScroll = function () {}
g2d.setScrollBarVisible(false)
ht.Default.xhrLoad('displays/任務列表.json', function (json) {
    g2d.dm().deserialize(json)
})

3. 故障管理

顯示當前的故障信息列表。

故障信息頁面為 HT 圖紙，代碼實現如下：

const g2d = new ht.graph.GraphView()
g2d.setPannable(false)
g2d.setRectSelectable(false)
g2d.handleScroll = function () {}
g2d.setScrollBarVisible(false)

ht.Default.xhrLoad('displays/故障信息.json', function (json) {
    g2d.dm().deserialize(json);
});

 

 

4. 單機管理

提前信息后WMS實現貨物入庫或出庫。

入庫邏輯和出庫邏輯需要分別實現，整個過程涉及貨物在輸送出上的移動動畫、堆垛機的移動動畫、堆垛機的取貨放貨動畫。

貨物入庫核心代碼：

// 貨物入庫
function goodsIn(code) {
    var good = dataModel.getDataByTag(code)
    if (!good) {
        console.warn('貨物編號不存在：', code)
        return
    }
    ////////// 入庫口移動至輸入機 //////////////

    var row = good.a('row')
    var col = good.a('col')
    var floor = good.a('floor')

    if (col <= colSize / 2) { // 左側
        let goodP3 = dataModel.getDataByTag('入口1').p3()
        goodP3[1] = floorBaseElevation
        good.p3(goodP3)
    } else { // 右側
        let goodP3 = dataModel.getDataByTag('入口2').p3()
        goodP3[1] = floorBaseElevation
        good.p3(goodP3)
    }
    good.s('3d.visible', true)
    good.setHost(null)

    if (col <= colSize / 2) { // 左側
        let refer = dataModel.getDataByTag('LeftFront')
        moveZTo(good, refer.getY(), null, () => {
            moveXTo(good, refer.getX(), null, () => { // 左移
                // 后移至貨架水平位置
                let targetY = null
                if (Math.floor(row % 2) === 0) { // 偶數列
                    targetY = good.a('p3')[2] + 300
                } else {
                    targetY = good.a('p3')[2]
                }
                moveZTo(good, targetY, null, () => {
                    // 右移至貨架邊緣
                    moveXTo(good, dataModel.getDataByTag('升降機L' + row + ':底座').getX(), null, () => {
                        // 離開輸送機移動至貨架
                        goodToShelve(good)
                    })
                })
            })
        })

    } else { // 右側
        let refer = dataModel.getDataByTag('RightFront')
        moveZTo(good, refer.getY(), null, () => {
            moveXTo(good, refer.getX(), null, () => { // 右移
                // 后移至貨架水平位置
                let targetY = null
                if (Math.floor(row % 2) === 0) { // 偶數列
                    targetY = good.a('p3')[2] + 300
                } else {
                    targetY = good.a('p3')[2]
                }
                moveZTo(good, targetY, null, () => {
                    // 左移至貨架邊緣
                    moveXTo(good, dataModel.getDataByTag('升降機R' + row + ':底座').getX(), null, () => {
                        // 離開輸送機移動至貨架
                        goodToShelve(good)
                    })
                })
            })
        })
    }
}

貨物出庫核心代碼：

// 貨物出庫
function goodsOut(code) {
    var good = dataModel.getDataByTag(code)
    if (!good) {
        console.warn('貨物編號不存在：', code)
        return
    }

    var row = good.a('row')
    var col = good.a('col')
    var floor = good.a('floor')

    let elevatorRow = parseInt((row + 1) / 2)
    let isLeft = col <= (colSize / 2)
    let elevator = isLeft ? dataModel.getDataByTag("升降機L" + elevatorRow) : dataModel.getDataByTag("升降機R" + elevatorRow)

    let elevatorX = elevator.getX()
    let x = (good.getX() - elevatorX)
    // 水平移動
    ht.Default.startAnim({
        duration: Math.abs(col - elevator.a('col')) * animationUnit, // 動畫周期毫秒數，默認采用`ht.Default.animDuration`
        action: function (v, t) {
            elevator.setX(elevatorX + x * v)
        },
        finishFunc: function () {
            elevator.a('col', col)

            // 底座垂直移動
            let base = dataModel.getDataByTag(elevator.getTag() + ":底座")
            if (floor > 1) {
                baseUp(base, good, floor, true, false)
            } else {
                // 取貨，出貨
                startHandAnimation(base, good, floor, true, false)
            }
        }
    });
}

堆垛機上升動畫實現：

function elevatorIn(elevator, good) {
    console.log('elevatorIn')
    var row = good.a('row')
    var col = good.a('col')
    var floor = good.a('floor')

    let elevatorX = elevator.getX()
    let goodP3 = good.a('p3')
    let x = (goodP3[0] - elevatorX)
    // 水平移動
    ht.Default.startAnim({
        duration: Math.abs(col - elevator.a('col')) * animationUnit, // 動畫周期毫秒數，默認采用`ht.Default.animDuration`
        action: function (v, t) {
            elevator.setX(elevatorX + x * v)
        },
        finishFunc: function () {
            elevator.a('col', col)

            // 底座垂直移動
            let base = dataModel.getDataByTag(elevator.getTag() + ":底座")
            if (floor > 1) {
                baseUp(base, good, floor, false, true)
            } else {
                // 送貨
                startHandAnimation(base, good, floor, false, true)
            }
        }
    });
}

堆垛機動畫：

// 堆垛機出貨
function elevatorOut(elevator, good, goodIn) {
    console.log('elevatorOut')
    let elevatorX = elevator.getX()
    let isLeft = elevator.getTag().startsWith('升降機L')
    let start = isLeft ? LeftElevatorX : RightElevatorX
    let xOffset = (start - elevatorX)

    let t = isLeft ? Math.abs(elevator.a('col')) : Math.abs(colSize - elevator.a('col') + 1)
    // 水平移動
    ht.Default.startAnim({
        duration: t * animationUnit, // 動畫周期毫秒數，默認采用`ht.Default.animDuration`
        action: function (v, t) {
            elevator.setX(elevatorX + xOffset * v)
        },
        finishFunc: function () {
            elevator.a('col', isLeft ? 0 : (colSize + 1))
            if (!goodIn) {
                startHandAnimation(dataModel.getDataByTag(elevator.getTag() + ":底座"), good, 1, false, goodIn)
            }
        }
    })
}

// 堆垛機取貨
function elevatorIn(elevator, good) {
    console.log('elevatorIn')
    var row = good.a('row')
    var col = good.a('col')
    var floor = good.a('floor')

    let elevatorX = elevator.getX()
    let goodP3 = good.a('p3')
    let x = (goodP3[0] - elevatorX)
    // 水平移動
    ht.Default.startAnim({
        duration: Math.abs(col - elevator.a('col')) * animationUnit, // 動畫周期毫秒數，默認采用`ht.Default.animDuration`
        action: function (v, t) {
            elevator.setX(elevatorX + x * v)
        },
        finishFunc: function () {
            elevator.a('col', col)

            // 底座垂直移動
            let base = dataModel.getDataByTag(elevator.getTag() + ":底座")
            if (floor > 1) {
                baseUp(base, good, floor, false, true)
            } else {
                // 送貨
                startHandAnimation(base, good, floor, false, true)
            }
        }
    });
}

堆垛機底座和抓手動畫：

// 抓手動畫
function startHandAnimation(baseNode, goodNode, floor, pick, goodIn) {
    console.log('startHandAnimation:', floor, pick, goodIn)
    let elevator = baseNode.getParent()
    // 抓手移動的方向
    let isBack = goodNode.a('row') === elevator.a('row') * 2
    baseNode.eachChild(hand => {
        var z = hand.getY()
        // 抓手動畫
        ht.Default.startAnim({
            duration: 4000, // 動畫周期毫秒數，默認采用`ht.Default.animDuration`
            easing: function (t) {
                if (t < 0.5) {
                    return t * 2
                } else {
                    return (1 - t) * 2
                }
            },
            action: function (v, t) {
                if (t >= 0.5) {
                    if (pick) {
                        goodNode.setHost(hand)
                    } else {
                        goodNode.setHost(null)
                    }
                }
                if (goodIn) {
                    if (pick) { // 取貨
                        hand.setY(z + 150 * v)
                    } else { // 放貨
                        if (isBack) {
                            hand.setY(z - 150 * v)
                        } else {
                            hand.setY(z + 150 * v)
                        }
                    }
                } else {
                    if (pick) { // 取貨
                        if (isBack) {
                            hand.setY(z - 150 * v)
                        } else {
                            hand.setY(z + 150 * v)
                        }
                    } else { // 放貨
                        hand.setY(z - 150 * v)
                    }
                }
            },
            finishFunc: function () {
                if (baseNode.a('floor') > 1) {
                    baseDown(baseNode, goodNode, floor, pick, goodIn)
                } else {
                    if (elevator.a('col') === 0 || elevator.a('col') === colSize + 1) {
                        if (goodIn) { // 入庫: 已完成取貨動作, 升降機進入貨架
                            elevatorIn(elevator, goodNode)
                        } else { // 出庫：已將貨物放置到輸送機
                            // 移動到小車位置
                            startGoodOutAnimation(goodNode)
                        }
                    } else { // 將升降機移到貨架外
                        elevatorOut(elevator, goodNode, goodIn)
                    }
                }
            }
        });
    })
}

// 底座上升
function baseUp(baseNode, goodNode, floor, pick, goodIn) {
    console.log('底座上升:', baseNode.getTag())

    var baseElevation = baseNode.getElevation()

    let goodP3 = goodNode.a('p3')
    var elevationOffset = (goodP3[1] - baseElevation)
    // 上升
    ht.Default.startAnim({
        duration: (floor - 1) * animationUnit,
        action: function (v, t) {
            baseNode.setElevation(baseElevation + elevationOffset * v)
        },
        finishFunc: function () {
            baseNode.a('floor', floor)
            startHandAnimation(baseNode, goodNode, floor, pick, goodIn)
        }
    });
}

 

 

5. 主3D場景

以 3D 的方式顯示倉庫立體場景，包括貨架、貨物、堆垛機、穿梭車、輸送機等。支持常用視角切換，提供側視、俯視、正視、斜視。當選中某個貨物時。

 

視角切換圖標是基於 HT for Web 交互功能定制的圖標：

const g2d = new ht.graph.GraphView()
g2d.setPannable(false)
g2d.setRectSelectable(false)
g2d.handleScroll = function () {}

ht.Default.xhrLoad('displays/視角切換.json', function (json) {
    g2d.dm().deserialize(json);
});

g2d.lookAtFront = function () {
    eventbus.trigger('g3d.lookAtFront')
}
g2d.lookAtLean = function () {
    eventbus.trigger('g3d.lookAtLean')
}
g2d.lookAtLeft = function () {
    eventbus.trigger('g3d.lookAtLeft')
}
g2d.lookAtTop = function () {
    eventbus.trigger('g3d.lookAtTop')
}

　　可顯示貨物的詳細信息（托盤號、貨位、批號、物料代碼、物料名稱、單位、數量、備注、堆垛機號、質量狀態）：

借助 HT for Web 的數據驅動模型以及動畫API，可以很容易地控制貨物出庫出庫動作，並與后台數據綁定。可以模擬堆垛機入庫取貨，貨物在輸送機上移動並出庫，貨物經過檢測門入庫等動畫效果。

 

 

在線演示地址：http://www.hightopo.com/demo/wms/index.html