终端交互
终端交互主要用于移动端操控发布的大屏，卸掉沉重的电脑包，提供便捷的移动遥控器功能。
在配置终端交互过程，涉及自定义事件与回调功能，两者实现的最终效果一致，可根据场景下应选择最简单的实现方式。
操作步骤
1. 数据大屏项目
打开 EasyV可视化平台，由首页新建数据大屏项目，进入项目编辑状态;
*数据大屏进行新建
2. 数据大屏页面配置
以多页面切换或轮播效果为例:
2.1 选择使用「交互分类」下 “选项卡”及“iframe”两类型组件;
*数据大屏进行新建选项卡与iframes切换组件
2.2 编辑「iframe」组件数据，如对3个不同页面进行切换或自动轮播，则在下方 iframe 组件数据配置内，分别填写对应页面名称与地址；
2.3 编辑「选项卡」组件样式及数据，配置3个tab 页，分别为“数据可视化”、“袋鼠云官网”、“云掣官网”。
*编辑选项卡与iframe切换组件数据
3. 数据大屏交互配置
3.1 方法一：使用回调功能配置
a）选中「选项卡」组件，查看发现组件的「数据项」唯一标识为字段【s】，右侧切换至「交互」配置，填写字段值为【s】，并将这里变量名填写为【id】。如下图：
*配置选项卡回调参数
注：因为「iframes切换」组件开发过程为了方便与其他组件进行交互，已提供默认回调字段【id】，所以只需将「选项卡」的回调字段与其保持一致，2个组件即建立关系。如下图：
*查看iframes切换组件回调参数
b）点击预览交互效果，如下图：
*Tab切换效果案例
注：当点击「选项卡」切换至云掣官网www.dtsre.com时，组件提示【www.dtsre.com 拒绝了我们的连接请求】，其原因为云掣官网前端x-frame-options:SAMEORIGIN，即只允许该页面在相同页面域名进行引用。
X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 <frame>, </iframe> 或者 <object> 中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌套到别人的网站中去，也从而避免了点击劫持 (clickjacking) 的攻击。
X-Frame-Options三个参数:
1、DENY
表示该页面不允许在frame中展示，即便是在相同域名的页面中嵌套也不允许。
2、SAMEORIGIN
表示该页面可以在相同域名页面的frame中展示。
3、ALLOW-FROM uri
表示该页面可以在指定来源的frame中展示。
换一句话说，如果设置为DENY，不光在别人的网站frame嵌入时会无法加载，在同域名页面中同样会无法加载。另一方面，如果设置为SAMEORIGIN，那么页面就可以在同域名页面的frame中嵌套。正常情况下我们通常使用SAMEORIGIN参数。
*浏览器x-frame-options示例
注：如需通过移动端回调功能进行远程控制数据大屏，需要给触发交互组件配置回调参数，此处触发交互组件为「选项卡」。具体可参考【5.1 方法一：使用回调功能配置】。
3.2 方法二：使用自定义事件配置
a）使用自定义事件，实现tab切换页面效果，因为是在iframe切换组件填写多个网站数据，iframe组件本身不支持交互事件（如动态面板与引用面板，可配置交互事件中切换状态与页面），所以需要拖拽3个iframes切换组件。
b）同样，分别给3个iframes切换组件图层命名数据可视化、袋鼠云官网、云掣官网，并分别设置组件数据。如下图：
*组件图层命名与设置数据
c）选择「选项卡」组件，选择「交互事件」配置项进行创建，由于选项卡分 3 个 tab 页，则此处需创建 3 个交互事件：
- 事件1：Tab页=1，显示当前「数据可视化」
- 事件2：Tab页=2，显示当前「袋鼠云官网」
- 事件3：Tab页=3，显示当前「云掣官网」
如下图：
*配置选项卡交互事件
d）由此大屏上的页面切换效果即配置完成，点击右上角预览进行调试、查看，可发现主动通过鼠标点击已可对页面进行切换；
提示:此处若需自动轮播，可将「选项卡」组件 样式配置内的动画开启，时间可自定义调整，同理若不希望自动播放，则选择关闭动画即可;
4. 移动操控端页面搭建
1）进入 EasyV平台 「终端交互」模块，创建移动操控端项目。在创建过程中可选择系统默认给出分辨率或根据自身移动设备分辨率进行自定义。此处以手机端操控页面为例，如下图：
*新建终端交互
2）选择使用选项卡组件(可与大屏页面保持一致，或单独创建样式均可)；此处选择与大屏一致，数据即样式复用即可。如下图
*配置选项卡数据
5. 移动端远程控制数据大屏
移动端控制数据大屏同样存在2种实现方法，在这里
5.1 方法一：使用回调功能配置
a）选择「选项卡」进行配置，此处配置回调参数与【3. 数据大屏交互配置】中「选项卡」组件保持一致，同时在【远程控制】中，设置Tab页=1、类型=回调并选择大屏【终端交互-回调示例_60907】。如下图：
*配置选项卡回调参数
b）点击预览终端交互，并进行发布；网络限制默认打开，只有同一网络环境才可访问。
*预览终端交互
c）提前打开预览已配置好的数据大屏「终端交互-回调示例_60907」，并用手机扫描【终端交互-回调功能-手机配置示例】二维码，此时可以通过手机点击Tab进行远程控制数据大屏，如下图：
*终端交互远程操控效果案例
5.2 方法二：使用自定义事件配置
a）配置远程控制，类型选择事件，此时移动端组件交互事件需与【3.2 方法二：使用自定义事件配置】中的「选项卡」组件保持一致，
- 事件1：Tab页=1，类型=事件，选择「大屏为终端交互-自定义事件示例」，组件选择「选项卡」，显示当前「数据可视化」
- 事件2：Tab页=2，类型=事件，选择「大屏为终端交互-自定义事件示例」，组件选择「选项卡」，显示当前「袋鼠云官网」
- 事件3：Tab页=3，类型=事件，选择「大屏为终端交互-自定义事件示例」，组件选择「选项卡」，显示当前「云掣官网」
具体如下图：
*配置选项卡交互事件
b）提前打开预览已配置好的数据大屏「大屏为终端交互-自定义事件示例」，并用手机扫描【终端交互—交互事件-手机配置示例】二维码，此时可以通过手机点击Tab进行远程控制数据大屏，效果与【5.1 方法一：使用回调共配置】一致。
案例下载
📎终端交互-自定义事件示例_60996.screen.zip
📎终端交互—交互事件-手机配置示例_731.mobile (2).zip
📎终端交互-回调示例_60907.screen (1).zip
📎终端交互—回调功能-手机配置示例_729.mobile.zip
*下载zip格式后需进行解压，screen格式在【数据大屏】中可进行导入。mobile格式在【终端交互】中可进行导入。
终端交互视频教程
如遇其他使用问题，可扫描下方二维码，获取更多产品支持~
