劉金帥 葛明濤 胡海峰 劉沛杰

摘 要：【目的】電力系統(tǒng)實(shí)時(shí)數(shù)據(jù)的可視化在快速了解電力運(yùn)行狀態(tài)、數(shù)據(jù)分析與決策中具有重要意義，因此研究并實(shí)現(xiàn)一種基于SpringBoot和WebSocket的實(shí)時(shí)電力數(shù)據(jù)可視化系統(tǒng)?！痉椒ā肯到y(tǒng)采用前后端分離開(kāi)發(fā)模式，前端運(yùn)用HTML、JQuery、Echarts等技術(shù)展示電力數(shù)據(jù)，后端借助SpringBoot框架與MySQL數(shù)據(jù)庫(kù)實(shí)現(xiàn)數(shù)據(jù)交互。通過(guò)WebSocket技術(shù)實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)傳輸，前端借助Ajax和WebSocket技術(shù)向后端發(fā)起數(shù)據(jù)請(qǐng)求，并獲得實(shí)時(shí)電力數(shù)據(jù)。【結(jié)果】通過(guò)設(shè)計(jì)合理的接口和數(shù)據(jù)交互方式，將電力系統(tǒng)實(shí)時(shí)數(shù)據(jù)以直觀的圖表方式展示在前端頁(yè)面上，實(shí)現(xiàn)數(shù)據(jù)可視化顯示的功能，從而提升用戶對(duì)電力信息的獲取效率。【結(jié)論】實(shí)驗(yàn)結(jié)果驗(yàn)證了該方法的復(fù)用性和可拓展性，證明了其能夠滿足電力系統(tǒng)實(shí)時(shí)數(shù)據(jù)可視化的需求，為電力管理與決策提供了有力支持。

關(guān)鍵詞：SpringBoot；WebSocket；Ajax；Echarts；數(shù)據(jù)可視化

中圖分類號(hào)：TM76；TP311.13? ?文獻(xiàn)標(biāo)志碼：A? ?文章編號(hào)：1003-5168（2024）07-0010-04

DOI：10.19968/j.cnki.hnkj.1003-5168.2024.07.002

Research and Implementation of Real-Time Power Visualization System Based on SpringBoot and WebSocket

LIU Jinshuai GE Mingtao HU Haifeng LIU Peijie

（Pingdingshan university，Pingdingshan 467000， China）

Abstract： [Purposes] The visualization of real-time data of power system is of great significance in the rapid understanding of power operation status， data analysis and decision-making. Therefore this paper aims to study and implement a real-time power data visualization system based on SpringBoot and WebSocket. [Methods] The system adopts the front-end and back-end separation development mode. The front-end uses HTML， JQuery and Echarts to display power data， and the back-end uses the SpringBoot framework to interact with the MySQL database. Real-time data transmission is realized through WebSocket technology. The front-end uses Ajax and WebSocket technology to initiate data requests to the back-end and obtain real-time power data. [Findings] By designing a reasonable interface and data interaction method， the real-time data of the power system is displayed on the front-end page in an intuitive chart way， and the function of data visualization is realized， so as to improve the efficiency of users ' acquisition of power information. [Conclusions] The experimental results verify the reusability and extensibility of the method， and prove that it can meet the needs of real-time data visualization of power system， which provides strong support for power management and decision-making.

Keywords： SpringBoot；WebSocket； Ajax；Echarts；data visualization

0 引言

隨著信息技術(shù)的快速發(fā)展，電力系統(tǒng)作為當(dāng)代社會(huì)重要的基礎(chǔ)設(shè)施，在整個(gè)社會(huì)中發(fā)揮著不可或缺的作用。電力系統(tǒng)的穩(wěn)定運(yùn)行和高效管理對(duì)于保障國(guó)民經(jīng)濟(jì)運(yùn)行和居民日常生活具有重要意義。然而，隨著電力系統(tǒng)規(guī)模的不斷擴(kuò)大和復(fù)雜性的增加，電力數(shù)據(jù)的監(jiān)測(cè)、管理、決策變得日益復(fù)雜與煩瑣。

在過(guò)去，電力系統(tǒng)的數(shù)據(jù)監(jiān)測(cè)和管理主要依靠人工采集和手動(dòng)錄入，這種方式不僅效率低下，而且容易出現(xiàn)數(shù)據(jù)誤差和延遲，難以滿足對(duì)電力數(shù)據(jù)實(shí)時(shí)性和準(zhǔn)確性的要求［1］。隨著互聯(lián)網(wǎng)、物聯(lián)網(wǎng)和大數(shù)據(jù)技術(shù)的應(yīng)用，傳統(tǒng)的電力數(shù)據(jù)管理方式也面臨著新的挑戰(zhàn)和機(jī)遇。

在此背景下，本研究設(shè)計(jì)了一種基于SpringBoot和WebSocket技術(shù)的實(shí)時(shí)電力可視化系統(tǒng)，通過(guò)前后端分離的開(kāi)發(fā)模式，充分利用現(xiàn)代Web技術(shù)的優(yōu)勢(shì)，實(shí)現(xiàn)對(duì)電力系統(tǒng)實(shí)時(shí)數(shù)據(jù)的監(jiān)測(cè)、傳輸、展示。該方法將前端的HTML、JQuery、Ajax技術(shù)與后端的SpringBoot框架和MySQL數(shù)據(jù)庫(kù)相結(jié)合，通過(guò)WebSocket實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)傳輸，為電力系統(tǒng)的數(shù)據(jù)管理與決策提供充分支持。

1 總體架構(gòu)

該系統(tǒng)采用前后端分離的開(kāi)發(fā)模式，基于 MVVM 軟件架構(gòu)開(kāi)發(fā)模式進(jìn)行系統(tǒng)的開(kāi)發(fā)。前端使用Echarts和 BootStrap框架進(jìn)行設(shè)計(jì)開(kāi)發(fā)；后端采用 SpringBoot框架，利用MyBatis訪問(wèn)MySQL數(shù)據(jù)庫(kù)接口［2］。前、后端功能劃分明確，前端負(fù)責(zé)對(duì)后端的數(shù)據(jù)進(jìn)行接收與顯示，后端負(fù)責(zé)對(duì)數(shù)據(jù)庫(kù)接口進(jìn)行編寫(xiě)供前端調(diào)用。

系統(tǒng)的總體架構(gòu)如圖1所示，主要包括前端UI顯示層、控制層、表現(xiàn)層、服務(wù)層、數(shù)據(jù)持久層、數(shù)據(jù)庫(kù)層的架構(gòu)。數(shù)據(jù)存儲(chǔ)在SSL遠(yuǎn)程數(shù)據(jù)庫(kù)，通過(guò) Navicat Premium 16工具連接到MySQL數(shù)據(jù)庫(kù)，在定義變量的基本類型后，Data實(shí)體類復(fù)寫(xiě)數(shù)據(jù)庫(kù)字段類型和名稱，并設(shè)置Setter和Getter等方法便于封裝。數(shù)據(jù)持久層使用Mapper編寫(xiě)數(shù)據(jù)庫(kù)SQL語(yǔ)句和映射關(guān)系，并使用Mybatis實(shí)現(xiàn)數(shù)據(jù)庫(kù)的訪問(wèn)；服務(wù)層用來(lái)封裝業(yè)務(wù)邏輯；表現(xiàn)層在應(yīng)用程序中起到連接用戶請(qǐng)求和業(yè)務(wù)邏輯處理的作用，通過(guò)接收用戶請(qǐng)求，根據(jù)請(qǐng)求信息進(jìn)行路由，處理業(yè)務(wù)邏輯并渲染視圖后返回用戶；控制層使用Ajax發(fā)送GET、POST、PUT請(qǐng)求至后端獲取折線圖數(shù)據(jù)，利用WebSocket實(shí)現(xiàn)實(shí)時(shí)電力數(shù)據(jù)的接收；前端UI顯示層通過(guò)BootStrap和Echarts等框架顯示從后端獲取的實(shí)時(shí)數(shù)據(jù)。

2 關(guān)鍵技術(shù)

2.1 前端數(shù)據(jù)展示技術(shù)

前端數(shù)據(jù)展示是實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)可視化的重要環(huán)節(jié)。在該系統(tǒng)中，采用HTML、JQuery、Echarts等技術(shù)實(shí)現(xiàn)對(duì)電力系統(tǒng)數(shù)據(jù)的可視化展示。

HTML是一種標(biāo)記語(yǔ)言，廣泛應(yīng)用于構(gòu)建Web頁(yè)面結(jié)構(gòu)［3］。通過(guò)HTML的靈活標(biāo)簽和元素，可以將實(shí)時(shí)數(shù)據(jù)以直觀的方式展示在前端頁(yè)面上，從而滿足用戶對(duì)電力運(yùn)行狀態(tài)實(shí)時(shí)監(jiān)測(cè)的需求。

JQuery是一種快速、簡(jiǎn)潔的JavaScript庫(kù)，它封裝了許多常用的操作和功能，能夠極大地簡(jiǎn)化JavaScript的編碼過(guò)程［4］。在前端數(shù)據(jù)展示中，可以利用JQuery的特性來(lái)處理前端頁(yè)面與后端數(shù)據(jù)的交互，實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)加載和刷新。

Echarts是一款由百度開(kāi)發(fā)的強(qiáng)大數(shù)據(jù)可視化庫(kù)，提供了豐富的圖表類型和交互功能［5］。通過(guò)Echarts可以選擇合適的圖表類型，如折線圖、柱狀圖、餅狀圖等，將數(shù)據(jù)以直觀、清晰的方式展示在前端頁(yè)面上。

Ajax（Asynchronous JavaScript and XML）是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)［6］。通過(guò)使用Ajax技術(shù)，前端頁(yè)面能夠在不重新加載整個(gè)頁(yè)面的情況下向服務(wù)器收起數(shù)據(jù)請(qǐng)求，并將獲得的數(shù)據(jù)動(dòng)態(tài)更新到頁(yè)面上。在該系統(tǒng)中，前端通過(guò)Ajax技術(shù)向后端發(fā)起數(shù)據(jù)請(qǐng)求，并獲取實(shí)時(shí)電力數(shù)據(jù)，實(shí)現(xiàn)前后端的數(shù)據(jù)交互和實(shí)時(shí)更新。

2.2 后端數(shù)據(jù)交互技術(shù)

后端數(shù)據(jù)交互是實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)可視化的另一重要環(huán)節(jié)。在該系統(tǒng)中，選用SpringBoot框架和MySQL數(shù)據(jù)庫(kù)實(shí)現(xiàn)后端數(shù)據(jù)交互。

SpringBoot是基于Spring Framework的快速開(kāi)發(fā)框架，它簡(jiǎn)化了項(xiàng)目的配置和搭建，提供了豐富的功能和插件，能夠快速實(shí)現(xiàn)Web應(yīng)用的開(kāi)發(fā)。通過(guò)SpringBoot，方便用戶搭建后端服務(wù)，處理前端數(shù)據(jù)請(qǐng)求的發(fā)起，并將數(shù)據(jù)傳遞給前端展示。

MySQL是一種常用的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，將電力系統(tǒng)的實(shí)時(shí)數(shù)據(jù)存儲(chǔ)在MySQL數(shù)據(jù)庫(kù)中。通過(guò)數(shù)據(jù)表的設(shè)計(jì)，將時(shí)間戳、總發(fā)電量、電池耗電量等信息存儲(chǔ)在相應(yīng)的字段中，實(shí)現(xiàn)數(shù)據(jù)的持久化管理。

2.3 實(shí)時(shí)數(shù)據(jù)傳輸技術(shù)

實(shí)時(shí)數(shù)據(jù)傳輸是實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)可視化的核心技術(shù)。在該系統(tǒng)中，采用WebSocket技術(shù)完成實(shí)時(shí)數(shù)據(jù)的低延遲傳輸。

WebSocket是基于TCP連接上實(shí)現(xiàn)全雙工通信的一種網(wǎng)絡(luò)協(xié)議，WebSocket協(xié)議支持Web瀏覽器與Web 服務(wù)器之間的數(shù)據(jù)交互，具有較低的性能開(kāi)銷［7］。相較于傳統(tǒng)的HTTP協(xié)議，WebSocket具有低延遲、高效率的優(yōu)勢(shì)，非常適用于實(shí)時(shí)數(shù)據(jù)傳輸［8］。

3 研究方法

3.1 數(shù)據(jù)傳輸與交互

在前端，通過(guò)SockJS和Stomp.js技術(shù)，實(shí)現(xiàn)了與后端WebSocket的連接。一旦建立了WebSocket連接，前端可以訂閱特定的主題Topic，以便在后端實(shí)時(shí)數(shù)據(jù)更新時(shí)接收通知。為了實(shí)現(xiàn)折線圖的實(shí)時(shí)更新，前端需要使用 Ajax 技術(shù)向后端發(fā)起數(shù)據(jù)請(qǐng)求，以獲取最新的電力數(shù)據(jù)。在收到 WebSocket 通知后，前端使用Ajax從后端獲取最新數(shù)據(jù)，然后通過(guò) Echarts 將數(shù)據(jù)實(shí)時(shí)展示在折線圖中。

在后端，當(dāng)有新的實(shí)時(shí)數(shù)據(jù)可以應(yīng)用時(shí)，通過(guò)SimpMessagingTemplate類向前端推送消息，實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)的傳輸。在數(shù)據(jù)更新的時(shí)候，后端可以調(diào)用SimpMessagingTemplate的convertAndSend方法將最新數(shù)據(jù)發(fā)送到前端指定的主題，然后前端運(yùn)用 Ajax 技術(shù)獲取到實(shí)時(shí)數(shù)據(jù)，并將其展示在折線圖中。

通過(guò)WebSocket和Ajax技術(shù)的結(jié)合，前端可以實(shí)現(xiàn)實(shí)時(shí)更新折線圖和獲取實(shí)時(shí)數(shù)據(jù)，使電力系統(tǒng)中的實(shí)時(shí)數(shù)據(jù)得以直觀地展示在前端頁(yè)面，為管理者提供及時(shí)的數(shù)據(jù)分析和決策支持。

3.2 數(shù)據(jù)庫(kù)設(shè)計(jì)與數(shù)據(jù)處理

為了滿足電力系統(tǒng)數(shù)據(jù)的存儲(chǔ)和查詢需求，該系統(tǒng)采用MySQL數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)管理。數(shù)據(jù)庫(kù)中設(shè)計(jì)了Data和DataTime兩張表格結(jié)構(gòu)來(lái)進(jìn)行數(shù)據(jù)存儲(chǔ)，其中，Data表用來(lái)存儲(chǔ)折線圖的數(shù)據(jù)，表中數(shù)據(jù)有存儲(chǔ)第一標(biāo)識(shí)的id、時(shí)間戳time、耗電量、風(fēng)產(chǎn)儲(chǔ)能量等數(shù)據(jù)；DataTime表用來(lái)存儲(chǔ)實(shí)時(shí)的數(shù)據(jù)，表中數(shù)據(jù)有存儲(chǔ)第一標(biāo)識(shí)的id、時(shí)間戳time、總發(fā)電量、電池耗電量等信息。后端通過(guò)DataMapper類實(shí)現(xiàn)與數(shù)據(jù)庫(kù)的數(shù)據(jù)交互，包括數(shù)據(jù)的插入和查詢。部分代碼如下：

@Mapperpublic interface DataMapper ｛void insertData（Data data）；//插入折線圖的數(shù)據(jù)

List getAllData（）；//查詢所有折線圖的數(shù)據(jù)

void insertRealData（data_time data_time）；data_time getLatestData（）；//查詢最新的實(shí)時(shí)數(shù)據(jù)｝

4 系統(tǒng)實(shí)現(xiàn)與結(jié)果分析

為了驗(yàn)證和研究基于SpringBoot和WebSocket的電力系統(tǒng)實(shí)時(shí)數(shù)據(jù)可視化方法的有效性，本研究對(duì)該系統(tǒng)進(jìn)行了實(shí)驗(yàn)分析，主要分為前端數(shù)據(jù)展示和后端數(shù)據(jù)傳輸兩個(gè)方面。

4.1 前端數(shù)據(jù)展示實(shí)現(xiàn)

前端數(shù)據(jù)展示實(shí)驗(yàn)采用Echarts技術(shù)來(lái)實(shí)現(xiàn)對(duì)電力系統(tǒng)實(shí)時(shí)數(shù)據(jù)的可視化展示。通過(guò)使用HTML搭建了一個(gè)大數(shù)據(jù)可視化的Web頁(yè)面，包含用電量、發(fā)電量、風(fēng)產(chǎn)電量、總電量的實(shí)時(shí)變化數(shù)據(jù)和折線圖。運(yùn)用WebSocket和Ajax技術(shù)，前端向后端發(fā)起數(shù)據(jù)請(qǐng)求，并實(shí)時(shí)獲取最新的電力數(shù)據(jù)。

數(shù)據(jù)可視化界面如圖2所示。前端數(shù)據(jù)展示部分成功地將電力系統(tǒng)的實(shí)時(shí)數(shù)據(jù)以直觀的文字和折線圖的方式展示在前端頁(yè)面。用戶可以通過(guò)圖表直觀地了解電力系統(tǒng)運(yùn)行狀態(tài)的實(shí)時(shí)變化情況，如用電量和發(fā)電量的波動(dòng)趨勢(shì)等，從而幫助管理者快速了解電力系統(tǒng)的運(yùn)行情況。

4.2 后端數(shù)據(jù)傳輸實(shí)現(xiàn)

后端數(shù)據(jù)傳輸實(shí)驗(yàn)主要驗(yàn)證了WebSocket和SimpMessagingTemplate在實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)傳輸方面的效果。在該系統(tǒng)中，運(yùn)用SockJS和Stomp.js技術(shù)與后端建立WebSocket連接，并訂閱特定的主題Topic以接收實(shí)時(shí)的電力數(shù)據(jù)。通過(guò)SimMessagingTemplate類將最新的電力數(shù)據(jù)實(shí)時(shí)推送到前端頁(yè)面。當(dāng)有新的實(shí)時(shí)數(shù)據(jù)可以應(yīng)用時(shí)，后端即時(shí)向前端發(fā)送消息，使前端頁(yè)面能夠自動(dòng)更新數(shù)據(jù)，無(wú)需手動(dòng)刷新頁(yè)面。

4.3 結(jié)果分析

實(shí)驗(yàn)結(jié)果表明，后端數(shù)據(jù)傳輸部分可以成功地實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)的推送和傳輸。無(wú)論是用電量、發(fā)電量還是風(fēng)產(chǎn)電量，前端頁(yè)面都可以實(shí)時(shí)地顯示最新數(shù)據(jù)，從而保持與電力系統(tǒng)實(shí)時(shí)數(shù)據(jù)的同步。

5 結(jié)語(yǔ)

本研究基于SpringBoot和WebSocket技術(shù)，提出并實(shí)現(xiàn)了一種電力系統(tǒng)實(shí)時(shí)數(shù)據(jù)可視化技術(shù)。通過(guò)前后端分離的開(kāi)發(fā)模式，前端采用HTML、JQuery、Echarts技術(shù)進(jìn)行數(shù)據(jù)展示，后端采用SpringBoot框架與MySQL數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)交互。通過(guò)WebSocket實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)傳輸，保持前端頁(yè)面與電力系統(tǒng)數(shù)據(jù)的同步更新。實(shí)驗(yàn)結(jié)果表明，該方法具有較強(qiáng)的復(fù)用性和可拓展性，能夠滿足電力系統(tǒng)實(shí)時(shí)數(shù)據(jù)可視化的需求，為電力管理與決策提供有效支持。

參考文獻(xiàn)：

［1］ 蘇斌.電力系統(tǒng)運(yùn)營(yíng)監(jiān)測(cè)的可視化管理［J］.電子世界，2016（24）：175.

［2］ 王志亮，紀(jì)松波.基于SpringBoot的Web前端與數(shù)據(jù)庫(kù)的接口設(shè)計(jì)［J］.工業(yè)控制計(jì)算機(jī)，2023，36（3）：51-53.

［3］ 鄒曉丹.基于HTML5和CSS3的網(wǎng)頁(yè)前端設(shè)計(jì)優(yōu)化研究［J］.自動(dòng)化應(yīng)用，2023，64（S1）：217-219.

［4］ 周公平.基于jQuery框架的Web前端開(kāi)發(fā)設(shè)計(jì)方法研究［J］.信息與電腦（理論版），2022，34（5）：128-130.

［5］ 許夢(mèng)雅.基于Echarts技術(shù)的企業(yè)數(shù)據(jù)可視化的設(shè)計(jì)與開(kāi)發(fā)［J］.現(xiàn)代信息科技，2022，6（6）：90-92，96.

［6］ 邱恒，李紅云.基于Ajax與Echarts的動(dòng)態(tài)數(shù)據(jù)可視化的研究［J］.電腦編程技巧與維護(hù)，2020（10）：148-150.

［7］孔曉陽(yáng)，代真虎.基于WebSocket與Redis的高性能Web組態(tài)系統(tǒng)設(shè)計(jì)［J］.信息技術(shù)與標(biāo)準(zhǔn)化，2021（3）：51-56.

［8］李仲岐.基于WebSocket即時(shí)通信系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［C］//天津市電子學(xué)會(huì).第三十七屆中國(guó)（天津）2023IT、網(wǎng)絡(luò)、信息技術(shù)、電子、儀器儀表創(chuàng)新學(xué)術(shù)會(huì)議論文集.2023：129-131.

收稿日期：2023-08-14

基金項(xiàng)目：河南省科技攻關(guān)項(xiàng)目（242102241061，242102210131）。

作者簡(jiǎn)介：劉金帥（2002—），男，本科生，研究方向：大數(shù)據(jù)、軟件開(kāi)發(fā)。

通信作者：葛明濤（1979—），男，博士，副教授，研究方向：信號(hào)處理、大數(shù)據(jù)分析。