商业智能FineBI使用教程：[50]集成示例
电脑软件
1.支十嵋壬描述
为了简化步骤，用户系统BIdemo里面只有两个页面：登录页面log足毂忍珩in.html和跳转页面index.html，登录页面就是指用户系统输入用户名密码的页面，index.html则是用户名密码验证成功之后，用户系统的首页，该示例首页中以超链节点的方式将FineBI集成进来。
2.登录页面login.html
FineBI平台拥有自己的用户登录界面，需要登录才能使用，在实际情况中，企业会有自己的系统登录界面，如果将FineBI嵌入在系统中，虽然用户登录了用户系统，但是没有登录FineBI平台，当使用FineBI时，还要跳转到FineBI特定的登录页面登录，这对使用者而言非常麻烦。因此需要在用户系统的登录页面登录时同时登录FineBI平台（即将输入的用户名密码也发送到FineBI平台进行认证），从而访问FineBI时不需要再次登录。
2.1FineBI登录验证接口
用户输入用户名密码后点击提交或登录按钮时，触发loginFR()方法，该方法中实现登录事件并且通过ajax将用户名密码发送到FineBI平台进行验证，并且在验证成功时，触发html中的表单提交事件，实现登录成功页面的跳转，实现BI认证代码如下：
functionloginFR(){
varusername=document.getElementById("username").value;
varpassword=document.getElementById("password").value;
varf=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();//页面跳转到指定页面
}elseif(data.status==="fail"){
alert("用户名密码错误！！！");//验证失败（用户名或密码错误）
}
},
error:function(){
alert("超时或服务器其他错误！！！");//验证失败（超时或服务器其他错误）
}
});
}
注：由于使用了ajax，需要引入jquery.js。
另：如果用户名密码需要编码转换，可引入finereport.js,使用FR的内置编码函数进行编码转化，示例中，用户名无需编码转换，代码如下:
<scripttype="text/javascript"src="ReportServer?op=emb&resource=finereport.js"></script>
FR.cjkEncode(document.getElementById("username").value);//使用FR的内置编码函数进行编码转化
2.2完整代码
即完整的实现登录的代码如下：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript">
functionloginFR(){
varusername=document.getElementById("username").value;
varpassword=document.getElementById("password").value;
varf=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();
//登录成功
}elseif(data.status==="fail"){
alert("用户名密码错误！！！");//登录失败（用户名或密码错误）
}
},
error:function(){
alert("超时或服务器其他错误！！！");//登录失败（超时或服务器其他错误）
}
});
}
</script>
<body>
<formid="loginForm"name="loginForm"method="post"action="index.html">
<table>
<tbody>
<trclass="prop">
<tdclass="name"><label>
Username</label></td>
<tdclass="value"><inputid="username"type="text"name="username"value=""/></td>
</tr>
<trclass="prop">
<tdclass="name"><label>
Password</label></td>
<tdclass="value"><inputid="password"type="password"name="password"value=""/></td>
</tr>
</tbody>
</table>
</div></div></div>
<divclass="actionButtons">
<inputid="lalala"type="button"name="lalala"onclick="loginFR();"value="登录"/>
<inputid="sub"type="submit"name="sub"value=""style="display:none;"/>
</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中显示，代码如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FineBIDemo</title>
<scripttype="text/javascript"src="http://localhost:8080/FineBI/ReportServer?op=emb&resource=finereport.js"></script>
<scripttype="text/javascript">
functionviewReport(para){
varf=document.getElementById("frame");
f.src="http://localhost:8080/FineBI/ReportServer?op="+para;//点击链接节点，将op参数值传递进来，在frame中打开指定页面
}
functionopenList(){
varf=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){
varlist=FR.jsonDecode(data);
f.src="http://localhost:8080/FineBI/ReportServer"+list[0].buildurl;//获取我创建的列表中的第一个即时分析，并显示在iframe里面
}
});
}
</script>
</head>
<bodybgcolor="#FFFFFF">
<tablestyle="width:1018px;"border="2">
<colgroup>
<colwidth="150px;"/>
<col/>
</colgroup>
<trstyle="height:30px;">
<tdstyle="font-size:32px;background-color:blue;color:#EFEFEF;"colSpan="2">
FineBIDemo
</td>
</tr>
<trstyle="height:730px;">
<tdstyle="vertical-align:top;">
<ul>
<listyle="cursor:pointer;color:blue;"onclick="javascript:viewReport('fr_bi_configure&cmd=init_configure_pane');">
BI数据配置
</li>
</ul>
<ul>
<listyle="cursor:pointer;color:blue;"onclick="javascript:viewReport('fr_bi_dezi&cmd=init_dezi_pane');">
新建分析
</li>
</ul>
<ul>
<listyle="cursor:pointer;color:blue;"onclick="javascript:viewReport('fr_bi_dezi&cmd=my_bi_saved');">
我创建的
</li>
</ul>
<ul>
<listyle="cursor:pointer;color:blue;"onclick="javascript:viewReport('fr_bi_dezi&cmd=my_bi_shared');">
分享给我的
</li>
</ul>
<ul>
<listyle="cursor:pointer;color:blue;"onclick="javascript:openList();">
BITest
</li>
</ul>
</td>
<td>
<iframeid="frame"name="frame"width="100%"height="100%"/>
</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]集成示例](https://exp-picture.cdn.bcebos.com/e3d059e833e03972b847825eb586304860435698.jpg)
4.2FineBI集成效果
输入正确的用户名密码，页面跳转到系统首页index.html，可以看到左侧栏中显示了FineBI的四个操作接口的链接节点，点击节点，右侧会显示相应的操作界面，在界面上进行操作即可。
![商业智能FineBI使用教程：[50]集成示例](https://exp-picture.cdn.bcebos.com/6002c9d4483104eb7be366bb092b74ee1d324e98.jpg)
点击我创建的节点，可以看到第一个即时分析是BITest，钻取进去查看效果，然后点击左侧的BITest节点，可以看到效果和在我创建的里面看到的第一个即时分析效果一样，如下图：
![商业智能FineBI使用教程：[50]集成示例](https://exp-picture.cdn.bcebos.com/4a594f2c8cf1d8a7b077713046e34b2c57ee4798.jpg)
注：示例中没有对BI数据源配置的可见进行设置，即任何用户登录系统之后均可看到上面的5个节点，实际应用中需要对创建业务包API接口链接节点设置是否可见的权限。