写在前面： 在最新的样式中，数据源和属性合并了成数据，以前的图纸数据会做转换处理。如果之前创建有多条数据源，默认会将之前的属性列表放到第一条数据源下面。如果没有建立一条数据源，之前的属性将不会展示到页面，需要手动创建一条数据源，切换到其他tab（系统资源、我的资源、结构）再切换回数据即可同步回之前的属性列表。 此次UI调整，不影响之前实时数据刷新。体验地址：https://v.le5le.com/

1.建立数据源及属性列表

① 鼠标移入“+”，根据业务需求，选择对应的通信方式，完成数据源配置后，点击确定。

（以http为例，填写官方测试地址（/api/device/data?mock=1））

【注意】https开头的网址，只支持https或wss开头的通信地址

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

http协议请求头/请求体支持配置动态参数，动态参数获取优先级：路径参数>本地存储(localStorage)>cookie

例如：

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

② 建立属性列表

这里方便快速上手，可以先下载Excel示例，再导入这个下载的Excel文件。（也可以点击新建属性，自定义创建属性。）

2.图元属性关联设备属性

什么是绑定变量？

绑定变量是指把图元的一个属性与设备数据点关联的一个过程。

① 选中图元，选择“数据”面板，鼠标移入“绑定变量”图标，点击。默认选择文字，方便数据展示。

（也可以根据自己的业务需求选择图元属性，去绑定设备属性变量。注意如果需要数据直接显示到页面，必须选择文字属性）

② 在绑定变量弹框中，勾选需要绑定的设备属性，点击确定。

③ 可以观察到，图元数据已经在做实时刷新了。

通信返回数据格式需要满足官方格式，格式如下：(注意：官方测试接口返回中有dataId是2d的老格式，大屏最新的格式是id！！！)

[{
    "id": "10-300", //变量名  推送的数据变量名和绑定的变量名是对应的
    "value": 48 //值
},
{
    "id": "data-0-1000",
    "value": 3640
},
{
    "id": "f-0.1-10",
    "value": 1.423326
},
//....
]

-----------------------------------------------------------------------分隔符
---------------------------------------------------------------------------------------------------------------------

以下为2025/02以前页面创建方式

1. 创建属性列表

① 左侧tab栏选择“数据”，选择“属性”项

② 这里方便快速上手，可以先下载Excel示例，再导入这个下载的Excel文件。（也可以点击新建属性，自定义创建属性。）

③ 可以点击“保存为我的属性列表”/“下载为Excel”方便下次使用。

2. 图元绑定设备属性（绑定变量）

什么是绑定变量？

绑定变量是指把图元的一个属性与设备数据点关联的一个过程。

① 选中图元，选择“数据”面板，鼠标移入“添加动态数据”，默认选择文字，方便数据展示。

（也可以根据自己的业务需求和图元属性，去给其他属性绑定变量。注意如果需要数据直接显示到页面，必须选择文字属性）

② 点击“绑定变量”图标，弹出对话框中，选择“绑定变量”标签页，勾选上述步骤建立的变量列表中的一项，点击确定完成变量绑定。

（其他图元的属性绑定变量也是一样的步骤。）

3. 建立数据源（数据获取）

① 数据-选择“数据源”，点击右上角“+”图标，添加通信配置。

② 根据业务需求，选择对应的通信方式，完成通信配置后，点击确定,建立通信。

选择http协议,可以用官方提供的测试地址测试（/api/device/data?mock=1）。

【注意】https开头的网址，只支持https或wss开头的通信地址

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

http协议请求头/请求体支持配置动态参数，动态参数获取优先级：路径参数>本地存储(localStorage)>cookie

例如：

{"Authorization": "Bearer ${token}"} //必须是json数据格式

可以勾选“同时保存到我的数据获取”，以便该通信配置下次直接使用。

通信返回数据格式：(注意：官方测试接口返回中有dataId是2d的老格式，大屏最新的格式是id！！！)

推送的数据变量名和绑定的变量名是对应的

[{
    "id": "10-300", //变量名  推送的数据变量名和绑定的变量名是对应的
    "value": 48 //值
},
{
    "id": "data-0-1000",
    "value": 3640
},
{
    "id": "f-0.1-10",
    "value": 1.423326
},
//....
]

③ 可以观察到页面开始实时动态数据变化。

-----------------------------------------------------------------------分隔符
---------------------------------------------------------------------------------------------------------------------

以下为老UI页面创建方式

1. 创建变量列表

① 顶部菜单栏点击“数据管理”，弹出框选择“变量列表”。

② 点击“新建变量”，添加三个变量。

③ 可以点击“保存为我的变量列表”/下载Excel文件，方便下次使用。

2. 图元绑定变量

什么是绑定变量？

绑定变量是指把图元的一个属性与设备数据点关联的一个过程。

① 选中图元，选择“数据”面板，鼠标移入“添加动态数据”，默认选择文字，方便数据展示。

也可以根据自己的业务需求和图元属性，去给其他属性绑定变量。

② 点击“绑定变量”图标，弹出对话框中，选择绑定变量标签页，勾选上述步骤建立的变量列表中的一项，点击确定完成变量绑定。

其他图元的属性绑定变量也是一样的步骤。

3. 建立数据通信（数据获取）

① 顶部菜单栏点击“数据管理”图标，切换到“数据获取”标签页，点击“添加数据获取”去配置通信。

② 根据业务需求，选择对应的通信方式，完成通信配置后，点击确定,建立通信。

选择http协议,可以用官方提供的测试地址测试（/api/device/data?mock=1）。

可以勾选“同时保存到我的数据获取”，以便该通信配置下次直接使用。

通信返回数据格式：

[{
    "id": "data-0-1000", //变量名
    "value": 648 //值
},
{
    "id": "data-100-10000",
    "value": 3640
},
{
    "id": "data-f10-37",
    "value": 31.423326
},
//....
]

③ 可以观察到页面开始实时动态数据变化。