1. 概述
適用場景：安裝了「FineVis數據可視化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
1.1 版本
| 報表伺服器版本 | JAR包 | 插件版本 |
|---|---|---|
| 11.0 | 2021-11-15 | V1.0.0 |
1.2 場景介紹
本文主要介紹的是利用 FVS 大屏編輯模式的多分頁設計，實現幻燈片示範效果。
1.3 實現思路
使用 FVS 製作示範匯報範本的思路如下：
1）梳理示範範本的故事脈絡，整理出範本的大體框架，再收集範本所需要的資料。
2）按照整理好的順序進行分頁設計，初步完成範本內容的製作。
3）進行視覺設計，優化範本視覺效果。
4）補充組件動畫，調整細節，實現最終效果。
2. 功能實現
本文主要講解範本 切換分頁、組件動畫、彈出框 等功能的實現，不詳細講解範本的製作思路。
2.1 切換分頁
1）FVS 範本包含多分頁時，可以設定預覽播放的方式，預設勾選「循環播放頁面」和「顯示切換按鈕」，但為了預覽介面更美觀，這裏我們取消「顯示切換按鈕」。如下圖所示：
2）取消切換按鈕後，可以透過電腦鍵盤的左右按鍵實現分頁切換，若還是希望在頁面上能透過滑鼠點選實現切換，那麼可以透過切換分頁API實現。
| API | 說明 |
|---|---|
| duchamp.switchStory("頁面4"); | 跳轉到頁面4 |
| duchamp.nextStory(); | 跳轉到下一頁 |
| duchamp.previousStory(); | 跳轉到上一頁 |
例如新增一個 圖片組件，自訂上傳一張合適的圖片。如下圖所示：
：
再給該圖片新增一個 JavaScript 點選事件，輸入 duchamp.nextStory(); 即可實現點選跳轉下一頁。
2.2 組件3D旋轉
在範本中，可能會用到很多樣式相同但方向相反的圖片，這時我們可以透過組件屬性中的「3D旋轉」去實現方向的改變。
例如下圖中的兩組圖片：
z軸設定為 0° 和 180° 相當於垂直翻轉。如下圖所示：
y軸設定為 0° 和 180° 相當於水平翻轉。如下圖所示：
2.3 組件動畫
使用「組件動畫」可以使得範本示範時具有更豐富、美觀的效果。例如：
選中組件，點選「動畫>動效設定」，預設動效都是淡入淡出，根據希望的效果選擇對應的動效，以及動效時長、進入時機等即可。
在設定組件動畫時，可以將多個組件組合後再進行設定。如下圖所示：
2.4 點選跳出彈出框
在範例範本的「大事記」頁面上，設定了點選事件，點選不同事件可彈出不同的圖片。
2.4.1 製作顯示圖片的普通報表
注：普通報表中設定儲存格顯示圖片的詳細操作請參考文檔 儲存格用HTML顯示圖片 。
1）點選下載本文範例範本所使用的圖片：activity.zip ，將解壓後的 activity 資料夾放到 %FR_HOME%\webapps\webroot\help\picture 工程路徑下，如下圖所示：
2）在設計器中建立普通報表，建立內建資料集如下圖所示：
3）給範本新增一個「範本參數」，用於 FVS 範本實現點選傳參以顯示不同的圖片。如下圖所示：
4）將資料集中的「序號」、「圖片路徑」欄位分別拖入 A1、B1 儲存格。
雙擊序號所在的 A1 儲存格，設定過濾條件為「序號」等於參數 p 。如下圖所示：
5）C1 儲存格插入公式 "<img style='height:400px;width:600px' src='" B1 "'/>" ，公式中定義圖片顯示的寬高為 600*400 。
再設定 C1 儲存格屬性>其他>顯示內容 為「用HTML顯示內容」。如下圖所示：
6）最後將 A、B 兩列隱藏，儲存報表。
2.4.2 在 FVS 範本中設定點選事件
注：FVS 設定點選跳出彈出框的詳細操作請參考文檔 FVS點選跳出彈出框 。
在本文範例範本的大事記分頁中，由於 富文字組件 不支援點選事件，所以我們將 圖片組件 置於富文字組件的上方，給圖片組件新增點選事件。
彈出框內容連結使用相對路徑 /webroot/decision/view/report?viewlet=範例圖片.cpt ，根據事件設定參數 p 等於不同的「序號」。
如下圖所示：
因為在普通報表中，C1 儲存格公式定義了圖片顯示的寬高為 600*400 px，所以彈出框的樣式設定需要根據圖片的尺寸進行適當的調整。
如下圖所示：
3. 資料下載
範本資源下載位址：圖書館年度匯報.zip
