反馈已提交

网络繁忙

自适应属性

  • 文档创建者:lu123
  • 编辑次数:62次
  • 最近更新:April陶 于 2022-03-24
  • 1. 概述

    1.1 版本

      报表服务器版本功能变更
    11.0--

    注1:本移动端自适应方法请参见:[通用]移动端自适应

    注2:配置移动端自适应若模板推送显示 PC 端效果,建议将 PC 端自适应属性设置为「默认」或「不自适应」。

    1.2 应用场景

    PC 端,用户预览模板希望能够根据屏幕分辨率自适应。

    1.3 功能简介

    普通报表可设置字体(自适应、不自适应)、表格(横向自适应、双向自适应、不自适应)。

    决策报表可设置字体(自适应、不自适应)、报表缩放方式(双向自适应、横向自适应、不自适应)。

    注:「数据分析预览」不支持自适应属性。

    2. 普通报表

    2.1 设置方式

    点击「模板>PC 端自适应属性」,点击「PC 端报表块自适应属性」面板,可以选择「采用服务器设置」或「为该模板单独设置」,如下图所示:

    8.png

    2.1.1 采用服务器设置

    默认选中「采用服务器设置」,设置对设计器下所有「采用服务器设置」的模板均生效。如下图所示:

    8.png

    2.1.2 为该模板单独设置

    选择「为该模板单独设置」,则「字体」和「表格」自适应设置仅对当前模板生效。如下图所示:

    9.png

    2.2 自适应逻辑

    自适应属性效果 缩放逻辑 注意事项  
    字体不自适应字体大小原样输出--
    字体自适应字体大小会根据浏览器的大小缩放缩放比例 = 浏览器页面宽度 / 老的报表页面配置宽度

    表格不自适应时,字体自适应不生效

    表格不自适应表格大小原样输出--
    表格横向自适应
    模板横向充满浏览器窗口宽度

    新页面宽度 = 浏览器宽度

    新页面高度 = 浏览器页面宽度 / (老报表页面设置的宽度 / 老报表页面高度)

    横向单元格过多时,

    单元格只能缩小到一定比例,横向强制分页

    表格双向自适应模板双向充满浏览器窗口大小

    新页面宽度 = 浏览器宽度

    新页面高度 = 浏览器高度

    单元格过多时,

    单元格只能缩小到一定比例,横向强制分页,纵向出现滚动条

    注1:一定比例为 0.4,浏览器中报表的宽高 / 正文宽高 < 0.4

    注2:参数界面不自适应

    注3:当设置有「冻结行」时,行高被限制,双向自适应则不生效,等同于「横向自适应或不自适应」

    3. 决策报表

    3.1 设置方式

    点击「模板>PC 端自适应属性」,弹出「PC 端报表块自适应属性」面板,可以选择「采用服务器设置」或「为该模板单独设置」。使用方式与上文一致,请参考本文 2.1 章节。如下图所示:

    3.png

    3.2 自适应逻辑

    决策报表中,PC端自适应属性相关设置的逻辑如下表所示:

    设置项选项效果说明
    字体
    自适应1631084788980631.png

    字体大小会随模板缩放的效果进行缩放

    且字体自适应属性作用于模板中所有组件的文字

    不自适应
    1631084795891988.png字体按照决策报表中设置的大小原样展示,不跟随模板缩放
    报表缩放方式双向自适应1631084822756440.png

    模板中的所有组件同时在横向和纵向两个方向上充满浏览器窗口

    且在不同屏幕分辨率下,内容都会呈现在一页中

    横向自适应1631084837781045.png

    模板中的所有组件横向充满浏览器窗口,高度会等比例缩放

    在不同屏幕分辨率下,单页显示不全时,纵向会出现滚动条

    不自适应1631084849951081.png

    模板按照设计时分辨率大小,原样展示在浏览器窗

    在不同屏幕分辨率下,单页显示不全时,横向或纵向会出现滚动条


    注:详情请参见文档 决策报表自适应属性 。

    4. 移动端自适应

    本文的「PC 端自适应属性/PC 端报表块自适应属性」对移动端不生效。

    移动端自适应设置请参见:[通用] 移动端自适应

    5. 注意事项

    5.1 模板设置横向自适应后,预览字体模糊

    问题描述:

    模板设置横向自适应后,预览字体模糊。

    解决方案:

    横向自适应会预留滚动条,因此右侧出现一点空白,导致字体显示稍微模糊,属于正常效果。

    用户若希望字体清楚,可设置双向自适应。

    5.2 设置双向自适应后依旧有滚动条

    问题描述:

    决策报表设置 PC 端双向自适应,body 双向自适应,报表块双向自适应后,改变浏览器页面大小,还是会出现滚动条。

    原因分析:

    属于系统 DPI 问题,分辨率为 1920*1080 ,缩放率为 125% 时,会出现横向滚动条,前台会隐藏该滚动条,但滚动条依然是存在的。

    解决方案:

    将缩放设置为 100%  。

    若因报表块内容过多而导致滚动条产生,可以通过限制内容或隐藏滚动条的方法去除滚动条,请参见:隐藏滚动条

    5.3 设置冻结后自适应下报表有空白

    问题描述:

    决策报表中,当报表块中设置了冻结,在自适应的情况下,出现报表内容没有撑满全屏幕,四周有空白的问题。

    解决方案:

    若浏览器缩放或全屏下,报表块下方出现空白问题,可以给 body 添加一个初始化事件,调整显示。事件代码内容如下:

    $(window).resize(function () {
    var width = FR.windowWidth; //获取浏览器窗口长度
    var height = FR.windowHeight;//获取浏览器窗口高度
    //调整报表form的长宽
    var from = _g().getWidgetByName('form')
    if (form.oriWidth === width && form.oriHeight === height) {
    return;
    }
    form.oriWidth = width;
    form.oriHeight = height;
    //加载报表内容
    form.loadContentPane(true);
    }
    );

    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭