第四步：在低代码设计器中绑定并呈现

DTS数据孪生架构提供快速接入查看DTS实体数据的平台功能低代码设计器，详细可视化功能可查看《BigView低代码设计器教程》。另一种方式是经过订阅管理将向DTS订阅实体的属性变化和事件发生的数据，订阅端收到数据之后自行进行可视化处理便能对设备进行实时数据监控。示例以查看温度传感器的属性数据为例。

1. 登录低代码设计器；
2. 进入数据集模块，选择新建一个“实体属性数据集”；
3. 输入数据集名称为“温湿度传感器属性数据集”，选择温湿度传感器—>温湿度传感器1751884372作为实体对象，获取此实体的属性数据；
4. 点击解析并运行，在数据预览区查看请求结果；
5. 编写脚本，从请求结果中获取需要的数据内容；

示例脚本

const input=resp.info;
// 提取并重组数据
const resultArray = input.payload.map(item => ({
  deviceId: input.deviceId,       // 从顶层取deviceId
  deviceName: input.deviceName,   // 从顶层取deviceName
  propertyId: item.propertyId,
  propertyIdentifier: item.propertyIdentifier,
  propertyName: item.propertyName,
  propertyValue: item.propertyValue
}));
return resultArray

示例数据预览效果

1. 保存数据集。
2. 进入布局管理模块，选择新建一个布局，输入名称为“温湿度传感器”；
3. 布局创建完成后，选择设计布局；
4. 在设计器中，拖拽文本组件到画布中；
5. 设置文本组件的数据集为“温湿度传感器属性数据集”，显示字段 ‘DeviceName’
6. 拖拽多个文本组件用于显示温湿度和电量属性，分别设置文本组件的数据源为“表达式”，使用表达式从数据集中获取数据。

示例表达式

return dataset['温湿度传感器_ZKzhDxZG'].find(item => item.propertyName === "当前温度").propertyValue + "℃"