基于 HTML5 的 Web SCADA 报表

基于 HTML5 的 Web SCADA 报表

---

背景

最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求。一个完整的报表，一般包含了筛选操作区、表格、Chart、展板等多种元素，而其中的数据表格是最常用的控件。在以往的工业项目中，所有的表格看起来千篇一律，就是通过数字和简单的背景颜色变化来展示相关信息。但是现在通过各种移动 App 和 Web 应用的熏陶，人们的审美和要求都在不断提高，尤其是在 Web 项目中，还采用老式的数字表格确实也有点落伍了。
如何选择一个合适的 HTML 前端表格控件？此处可以省略一万字。哈哈。jQuery、Angular、React 等阵营中的控件库中都有不少成熟案例，但是这些基于 DOM 的控件也有不足，一个是效率问题：如果在数据量很大表格的中采用自定义的单元格控件，对浏览器的负担实在太重，尤其是移动端。另一个问题是开发效率，上述的控件库中各自的封装程度、接口形式都有所不同，但整体上还是要求开发者对 CSS、JS 都有较深的了解。还有控件的复用、嵌入、发布、移植，也都是问题。
基于上面的考虑，最后采用了基于 Canvas 的 HT。通过 HT 表格控件的自定义渲染接口，以及Web Worker 的多线程数据模拟，实现的表格控件效果如下：
http://www.hightopo.com/demo/pagetable/index.html

开始

首先我们要做的就是结合业务逻辑，对表格中不同列的数据，进行不同的渲染。例如设备历史信息中的运行时间、停机时间等，比较适合用饼图来汇总展示，用户就可以很直观的从列表上对比出设备的历史状况。
我们来看看这一步是怎样实现的。
HT 有自己的 DataModel 数据模型，省略了我们对数据状态管理、时间派发、ui刷新的开发工作。DataModel 容器中的子元素 Data，即是 HT 中最基础的数据结构，可以映射到不同的ui控件上。在画布上，Data 可以展示成矢量、图片或者文字等，在树形控件上，Data 展示为树的一个节点。在表格当中每个 Data 对应着表格中的一行 Row。
也就是表格控件自身包含一个 DataModel，在绘制时，将这个 Model 中的每个 Data 都绘制成一行。
不同的列，展示的是该 Data 中的不同属性。例如我们可以把设备的停机时间，保存到 Data 的 stopping 属性。
在配置表格的列 Column 信息时，我们可以指定该列的表头描述“停机时间”，其数据单元格对应 Data 的 Stopping 属性，以及自定义绘制格式：

            {
                name: 'stopping',       //对应的data属性
                accessType: 'attr',
                align: 'center',        
                color: '#E2E2E2',       //文字颜色
                displayN