基于 WEB 的 WMS 3D 可视化管理系统
目前主流的 WMS 仓库管理系统大都采用了 B/S 模式，但数据可视化技术上仍采用的是传统图表显示方式。本文从数据可视化的角度介绍了一种基于 WEB 的 3D 可视化实现方案，底层基于标准的 HTML5 WebGL 技术，以 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 的图纸文件：
1 const g2d = new ht.graph.GraphView() 2 g2d.setPannable(false) 3 g2d.setRectSelectable(false) 4 g2d.handleScroll = function () {} 5 g2d.setScrollBarVisible(false) 6 7 ht.Default.xhrLoad(\'displays/状态面板.json\', function (json) { 8 g2d.dm().deserialize(json) 9 })
2. 任务管理
显示当前出库入库任务列表
出库入库任务列表也可以用 HT 图纸进行显示：
1 const g2d = new ht.graph.GraphView() 2 3 g2d.setPannable(false) 4 g2d.setRectSelectable(false) 5 g2d.handleScroll = function () {} 6 g2d.setScrollBarVisible(false) 7 ht.Default.xhrLoad(\'displays/任务列表.json\', function (json) { 8 g2d.dm().deserialize(json) 9 })
3. 故障管理
显示当前的故障信息列表。
故障信息页面为 HT 图纸，代码实现如下：
1 const g2d = new ht.graph.GraphView() 2 g2d.setPannable(false) 3 g2d.setRectSelectable(false) 4 g2d.handleScroll = function () {} 5 g2d.setScrollBarVisible(false) 6 7 ht.Default.xhrLoad(\'displays/故障信息.json\', function (json) { 8 g2d.dm().deserialize(json); 9 });
4. 单机管理
提前信息后WMS实现货物入库或出库。
入库逻辑和出库逻辑需要分别实现，整个过程涉及货物在输送出上的移动动画、堆垛机的移动动画、堆垛机的取货放货动画。
货物入库核心代码：
1 // 货物入库 2 function goodsIn(code) { 3 var good = dataModel.getDataByTag(code) 4 if (!good) { 5 console.warn(\'货物编号不存在：\', code) 6 return 7 } 8 ////////// 入库口移动至输入机 ////////////// 9 10 var row = good.a(\'row\') 11 var col = good.a(\'col\') 12 var floor = good.a(\'floor\') 13 14 if (col <= colSize / 2) { // 左侧 15 let goodP3 = dataModel.getDataByTag(\'入口1\').p3() 16 goodP3[1] = floorBaseElevation 17 good.p3(goodP3) 18 } else { // 右侧 19 let goodP3 = dataModel.getDataByTag(\'入口2\').p3() 20 goodP3[1] = floorBaseElevation 21 good.p3(goodP3) 22 } 23 good.s(\'3d.visible\', true) 24 good.setHost(null) 25 26 if (col <= colSize / 2) { // 左侧 27 let refer = dataModel.getDataByTag(\'LeftFront\') 28 moveZTo(good, refer.getY(), null, () => { 29 moveXTo(good, refer.getX(), null, () => { // 左移 30 // 后移至货架水平位置 31 let targetY = null 32 if (Math.floor(row % 2) === 0) { // 偶数列 33 targetY = good.a(\'p3\')[2] + 300 34 } else { 35 targetY = good.a(\'p3\')[2] 36 } 37 moveZTo(good, targetY, null, () => { 38 // 右移至货架边缘 39 moveXTo(good, dataModel.getDataByTag(\'升降机L\' + row + \':底座\').getX(), null, () => { 40 // 离开输送机移动至货架 41 goodToShelve(good) 42 }) 43 }) 44 }) 45 }) 46 47 } else { // 右侧 48 let refer = dataModel.getDataByTag(\'RightFront\') 49 moveZTo(good, refer.getY(), null, () => { 50 moveXTo(good, refer.getX(), null, () => { // 右移 51 // 后移至货架水平位置 52 let targetY = null 53 if (Math.floor(row % 2) === 0) { // 偶数列 54 targetY = good.a(\'p3\')[2] + 300 55 } else { 56 targetY = good.a(\'p3\')[2] 57 } 58 moveZTo(good, targetY, null, () => { 59 // 左移至货架边缘 60 moveXTo(good, dataModel.getDataByTag(\'升降机R\' + row + \':底座\').getX(), null, () => { 61 // 离开输送机移动至货架 62 goodToShelve(good) 63 }) 64 }) 65 }) 66 }) 67 } 68 }
货物出库核心代码：
1 // 货物出库 2 function goodsOut(code) { 3 var good = dataModel.getDataByTag(code) 4 if (!good) { 5 console.warn(\'货物编号不存在：\', code) 6 return 7 } 8 9 var row = good.a(\'row\') 10 var col = good.a(\'col\') 11 var floor = good.a(\'floor\') 12 13 let elevatorRow = parseInt((row + 1) / 2) 14 let isLeft = col <= (colSize / 2) 15 let elevator = isLeft ? dataModel.getDataByTag("升降机L" + elevatorRow) : dataModel.getDataByTag("升降机R" + elevatorRow) 16 17 let elevatorX = elevator.getX() 18 let x = (good.getX() - elevatorX) 19 // 水平移动 20 ht.Default.startAnim({ 21 duration: Math.abs(col - elevator.a(\'col\')) * animationUnit, // 动画周期毫秒数，默认采用`ht.Default.animDuration` 22 action: function (v, t) { 23 elevator.setX(elevatorX + x * v) 24 }, 25 finishFunc: function () { 26 elevator.a(\'col\', col) 27 28 // 底座垂直移动 29 let base = dataModel.getDataByTag(elevator.getTag() + ":底座") 30 if (floor > 1) { 31 baseUp(base, good, floor, true, false) 32 } else { 33 // 取货，出货 34 startHandAnimation(base, good, floor, true, false) 35 } 36 } 37 }); 38 }
堆垛机上升动画实现：
1 function elevatorIn(elevator, good) { 2 console.log(\'elevatorIn\') 3 var row = good.a(\'row\') 4 var col = good.a(\'col\') 5 var floor = good.a(\'floor\') 6 7 let elevatorX = elevator.getX() 8 let goodP3 = good.a(\'p3\') 9 let x = (goodP3[0] - elevatorX) 10 // 水平移动 11 ht.Default.startAnim({ 12 duration: Math.abs(col - elevator.a(\'col\')) * animationUnit, // 动画周期毫秒数，默认采用`ht.Default.animDuration` 13 action: function (v, t) { 14 elevator.setX(elevatorX + x * v) 15 }, 16 finishFunc: function () { 17 elevator.a(\'col\', col) 18 19 // 底座垂直移动 20 let base = dataModel.getDataByTag(elevator.getTag() + ":底座") 21 if (floor > 1) { 22 baseUp(base, good, floor, false, true) 23 } else { 24 // 送货 25 startHandAnimation(base, good, floor, false, true) 26 } 27 } 28 }); 29 }
堆垛机动画：
1 // 堆垛机出货 2 function elevatorOut(elevator, good, goodIn) { 3 console.log(\'elevatorOut\') 4 let elevatorX = elevator.getX() 5 let isLeft = elevator.getTag().startsWith(\'升降机L\') 6 let start = isLeft ? LeftElevatorX : RightElevatorX 7 let xOffset = (start - elevatorX) 8 9 let t = isLeft ? Math.abs(elevator.a(\'col\')) : Math.abs(colSize - elevator.a(\'col\') + 1) 10 // 水平移动 11 ht.Default.startAnim({ 12 duration: t * animationUnit, // 动画周期毫秒数，默认采用`ht.Default.animDuration` 13 action: function (v, t) { 14 elevator.setX(elevatorX + xOffset * v) 15 }, 16 finishFunc: function () { 17 elevator.a(\'col\', isLeft ? 0 : (colSize + 1)) 18 if (!goodIn) { 19 startHandAnimation(dataModel.getDataByTag(elevator.getTag() + ":底座"), good, 1, false, goodIn) 20 } 21 } 22 }) 23 } 24 25 // 堆垛机取货 26 function elevatorIn(elevator, good) { 27 console.log(\'elevatorIn\') 28 var row = good.a(\'row\') 29 var col = good.a(\'col\') 30 var floor = good.a(\'floor\') 31 32 let elevatorX = elevator.getX() 33 let goodP3 = good.a(\'p3\') 34 let x = (goodP3[0] - elevatorX) 35 // 水平移动 36 ht.Default.startAnim({ 37 duration: Math.abs(col - elevator.a(\'col\')) * animationUnit, // 动画周期毫秒数，默认采用`ht.Default.animDuration` 38 action: function (v, t) { 39 elevator.setX(elevatorX + x * v) 40 }, 41 finishFunc: function () { 42 elevator.a(\'col\', col) 43 44 // 底座垂直移动 45 let base = dataModel.getDataByTag(elevator.getTag() + ":底座") 46 if (floor > 1) { 47 baseUp(base, good, floor, false, true) 48 } else { 49 // 送货 50 startHandAnimation(base, good, floor, false, true) 51 } 52 } 53 }); 54 }
堆垛机底座和抓手动画：
1 // 抓手动画 2 function startHandAnimation(baseNode, goodNode, floor, pick, goodIn) { 3 console.log(\'startHandAnimation:\', floor, pick, goodIn) 4 let elevator = baseNode.getParent() 5 // 抓手移动的方向 6 let isBack = goodNode.a(\'row\') === elevator.a(\'row\') * 2 7 baseNode.eachChild(hand => { 8 var z = hand.getY() 9 // 抓手动画 10 ht.Default.startAnim({ 11 duration: 4000, // 动画周期毫秒数，默认采用`ht.Default.animDuration` 12 easing: function (t) { 13 if (t < 0.5) { 14 return t * 2 15 } else { 16 return (1 - t) * 2 17 } 18 }, 19 action: function (v, t) { 20 if (t >= 0.5) { 21 if (pick) { 22 goodNode.setHost(hand) 23 } else { 24 goodNode.setHost(null) 25 } 26 } 27 if (goodIn) { 28 if (pick) { // 取货 29 hand.setY(z + 150 * v) 30 } else { // 放货 31 if (isBack) { 32 hand.setY(z - 150 * v) 33 } else { 34 hand.setY(z + 150 * v) 35 } 36 } 37 } else { 38 if (pick) { // 取货 39 if (isBack) { 40 hand.setY(z - 150 * v) 41 } else { 42 hand.setY(z + 150 * v) 43 } 44 } else { // 放货 45 hand.setY(z - 150 * v) 46 } 47 } 48 }, 49 finishFunc: function () { 50 if (baseNode.a(\'floor\') > 1) { 51 baseDown(baseNode, goodNode, floor, pick, goodIn) 52 } else { 53 if (elevator.a(\'col\') === 0 || elevator.a(\'col\') === colSize + 1) { 54 if (goodIn) { // 入库: 已完成取货动作, 升降机进入货架 55 elevatorIn(elevator, goodNode) 56 } else { // 出库：已将货物放置到输送机 57 // 移动到小车位置 58 startGoodOutAnimation(goodNode) 59 } 60 } else { // 将升降机移到货架外 61 elevatorOut(elevator, goodNode, goodIn) 62 } 63 } 64 } 65 }); 66 }) 67 } 68 69 // 底座上升 70 function baseUp(baseNode, goodNode, floor, pick, goodIn) { 71 console.log(\'底座上升:\', baseNode.getTag()) 72 73 var baseElevation = baseNode.getElevation() 74 75 let goodP3 = goodNode.a(\'p3\') 76 var elevationOffset = (goodP3[1] - baseElevation) 77 // 上升 78 ht.Default.startAnim({ 79 duration: (floor - 1) * animationUnit, 80 action: function (v, t) { 81 baseNode.setElevation(baseElevation + elevationOffset * v) 82 }, 83 finishFunc: function () { 84 baseNode.a(\'floor\', floor) 85 startHandAnimation(baseNode, goodNode, floor, pick, goodIn) 86 } 87 }); 88 }
5. 主3D场景
以 3D 的方式显示仓库立体场景，包括货架、货物、堆垛机、穿梭车、输送机等。支持常用视角切换，提供侧视、俯视、正视、斜视。当选中某个货物时。
视角切换图标是基于 HT for Web 交互功能定制的图标：
1 const g2d = new ht.graph.GraphView() 2 g2d.setPannable(false) 3 g2d.setRectSelectable(false) 4 g2d.handleScroll = function () {} 5 6 ht.Default.xhrLoad(\'displays/视角切换.json\', function (json) { 7 g2d.dm().deserialize(json); 8 }); 9 10 g2d.lookAtFront = function () { 11 eventbus.trigger(\'g3d.lookAtFront\') 12 } 13 g2d.lookAtLean = function () { 14 eventbus.trigger(\'g3d.lookAtLean\') 15 } 16 g2d.lookAtLeft = function () { 17 eventbus.trigger(\'g3d.lookAtLeft\') 18 } 19 g2d.lookAtTop = function () { 20 eventbus.trigger(\'g3d.lookAtTop\') 21 }
可显示货物的详细信息（托盘号、货位、批号、物料代码、物料名称、单位、数量、备注、堆垛机号、质量状态）：
借助 HT for Web 的数据驱动模型以及动画API，可以很容易地控制货物出库出库动作，并与后台数据绑定。可以模拟堆垛机入库取货，货物在输送机上移动并出库，货物经过检测门入库等动画效果。
版权声明：本文为iotopo原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。