1、整體簡介
主題表：使用rand()函數(shù)產(chǎn)生隨機(jī)數(shù)
頁面結(jié)構(gòu)：寬百分比，高固定（“人事管理”頁面）；寬百分比，高百分比（“人資效率”和“人資成本”頁面）
頁面一覽：
【人事管理】
【人資效率】
【人資成本】
2、模塊詳解2.1?人事管理
1）員工變動分析
此模塊分為3個部分，第一個部分展示了員工變動人數(shù)的指標(biāo)概覽；第二個部分分別展示新增員工和離職員工的類型占比，使用了表格（表格去掉了邊框）和迷你占比圖組件；第三個部分展示的是員工變動趨勢，屬于多系列柱狀和線狀結(jié)合圖：離職人數(shù)和新增人數(shù)分別用藍(lán)色和綠色的柱子表示，凈增用橙色曲線代表。
【tips】柱狀和線狀結(jié)合圖的設(shè)置入口“統(tǒng)計(jì)圖設(shè)置-顯示-外觀”，如下圖所示，不同的系列選擇對應(yīng)的系列類型：
2）員工招聘分析/員工培訓(xùn)分析
用類似標(biāo)簽頁的形式來切換員工招聘分析和員工培訓(xùn)分析這兩個主題，通過腳本關(guān)聯(lián)按鈕和Tab頁簽來實(shí)現(xiàn)該效果（腳本見后文的【腳本說明】）。
2.2?人資效率
1）人資效率分析
展現(xiàn)了人員總數(shù)、人均凈利潤、人均產(chǎn)量、人均收入、人均成本、人均回款這六個指標(biāo)今年和去年同期的值。使用了圖片和文本組件，并用容器進(jìn)行排版，考慮到自適應(yīng)問題，擺放的位置都使用了百分比來設(shè)置左邊距。
2）人均凈利潤同比分析
當(dāng)期同期和預(yù)算的數(shù)值使用了柱狀圖顯示，增長率和完成率用線狀圖顯示，方便用戶對比查看數(shù)據(jù)。
2.3?人資成本
1）人力成本結(jié)構(gòu)
使用堆積圖來展示人力成本的組成和比例，在柱狀圖中設(shè)置相同的堆積組名就可以轉(zhuǎn)變成堆積圖了。
2）人員工資結(jié)構(gòu)/保險(xiǎn)公積金結(jié)構(gòu)/員工日常成本結(jié)構(gòu)
用類似標(biāo)簽頁的形式來切換人員工資結(jié)構(gòu)/保險(xiǎn)公積金結(jié)構(gòu)/員工日常成本結(jié)構(gòu)這三個不同的分析角度，通過腳本關(guān)聯(lián)按鈕和Tab頁簽來實(shí)現(xiàn)該效果（腳本見后文的【腳本說明】）。
二、腳本說明按鈕和Tab頁簽聯(lián)動
腳本中定義了checkBtnAndBindTab(btns,tabctrlId)函數(shù)，只需在最后運(yùn)用該函數(shù)即可：
checkBtnAndBindTab(["@but1","@but2"],"HHH29");
1）["@but1","@but2"]：第一個參數(shù)按順序羅列了所有按鈕的名稱
2）"HHH29"：第二個參數(shù)為Tab頁簽的代號
注意：按鈕必須使用同一個分組名；Tab頁屬性中去掉標(biāo)簽頁頭可見。
-
/***
-
*按鈕必須使用同一個分組名
-
**/
-
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");
復(fù)制代碼
三、配色信息
底色：#F7F8FC
標(biāo)題：#245bff 20px加粗
模塊
? ?? ?? ?邊框：#EBEEFC 背景：#FFFFFF
? ?? ?? ?標(biāo)題：#000012 18px
? ?? ?? ?文字：#245bff 22px，#5a5a66 14px
? ?? ?? ?統(tǒng)計(jì)圖主要填充顏色：
? ?? ?? ?淺藍(lán)：#7c8dff??深藍(lán)：#3764fe??深綠：#04e38a??淺綠：#9dff86??橙黃：#fcb54d??粉紅：#ff9494
四、資源文件
1.報(bào)表資源
說明：.rptttpl后綴文件新建空報(bào)表后如下圖所示上傳
2.圖片資源
直接上傳到資源管理器，默認(rèn)的路徑：vfs/root/products/ebi/sys/picture/行業(yè)demo/人力
注意：可以壓縮為zip文件后上傳。路徑不要輕易修改，報(bào)表中在引用時使用了文件路徑。
3.資源文件
