您可开发一个Web可视化应用,用于展示和查询指定时间段中,设备上报的每小时内的最高温度。

操作步骤

  1. 物联网平台控制台左侧导航栏,单击IoT Studio > 应用开发
  2. 在开发工具模块,单击Web可视化开发
    Web应用
  3. 创建可视化Web应用。
    1. 可视化Web应用开发页面,单击空白应用区域。
      创建可视化Web应用
    2. 新建Web应用对话框中,设置应用基本信息,单击确认
      新建Web应用
      参数 描述
      应用名称 设置应用名称(例如:茶园监控大屏)。支持中文汉字、英文大小写字母、数字、下划线(_)、连接号(-)和英文圆括号(());必须以中文汉字、英文字母或数字开头;长度不超过30个字符(一个中文汉字算一个字符)。
      所属项目 选择已创建项目:茶园监控方案
      描述 描述该应用。长度不超过100字符(一个中文汉字算一个字符)。
  4. 配置应用页面和标题。
    1. 设置页面背景和分辨率,可自定义;配置一个矩形组件,作为其他组件的背景。更多详细配置请参见编辑页面矩形
      矩形组件
    2. 配置一个文字组件,用于展示标题(例如:茶园温度检测)。详细配置请参见文字
      文字标题
  5. 配置选择设备的下拉框。
    1. 配置一个文字组件,作为下拉框的标题。
    2. 添加一个下拉框组件,配置其样式。下拉框中,显示设备名称。详细配置请参见下拉框
      参数 说明
      列表内容 选择为设备,表示下拉框中展示设备名称。
      选择产品 选择设备所属的产品。本案例选择:温度检测器。下拉框中,展示该产品下的设备名称。
      默认值 可选设置。指定选项或始终选择列表第一项为默认项。
      下拉框配置
    3. 选择配置栏中的交互,单击新增交互
    4. 选择事件为值改变;动作为赋值给变量,单击管理变量
    5. 单击新增变量,新增一个名称为DeviceName的变量。
      新增变量
    6. 返回交互页面,单击配置 > 赋值,选择value,赋值给变量DeviceName
      赋值
    7. 单击确定,完成交互动作配置。
  6. 配置时间组件,用于设置待查询数据所属的起始时间。
    1. 配置一个文字组件,作为时间组件的标题。
    2. 配置时间组件样式。时间单位选择为。详细配置请参见时间
      时间组件
    3. 配置交互动作。
      创建一个变量startTime,并配置通过值改变事件,触发交互动作,赋值给变量。详细操作指导请参见步骤:配置选择设备的下拉框
  7. 参照上一步骤,再配置一个时间组件,用于设置待查询数据所属的结束时间,并配置交互动作。
    交互动作:值改变事件,触发交互动作,赋值给变量endTime事件组件
  8. 配置一个折线图组件,用于展示温度数据。
    下文有关折线图组件的详细配置,请参见折线图
    1. 配置一个文字组件,作为折线图组件的标题。
    2. 添加折线图组件,调整组件在页面的位置。
    3. 配置折线图组件的数据源为已创建的HTTP接口(例如:获取温度数据),请求参数值设置为前面创建的变量。接口详情请参见开发获取温度数据的服务
      说明 如果接口返回数据不满足组件的数据格式要求,需将其转换为组件需要的数据格式。转换方法请参见数据过滤器
      折线图数据
    4. 为折线图配置展示数据,完成配置。
      您可根据实际需要配置折线图的展示样式。展示温度
    5. 为结束时间的组件,配置交互动作2:值改变事件,触发交互动作,刷新折线图组件。
      刷新组件
  9. 单击顶部栏中的保存按钮,保存应用配置。

执行结果

  1. 单击顶部栏中的预览按钮,预览应用。
  2. 单击发布按钮,发布应用。