工厂环境监测系统实战（四）：前端监控大屏与实时数据展示

前言数据采集和存储就绪后本章介绍前端如何展示这些数据——首页监控大屏的设计与实现。页面布局首页采用 Bootstrap 响应式布局左侧固定导航右侧内容区展示各设备的环境数据!-- _Layout.cshtml 核心结构 -- div classleft-side sticky-left-side div classlogo a href/Home/Index img srcDataHelper.GetLogo() alt stylewidth:140px;height:40px; /a /div !-- 菜单导航 -- ul classsidebar-menu lia href/Home/Index监控大屏/a/li lia href/Company/CompanyList工厂管理/a/li !-- ... -- /ul /div section classmain-content RenderBody() /section工厂选择器首页顶部有工厂下拉切换数据来自数据库Company表根据当前登录用户关联的工厂动态加载// HomeController.Index() model.companyListdata _companyAppService.GetUserCompanyList(currentUserId); var userCompany _userCompanyAppService.GetUserCompanyByUserId(currentUserId); model.userCompanyId userCompany?.CompanyId ?? 0;!-- Views/Home/Index.cshtml -- select classform-control js_search_Company foreach (var item in Model.companyListdata) { var selected Model.userCompanyId item.Id ? selected : ; option selected valueitem.Iditem.CompanyName/option } /select切换工厂时通过 AJAX 刷新下方的设备列表和环境数据。设备状态卡片每个设备以卡片形式展示显示当前温湿度、露点、压差、粒径等指标┌───────────────────────┐ │ 设备名称 │ │ ┌──────┐ ┌──────┐ │ │ │ 24.7℃│ │48.5% │ │ │ │ 温度 │ │ 湿度 │ │ │ └──────┘ └──────┘ │ │ ┌──────┐ ┌──────┐ │ │ │ 12.3℃│ │ 45Pa │ │ │ │ 露点 │ │ 压差 │ │ │ └──────┘ └──────┘ │ └───────────────────────┘数据从FacilityData表查询最新一条记录通过 AJAX 定时刷新。实时刷新方案此处没有使用 SignalR 或 WebSocket而是采用了定时 AJAX 轮询的方案简单可靠// 每5秒刷新一次数据 setInterval(function() { var companyId $(.js_search_Company).val(); $.ajax({ url: /Home/GetFacilityData, data: { companyId: companyId }, success: function(data) { // 更新页面上的温度、湿度等数值 $.each(data, function(i, item) { $(#temp_ item.FacilityNumber).text(item.Temperature ℃); $(#humi_ item.FacilityNumber).text(item.Humidity %RH); }); } }); }, 5000);CSS 响应式适配侧边栏收缩后Logo 区域切换为小图标/* 收缩时隐藏全尺寸Logo */ .left-side-collapsed .logo { display: none; } /* 显示小图标 */ .left-side-collapsed .logo-icon { display: block; } /* 展开时显示Logo */ .logo-icon { display: none; }小结左侧导航 右侧内容的经典管理后台布局工厂下拉根据用户权限动态加载定时 AJAX 轮询实现数据实时刷新CSS 控制侧边栏展开/收缩的响应式效果下一章介绍工厂与设备的后台管理功能。上一篇第3章 — 数据库设计与 Entity Framework 实战下一篇第5章 — 工厂与设备管理