前言
数据采集和存储就绪后，本章介绍前端如何展示这些数据——首页监控大屏的设计与实现。
页面布局
首页采用 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; }小结
- 左侧导航 + 右侧内容的经典管理后台布局
- 工厂下拉根据用户权限动态加载
- 定时 AJAX 轮询实现数据实时刷新
- CSS 控制侧边栏展开/收缩的响应式效果
下一章介绍工厂与设备的后台管理功能。
上一篇：第3章 — 数据库设计与 Entity Framework 实战
下一篇：第5章 — 工厂与设备管理