基于QtWebEngine和Web技术的监控系统报表组件开发方案

为满足换流站监控系统安防要求，许继电气股份有限公司的研究人员张浩然、赵冠华、申艳红、靳玮玮、张睿，在2020年第9期《电气技术》杂志上撰文，提出了基于Qt框架中的QtWebEngine模块，利用Web技术开发可在Linux上运行的C/S报表组件的技术方案。文中首先介绍了报表文件的格式定义，然后介绍了设计器和查看器的设计思路，并对其中关键的交互流程及实现方法进行了说明。

出于国家安全考虑，现在换流站监控系统要求运行在Linux系统上。现有的客户端/服务器（client/server, C/S）类专用报表组件如水晶报表等都是运行在Windows系统上的，在Linux上无法使用。在Linux上虽然有Open Office等办公套件，但是由于Linux上没有类似Windows上的对象连接与嵌入技术（object linking and embedding, OLE）的对象嵌入机制，所以也无法利用这些办公套件开发报表。

虽然现有的浏览器/服务器（browser/server, B/S）类报表组件可以运行在Linux系统上，但是使用B/S类报表，需要部署Web服务器。而变电站监控系统属于一区系统，按照二次安防要求，不能采用Web服务。因此，无法使用B/S类报表组件。故此，开发可以在Linux系统使用的C/S报表组件，势在必行。

本文提供了基于QtWebEngine模块，利用Web技术的报表组件开发方案。此方案既利用了Web页面的强大展示能力，又通过QtWebEngine与Web页面的交互能力避开了搭建Web服务器的需要，从而构建了一套强大灵活的C/S报表组件。以下对此技术方案的技术环节进行阐述。

1 背景技术介绍

QtWebEngine是Qt框架中的一个浏览器模块，它提供了易于使用且可扩展的应用程序接口（appli- cation programming interface, API）。利用QtWebEngine可以很容易地把Web内容嵌入到Qt应用程序中。QtWebEngine不允许C++/Qt代码直接操作页面元素。然而，QtWebEngine提供了RunJavaScript方法。可以通过该方法调用Web页面的JavaScript脚本，并获取执行结果，从而获取和调整页面内容。

QtWebEngine支持Web技术中最新的超文本标记语言（hyper text markup language, HTML）第五版标准。HTML5提供了一套拖放接口，使Web应用能够支持拖放功能。通过这些功能，用户可以使用鼠标选择可拖动元素，并将元素拖动到可放置容器，通过释放鼠标按钮来放置这些元素。

开发者可以自定义能够成为可拖拽的元素类型、可拖拽元素产生的反馈，以及可放置的容器元素。基于HTML5的拖放接口，可以实现报表的可视化设计。此外，Web技术中的高性能数据图表和数据表格也是报表开发中必需的功能。

2  模板文件设计

报表模板文件的本质是一个基于JavaScript对象表示法（Java script object notation, JSON）格式的文本文件，其内部保存了数据源和界面部件信息两部分数据。

2.1  数据源

数据源保存的并非真正在报表中使用的数据，而是报表要使用的数据点的编号和名称信息。当用户查看报表时，查看器会根据数据源中的数据点编号和用户选择的时间段，动态生成一个以数据点编号为列，以时间点为行的表格。这才是报表要使用的数据。数据源在报表模板中以JSON数组形式存储，如图1所示。

图1  数据源JSON结构

每个数组元素是一个JSON对象，对象内部由两个键值对组成，id代表数据点的编号，name代表数据点名称。

2.2  界面部件信息

报表界面部件信息包含了报表界面部件的布局关系和每个部件自身的属性设置。界面部件的布局关系可以用一个树形的结构表示，如图2所示。

整个报表作为根节点；在报表顶层的部件为第一级子节点；其中的容器类型节点可以拥有自己的子节点，容器类型节点可以嵌套。报表组件在展示报表时可以递归遍历这个树形结构来创建组件对象。

这个树形结构在报表模板中用嵌套的JSON对象来存储，如图3所示。

图2  界面部件布局关系

图3  界面部件信息JSON结构

界面部件的结构定义如下：1）type，组件类型；2）id，组件编号；3）options，组件属性；4）list，组件的子节点列表。

加载报表模板文件后，设计器和查看器可以根据部件的type获取对应的类型，创建部件实例。在设计阶段，设计器可以通过部件id定位部件对象，以便更新部件属性设置和调整部件位置。

3  报表组件设计

报表组件分为设计器与查看器两个部分。设计器用于创建和编辑报表，由监控系统工程开发人员使用；查看器给运行人员使用，用于在线展示报表内容。设计器与查看器是相互独立的，但是在底层通过报表模板的格式定义相互影响，共享部分设计。

3.1  设计器

设计器内部的组件关系如图4所示。

图4  报表设计器组件关系

由图4可以看出，Web页面内的主要组件有Widgets-list、Type-list、Report-from、Properties-editor、DataSource-editor和Store。

Widgets-list是一个提供了包含所有报表部件占位符的列表组件；Type-list是非可视化组件，提供了报表部件的类型定义；创建组件的时候，需要获取对应的组件类型，比如数据表格、数据图表，所以需要一个组件的类型映射表，根据组件的type获取对应的类型，创建实例。

Report-form代表了报表表单。Widgets-list内的部件占位符都被赋予HTML中的draggable属性，这样可以将部件占位符从Widgets-list拖到Report- form上。当一个部件占位符被从Widgets-list拖拽走时，Widgets-list会创建该占位符的一个复制品，供下次使用。

Report-form组件监听了drop事件。当部件占位符被拖到Report-form上时，会触发监测的drop事件。Report-form组件的事件处理器可以从事件参数中获取部件占位符，并提取出其携带的部件类型信息。然后Widget-builder根据部件类型信息从Type- lis获取完整的部件定义，并创建相应的部件实例。

Store组件管理数据源定义、报表结构信息、报表组件属性等内容。DataSource-editor组件用于编辑修改数据源定义。

Properties-editor组件用于编辑修改报表组件的属性，Store组件与Properties-editor组件、Report- form组件都是双向交互的。在Properties-editor组件中修改了组件属性，Store中的内容会相应改变，并且会改变Report-form中报表的显示。在Report-form中修改了报表的部件或布局时，Store中的信息会相应改变，在Properties-editor组件上显示的内容也会跟随变动。

报表设计器的Qt部分加载报表模板或创建一个内容为空的报表模板后，会执行RunJavaScript方法来调用Web侧的LoadReportTpl方法，将模板文件传递给Web侧。Web侧将报表模板解析后，先存入Store组件，然后由Report-form组件构建相应的报表部件并显示。

用户随后可以通过可视化方式对报表模板进行编辑，如配置数据源、添加修改图表/表格、设置图表/表格的关联数据点等。用户编辑完模板后，可以点击Qt侧的保存按钮，然后Qt侧执行RunJavaScript方法调用Web侧的SaveReportTpl方法，从Web侧获取报表模板。

3.2  查看器

查看器内部结构的组件关系如图5所示。

图5  报表查看器组件关系

由图5可以看出，查看器Web页面内的主要组件有Type-list、Report-from和Store。查看器内的组件与设计器内同名组件的功能基本相同。不同之处在于，Store组件和Report-from的交互关系为单向。Web侧将报表模板解析后，先存入Store组件，然后由Report-form组件构建相应的报表部件并显示。Report-from不再对Store组件有影响。

查看器的组件关系相比设计器较为简单。然而，其工作流程却相对复杂。查看器的工作流程如图6所示。

图6  报表查看器工作流程

由图6可以看出，报表查看器的工作流程如下：Qt部分负责加载报表模板；然后Qt侧通过RunJavaScript方法调用Web侧的LoadReportTpl方法，将报表模板文件传递给Web侧，由Web侧显示空的报表框架；同时Qt侧对报表模板进行解析，提取出其中的数据源设置；然后Qt侧根据解析出的数据源配置以及用户设置的时间段从服务器获取相应时间端的数据；Qt侧通过RunJavaScript方法调用Web侧的LoadDataSet方法，将报表要使用的数据集传递给Web侧；最后Web侧用数据集填充报表框架，将报表渲染出来。

4  结论

本文描述的报表组件开发方案，提供了可视化的报表设计工具，报表格式能够灵活定义，而且能够跨平台使用，充分满足变电站监控系统的安防需求。并且，报表组件基于QtWebEngine和Web技术开发，报表模板采用JSON格式定义，不依赖于第三方报表组件，具有良好的兼容性和通用性，易于应用到其他C/S架构的客户端系统中。

本技术方案也可供使用其他非Qt框架的监控系统做技术参考，只要使用的开发框架有可用的浏览器组件，即可采用类似的技术路线开发报表组件。