《基于Flask的简易视觉监控模板》（含代码+部署指南）
手把手教你搭建自己的工业视觉远程看板
“想快速给客户演示远程监控效果？”
“内部需要一个轻量级平台追踪检测状态？”
“不想折腾复杂的商业软件，又希望比TeamViewer更专业？”
你是否也曾面临这样的困境？今天，我们开源一份极简但功能完备的 Flask 视觉监控模板。它专为工业场景设计，代码清晰、部署简单，10分钟即可跑起来，助你快速验证想法或交付 MVP。
🧩 项目核心功能
- 实时状态展示：显示视觉程序是否在线、当前处理FPS。
- 关键图像回传：自动上传最新一张 NG（不合格）图像。
- 结果数据可视化：用 ECharts 展示今日 OK/NG 数量及良品率趋势。
- 报警通知：当连续出现 NG 时，页面高亮告警。
- 轻量无依赖：仅需 Python + OpenCV + Flask，无需数据库。
💡设计理念：只传关键信息，不传原始大图，极大节省带宽。
📂 项目结构一览
flask-vision-monitor/ ├── app.py# 主程序入口├── camera_simulator.py# 模拟视觉检测程序（实际项目中替换为你自己的算法）├── static/ │ └── js/ │ └── main.js# 前端逻辑，处理自动刷新├── templates/ │ └── index.html# 监控看板页面└── ng_images/# 存放最新的NG图片💻 核心代码解析
1. 后端主程序 (app.py)
# app.pyfromflaskimportFlask,render_template,jsonify,send_from_directoryimportjsonimportosimporttimefromdatetimeimportdatetime app=Flask(__name__)DATA_FILE='vision_status.json'# 视觉程序写入的状态文件NG_IMAGE_DIR='ng_images'# 确保目录存在os.makedirs(NG_IMAGE_DIR,exist_ok=True)@app.route('/')defindex():returnrender_template('index.html')@app.route('/api/status')defget_status():"""提供实时状态API"""ifos.path.exists(DATA_FILE):withopen(DATA_FILE,'r')asf:data=json.load(f)else:data={"online":False,"fps":0,"ok_count":0,"ng_count":0,"latest_ng_time":"","latest_ng_image":""}returnjsonify(data)@app.route('/ng_images/<filename>')defserve_ng_image(filename):"""提供NG图片访问"""returnsend_from_directory(NG_IMAGE_DIR,filename)if__name__=='__main__':app.run(host='0.0.0.0',port=5000,debug=False)2. 模拟视觉程序 (camera_simulator.py)
在真实项目中，你需要将此逻辑集成到你的视觉主程序中。
# camera_simulator.py (你的视觉程序应包含类似逻辑)importcv2importnumpyasnpimportjsonimportosimporttimefromdatetimeimportdatetime# 模拟你的视觉算法defyour_vision_algorithm(frame):# 这里是你的核心检测逻辑# 返回: is_ok (bool), processed_frame# 为了演示，我们随机生成结果is_ok=np.random.rand()
