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 后回车刷新网页，出现离屏控制二维码。如下图所示：

3.5 离屏控制端扫码

保障离屏控制设备和客户端在同一网络环境下，通过离屏控制端的「数据分析」App 扫描二维码，随后等待客户端授权。

注：Mac 系统电脑首次扫码需打开 Chrome 屏幕录制权限，如下图所示。

3.6 客户端授权

在客户端选择要分享的页面，选择「窗口」或「整个屏幕」，确认后点击分享即可完成授权。如下图所示：

注：完成授权后，请将浏览器页面全屏且浏览器页面缩放保持为 100%，否则离屏控制端的点击事件位置容易发生偏移。

3.7 开始离屏控制

授权完成后，控制端即可操控 FVS 模板。详情可参见 1.3 节演示视频。

另外离屏控制时，在离屏控制端左上角生成的「模板地图」，支持双击放大，放大后单击还原；手指点击或滑动范围时，模板展示内容跟随「模板地图」变化。

如下图所示：

4.1 防火墙阻挡离屏授权

问题描述

在确认客户端和离屏控制端处于同一网络环境时，离屏控制端扫码后，客户端未弹出共享授权弹窗。

原因分析

可能是客户端的防火墙阻挡了应用，可尝试关闭防火墙。

解决方案

1）方案一：直接关闭防火墙

2）方案二：防火墙设置>允许应用通过防火墙>更改设置，允许谷歌浏览器应用通过防火墙，具体方法请自行百度。