亿信ABI-DEMO解析第二期:智慧企业之人力资源

5832
6

方菁 小试身手Lv3

发表于2020-4-30 14:53

楼主
一、页面分析
1、整体简介
主题表:使用rand()函数产生随机数
页面结构:宽百分比,高固定(“人事管理”页面);宽百分比,高百分比(“人资效率”和“人资成本”页面)
页面一览:
【人事管理】
1.png

【人资效率】
2.png

【人资成本】
3.png

2、模块详解
2.1 人事管理
1)员工变动分析
此模块分为3个部分,第一个部分展示了员工变动人数的指标概览;第二个部分分别展示新增员工和离职员工的类型占比,使用了表格(表格去掉了边框)和迷你占比图组件;第三个部分展示的是员工变动趋势,属于多系列柱状和线状结合图:离职人数和新增人数分别用蓝色和绿色的柱子表示,净增用橙色曲线代表。


【tips】柱状和线状结合图的设置入口“统计图设置-显示-外观”,如下图所示,不同的系列选择对应的系列类型:

4.png


2)员工招聘分析/员工培训分析
用类似标签页的形式来切换员工招聘分析和员工培训分析这两个主题,通过脚本关联按钮和Tab页签来实现该效果(脚本见后文的【脚本说明】)。


2.2 人资效率
1)人资效率分析
展现了人员总数、人均净利润、人均产量、人均收入、人均成本、人均回款这六个指标今年和去年同期的值。使用了图片和文本组件,并用容器进行排版,考虑到自适应问题,摆放的位置都使用了百分比来设置左边距。


2)人均净利润同比分析
当期同期和预算的数值使用了柱状图显示,增长率和完成率用线状图显示,方便用户对比查看数据。


2.3 人资成本
1)人力成本结构
使用堆积图来展示人力成本的组成和比例,在柱状图中设置相同的堆积组名就可以转变成堆积图了。

2)人员工资结构/保险公积金结构/员工日常成本结构
用类似标签页的形式来切换人员工资结构/保险公积金结构/员工日常成本结构这三个不同的分析角度,通过脚本关联按钮和Tab页签来实现该效果(脚本见后文的【脚本说明】)。

二、脚本说明
按钮和Tab页签联动
脚本中定义了checkBtnAndBindTab(btns,tabctrlId)函数,只需在最后运用该函数即可:
checkBtnAndBindTab(["@but1","@but2"],"HHH29");
1)["@but1","@but2"]:第一个参数按顺序罗列了所有按钮的名称
2)"HHH29":第二个参数为Tab页签的代号
注意:按钮必须使用同一个分组名;Tab页属性中去掉标签页头可见。

  1. /***
  2. *按钮必须使用同一个分组名
  3. **/
  4. function checkBtnAndBindTab(btns, tabctrlId) {
  5.         var ready = true;
  6.         var btnDoms = [];
  7.         if(!g_rptpage.calcParam){
  8.                 ready = false;
  9.         }else{
  10.                 for (var i = 0, l = btns.length; i < l; i++) {
  11.                         var param = g_rptpage.calcParam.getParamByName(btns[i]);
  12.                         if(!param){
  13.                                 ready = false;
  14.                                 break;
  15.                         }
  16.                         btnDoms.push(param.getBaseDom());
  17.                 }
  18.         }
  19.         if(!ready){
  20.                 var func = checkBtnAndBindTab.bind(window,btns,tabctrlId);
  21.                 setTimeout(func,50);
  22.         }else{
  23.                 window["current_active_btn_idx"] = 0;
  24.                 var bindTabClick = function(tabctrlId,idx){
  25.                         window["current_active_btn_idx"] = idx;
  26.                         g_rptpage.widgets[tabctrlId].setActive(idx);
  27.                 };

  28.                 for(var i=0,l=btnDoms.length;i<l;i++){
  29.                         EUI.addEvent(btnDoms[i],"click",bindTabClick.bind(btnDoms[i],tabctrlId,i));
  30.                 }
  31.         }
  32. }

  33. checkBtnAndBindTab(["@but1","@but2"],"HHH29");
复制代码


三、配色信息
底色:#F7F8FC
标题:#245bff 20px加粗
模块
         边框:#EBEEFC 背景:#FFFFFF
         标题:#000012 18px
         文字:#245bff 22px,#5a5a66 14px
         统计图主要填充颜色:
         浅蓝:#7c8dff  深蓝:#3764fe  深绿:#04e38a  浅绿:#9dff86  橙黄:#fcb54d  粉红:#ff9494

四、资源文件
1.报表资源
5.png


说明:.rptttpl后缀文件新建空报表后如下图所示上传
6.png



2.图片资源
直接上传到资源管理器,默认的路径:vfs/root/products/ebi/sys/picture/行业demo/人力
注意:可以压缩为zip文件后上传。路径不要轻易修改,报表中在引用时使用了文件路径。

3.资源文件

最近看过此主题的会员

esen_4TIYRX3I2W

ncjindsif

esen_4T5FL2B71KC0

JCsang

esen_4RRJMMNL2S

980

abcddcba

vishaw

zhaolj

18830298917

Linforever

四毛二

wangbing

jinwang2

灰龙

勇敢向前

6个回答

只看楼主

程序小哥哥 数据达人Lv4

发表于2020-5-7 09:17

只看该作者

取消 关注该作者的回复

沙发

哇,这个非常有用呀~

庆余年 数据小白Lv1

发表于2020-5-7 09:18

只看该作者

取消 关注该作者的回复

板凳

感谢分享,超级有用的干货!

mionlion 数据小白Lv1

发表于2020-6-28 13:45

只看该作者

取消 关注该作者的回复

地板

干了十三年的薪酬工作,真的觉得这个牛逼了。如何能和建筑业有效结合开发应用,就不敢想象了。

小亿 管理员

发表于2020-6-28 14:13

只看该作者

取消 关注该作者的回复

5#

mionlion 发表于 2020-6-28 13:45
干了十三年的薪酬工作,真的觉得这个牛逼了。如何能和建筑业有效结合开发应用,就不敢想象了。 ...

要勇于想象~

nnnttt 初学数据Lv2

发表于2020-7-14 16:18

只看该作者

取消 关注该作者的回复

6#

想问一下,我上传的盈利能力分界面为什么会出现这个错误?

错误提示

错误提示

nnnttt 初学数据Lv2

发表于2020-7-14 16:21

只看该作者

取消 关注该作者的回复

7#

nnnttt 发表于 2020-7-14 16:18
想问一下,我上传的盈利能力分界面为什么会出现这个错误?

不好意思  回复错帖子啦

登录后可回答问题,请登录注册

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流