帆軟報(bào)表培訓(xùn)課件

帆軟報(bào)表操作培訓(xùn)SQLSKILLSANDDATABASEOPERATIONTRAINING培訓(xùn)人：何廣朋帆軟報(bào)表操作培訓(xùn)SQLSKILLSANDDATABAS1目錄大屏教程JS技巧基礎(chǔ)教程部署集成CONTENTS目錄大屏教程JS技巧基礎(chǔ)教程部署集成CONTENTS2入門介紹設(shè)計(jì)思路圖表入門報(bào)表美化基礎(chǔ)教程01PARTONE入門介紹基礎(chǔ)教程01PARTONE3入門介紹-普通報(bào)表入門介紹-普通報(bào)表4入門介紹-聚合報(bào)表入門介紹-聚合報(bào)表5入門介紹-決策報(bào)表入門介紹-決策報(bào)表6設(shè)計(jì)思路-報(bào)表設(shè)計(jì)流程1）新建數(shù)據(jù)連接：在制作模板之前首先要確保設(shè)計(jì)者知道存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)庫類型、數(shù)據(jù)庫地址、訪問數(shù)據(jù)庫的用戶名密碼，然后在FineReport設(shè)計(jì)器中新建一個(gè)數(shù)據(jù)連接，建立數(shù)據(jù)庫與設(shè)計(jì)器的交互橋梁；2）新建模板與數(shù)據(jù)集：數(shù)據(jù)連接創(chuàng)建好之后，就需要進(jìn)行模板的添加了，數(shù)據(jù)連接是用于整個(gè)工程的，并沒有實(shí)質(zhì)的將數(shù)據(jù)從數(shù)據(jù)庫中取出來，故還需要在特定模板中新建數(shù)據(jù)集，通過數(shù)據(jù)連接從數(shù)據(jù)庫中取數(shù)；3）模板設(shè)計(jì)：數(shù)據(jù)準(zhǔn)備完成之后，就是進(jìn)行模板的設(shè)計(jì)了，模板設(shè)計(jì)是FineReport學(xué)習(xí)過程中的重中之重，我們將模板設(shè)計(jì)分為報(bào)表設(shè)計(jì)、參數(shù)設(shè)計(jì)、圖表設(shè)計(jì)和填報(bào)設(shè)計(jì)四個(gè)部分，這四個(gè)部分是FineReport模板的幾大使用方式，報(bào)表設(shè)計(jì)是純粹的數(shù)據(jù)展示，參數(shù)設(shè)計(jì)是動(dòng)態(tài)查詢數(shù)據(jù)，圖表設(shè)計(jì)是使用圖表來展示數(shù)據(jù)，填報(bào)設(shè)計(jì)是錄入數(shù)據(jù)，將數(shù)據(jù)寫入數(shù)據(jù)庫中，根據(jù)實(shí)際情況確定使用哪一種使用方式，或者聯(lián)合使用哪幾種使用方式；4）模板預(yù)覽：模板設(shè)計(jì)完成之后，保存模板至工程目錄下面，即可預(yù)覽，在web端查看模板效果。設(shè)計(jì)思路-報(bào)表設(shè)計(jì)流程1）新建數(shù)據(jù)連接：在制作模板之前首先要7制作報(bào)表前首先需要定義數(shù)據(jù)來源，實(shí)際用戶系統(tǒng)最常見的就是數(shù)據(jù)保存在數(shù)據(jù)庫中，并且在不斷更新中，使用數(shù)據(jù)庫數(shù)據(jù)來制作報(bào)表，并且報(bào)表內(nèi)容會(huì)隨著數(shù)據(jù)庫的更新而更新。FR天然支持這一點(diǎn)，只需要在服務(wù)器>定義數(shù)據(jù)連接中定義需要連接的數(shù)據(jù)庫，就可以自定義查詢語句查詢出需要的數(shù)據(jù)，從而制作報(bào)表，如下圖：數(shù)據(jù)連接存儲(chǔ)在工程中，當(dāng)用戶執(zhí)行需要訪問數(shù)據(jù)庫的操作時(shí)這些連接被激活。設(shè)計(jì)思路-數(shù)據(jù)連接制作報(bào)表前首先需要定義數(shù)據(jù)來源，實(shí)際用戶系統(tǒng)最常見的就是數(shù)據(jù)8設(shè)計(jì)思路-數(shù)據(jù)集1.數(shù)據(jù)集是指從數(shù)據(jù)庫中將數(shù)據(jù)取出來，可直接應(yīng)用于模板設(shè)計(jì)的數(shù)據(jù)展現(xiàn)集合。2.數(shù)據(jù)集按照其使用范圍可以分為服務(wù)器數(shù)據(jù)集，模板數(shù)據(jù)集兩種。3.

服務(wù)器數(shù)據(jù)集在服務(wù)器>服務(wù)器數(shù)據(jù)集處定義，適用于整個(gè)服務(wù)器上所有報(bào)表的數(shù)據(jù)集，其類型分為：數(shù)據(jù)庫查詢，內(nèi)置數(shù)據(jù)集，文件數(shù)據(jù)集，SAP數(shù)據(jù)集，存儲(chǔ)過程，多維數(shù)據(jù)庫、關(guān)聯(lián)數(shù)據(jù)集以及樹數(shù)據(jù)集。設(shè)計(jì)思路-數(shù)據(jù)集1.數(shù)據(jù)集是指從數(shù)據(jù)庫中將數(shù)據(jù)取出來，可直9模板設(shè)計(jì)是FineReport學(xué)習(xí)過程中的主要難題所在，F(xiàn)ineReport模板設(shè)計(jì)主要包括普通模板設(shè)計(jì)、決策報(bào)表設(shè)計(jì)和聚合報(bào)表設(shè)計(jì)三種模板設(shè)計(jì)類型設(shè)計(jì)思路-模板設(shè)計(jì)類型模板設(shè)計(jì)是FineReport學(xué)習(xí)過程中的主要難題所在，F(xiàn)i10圖表入門-圖表制作流程以圖所示的柱形圖為例，展示各個(gè)地區(qū)產(chǎn)品類型的銷量情況，為大家簡單的介紹下圖表的制作流程圖表入門-圖表制作流程以圖所示的柱形圖為例，展示各個(gè)地區(qū)產(chǎn)品11圖表入門-圖表制作事例2134插入圖表并選擇圖表類型準(zhǔn)備數(shù)據(jù)定義圖表數(shù)據(jù)圖表樣式設(shè)置整體界面圖表入門-圖表制作事例2134插入圖表并選擇圖表類型準(zhǔn)備數(shù)據(jù)12報(bào)表美化-報(bào)表配色技巧帆軟為報(bào)表的顯示外觀提供了全面細(xì)致的屬性設(shè)置，可從各個(gè)細(xì)節(jié)靈活美化報(bào)表。加上預(yù)定義樣式的使用，可以方便的對報(bào)表外觀風(fēng)格進(jìn)行統(tǒng)一控制，也能大大提高報(bào)表美化的效率。還能通過條件屬性控制報(bào)表的顯示效果。配合樣式美觀、種類豐富、格式多樣的折線圖、面積圖、組合圖、地圖、漏斗圖等，同時(shí)開放部分圖表js接口，支持集成第三方圖表庫，用戶可以進(jìn)行個(gè)性化圖表的設(shè)計(jì)，讓報(bào)表數(shù)據(jù)的展示變得更生動(dòng)美觀。1.設(shè)計(jì)器里選色：點(diǎn)擊背景右側(cè)的小三角，點(diǎn)擊更多顏色，點(diǎn)擊自定義選項(xiàng)卡，這里的HSL或者RGB值，就是我們需要得到的精確的顏色，如下圖所示。RGB是對機(jī)器很友好的色彩模式，但并不夠人性化，因?yàn)槲覀儗ι实恼J(rèn)識往往是”什么顏色？鮮艷不鮮艷？亮還是暗？”HSL模式和HSV(HSB)都是基于RGB的，是作為一個(gè)更方便友好的方法創(chuàng)建出來的。HSL即色相、飽和度、亮度（Hue,Saturation,Lightness）。HSV即色相、飽和度、明度（Hue,Saturation,Value），又稱HSB，其中B即英語：Brightness。色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取0-100%的數(shù)值。明度（V），亮度（L）取0-100%。報(bào)表美化-報(bào)表配色技巧帆軟為報(bào)表的顯示外觀提供了13報(bào)表美化-報(bào)表設(shè)計(jì)與配色技巧2.設(shè)計(jì)器直接取色：新版本增加了設(shè)計(jì)器直接取色的功能，如下：3.推薦色彩（均為HSB顏色設(shè)置）報(bào)表美化-報(bào)表設(shè)計(jì)與配色技巧2.設(shè)計(jì)器直接取色：新版本增加了14JS概述跑馬燈案例分析JS技巧02PARTTWOJS概述JS技巧02PARTTWO15JavaScript概述

FineReport報(bào)表采用jQueryv1.9.1框架，jQuery是一個(gè)快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTMLdocuments、events、實(shí)現(xiàn)動(dòng)畫效果，方便地為網(wǎng)站提供AJAX交互，并且它兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。FineReport報(bào)表解析后最終成為一個(gè)html頁面，因此可以使用JS對報(bào)表進(jìn)行各種處理，您可以使用jQuery框架的所有方法對報(bào)表進(jìn)行操作，在此基礎(chǔ)上，F(xiàn)ineReport還封裝了很多內(nèi)置的js方法。本節(jié)我們就JS的基本使用做一個(gè)介紹。

JavaScript是一種腳本語言，它可以用來制作與網(wǎng)絡(luò)無關(guān)的，起到與用戶交互作用的復(fù)雜軟件。它是一種基于對象（ObjectBased）和事件驅(qū)動(dòng)（EventDriver）的編程語言。JavaScript是動(dòng)態(tài)的，它可以直接對用戶或客戶輸入做出響應(yīng)，無須經(jīng)過Web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在主頁(HomePage)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就稱為“事件”(Event)。比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)

JavaScript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行。即JavaScript源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶端由瀏覽器直接解釋執(zhí)行JavaScript概述FineReport161).JS作用機(jī)理設(shè)計(jì)模板時(shí)可以給控件、工具欄按鈕、整個(gè)報(bào)表添加JS事件，每個(gè)事件對應(yīng)一個(gè)function。當(dāng)報(bào)表轉(zhuǎn)為html頁面時(shí)會(huì)將這些function加到html的頭部head。當(dāng)事件被觸發(fā)時(shí)如點(diǎn)擊按鈕時(shí)，或者導(dǎo)出打印報(bào)表時(shí)，對應(yīng)的function就會(huì)被執(zhí)行。

2).引入現(xiàn)成的js文件單個(gè)模板引入外部js文件：模板>模板web屬性>引用JavaScript；報(bào)表工程下所有模板統(tǒng)一引入外部js文件：服務(wù)器>服務(wù)器配置>引用JavaScript。相對路徑引用js：相對于報(bào)表工程目錄如webapps，如webapps\webroot\help下有引用的js文件demo.js；絕對路徑引用js：如D:\tomcat\webapps\WebReport\WEB-INF\scripts\script.js。

3).事件編輯界面FineReport有統(tǒng)一的事件編輯界面，如按鈕控件設(shè)置>事件>添加點(diǎn)擊事件便可看到事件編輯界面了，如下圖JavaScript使用1).JS作用機(jī)理JavaScript使用17JavaScript使用JavaScript使用18跑馬燈案例分析1).確定數(shù)據(jù)源2).創(chuàng)建決策報(bào)表，把body畫板的布局方式改為絕對布局。3）拖入報(bào)表塊，點(diǎn)擊編輯，進(jìn)行編輯狀態(tài)，綁定好數(shù)據(jù)

4).返回到畫板界面，點(diǎn)擊“事件”，在事件編輯界面，把代碼復(fù)制過去。按實(shí)際的報(bào)表名稱設(shè)整跑馬燈案例分析1).確定數(shù)據(jù)源19JavaScript腳本setTimeout(function(){//隱藏報(bào)表塊report0的滾動(dòng)條（此報(bào)表塊名為report0，根據(jù)具體情況修改）$("div[widgetname=REPORT0]").find(".frozen-north")[0].style.overflow="hidden";$("div[widgetname=REPORT0]").find(".frozen-center")[0].style.overflow="hidden";},100);window.flag=true;//鼠標(biāo)懸停，滾動(dòng)停止setTimeout(function(){

$(".frozen-center").mouseover(function(){window.flag=false;});//鼠標(biāo)離開，繼續(xù)滾動(dòng)

$(".frozen-center").mouseleave(function(){window.flag=true;});varold=-1;varinterval=setInterval(function(){

if(window.flag){currentpos=$(".frozen-center")[0].scrollTop;

if(currentpos==old){

$(".frozen-center")[0].scrollTop=0;

}else{old=currentpos;

//以25ms的速度每次滾動(dòng)1.5PX

$(".frozen-center")[0].scrollTop=currentpos+1.5;

}}},25);},1000);詳細(xì)操作參考：http:///doc-view-2393.htmlJavaScript腳本setTimeout(functi20大屏介紹大屏模板制作大屏FAQ大屏教程03PARTTWO大屏介紹大屏教程03PARTTWO21大屏介紹-描述帆軟為企業(yè)提供數(shù)字大屏解決方案，通過帆軟的數(shù)據(jù)分析產(chǎn)品，用戶可以構(gòu)建強(qiáng)大、全面的“管理駕駛艙”，無需專門設(shè)計(jì)，就可以將企業(yè)的數(shù)據(jù)管理信息完美地投放在任何屏幕，比如交易大廳、管控中心、生產(chǎn)車間、展覽中心等地的LED大屏上?？梢詫?shí)現(xiàn)完美的自適應(yīng)效果，對于大屏實(shí)時(shí)監(jiān)控的信息，比如股價(jià)，雙11類活動(dòng)實(shí)時(shí)交易狀況，都可以通過圖表屬性的自動(dòng)刷新功能實(shí)時(shí)同步數(shù)據(jù)庫數(shù)據(jù)。也支持用戶對于大屏的展現(xiàn)內(nèi)容進(jìn)行DIY的設(shè)計(jì)，持接近20種圖表類型和延伸的多種圖表樣式，支持添加文本、圖片、Web信息實(shí)現(xiàn)各種DIY的布局樣式。大屏介紹-描述帆軟為企業(yè)提供數(shù)字大屏解決方案，通過帆軟的數(shù)據(jù)22大屏介紹-布局排版首先要遵循一個(gè)基準(zhǔn)：不要為了做大屏而做大屏，不要為了展現(xiàn)而展現(xiàn)。就是說要明確大屏展現(xiàn)的目的，首要是服務(wù)于業(yè)務(wù)的。要讓業(yè)務(wù)內(nèi)容、數(shù)據(jù)合理的展現(xiàn)，就要避免誤入瘋狂堆砌指標(biāo)，要分清主次。主要指標(biāo)：反應(yīng)核心業(yè)務(wù)內(nèi)容的。次要指標(biāo)：用于進(jìn)一步闡述主要指標(biāo)的。大屏介紹-布局排版首先要遵循一個(gè)基準(zhǔn)：不要為了做大屏而做大屏23大屏介紹-配色合理的布局能讓業(yè)務(wù)內(nèi)容更富有層次，合理的配色能讓觀看者更舒適。這里講解一下背景色，背景色又分為整體背景以及單個(gè)元素的背景，無論是哪一個(gè)，都遵從兩點(diǎn)基本原則：深色調(diào)&一致性。一般大屏?xí)x擇深色系，主要是為了避免視覺刺激。淺色系的，投放到大屏上后會(huì)比較刺眼。大屏介紹-配色合理的布局能讓業(yè)務(wù)內(nèi)容更富有層次，合理的配色能24大屏介紹-配色整體背景深色系，一般還是以深藍(lán)色系為主，如下所示是幾個(gè)推薦的配色方案。背景不一定要用顏色的，也可以用圖片。圖片的使用依舊遵從整體深色的原則，同時(shí)搭配其他一些現(xiàn)實(shí)特性可以讓整體看著更有科技感。推薦使用一些帶有星空、條紋、漸變線、點(diǎn)綴效果之類的圖片。大屏介紹-配色整體背景深色系，一般還是以深藍(lán)色系為主，如下所25大屏介紹-點(diǎn)綴在大屏展現(xiàn)上，細(xì)節(jié)也會(huì)極大的影響整體效果，通過適當(dāng)給元素、標(biāo)題、數(shù)字等添加一些諸如邊框、圖畫等在內(nèi)的點(diǎn)綴效果，能幫助提升整體美觀度大屏介紹-點(diǎn)綴在大屏展現(xiàn)上，細(xì)節(jié)也會(huì)極大的影響整體效果，通過26大屏介紹-動(dòng)效動(dòng)效的范圍很廣，可以從很多角度解讀，比如背景動(dòng)畫，比如刷新的加載動(dòng)畫，比如輪播動(dòng)畫，比如圖表的閃爍動(dòng)畫，地圖的流向動(dòng)畫等等，都屬于動(dòng)態(tài)效果的范疇。動(dòng)效的增加能讓大屏看上去是活的，增加觀感體驗(yàn)。但過分的動(dòng)效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而喪失了業(yè)務(wù)展現(xiàn)價(jià)值。這個(gè)度很難把握，既要平衡酷炫效果，又要突出內(nèi)容。大屏介紹-動(dòng)效動(dòng)效的范圍很廣，可以從很多角度解讀，比如背景動(dòng)27大屏模板制作-準(zhǔn)備工作確認(rèn)需求、準(zhǔn)備數(shù)據(jù)、整理素材。這里假定需求已由業(yè)務(wù)部敲定，數(shù)據(jù)也整理好了，而需要的背景圖片、邊框等事先都整理完畢。設(shè)計(jì)大屏駕駛艙遵循四個(gè)基本步驟：布局排版——色彩——點(diǎn)綴效果——?jiǎng)赢?。大屏模板制?準(zhǔn)備工作確認(rèn)需求、準(zhǔn)備數(shù)據(jù)、整理素材。這里假定28對比類的數(shù)據(jù)適合用柱形圖，占比類的數(shù)據(jù)適合用餅圖，交易明細(xì)數(shù)據(jù)適合用表格。這樣，我們就確定了布局里的幾個(gè)主要元素：柱形圖、餅圖、表格。由于這里報(bào)表塊使用了重疊的功能，因此需要使用絕對布局，如下圖：大屏模板制作-模板制作打開

FineReport

設(shè)計(jì)器，按照布局樣式，從組件欄拖入對應(yīng)的圖表元素到指定區(qū)域并綁定數(shù)據(jù)，如下圖所示：對比類的數(shù)據(jù)適合用柱形圖，占比類的數(shù)據(jù)適合用餅圖，交易明細(xì)數(shù)29大屏模板制作-配色前面總結(jié)過，大屏的主體背景建議用深色系，這樣可以有效避免視覺刺激。因此背景色換成背景圖片，由于整體背景是深色的，使得我們的一些標(biāo)題文字還看上去不明顯，而且圖表有種沉悶的感覺，稍微調(diào)整了下，把文字內(nèi)容改成淺色、圖表則換稍微明亮一點(diǎn)的顏色，如下圖：大屏模板制作-配色前面總結(jié)過，大屏的主體背景建議用深色系，這30獨(dú)立部署嵌入式部署部署集成04PARTTWO獨(dú)立部署部署集成04PARTTWO31部署集成-獨(dú)立部署把FineReport_10.0/webapps目錄下的webroot文件拷貝到%Tomcat_HOME%/webapps/下：將%JAVA_HOME%/jdk/lib下的tools.jar拷貝到部署的服務(wù)器中的lib目錄中部署集成-獨(dú)立部署把FineReport_10.0/weba32部署集成-獨(dú)立部署報(bào)表應(yīng)用發(fā)布(部署)成功后，便可以在客戶端瀏覽器中訪問了。在客戶端瀏覽器中輸入訪問地址http://ip:端口/工程名/decision/view/report?viewlet=GettingStarted.cpt，發(fā)送請求給Web應(yīng)用服務(wù)器如tomcat；Web應(yīng)用服務(wù)器會(huì)將請求信息發(fā)送給報(bào)表servlet；報(bào)表servlet根據(jù)請求信息，如獲取希望查看的模板名稱viewlet=GettingStarted.cpt，在后臺計(jì)算生成GettingStarted.cpt的內(nèi)容，返回給Web應(yīng)用服務(wù)器；最后Web應(yīng)用服務(wù)器將結(jié)果返回給客戶端瀏覽器，瀏覽器將報(bào)表結(jié)果呈現(xiàn)給我們。注：若Web應(yīng)用服務(wù)器可以在外網(wǎng)進(jìn)行訪問，那么我們就可以外網(wǎng)訪問報(bào)表了。在瀏覽器中輸入訪問地址http://ip:端口/工程名/decision，返回如下界面，則部署成功：部署集成-獨(dú)立部署報(bào)表應(yīng)用發(fā)布(部署)成功后，便可以在客戶端33部署集成-集成部署由報(bào)表應(yīng)用目錄結(jié)構(gòu)章節(jié)可知，若希望將報(bào)表部署到已有的工程中時(shí)，需要按照下圖所示的目錄結(jié)構(gòu)，將報(bào)表相關(guān)的文件拷貝到相應(yīng)目錄：部署集成-集成部署由報(bào)表應(yīng)用目錄結(jié)構(gòu)章節(jié)可知，若希望將報(bào)表部34部署集成-集成部署2.1

全部復(fù)制為了簡便，可以直接將%FineReport_HOME%\webapps\webroot\WEB-INF目錄下面的assets、assist、classes、lib、plugins、reportlets、resources七個(gè)文件夾復(fù)制到%Tomcat_HOME%\webapps\examples\WEB-INF下。2.2

部分復(fù)制也可以選擇性的只復(fù)制必要性文件至已有工程中。

1）必須復(fù)制的文件lib中以fine開頭的jar包：包含了報(bào)表服務(wù)的所有功能，必須拷貝至WEB-INF\lib下；assets：新特性圖表8.6.0及以后版本存放圖表資源的目錄。assist：存放一些輔助工具，比如新圖表要使用phantom等。plugins：該文件夾包含了報(bào)表管理里安裝的所有插件的jar包和配置信息，拷貝至WEB-INF下面。reportlets：該文件夾為FineReport服務(wù)器規(guī)定的，不能修改，且必須為小寫，其下可以建立子目錄，所有報(bào)表模板cpt文件必須保存