数据接入

1. 支持的数据源

数据源	描述
HTTP/HTTPS	通过 HTTP 请求获取数据，支持 GET/POST 等方式
WebSocket	建立实时连接，接收实时数据推送
MQTT	订阅主题接收设备数据，适合物联网场景
ThingsBoard	无缝集成 ThingsBoard 平台，直接把平台数据展示到大屏

2. 数据源配置

MQTT / WebSocket / HTTP 配置流程

1. 点击 + 图标新建数据源
2. 选择对应的数据源类型（MQTT / WebSocket / HTTP）
3. 配置数据源地址
4. 配置数据过滤器

2.1 动态获取 Token

http 协议请求头/请求体支持配置动态参数，动态参数获取优先级：路径参数>本地存储(localStorage)>cookie。
http/websocket/mqtt URL 地址都支持动态参数 例如：/api/getdata?deviceId=${deviceId} ws://xxxx/$

{ "Authorization": "Bearer ${token}" } //必须是json数据格式  token是一个变量名，可以是aaa、bbb...
// 首先查看浏览器地址是否存在token=xxx ,
// 没有会查看localstorage里面是否有token这一项，
// 如果也没有，会查看cookie里面有无token这一项,
// 否则就是undefined

WARNING

https 开头的网址，只支持 https 或 wss 开头的通信地址 浏览器只支持 http(s)/ws(s)开头的协议（http 地址对应 ws 协议，https 地址对应 wss 协议）。mqtt 开头协议是 c/s 下使用的，不能用于浏览器。

ThingsBoard 配置流程

1. 点击 + 图标新建数据源
2. 选择 ThingsBoard 数据源类型
3. 配置数据源地址
4. 点击新建的 ThingsBoard 配置右侧的画笔图标
5. 配置数据订阅别名
6. 配置数据过滤器

无缝集成 ThingsBoard 平台，直接把平台数据展示到大屏。

TIP

如果把设计器集成到已有的项目中去，只要当前项目的缓存中存在 jwt_token，则无需配置 token
数据源使用了 websocket 来订阅 ThingsBoard 的数据，配置了数据源后，由于 websocket 创建连接以及数据返回需要时间，所以在过滤器中需等待几秒才能看到数据。

3. 数据过滤器

TIP

MQTT、HTTP、Websocket 的参数 e 的类型是字符串，需通过 JSON.parse 转换。 ThingsBoard 的参数 e 的类型是对象形式，无需转换，并且参数context的值为 null。

参数1： e 消息数据
参数2:  context:{
         meta2d: meta2d对象,
         type:通信类型,
         url:通信地址,
         topic:mqtt-topic mqtt 有，ws 和 http 是空字符串
        }

过滤器返回数据格式：

return [
  {
    id: "", //id的值必须唯一，用于数据源绑定的key
    label: "", // 用于回显字段的名称
    value: 0, // 数据，可以是任意格式
  },
];

WARNING

注意：过滤器返回的数据必须符合规范，否则无法正确显示数据，并且 id 的值具有唯一性

4. 数据绑定

图元属性绑定变量后，数据发生变化，图元属性响应数据变化，达到数据驱动图元。

绑定属性说明

TIP

绑定的属性将和变更的数据保持一致，例如：这里绑定的属性为 X，当数据的值为 100，那么图元在画布的 X轴的位置就是 100

WARNING

注意：绑定变量后，数据变更才会触发图元的响应！！！

图元支持以下属性的数据绑定：

属性名称	描述	作用
自定义	支持绑定自定义属性	给图元的任意属性赋值以及自定义属性
X	绑定图元的 X 坐标位置	动态更改图元在画布 X 轴的位置
Y	绑定图元的 Y 坐标位置	动态更改图元在画布 Y 轴的位置
宽	绑定图元的宽度	动态更改图元宽度
高	绑定图元的高度	动态更改图元高度
显示	绑定图元的显示/隐藏状态	值为 false 隐藏，值为 true 显示，可实现动态显隐
文字	绑定图元显示的文本内容	动态改变图元文本内容
进度	绑定图元的进度值	改变进度条进度
状态	绑定图元的状态值	切换图元状态（需先设置图元状态），例如告警状态切换
旋转	绑定图元的旋转角度	旋转图元

5. 数据更新

轮询更新

定时请求数据源，获取最新数据。

实时更新

通过 WebSocket 或 MQTT、thingsboard 接收实时数据推送。

手动刷新

提供手动刷新功能，按需获取最新数据。