产品定价 立即试用
Trendz Analytics
社区版 专业版 云平台 边缘 PE边缘 IoT网关 许可证服务器 Trendz Analytics 移动应用 PE移动应用 MQTT Broker PE MQTT Broker
文档 > 共享查看 > 部件操作
入门
指南 安装 如何激活Trendz
目录

Trendz 部件操作

配置 OnRowClick 操作

Trendz 表格视图支持 onRowClick 操作，可配置用户点击表格行时的行为，例如将实体保存到仪表板状态别名或打开新的仪表板状态。

启用行点击事件：

  • 在 ThingsBoard 仪表板上添加 Trendz 表格视图；
  • 打开部件编辑模式，切换到操作选项卡；
  • 点击添加操作按钮；
  • 在操作来源中选择 On row click；
  • 按标准部件动作进行配置。

每行可能包含来自一个或多个设备或资产的多个字段，即一行可与多个实体关联。 若使用 onRowClick 操作，需定义点击行时选中的实体。

  • 在 Trendz 视图编辑模式下打开视图设置；
  • 打开 View Mode fields 区域；
  • 在 Row click entity 下拉中选择所需设备或资产类型；
  • 保存更改。

为异常视图配置 OnRowClick 操作

若在仪表板上使用异常表格并希望创建不仅设置选中实体、还会更新时间窗口的操作，请按以下步骤操作：

  1. 配置 Row Click Entity。 在 Trendz 中打开图表设置，设置「Row click entity」。

    image

  2. 创建 Row Click Action。 在仪表板上异常视图设置的 Actions 选项卡中创建新操作。选择「On Row click」作为 Action source，类型设为「Custom action」。
    然后添加自定义代码以将所选实体设为dashboard上的选中实体。先获取新state entity的state ID和参数。本示例使用”selectedDevice”， 可按实际需求修改名称。最后更新时间窗口和state。

1
2
3
4
5
6
7
8
9

let stateId = widgetContext.stateController.getStateId();
let stateParams = widgetContext.stateController.getStateParams();
stateParams.selectedDevice = {
    'entityId': entityId,
    'entityName': entityName
}

widgetContext.dashboard.onUpdateTimewindow(additionalParams.startTs, additionalParams.endTs); 
widgetContext.stateController.updateState(stateId, stateParams);

配置 Date selected 操作

Trendz 日历和异常表格支持 date-selected 操作，可根据在日历或异常时间范围内选择的日期动态更新 ThingsBoard 仪表板的时间窗口。 启用 date-select 事件：

  1. 在仪表板上添加 Trendz 视图；
  2. 进入部件编辑模式，打开 Actions 选项卡；
  3. 点击「添加操作」按钮；
  4. 在「操作来源」中选择「date-selected」；
  5. 类型设为「Custom action」。自定义函数会通过 additionalParams 参数接收 startTs 和 endTs。可使用下列代码更新仪表板时间窗口：
1

widgetContext.dashboard.onUpdateTimewindow(additionalParams.startTs, additionalParams.endTs);

配置行点击选择多个实体

要在 Trendz 视图中实现行点击选择多个实体，请按以下步骤操作。本例中表格显示建筑列表，每行有能量表数量和聚合能耗。 目标：点击某一行时，将能量表列表发送到仪表板上的别名。

image

Step 1. 设置Trendz View

  1. 设置要发送到alias的实体的实体类型。本例为EM能量表。

    image

  2. 将该视图发送到ThingsBoard Dashboard。

Step 2. 在Dashboard上创建新Alias

  1. 命名Alias（记住名称以备后用）。
  2. 开启”Resolve as multiple entities”。
  3. Filter Type选择”Entity list”。
  4. 在Entity Type中选择可通过行点击选择的实体类型。
  5. 选择初始显示的默认实体。

image

Step 3. 在Trendz View中配置Action

  1. Action source选择”On Row Click”。
  2. 为action命名。

  3. Action Type选择”Custom action”。

    image

  4. 编写自定义代码，将id写入此前创建的alias：
  • 查找alias： 
    1
2
3

    let entityAlias = 
Object.values(widgetContext.aliasController.entityAliases).find(el => el.alias 
=== "Selected entities");
  • Trendz view会在additionalParams中发送实体数组。将其转换为仅包含entity ID的数组，并赋给alias的entityList。 
    1
2
3
4
5
6

    if(entityAlias && additionalParams["entityIds"] && additionalParams["entityIds"].length) {
  let devices = additionalParams["entityIds"].map(entity => entity.entityId.id);
  entityAlias.filter.entityList = devices;

  widgetContext.updateAliases();    
}

下一步