商业智能FineBI使用教程：[50]集成示例

2025-10-25 04:19:32

电脑软件

名称：商业智能软件FineBI 大小：120MB|版本：V2.0|类别：应用工具|语言：中文应用平台：windows / Mac OS X / Linux

1. 描述

为了简化步骤，用户系统BIdemo里面只有两个页面：登录页面login.html和跳转页面index.html，登录页面就是指用户系统输入用户名密码的页面，index.html则是用户名密码验证成功之后，用户系统的首页，该示例首页中以超链节点的方式将FineBI集成进来。

2. 登录页面login.html

FineBI平台拥有自己的用户登录界面，需要登录才能使用，在实际情况中，企业会有自己的系统登录界面，如果将FineBI嵌入在系统中，虽然用户登录了用户系统，但是没有登录FineBI平台，当使用FineBI时，还要跳转到FineBI特定的登录页面登录，这对使用者而言非常麻烦。因此需要在用户系统的登录页面登录时同时登录FineBI平台（即将输入的用户名密码也发送到FineBI平台进行认证），从而访问FineBI时不需要再次登录。

2.1 FineBI登录验证接口

用户输入用户名密码后点击提交或登录按钮时，触发loginFR()方法，该方法中实现登录事件并且通过ajax将用户名密码发送到FineBI平台进行验证，并且在验证成功时，触发html中的表单提交事件，实现登录成功页面的跳转，实现BI认证代码如下：

function loginFR() {

var username =document.getElementById("username").value;

var password =document.getElementById("password").value;

var f = document.getElementById("loginForm");

jQuery.ajax({

url:"http://localhost:8080/FineBI/ReportServer?op=fs_load&cmd=sso",//FineBI平台登录验证地址

dataType:"jsonp",//跨域采用jsonp方式

data:{"username":username,"password":password},//将用户名密码值发送过去

jsonp:"callback",

timeout:5000,//超时时间（单位：毫秒）

success:function(data) {

if (data.status === "success") {//验证成功

f.submit();//页面跳转到指定页面

} else if (data.status === "fail"){

alert("用户名密码错误！！！"); //验证失败（用户名或密码错误）

}

error:function(){

alert("超时或服务器其他错误！！！");// 验证失败（超时或服务器其他错误）

}

});

}

注：由于使用了ajax，需要引入jquery.js。

另：如果用户名密码需要编码转换，可引入finereport.js,使用FR的内置编码函数进行编码转化，示例中，用户名无需编码转换，代码如下:

FR.cjkEncode(document.getElementById("username").value); //使用FR的内置编码函数进行编码转化

2.2 完整代码

即完整的实现登录的代码如下：

<html>

<head>

function loginFR() {

var username =document.getElementById("username").value;

var password =document.getElementById("password").value;

var f = document.getElementById("loginForm");

jQuery.ajax({

url:"http://localhost:8080/FineBI/ReportServer?op=fs_load&cmd=sso",//单点登录的报表服务器

dataType:"jsonp",//跨域采用jsonp方式

data:{"username":username,"password":password},

jsonp:"callback",

timeout:5000,//超时时间（单位：毫秒）

success:function(data) {

if (data.status === "success") {

f.submit();

//登录成功

} else if (data.status === "fail"){

alert("用户名密码错误！！！"); //登录失败（用户名或密码错误）

}

error:function(){

alert("超时或服务器其他错误！！！");// 登录失败（超时或服务器其他错误）

}

});

}

</script>

<body>

<table>

<tbody>

Username</label></td>

</tr>

Password</label></td>

</tr>

</tbody>

</table>

</div></div></div>

</div>

</form>

</body>

</html>

窗体顶端

窗体底端

注：为了简化，上面示例中没有做用户系统的验证。

3. 系统首页index.html

用户输入用户名密码验证成功之后，系统页面跳转到系统首页index.html，实际应用中，系统的首页会比较复杂，这里将首页简化一下，将FineBI的几个操作步骤以链接的形式显示在页面左侧，右侧嵌入一个iframe，在iframe中显示链接内容。

在上一节中已经介绍了FineBI四个操作页面的API接口链接和两个获取链接地址的方法，下面将该四个接口链接添加到系统首页index.html左侧，点击左侧链接节点时，触发viewReport()事件，将不同API接口的op参数值传递过来，拼接成完整的URL，并在右侧iframe中显示，同时在首页左侧添加我创建的目录列表中的第一个即时分析节点，点击该节点时触发openList()事件，通过ajax获取节点的url，并在右侧iframe中显示，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>FineBI Demo</title>

function viewReport(para) {

var f = document.getElementById("frame");

f.src = "http://localhost:8080/FineBI/ReportServer?op="+para;//点击链接节点，将op参数值传递进来，在frame中打开指定页面

}

function openList() {

var f = document.getElementById("frame");

$.ajax({

url:"http://localhost:8080/FineBI/ReportServer?op=fr_bi_dezi&cmd=get_my_report_list",//获取我创建的目录的即时分析列表

dataType:"jsonp",

jsonp:"callback",

success : function(data){

var list = FR.jsonDecode(data);

f.src ="http://localhost:8080/FineBI/ReportServer"+list[0].buildurl;//获取我创建的列表中的第一个即时分析，并显示在iframe里面

}

});

}

</script>

</head>

<col/>

</colgroup>

FineBI Demo

</td>

</tr>

<ul>

BI数据配置

</li>

</ul>

<ul>

新建分析

</li>

</ul>

<ul>

我创建的

</li>

</ul>

<ul>

分享给我的

</li>

</ul>

<ul>

BITest

</li>

</ul>

</td>

<td>

</td>

</tr>

</table>

</body>

</html>

另：如果用户系统跟FineBI系统在同一个工程下面，那么FineBI操作节点的API接口"?"前面的部分可以写成FR.servletURL，需要引入finereport.js。

4. 效果查看

4.1 用户系统登录

启动用户系统BIdemo所在的tomcat，即端口号为8081的tomcat，在浏览器地址栏中输入http://localhost:8081/BIdemo/login.html，如下图：

商业智能FineBI使用教程：[50]集成示例

4.2 FineBI集成效果

输入正确的用户名密码，页面跳转到系统首页index.html，可以看到左侧栏中显示了FineBI的四个操作接口的链接节点，点击节点，右侧会显示相应的操作界面，在界面上进行操作即可。

商业智能FineBI使用教程：[50]集成示例

点击我创建的节点，可以看到第一个即时分析是BITest，钻取进去查看效果，然后点击左侧的BITest节点，可以看到效果和在我创建的里面看到的第一个即时分析效果一样，如下图：

商业智能FineBI使用教程：[50]集成示例

注：示例中没有对BI数据源配置的可见进行设置，即任何用户登录系统之后均可看到上面的5个节点，实际应用中需要对创建业务包API接口链接节点设置是否可见的权限。

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。