前后端协同的实时数据可视化

数据可视分析模块技术路线

在服务器端的设计中，我们选择了Flask作为主要的Web应用框架。Flask以其简洁、灵活和易于扩展的特点而闻名，这使得它成为处理中小型项目的理想选择。Flask本身提供了基本的核心功能，同时通过丰富的插件系统，我们可以根据需求轻松添加和定制功能，比如路由管理、数据处理和安全性控制等。采用Flask的另一个优势是其与WSGI工具箱Werkzeug和模板引擎Jinja2的紧密集成，这些工具使得开发过程更加高效和可控。

为了实现数据的实时更新和客户端通信，我们引入了SSE（Server-Sent Events）技术。SSE建立在HTTP协议之上，通过持久连接从服务器向客户端推送数据，避免了传统轮询方式中的频繁请求和响应，从而提高了系统的响应速度和效率。客户端通过访问"/data"路径获取初始数据，并随后建立SSE连接以接收后续的数据更新。服务器定期监测数据变化，并在变化发生时通过SSE机制向客户端推送最新数据，确保客户端始终显示最新的电网状态和预测结果。

在数据存储和处理方面，我们采用简单的JSON格式来存储数据。这种格式不仅易于读写和扩展，还能够满足我们的基本数据存储需求。服务器端的数据处理主要通过Python进行，确保数据的准确性和一致性，同时兼顾系统的性能优化和安全性。

客户端设计着重于数据的可视化和用户界面的交互性。我们选择了Echarts和Vis.js这两个基于JavaScript的开源图表库，以实现丰富和动态的数据展示。Echarts被用于绘制实时功率和预测功率的对比图，这设计展示32个负载和4个风力发电机的状态，另外研究团队同时利用Echarts绘制总线路耗损，总稳定节点数、倒送功率等实时参数，为使用者提供更全面的电网运行信息。同时，Vis.js被用于展示电网的拓扑结构，将电网的连接关系和节点信息可视化呈现给用户。这些可视化图表不仅直观地展示了电网的实时状态，还提供了交互性强的用户体验，用户可以通过图表进行数据的详细分析和比较。在展示智能体优化效果方面，我们引入了总线路耗散和总稳定节点数两个重要指标。这些指标能够清晰地展示优化算法的效果，使用户能够直观地了解优化前后电网运行的改进情况。

可视化技术路线设计旨在结合简洁高效的服务器端架构和交互丰富的客户端数据展示，为电网监测与优化提供稳定可靠的解决方案。简要总结为如下几点：Flask作为服务器端的核心框架，提供了灵活的开发环境和强大的定制能力，能够满足项目的快速迭代和功能扩展需求。而在客户端，Echarts和Vis.js则通过强大的图表功能和可视化效果，使用户能够深入理解电网的运行状态和优化效果，从而更好地支持决策和管理。整体架构的设计不仅注重技术实现的创新和优化，还兼顾了系统的安全性、性能和用户体验，为电网管理和优化带来了显著的技术进步和应用价值。

作品设计流程-数据可视分析模块开发

基于Flask架构，搭建后端服务器，同时采用SSE机制检测运行数据更新，并实时向前端传递更新数据。前端设计综合采用Vis、Echarts等目前流行的多功能js库用于预测图表、电网拓扑结构的绘制，同时支持实时数据更新、可视化结果保存、实时交互等功能。整体设计注重实时性、鲁棒性、安全性、美观性，以及用户友好性。

设计方案

1.整体界面展示效果

2.服务器设计

Flask是一个使用Python编写的轻量级Web应用框架。其WSGI工具箱采用 Werkzeug，模板引擎则使用Jinja2。Flask使用BSD授权，Flask也被称为 “microframework”，因为它使用简单的核心，用extension增加其他功能。Flask没有默认使用的数据库、窗体验证工具。Flask是一个轻量级的可定制框架，较其他同类型框架更为灵活、轻便、安全且容易上手。它可以很好地结合MVC模式进行开发，开发人员分工合作，小型团队在短时间内就可以完成功能丰富的中小型网站或Web服务的实现。另外，Flask还有很强的定制性，用户可以根据自己的需求来添加相应的功能，在保持核心功能简单的同时实现功能的丰富与扩展，其强大的插件库可以让用户实现个性化的网站定制，开发出功能强大的网站。

总的来说，Flask是一个简单、灵活且功能丰富的Python Web框架，因此选用Flask来搭建服务器。后端运行过程中，电网以及预测数据将实时发生改变，为了保证客户端数据得到实时更新，同时减少客户端软件运行压力从而降低对于客户端硬件限制，在服务器侧引入了SSE机制。SSE是一种在基于浏览器的Web应用程序中仅从服务器向客户端发送文本消息的技术。SSE基于HTTP协议中的持久连接，具有由 W3C标准化的网络协议和EventSource客户端接口，并作为 HTML5标准套件的一部分。

后端服务器设计了两类路由函数，当访问"/“目录时，可在网页上返回"Server is running"提示用户，当前服务器正常运行，访问”/data"路径时，则会实时检测并读取指定位置下的data.json文件中存放的运行数据，并传递给前端。

总体流程可以概括为：客户端在开启时会访问服务器的"/data"路径，得到初始数据，并建立SSE链接。此后，服务器将实时判断用于存储数据的data.json文件是否发生更新，并在每次更新后，向客户端发送SSE数据流实现客户端数据同步。

3.前端设计

3.1 基于CSS、LESS、HTML设计前端静态骨架结构，如下图所示：

3.2 数据同步

为实现前后端交互与数据实时更新，我们在index_mid.js文件中维护了EventSource对象eventSource，并通过服务器网址(‘http://127.0.0.1:5000/data’)与后端建立链接。之后eventSource将实时监听服务器传递数据，并调用各个模块函数绘制并维护对应的所有功能图表。此外，通过指定eventSource.onerror方法，用户可以实时知道前后端链接是否正常。

3.3负载、风机功率实时预测模块

x轴上的0时刻表示当前时刻，-7_{-1时刻代表过去的若干时刻，1}4时刻表示对于模型对于接下来4个时刻的预测（每个时刻代表15min）。图表的维护封装在对应的功能函数loads()、wind_power()中。由于图表的设计均使用Echarts库，因此也遵循其设计流程。以wind_power()为例：

通过echarts.init(document.querySelector())定位图表在前端界面中的位置，之后在option中配置图表的相关属性，从服务器读取的数据也会在这里传递给option，然后调用myChart.setOption(option)即可完成图表渲染。为了适应前端展示的多尺寸屏幕，我们注册了resize函数，通过调用Echarts库中的resize()函数来使得图表随着屏幕的大小自动拉伸。

为了尽可能保持文档的简洁性，这里我们省略了option配置项的描述，用户可以通过[Echarts的官方文档](Documentation - Apache ECharts)查阅各个配置项的作用。我们主要通过option的配置完成以下功能：纵轴大小的自适应调整、实际值与预测值的特定区分、高可读性的提示、图表的保存等。

需要指出的是，因为风机和负载的功率分别为4、32。因此，我们也分别设计了风机选择项、负载下拉框功能。例如，当用户点击风机功率中的$W_1,W_2,W_3,W_4$字样时，函数将会自动将option中的option.data数据做出适应性修改，然后重新渲染，从而完成数据之间的切换。而当用户点击负载功率右侧的数字时，则会跳出下拉框，用户在下拉框中选择新的负载编号后，也会完成类似的功能。

以下为该功能的对应实现（上：风机，下：负载）：

风机功率数据切换，展示如下：

负载功率切换，展示如下：

3.4倒送功率、总稳定节点数、总线路耗散模块

这三个模块因为没有对应的预测值，所以图表记录了从0时刻（当前时刻）到-11时刻（前11个时刻）的实际值。配置过程同上，只是在option中做出了自适应修改，这其中最主要的就是option.data的切换。

3.6电网拓扑

为了更好的展示电网结构拓扑，我们引入了Vis库用于拓扑的绘制。

设计流程如下：

首先通过解析服务器传来的拓扑数据，按照Vis的格式要求存储在data中，然后document.querySelector()定位拓扑在前端界面中的绘制位置，并据此建立vis.Network对象network。之后通过option配置相关的nodes和edges信息，最后由network.setOptions(options)完成渲染。

说明书

可视化模型使用

将训练数据按照以下数据格式保存在data.json文件中：

其中stable_point_sum，line_cost_sum，inverse_power为长度为12的list类型；wind_power为dict类型，每一项的key为风机数据的名称，格式如’wind_power1’，value为长度为12的list类型；loads为dict类型，每一项的key为负载数据的名称，格式如’load_1’，value为长度为12的list类型；topology中的nodes中保存着所有节点的信息，nodes中的任一项为节点的字典信息，格式如{“id”: 0, “label”:“0”}，edges中保存着所有边的信息，nodes中的任一项为边的字典信息，格式如{“from”: 0, “label”:2}。

修改visiualization\Server\main.py中的local_path指向data.json文件的父目录，运行main.py，系统将自动开启后端服务器，读取data.json文件并向前端传递。

在浏览器中打开visiualization\Client\index.html即可展示。

界面介绍

界面主体分为四个大模块，依次命名为标题栏、左栏、中栏、右栏，如下图所示：

1.标题栏

标题栏的中间为软件名称“区域电网自治运行导航”，右侧为当前软件运行时间，该时间与后续图表中X轴的0刻度保持一致，记录着0刻度对应的现实时间，不一定为当前的真实时间。

2.左栏

左栏从上到下依次为负载功率、风机功率、倒送功率。

2.1负载功率

记录32个负载从当前时刻开始的过去8个时刻的实际功率（绿色），以及未来四个时刻的模型预测功率（红色），单位为kW。

点击“负载功率(kW)”字样右侧的数字（这里是6）时，前端会跳出下拉框：

用户可在下拉框里选择1-32，对应着1-32号负载，这里选择10为例，前端会切换到10号负载的负载功率展示：

鼠标位于图表上时，会激活对应位置的提示，下图中即为当鼠标位于X轴的2刻度上时，前端产生的提示，红色表示为模型预测值，loads后面的数值表示为负载功率的大小，单位为kW。

点击图表右上角的下载符号时，会将图表保存到本地。

2.2风机功率

记录4个风机从当前时刻开始的过去8个时刻的实际功率（绿色），以及未来四个时刻的模型预测功率（红色），单位为kW。

点击“风机功率(kW)”字样右侧中的$W_1,W_2,W_3,W_4$字样时，图表会切换到对于风机的功率数据展示，这里以$W_2$为例：

鼠标位于图表上时，会激活对应位置的提示，下图中即为当鼠标位于X轴的-4刻度上时，前端产生的提示，绿色表示为实际值，后面的数值表示为风机功率的大小，单位为kW。

点击图表右上角的下载符号时，会将图表保存到本地。

2.3倒送功率

记录着从当前时刻（0时刻）开始的过去12个的倒送功率，单位kW。

鼠标位于图表上时，会激活对应位置的提示，点击图表右上角的下载符号时，会将图表保存到本地。

3.中栏

中栏的上面记录着当前总线路耗散和当前总稳定节点数，也即后续图表中0时刻对应的结果。

中栏的下方记录着当前的网络拓扑：

虚线表示断开连接，实现表示连接。每个节点上的数字表示节点编号。

4.右栏

从上到下依次为总稳定节点数、总线路耗散、得分。

4.1总稳定节点数

记录着从当前时刻（0时刻）开始的过去12个的总稳定节点数。

鼠标位于图表上时，会激活对应位置的提示，点击图表右上角的下载符号时，会将图表保存到本地。

4.2总线路耗散

记录着从当前时刻（0时刻）开始的过去12个的总线路耗散，单位kW。

鼠标位于图表上时，会激活对应位置的提示，点击图表右上角的下载符号时，会将图表保存到本地。

4.3得分

环境中的奖励函数均由惩罚项组成，所以任何一次动作的奖励值均为负数，且由于奖励规模设置较小，奖励值不会低于-100，因此执行动作后带来的立即奖励值，加上100作为得分（score）。原始得分（origin_score）为未执行动作前环境给出的评分。在大多数情况下，得分与原始得分相同，因为深度强化学习智能体不会轻易改变配电网的拓扑结构，原因为：1.高频率切换线路在现实中不被允许，切换线路会被环境给以一定的惩罚，高频切换会带来较大的惩罚；2.一般情况下，短时间内电网的状态不会剧烈变换，深度强化学习智能体无需切换线路，通常两三个小时才会下达与之前不同的动作指令。而当深度强化学习智能体下达不同的动作指令后，意味着智能体认为采取新的拓扑结构具有明显优势，这个时候的得分将高于未执行动作前的原始得分，如下图所示：

鼠标位于图表上时，会激活对应位置的提示，点击图表右上角的下载符号时，会将图表保存到本地。