自定义主题显示当前在线人数

楼主
我是社区第73598位番薯,欢迎点我头像关注我哦~


1、使用场景

很多系统通过在线人数反应该系统的使用情况。而便捷的查看到当前在线人数是有效监控系统情况的最佳方式。在此为大家分享一下我实现的方法。效果如图所示:





2、详细步骤
因为在线人数效果显示是基于自定义主题前提做的,所以请先掌握自定义主题相关知识。可参考 自定义主题包示例-[url]http://help.finereport.com/doc-view-730.html[/url]
现在正是开始进行我们在线人数显示的操作步骤:

1)首先获取到在线人数的json返回结果。

http://localhost:8075/WebReport/ReportServer?op=fs_set&cmd=sc_get_monitorinfo
得到如下所示的json 结果:

其中: 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="<span>在线人数:"+data.userCount+"</span>";        //为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文件就创建一个)


分享扩散:

沙发
发表于 2017-12-27 15:44:40
板凳
发表于 2017-12-27 15:53:57
地板
发表于 2018-1-5 16:50:09
9.0可以用不?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部 返回列表