自定义主题显示当前在线人数
1、使用场景
很多系统通过在线人数反应该系统的使用情况。而便捷的查看到当前在线人数是有效监控系统情况的最佳方式。在此为大家分享一下我实现的方法。效果如图所示:
http://help.finereport.com/uploads/201712/1514270217uynBEfps.png
2、详细步骤因为在线人数效果显示是基于自定义主题前提做的,所以请先掌握自定义主题相关知识。可参考 自定义主题包示例-http://help.finereport.com/doc-view-730.html现在正是开始进行我们在线人数显示的操作步骤:
1)首先获取到在线人数的json返回结果。
http://localhost:8075/WebReport/ReportServer?op=fs_set&cmd=sc_get_monitorinfo得到如下所示的json 结果:
http://help.finereport.com/uploads/201712/1514271229Iu12bLVC.png
其中: userCount 即为在线人数的统计,所以我们直接取 userCount的值即可。在此,基本的json操作方法就不详细解释啦。
2)调用json结果
此时,我们只需要正确的调用json结果,并将其正确在页面显示出来我们使用ajax调用方式,获取到json结果并对结果进行操作。具体实现代码为:(function ($) { FS.THEME = $.extend(true, FS.THEME, { config4navigation: { onAfterInit: function () { $.ajax({ url: FR.servletURL+"?op=fs_set&cmd=sc_get_monitorinfo", type: 'get', async: true, data:{}, dataType: 'json', success: function(data){ var elem_li=document.createElement('li');//创建一个li节点 elem_li.id='onlineNum'; //为节点创建di名称 elem_li.innerHTML="在线人数:"+data.userCount+""; //为li节点填充显示内容 $(elem_li).prependTo("#fs-frame-navi"); //将li节点添加到指定位置显示。 } }); } }, }); })(jQuery);
至此,我们已经完成了80%的工作。因为已经在页面上获取到在线人数了。
3)通过style.css调整具体显示效果及位置
在此,我附上我的位置调整代码供大家参考。#onlineNum{ float:left; padding-left:60%; line-height:62px; height:60px; font-size:14px; position:relative; }
至此,完成所有工作,实现我们最终的效果。整个操作就是做一个简单的主题操作、ajax获取json对象并操作,技术难度也不高,冒个泡,分享一下。附件为具体主题及修改,直接放在\WebReport\WEB-INF\resources\fstheme 路径下即可使用。(ps:无fstheme文件就创建一个)