可视化的工业互联网 3D 展示

采用这个例子 es6 模块化部署。 index.html 进入 lib/index.js，源码是在 src 我们直接进入文件夹 src/view 下的 index.js 在顶部加载其他模块 export 接口模块：

import sidebar from './sidebar.js'; import header from './header.js'; import BorderLayout from './common/BorderLayout.js'; import shelfPane from './common/shelfPane.js'; import chartPane from './common/chartPane.js'; import graph3dView from './3d/index'; 

我们将页面的每个部分放在不同的位置 js 在上面加载的文件中 js export 根层容器 BorderLayout(整体最外层 div），整个图片的部分是基于 borderLayout 的。 最外层容器 BorderLayout 是在 src/view/common 下的 BorderLayout.js 其中，自定义类 ht.Default.def(className, superClass, methods) 是 HT 自定义函数中包装，其中 className 为自定义类名， superClass 要继承的父类，methods 为了方法和变量声明，通过外部定义函数变量，使用该方法 functionName.superClass.constructor.call(this) 方法继承。BorderLayout 自定义类继承 ht.ui.drawable.BorderLayout 布局组件，将自身空间分为上、下、左、右、中五个区域，每个区域可放置一个子组件。为了正常交互，重写 getSplitterAt 函数将 splitterRect 宽度修改为 10、调整左侧 splitterCanvas 为了阻挡子组件而重写的尺寸 layoutSplitterCanvas 两个方法：

let BorderLayout = function() { 
             BorderLayout.superClass.constructor.call(this);     this.setContinuous(true);     this.setSplitterSize(0); };  ht.Default.def(BorderLayout
       
        , ht
        .ui
        .BorderLayout
        , 
        { 
          
        // 自定义类 
        /** * splitter 宽度都为 0，为了能正常交互，重写此函数将 splitterRect 的宽度修改为 10 * @override */ getSplitterAt
        : 
        function 
        (event
        ) 
        { 
          
        // 获取事件对象下分隔条所在的区域 
        var leftRect 
        = 
        this
        ._leftSplitterRect
        , lp
        ; 
        if 
        (leftRect
        ) 
        { 
          leftRect 
        = ht
        .Default
        .
        clone
        (leftRect
        )
        ; leftRect
        .width 
        = 
        10
        ; leftRect
        .x 
        -= 
        5
        ; 
        if 
        (event 
        instanceof 
        Event
        ) lp 
        = 
        this
        .
        lp
        (event
        )
        ; 
        else lp 
        = event
        ; 
        if 
        (ht
        .Default
        .
        containsPoint
        (leftRect
        , lp
        )
        ) 
        return 
        'left'
        ; 
        } 
        return BorderLayout
        .superClass
        .getSplitterAt
        .
        call
        (
        this
        , event
        )
        ; 
        }
        , 
        /** * 调整左侧 splitterCanvas 的尺寸，以便挡住子组件 * @override */ layoutSplitterCanvas
        : 
        function
        (canvas
        , x
        , y
        , width
        , height
        , region
        ) 
        { 
          
        if 
        (region 
        === 
        'left'
        ) 
        { 
          canvas
        .style
        .pointerEvents 
        = 
        ''
        ; canvas
        .style
        .display 
        = 
        'block'
        ; ht
        .Default
        .
        setCanvas
        (canvas
        , 
        10
        , height
        )
        ; canvas
        .style
        .left 
        = 
        this
        .
        getContentLeft
        (
        ) 
        + 
        this
        .
        tx
        (
        ) 
        + x 
        - 
        5 
        + 
        'px'
        ; canvas
        .style
        .top 
        = 
        this
        .
        getContentTop
        (
        ) 
        + 
        this
        .
        ty
        (
        ) 
        + y 
        + 
        'px'
        ; 
        } 
        else 
        { 
          BorderLayout
        .superClass
        .layoutSplitterCanvas
        .
        call
        (
        this
        , canvas
        , x
        , y
        , width
        , height
        , region
        )
        ; 
        } 
        } 
        }
        )
        ; 
        export 
        default BorderLayout
        ; 
       

左侧栏 sidebar，分为 8 个部分：顶部 logo、货位统计表格、进度条、分割线、货物表格、图表、管理组、问题反馈按钮等。 可以查看 src/view 下的 sidebar.js 文件，这个 js 文件中同样加载了 src/view/common 下的TreeHoverBackgroundDrawable.js 和 ProgressBarSelectBarDrawable.js 中的 TreeHoverBackgroundDrawable 和 ProgressBarSelectBarDrawable 变量，以及 src/controller 下的 sidebar.js 中的 controller 变量：

import TreeHoverBackgroundDrawable from './common/TreeHoverBackgroundDrawable.js';
import ProgressBarSelectBarDrawable from './common/ProgressBarSelectBarDrawable.js';
import controller from '../controller/sidebar.js';

HT 封装了一个 ht.ui.VBoxLayout 函数，用来将子组件放置在同一垂直列中，我们可以将左侧栏要显示的部分都放到这个组件中，这样所有的部分都是以垂直列排布：

let vBoxLayout = new ht.ui.VBoxLayout(); // 此布局器将子组件放置在同一垂直列中；
vBoxLayout.setBackground('#17191a'); 

视图部分做好了，在模块化开发中，controller 就是做交互的部分，shelfTreeTable 货位统计表格， cargoTreeTable 货物表格， feedbackButton 问题反馈按钮， progressBar 进度条四个部分的交互都是在在 src/controller 下的 sidebar.js 中定义的。通过 findViewById(id, recursive) 根据id查找子组件，recursive 表示是否递归查找。

shelfTreeTable 货位统计表格的数据绑定传输方式与 cargoTreeTable 货物表格类似，这里我们只对 shelfTreeTable 货位统计表格的数据绑定进行解析。shelfTreeTable 一共有三列，其中不同的部分只有“已用”和“剩余”两个部分，所以我们只要将这两个部分进行数据绑定即可，先创建两列：

let column = new ht.ui.Column(); // 列数据，用于定义表格组件的列信息
column.setName('used'); // 设置数据元素名称
column.setAccessType('attr'); // 在这里 name 为 used，采用 getAttr('used') 和 setAttr('used', 98) 的方式存取 set/getAttr 简写为 a
column.setWidth(65);
column.setAlign('center');
columnModel.add(column);

column = new ht.ui.Column();
column.setName('remain');
column.setAccessType('attr');
column.setWidth(65);
column.setAlign('center');
columnModel.add(column);

接着遍历 json 文件，将 json 文件中对应的 used、remain以及 labelColors 通过 set/getAttr 或 简写 a 的方式进行数据绑定：

for (var i = 0; i < json.length; i++) { 
        
    var row = json[i]; // 获取 json 中的属性
    var data = new ht.Data();
    data.setIcon(row.icon); // 将 json 中的 icon 传过来
    data.setName(row.name);
    data.a('used', row.used);
    data.a('remain', row.remain);
    data.a('labelColors', row.colors);
    data.setIcon(row.icon);
    treeTable.dm().add(data); // 在树表组件的数据模型中添加这个 data 节点
    var children = row.children;
    if (children) { 
        
        for (var j = 0; j < children.length; j++) { 
        
            var child = children[j];
            var childData = new ht.Data();
            childData.setName(child.name);
            childData.setIcon(child.icon);
            childData.a('used', child.used);
            childData.a('remain', child.remain);
            childData.a('labelColors', child.colors);
            childData.setParent(data);
            treeTable.dm().add(childData);
        }
    }
}

最后在 controller 函数对象中调用 这个函数：

initTreeTableDatas(shelfTreeTable, json); // json 为 ../model/shelf.json 传入

progressBar 进度条的变化是通过设置定时器改变 progressBar 的 value 值来动态改变的：

setInterval(() => { 
        
    if (progressBar.getValue() >= 100) { 
        
        progressBar.setValue(0);
    }
    progressBar.setValue(progressBar.getValue() + 1);
}, 50);

feedbackButton 问题反馈按钮，通过增加 View 事件监听器来监听按钮的点击事件：

feedbackButton.addViewListener(e => { 
        
    if (e.kind === 'click') { 
         // HT 自定义的事件属性，具体查看 http://hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html
        window.location.href = "mailto:service@www.hightopo.com"; // 当前页面打开URL页面
    }
});

直接用的分割组件 ht.ui.SplitLayout 进行分割布局：

let splitLayout = new ht.ui.SplitLayout(); // 此布局器将自身空间划分为上、下两个区域或左、右两个区域，每个区域可以放置一个子组件
splitLayout.setSplitterVisible(false);
splitLayout.setPositionType('absoluteFirst');
splitLayout.setOrientation('v');

右侧头部 header 这个 header 是从 src/view 下的 header.js 中获取的对象，为 ht.ui.RelativeLayout 相对定位布局器，分为 5 个部分：searchField 搜索框、titleLabel 主标题、temperatureLabel1 温度、humidityLabel1 湿度以及 airpressureLabel1 气压。

这里我们没有对“搜索框” searchField 进行数据绑定，以及搜索的功能，这只是一个样例，不涉及业务部分：