一、頁面一覽【財(cái)務(wù)概覽】
【償債能力】【盈利能力】【運(yùn)營能力】二、頁面分析1、整體框架
主題表： 使用rand()函數(shù)產(chǎn)生隨機(jī)數(shù)
頁面結(jié)構(gòu)：寬百分比，高固定，自定義布局
2、模塊詳解
2.1 財(cái)務(wù)概覽
1）財(cái)務(wù)信息
此模塊由左右2部分組成，左側(cè)展示了營業(yè)收入、凈利潤、凈利率、人均凈利率、凈資產(chǎn)收益率這五個(gè)指標(biāo)以及預(yù)算完成率，通過分析區(qū)表格實(shí)現(xiàn)；右側(cè)是企業(yè)財(cái)務(wù)運(yùn)營情況的概覽，通過文本來實(shí)現(xiàn)；（表格中涉及一個(gè)有趣的腳本，詳情參見腳本說明）
2）KPI指標(biāo)分析
展示了營業(yè)收入、成本、凈利潤、毛利、期間費(fèi)用、應(yīng)收賬款這六個(gè)指標(biāo)，以簡表的形式，清晰的展示預(yù)算額，實(shí)際數(shù)以及完成率。另外以線狀圖來展示5年來的趨勢(shì)。
3）財(cái)務(wù)管理解析
以架構(gòu)圖的方式，把財(cái)務(wù)的指標(biāo)進(jìn)行層層解析，進(jìn)行指標(biāo)溯源，幫助用戶定位問題。
2.2 償債能力
1）概覽
展示了權(quán)益乘數(shù)、資產(chǎn)負(fù)債率、利息倍數(shù)、銷售現(xiàn)金比率這4個(gè)指標(biāo)的本期和同期值；通過文本+分析區(qū)表格來實(shí)現(xiàn)。
2）現(xiàn)金流量分析
分別展現(xiàn)現(xiàn)金流量和凈流量兩個(gè)指標(biāo)的當(dāng)期值、同期值、增減率隨著時(shí)間變化的趨勢(shì)情況。
通過按鈕組方式，來切換兩個(gè)指標(biāo)。通過設(shè)置按鈕【自定義樣式】【選中自定義樣式】來實(shí)現(xiàn)好看的效果
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3）經(jīng)營活動(dòng)現(xiàn)金流量簡表
按照項(xiàng)目維度看現(xiàn)金流量指標(biāo)；通過分析區(qū)表格+迷你進(jìn)度圖來實(shí)現(xiàn)；
2.3 盈利能力
1）資產(chǎn)周轉(zhuǎn)率分析
左側(cè)部分展示了計(jì)劃、截止當(dāng)前、計(jì)劃完成率、截止上年同期、同比增長率這五個(gè)重要指標(biāo)；
右側(cè)部分通過多系列柱狀圖來展示指標(biāo)的當(dāng)期、同期、預(yù)算三個(gè)值隨著時(shí)間變化趨勢(shì)，方便用戶直觀對(duì)比，來實(shí)時(shí)監(jiān)控異常情況。
2）資產(chǎn)周轉(zhuǎn)率分析
左側(cè)部分按照存貨、時(shí)間兩個(gè)維度對(duì)指標(biāo)進(jìn)行對(duì)比分析；右側(cè)部分通過環(huán)比圖來展示不同指標(biāo)存貨的占比情況。
3）利潤簡表
按照項(xiàng)目維度看利潤指標(biāo)；通過分析區(qū)表格+迷你進(jìn)度圖來實(shí)現(xiàn)；
2.4 運(yùn)營能力
1）資產(chǎn)周轉(zhuǎn)率分析
左側(cè)部分通過流程圖的方式靈活展現(xiàn)指標(biāo)間的關(guān)系；然后通過點(diǎn)擊圖上的指標(biāo)，聯(lián)動(dòng)右側(cè)面積圖，對(duì)指標(biāo)進(jìn)行趨勢(shì)分析。
2）庫齡分析
左側(cè)部分通過柱狀堆積圖的方式展現(xiàn)存貨的庫齡分布情況；右側(cè)部分通過環(huán)比圖的方式，直觀展現(xiàn)存貨的庫存情況。
3）賬齡分析
通過柱狀堆積圖的方式展現(xiàn)存貨的賬齡分布情況；
4）呆滯預(yù)警分析
展現(xiàn)材料、產(chǎn)品、在產(chǎn)、半產(chǎn)品、應(yīng)收五類產(chǎn)品的呆滯情況，通過儀表盤的方式直觀呈現(xiàn)，讓用戶一眼即能發(fā)現(xiàn)問題所在。
三、腳本說明
1、財(cái)務(wù)概覽
腳本1：更改滾動(dòng)條樣式
腳本中引用了js腳本文件，文件的存儲(chǔ)在資源管理器中(路徑為:vfs/root/products/ebi/sys/slimscrollbody.js）
-
//更改滾動(dòng)條樣式
-
EUI.addStyleSheet("#BODYAREA{overflow:hidden !important}");
-
EUI.addStyleSheet(".scrollBarContainerClass{width:10px !important;}");
-
EUI.addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#082F2E !important;}");
-
-
EUI.include("vfs/root/products/ebi/sys/slimscrollbody.js");
復(fù)制代碼
腳本2：自定義單元格后綴樣式
-
//定義方法；參數(shù)含義：表元ID、文本、字體大小、字體顏色、字體樣式
-
function setSub(cellId,unit,subFontSize,fontColor,fontWeight){
-
var content=document.getElementById(cellId).textContent;
-
document.getElementById(cellId).innerHTML=content+'<font style="font-size:'+subFontSize+'px;color:'+fontColor+';font-weight:'+fontWeight+'">'+unit+'</font>';
-
}
-
//方法調(diào)用
-
setSub('GRID2.A1',' 萬元',12,'#4fffc7','normal');
-
setSub('GRID2.B3',' %',12,'#4fffc7','normal');
-
setSub('GRID3.A1',' 萬元',12,'#2af0e1','normal');
復(fù)制代碼
腳本1：參數(shù)樣式控制
-
EUI.addStyleSheet('.eui-form-select .eui-form-select-icon{border: 1px solid #055A48;color:#128157}');
-
EUI.addStyleSheet('.eui-form-select > input:first-child {border: 1px solid #055A48;}');
-
EUI.addStyleSheet('.eui-form-select > input:first-child {font-size: 14px;color:#1CEAA8;padding-left: 20px;}')
復(fù)制代碼
四、資源文件
1、報(bào)表資源
說明：.rptttpl后綴文件新建空?qǐng)?bào)表后如下圖所示上傳
2、圖片資源
直接上傳到資源管理器，默認(rèn)的路徑：vfs/root/products/ebi/sys/picture/行業(yè)demo/財(cái)務(wù)
注意：直接上傳【切圖.zip】文件后上傳。路徑不要輕易修改，報(bào)表中在引用時(shí)使用了文件路徑
3、腳本資源
直接上傳到資源管理器，默認(rèn)的路徑：/vfs/root/products/ebi/sys
注意：路徑不要輕易修改，報(bào)表中在引用時(shí)使用了文件路徑
4、資源文件
（部分內(nèi)容來源網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)聯(lián)系刪除）
