亿信ABI

酷屏设计器界面功能介绍

酷屏设计器界面功能介绍

酷屏设计器界面功能介绍

酷屏设计器界面功能介绍

1 概述

本文档用于帮助大家了解酷屏设计器中功能。

2 酷屏设计器介绍

2.1 界面概览

酷屏报表设计器分为组件面板,菜单栏,编辑区、属性面板四大块。

19酷屏设计器界面功能介绍88

 

2.2 组件面板

组件面板包括组件、数据源、结构树三个页签

19酷屏设计器界面功能介绍121

 

2.2.1组件

组件分为HTML组件和Echarts组件。

可拖拽这些组件到编辑区,使用这些组件完成酷屏报表制作。

HTML组件:系统内置了“容器”、“表格”、“参数”、“统计图”、“地图”、“大文本”、“动画效果”、“排名”和“其他”等9大类共112个html组件。可右键查看其代码;也可以右键克隆,生成自定义组件后进行编辑修改。

19酷屏设计器界面功能介绍290

 

19酷屏设计器界面功能介绍292

 

将鼠标移动到这些组件上,停留1~2秒,会出现组件预览图。

19酷屏设计器界面功能介绍323

 

自定义组件:自定义的html组件都放在这里。在多个酷屏报表中,组件是同步的,在酷屏1中修改了A组件的源代码,如果酷屏2中也使用了A组件,那么酷屏2中A组件的源码也被修改了。

在自定义组件节点上右键,可新建HTML组件,新建分组,导入导出html组件。

19酷屏设计器界面功能介绍451

 

选中某个组件右键可编辑、删除、重命名、克隆、导出、移动等。

19酷屏设计器界面功能介绍483

 

Echarts组件:echarts组件用法和效果同分析报表中的组件。                                                 

2.2.2数据源

把该主题集下所有主题表和维表都显示出来,主题表字段也显示在树形中。

19酷屏设计器界面功能介绍612

 

取数态或设计态中的分析表格在定义取数时,可拖拽数据源中主题表字段到表格单元格中,完成表元取值。

也可以定义sql数据源,供这张酷屏报表中分析表格取数用。

19酷屏设计器界面功能介绍691

 

sql数据源建好后,在数据源树形中会列出其字段,可拖拽字段到分析表格单元格中,完成表元取值。

19酷屏设计器界面功能介绍740

 

2.2.3结构树

结构树会列出该酷屏报表中所有组件,并且可以清晰看到组件间的层级关系。

19酷屏设计器界面功能介绍786

 

点击结构树中某个组件节点,可在编辑区中定位到该组件。在编辑区中选中某个组件,在结构树中也会同步选中该组件节点。

19酷屏设计器界面功能介绍844

 

2.3 菜单栏

19酷屏设计器界面功能介绍854

 

图标

作用

19酷屏设计器界面功能介绍863

 

点击即保存报表到服务器。下拉箭头可选择保存为草稿、保存到本地以及保存为模板。

【保存到本地】生成的文件格式为*.coolrpt,后续可通过【装入】装入进来。

19酷屏设计器界面功能介绍945

 

装入本地的酷屏报表文件。

19酷屏设计器界面功能介绍961

 

可撤销、重做多步,也支持快捷键的撤销和重做,快捷键分别为ctrl+z,ctrl+y。

19酷屏设计器界面功能介绍1007

 

针对酷屏页面内组件,用于选中组件的父容器。

19酷屏设计器界面功能介绍1032

 

添加布局组件后才会出现此功能按钮。点击后会屏蔽掉所有组件,只能操作布局,以方便针对布局进行调整。

19酷屏设计器界面功能介绍1084

 

点击后弹出对话框,里面列出了资源管理器中的图片和代码文件等资源,以方便在代码态时引用这些资源。

19酷屏设计器界面功能介绍1134

 

选中资源后确定即可在代码中获取到资源路径。

19酷屏设计器界面功能介绍1159

 

点击后弹出对话框,里面列出了系统中所有报表资源,以方便在代码态时引用报表资源。

19酷屏设计器界面功能介绍1201

 

选中报表后确定即可在代码中获取到报表路径。

19酷屏设计器界面功能介绍1226

 

点击后打开酷屏报表属性面板。可设置的报表属性有:酷屏代号、酷屏标题、背景颜色、背景图片、背景位置、数据期、全部数据期过滤条件、数据对应方案、最佳分辨率、缩放比例、保存结果表等;可添加的事件有:加载完成事件、计算加载事件、语音控制事件。

19酷屏设计器界面功能介绍1347

 

用于系统内置模板的管理,包括模板的预览和删除,也可重置模板。

19酷屏设计器界面功能介绍1380

 

19酷屏设计器界面功能介绍1383

 

计算并预览当前酷屏报表。

19酷屏设计器界面功能介绍1399

 

计算并查看取数态的表格数据。下拉箭头可选择预览指定表格数据。

19酷屏设计器界面功能介绍1433

 

删除组件。快捷键为delete。

19酷屏设计器界面功能介绍1453

 

显示/隐藏属性面板。

 

取数区菜单栏和分析报表设计器中功能一致。

2.4 编辑区

编辑区分为“代码区”、“设计区”和“取数区”,分别也称为代码态、设计态、取数态,可通过工具栏中19酷屏设计器界面功能介绍1544中进行切换。

2.4.1代码区

代码区可编写htmljscss代码

1 源代码:这里展示了设计界面中的dom元素和结构

2 “+”:用来新建js脚本文件和css样式文件,也可以通过上传的形式导入文件

3 文件添加规则:js和css最多各可以添加5个,每个大小100k以下

19酷屏设计器界面功能介绍1678

 

2.4.2设计区

可以拖拽组件到设计区,进行排版、编辑、取数等。

19酷屏设计器界面功能介绍1713

 

2.4.3取数区

取数区用于制作满足需求的分析表,为设计区的组件提供数据。取数区不会显示在酷屏报表查看页面。

在取数区,菜单栏中有多了一行按钮,其作用分别如下:

1. 19酷屏设计器界面功能介绍1797 添加表格:点击后会添加一个新的分析表格

2. 19酷屏设计器界面功能介绍1820 导入表格:导入已经有的报表模板或者酷屏里面的已经做好的表格。

19酷屏设计器界面功能介绍1853

 

2.5 属性面板

不同的组件有不同的属性,可根据需要调整属性值。光标停在属性名称上,会提示该属性作用和用法

19酷屏设计器界面功能介绍1910

 

2.5.1酷屏报表属性面板

打开方式:

【找到菜单栏-酷屏属性-进行相关属性配置】

【找到组件面板-结构树-编辑区-显示属性-进行相关属性配置】

19酷屏设计器界面功能介绍1985

 

19酷屏设计器界面功能介绍1987

 

2.5.2组件属性面板

打开方式:

【鼠标右键该组件-属性-进行相关属性的配置和调整】

【选中组件-菜单栏中显示属性-进行相关属性的配置和调整】

19酷屏设计器界面功能介绍2062

 

 

组件属性面板和酷屏报表属性面板都可拖动改变位置。

方式:【鼠标左键按住属性面板-拖拽鼠标即可拖动位置】

19酷屏设计器界面功能介绍2117

 

附件列表

文档内容仅供参考
如果您需要解决具体问题,还可以登录亿信社区
在提问求助板块提问,30分钟内帮您解决问题

如果您认为本词条还有待完善,请编辑

上一篇根据HTML组件制作酷屏报表

下一篇

请先登录

创建词条

词条信息

wanglf
wanglf

举人|词条创建者

291

浏览次数:57 次

编辑次数:1次 历史版本

更新时间:2021-09-18