FVS页面接口

新增接口 getAllPages 

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

page=0 表示第一页

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

page_number=1 表示第一页

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

this.getValue();

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

this.setVisible(false);

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

this.reset();

-

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

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

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

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

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

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

示例：获取标题组件

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

-

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

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

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

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

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

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

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

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

注：在组合地图中使用时，需传递参数：areaMap、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");

示例3：在自定义组合图中

触发不同图表

duchamp.getWidgetByName("自定义组合图1_页面2").trigger(0);
duchamp.getWidgetByName("自定义组合图1_页面2").trigger(1);
duchamp.getWidgetByName("自定义组合图1_页面2").trigger(2);

-

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

duchamp.requestFullscreen();

-

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

duchamp.exitFullscreen();

-

每两秒刷新一次页面

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

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

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

切换按钮的三种状态（默认为 always）：

• always：永远显示

• hover：鼠标悬浮时显示

• never：从不显示
  

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

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

duchamp.setPageButtonDisplayPolicy("always");

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

duchamp.setPageButtonDisplayPolicy("hover");

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

duchamp.setPageButtonDisplayPolicy("never");

支持移动端

注：切换按钮状态不支持 hover 效果

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

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

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

注：传递多个参数时，写法如下

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

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

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

duchamp.pauseRollPlay();

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

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

duchamp.continueRollPlay();

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

event: string

listener

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

listener: 事件触发的回调函数

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

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

参数 name 仅用于获取三维组件模型mesh对象名称，返回对象坐标。例如：

duchamp.getWidgetByName("三维组件名称").getCoordinate("模型名称");

不传参时，获取组件中心坐标。例如：

duchamp.getWidgetByName("组件名称").getCoordinate();

示例1：点击标题，获取标题组件坐标，在该坐标位置打开一个带有引导线的弹出框

const coordinate = duchamp.getWidgetByName("标题1_页面1").getCoordinate();
duchamp.showDialog({
  title: "销量弹窗",
  width: 700,
  height: 500,
  innerContent: "Hello World",
  padding: "15px",
  titleStyle: { fontSize: "24px", fontWeight: "bold" },
  backgroundStyle: { background: "green" },
  coordinate:coordinate,
  dialogType: "dynamic",
});

示例2：获取三维组件「停车场模型」中的「车辆002」模型对象的坐标，在该坐标位置打开一个弹出框 注：此方法打开的弹出框不会跟随模型缩放或视角变化而移动位置

const coordinate = duchamp.getWidgetByName("停车场模型").getCoordinate("车辆002");
duchamp.showDialog({
  title: "车辆信息弹出框",
  width: 500,
  height: 300,
  innerContent: "Hello World",
  padding: "15px",
  titleStyle: { fontSize: "24px", fontWeight: "bold" },
  backgroundStyle: { background: "green" },
  coordinate:coordinate,
  dialogType: "dynamic",
});

示例3：获取三维组件「停车场模型」中的「车辆002」模型对象的坐标，在该坐标位置打开一个弹出框 注：此方法打开的弹出框会跟随模型缩放或视角变化而移动位置

duchamp.getWidgetByName("停车场模型").showDialogByMesh({
  title: "车辆信息弹出框",
  width: 500,
  height: 300,
  innerContent: "Hello World",
  padding: "15px",
  titleStyle: { fontSize: "24px", fontWeight: "bold" },
  backgroundStyle: { background:"green" },
  meshName:"车辆002",
});

参考上述 示例2 和 示例3 制作模板，效果如下图所示：

点击下载模板：JS实现获取组件坐标后打开弹出框.fvs

示例：开启组件的鼠标悬停功能

duchamp.getWidgetByName("组件名称").openHoverPauseRollPlay();

不支持移动端

示例：关闭组件的鼠标悬停功能

duchamp.getWidgetByName("组件名称").closeHoverPauseRollPlay();

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

page_number：页索引，从 1 开始的正整数

name：页名称，字符串

{

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

-

-

{

visible:可见性

options:跳转的页面对象

name:页面名称

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

}

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

duchamp.getPreviousPage();

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

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

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

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

-

{

visible:可见性

options:跳转的页面对象

name:页面名称

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

}

示例1：在 FVS 模板中，获取当前页的下一页

duchamp.getNextPage();

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

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

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

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

-

{

visible:可见性

options:跳转的页面对象

name:页面名称

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

}

示例1：在 FVS 模板中，获取模板的第一页

duchamp.getFirstPage();

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

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

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

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

-

{

visible:可见性

options:跳转的页面对象

name:页面名称

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

}

示例1：在 FVS 模板中，获取模板的最后一页

duchamp.getLastPage();

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

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

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

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

-

{

visible:可见性

options:跳转的页面对象

name:页面名称

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

}

示例1：在 FVS 模板中，获取模板展示的当前页

duchamp.getCurrentPage();

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

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

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

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

-

页面数组，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

页面是否显示，布尔型

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

页面是否显示，布尔型

• 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

示例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

示例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

示例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
}
)