3步打造工业级IoT监控面板：ThingsBoard业务指标可视化指南-优快云博客

3步打造工业级IoT监控面板：ThingsBoard业务指标可视化指南

【免费下载链接】thingsboard Open-source IoT Platform - Device management, data collection, processing and visualization. 项目地址: https://gitcode.com/GitHub_Trending/th/thingsboard

作为开源物联网平台（IoT Platform - Device management, data collection, processing and visualization），ThingsBoard提供了强大的设备管理和数据可视化能力。但默认仪表盘往往无法直接满足复杂业务需求，本文将通过实战案例，教你如何自定义监控面板，将原始设备数据转化为直观的业务指标视图。

监控面板设计核心价值

企业在IoT项目中常面临"数据丰富，洞察匮乏"的困境：大量设备数据涌入平台，但难以转化为管理层可直接决策的业务指标。ThingsBoard的自定义仪表盘功能正是解决这一痛点的关键，通过ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts实现的可视化引擎，支持将设备原始数据（如温度、湿度、能耗）转换为业务指标（如设备故障率、区域能耗排名、生产效率）。

准备工作：了解仪表盘架构

在开始自定义前，需要理解ThingsBoard仪表盘的核心构成：

仪表盘容器：定义整体布局和权限控制，对应源码ui-ngx/src/app/modules/home/models/dashboard-component.models.ts中的IDashboardComponent接口
部件(Widget)：可视化基本单元，如折线图、 gauge 图、状态指示灯等，内置部件定义在ui-ngx/src/assets/widget/目录
数据源：连接设备遥测数据或属性，支持实时流和历史数据查询
布局管理：响应式网格系统，支持多屏幕适配

第一步：数据建模与指标设计

业务指标拆解

以智能工厂为例，需将"生产效率"这一顶层指标拆解为可量化的子指标：

业务指标	计算公式	数据源	部件类型
设备综合效率(OEE)	(可用率×表现率×质量率)×100%	设备状态、生产计数	数值卡片 + 趋势图
区域能耗排名	区域总能耗对比	电表遥测数据	水平条形图
故障预警	温度>80℃持续5分钟	温度传感器	状态指示灯 + 告警表

数据属性配置

在设备配置中定义业务属性，通过规则引擎rule-engine/处理原始数据：

登录ThingsBoard控制台，进入设备配置页面
添加服务器端属性：calculated_oee（浮点型）
创建规则链，使用脚本节点计算OEE值：

// 伪代码示例，实际实现见[msa/js-executor/queue/](https://link.gitcode.com/i/dcf17d82f2dc24e7c7abd90898fb16b0)
var availability = (totalProductionTime - downtime) / totalProductionTime;
var performance = actualOutput / maximumPossibleOutput;
var quality = goodProducts / totalProducts;
metadata.calculated_oee = availability * performance * quality * 100;
return {
  msg: msg,
  metadata: metadata,
  msgType: msgType
};

第二步：自定义部件开发

选择基础部件

ThingsBoard提供丰富的内置部件，位于ui-ngx/src/assets/widget/目录，常用的包括：

数值卡片：ui-ngx/src/assets/widget/value-card/ - 展示关键指标当前值
时间序列图：展示指标随时间变化趋势
状态面板：ui-ngx/src/assets/widget/status-widget/ - 设备运行状态可视化

高级自定义：创建复合部件

当内置部件无法满足需求时，可通过以下步骤开发自定义部件：

创建部件描述文件custom_widget.json，定义配置参数和数据键
开发Angular组件，实现部件逻辑：

// 示例代码结构，完整实现参考[ui-ngx/src/app/modules/home/components/widget/](https://link.gitcode.com/i/cc483120314054b01424336e2a420a4d)
import { Component, Input } from '@angular/core';
import { WidgetComponent } from '@home/components/widget/widget.component';

@Component({
  selector: 'tb-oee-widget',
  templateUrl: './oee-widget.component.html',
  styleUrls: ['./oee-widget.component.scss']
})
export class OeeWidgetComponent extends WidgetComponent {
  @Input() oeeValue: number;
  
  getColor(): string {
    if (this.oeeValue > 85) return '#4CAF50'; // 绿色：优秀
    if (this.oeeValue > 60) return '#FFC107'; // 黄色：一般
    return '#F44336'; // 红色：差
  }
}

打包部件并上传，通过ui-ngx/src/app/core/api/widget-api.models.ts注册

第三步：仪表盘布局与交互设计

布局策略

采用"业务优先级"布局法，关键指标放置在视觉焦点区：

顶部行：核心KPI卡片（OEE、产量、能耗）- 使用ui-ngx/src/assets/widget/entity-count/组件
左侧列：实时状态监控（设备状态、告警）
右侧列：趋势分析（能耗趋势、效率变化）
底部行：详细数据表格（故障记录、生产日志）

交互设计

添加业务导向的交互功能：

下钻功能：点击区域能耗条形图，自动加载该区域设备明细仪表盘
时间范围选择器：通过ui-ngx/src/app/modules/home/components/dashboard-page/实现日/周/月切换
数据导出：集成报表功能，导出Excel格式数据（实现见application/src/main/）

部署与权限控制

仪表盘发布流程

保存仪表盘草稿，配置共享权限
创建租户级仪表盘，通过ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts实现权限控制
嵌入到业务系统，使用iframe集成或调用REST APIrest-client/