JS自定义主题在线人数

编辑
文档创建者:我从山中来 (73598 )     浏览次数:408次     编辑次数:5次     最近更新:susie 于 2018-01-24     

目录:

1.问题描述编辑

很多系统通过在线人数反应该系统的使用情况,而便捷的查看到当前在线人数是有效监控系统情况的最佳方式。

在此提供实现的方法。效果如图所示:

222

2.解决思路编辑

自定义主题,通过ajax调用方式获取到在线人数,并修改主体样式,从而展示在导航栏的右侧。

3.实现步骤编辑

3.1 获取在线人数
获取到在线人数的json返回结果,通过访问链接:http://localhost:8075/WebReport/ReportServer?op=fs_set&cmd=sc_get_monitorinfo

得到如下所示的json 结果:

222

其中: userCount 即为在线人数的统计,所以我们直接取 userCount 的值即可。

在此,基本的json操作方法就不详细解释啦。

3.2 调用json结果

此时,只需要正确的调用json结果,并将其正确在页面显示出来。

这里使用ajax调用方式,获取到json结果并对结果进行操作。

新建文件theme.js,具体实现代码为:

(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);

3.3 样式设置

通过style.css调整具体显示效果及位置。新建文件style.css,内容如下:

#onlineNum{ position: relative; float: left; left: 0; display: block; height: 60px; line-height: 60px; font-size: 12px; padding: 0 15px; cursor: pointer; }

3.4 保存文件

%FR_HOME%WEB-INF/resources/下新建文件夹fstheme/fs-theme-demo1,将上面2个文件放到fs-theme-demo1文件夹下,如下图:

222

4.效果查看编辑

重启报表服务器,管理员登陆决策系统,点击管理系统 -> 外观配置 -> 主题,就可以看到刚刚新增的主题,选择即可生效。


附件列表


主题: 决策系统
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: