基于 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 的图纸文件：

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. 单机管理