一站式數據分析平臺

在線免費試用 DEMO體驗視頻介紹

免費試用產品詳情

ABI-DEMO解析第二期：智慧企業之人力資源

時間：2020-05-15來源：小億瀏覽數：468次

一、頁面分析

1、整體簡介

主題表：使用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");