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

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

在服务器端的设计中，我们选择了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方法，用户可以实时知道前后端链接是否正常。