FVS離屏控制

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。

1.1 版本

1.2 應用場景

在企業戰情室參觀、匯報等場景下，使用者需要向參觀者講解企業戰情室內容，但同時又需要示範範本，若兩人配合操作，多少有些不便。

此時透過「離屏控制」功能可實現手持行動端裝置對企業戰情室進行遠端操控，更便於講解人獨立解說內容。

1.3 功能簡介

為 FVS 範本開啟「FVS離屏控制」功能後，支援設定「投屏比例」和「交互事件」。

預覽時，需在範本的 url 連結末尾增加後綴：&offScreen=true，重新整理連結行動端掃碼後即可使用。

離屏控制端可以點選範本上原有的所有交互事件，如翻頁按鈕、點選聯動圖表、點選彈出視窗等等。

操作示範視頻如下：

2.1 硬體環境

• 伺服器端：滿足 FineReport 工程要求即可，推薦配置請參見 FineReport 硬體配置。 

• 用戶端：即用於投屏到大螢幕上的 PC，或 MAXHUB 等一體機，使用者透過用戶端存取伺服器上的 FVS 範本。推薦配置請參見 FVS安裝及配置要求。 

• 離屏控制端：即用於控制企業戰情室的行動裝置，如手機和平板，使用者透過觸控螢幕幕來控制企業戰情室。

2.2 軟體環境

• 伺服器端：FineReport11.0.9 及以上環境，並安裝 FVS 插件 V1.12.2 及以上版本。（用本地設計器測試，則安裝在用戶端即可） 

• 用戶端：使用 Chrome瀏覽器預覽 FVS範本，如有 3D組件，最低版本要求為 86 版本。 

• 離屏控制端：點選下載安裝最新版 資料分析App 。

2.3 網路環境

2.3.1 localhost 環境

用戶端存取 localhost 時，需和離屏控制端需保持在同一網路環境下，即連結同一 WIFI 並且 IP 在同一網段，且 WIFI 沒有設定網路隔離。 

注：若 WIFI 設定了網路隔離可自行開熱點使用。

2.3.2 除 localhost 以外的環境

1）用戶端存取除 localhost 以外的 ip 地址或遠端伺服器時，同樣需和離屏控制端需保持在同一網路環境，且 WIFI 沒有設定網路隔離。

另外，如果是 http 或者不被瀏覽器信任的憑證，需在 chrome://flags/ 中配置 insecure ，填入存取伺服器的 ip 地址和埠（http://ip:埠），選擇 Enabled，點選 Relaunch 重啟瀏覽器。

注：如需新增多個地址，需用英文逗號「,」隔開。

如下圖所示：

2）投屏的用戶端若連結的是有線網，除以上要求外，還需要在 chrome://flags/ 中配置 mdns ，選擇 Disabled 後點選 Relaunch 重啟瀏覽器。如下圖所示：

3.1 開啟離屏控制

1）點選下載範本 國家藥品監督管理統計報表.fvs ，將範本儲存在當前運作環境目錄下。

2）在設計器中開啟範本，點選畫布右上角「範本設定>離屏控制」彈出設定框，選擇「離屏控制」，勾選「開啟fvs離屏控制」。

如下圖所示：

3.2 選擇投屏比例

投屏比例指範本在「離屏控制端」區域性放大的比例，最終效果會根據離屏控制端寬高比例確定，近似保留設定的比例效果，以保證離屏控制端內容充滿。

離屏控制時，在離屏控制端左上角生成「範本地圖」，展示比例效果。僅以兩種效果作為示範，對比如下所示：

• 1:1

• 1:4

本文範例選擇 1:1 ，如下圖所示：

3.3 交互事件

交互事件預設存在一個「切換範本頁面」事件，按鈕名稱預設為「切換頁面」，支援修改名稱或取消勾選事件，不支援刪除。

本例保持預設即可，如下圖所示：

若不想使用預設事件，或範本中有些交互事件不便於行動端操作時，支援「新增交互事件」，透過 JavaScript 腳本實現。

新增的交互事件支援編輯和刪除（編輯和刪除不可廢除）。

在離屏控制端點選右下角交互事件列表按鈕   ，即可看到設定的交互事件。如下圖所示：

3.4 預覽並新增後綴

離屏控制設定完成後，預覽範本，在 url 末尾新增後綴 &offScreen=true 後回車重新整理網頁，出現離屏控制QRCODE。如下圖所示：

3.5 離屏控制端掃碼

保障離屏控制裝置和用戶端在同一網路環境下，透過離屏控制端的「資料分析」App 掃描QRCODE，隨後等待用戶端授權。

注：Mac 系統電腦首次掃碼需開啟 Chrome 螢幕錄製權限，如下圖所示。

3.6 用戶端授權

在用戶端選擇要分享的頁面，選擇「視窗」或「整個螢幕」，確認後點選分享即可完成授權。如下圖所示：

注：離屏控制需要在網頁全螢幕使用。完成授權後，請將瀏覽器頁面全螢幕且瀏覽器頁面縮放保持為 100%，否則離屏控制端的點選事件可能會發生位置偏移 。

3.7 開始離屏控制

授權完成後，控制端即可操控 FVS 範本。詳情可參見 1.3 節示範視頻。

另外離屏控制時，在離屏控制端左上角生成的「範本地圖」，支援雙擊放大，放大後按還原；手指點選或滑動範圍時，範本展示內容跟隨「範本地圖」變化。

如下圖所示：

4.1 防火牆阻擋離屏授權

問題描述

在確認用戶端和離屏控制端處於同一網路環境時，離屏控制端掃碼後，用戶端未彈出共享授權彈窗。

原因分析

可能是用戶端的防火牆阻擋了應用，可嘗試關閉防火牆。

解決方案

1）方案一：直接關閉防火牆

2）方案二：防火牆設定>允許應用透過防火牆>更改設定，允許谷歌瀏覽器應用透過防火牆，具體方法請自行百度。