本文档以时间器组件和通用标题之间联动查询组件，为您介绍使用蓝图编辑器功能通过时间戳参数联动页面内与时间戳相关的组件数据查询。

前提条件

准备好您的交互需求。

本案例的交互需求为：实现在页面上每隔3s动态显示当前时间戳的功能。

理解案例交互

当前案例实现需要用户将交互转成节点和边的关联关系，需要使用的组件有满足需求的事件和动作才能进行配置，否则就无法实现。
  • 组件：组件包含两种能力，事件抛出能力和动作执行能力。本案例使用了时间器和通用标题组件之间的联动。
    • 时间器：这个组件具备抛出当前时刻的能力。
    • 通用标题：属于被联动组件，具有接收数据并执行动作的能力。
  • 蓝图编辑器：通过运用逻辑节点编排的方式，将上游组件的交互/事件与下游组件的执行动作绑定，从而实现页面内组件间的交互联动。
    说明 蓝图编辑器配置完成后需要在预览页查看配置效果。

配置案例交互

  1. 参考画布编辑器添加组件，在画布编辑器页面搭建所需要的时间器和通用标题组件。
    添加组件
  2. 在画布编辑器内，配置时间器组件右侧配置面板，打开面板的定时回调设置，配置回调抛出间隔为3s抛出一次当前时间。
    配置时间器配置面板
  3. 在画布编辑器内，配置通用标题组件右侧数据面板，单击面板中的配置数据源，配置以数据库查询为例的样式，并编写SQL。如下图SQL内，开头的变量表示回调变量名，在真实的请求中会被替换掉，具体回调内容详情可参见DataV回调ID实现图表联动功能。
    配置数据库面板
  4. 单击画布编辑器图层栏内时间器和通用标题组件，右键选择导出到蓝图编辑器。
    导出到蓝图编辑器
  5. 在画布编辑器页面左上角，单击蓝图编辑器图标（蓝图编辑器图标），切换到蓝图编辑器配置页面。
  6. 在蓝图编辑器配置页面，将左侧节点栏内的时间器和通用标题节点拖至画布中。
  7. 将时间器的当时间变化时事件与通用标题的请求数据接口动作连线。
  8. 连线中会自动添加一个串行数据处理逻辑节点。
    具体操作方法请参见串行数据处理节点。
    最终连线的结果如下图所示。连线样式
  9. 配置画布中串行数据处理内的处理方法。
    1. 单击串行数据处理逻辑节点，进入右侧配置面板，选择面板内其他配置栏下方的处理方法，单击右侧箭头打开脚本编辑区域。
    2. 在脚本编辑区域，输入代码，完成后单击完成。
      当前处理方法的示例代码如下。 
      return {
  start_time:
    new Date(data.time).valueOf() - 60 * 1000, // 当前时间前 60s
  end_time:
    new Date(data.time).valueOf() // 当前时间
}
      1. 时间器组件在设置了定时触发后，每3s会抛出一次当时间变化时的事件，事件中包含time: 当前时间。
      2. 通用标题组件的请求数据接口动作接收到上游传过来的内容后，将上游内容比如 x: 1作为发起请求时的 query参数， 并发起请求。
      3. 串行数据处理节点负责将上游抛出的事件内容进行加工处理，传递给通用标题组件作为请求时的 query参数，也就是替换掉第二步操作中填写的:变量名。
  10. 处理方法配置完成后。
    1. 时间器组件的{time: "Mon Oct 28 2019 15:47:29 GMT+0800 (China Standard Time)"}传递给串行数据处理后变成{end_time: 1572248860098, start_time: 1572248800098} 传递给通用标题组件作为 %query; 参数并立即执行请求动作。
    2. 通用标题 执行sql查询之前，会将SELECT :start_time as value1, :end_time as value2替换为SELECT 1572248800098 as value1, 1572248860098 as value2，最终执行sql并返回结果到前端。
    3. 在编辑页调试时，可以在编辑页URL上添加query参数，比如http://datav.alibaba-inc.com/admin/screen/123456?start_time=1572248800098&end_time=1572248860098进行查询结果调试，最终展示结果以预览页为准。
    单击蓝图编辑器配置页面右上角的预览图标，预览交互效果。