历史版本39 :FVS页面接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

适用场景:安装了「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()

获取当前页面中所有组件对象,后续可以调用每个组件上的接口加以使用

     参数--
   返回值Array组件对象数组
     示例

示例1:点击标题组件,一键隐藏当前页所有组件

duchamp.getAllWidgets().forEach(widget => {
widget.setVisible(false);
})

示例2:在 FVS 模板中,获取当前页面总共有多少组件,并弹窗显示

var a = duchamp.getAllWidgets().length;
duchamp.Msg.alert({
      title: "提示" ,
       message:"当前页面总共有组件:"+ a +"个"
}
)


  应用示例

点击标题组件,获取当前页面总共有多少组件,并弹窗显示

点击下载模板:获取当前页组件数量.fvs

E09666DE-CF74-4CEE-86F2-67E65F8A233E.GIF


   移动端支持移动端

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

触发组件点击事件

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

     参数-

注:在组合地图中使用时,需传递参数:areMap、pointMap 或 lineMap

   返回值--
     示例

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

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

示例2:

触发区域地图

duchamp.getWidgetByName("组合地图1_页面3").trigger("areaMap");

触发点地图

duchamp.getWidgetByName("组合地图1_页面3").trigger("pointMap");

触发流向地图

duchamp.getWidgetByName("组合地图1_页面3").trigger("lineMap");


  应用示例

-

    移动端支持移动端

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

    移动端不支持移动端
方法
on(event, listener)监听 FVS 中的事件
参数

event: string

listener

event: 事件名称,目前仅支持 storychange 事件

listener: 事件触发的回调函数

返回值--
示例

切换页面时,页面 2 的表格实现跑马灯效

duchamp.on("storychange", (current) => {
        setTimeout(() => {
                if (current === "页面2") {
                        duchamp.getWidgetByName("表格").startMarquee() }
        }, 500);
});


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



注:以下获取页及操作页接口需使用 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 模板中,跳转到下一页并传参

注:V2.9.0.1 及之后版本,Tab组件和表格组件才支持传参,之前版本,仅模板分页支持传参

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
    移动端支持移动端