反馈已提交

网络繁忙

FVS大屏支持的JS事件说明

  • 文档创建者:Carly
  • 编辑次数:14次
  • 最近更新:Alicehyy 于 2023-01-13
  • 1. 概述

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

    注:不支持移动端。

    1.1 版本

    报表服务器版本
    JAR包插件版本功能变动
    11.0.6-V1.5.0
    • 新增六类「控件」组件,新增控件支持的事件与接口

    • 表格内的「表格加载结束事件」变更为组件交互属性中的「初始化后事件」

    11.02021-11-15V1.0.0
    -

    1.2 功能简介

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

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

    2. 事件类型

    2.1 页面加载结束事件

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

    Snag_47932c8b.png

    2.2 初始化后事件

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

    Snag_47ae5e94.png

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

    如下图所示:

    1653457238395165.png

    2.3 编辑结束事件

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

    Snag_47b2d9cc.png

    2.4 点击事件

    2.4.1 除控件外的其他组件

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

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

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

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

    Snag_47a3dd4f.png

    2.4.2 控件组件

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

    Snag_486d0f3b.png

    2.5 轮播事件

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

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

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

    Snag_479be0f0.png

    3. 注意事项

    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);


    附件列表


    主题: FVS大屏编辑模式插件
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭