王玄平 刘美佳 严宏丹
北京起重运输机械设计研究院有限公司 北京 100007
摘 要：仓库管理系统是物资管理系统的核心，是仓储行业不可缺少的部分。随着物流仓储行业的发展，企业对仓库管理系统的界面和功能等方面的需求也越来越多样化。目前，行业内多采用二维图表模式对仓库内库存货位进行展示，受限于货位数量及页面展示能力，致使使用者无法简单直观地查看仓库的整体状态。为提高系统的交互操作性、灵活性、和适用性，文中设计了一种基于Web的三维可视化实现方案，底层基于标准的 HTML5 WebGL 技术，以三维方式展示多种存储方式并存的仓库立体场景以及仓库内的储藏物品情况，包括货架、货物、堆垛机、穿梭车、输送机等。另外，还具有多视角浏览、设备管理、接口管理和入出库管理等交互操作功能。
关键词：仓库管理；监控系统；WebGL技术；设计
中图分类号：TH692.3：TP315 文献标识码：A 文章编号：1001-0785（2021）08-0032-05
Abstract: As the core of material management system, warehouse management system is an indispensable part of warehousing industry. With the development of logistics and warehousing industr
y, requirements of enterprises in the interface and function of warehouse management system are becoming more and more diversified. Currently, two-dimensional charts are often used in the industry to display the storage positions in warehouses. The limited number of storage positions and limited space if pages deter users from simply and intuitively viewing the overall status of warehouses. To improve the interoperability, flexibility and applicability of the system, a Web-based 3D visualization scheme is designed. The bottom layer is based on the standard HTML5 WebGL technology, which displays the three-dimensional scene of the warehouse with multiple storage modes and the stored items in the warehouse in three dimensions, including shelves, goods, stackers, shuttles, conveyors and so on. In addition, the scheme also has interactive operation functions such as multi-view browsing, equipment management, interface management, and inbound and outbound management.
Keywords: warehouse management; monitoring system; WebGL technology; design
0 引言
作为现代物流的一个重要组成部分，仓库管理一直在物流管理中起着非常重要的作用。仓库管理系统（WMS）是一个实时的计算机软件系统，它能按照运作的业务规则和运算法则，对信息、资源、行为
、存货和分销运作进行更完美的管理，使其最大化满足有效产出和精确性的要求。先进的物流仓储既可保证供应链上下游企业能及时、顺利地进行物资流通，也能大幅减少流动资金占有率、降低成本、提高企业收益、缩短作业周期以及提高效率。但是，仓库管理和操作界面存在不直观、操作枯燥等问题，需要从可视化和场景模拟方面进行提升。少数企业试图解决这一现状，采用伪3D模型显示设备的运行状态，但用户仍只能通过固定方位的三维图片查看设备的线性运动，且缺乏详细的货物信息。本文介绍了一种基于Web的3D可视化实现方案，底层基于HTML5 WebGL技术，将仓库的场景通过虚拟现实技术仿真构建。相对于传统图标显示，无论是用户体验还是质量都得到巨大提升。
1 WebGL技术
WebGL（Web Graphics Library）是一种3D绘图协议，这种绘图技术通过JavaScript与OpenGL ES 2.0的技术融合，生成了OpenGL ES 2.0的JavaScript绑定，以浏览器调用显卡硬件的性能，利用HTML5 Canvas的
2 仓库管理和监控系统功能设计
2.1 系统框架设计
图2为系统框架设计，仓库管理系统（WMS）作为供应链管理的中心环节，是典型的承接上下的角。上要管理供应商，即与上位系统ERP/MES通过接口进行对接，接收上位系统下发的订单，根据订单类型进行入出库操作；下要管理运输环节，即与下位监控系统WCS对接，通过监控WCS对自动化设备，如堆垛机、输送机、箱输送线等进行调度，实现上位系统订单物料的入出库流程。
硬件3D渲染加速技术，流畅地展示3D模型和3D场景，并创建复杂的导航和数据视觉化。WebGL是浏览器的自带标准之一，不需要安装任何插件或组件，区别于Flash和SiverLight，仅使用HTML和JavaSvript脚本即可实现性能强大的Web三维交互应用，并可在任何平台上运行。WebGL系统各组成部分在既定规则下互相配合，在浏览器中的主要结构关系如图1所示[2]
。
图1 WebGL结构图
图2 系统框架设计图
2.2 系统数据结构设计
图3为系统数据结构设计图，系统采用客户
端、数据模型端、数据层端的设计模式，基于底层
WebGL(Web Graphics Library)技术开发，通过面向对
象的方式封装，屏蔽了组件的异构性，采用统一的
DataModel数据模型，可驱动所有3D系统的视图组件。
图3 系统数据结构设计图
2.3 系统功能设计
1）管理系统功能设计
如图4所示，管理系统功能模块分为货位管理、入出库管理、设备管理和借口管理等4大功能模块。
①货位管理 查询当前在库所有物料信息，包含目标地址、物料代码、数量、批号、单据类型以及货位状
态（在入、在出、在库）等。
②入出库管理 查询仓库实时入出库任务和入出库任务历史信息，对货位上的物料下发入出库指令。青春初体验
③设备管理 通过监控系统WCS 与设备的实时交互，反馈设备的状态，再通过接口回传给管理系统WMS 显示到界面上，使用户可远程对设备进行管理，包括解除设备故障等。
④接口管理 通过接口系统与监控系统WCS 完成信息的交互，实现完整的入出库流程。
图4 管理系统功能设计
2）监控系统功能设计
如图5所示，监控系统（WCS ）是连接软件和硬件交互的重要枢纽，将管理系统（WMS ）下发的入出库指令通过接口传递给设备，如堆垛机、机械手、输送线等完成实物入出库动作。除此之外，监控系统（WCS ）也可单机对设备进行调度，即在没有管理系统的入出库指令下，可驱动设备将实物进行入出库操作
。
图5 监控系统功能设计
3 仓库管理和监控系统功能实现
3.1 视角切换
除图6所示侧视图视角以外，系统还可通过正视图、俯视图、斜视图等多个视角可对货位进行浏览。多视角
浏览主要代码如下：
const g2d = aph.GraphView()g2d.setPannable(false)g2d.setRectSelectable(false)g2d.handleScroll = function () {}
ht.Default.xhrLoad('displays/视角切换.json', function (json) {
g2d.dm().deserialize(json);
上海新型建材矿棉厂});
g2d.lookAtFront = function () {
}
g2d.lookAtLean = function () {
}
g2d.lookAtLeft = function () {
}
g2d.lookAtTop = function () {
}
图6 侧视图
蟑螂之歌3.2 设备管理
如图7所示，设备管理包含设备状态查询，如堆垛机、输送机等设备的状态。以及设备故障解除功能。故障信息查询代码如下：
const g2d = aph.GraphView()
g2d.setPannable(false)sw620细胞
g2d.setRectSelectable(false)
g2d.handleScroll = function () {}
g2d.setScrollBarVisible(false)
ht.Default.xhrLoad('displays/故障信息.json', function (json) {
g2d.dm().deserialize(json);
});
图7 故障管理
3.3 入出库管理
1）入出库任务查询
查询当前堆垛机入库、查询当前堆垛机入库、出库、直出作业和托盘输送机入出库作业等，如图8所示，包括任务类型、起始货位地址、终止货位地址、优先级、状态、输送机起始地址、输送机终止地址、时间等。入出库任务查询主要代码如下：
const g2d = aph.GraphView()
g2d.setPannable(false)
g2d.setRectSelectable(false)
g2d.handleScroll = function () {}
g2d.setScrollBarVisible(false)
ht.Default.xhrLoad('displays/任务列表.json', function (json) {
g2d.dm().deserialize(json)
})
图
8 入出库任务查询
2）入出库任务下发
如图9所示，在联机和脱机的情况下进行入出库任务的下发。联机是与管理系统相连接，通过接收WMS 任务指令再驱动设备执行。脱机是监控系统WCS直接对设备进行入出库指令的下发。入出库实现部分代码如下：
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 ? DataByTag("升降机L" + elevatorRow) : DataByTag("升降机R" + elevatorRow)
let elevatorX = X()
let x = (X() - 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 = Tag() + "：底座")
通俗喜剧
if (floor > 1) {
baseUp(base, good, floor, true, false)
} else {// 取货，出货
startHandAnimation(base, good, floor, true, false)
}
}
});
图9 入出库任务下发
4 结论
本文归纳总结了目前仓储行业内仓库管理和监控系统存在的现状，阐述了仓库管理系统的主要工作内容和组织结构。在系统涉及的技术方面，对WebGL的概念和在浏览器中的结构组成进行了简要描述。在系统的设计和实现阶段，实现了系统的框架设计、数据结构设计以及功能设计。在WebGL基础上，
集成MVC作为系统的软件架构，结合接口系统，以此实现系统开发。并在实际应用中取得了较好的效果。然而，考虑时间、设备等诸多原因，本系统仍然存在可扩展之处。
本系统对实时性要求较高，随着仓库的运作，系统中的数据量必定越来越多，故如何实现算法复杂度实现，尽可能提高系统的执行效率，也是重要的研究方向。
参考文献
[1] 李自立.基于VRML的虚拟三维仓库管理系统研究[D].
成都：西南交通大学，2014.
[2] 沈柯.基于WebGL的3D网页游戏的开发与应用研究[D].
天津：天津科技大学，2016.
[3] 何凡.智能仓储管理系统的设计与实现[D].西安：西安 电子科技，2019.
作 者：严宏丹
：*****************
收稿日期：2020-11-24
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议