FVS大屏支持的JS事件说明

适用场景：安装了「FVS大屏编辑模式」插件的用户，可参考本文了解 FVS 模板的相关功能。

注：不支持移动端。

1.1 版本

1.2 功能简介

FVS 大屏模板中支持使用 JavaScript 代码触发联动、跳转等交互效果。

本文主要介绍支持使用 JavaScript 代码的几种事件类型，具体的 JS 接口请参见：FVS大屏JS接口汇总 。

2.1 页面加载结束事件

在 FVS 大屏编辑界面，点击顶部菜单栏「模板>页面加载结束事件」，支持输入 JavaScript 代码，对整个 FVS 大屏模板生效。

2.2 初始化后事件

「初始化后事件」为 V1.5.0 版本插件新增的事件类型，仅 表格组件 和所有 控件组件 支持初始化后事件。

表格组件的「初始化后事件」对应 V1.5.0 版本之前的插件中，表格组件编辑界面顶部菜单栏「模板」中的「表格加载结束事件」。

如下图所示：

2.3 编辑结束事件

「编辑结束事件」为 V1.5.0 版本插件新增的事件类型，仅「文本框控件、日期时间控件、下拉框控件、下拉复选框控件」支持编辑结束事件。

2.4 点击事件

2.4.1 除控件外的其他组件

选中单个组件，点击配置栏「交互>点击事件」，支持新增 JavaScript 类型的点击事件。事件在点击这个组件/组件内指定内容时生效。

注：以下组件不支持点击事件：

富文本组件、表格组件、轮播器组件、网页框组件、本地视频组件、本地监控组件

轮播饼图、轮播夜光仪表盘、水球图、像素点图、轮播闪烁指标卡、轮播电子指标卡、轮播目录齿轮图、轮播三维组合地图、轮播GIS点地图、轮播条形图、弧形柱形图、粒子计数器、三维流向地球、时间齿轮

2.4.2 控件组件

V1.5.0 版本插件新增控件以及控件事件，仅「单选按钮组控件、复选按钮组控件」支持点击事件，且点击事件仅支持使用 JavaScript 代码。如下图所示：

2.5 轮播事件

选中单个组件，点击配置栏「交互>轮播设置」，支持新增 JavaScript 类型的轮播事件。事件在这个组件/组件内指定内容轮播时生效。

注：仅以下组件支持 JavaScript 类型的轮播事件：

场景地图、轮播器组件、电子智慧树图、模型智慧树图、轮播饼图、轮播夜光仪表盘、水球图、像素点图、轮播闪烁指标卡、轮播电子指标卡、轮播目录齿轮图、轮播三维组合地图、轮播GIS点地图

3.1 调用接口的方法

在使用 FineReport 设计器其他报表类型时，调用全局接口一般使用 FR.xxx ，调用组件接口一般使用 _g.xxx 。

但是在 FVS 大屏报表中，调用接口的方式统一为 duchamp.xxx 。

3.2 图表支持的接口

在 FVS 大屏报表中，图表支持的接口暂时只有 openAutoTooltip() ，即开启图表数据点提示轮播。

详情请参见文档：FVS基础图表实现数据点提示轮播 。

代码示例如下：

duchamp.on("storychange", (current) => {
  if (current === "页面2") {
    duchamp.getWidgetByName("组件1").openAutoTooltip();
  }
});

3.3 JS脚本中 document 的用法

在 FVS 大屏报表中，不支持直接使用 document 的 API ，也不建议使用 document ，尤其不能使用 document 取 fvs 页面内部元素，后续升级无法保证兼容。

若一定要使用，需在 JavaScript 代码前加上 "use document"; 。

例如当符合某特定条件时，比如某参数值>100，触发声音提示。JavaScript 代码示例如下：

"use document";
// 创建⼀个 audio 标签⽤于播放声⾳
const audio = document.createElement("audio");
// 指定⼀个 mp3 ⽂件，⽤来播放此 mp3 ⽂件。
audio.src = "/webroot/help/5196.mp3";
audio.loop = true;// 设置为循环播放
document.body.appendChild(audio);// 将标签添加到⻚⾯上，否则⽆法播放。
// 创建⼀个定时循环，周期为 2 秒
const interval = setInterval(() => {
 // 获取fvs⻚⾯中名字叫 组件1 的组件
 const widget = duchamp.getWidgetByName("组件1");
 // 判断这个组件的参数abc 的值是否是⼤于100，如果⼤于100
 if (widget.getParameters("abc") > 100) {
 audio.play();// 开始播放
 clearInterval(interval);// 停⽌定时循环
 }
}, 2000);