一、概述
本文將對FVS大屏編輯模式的基礎開發流程進行介紹,從新建-開發-預覽-掛載。
二、新建大屏範本
1
點擊菜單欄中的【檔案】→【新建大屏範本】,彈出大屏範本的設定介面。
注:V1.2.0 及之後版本,在新建大屏範本時,檢測是否缺失環境檔案,導致無法新建或開啟大屏範本。
若本機設計器環境下缺失內容,則會提示【缺失環境檔案,無法新建或開啟大屏模板。是否更新升級】,點選【立即升級】,則進入設計器升級介面。
若遠端設計環境下缺失內容,則無法建立大屏範本,提示【缺失環境檔案,無法新建或開啟大屏範本。請聯絡管理員協助解決】。管理員檢視報表工程環境,並補充相關 JAR 包即可。
2
設定大屏範本名稱和畫布大小。
大屏範本名稱可任意自訂。
畫布大小支援常用尺寸和自訂尺寸兩種。
常用尺寸:包括高清屏(1280*720px)、超清屏(1920*1080px)、2k屏(2560*1440px)、超寬屏(4864*1294px)。
自訂尺寸:可手動輸入畫布的寬度和高度,單位為px,寬高值範圍為300-50000px。
三、介面概覽
序号 | 名稱 | 簡介 |
---|---|---|
1 | 菜單欄 | 菜單欄與普通報表基本一緻。 在【檔案】下拉框新增【新建大屏範本】按鈕,用於新建FVS大屏範本。 在【範本】下拉框新增【頁面加載結束事件】按鈕,用於新增 JavaScript 代碼。 在【伺服器】下拉框新增【fvs內建素材更新】按鈕,用於更新FVS編輯模式下內建的各類素材。 |
2 | 檔案區 | 檔案區儲存了當前 FineReport 工程下的所有範本,包括普通報表、決策報表、FVS大屏範本。 不支援同時打開非FVS大屏範本和FVS大屏範本。 同一時間只能打開一個FVS大屏範本。 |
3 | 資料源 | 資料源區和普通決策報表的資料源區一緻。 可設定範本資料集和伺服器資料集,并在範本中呼叫。 |
4 | 标題區 | 新建FVS大屏範本時設定的大屏範本名稱。 |
5 | 操作欄 | 進行動作的撤銷、重做操作。 進行組件的組合、拆分操作。 進行組件位置的對齊、調整層級操作。 |
6 | 儲存區 | 使用者制作完FVS大屏範本後,可點擊儲存/預覽範本。 在FVS大屏範本中,普通報表菜單欄的儲存按鈕不存在。 |
7 | 圖層區 | 顯示當前選中分頁下的所有組件。 可對組件進行重命名、删除操作。 可對組件層級進行調整。 可隐藏、鎖定組件。 點擊【8、組件欄】下方的按鈕,可隐藏/展開圖層區。 點擊【圖層區】右上角按鈕,可改變圖層區位置。 |
8 | 組件欄 | 包含五大類組件,選擇需要的組件,新增到分頁中即可編輯使用。 三維組件:包括場景地圖和三維城市。 圖表組件:包括各類分析圖表和原擴展圖表。 文字組件:包括單列标題組件、多列富文字組件和表格組件。 媒體組件:包括本機視頻組件、監控視頻組件和圖片組件。 容器組件:包括網頁框組件和輪播器組件。 |
9 | 畫布主體區 | 大屏範本的主體部分,是一塊所見即所得的設計區域。 新增組件、調整組件都可以在不需要儲存預覽的情況下直接看到效果。 同一時間只能打開一個FVS大屏範本裏的一張分頁的畫布頁面。 請在畫布内放置組件,超出畫布外的内容,在預覽時無法顯示。 |
10 | 畫布分頁區 | 一個FVS大屏範本中可以包含多個分頁。 通過分頁之間的切換可以實現大屏場景或視角的切換。 |
11 | 畫布屬性區 | 支援修改畫布大小、調整畫布自适應模式、調整畫布縮放大小。 |
12 | 配置欄 | 未選中組件時,配置欄可以配置當前分頁的背景和過渡效果等屬性 選中組件時,配置欄可以配置選中組件的内容、交互、動畫、樣式等屬性。 |
四、範本預覽與發佈
1
範本預覽。
制作完成的範本,點擊右上角【預覽】按鈕即可預覽。
請用Chrome浏覽器預覽FVS大屏範本。
2
範本發佈。
FVS大屏範本暫不支持直接挂載到數據決策系統目錄中,請透過超連方式挂載。
連結地址為範本預覽地址,例如:http://localhost:8075/webroot/decision/view/duchamp?viewlet=fvs/demo.fvs。