一、頁面一覽【財務概覽】
【償債能力】【盈利能力】【運營能力】二、頁面分析1、整體框架
主題表： 使用rand()函數產生隨機數
頁面結構：寬百分比，高固定，自定義布局
2、模塊詳解
2.1 財務概覽
1）財務信息
此模塊由左右2部分組成，左側展示了營業收入、凈利潤、凈利率、人均凈利率、凈資產收益率這五個指標以及預算完成率，通過分析區表格實現；右側是企業財務運營情況的概覽，通過文本來實現；（表格中涉及一個有趣的腳本，詳情參見腳本說明）
2）KPI指標分析
展示了營業收入、成本、凈利潤、毛利、期間費用、應收賬款這六個指標，以簡表的形式，清晰的展示預算額，實際數以及完成率。另外以線狀圖來展示5年來的趨勢。
3）財務管理解析
以架構圖的方式，把財務的指標進行層層解析，進行指標溯源，幫助用戶定位問題。
2.2 償債能力
1）概覽
展示了權益乘數、資產負債率、利息倍數、銷售現金比率這4個指標的本期和同期值；通過文本+分析區表格來實現。
2）現金流量分析
分別展現現金流量和凈流量兩個指標的當期值、同期值、增減率隨著時間變化的趨勢情況。
通過按鈕組方式，來切換兩個指標。通過設置按鈕【自定義樣式】【選中自定義樣式】來實現好看的效果
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3）經營活動現金流量簡表
按照項目維度看現金流量指標；通過分析區表格+迷你進度圖來實現；
2.3 盈利能力
1）資產周轉率分析
左側部分展示了計劃、截止當前、計劃完成率、截止上年同期、同比增長率這五個重要指標；
右側部分通過多系列柱狀圖來展示指標的當期、同期、預算三個值隨著時間變化趨勢，方便用戶直觀對比，來實時監控異常情況。
2）資產周轉率分析
左側部分按照存貨、時間兩個維度對指標進行對比分析；右側部分通過環比圖來展示不同指標存貨的占比情況。
3）利潤簡表
按照項目維度看利潤指標；通過分析區表格+迷你進度圖來實現；
2.4 運營能力
1）資產周轉率分析
左側部分通過流程圖的方式靈活展現指標間的關系；然后通過點擊圖上的指標，聯動右側面積圖，對指標進行趨勢分析。
2）庫齡分析
左側部分通過柱狀堆積圖的方式展現存貨的庫齡分布情況；右側部分通過環比圖的方式，直觀展現存貨的庫存情況。
3）賬齡分析
通過柱狀堆積圖的方式展現存貨的賬齡分布情況；
4）呆滯預警分析
展現材料、產品、在產、半產品、應收五類產品的呆滯情況，通過儀表盤的方式直觀呈現，讓用戶一眼即能發現問題所在。
三、腳本說明
1、財務概覽
腳本1：更改滾動條樣式
腳本中引用了js腳本文件，文件的存儲在資源管理器中(路徑為:vfs/root/products/ebi/sys/slimscrollbody.js）
-
//更改滾動條樣式
-
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");
復制代碼
腳本2：自定義單元格后綴樣式
-
//定義方法；參數含義：表元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>';
-
}
-
//方法調用
-
setSub('GRID2.A1',' 萬元',12,'#4fffc7','normal');
-
setSub('GRID2.B3',' %',12,'#4fffc7','normal');
-
setSub('GRID3.A1',' 萬元',12,'#2af0e1','normal');
復制代碼
腳本1：參數樣式控制
-
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;}')
復制代碼
四、資源文件
1、報表資源
說明：.rptttpl后綴文件新建空報表后如下圖所示上傳
2、圖片資源
直接上傳到資源管理器，默認的路徑：vfs/root/products/ebi/sys/picture/行業demo/財務
注意：直接上傳【切圖.zip】文件后上傳。路徑不要輕易修改，報表中在引用時使用了文件路徑
3、腳本資源
直接上傳到資源管理器，默認的路徑：/vfs/root/products/ebi/sys
注意：路徑不要輕易修改，報表中在引用時使用了文件路徑
4、資源文件
（部分內容來源網絡，如有侵權請聯系刪除）
