1. 概述
适用场景:安装了「FineVis数据可视化」插件的用户,可参考本文了解 FineVis 的相关功能。
1.1 版本
报表服务器版本 | 插件版本 | 功能变动 |
---|---|---|
11.0.22 | V2.9.1 | 移动端支持开启「移动端布局」,从过去的「重布局」效果变更为「流式布局」效果。「流式布局」效果主要解决以下「重布局」的问题: 1)「重布局」下PC模板直接切换成移动端模板,组件的大小、边距、顺序等无法自由调整,无法实现PC和移动端共用一张模板 2)在设计器编辑界面,无法所见即所得查看到移动端配置的效果,必须浏览器预览;新版本插件在切换到移动端后可进行移动端的配置,并可在设计器内即时查看移动端模板展示效果 |
1.2 功能简介
FVS 移动端模板的制作与预览支持两种布局方式,默认布局为「桌面端布局」,即与 PC 端一致。
支持开启「移动端布局」,开启后切换到「移动端」模式,模板编辑界面及预览界面均遵循移动端布局(流式布局)规则。
1.3 兼容说明
注:移动端布局是重布局能力的增强,并且兼容了重布局能力。
无论新建模板还是历史模板,默认均不勾选「开启移动端布局」。
历史模板在插件升级后,移动端编辑界面默认按照桌面端布局显示,如需在编辑器内查看移动端布局,需手动「开启移动端布局」;实际预览时,按照以前配置的是否开启重布局效果显示。
移动端布局在字体渲染上与历史插件有差异,主要差异是字体字号大小,可能需要手动调节字体大小细节。
历史开启重布局的模板,勾选「开启移动端布局」后再次取消勾选,会按照桌面端布局生效。
1.4 视频教程
2. 功能入口
进入 FVS 可视化看板后,点击设计器顶部工具栏「模板>FVS模板设置>移动端」,即可设置移动端布局方式。
默认不勾选「开启移动端布局」,移动端遵循桌面端布局(保留布局)规则,即与 PC 端保持一致。
勾选后,移动端编辑界面及预览效果均遵循移动端布局(流式布局)规则;支持选择「平板预览效果」。
3. 移动端组件规则
无论是哪种布局,组件在移动端均遵循以下规则:
1)移动端组件默认完全继承 PC 端组件的内容,支持对移动端组件单独修改,修改后不再继承 PC 端内容。
2)完全处于 PC 端画布外的组件,在移动端画布及组件列表中均不显示。
3)移动端不支持「三维组件」和「扩展图表」组件类型,该类组件在画布中不显示,在组件列表中自动隐藏且灰化不可选中。
4)开启移动端布局时,暂不支持在移动端添加、删除组件;桌面端布局支持添加、删除。
4. 桌面端布局
模板不勾选「开启移动端布局」时,移动端与 PC 端共用一个布局,区分配置项支持分别显示。
该种布局适用于直接使用移动端尺寸制作模板。
例如模板:银行CEO面板.fvs ,效果如下图所示:
对应移动端效果如下图所示:
5. 移动端布局
勾选「开启移动端布局」时,手机端则按照移动端布局(流式布局)规则生效,平板预览效果支持选择布局。
该种布局适用于 PC 端模板转移动端模板的场景。
下面以 电商销售实时大屏.fvs 模板为例,讲解关于移动端流式布局的相关规则。
5.1 画布显示规则
打开下载的模板,PC 端画布如下图所示:
切换到移动端后,画布如下图所示:
具体变化有以下几点:
1)画布尺寸
若 PC 端画布尺寸宽大于等于高时,切换到移动端,画布尺寸变更为默认 390*844 ;若宽小于高,则保持原画布尺寸。
且提供了几种移动端常用尺寸可供选择,也支持自定义尺寸。
注:移动端布局不支持配置「画布自适应」,手机端预览时默认为宽度铺满,平板端按照选择的布局生效。
2)分页区域
分页区域位置由画布下方变更为画布左侧,包括「预览播放设置」、「查询面板设置」及「展开收起」按钮。
3)组件列表
由「组件图层」列表变更为「组件顺序」列表,为画布中组件/组合至上而下的展示顺序。
且组件列表中组件操作仅支持隐藏、重命名和移动顺序,不支持删除和锁定。
4)组件栏
开启移动端布局时不支持添加组件,故组件栏隐藏组件分类图标。
5)顶部工具栏
顶部工具栏仅保留「撤销/还原」和「对齐」,新增「调整宽度」工具,而组合、删除均需在 PC 端实现。
注:「对齐」仅在组合/绝对画布内选择两个及以上组件时有效。
6)页面属性
移动端页面支持单独设置页面背景、页面边距及组件间隙。修改配置,画布中效果即时可见。
注:组件间隙仅对最外层纵向相邻组件或组合有效,对组合内组件、横向相邻组件无效。
7)快捷键
较 PC 端减少多个快捷键,列表中仅保留可用快捷键。如下图所示:
5.2 组件显示规则
5.2.1 组件展示顺序
1)画布中组件/组合默认的展示顺序即按照「组件顺序」列表自上而下单列展示。
2)默认顺序继承 PC 端画布从左到右、从上到下的组件/组合顺序,图层重叠时按照从顶层至底层的顺序进行展示。
注:组合或绝对画布内的组件仍按照 PC 端效果展示,表示图层顺序,而非组件展示顺序;Tab 内组件为组件展示顺序。
3)若调整组件宽度并列展示时,画布中从左到右的顺序即为列表中从上到下的顺序。
4)在移动端调整过组件位置后,后续 PC 端新增的组件/组合均展示在移动端画布最下方。
5)当最外层组件/组合隐藏时,下方组件向上补足空位;组合/绝对画布内组件隐藏后保留空白位置。
5.2.2 组件宽高规则
组件宽高在画布中的默认显示规则如下表所示:
注:若历史模板开启了重布局,组件宽高将按比例缩放,不遵循下表规则。
组件位置 | 宽度 | 高度 |
---|---|---|
最外层组件/组合 Tab 内组件 | 默认自适应占满整行 | 控件、图表、标题、时间、绝对画布组件及组合 默认高度和 PC 端保持一致 |
图片、本地视频及监控视频组件 默认宽高等比例缩放 | ||
表格、单复选按钮组、Tab、网页框以及富文本组件 在编辑模式下,默认高度和 PC 端保持一致 预览时,若组件开启了「预览高度自适应」,则根据内容自适应显示,未开启则按照组件高度显示 | ||
组合/绝对画布内组件 | 随组合/绝对画布等比例缩放 |
注1:组件缩放的规则同 PC 端,组件整体的缩放不影响内容字号大小(表格除外,字号大小会按照内容自适应)。
注2:默认组件宽高未修改时,若画布尺寸变化,无论是否勾选「启用调整锁定」,组件宽度均自适应占满整行,高度保持不变。
但修改过组件宽高后,若画布勾选了「启用调整锁定」,则组件跟随画布等比例缩放;未勾选则组件大小保持不变。
5.3 组件调整规则
5.3.1 调整组件大小
所有组件均可自由调整宽高,宽度最大值为画布宽度,高度最大值不限。
支持通过顶部工具栏「调整宽度」或右键键出,快速调整组件宽度,可选项为画布单行比例。如下图所示:
注:画布单行比例是根据页面宽度减去内边距的宽度进行计算的。
5.3.2 移动组件顺序
支持在列表或画布中,选中最外层组件或组合移动顺序;Tab 内组件/组合也同样支持移动顺序。
组件纵向移动时,有自动吸附效果,产生空白高度下面的组件会自动向上吸附;
横向存在空白位置的情况下,允许组件并列,但若展示不下,组件会自动按照上下展示。
5.3.3 调整组件样式
PC 端切换至移动端布局时,根据 5.2.2 节组件宽高规则,部分组件效果需要手动进行调整。
凡是带有移动端 icon 的配置项,修改前默认跟随 PC 端变化,修改后不再受 PC 端影响,且画布中即时显示移动端效果。
5.3.4 预览高度自适应
Tab 、表格、网页框、富文本以及单复选按钮组组件,移动端新增「预览高度自适应」配置项,且默认勾选。
勾选后,无论画布中组件高度设置为多少,预览时均可根据内容高度自适应;不勾选则按照设置的组件高度展示。
注1:高度自适应仅当组件占满整行时生效,若与其余组件并列则不生效。
注2:组合内组件高度自适应不生效;绝对画布内,需绝对画布开启重布局高度自适应才生效。
注3:表格跑马灯,在高度自适应不生效的情况下生效。