基于HTML5的⼯业组态⾼炉炼铁3D⼤屏可视化
前⾔
  在⼤数据盛⾏的现在，⼤屏数据可视化也已经成为了⼀个热门的话题。⼤屏可视化可以运⽤在众多领域中，⽐如⼯业互联⽹、医疗、交通、⼯业控制等等。将各项重要指标数据以图表、各种图形等形式表现在⼀个页⾯上，各种数据⼀⽬了然。随着浏览器不断发展完善，使⽤ Web 做⼤屏展⽰也已经不是新鲜的事了。市⾯上已有不少的⼤屏解决⽅案，⼤部分是以放各种图表的形式呈现，基本是是 2D 的呈现。有些是根据投放屏幕的⽐例设计出来的，并不能⾃适应于其它的屏幕⽐例。最近学习了 Hightopo 的 HT for Web 产品，特有的⽮量，在各种⽐例下不失真，加上布局机制，解决了不同屏幕⽐例下的展⽰问题，加上 3D 的呈现部分，可以做出别具⼀格的⼤屏系统。在这⾥与⼤家分享学习，先来张整体效果图：
链接：
  本⽂主要介绍内容如下，⽂章中以 HT 作为 HT for Web 的简称：
1. 页⾯搭建
2. 数据对接
3. 动画效果实现
4. 其他细节优化
⼀、页⾯搭建
  在这个系统中，我们需要创建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 来呈现 2D 和 3D 的内容。设计师给到的 display.json 是 2D 图纸的内容，主要是使⽤⽮量绘制呈现，有⼀些图表是⽤了 Echarts，HT 也有机制可以让我们使⽤它们。scene.json 是 3D 场景的内容，⼤部分模型都是通过 3dMax 建模⽣成的，该建模⼯具可以导出 obj 与 mtl ⽂件，在 HT 中可以通过解析 obj 与 mtl ⽂件来⽣成 3d 场景中的所有复杂模型，简单的模型也可以通过 HT 来建模。关键代码如下：
var g2d = aph.GraphView();
var g3d = aph3d.Graph3dView();
// 将 3D 组件加⼊到 body 下
g3d.addToDOM();
// 将 2D 组件加⼊到 3D 组件的根 div 下，⽗⼦ DOM 事件会冒泡，这样不会影响 3D 场景的交互
g2d.View());
g2d.deserialize('display.json', function(json, dm, g2d, datas){
// TODO 2D 反序列化完成回调，后⾯会讲到
});
g3d.deserialize('scene.json', function(json, dm, g3d, datas) {
// TODO 3D 反序列化完成回调，后⾯会讲到
});
数据可视化大屏设计
⼆、数据对接
  页⾯加载出来后，就可以与后台通讯，请求相关数据对接到对应的元素上了。HT ⼀⼤强项是作为 Web 组态，所以有很友好的数据绑定⽅式，我们可以轻松将数据展⽰到各个节点上。我们这个案例采⽤随机数模拟的⽅式模拟展⽰数据，在 json 中对相应的节点设置唯⼀标识 tag，在反序列化完成后，通过 g2d.dm().getDataByTag(tag) 来获得相应节点，再根据这个节点的数据绑定来将数据展⽰到改节点上。
以下是上⾯这个表格数据对接的代码，它的 tag 是 alarmTable
// 模拟数据
var mockData = [
{ "time": "2019-02-17 21:54:31", "warningDesc": "11_15冷却壁发⽣渣⽪减薄" },
{ "time": "2019-02-17 21:57:49", "warningDesc": "炉缸热损失正常" },
{ "time": "2019-02-17 22:00:34", "warningDesc": "8_12冷却壁发⽣渣⽪减薄" },
{ "time": "2019-02-17 22:03:44", "warningDesc": "8_12冷却壁发⽣渣⽪减薄" },
{ "time": "2019-02-17 22:07:09", "warningDesc": "11_15炉缸热损失正常" },
{ "time": "2019-02-17 22:11:35", "warningDesc": "8_12冷却壁发⽣渣⽪减薄" },
{ "time": "2019-02-17 22:16:24", "warningDesc": "11_15局部⼩⽓流" }
];
var dm = g2d.dm();
var table = dm.getDataByTag('alarmTable');
table.a('ht.dataSource', mockData);
View Code
以上表格是⼀个⽤ ht 定义的⽮量节点，⽮量由⼀个个组件组成，组件不仅可以预定义的矩形，⽂本等内容，也可以引⽤其它定义好的⽮量，甚⾄可以⾃定义绘制逻辑，这个表格就由此⽽来。⽮量不仅可以⽤在 2D 图纸⾥，还可以⽤在 3D 贴图中，在我们 3D 场景中，以下截图的⼏个⾯板也是使⽤⽮量实现，
HT 中数据都由 DataModel 驱动，所以 3D 对接数据也是⼀样的，这⾥就不再赘述。
三、动画效果实现
铁⽔罐车动画 
这个案例中最明显的动画应该就是铁⽔罐车的动画了，我们先来聊聊它的实现。基本流程是这样的
如上，我们依然是在反序列化完成后，通过 car = g3d.dm().getDataByTag('car'); 得到铁⽔罐车的节点对象。
通过 car.s('3d.visible', true | false); 就可以控制它的显隐。
通过不断修改节点的 3D 坐标就可以实现位移效果 car.setPosition3d(x, y, z);
⾄于铁⽔罐车上的⾯板，也是个⽮量，将它吸附于铁⽔罐车节点，它就会跟随车移动，不需要单独控制它的坐标来实现动画。
管道中⽓体流动动画
这部分动画效果，只要不断修改贴图的 uv 值就可以实现，以下是⽰例代码，node 还是由 getDataByTag 得来
var offset1 = 0.03;
setInterval(function () {
node.s({
'top.uv.offset': [-offset1, 0],
'front.uv.offset': [-offset1, 0],
});
offset1 += 0.1;
}, 100);
上料履带的动画也是相同的实现⽅式
四、其他细节优化
  在点击 2D 有点到图元像素时，我们希望不触发 3D 的交互，⽐如拖动表格滚动时，3D 场景也会跟着旋转。可以通过如下代码控制：
var handler = function(e) {
if (gv.getDataAt(e)) { // 如果点击到的位置有节点信息
e.preventDefault();
e.stopPropagation();
}
}
同时，禁⽤⼀些交互动作和⼀些默认选中边框
// 选中边框为0
// 禁⽌⿏标缩放
gv.handleScroll = function () { };
// 禁⽌ touch 下双指缩放
gv.handlePinch = function () { };
// 禁⽌平移
gv.setPannable(false);
// 禁⽌框选
gv.setRectSelectable(false);
// 隐藏滚动条
gv.setScrollBarVisible(false);
/
/ 2D 中所有节点不可拖动
gv.setMovableFunc(function () { return false; });
// 3D 中所有节点不可拖动
g3d.setMovableFunc(function () { return false; });
总结
通过 2D 3D 结合的⽅式的⼤屏展⽰，可以⾮常直观的看到数据呈现，⽐如在履带出的上料数据，通过它的位置，不需要太多⽂字描述就知道这⾥是要展⽰什么内容。HT ⾮常轻量，可以结合 2D 3D 呈现数据，⽮量在各种屏幕下不失真，还可以适应各种屏幕⼤⼩进⾏展⽰，⽤来做⼤屏可视化再合适不过了。除了在⼤屏上，电脑上可以展⽰良好，移动端同样⽀持，最后放上⼀张移动端的效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。