本文以根据通用设备运维大屏模板创建大屏为例,为您演示使用大屏组件模板开发大屏应用的方法。

前提条件

参考以下操作完成Web应用创建。
  1. 创建普通项目
  2. 创建Web应用

步骤一:创建模板大屏

大屏组件有如下两个大屏模板:

  • 通用设备运维大屏:各组件展示的数据均为动态数据源的数据分析API接口(官方提供的物联网数据分析服务接口)。建议使用该模板默认设置的接口,如果有指定需求,也可修改组件数据源配置。
  • 智能生活运维大屏:部分组件展示的数据为静态数据源,可根据实际需求修改组件的数据源配置。
  • 智能温室监控大屏:各组件展示数据均为静态数据源,支持修改组件的数据源配置。
  1. 在Web可视化应用编辑页面的组件列表中拖拽一个大屏组件到画布,并选择通用设备运维大屏,单击根据模板新建
    说明 如果选择新建空白大屏,单击确定,可创建一个空白大屏组件。
    添加大屏组件模板
    在Web可视化编辑页面的画布中显示一款设计精良且满足展示设备运维相关数据功能的模板。大屏模板展示
  2. 可选:调整大屏模板显示位置和比例。

步骤二:配置组件数据

下文以数据分析API数据源为例,修改轮播列表柱状图组件的数据源,降序显示当前物联网账号下所有产品名称及产品包含设备数量。

  1. 选中Web可视化应用编辑页面中画布上的大屏组件,单击右侧样式栏的编辑大屏
  2. 在新开的IoT大屏编辑|编辑器页面,设置组件数据源。
    大屏编辑器
  3. 在数据分析服务中创建数据分析API。
    1. 物联网平台控制台,选择数据分析
    2. 在顶部导航栏上选择分析透视,单击SQL分析页签,进入SQL分析列表页。
    3. 单击新建SQL分析,创建SQL分析任务。
    4. 通过产品表和设备表,创建API服务并发布,使其返回产品名称及其设备数量(counts)。
      更多详细指导操作请参见SQL分析API服务
  4. 可选:配置数据分析API数据源。
    1. IoT大屏编辑|编辑器页面,选中通用设备运维大屏右上方设备品类详情下的轮播列表柱状图组件,并选择数据源配置页签。
      选择组件
    2. 根据已创建的数据分析API返回数据的字段,设置字段映射关系。
      字段映射
    3. 单击配置数据源
    4. 设置数据源配置面板,选择数据分析API数据源类型,并选择已创建好的API(例如:getProAll)。
      选择数据分析API
    5. 关闭设置数据源配置面板。
    6. 查看数据响应结果及组件显示。
      数据显示效果
    您可参考以上步骤,为各个组件配置数据源,完成大屏数据的展示。