合作伙伴工作台
注册

数据源配置

Web应用将组件拖动至画布后,点击数据源配置按钮,可对部分组件进行数据源配置。数据源的获取有两种方式,一种是从设备获取,即将设备上报的属性和事件作为组件的数据源展示;一种是从接口获取,即自定义接口,从接口获取结果作为组件的数据源展示。


3.3.2.1. 数据源-设备


组件数据源选择为设备,将设备上报的属性数据和事件数据作为该组件的数据源。

在Web可视化编辑页面拖入待配置的组件,例如文字组件,单击右侧样式中文字内容提交框右侧的数据源配置按钮,在数据源配置面板,选择设备数据源进行配置。


数据源-设备                

说明                

选择数据源                

选择设备。                

实时刷新                

配置数据源后,设置打开,实现设备数据实时刷新。                

产品                

选择该项目下关联的产品。若未关联过产品,可点击左下角产品管理,进入项目详情-产品页,进行关联或创建产品。                

设备                

选择指定设备,为该项目下已经关联过产品的设备。若未关联过设备,可点击左下角设备管理,进入项目详情-设备页,进行关联或创建设备。                

注:若未有真实设备连接平台,则需使用虚拟设备,通过在线调试上报数据;若已有真实设备连接平台,则使用真实设备上报的数据。                

数据项                

设置使用单个属性的数值作为数据项。                

属性                

选择已关联的设备的单一属性作为数据源,可将鼠标移至提示按钮查看该组件支持设备属性的类型。                

格式参考                

点击格式参考,可查看组件支持的数据格式。                

验证数据格式                

点击验证数据格式,可验证当前数据是否符合所支持的数据格式。验证成功,则提示:数据验证格式成功,失败则提示详细错误信息。                

案列:在文字组件中显示“智能空调”产品下,设备“智能空调001”的当前设定温度。

步骤一:点击右侧样式中“文字内容”右侧的数据源配置按钮

步骤二:选择数据源:设备->选择产品:智能空调->指定设备:智能空调001->选择属性:设定温度->保存

注:点击属性右侧提示按钮,该组件支持以下类型的设备属性:整数、单精度数字、双精度数字、字符串。


3.3.2.2. 数据源-接口

组件数据源选择为接口时,可将接口返回结果设置为组件展示的数据。目前支持的接口来源有自定义接口和项目服务下的通用能力接口。

在Web可视化编辑页面的画布中,选中待配置的组件,例如文字组件,单击右侧样式中文字内容提交框右侧的数据源配置按钮,选择接口数据源进行配置。


数据源-接口                

说明                

选择数据源                

选择接口。                

接口来源                

自定义接口:调用第三方接口,将返回数据作为组件数据源。                

项目服务:调用当前项目下所绑定的通用能力组件,将返回数据作为组件数据源。                

请求方式                

有get/post两种方式。                

请求地址                

输入自定义接口的请求地址。                

注:接口返回的数据必须是JSON格式,请求参数必须是JSON格式                

请求参数                

静态参数在编辑窗口{}内填入键值对,格式需为标准的JSON格式                

动态参数:点击添加参数,填入参数键名称,选择参数值的数据来源。                

请求参数-返回结果                

点击获取结果按钮,获取返回接口调用的结果。                

数据过滤脚本                

对接口返回的数据进行过滤,提供模板有:空白脚本、数值转换范例、饼图数据范例、二维数组范例、颜色设定范例。参考数据过滤器。                

处理后结果                

用户根据需求,勾选是否对接口返回结果进行过滤,编辑过滤脚本,点击获取结果按钮,获取返回过滤处理后的结果。                

定时刷新                

如果不勾选,数据将不会自动更新。                

案例一:接口来源于自定义接口,在文字组件中展示自定义接口中的信息“Hello world!”

步骤一:点击右侧样式中“文字内容”右侧的数据源配置按钮

步骤二:选择数据源:接口->接口来源:自定义接口->请求方式:get->请求地址:http://getman.cn/mock/route/to/demo

步骤三:url参数:静态参数


步骤四:数据过滤


步骤五:定时刷新:5秒->保存

案例二:接口来源项目服务:在文字组件中展示项目下所有产品中在线的设备数量。

步骤一:点击右侧样式中“文字内容”右侧的数据源配置按钮

步骤二:选择数据源:接口->接口来源:项目服务->选择能力:运营统计->选择api:项目下所有产品(或某一产品)的设备在线/离线数量->选择版本:1.0.0V

步骤三:url参数:静态参数

设置静态参数前,通过项目管理下进入能力点击“调试”,根据请求和返回示例进行参数调试。


步骤四:数据过滤脚本

根据组件静态展示的数据格式,编写JS脚本过滤出所需的数据格式。


步骤五:定时刷新:5秒->保存

3.3.2.3. 静态数据

静态数据一般不会随运行而变化,通常作为数据过滤格式的参考或静态展示。

注:不同组件数据源要求格式不同,静态数据需参考系统给出的案例编写。

案例:折线图的静态数据

3.3.2.4 数据过滤器

数据过滤器用于过滤出数据源中指定的数据,通过数据过滤脚本可以将接自己定义接口和项目服务能力接口返回的数据转换成您所需要的内容,并展示在Web可视化组件上。

系统提供四种常用的导入结构示例代码

结构类型                

示例代码                

数值转换                

function(e){var t=Math.round(e.value)+e.unit;return t}                

饼图数据                

function(e){var newdata=e.data let newObj = {section:'section1',angle:'angle1',data : newdata}return newObj}                

二维数组                

function(e){returne.map((function(e){return[e.month,e.seriesValue1,e.seriesValue2]}))}                

颜色设定                

function(e){var t=100,n=1,i=(e-n)/(t-n)*255;return{r:0,g:0,b:i,a:1}}                

案例:将温度返回值26.6,用数值转换四舍五入成27


这篇文档是否帮助您解决了问题?
如果您愿意进一步帮助我们改进文档 ,请留下您的联系方式。