历史版本2 :FVS跳转网页链接/弹出框事件 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

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

1.1 版本

报表服务器版本
JAR包FVS大屏编辑模式(beta版)版本
11.02021-11-15V1.0.0

1.2 应用场景

通过点击 FVS 大屏模板中的图表系列/分类,在当前弹窗/新窗口打开网页,并传递参数。

本文将提供两种方式:网页链接事件、JavaScript事件。

1636792103665891.gif

2. 功能简介编辑

2.1 网页链接

2.1.1 功能入口

选中组件,点击「交互>点击事件」,选择「添加点击事件>网页链接」。即可添加一个网页链接事件,如下图所示:

设置项
简介
事件名称

事件名称即为网页框的标题名称

必填项,可手动输入事件的名称

不可与当前组件的其他事件重名

网页地址

网页地址支持相对路径和绝对路径

1)绝对路径

  • 网页示例:确保当前服务器可访问该网址即可

https://www.fanruan.com/

  • 模板示例:确保当前服务器可访问该网址即可

http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt

2)相对路径

  • 网页:需要将资源文件保存到%FR_HOME%\webapps\webroot文件夹下

/webroot/1.png

  • 模板:需要将模板文件保存到%FR_HOME%\webapps\webroot\WEB-INF\reportlets文件夹下

/webroot/decision/view/report?viewlet=GettingStarted.cpt

网页框大小设置网页框的宽度和高度

参数名称

参数类型

参数内容

支持添加参数

参数类型支持三种:

1)当前组件字段:参数内容可与组件内容相结合,例如地图区域名,柱形图系列名称等

2)自定义公式编辑:参数支持使用公式输入

3)自定义内容:参数支持直接填写文本

2.1.2 适用范围

以下组件无法设置 FVS 组件框架交互属性>点击事件>网页链接:

轮播饼图、轮播夜光仪表盘、水球图、像素点图、轮播闪烁指标卡、轮播电子指标卡

轮播目录齿轮图、轮播三维组合地图、轮播GIS点地图、轮播条形图、轮播器组件

弧形柱形图、粒子计数器、三维流向地球、时间齿轮

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

2.2 JavaScript

2.2.1 功能入口

选中组件,点击「交互>点击事件」,选择「添加点击事件>JavaScript」。即可添加JavaScript代码实现在新标签页打开网页链接的功能,如下图所示:

JavaScript代码如下表所示:

注:以下代码均是在新标签页打开,如需在当前页打开,将window.open替换为window.location.replace即可。

场景
示例
打开固定的网页

绝对路径:确保当前服务器可访问该网址即可

window.open("https://www.fanruan.com/");

相对路径:需要将资源文件保存到%FR_HOME%\webapps\webroot文件夹下

window.open("/webroot/1.png");

打开固定的模板

绝对路径:确保当前服务器可访问该网址即可

window.open("https://www.fanruan.com/");

相对路径:需要将模板文件保存到%FR_HOME%\webapps\webroot\WEB-INF\reportlets文件夹下

window.open("/webroot/decision/view/report?viewlet=GettingStarted.cpt");

打开同一张模板,传递参数

绝对路径:确保当前服务器可访问该网址即可

window.open("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt&地区="+area);

相对路径:需要将模板文件保存到%FR_HOME%\webapps\webroot\WEB-INF\reportlets文件夹下

window.open("/webroot/decision/view/report?viewlet=GettingStarted.cpt&地区="+area);

按照传递的参数值,打开不同模板if(series=='华东') /*判断系列名称为华东*/

{

var URL='/webroot/decision/view/report?viewlet=demo/basic/产品明细.cpt'; 

window.open(encodeURI(encodeURI(URL))); //在新标签页打开产品明细.cpt

}

if(series=='华北') /*判断系列名称为华北*/

{

var URL='/webroot/decision/view/report?viewlet=demo/basic/分组统计.cpt'; 

window.open(encodeURI(encodeURI(URL))); //在新标签页打开分组统计.cpt

}

2.2.2 适用范围

以下组件无法设置 FVS 组件框架交互属性>点击事件>JavaScript:

轮播饼图、轮播夜光仪表盘、水球图、像素点图、轮播闪烁指标卡、轮播电子指标卡

轮播目录齿轮图、轮播三维组合地图、轮播GIS点地图、轮播条形图、轮播器组件

弧形柱形图、粒子计数器、三维流向地球、时间齿轮

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

3. 制作基础模板编辑

注:安装了「FVS大屏编辑模式」插件的用户,方可参考本文学习。

3.1 新建大屏模板

用户点击菜单栏「文件>新建大屏模板」,设置大屏模板名称为「FVS网页链接跳转示例」,点击「确定」,如下图所示:

3.2 新建数据集

用户新建数据库查询「ds1」,SQL语句:SELECT * FROM 销量

如下图所示:

3.3 新增饼图组件

在「页面1」,用户选择组件区「图表>饼图类>饼形图」,点击添加到页面中。

选中组件,在配置区设置组件「内容>数据」,设置数据集为「ds1」,分类为「无」,系列名为「地区」,值为「销量」,具体如下图所示。

组件样式可根据个人喜好设置,本文不再赘述。

4. 示例一:当前窗口弹窗打开同一网页,传递不同参数编辑

本章示例:通过点击饼图的系列,在当前窗口弹窗打开一个子模板。并且将饼图的系列名作为参数值传递到子模板中。

请先按照第三章完成基础模板制作,再基于基础模板进行本章操作。

4.1 设置网页链接事件

打开第三章制作的FVS大屏模板。

选中饼图组件,点击「交互>点击事件」,添加点击事件「网页链接」。

设置事件名称为「销售详情」,网页地址为「/webroot/decision/view/report?viewlet=GettingStarted.cpt」,网页框大小为「800*600」。

设置参数,参数名称为「地区」,参数类型选择「当前组件字段」,参数内容为「系列名称」。

4.2 效果预览

保存模板,点击右上角「预览」按钮。

通过点击饼图的系列,在当前窗口弹窗打开一个子模板。并且将饼图的系列名作为参数值传递到子模板中。

1636796990251781.gif

5. 示例二:新窗口打开同一网页,传递不同参数编辑

本章示例:通过点击饼图的系列,在新窗口打开一个子模板。并且将饼图的系列名作为参数值传递到子模板中。

请先按照第三章完成基础模板制作,再基于基础模板进行本章操作。

5.1 设置JavaScript事件

打开第三章制作的FVS大屏模板。

选中饼图组件,点击「交互>点击事件」,添加点击事件「JavaScript」。

设置事件名称为「网页跳转JS」。

设置参数,参数名称为「area」,参数类型选择「当前组件字段」,参数内容为「系列名称」。

设置JavaScript执行脚本为:

window.open("/webroot/decision/view/report?viewlet=GettingStarted.cpt&地区="+area);


5.2 效果预览

保存模板,点击右上角「预览」按钮。

通过点击饼图的系列,在新窗口打开一个子模板。并且将饼图的系列名作为参数值传递到子模板中。

1636797913864717.gif

6. 示例三:根据图表分类/系列,在新窗口打开不同网页编辑

本章示例:按照点击的饼图的系列名,在新窗口打开不同的子模板。

请先按照第三章完成基础模板制作,再基于基础模板进行本章操作。

6.1 设置JavaScript事件

打开第三章制作的FVS大屏模板。

选中饼图组件,点击「交互>点击事件」,添加点击事件「JavaScript」。

设置事件名称为「跳转不同模板」。

设置参数,参数名称为「area」,参数类型选择「当前组件字段」,参数内容为「系列名称」。

设置JavaScript执行脚本为:

if(area=='华东'/*判断系列名称为华东*/
{
var URL='/webroot/decision/view/report?viewlet=demo/basic/产品明细.cpt'
window.open(encodeURI(encodeURI(URL))); //在新标签页打开产品明细.cpt
}
if(area=='华北'/*判断系列名称为华北*/
{
var URL='/webroot/decision/view/report?viewlet=demo/basic/分组统计.cpt'
window.open(encodeURI(encodeURI(URL))); //在新标签页打开分组统计.cpt
}

6.2 效果预览

保存模板,点击右上角「预览」按钮。

按照点击的饼图的系列名,在新窗口打开不同的子模板。、

1636798368683180.gif

7. 已完成模板编辑

已完成模板请参见:FVS网页链接跳转示例.fvs

示例一、示例二、示例三分别对应模板中的页面1、页面2、页面3。