-
-
方菁 小试身手Lv3
发表于2020-4-30 14:53
楼主
一、页面分析
1、整体简介
2、模块详解
2.1 人事管理
2.2 人资效率
2.3 人资成本
二、脚本说明
按钮和Tab页签联动
复制代码
三、配色信息
人力资源.zip
(194.43 KB, 下载次数: )
DEMO解析列表：
主题表：使用rand()函数产生随机数
页面结构：宽百分比，高固定（“人事管理”页面）；宽百分比，高百分比（“人资效率”和“人资成本”页面）
页面一览：
【人事管理】
【人资效率】
【人资成本】
2、模块详解
2.1 人事管理
1）员工变动分析
此模块分为3个部分，第一个部分展示了员工变动人数的指标概览；第二个部分分别展示新增员工和离职员工的类型占比，使用了表格（表格去掉了边框）和迷你占比图组件；第三个部分展示的是员工变动趋势，属于多系列柱状和线状结合图：离职人数和新增人数分别用蓝色和绿色的柱子表示，净增用橙色曲线代表。
【tips】柱状和线状结合图的设置入口“统计图设置-显示-外观”，如下图所示，不同的系列选择对应的系列类型：
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页属性中去掉标签页头可见。
- /***
- *按钮必须使用同一个分组名
- **/
- function checkBtnAndBindTab(btns, tabctrlId) {
- var ready = true;
- var btnDoms = [];
- if(!g_rptpage.calcParam){
- ready = false;
- }else{
- for (var i = 0, l = btns.length; i < l; i++) {
- var param = g_rptpage.calcParam.getParamByName(btns[i]);
- if(!param){
- ready = false;
- break;
- }
- btnDoms.push(param.getBaseDom());
- }
- }
- if(!ready){
- var func = checkBtnAndBindTab.bind(window,btns,tabctrlId);
- setTimeout(func,50);
- }else{
- window["current_active_btn_idx"] = 0;
- var bindTabClick = function(tabctrlId,idx){
- window["current_active_btn_idx"] = idx;
- g_rptpage.widgets[tabctrlId].setActive(idx);
- };
- for(var i=0,l=btnDoms.length;i<l;i++){
- EUI.addEvent(btnDoms[i],"click",bindTabClick.bind(btnDoms[i],tabctrlId,i));
- }
- }
- }
- checkBtnAndBindTab(["@but1","@but2"],"HHH29");
三、配色信息
底色：#F7F8FC
标题：#245bff 20px加粗
模块
边框：#EBEEFC 背景：#FFFFFF
标题：#000012 18px
文字：#245bff 22px，#5a5a66 14px
统计图主要填充颜色：
浅蓝：#7c8dff 深蓝：#3764fe 深绿：#04e38a 浅绿：#9dff86 橙黄：#fcb54d 粉红：#ff9494
四、资源文件
1.报表资源
说明：.rptttpl后缀文件新建空报表后如下图所示上传
2.图片资源
直接上传到资源管理器，默认的路径：vfs/root/products/ebi/sys/picture/行业demo/人力
注意：可以压缩为zip文件后上传。路径不要轻易修改，报表中在引用时使用了文件路径。
3.资源文件
人力资源.zip
(194.43 KB, 下载次数: )
DEMO解析列表：
最近看过此主题的会员
6个回答
干了十三年的薪酬工作，真的觉得这个牛逼了。如何能和建筑业有效结合开发应用，就不敢想象了。
