《用户系统集成数据可视化FineBI简单示例》由会员分享，可在线阅读，更多相关《用户系统集成数据可视化FineBI简单示例（9页珍藏版）》请在金锄头文库上搜索。
1、 用户系统集成 数据可视化 FineBI 简单示例 1. 描述 为了简化步骤，用户系统 BIdemo 里面只有两个页面：登录页面 login.html 和跳转页面 index.html，登录页面就是指用户系统输入用户名密码的页面， index.html 则是用户名密码验证成功之后，用户系统的首页，该示例首页中以超链节点的方式将 FineBI 集成进来。 2. 登录页面 login.html FineBI 平台拥有自己的用户登录界面，需要登录才能使用，在实际情况中，企业会有自己的系统登录界面，如果将 FineBI 嵌入在系统中，虽然用户登录了用户系统，但是没有登录 FineBI 平台，当使用 F
2、ineBI 时，还要跳转到 FineBI 特定的登录页面登录，这对使用者而言非常麻烦。因此需要在用户系统的登录页面登录时同时登录 FineBI 平台（即将输入的用户名密码也发送到 FineBI 平台进行认证），从而访问 FineBI 时不需要再次登录。 2.1 FineBI 登录验证接口 用户输入用户名密码后点击提交或登录按钮时，触发 loginFR()方法，该方法中实现登录事件并且通过 ajax 将用户名密码发送到 FineBI 平台进行验证，并且在验证成功时，触发 html 中的表单提交事件，实现登录成功页面的跳转，实现 BI 认证代码如下： 1. function loginFR() 2
3、. var username =document.getElementById(username).value; 3. var password =document.getElementById(password).value; 4. var f = document.getElementById(loginForm); 5. jQuery.ajax( 6. url:http:/localhost:8080/FineBI/ReportServer?op=fs_load&cmd=sso,/FineBI 平台登录验证地址 7. dataType:jsonp,/跨域采用 jsonp 方式 8. da
4、ta:username:username,password:password,/将用户名密码值发送过去 9. jsonp:callback, 10. timeout:5000,/超时时间（单位：毫秒） 11. success:function(data) 12. if (data.status = success) /验证成功 13. f.submit();/页面跳转到指定页面 14. 15. else if (data.status = fail) 16. alert(用户名密码错误！ ); /验证失败（用户名或密码错误） 17. 18. , 19. error:function() 20.
5、 alert(超时或服务器其他错误！ );/ 验证失败（超时或服务器其他错误） 21. 22. ); 23. 注：由于使用了 ajax，需要引入 jquery.js。 另：如果用户名密码需要编码转换，可引入 finereport.js,使用 FR 的内置编码函数进行编码转化，示例中，用户名无需编码转换，代码如下 : 1. 1. FR.cjkEncode(document.getElementById(username).value); /使用FR 的内置编码函数进行编码转化 2.2 完整代码 即完整的实现登录的代码如下： 1. 2. 3. 4. 5. 6. 7. function loginF
6、R() 8. var username =document.getElementById(username).value; 9. var password =document.getElementById(password).value; 10. var f = document.getElementById(loginForm); 11. jQuery.ajax( 12. url:http:/localhost:8080/FineBI/ReportServer?op=fs_load&cmd=sso,/单点登录的报表服务器 13. dataType:jsonp,/跨域采用 jsonp 方式 1
7、4. data:username:username,password:password, 15. jsonp:callback, 16. timeout:5000,/超时时间（单位：毫秒） 17. success:function(data) 18. if (data.status = success) 19. alert(success);llllllull 20. /登录成功 21. else if (data.status = fail) 22. alert(用户名密码错误！ ); /登录失败（用户名或密码错误） 23. 24. , 25. error:function() 26. al
8、ert(超时或服务器其他错误！ );/ 登录失败（超时或服务器其他错误） 27. 28. ); 29. 30. 31. 32. 33. 34. 35. 36. 37. Username 38. 39. 40. 41. 42. Password 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 注：为了简化，上面示例中没有做用户系统的验证。 打开一个 FineBIweb 工程，其地址登录入口与上述代码的 url 一致，进行登录测试。如图所示进行测试输入用户名、密码，单击登录，如图3. 系统首页 index.html 用户输入用户名密码验证成功
9、之后，系统页面跳转到系统首页 index.html，实际应用中，系统的首页会比较复杂，这里将首页简化一下，将 FineBI 的几个操作步骤以链接的形式显示在页面左侧，右侧嵌入一个 iframe，在 iframe 中显示链接内容。 在 上一节 中已经介绍了 FineBI 四个操作页面的 API 接口链接和两个获取链接地址的方法，下面将该四个接口链接添加到系统首页 index.html 左侧，点击左侧链接节点时，触发viewReport()事件，将不同 API 接口的 op 参数值传递过来，拼接成完整的 URL，并在右侧 iframe 中显示，同时在首页左侧添加 我创建的 目录列表中的第一个即时分
10、析节点，点击该节点时触发 openList()事件，通过 ajax 获取节点的 url，并在右侧 iframe 中显示，代码如下： 1. 2. 3. 4. FineBI Demo 5. 6. 7. 8. function viewReport(para) 9. var f = document.getElementById(frame); 10. f.src = http:/localhost:37799/WebReport/ReportServer?op=+para;/点击链接节点，将 op 参数值传递进来，在 frame 中打开指定页面 11. 12. function openList(
11、) 13. var f = document.getElementById(frame); 14. $.ajax( 15. url:http:/localhost:37799/WebReport/ReportServer?op=fr_bi_dezi&cmd=get_my_report_list,/获取我创建的目录的即时分析列表 16. dataType:jsonp, 17. jsonp:callback, 18. success : function(data) 19. var list = FR.jsonDecode(data); 20. f.src =http:/localhost:37799/WebReport/ReportServer+list0.buildurl;/获取我创建的列表中的第一个即时分析，并显示在iframe 里面 21. 22. ); 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. FineBI Demo 36. 37. 38. 39. 40. 41. 42. BI 数据配置 43. 44. 45. 46. 47. 新建分析 48. 49. 50. 51. 52.
