基于Selenium的数据可视化控制系统设计与开发

顾柳柳，何海乐

（上海计算机软件技术开发中心，上海 201112）

0 引言

基于直观、生动的展现特点，数据可视化成为当前大数据领域研究焦点之一。当前用于多领域展示大屏的数据可视化方案存在切换繁琐、操作复杂等问题。为满足大屏演示系统的灵活控制需求，需要一套便捷自动化的大屏控制解决方案。

Selenium是一个自动化测试工具，是为网站自动化测试而开发，它可以直接调用浏览器，让浏览器自动打开页面、切换页面、关闭页面、获取数据、网页截屏等。它有四个主要组成部分，包括Selenium IDE、Selenium远程控制器（现已弃用）、Selenium WebDriver和Selenium Grid。

在数据可视化控制系统中，主要使用了Selenium WebDriver和Selenium Grid。Selenium WebDriver提供了一个编程接口，用于支持识别网页上的Web元素，然后对这些元素执行所需的操作。Selenium Grid支持在不同的机器上并行运行不同浏览器的操作，即可以在运行不同浏览器和操作系统的不同物理设备上同时运行，完成操作。

1 系统框架

数据可视化控制系统的总体架构分为四层（见图1），从最底层到最顶层依次为：数据层、支撑层、应用层和展现层。用户可以通过控制系统后台对演讲演示的设备、案例、场景进行管理。支持用户在演讲的过程中，通过大屏演示前台对已连接的大屏进行相应操作。

图1 系统架构图

1.1 数据层

数据层主要用于数据的存储、修改、删除和读取。使用了两种类型的数据库，在关系型数据库MySQL的基础上，引入了非关系型数据库Redis的使用，用于解决演讲时大屏需要少延迟地展现的问题。

1.2 支撑层

支撑层主要用于实现在不同物理设备上同时运行不同浏览器和操作系统的需要，达成在一个系统中对多个不同物理设备上的数据可视化大屏进行操作。其中使用的关键技术是Selenium套件中的Selenium WebDriver和Selenium Grid。

1.3 应用层

应用层向用户提供可视化操作界面对设备、案例、场景进行管理，主要包括大屏演示前台和数据可视化控制系统后台两个部分。数据可视化控制系统后台为管理员提供展示设备和演讲内容的设置，为之后的演讲做好准备工作。大屏演示平台为演讲人员提供一个大屏操作台，用于一边演讲一边操作相应大屏，以数据可视化的方式完成一场演讲宣传。

1.4 展示层

展示层是数据可视化控制系统需要配置连接的主要物理设备，通过浏览器的方式，展示需要展示的数据可视化大屏内容。

2 数据可视化控制系统后台

数据可视化控制系统后台的三大主要业务模块为设备管理、案例管理、场景管理，三个模块之间通过接口进行连接。系统底层利用Selenium WebDriver支持广泛的网络浏览器、编程语言和测试环境，并且可以直接与Web浏览器通信等特性，实现多环境、多平台、多浏览器的兼容性控制。

（1）设备管理模块支持对设备进行管理。主要功能包括设备的新增、查看、编辑和删除等功能。

（2）案例管理模块支持对案例进行管理。主要功能包括数据可视化大屏案例的新增、查看、编辑和删除等功能。

图5显示了本文所述施工段局部地表测点分布。盾构始发段与接收段每隔 10 m布置一排监测点，正常掘进段每隔 30 m 布置一排监测点，由于部分测点数据丢失，因此选取CK 46+785—CK 47+055区间中位置典型且数据完整的测点作为典型监测点。

（3）场景管理模块支持将案例设置成一组后，用于前台批量控制。后台的主要功能包括数据可视化大屏案例的新增、查看、编辑和删除等功能。

2.1 登录

用户使用下发的账号和密码进行登录系统（见图2）。

图2 登录界面

2.2 设备管理

用户在“设备管理”界面中对设备进行管理（见图3）。主要包括维护设备的设备类型、设备IP地址、设备描述等信息，以及维护与对应设备连接的屏幕信息，屏幕信息包括屏幕的分辨率、默认展示的数据大屏案例。

图3 设备管理

点击“新增”按钮，打开新增界面（见图4）。需要填写的内容包括设备的基础设置信息和操作大屏信息。基础设置信息包括设备名称、设备IP地址、设备类型、设备描述。

图4 新增设备

在“操作大屏”模块中，点击“新增大屏”弹出“添加大屏”界面（见图5），用于添加当前设备IP地址下需要控制的大屏。

图5 新增大屏

2.3 案例管理

用户在“案例管理”界面中对数据大屏案例进行管理（见图6）。支持在一个数据大屏案例中添加多个页面，用于实现大屏演示前台的页面切换操作。支持对页面添加浏览器常用操作，用于实现大屏演示前台的常用的单页面操作。

图6 案例管理

点击“新增”按钮，打开新增界面（见图7）。需要填写的内容有案例的基础设置信息和演示内容设置。基础设置信息包括案例名称、案例分类、案例描述。

图7 新增案例

图8 新增页面

2.4 场景管理

用户在“场景管理”界面中对场景进行管理（见图9）。支持对数据大屏案例进行批量管理，用于实现大屏演示前台的场景一键启动操作。

图9 场景管理

点击“新增”按钮，打开新增界面（见图10）。需要填写的内容有案例的基础设置信息和演示内容设置。基础设置信息包括案例名称、案例分类、案例描述。

图10 新增场景

在“场景案例”模块中，点击“新增”弹出“新增内容”界面（见图11），用于添加当前场景中需要一键启动的大屏案例，支持启动不同设备、不同操作系统中的案例。

图11 新增内容

3 大屏演示前台

大屏演示前台（见图12）为演讲人员提供一个大屏操作台，用于一边演讲一边操作相应大屏，以数据可视化的方式完成一场演讲宣传。主要功能包括热门场景、硬件设备管理等功能。

图12 大屏演示前台

（1）热门场景支持一键启动该场景中配置的不同设备及其可视化案例。

（2）硬件设备支持按设备对设备内显示的数据可视化案例进行操作。

3.1 热门场景

热门场景一键启动主要基于演示场景模块（见图13），根据模块中已有的场景信息，实现并发控制多个设备屏幕展示相应案例的功能。

图13 一键启动

3.2 硬件设备

在硬件设备列表中选择所需控制的设备，在跳转到的设备详情中选择所需控制的屏幕后，即可在对应屏幕下展示所需案例并控制其进行一系列灵活操作。相关的界面设计如图14所示。

图14 单一设备控制

4 结语

本文给出了基于选择思想的不改变数据的原始位置而对数据进行排序的算法，并利用C#语言编程实现了该算法的动态演示；此外，本文基于Selenium套件对不同设备、不同操作系统的浏览器页面进行远程操作，并利用数据可视化控制系统的后台和前台的功能，实现了该技术的实际应用。该算法和技术可用于解决实际工作中的一些相关问题，具有一定的实际意义。用C#语言实现的动态演示程序，以及用数据可视化控制系统实现的实际应用均有助于读者更好地理解和把握该算法和技术的基本思想和实现过程。