ThingsBoard3.9.1仪表板功能详解及典型应用

        最近在整理thingsboard课程，基于最新thingsboard版本3.9.1/4.0，欢迎大家收藏、关注我，提问，在评论区留言，我争取把最新、最准、最好的课程，呈现在各位亦师亦友的csdn广大读者面前。

目录

1. 仪表板

1.1 官方样例仪表板解读

1.2 新建一个仪表板

1.3 使用地图仪表板

1.4 仪表板之间跳转/携带参数

1.5 仪表板内部的小部件联动

---

1. 仪表板

1.1 官方样例仪表板解读

官方提供缺省的初始化的数据库中，有四个样例仪表板：

（1）Firmware

Firmware仪表板如下，

有6个状态：Default，device_error，device_firmware_history，device_updated，device_updating，device_waiting。

有5个部件：1个Entities table，4个HTML Value Card。

(上图编号Diag-05-10)

在“Diag-05-10”，点击第一行操作栏的“编辑”图标按钮，打开对话框如下：

编辑History firmware update

如下，

数据源：动作单元格按钮，On cell Click，顶部按钮，点击行时，双击行时。

显示仪表板状态选项：普通，在单独的对话框中打开，在弹出框中打开。

动作选项：

点击“编辑”图标按钮，弹出对话框，如下：

点击“历史”图标按钮 ，查看固件升级历史，如下：

切换到仪表板目标状态，如下：

(上图编号Diag-05-12)

在“Diag-05-10”，点击第二行操作栏的“编辑”图标按钮，打开对话框如下：

编辑Edit firmware

点击“编辑”按钮，弹出对话框，如下：

HTML选项卡：

下拉框选择器，如下定义：

JS选项卡：

customDialog是CustomDialogService对象，

此处customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();

是customDialog服务调用customDialog方法，要创建一个对话框，传入两个参数：

htmlTemplate: 自定义弹窗的HTML模板；

EditEntityDialogController: 控制器函数；

当customDialog.customDialog()被调用时，TB内部会执行：

创建一个对话框组件，并在其中加载 htmlTemplate；

实例化EditEntityDialogController并自动传入instance，instance代表当前的对话框实例；

让instance负责管理表单数据、提供dialogRef来控制对话框的关闭行为。

instance实际上是一个包含对话框上下文的对象。

instance的属性	用途
dialogRef	对话框引用，用于关闭对话框
fb	表单构建器 (FormBuilder)，用于创建 FormGroup
entityName	对话框传入的 entityName，可以用作标题等
entity	存储当前正在编辑的实体
editEntityFormGroup	绑定表单，用于编辑设备或实体数据
cancel()	取消方法，调用 vm.dialogRef.close(null) 关闭对话框
save()	保存方法，提交表单数据，并调用 vm.dialogRef.close(data) 关闭对话框并返回数据

在浏览器看到的instance，如下：

第54行，

customDialog(template: string, controller: (instance: CustomDialogComponent) => void, data?: any, config?: MatDialogConfig)

在Entities table的操作栏，点击编辑，弹出对话框，如下：

在“Diag-05-10”，点击第三行操作栏的“编辑”图标按钮，打开对话框如下：

编辑Download firmware

点击“编辑”按钮，弹出对话框，如下：

Download firmware动作的函数如下：

$scope是Angular框架中的一个特定对象，每1个$scope都是Scope类的1个实例，在控制器与视图之间建立了一个通道，可以做数据绑定和通信。由此可以实现：应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope中。

$injector是依赖注入（Dependency Injection, DI）系统的核心服务，它负责管理和解析模块、控制器、服务等组件之间的依赖关系。主要应用场景是动态获取服务或实例化其他服务，此处是通过$injector.get('EntityService')根据服务名字得到服务实例。

widgetContext.servicesMap.get('entityService')这个语句，通过匹配“entityService”字符串，得到“EntityService”服务。

在“Diag-05-10”，点击第四行操作栏的“编辑”图标按钮，打开对话框如下：

编辑Copy checksum/URL

Entities Table Widget | ThingsBoard Community Edition

参考链接：Working with widgets | ThingsBoard Community Edition

在TB系统中，仪表板功能可以分为两部分：

（1）仪表板看板：为业务需要做好的展示面板。

（2）仪表板部件：系统内部的仪表板上所需的图表部件，部件集合组成了部件包。

 （部件、部件包的维护和管理，在菜单“资源”-->“部件库”）。

1.2 新建一个仪表板

登录系统中，左侧仪表板菜单，点击列表右上方“+”按钮，如下：

选择部件包：（点击Charts部件包）

选择部件：（选择Line chart）

按照以上方法，逐个增加仪表部件。

最终新增的仪表板完成。

在菜单“仪表板”列表可以查看/编辑，如下：

在dashboard表中可以看到：

新增完成之后这个仪表板怎么使用呢？

（1）默认情况下，只有租户管理员能看到当前租户下的仪表板，

通过授权，可以给当前租户下的普通客户使用；

通过设置公开，也可以公众用户使用。

（2）设置为后台首页：

后台默认首页是TB自带的综合看板。

菜单“设置”à“首页-->“首页仪表板”，可以设置dashboardTest1为后台首页。

如果设置了dashboardTest1为后台首页，

想再改回默认首页，删除下拉框dashboardTest1选项即可。

1.3 使用地图仪表板

地图仪表板核心功能：显示位置，实时轨迹，电子围栏。

举例说明，车辆跟踪的应用场景，增加一个地图仪表板：“数据”选项卡的配置如下

“外观”选项卡的配置如下：

配置好之后，如下：

车辆监控看板，有4个状态，Maker tooltips上面有4个链接，

Maker tooltips上面的4个链接，点击触发动作，对应到Default状态下的地图部件（Tencent Map）的动作配置中的4个动作。如下：

4个动作的效果，如下：

轨迹d：对应动作名称actionTraceDlg

轨迹p：对应动作名称actionTracePop

监控：对应动作名称actionMonitor

增加用户：对应动作名称actionAddUser

进一步说明，监控链接对应动作名称actionMonitor的脚本，如下：

// 阻止事件冒泡
$event.stopPropagation();
// 获取当前仪表板状态
const dashboard = widgetContext.dashboard;
// 显示通知
widgetContext.showSuccessToast('自定义动作已触发!');
// 打印调试信息到控制台
console.log('自定义动作参数:', {
    event: $event,
    widgetContext: widgetContext,
    entityId: entityId,
    entityName: entityName,
    additionalParams: additionalParams,
    entityLabel: entityLabel
});
console.log('仪表板信息:', dashboard);
widgetContext.actionsApi.openDashboardStateInSeparateDialog("monitor", {}, "在独立对话框打开", true,50,70); //对话框占屏幕宽高的百分比
// 返回false可以阻止默认行为
return false;

打开Jmeter，模拟设备上报遥测数据，效果如下：

1.4 仪表板之间跳转/携带参数

        仪表板之间的跳转，使用部件的“动作”来完成，“动作”如下：

切换仪表板状态：当前仪表板的新状态

Navigate to new dashboard state - transfers you to the specified state within the current dashboard;

切换仪表板状态 如下：

更新仪表板状态：当前仪表板的当前状态

Update current dashboard state - updates the dashboard that you are currently on;

更新仪表板状态 如下：

打开仪表板：

Navigate to other dashboard - transfers you to a specified dashboard;

自定义动作：

Custom action - allows manual configuration of a function for an individual action on your widget;

自定义动作（HTML模板）

Custom action (with HTML template) - allows manual entry of a function within an existing HTML template;

移动端动作：

Mobile action - allows the use of various mobile device functions such as taking photos, scanning QR codes, getting device location, making phone calls and so on;

打开URL：

Open URL - allows you to go to any resource represented by a URL.

应用场景：

左树右表的页面布局，左侧设备树，右侧设备综合指标统计数据。

设备列表页面 --> 跳转-->设备实时监控详情页面、设备告警列表。

设备实时监控详情页面 -->跳转--> 设备某个参数指标的历史数据表、历史数据曲线图。

传递参数：

在源仪表板，如下：状态实体参数名称-默认

在目标仪表板的，如下：设置别名，详细参数别名，类型

直接打开目标仪表板，没有参数传入，如下：

当你在源仪表板点击地图标记Maker时，跳转到目标仪表板，如下：

点击“物流货车1#”的Maker时，跳转如下：

点击“商务车6#”的地图Maker时，跳转如下：

1.5 仪表板内部的小部件联动

在仪表板内部的小部件之间，数据展示联动，

（上图编号Diag-05-04）