巧用JSP+WEB组件实现KPI动态组件展示

我是社区第99661位番薯,欢迎点我头像关注我哦~
一、故事背景
        最近很多同学们在用FineBI搭建驾驶舱或者大屏看板的时候,尽管产品有内置了仪表盘组件可以用于进行数据指标统计,但是很多情况下还是希望数据能够直接以数字的形式进行统计呈现(内置虽然有文本组件但是只能呈现静态输入的文本文字,无法随着数据库中的数据变化而变化),那么这时会不会经常苦于FineBI V4.1中没有内置的KPI数值展示组件呢?提产品需求?这边官方告诉大家5.0版本会在产品中直接增加KPI组件,那么FineBI V4.1版本有没有什么好的办法可以实现呢?最近来问我这个问题的同学很多很多~那么下面就直接看我这边给大家分享的JSP+WEB组件实现KPI动态组件展示方案吧!

截图201805091943269179.png

二、具体方案
1.记事本新建一个jsp(其实js也可以实现类似效果,为什么用jsp不用js呢?因为js代码前端可以直接查看,可能导致数据库安全隐患),命名为kpi.jsp,通过调用工程下面的数据库驱动jar,执行指标统计SQL,用于取出想要统计的指标数据,内容如下:
  1. <%@ page contentType="text/html; charset=utf8" language="Java" import="java.sql.*,java.io.*,java.math.BigDecimal,java.text.DecimalFormat" errorPage="" %>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>巧用JSP+WEB组件实现KPI动态组件展示</title>
  6. </head>
  7. <body>
  8. <script>
  9. </script>
  10. <%
  11. String dri="org.h2.Driver";    //驱动名称,可根据实际情况修改
  12. String url="jdbc:h2://G:/FineBI_4.1/webapps/WebReport/test";    //数据库URL,可根据实际情况修改
  13. String user="sa";    //用户名,可根据实际情况修改
  14. String password="";    //密码,可根据实际情况修改
  15. String sql="select sum(总金额) from demo_contract";    //指标统计SQL,可根据实际统计指标进行修改
  16. DecimalFormat df = new DecimalFormat("###,###,###");    //指标格式化代码,此处用于给数值加千分符,如果不需要可以注释掉
  17. Connection conn = null;                                 //数据库连接对象
  18. Class.forName(dri).newInstance();                       //加载驱动类
  19. int rows=0;                                             //定义行变量
  20. conn = DriverManager.getConnection(url,user,password);  //取得数据库连接
  21. //out.println("连接成功!");
  22. Statement stmt=conn.createStatement();                  //创建数据库操作对象
  23. ResultSet rs=stmt.executeQuery(sql);                    //执行SQL
  24. ResultSetMetaData rsmd = rs.getMetaData();              //返回SQL数据集
  25. rows = rsmd.getColumnCount();                           //得到当前的行数
  26. while(rs.next())                                        //遍历每列SQL数据集
  27. {//输出显示
  28. int temp=1;
  29. for(;temp<=rows;temp++)                                 //遍历每行SQL数据集
  30. {
  31. out.println("<font size=20 color=Yellow font-weight=bold>"+"¥"+df.format(rs.getDouble(temp))+"</font>"); //以html形式输出SQL统计结果,其中size表示字体大小,color表示字体颜色,font-weigh可设置字体加粗,df.format()函数可用于给返回的指标添加千分位分隔符,不需要可以去掉,直接展示rs.getDouble(temp)数据
  32. }
  33. }
  34. %>
  35. </body>
  36. </html>
复制代码

2.将创建好的kpi.jsp文件放置到FineBI安装目录的\WebReport目录下,以供前端浏览器执行调用:

截图201805091943524852.png

3.打开FineBI\lib目录下的的jar文件,如果ecj的这个jar版本不是ecj-4.6.3.jar,更新到ecj-4.6.3.jar版本的jar,否则低版本ecj的jar有可能出现jsp无法编译而报错的现象:
ecj-4.6.3.jar (2.34 MB, 下载次数: 26)

发表于 2018-5-9 21:38:53
发表于 2018-5-10 06:24:36
来自手机
这个还是相当于自己开发了,php,jsp,ASP应该都行吧,还是有封装好的效率高些
发表于 2018-5-10 09:23:14
发表于 2018-5-10 13:31:17
社会我老罗,人狠话也多
发表于 2018-5-10 13:42:38
发表于 2018-5-11 11:07:39
66666666666
发表于 2018-8-3 16:15:53
想要楼主的背景图片
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

16回帖数 1关注人数 11224浏览人数
最后回复于:2018-8-3 16:20

返回顶部 返回列表