基于 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