1、使用场景
很多系统通过在线人数反应该系统的使用情况。而便捷的查看到当前在线人数是有效监控系统情况的最佳方式。在此为大家分享一下我实现的方法。效果如图所示:
2、详细步骤 现在正是开始进行我们在线人数显示的操作步骤:
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文件就创建一个)
|