《工业数据可视化:Python + Flask 实现 Web 实时读取 MySQL 数据》

“在工业现场中，PLC、变频器、马达保护器、温湿度变送器及各类仪表电气设备通常会持续产生大量运行数据。为了实现设备状态监控、历史数据查询、趋势分析及远程可视化以及帮助维修人员的故障定位不去现场即能掌握设备的实时和历史运行状态，越来越多的系统开始采用 Web 化方式进行数据展示或查询。本文基于 Python + Flask + MySQL，搭建一个轻量级工业数据可视化系统，实现数据库历史数据读取、设备树导航、实时曲线显示以及多设备切换等功能，完成从数据库到 Web 前端的数据展示流程。”

本文继Python + MySQL 工业数据存储之后。

01

系统整体结构

一.数据流方向

这里仅先引入Python支持库采集各类数据，后续文章再从数据采集层面举例增加OPC UA和组态软件的时序数据库的采集或开放api对接，以解决组态软件web又老又烂的痛点。先跳过，持续关注我，学通了再发文。谢谢支持！

二.各模块作用

模块	作用
Python采集	获取现场数据
MySQL	存储历史记录
Flask	提供HTTP接口
前端HTML	展示页面

02

Flask Web 服务环境配置

一.安装依赖

pip install flask

二.Flask作用

• 接收前端HTTP请求
• 查询数据库
• 返回JSON数据
• 提供API接口
• 返回HTML页面

三.项目目录结构

project/

├── app.py   \\负责接受前端的请求做出响应，以及对MySQL读取

├── index.html    \\前端web

03

前端设计

一.UI和功能设计

  参考了很多设备状态显示页面，初步决定前端UI结构如下图：

1.树状图设备位号和分类：按照区域→设备类型→设备位号的结构组成树状图，方便按位置逐区域检索。

2.搜索功能：支持模糊搜索，选中搜索结果后展开树状图并且高亮。

3.时序结构：需要支持查询实时状态和指定时间段状态并且生成折线图。

4.页面参数：每个设备有不同的参数，温湿度变送器只有温湿度和状态，而电机有频率，电压电流，转数，扭矩等。这里用json动态加载来解决。

5.设备配图：轻量化系统结构不适合储存太多图片，我想到了以下解决方案。将工厂的资产维护管理系统的图片api扒出来嵌入后端中返回base64给前端加载。举例“易美刻APP”过程如下：

（1）抓包设备参数请求包和分析响应

请求如下：变量仅为设备精确位号和用户Token令牌（用户令牌可找管理员添加一个号专用于该api，有效期未知，可以定时用账号密码刷新Token）

（2）分析响应定位所需目标

响应如下：找出图片base64位置

（3）验证base64是否为该设备图片

二.浏览器访问流程设计。

浏览器发起访问请求后，首先从服务端加载HTML 页面架构；页面初始化完成后，自动请求数据库获取全部设备名称，渲染生成设备树形导航结构。用户选定对应设备后，系统按时间维度时序异步请求区间业务数据，动态完成数据渲染与折线图表可视化；同时调用前文中提到的设备管理系统的 API 加载设备配图资源，最终整合所有数据、图表与图片资源，在前端进行布局优化与界面美化并完整展示。随后每次更换查看设备则重新请求，仅返回json。同时每5s刷新一次设备状态，全部请求基于Ajax (Fetch API)的get请求。

三.找AI生成前端JS并且部署在服务器。

04

后端设计

1.静态资源

• 负责将 index.html 页面发送给浏览器。

• 管理 /static/ 文件夹下的图标资源（如电机、PLC 图标）。

2.配置与连接

• 数据库配置：定义 MySQL 的连接参数（地址、端口、用户、密码），用于读取 device_log 表。

• 第三方 API 配置：定义易美刻（Eamic）的 Token 和请求地址模板。

3.API 接口

• 设备导航接口 (/devices)：从数据库提取“区域”和“位号”，构造前端树状菜单所需的 JSON。

• 历史数据接口 (/history)：根据前端传来的“位号”和“时间”，从数据库查询最新的温湿度、转速、频率等运行数据。

• 设备图片接口 (/device_image)：将前端请求转发给易美刻服务器，并从返回的复杂 JSON 中提取 data.item.base64 路径下的图片数据。