JS实现三维组件传参仅刷新数据

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 应用场景

在 FVS 模板中，若使用三维组件本身的「交互>监控刷新」功能，或使用 refresh 接口传参并刷新三维组件，三维组件均整体刷新。

即如果模型有动画或预览时视角变化，刷新后模型动画会重新开始，视角会恢复原样。如下图所示：

在 V1.16.0 及之后的版本，可使用 refreshData 接口传参给三维组件，实现仅刷新数据。效果如下图所示：

注：refresh 支持所有组件，refreshData 仅支持三维组件 。

1.3 实现思路

通过添加 JavaScript 事件，使用 refreshData() 实现仅刷新三维组件数据。

注：不支持移动端。

2.1 准备模板

本文示例完整模板资源来源于 智慧风电监控大屏 。本文示例文件请提前下载：风机测试.zip  。

将下载的「智慧风电.db」数据库文件放在工程的 %FR_HOME%\webapps\webroot\help 文件夹下，并完成对应的数据连接，可参考文档 [设计器]JDBC连接数据库 。

数据连接如下图所示：

将下载的「风机传参刷新数据测试.fvs」模板文件放置到工程的 %FR_HOME%\webapps\webroot\WEB-INF\reportlets 路径下。

该模板已经设置好含有参数的 数据库查询 和 自定义模型 组件，本文将要在此基础上完成以下设置。

2.2 标题组件传参示例

2.2.1 添加标题组件

添加一个「标题组件」到画布中，设置标题内容为 F04 。如下图所示：

注：F04 表示风机的编号，与模型绑定的数据适配。

2.2.2 设置 JavaScript 事件

给标题组件添加一个 JavaScript 点击事件，JavaScript 代码如下：

var a=duchamp.getWidgetByName("标题1_页面1").getValue();  //获取标题组件的值
duchamp.getWidgetByName("自定义模型").refreshData({FJ:a});  //将获取到的值作为参数 FJ 的值传递给自定义模型组件并刷新数据

注：仅在 V1.16.0 版本及之后的插件中，标题组件支持使用 getValue 获取组件值。

2.3 下拉框控件传参示例

使用控件传参时，若控件名称与参数名称 FJ 一致，该控件直接表示该参数，无需 JS 传参即可联动使用到 FJ 参数的组件，整个组件重新加载刷新数据。

所以要实现仅刷新数据，需要将控件名称设置为与参数不一致，再使用 JS 传参刷新。

2.3.1 添加下拉框控件

1）添加一个下拉框控件到画布中，设置控件名称为「下拉框」。如下图所示：

2）设置控件数据字典为「数据库表」，选择「智慧风电」数据库中的「风机发电统计」表中的「风机」字段；设置默认值为自定义字符串 F01 。如下图所示：

2.3.2 设置 JavaScript 事件

给下拉框控件添加一个「编辑结束」事件，输入 JavaScript 代码：

var a=duchamp.getWidgetByName("下拉框").getValue();  //获取下拉框组件的值
duchamp.getWidgetByName("自定义模型").refreshData({FJ:a});  //将获取到的值作为参数 FJ 的值传递给自定义模型组件并刷新数据

2.4 效果预览

点击右上角「保存」，再点击「预览」，效果如下图所示：

2.5 拓展：监控刷新示例

上述示例是通过点击事件实现的传参及刷新。但若存在数据后台变化，三维组件需实现监控刷新时，该如何设置呢？

此时可添加「模板>页面加载结束事件」，输入 JavaScript 代码如下：

setInterval(() => {
    duchamp.getWidgetByName("自定义模型").refreshData();
    }, 3000); //每隔3秒刷新一次数据

若存在多个分页，需要指定某个分页中三维组件实现监控刷新时，JavaScript 代码如下：

duchamp.on("storychange", (current) => {
  if (current === "页面1") {
    setInterval(() => {
    duchamp.getWidgetByName("自定义模型").refreshData();
    }, 3000);
  }
});

点击下载模板：风机传参刷新数据测试.fvs