最新历史版本 :JS实现三维组件传参仅刷新数据 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

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

1.1 版本

报表服务器版本
插件版本功能变动
11.0.16V1.16.0新增 refreshData 接口
11.0.16V1.17.1refreshData 接口支持 Unity 组件

1.2 应用场景

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

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

3B94F01B-1528-4F86-BF5B-8BDA4A09991C.GIF

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

注:refresh 支持所有组件,refreshData 仅支持三维组件 。

88F0FBCC-0D16-42A2-A9D3-06D337DDF2FF.GIF

1.3 实现思路

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

注:不支持移动端。

2. 示例编辑

2.1 准备模板

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

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

数据连接如下图所示:

Snag_a5f2ac93.png

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

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

2.2 标题组件传参示例

2.2.1 添加标题组件

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

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

1.png

2.2.2 设置 JavaScript 事件

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

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

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

2.png

2.3 下拉框控件传参示例

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

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

2.3.1 添加下拉框控件

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

3.png

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

4.png

2.3.2 设置 JavaScript 事件

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

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

5.png

2.4 效果预览

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

5F0714CD-2D7C-4E72-BA92-9AB6BAFDD9E5.GIF

2.5 拓展:监控刷新示例

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

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

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

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

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

6.png

3. 模板下载编辑

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