反馈已提交

网络繁忙

FVS页面接口

  • 文档创建者:Alicehyy
  • 历史版本:30
  • 最近更新:Alicehyy 于 2024-03-18
  • 适用场景:安装了「FineVis数据可视化」插件的用户,可参考本文了解 FineVis 的相关功能。


    版本

    报表服务器版本插件版本功能变动
    11.0V1.0.0最低版本要求
    11.0.22V2.5.0

    新增接口 getAllPages 


    查看历史版本更新
    报表服务器版本插件版本功能变动
    11.0.7
    V1.8.0

    支持接口 this,可获取当前的组件对象,获取后可以使用组件的方法和属性

    支持接口 getAllWidgets,可获取当前页所有组件

    11.0.9V1.9.1refresh 接口支持传参
    11.0.9V1.14.1新增设置分页切换按钮显隐状态接口 setPageButtonDisplayPolicy 
    11.0.16V1.18.0新增关闭页面全屏接口 exitFullscreen
    11.0.22V2.2.1新增全局传参接口 linkageGlobal
    11.0.22V2.4.0新增暂停继续页面切换接口 pauseRollPlay、continueRollPlay
    11.0.22V2.4.1

    FVS 统一模板分页、表格组件分页、Tab组件标签页相关 API 接

    详情请参见本文 获取页、操作页 相关内容

    兼容说明

    V2.4.1 版本对模板分页、表格组件分页、Tab组件标签页相关 API 接口进行了统一设计,新接口的页索引统一从 1 开始。

    详细说明参见表格:

    类型
    旧接口新接口
    模板分页

    url 后缀参数 page=x ,x 从 0 开始

    page=0 表示第一页

    url 后缀参数改为 page_number=x , x 从 1 开始

    page_number=1 表示第一页

    表格分页表格分页索引从 1 开始,表示第一页表格分页索引从 1 开始,表示第一页
    Tab标签页标签页索引从 0 开始,表示第一页标签页索引从 1 开始,表示第一页

    this

    方法this获取当前的组件对象,获取后可以使用组件的方法和属性
         参数--
       返回值object 当前组件对象
         示例

    示例1:获取当前控件组件的实际值

    this.getValue();

    示例2:设置当前控件不可见

    this.setVisible(false);

    示例3:清空当前控件的值

    this.reset();


      应用示例

    -

        移动端支持移动端

    getAllWidgets

    方法getAllWidgets()获取当前页面中所有组件信息
         参数--
       返回值{ [key: string,value:object] }key 为组件名,value 为组件对象
         示例

    查看当前页面中所有的组件信息:

    duchamp.getAllWidgets();


      应用示例

    浏览器 F12 开发者工具查看 FVS 模板「页面1」中所有的组件信息:

    Snag_2e1342ab.png

       移动端支持移动端

    getWidgetByName

    方法getWidgetByName(name)获取当前页面中的某个组件
         参数name: string组件名称,字符串
       返回值object 组件对象
         示例

    示例:获取标题组件

    duchamp.getWidgetByName('标题组件1_页面1');


      应用示例

    -

        移动端支持移动端

    refresh

    方法refresh()触发组件刷新
         参数{para:"para"}参数名称:参数值
       返回值--
         示例

    示例1:触发「组件1」刷新

    duchamp.getWidgetByName("组件1").refresh();

    示例2:触发「柱形图」组件刷新并将地区华北作为参数传递给柱形图

    duchamp.getWidgetByName("柱形图").refresh({area:"华北"});

    注:给同一组件传多个参数时,写法如下

    duchamp.getWidgetByName("组件").refresh({a:"参数值",b:"参数值"});


      应用示例

    点击标题组件,触发「柱形图」组件刷新并将地区华北作为参数传递给柱形图

    点击可下载模板:refresh刷新组件.fvs

    EFD446D9-5766-4113-9B07-47249EC79F29.GIF

        移动端支持移动端

    trigger

    方法trigger()

    触发组件点击事件

    注:不支持三维组件和控件组件

         参数-

    -

       返回值--
         示例

    触发「组件1」的所有点击事件

    duchamp.getWidgetByName("组件1").trigger();


      应用示例

    -

        移动端支持移动端

    requestFullscreen

    方法requestFullscreen()触发页面全屏
         参数--
       返回值--
         示例

    示例:给标题组件添加点击 JavaScript 事件,触发页面全屏

    duchamp.requestFullscreen();


      应用示例

    -

        移动端不支持移动端

    exitFullscreen

    方法exitFullscreen()

    关闭页面全屏

    注:仅针对 requestFullscreen 接口触发的全屏,若使用按键 F11 触发全屏,则该接口无效

         参数--
       返回值--
         示例

    示例:给标题组件添加点击 JavaScript 事件,关闭页面全屏

    duchamp.exitFullscreen();


      应用示例

    -

        移动端不支持移动端

    reload

    方法reload()触发模板整体刷新
         参数--
       返回值--
         示例

    每两秒刷新一次页面

    setInterval(() => {    duchamp.reload();  }, 2 * 1000);


      应用示例

    V1.7.2 版本之前的插件,只能通过模板的「模板>页面加载结束事件」写 JavaScript 代码实现

    V1.7.2 及之后版本,可通过「模板定时刷新」功能设置,详情请参见:FVS模板定时刷新

        移动端支持移动端

    setPageButtonDisplayPolicy

    方法setPageButtonDisplayPolicy()设置多分页模板左下角切换分页按钮是否显示
         参数always/hover/never

    切换按钮的三种状态(默认为 always):

    • always:永远显示

    • hover:鼠标悬浮时显示

    • never:从不显示

       返回值--
         示例

    可添加以下代码在模板的「加载结束事件」中

    示例1:设置切换按钮永远显示

    duchamp.setPageButtonDisplayPolicy("always");

    示例2:设置切换按钮隐藏,鼠标悬浮时显示

    duchamp.setPageButtonDisplayPolicy("hover");

    示例3:设置切换按钮从不显示

    duchamp.setPageButtonDisplayPolicy("never");


      应用示例-
        移动端不支持移动端

    linkageGlobal

    方法linkageGlobal()参数全局联动
         参数{para:"para"}参数名称:参数值
       返回值--
         示例

    无需获取多个参数控件分别赋值,使用该接口即可实现全局参数联动,对所有分页生效

    示例:点击标题组件,将「华北」作为参数值,传递给模板内所有使用了参数 area 的组件

    duchamp.linkageGlobal({area:"华北"})

    注:传递多个参数时,写法如下

    duchamp.linkageGlobal({a:"参数值",b:"参数值"});


      应用示例

    点击下载模板:参数全局联动接口示例.fvs

    74115D50-CEC5-4DCB-94F9-236651F3D140.GIF

        移动端支持移动端

    pauseRollPlay

    方法pauseRollPlay()暂停页面自动切换
         参数--
       返回值--
         示例

    多分页模板开启自动切换页面时,暂停页面自动切换

    duchamp.pauseRollPlay();


      应用示例

    点击下载模板:JS实现暂停继续页面切换.fvs

    545EB5F5-ACAF-49BF-8B0A-39446929347D.GIF

        移动端不支持移动端

    continueRollPlay


    方法continueRollPlay()继续页面自动切换
         参数--
       返回值--
         示例

    多分页模板开启自动切换页面时,暂停页面自动切换后,继续页面自动切换

    duchamp.continueRollPlay();


      应用示例

    点击下载模板:JS实现暂停继续页面切换.fvs

    545EB5F5-ACAF-49BF-8B0A-39446929347D.GIF

        移动端不支持移动端



    注:以下获取页及操作页接口需使用 V2.4.1 及之后版本,V2.4.1 之前版本接口请参考 历史接口

    获取页

    getPage

    方法getPage()获取页
         参数value:page_number|name

    根据页索引或页名称获取页

    page_number:页索引,从 1 开始的正整数

    name:页名称,字符串

       返回值
      setVisible: (visible: boolean) => void,
      goto: (options?: { [key: string]: string }) => void,
      getName: () => string,
      getIndex: () => number,
      isVisible: () => boolean,
    }

    {

    visible:可见性

    options:跳转的页面对象

    name:页面名称

    number:页面索引,从 1 开始的正整数

    }

         示例

    示例1:在 FVS 模板中,获取「页面1

    duchamp.getPage("页面1");

    示例2:在 FVS 模板中,「表格1」组件设置了分页,获取「表格1」组件的分页1

    duchamp.getWidgetByName('表格1').getPage(1);

    示例3:在 FVS 模板中,获取「Tab1」组件第一个标签页

    duchamp.getWidgetByName('Tab1').getPage(1);


      应用示例

    -

        移动端支持移动端

    getPreviousPage

    方法getPreviousPage()获取上一页
         参数-

    -

       返回值
      setVisible: (visible: boolean) => void,
      goto: (options?: { [key: string]: string }) => void,
      getName: () => string,
      getIndex: () => number,
      isVisible: () => boolean,
    }

    {

    visible:可见性

    options:跳转的页面对象

    name:页面名称

    number:页面索引,从 1 开始的正整数

    }

         示例

    示例1:在 FVS 模板中,获取当前页的上一页

    duchamp.getPreviousPage();

    示例2:在 FVS 模板中,「表格1」组件设置了分页,获取「表格1」组件当前页的上一页

    duchamp.getWidgetByName('表格1').getPreviousPage();

    示例3:在 FVS 模板中,获取「Tab1」组件当前页的上一页

    duchamp.getWidgetByName('Tab1').getPreviousPage();


      应用示例-
        移动端支持移动端

    getNextPage

    方法getNextPage()获取下一页
         参数-

    -

       返回值
      setVisible: (visible: boolean) => void,
      goto: (options?: { [key: string]: string }) => void,
      getName: () => string,
      getIndex: () => number,
      isVisible: () => boolean,
    }

    {

    visible:可见性

    options:跳转的页面对象

    name:页面名称

    number:页面索引,从 1 开始的正整数

    }

         示例

    示例1:在 FVS 模板中,获取当前页的一页

    duchamp.getNextPage();

    示例2:在 FVS 模板中,「表格1」组件设置了分页,获取「表格1」组件当前页的一页

    duchamp.getWidgetByName('表格1').getNextPage();

    示例3:在 FVS 模板中,获取「Tab1」组件当前页的一页

    duchamp.getWidgetByName('Tab1').getNextPage();


      应用示例-
        移动端支持移动端

    getFirstPage

    方法getFirstPage()获取第一页
         参数-

    -

       返回值
      setVisible: (visible: boolean) => void,
      goto: (options?: { [key: string]: string }) => void,
      getName: () => string,
      getIndex: () => number,
      isVisible: () => boolean,
    }

    {

    visible:可见性

    options:跳转的页面对象

    name:页面名称

    number:页面索引,从 1 开始的正整数

    }

         示例

    示例1:在 FVS 模板中,获取模板的第一页

    duchamp.getFirstPage();

    示例2:在 FVS 模板中,「表格1」组件设置了分页,获取「表格1」组件第一页

    duchamp.getWidgetByName('表格1').getFirstPage();

    示例3:在 FVS 模板中,获取「Tab1」组件第一页

    duchamp.getWidgetByName('Tab1').getFirstPage();


      应用示例-
        移动端支持移动端

    getLastPage

    方法getLastPage()获取最后一页
         参数-

    -

       返回值
      setVisible: (visible: boolean) => void,
      goto: (options?: { [key: string]: string }) => void,
      getName: () => string,
      getIndex: () => number,
      isVisible: () => boolean,
    }

    {

    visible:可见性

    options:跳转的页面对象

    name:页面名称

    number:页面索引,从 1 开始的正整数

    }

         示例

    示例1:在 FVS 模板中,获取模板的最后一页

    duchamp.getLastPage();

    示例2:在 FVS 模板中,「表格1」组件设置了分页,获取「表格1」组件最后一页

    duchamp.getWidgetByName('表格1').getLastPage();

    示例3:在 FVS 模板中,获取「Tab1」组件最后一页

    duchamp.getWidgetByName('Tab1').getLastPage();


      应用示例-
        移动端支持移动端

    getCurrentPage


    方法getCurrentPage()获取当前页
         参数-

    -

       返回值
      setVisible: (visible: boolean) => void,
      goto: (options?: { [key: string]: string }) => void,
      getName: () => string,
      getIndex: () => number,
      isVisible: () => boolean,
    }

    {

    visible:可见性

    options:跳转的页面对象

    name:页面名称

    number:页面索引,从 1 开始的正整数

    }

         示例

    示例1:在 FVS 模板中,获取模板展示的当前

    duchamp.getCurrentPage();

    示例2:在 FVS 模板中,「表格1」组件设置了分页,获取「表格1」组件当前页

    duchamp.getWidgetByName('表格1').getCurrentPage();

    示例3:在 FVS 模板中,获取「Tab1」组件当前页

    duchamp.getWidgetByName('Tab1').getCurrentPage();


      应用示例-
        移动端支持移动端

    getAllPages

    注:该接口需使用 V2.5.0 及之后版本。

    方法getAllPages()获取所有页
         参数-

    -

       返回值page[x]

    页面数组,x 从 0 开始,0 表示第一页

    注:这里与页面索引不一样,页面索引从 1 开始

         示例

    示例1:在 FVS 模板中,获取模板总共有多少页,并弹窗显示

    var a = duchamp.getAllPages().length;
    duchamp.Msg.alert({
          title: "提示" ,
           message:"当前模板总页数为:"+ a
    }
    )

    示例2:在 FVS 模板中,「表格1」组件设置了分页,获取「表格1」组件第二页的名称

    duchamp.getWidgetByName('表格1').getAllPages()[1].getName();

    示例3:在 FVS 模板中,获取「Tab1」组件第一页的索引

    duchamp.getWidgetByName('Tab1').getAllPages()[0].getIndex();


      应用示例

    点击下载模板FVS获取模板总页数.fvs

    6D2E55A8-6F57-497D-AC1A-D18799FEF59E.GIF

        移动端支持移动端

    操作页

    以下接口需结合获取页接口使用

    setVisible

    方法setVisible()

    设置页面显示或隐

    注:若隐藏正在展示的页面,会弹出提示「无法隐藏当前页」

         参数visible: boolean

    页面是否显示,布尔型

    • true:显示

    • false:隐

       返回值--
         示例

    示例1:在 FVS 模板中,隐藏模板「页面1」

    duchamp.getPage("页面1").setVisible(false);

    示例2:在 FVS 模板中,「表格1」组件设置了分页,隐藏表格分页1

    duchamp.getWidgetByName('表格1').getPage(1).setVisible(false);

    示例3:在 FVS 模板中,隐藏「Tab1」组件标签页1

    duchamp.getWidgetByName('Tab1').getPage(1).setVisible(false);


      应用示例点击下载模板:FVS设置页面显示或隐藏.fvs
    9612832F-16A8-4613-A0BF-69B82887402C.GIF
        移动端支持移动端

    isVisible

    方法isVisible()获取页面显示/隐藏状态
         参数--
       返回值visible: boolean

    页面是否显示,布尔型

    • true:显示

    • false:隐

         示例

    示例1:在 FVS 模板中,获取「页面2」,返回其显示隐藏状态并弹窗提示

    var a = duchamp.getPage("页面2").isVisible();
    duchamp.Msg.alert({
          title: "提示" ,
           message:"页面2显隐状态为 "+ a
    }
    )

    示例2:在 FVS 模板中,「表格1」组件设置了分页,获取表格分页2,返回其显隐状态

    duchamp.getWidgetByName('表格1').getPage(2).isVisible();

    示例3:在 FVS 模板中,获取「Tab1」组件标签页2,返回其显隐状态

    duchamp.getWidgetByName('Tab1').getPage(2).isVisible();


      应用示例

    点击下载模板FVS获取页面显隐状态.fvs

    2E378EC5-0123-4B92-A0EE-4CBCDDFF4AF1.GIF

        移动端支持移动端

    goto

    方法goto()跳转到获取的页面
         参数{para:"para"}参数名:参数值
       返回值--
         示例

    示例1:在 FVS 模板中,跳转到下一页

    duchamp.getNextPage().goto();

    示例2:在 FVS 模板中,「表格1」组件设置了分页,跳转表格下一页

    duchamp.getWidgetByName('表格1').getNextPage().goto();

    示例3:在 FVS 模板中,跳转「Tab1」组件下一页

    duchamp.getWidgetByName('Tab1').getNextPage().goto();

    示例4:在 FVS 模板中,跳转到下一页并传参

    duchamp.getNextPage().goto({a:"参数a"});

    传递多个参数写法如下:

    duchamp.getNextPage().goto({a:"参数a",b:"参数b"});


      应用示例

    点击下载模板FVS页面跳转.fvs

    76E86635-0339-4C89-B1C9-AE6845D3F912.GIF

        移动端支持移动端

    getName

    方法getName()获取页面名称
         参数--
       返回值name:string页面名称,字符串
         示例

    示例1:在 FVS 模板中,获取当前页面名称并弹窗显示

    var name = duchamp.getCurrentPage().getName();
    duchamp.Msg.alert({
          title: "提示" ,
          message:"当前页面名称为 "+ name
    }
    )

    示例2:在 FVS 模板中,获取「Tab1」组件当前页面名称并弹窗显示

    var name = duchamp.getWidgetByName('Tab1').getCurrentPage().getName();
    duchamp.Msg.alert({
          title: "提示" ,
          message:"当前页面名称为 "+ name
    }
    )

    注:表格组件分页没有名称,若使用上述 JS ,返回值为 undefined

      应用示例点击下载模板:FVS获取页面名称.fvs
    95EBD249-4502-4F6D-BD50-D770C4C3E99A.GIF
        移动端支持移动端

    getIndex

    方法getIndex()获取页面索引
         参数--
       返回值number页面索引,从 1 开始的正整数
         示例

    示例1:在 FVS 模板中,获取当前页面索引并弹窗显示

    var number = duchamp.getCurrentPage().getIndex();
    duchamp.Msg.alert({
          title: "提示" ,
          message:"当前页面名称为 "+ number
    }
    )

    示例2:在 FVS 模板中,获取「表格1」组件当前页面索引并弹窗显示

    var number = duchamp.getWidgetByName('表格1').getCurrentPage().getIndex();
    duchamp.Msg.alert({
          title: "提示" ,
          message:"表格当前页面索引为 "+ number
    }
    )

    示例3:在 FVS 模板中,获取「Tab1」组件当前页面索引并弹窗显示

    var number = duchamp.getWidgetByName('Tab1').getCurrentPage().getIndex();
    duchamp.Msg.alert({
          title: "提示" ,
          message:"Tab当前页面索引为 "+ number
    }
    )


      应用示例点击下载模板:FVS获取页面索引.fvs
    428D83C2-388A-4057-8FAA-A366C2FFD5F9.GIF
        移动端支持移动端


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持