1. 概述
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FineVis 的相关功能。
1.1 版本
| 报表服务器版本 | 插件版本 | 功能变动 |
|---|---|---|
| 11.0.9 | V1.12.2 | 新增「离屏控制」功能，支持通过手机、平板等移动设备远程操控模板 |
| 11.0.16 | V1.18.1 | 优化：「离屏控制」入口合并到「FVS模板设置」中 |
1.2 应用场景
在大屏参观、汇报等场景下，用户需要向参观者讲解大屏内容，但同时又需要演示模板，若两人配合操作，多少有些不便。
此时通过「离屏控制」功能可实现手持移动端设备对大屏进行远程操控，更便于讲解人独立解说内容。
1.3 功能简介
为 FVS 模板开启「FVS离屏控制」功能后，支持设置「投屏比例」和「交互事件」。
预览时，需在模板的 url 链接末尾增加后缀：&offScreen=true，刷新链接移动端扫码后即可使用。
离屏控制端可以点击模板上原有的所有交互事件，如翻页按钮、点击联动图表、点击弹出窗口等等。
操作演示视频如下：
2. 环境准备
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. 操作步骤
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. 注意事项
4.1 防火墙阻挡离屏授权
问题描述
在确认客户端和离屏控制端处于同一网络环境时，离屏控制端扫码后，客户端未弹出共享授权弹窗。
原因分析
可能是客户端的防火墙阻挡了应用，可尝试关闭防火墙。
解决方案
1）方案一：直接关闭防火墙
2）方案二：防火墙设置>允许应用通过防火墙>更改设置，允许谷歌浏览器应用通过防火墙，具体方法请自行百度。
