跳到主要内容

交互

事件: 触发交互的操作

  • 数字框、文本框、开关、下拉框、搜索、单选、多选、时间、时间范围
    • 值改变:输入、选择触发事件
  • 轮播图
    • 切换轮播图:点击轮播触发事件
      • 作用域:任一轮播图、某一张轮播图
  • Tab选项卡
    • 切换选项卡:点击选项卡触发事件
      • 作用域:任一选项卡、某一张轮播图
  • 其他组件
    • 点击:鼠标点击触发事件
    • 双击:鼠标双击触发事件
    • 移入:鼠标移入组件触发事件
    • 移出:鼠标移出组件触发事件

事件

动作: 实现交互的功能

主要用户页面组件之间交互

  • 打开链接
  • 刷新组件
  • 显示隐藏
  • 下发指标(画布上有配置下发指标组件才会显示)
  • 数据传输

交互

打开链接

主要作用为打开新页面,应用场景为:

  1. 自定义跳转页面的路径(比如:跳转至某度 并且 带入参数为某个组件的值)

以下图片设置为: 跳转至某度网页,并且附带参数名为data,值为数字框输入值

自定义参数

  1. 跳转到系统页面(比如:某个设备故障 点击后跳转至 设备 故障履历页面 或者 想要查看该设备历史数据 点击后跳转至该 设备 的设备履历页面(历史数据)

    • 设备页跳转至 当前设备 的系统页面(故障履历、设备履历)
    • 看板页需配置当前看板页组织下 模型设备,再选择需要跳转的系统页面(故障履历、设备履历)

系统页面

  1. 跳转至数据应用页面(比如:系统内 页面与页面之间可以相互跳转 )

    • 设备页跳转设备页(跳转当前设备页模型下其他 已发布 的设备页)
    • 看板页跳转设备页(需先配置 模型设备,再选择的设备页)
    • 设备页、看板页跳转看板页(跳转当前组织下已发布的看板页)
  2. 参数配置

    • 参数值来源
      • 固定值:输入内容
      • url:url上所带输入参数的值
      • 组件:画布上所选组件的值
      • 图表:只有 柱状图双Y轴线图折线图双Y柱线图饼图 才显示
        • 饼图:维度(点击饼图扇形的名称)、值(点击饼图扇形的值)
        • 其他:x轴(点击柱、线的x值)、y轴(当前图表y轴名称)、值(点击柱、线的y值)

参数配置

以下图片设置为: 跳转至设备页链接名称为炒菜机的页面

设备页

下图为 上方设备页点击跳转的页面

设备页2

  • 看板页

以下图片设置为:跳转至看板中名称为设备监控看板页面

看板页

刷新组件

主要作用为触发事件后,刷新选中的组件数据

以下图片设置为:点击按钮后,刷新数字框和文本框中的数据

刷新组件

显示与隐藏

主要作用为触发事件后,隐藏或者显示选中的组件

以下图片设置为: 点击按钮后,隐藏组件数字框

显示与隐藏

指标下发

主要作用为触发事件后,给设备下发参数。详情查看 下发案例

指标下发

数据传输

数据传输主要包含设备下发参数来源于excel文件、设备下发参数来源于外部接口、设备下发参数来源于组件、 文件流下载、静态文件下载、数据获取和处理等功能,该功能只适用于按钮开关这两种组件,其他组件暂不支持。
必要的前置设置:在模型应用中指定物模型添加三方应用集成

下面分场景介绍组件配置及使用步骤:

以下配置都是以设备页作为案例说明,如果涉及到设备参数下发,看板页的配置在设备页的基础上增加模型设备即可。

场景一

根据系统提供的excel模版进行数据编辑,然后上传该文件,进行设备参数下发

参数配置步骤

  1. 从左侧组件库中选择按钮组件

    按钮

  2. 选中组件,选择右侧交互

    交互

  3. 依次按图片中的序号进行参数项配置

    参数项配置

参数下发步骤

  1. 下载excel模板
    发布出来的数据应用页面,将鼠标移到按钮上,页面会显示下载模板按钮,点击下载模板,把模板下载下来

模板下载

  1. 编辑excel

模板数据

将下载好的excel模板进行编辑,当前excel模板中的数据样例ixix3下发的参数为数组,ix2为单值,用户可根据实际需求进行配置。

注:行内连续两个空单元格则系统认为当前参数的值已读取结束,即 该行后续单元格不再读取

最终下发的数据为:

{
"ix": [
10,
20,
30
],
"ix2": 20,
"ix3": [
31,
41,
51
]
}
  1. 上传excel

选择编辑好的excel文件,页面会显示excel中的数据内容,点击确定

模板数据

场景二

用户提供的excel数据不符合标准格式,需要定制外部接口进行数据解析,然后进行设备参数下发

参数配置步骤

  1. 从左侧组件库中选择按钮组件

    按钮

  2. 选中组件,选择右侧交互

    交互

  3. 依次按图片中的序号进行参数项配置

    参数中的路径指的是要定制的外部接口,具体配置,请参考 外部数据源配置
    参数项配置

参数下发步骤

上传excel

选择编辑好的excel文件,如果excel文件内容解析无误,参数就会下发到设备

场景三

要下发的参数来源于外部接口,进行设备参数下发

参数配置步骤

  1. 从左侧组件库中选择按钮组件

    按钮

  2. 选中组件,选择右侧交互

    交互

  3. 依次按图片中的序号进行参数项配置

    参数中的路径指的是参数来源于外部的数据接口,具体配置,请参考 外部数据源配置
    提供的外部数据接口返回的数据必须是json对象,下发的数据可以为数组或者单值

    数据样例:

    {
    "ix1": [
    10,
    20,
    30
    ],
    "ix2": 20,
    "ix3": [
    31,
    41,
    51
    ]
    }

    参数项配置

参数下发

点击配置好的下发按钮,页面会显示接口返回的数据内容,点击确定

模板数据

场景四

要下发的参数来源于外部接口,但是获取到的数据不符合标准格式,需要另外一个外部接口来进行再次处理,然后进行设备参数下发

参数配置步骤

  1. 从左侧组件库中选择按钮组件

    按钮

  2. 选中组件,选择右侧交互

    交互

  3. 依次按图片中的序号进行参数项配置

    序号4路径指的是参数来源于外部的数据接口,具体配置,请参考 外部数据源配置
    序号8路径指的是要处理数据的外部接口,具体配置,请参考 外部数据源配置
    ⚠️注意:处理的外部接口返回的数据必须是json对象,下发的数据可以为数组或者单值

    数据样例:

    {
    "ix1": [
    10,
    20,
    30
    ],
    "ix2": 20,
    "ix3": [
    31,
    41,
    51
    ]
    }

    参数项配置

参数下发

点击配置好的下发按钮,页面会显示接口返回的数据内容,点击确定

模板数据

场景五

要下载的文件流来源于外部接口

参数配置步骤

  1. 从左侧组件库中选择按钮组件

    按钮

  2. 选中组件,选择右侧交互

    交互

  3. 依次按图片中的序号进行参数项配置

    参数中的路径指文件流的数据接口,具体配置,请参考 外部数据源配置
    ⚠️注意:返回的数据接口必须是文件流

    参数项配置

定制文件下载

点击配置好的文件下载按钮

场景六

要下载的静态文件地址来源于外部数据源,比如sop作业指导书放在文件服务器上进行下载

参数配置步骤

  1. 从左侧组件库中选择按钮组件

    按钮

  2. 选中组件,选择右侧交互

    交互

  3. 依次按图片中的序号进行参数项配置

    参数中的路径指静态文件的外部数据源地址,具体配置,请参考 外部数据源配置

    参数项配置

静态文件下载

点击配置好的文件下载按钮

场景七

接口A获取到的数据,需要通过接口B来进行传递

参数配置步骤

  1. 从左侧组件库中选择按钮组件

    按钮

  2. 选中组件,选择右侧交互

    交互

  3. 依次按图片中的序号进行参数项配置

    序号4路径指接口A获取数据接口,具体配置,请参考 外部数据源配置
    序号7路径指接口B处理数据接口,具体配置,请参考 外部数据源配置

    参数项配置

使用步骤

点击配置好的定制传递按钮

场景八

设备要下发的数据来源于组件数据

参数配置步骤

  1. 从左侧组件库中选择按钮组件

    按钮

  2. 选中组件,选择右侧交互

    交互

  3. 依次按图片中的序号进行参数项配置

    参数项配置

    说明:参数中的参数配置,参数名指要下发的参数名称,参数值指要下发的参数内容,选择对应的组件名称,参数可新增、修改、删除 参数项配置

参数下发

点击配置好的参数下发按钮

场景九

用户提供的文件通过外部接口进行文件传递

参数配置步骤

  1. 从左侧组件库中选择按钮组件

    按钮

  2. 选中组件,选择右侧交互

    交互

  3. 依次按图片中的序号进行参数项配置

    参数中的路径指的是要定制的外部接口,具体配置,请参考 外部数据源配置
    参数项配置

使用步骤

点击配置好的定制传递按钮,传递选中的excel文件