反馈已提交

网络繁忙

FVS移动端布局

  • 文档创建者:Alicehyy
  • 历史版本:9
  • 最近更新:Tracy.Wang 于 2024-09-20
  • 1. 概述

    适用场景:安装了「FineVis数据可视化」插件的用户,可参考本文了解 FineVis 的相关功能。

    1.1 版本

    报表服务器版本

    插件版本

    功能变动
    11.0.22V2.9.1

    移动端支持开启「移动端布局」,从过去的「重布局」效果变更为「流式布局」效果。「流式布局」效果主要解决以下「重布局」的问题

    1)「重布局」下PC模板直接切换成移动端模板,组件的大小、边距、顺序等无法自由调整,无法实现PC和移动端共用一张模板

    2)在设计器编辑界面,无法所见即所得查看到移动端配置的效果,必须浏览器预览;新版本插件在切换到移动端后可进行移动端的配置,并可在设计器内即时查看移动端模板展示效果

    1.2 功能简介

    FVS 移动端模板的制作与预览支持两种布局方式,默认布局为「桌面端布局」,即与 PC 端一致。

    支持开启「移动端布局」,开启后切换到「移动端」模式,模板编辑界面及预览界面均遵循移动端布局(流式布局)规则。

    1.3 兼容说明

    注:移动端布局是重布局能力的增强,并且兼容了重布局能力。

    • 无论新建模板还是历史模板,默认均不勾选「开启移动端布局」。

    • 历史模板在插件升级后,移动端编辑界面默认按照桌面端布局显示,如需在编辑器内查看移动端布局,需手动「开启移动端布局」;实际预览时,按照以前配置的是否开启重布局效果显示。

    • 移动端布局在字体渲染上与历史插件有差异,主要差异是字体字号大小,可能需要手动调节字体大小细节。

    • 历史开启重布局的模板,勾选「开启移动端布局」后再次取消勾选,会按照桌面端布局生效。

    1.4 视频教程

    2. 功能入口

    进入 FVS 可视化看板后,点击设计器顶部工具栏「模板>FVS模板设置>移动端」,即可设置移动端布局方式。

    • 默认不勾选「开启移动端布局」,移动端遵循桌面端布局(保留布局)规则,即与 PC 端保持一致。

    • 勾选后,移动端编辑界面及预览效果均遵循移动端布局(流式布局)规则;支持选择「平板预览效果」。

    Snag_64a99a8.png

    3. 移动端组件规则

    无论是哪种布局,组件在移动端均遵循以下规则:

    1)移动端组件默认完全继承 PC 端组件的内容,支持对移动端组件单独修改,修改后不再继承 PC 端内容。

    2)完全处于 PC 端画布外的组件,在移动端画布及组件列表中均不显示。

    3)移动端不支持「三维组件」和「扩展图表」组件类型,该类组件在画布中不显示,在组件列表中自动隐藏且灰化不可选中。

    4)开启移动端布局时,暂不支持在移动端添加、删除组件;桌面端布局支持添加、删除。

    4. 桌面端布局

    模板不勾选「开启移动端布局」时,移动端与 PC 端共用一个布局,区分配置项支持分别显示。

    该种布局适用于直接使用移动端尺寸制作模板。

    例如模板:银行CEO面板.fvs ,效果如下图所示:

    Snag_b162f8f.png

    对应移动端效果如下图所示:

    1689326065532065.gif

    5. 移动端布局

    勾选「开启移动端布局」时,手机端则按照移动端布局(流式布局)规则生效,平板预览效果支持选择布局。

    该种布局适用于 PC 端模板转移动端模板的场景。

    下面以 电商销售实时大屏.fvs 模板为例,讲解关于移动端流式布局的相关规则。

    5.1 画布显示规则

    打开下载的模板,PC 端画布如下图所示:

    Snag_10b66f9a.png

    切换到移动端后,画布如下图所示:

    Snag_15436074.png

    具体变化有以下几点:

    1)画布尺寸

    若 PC 端画布尺寸宽大于等于高时,切换到移动端,画布尺寸变更为默认 390*844 ;若宽小于高,则保持原画布尺寸。

    且提供了几种移动端常用尺寸可供选择,也支持自定义尺寸。

    注:移动端布局不支持配置「画布自适应」,手机端预览时默认为宽度铺满,平板端按照选择的布局生效。

    2)分页区域

    分页区域位置由画布下方变更为画布左侧,包括「预览播放设置」、「查询面板设置」及「展开收起」按钮。

    3)组件列表

    由「组件图层」列表变更为「组件顺序」列表,为画布中组件/组合至上而下的展示顺序。

    且组件列表中组件操作仅支持隐藏、重命名和移动顺序,不支持删除和锁定。

    4)组件栏

    开启移动端布局时不支持添加组件,故组件栏隐藏组件分类图标。

    5)顶部工具栏

    顶部工具栏仅保留「撤销/还原」和「对齐」,新增「调整宽度」工具,而组合、删除均需在 PC 端实现。

    注:「对齐」仅在组合/绝对画布内选择两个及以上组件时有效。

    6)页面属性

    移动端页面支持单独设置页面背景、页面边距及组件间隙。修改配置,画布中效果即时可见。

    注:组件间隙仅对最外层纵向相邻组件或组合有效,对组合内组件、横向相邻组件无效。

    7)快捷键

    较 PC 端减少多个快捷键,列表中仅保留可用快捷键。如下图所示:

    Snag_154a6ca7.png

    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 调整组件大小

    所有组件均可自由调整宽高,宽度最大值为画布宽度,高度最大值不限。

    支持通过顶部工具栏「调整宽度」或右键键出,快速调整组件宽度,可选项为画布单行比例。如下图所示:

    注:画布单行比例是根据页面宽度减去内边距的宽度进行计算的。

    A8BFA0D1-E9FD-4013-8864-E1D9BA29F937.GIF

    5.3.2 移动组件顺序

    支持在列表或画布中,选中最外层组件或组合移动顺序;Tab 内组件/组合也同样支持移动顺序。

    • 组件纵向移动时,有自动吸附效果,产生空白高度下面的组件会自动向上吸附;

    • 横向存在空白位置的情况下,允许组件并列,但若展示不下,组件会自动按照上下展示。

    799FB9A9-3CE2-4B73-AA49-5552081BD682.GIF

    5.3.3 调整组件样式

    PC 端切换至移动端布局时,根据 5.2.2 节组件宽高规则,部分组件效果需要手动进行调整。

    凡是带有移动端 icon Snag_23c46b26.png 的配置项,修改前默认跟随 PC 端变化,修改后不再受 PC 端影响,且画布中即时显示移动端效果。

    Snag_23c38d69.png

    5.3.4 预览高度自适应

    Tab 、表格、网页框、富文本以及单复选按钮组组件,移动端新增「预览高度自适应」配置项,且默认勾选。

    勾选后,无论画布中组件高度设置为多少,预览时均可根据内容高度自适应;不勾选则按照设置的组件高度展示。

    注1:高度自适应仅当组件占满整行时生效,若与其余组件并列则不生效。

    注2:组合内组件高度自适应不生效;绝对画布内,需绝对画布开启重布局高度自适应才生效。

    注3:表格跑马灯,在高度自适应不生效的情况下生效。

    Snag_23c728fe.png

    附件列表


    主题: FineVis数据可视化
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持