图扑推出可视化智慧仓储管理系统，能否解决购物狂欢节后新一轮爆仓危机？

前言

界面简介及效果预览

HT 仓储转运监控平台上的实现效果，是通过在两层仓储场景中可以通过缓动的动画效果来进行切换，可以达到对于多个仓储场景起到监控的范围效果；而在每个仓储转运中心里面，对于货架和摄像头进行了数据采集，可以通过可视化系统快速获取设备的运行状态、货架的数据变更以及监控视频的实时反馈，达到全方位掌控仓储转运中心的活动状态，起到监管和维护多维度统一的仓储转运监控平台。

效果实现

一、楼层的切换

单纯的平移动画，显得会有点生硬突兀，但是 HT 的动画函数中，easing 参数则是用于让用户自定义函数，通过数学公式控制动画，如匀速变化、先慢后快等效果。而本案例中采用缓动的动画效果是 easeInOutElastic，一种弹性的缓进缓出的动画函数效果，可以使得楼层切换的动画更加地生动。

对于卸货车的出现，我们采用随机数的方式来显示和隐藏，而对于卸货运输的管道流动的运行，则是采用节点属性监听的方式，判断卸货车是否存在而执行流动的效果。 而仓储转运监控系统中的物流水滴传输效果，是运用了 HT 的流动插件 ht-flow 来实现的，流动线插件可以在 ht.Shape 和 ht.Edge 上增加流动效果，支持内部元素或用户自定义的流动元素沿着路径步进，而且没有引入新的类，只是在 ht.Shape、ht.Edge 和 ht.graph.GraphView 上扩展了一些方法或样式，因此非常易于使用，有兴趣的话可以通过 HT 的官 了解更多的使用方法。

三、摄像头监控以及货箱数据

数据可视化的优势体现，就是通过借助图形或者模型来承载数据的变动，起到数据可视化监管的作用，所以说系统中的数据对于整个实现上来说，意义是重大的。在仓储转运监控平台中，可以通过数据采集器来捕获到每个仓储货架上的信息，通过对接数据接口的形式，返回给界面进行展示监管；视频监控也可以通过常用的流媒体格式或者视频流资源传输到界面中进行播放。不难看出一个数据可视化监控平台的实现，我们可以将一些枯燥的数据串联到一个构思可观的界面上，来进行数据的监控和维护，往往会比传统的数据 表来得清晰生动，这也是工业互联 近年来兴起的新风潮。

对于数据接口的获取，可以运用一些主流的方法：

• ajax：使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象 XMLHttpRequest；

• axios：基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中；

• WebSocket：HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议；

2、监控视频上的对接实现：

2019 我们也更新了数百个工业互联 2D/3D 可视化案例集，在这里你能发现许多新奇的实例，也能发掘出不一样的工业互联 ：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时，你也可以查看更多案例及效果：https://www.hightopo.com/demos/index.html

文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览91326 人正在系统学习中