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

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文件就创建一个）

9.0可以用不？