基于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）。需要填寫的內容包括設備的基礎設置信息和操作大屏信息?；A設置信息包括設備名稱、設備IP地址、設備類型、設備描述。

圖4 新增設備

在“操作大屏”模塊中，點擊“新增大屏”彈出“添加大屏”界面（見圖5），用于添加當前設備IP地址下需要控制的大屏。

圖5 新增大屏

2.3 案例管理

用戶在“案例管理”界面中對數據大屏案例進行管理（見圖6）。支持在一個數據大屏案例中添加多個頁面，用于實現大屏演示前臺的頁面切換操作。支持對頁面添加瀏覽器常用操作，用于實現大屏演示前臺的常用的單頁面操作。

圖6 案例管理

點擊“新增”按鈕，打開新增界面（見圖7）。需要填寫的內容有案例的基礎設置信息和演示內容設置?；A設置信息包括案例名稱、案例分類、案例描述。

圖7 新增案例

圖8 新增頁面

2.4 場景管理

用戶在“場景管理”界面中對場景進行管理（見圖9）。支持對數據大屏案例進行批量管理，用于實現大屏演示前臺的場景一鍵啟動操作。

圖9 場景管理

點擊“新增”按鈕，打開新增界面（見圖10）。需要填寫的內容有案例的基礎設置信息和演示內容設置?；A設置信息包括案例名稱、案例分類、案例描述。

圖10 新增場景

在“場景案例”模塊中，點擊“新增”彈出“新增內容”界面（見圖11），用于添加當前場景中需要一鍵啟動的大屏案例，支持啟動不同設備、不同操作系統中的案例。

圖11 新增內容

3 大屏演示前臺

大屏演示前臺（見圖12）為演講人員提供一個大屏操作臺，用于一邊演講一邊操作相應大屏，以數據可視化的方式完成一場演講宣傳。主要功能包括熱門場景、硬件設備管理等功能。

圖12 大屏演示前臺

（1）熱門場景支持一鍵啟動該場景中配置的不同設備及其可視化案例。

（2）硬件設備支持按設備對設備內顯示的數據可視化案例進行操作。

3.1 熱門場景

熱門場景一鍵啟動主要基于演示場景模塊（見圖13），根據模塊中已有的場景信息，實現并發控制多個設備屏幕展示相應案例的功能。

圖13 一鍵啟動

3.2 硬件設備

在硬件設備列表中選擇所需控制的設備，在跳轉到的設備詳情中選擇所需控制的屏幕后，即可在對應屏幕下展示所需案例并控制其進行一系列靈活操作。相關的界面設計如圖14所示。

圖14 單一設備控制

4 結語

本文給出了基于選擇思想的不改變數據的原始位置而對數據進行排序的算法，并利用C#語言編程實現了該算法的動態演示；此外，本文基于Selenium套件對不同設備、不同操作系統的瀏覽器頁面進行遠程操作，并利用數據可視化控制系統的后臺和前臺的功能，實現了該技術的實際應用。該算法和技術可用于解決實際工作中的一些相關問題，具有一定的實際意義。用C#語言實現的動態演示程序，以及用數據可視化控制系統實現的實際應用均有助于讀者更好地理解和把握該算法和技術的基本思想和實現過程。