视觉上位机向上提供 API 并驱动 Web 看板核心是“用 ASP.NET Core Minimal API 做数据出口用 SignalR 做实时推送”。API 负责接收视觉结果和提供历史查询SignalR 负责把新结果即时“推”到所有打开看板的浏览器无需前端轮询。后端用 Minimal API 暴露视觉数据Minimal API 把路由和处理逻辑直接写在Program.cs里代码量极少适合视觉上位机这种“专注数据收发”的场景。1. 定义数据模型publicrecordInspectionRecord(stringSn,stringStation,boolIsOk,doubleX,doubleY,doubleAngle,DateTimeTimestamp);2. 创建 API 端点varbuilderWebApplication.CreateBuilder(args);// 注册 SignalRbuilder.Services.AddSignalR();varappbuilder.Build();// 内存存储生产环境应换数据库varrecordsnewListInspectionRecord();// 视觉上位机调用此接口上报结果app.MapPost(/api/inspection,async(InspectionRecordrecord,IHubContextDashboardHubhub){records.Add(record);// 关键立即通过 SignalR 推送给所有看板客户端awaithub.Clients.All.SendAsync(ReceiveInspection,record);returnResults.Ok();});// 看板首次加载时拉取近期记录app.MapGet(/api/inspection/recent,(intcount50)Results.Ok(records.TakeLast(count)));// 看板统计app.MapGet(/api/stats,(){vartodayrecords.Where(rr.Timestamp.DateDateTime.Today).ToList();returnResults.Ok(new{Totaltoday.Count,OkCounttoday.Count(rr.IsOk),NgCounttoday.Count(r!r.IsOk),Yieldtoday.Count0?(double)today.Count(rr.IsOk)/today.Count*100:0});});app.MapHubDashboardHub(/dashboardHub);app.Run();MapPost接收 JSON 请求体参数自动绑定到InspectionRecord对象。MapGet返回Results.Ok()包装的 JSON前端可直接解析。SignalR Hub实时推送的引擎SignalR 使用 WebSocket 在服务器和浏览器之间建立持久连接服务器可以在有新数据时主动推送而不是等浏览器来问。publicclassDashboardHub:Hub{// 看板连接时可加入特定分组如按车间publicoverrideasyncTaskOnConnectedAsync(){awaitGroups.AddToGroupAsync(Context.ConnectionId,AllViewers);awaitbase.OnConnectedAsync();}}Hub 本身几乎不需要业务逻辑——视觉结果是通过IHubContextDashboardHub从 API 端点推送的。这样 API 和 Hub 解耦API 处理数据Hub 只管推送。前端看板极简的实时刷新一个纯 HTML JavaScript 的看板页面无需框架!DOCTYPEhtmlhtmlheadtitle生产看板/titlescriptsrchttps://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.0/signalr.min.js/script/headbodyh1实时生产看板/h1dividstats/divtableidrecordstrthSN/thth站点/thth结果/thth时间/th/tr/tablescript// 1. 首次加载拉取历史数据fetch(/api/inspection/recent?count20).then(rr.json()).then(datadata.forEach(addRow));// 2. 建立 SignalR 连接constconnectionnewsignalR.HubConnectionBuilder().withUrl(/dashboardHub).withAutomaticReconnect()// 断线自动重连.build();// 3. 监听服务端推送connection.on(ReceiveInspection,(record){addRow(record);updateStats();// 重新拉取统计});connection.start().then(()console.log(已连接));functionaddRow(r){consttabledocument.getElementById(records);constrowtable.insertRow(1);row.innerHTMLtd${r.sn}/tdtd${r.station}/td td stylecolor:${r.isOk?green:red}${r.isOk?OK:NG}/td td${newDate(r.timestamp).toLocaleTimeString()}/td;// 保留最新 20 条while(table.rows.length21)table.deleteRow(21);}functionupdateStats(){fetch(/api/stats).then(rr.json()).then(s{document.getElementById(stats).innerHTML总数:${s.total}| OK:${s.okCount}| NG:${s.ngCount}| 良率:${s.yield.toFixed(1)}%;});}/script/body/htmlwithAutomaticReconnect()是生产环境的关键——网络抖动时 SignalR 会自动重连看板无需人工刷新。数据流全景视觉上位机 API 服务器 浏览器看板 │ │ │ │── POST /api/inspection ──►│ │ │ │── 存入内存/数据库 │ │ │── SignalR 推送 ──────────►│── 表格追加一行 │ │ │── 刷新统计 │ │ │ │◄── 若需查询历史 ──────────│◄── GET /api/inspection ────│首次加载API 端点的IHubContext注入让“处理请求”和“推送消息”在同一个 HTTP 请求中完成视觉上位机发完 POST 就返回浏览器几乎同时收到更新。这种模式比浏览器每秒轮询/api/inspection/recent要高效得多尤其在看板数量多的时候。实操建议看板页面直接托管在同一个 ASP.NET Core 项目中。把index.html放到wwwroot/下用app.UseStaticFiles()开启静态文件服务浏览器访问http://服务器IP:5000/index.html即可无需额外部署前端服务器。生产环境把内存List换成数据库。用 EF Core 存入 SQLite 或 SQL Server/api/stats的统计逻辑直接走 SQL 聚合避免每次请求都遍历内存列表。连接状态要可见。在看板页面显示“已连接/重连中”状态当 SignalR 断开时用户能立即感知而不是看着静止的页面以为产线停了。
视觉上位机向上提供 API 并驱动 Web 看板核心是“用 ASP.NET Core Minimal API 做数据出口用 SignalR 做实时推送”。API 负责接收视觉结果和提供历史查询SignalR 负责把新结果即时“推”到所有打开看板的浏览器无需前端轮询。后端用 Minimal API 暴露视觉数据Minimal API 把路由和处理逻辑直接写在Program.cs里代码量极少适合视觉上位机这种“专注数据收发”的场景。1. 定义数据模型publicrecordInspectionRecord(stringSn,stringStation,boolIsOk,doubleX,doubleY,doubleAngle,DateTimeTimestamp);2. 创建 API 端点varbuilderWebApplication.CreateBuilder(args);// 注册 SignalRbuilder.Services.AddSignalR();varappbuilder.Build();// 内存存储生产环境应换数据库varrecordsnewListInspectionRecord();// 视觉上位机调用此接口上报结果app.MapPost(/api/inspection,async(InspectionRecordrecord,IHubContextDashboardHubhub){records.Add(record);// 关键立即通过 SignalR 推送给所有看板客户端awaithub.Clients.All.SendAsync(ReceiveInspection,record);returnResults.Ok();});// 看板首次加载时拉取近期记录app.MapGet(/api/inspection/recent,(intcount50)Results.Ok(records.TakeLast(count)));// 看板统计app.MapGet(/api/stats,(){vartodayrecords.Where(rr.Timestamp.DateDateTime.Today).ToList();returnResults.Ok(new{Totaltoday.Count,OkCounttoday.Count(rr.IsOk),NgCounttoday.Count(r!r.IsOk),Yieldtoday.Count0?(double)today.Count(rr.IsOk)/today.Count*100:0});});app.MapHubDashboardHub(/dashboardHub);app.Run();MapPost接收 JSON 请求体参数自动绑定到InspectionRecord对象。MapGet返回Results.Ok()包装的 JSON前端可直接解析。SignalR Hub实时推送的引擎SignalR 使用 WebSocket 在服务器和浏览器之间建立持久连接服务器可以在有新数据时主动推送而不是等浏览器来问。publicclassDashboardHub:Hub{// 看板连接时可加入特定分组如按车间publicoverrideasyncTaskOnConnectedAsync(){awaitGroups.AddToGroupAsync(Context.ConnectionId,AllViewers);awaitbase.OnConnectedAsync();}}Hub 本身几乎不需要业务逻辑——视觉结果是通过IHubContextDashboardHub从 API 端点推送的。这样 API 和 Hub 解耦API 处理数据Hub 只管推送。前端看板极简的实时刷新一个纯 HTML JavaScript 的看板页面无需框架!DOCTYPEhtmlhtmlheadtitle生产看板/titlescriptsrchttps://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.0/signalr.min.js/script/headbodyh1实时生产看板/h1dividstats/divtableidrecordstrthSN/thth站点/thth结果/thth时间/th/tr/tablescript// 1. 首次加载拉取历史数据fetch(/api/inspection/recent?count20).then(rr.json()).then(datadata.forEach(addRow));// 2. 建立 SignalR 连接constconnectionnewsignalR.HubConnectionBuilder().withUrl(/dashboardHub).withAutomaticReconnect()// 断线自动重连.build();// 3. 监听服务端推送connection.on(ReceiveInspection,(record){addRow(record);updateStats();// 重新拉取统计});connection.start().then(()console.log(已连接));functionaddRow(r){consttabledocument.getElementById(records);constrowtable.insertRow(1);row.innerHTMLtd${r.sn}/tdtd${r.station}/td td stylecolor:${r.isOk?green:red}${r.isOk?OK:NG}/td td${newDate(r.timestamp).toLocaleTimeString()}/td;// 保留最新 20 条while(table.rows.length21)table.deleteRow(21);}functionupdateStats(){fetch(/api/stats).then(rr.json()).then(s{document.getElementById(stats).innerHTML总数:${s.total}| OK:${s.okCount}| NG:${s.ngCount}| 良率:${s.yield.toFixed(1)}%;});}/script/body/htmlwithAutomaticReconnect()是生产环境的关键——网络抖动时 SignalR 会自动重连看板无需人工刷新。数据流全景视觉上位机 API 服务器 浏览器看板 │ │ │ │── POST /api/inspection ──►│ │ │ │── 存入内存/数据库 │ │ │── SignalR 推送 ──────────►│── 表格追加一行 │ │ │── 刷新统计 │ │ │ │◄── 若需查询历史 ──────────│◄── GET /api/inspection ────│首次加载API 端点的IHubContext注入让“处理请求”和“推送消息”在同一个 HTTP 请求中完成视觉上位机发完 POST 就返回浏览器几乎同时收到更新。这种模式比浏览器每秒轮询/api/inspection/recent要高效得多尤其在看板数量多的时候。实操建议看板页面直接托管在同一个 ASP.NET Core 项目中。把index.html放到wwwroot/下用app.UseStaticFiles()开启静态文件服务浏览器访问http://服务器IP:5000/index.html即可无需额外部署前端服务器。生产环境把内存List换成数据库。用 EF Core 存入 SQLite 或 SQL Server/api/stats的统计逻辑直接走 SQL 聚合避免每次请求都遍历内存列表。连接状态要可见。在看板页面显示“已连接/重连中”状态当 SignalR 断开时用户能立即感知而不是看着静止的页面以为产线停了。
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
