功能面板

“功能面板”为系统包装组件，是对数据进行集合展示，是一种特殊的列表形式。功能项以格子的形式，将信息分块，突出重点，从视觉感知上就对内容进行了分隔，本章节主要介绍宫格组件各配置项的含义。

效果案例

组件配置项

基础属性

组件位置：包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

组件尺寸：包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高。再次单击进行解锁，解锁后宽高比不受限制。比例锁默认不锁定。

旋转：以组件的中心为中心点，进行旋转，单位为度（°）。手动输入角度值，控制组件的旋转角度；

• 单击图标，控制组件左右翻转样式；
• 单击图标，控制组件上下翻转样式。

透明：取值范围为0~100%。为0%时，组件隐藏；为100%时，组件完全显示。默认为100%。

组件属性

全局

自动换行：开启后，每列格子的数量会根据组件宽度和功能项的宽度确认，超出后则自动换行，若关闭，则在一行中显示，若数量超出则显示横向滚动条。

开启：

关闭：

间距：功能项之间的距离。

边距：功能项整体与组件边框直接的距离。

移入高亮：启用后，鼠标移入功能项，可更改其背景色。

交互：若该功能项数据含有对应URL，则预览时点击即可打开对应地址，用户可配置打开超链接的方式：新开/模态。若为模态窗口则默认为其最大化。

功能项

尺寸：可配置宽度，高度根据图标、间距、标题自适应。

间距：图标与文字之间的距离。

边距：图标、文字与功能项之间的距离。

图标：支持配置图标的大小、背景、颜色、内边距。其中图标的样式，从数据字段“MEDIUM_IMG_COORDINATE”中获取，该字段为空时，显示缺省图标。

• 颜色跟随主题：开启后图标颜色将跟随门户主题色。

标题：可配置文本样式和内容溢出显示。

内容溢出-换行：

内容溢出-省略号：

内容溢出-截断：

上标：
主要用于达到消息提醒，数量统计等场景效果。其数据取自于“COUNT_BDO_NAME”字段，为空时不显示，当数值>99时，显示为99+。

• 文本样式：数字的文本样式。

• 背景：背景颜色。

• 偏移：上标数字相对于图标的位置偏移。

数据

组件数据格式

字段格式任意，但需与以下字段相匹配，方能被识别。

上述数据的源来源于dn_function表，其结构与其一致

静态数据-JSON数据案例

[
    {
        "TENANT_ID": "1",
        "URL_TYPE": 1,
        "VOLUME_ID": "0",
        "NAME_": "",
        "ALIAS_": "菜单功能面板1",
        "PARENT_ID": "0",
        "APPLY_TYPE": 0,
        "NODE_TYPE": 1,
        "TYPE_": 1,
        "CATE_DISPLAY_TYPE": 0,
        "RPT_NAME": "",
        "RPT_PARAMS": "",
        "URL_": "http://www.lechuangzhe.com/homepage/",
        "SYS_PAGE": "",
        "APP_FUNCTION_ID": "",
        "CONFIG_": "",
        "MEDIUM_IMG_ID": "",
        "MEDIUM_IMG_COORDINATE": "",
        "IMG_FONT_COLOR": "",
        "COUNT_BDO_NAME": ""
    }
]

交互

该组件无交互事件，自动触发点击事件，通过字段“URL_”中的链接URL打开页面，可于配置全局-交互-打开方式处配置超链接的打开方式。