当前位置：首页 > news >正文

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

news 2026/7/30 10:42:18

前言

数据采集和存储就绪后，本章介绍前端如何展示这些数据——首页监控大屏的设计与实现。

页面布局

首页采用 Bootstrap 响应式布局，左侧固定导航，右侧内容区展示各设备的环境数据：

<!-- _Layout.cshtml 核心结构 --> <div class="left-side sticky-left-side"> <div class="logo"> <a href="/Home/Index"> <img src="@DataHelper.GetLogo()" alt="" style="width:140px;height:40px;"> </a> </div> <!-- 菜单导航 --> <ul class="sidebar-menu"> <li><a href="/Home/Index">监控大屏</a></li> <li><a href="/Company/CompanyList">工厂管理</a></li> <!-- ... --> </ul> </div> <section class="main-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 class="form-control js_search_Company"> @foreach (var item in Model.companyListdata) { var selected = Model.userCompanyId == item.Id ? "selected" : ""; <option @selected value="@item.Id">@item.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; }