1 概述
本文档用于帮助大家了解酷屏报表设计器中功能。适用于ABI551及以上版本。
2 酷屏设计器介绍
2.1 界面概览
酷屏报表设计器分为组件面板，菜单栏，编辑区、属性面板四大块。
2.2 组件面板
组件面板包括组件、图层两个页签。组件面板默认固定在左侧，可设置为“浮起”。
设置为浮起后，组件面板默认收起，当鼠标滑动到左侧时自动展开。也可手动点击收起展开组件面板。
这里显示了制作酷屏报表时所有可用的组件，包括系统内置组件和自定义组件。
系统内置了“表格”、“参数”、“统计图”、“地图”、“大文本”、“动画效果”、“排名”、“3D组件”和“其他”等9大类共150+个组件。
可添加组件到编辑区，使用这些组件完成酷屏报表制作。
在【系统管理-组件库管理】中可管理酷屏组件，包括查看内置组件的代码，克隆内置组件为自定义组件，新建编辑自定义组件等。
这里会列出该酷屏报表中所有组件，并且可以清晰看到组件间的组合关系和层级关系。
点击图层树中某个组件节点，可在编辑区中定位到该组件。在编辑区中选中某个组件，在图层树中也会同步选中该组件节点。
另外，在图层树中结点上右键可实现调整叠放顺序、复制粘贴删除、定位到组件以及打开组件属性面板等。
另外，还支持通过拖动节点改变组件的组合关系。
2.3 菜单栏
点击菜单栏右上角>>可展开更多功能按钮。各功能按钮的作用见下表格。
按钮 | 作用 |
撤销 | 撤销最近一次操作，支持无限次撤销。快捷键为Ctrl+Z。 |
重做 | 重新执行刚撤销的操作。快捷键分别为Ctrl+Y。 |
组合 | 将多个组件组合在一起，方便一起拖动改变位置。在编辑区按住Ctrl键可多选组件。 |
取消组合 | 取消组合。 |
图层操作 | 设置组件或者组合的叠放顺序，下拉可选择“置于顶层”、“置于底层”、“上移一层”、“下移一层”。 |
| 用于切换编辑区的两态：“设计态”、“代码态” |
酷屏属性 | 点击后打开酷屏报表属性面板。可设置的报表属性有：酷屏代号、酷屏标题、背景颜色、背景图片、背景位置、数据期、全部数据期过滤条件、数据对应方案、最佳分辨率、缩放比例、保存结果表等；可添加的事件有：加载完成事件、计算加载事件、语音控制事件。 |
模板样式 | 用于酷屏模板的管理，包括模板的预览和重置，对于自定义模板可编辑、删除、导入导出等。
|
显示属性|隐藏属性 | 显示/隐藏组件属性面板。 |
资源-全局资源 | 点击后弹出对话框，里面列出了资源管理器中的图片和代码文件等资源，以方便在代码态时引用这些资源。
选中资源后确定即可在代码中获取到资源路径。 |
资源-装入 | 装入本地的酷屏报表文件。 |
删除 | 删除组件。快捷键为delete。 |
预览 | 点击即计算并预览当前酷屏报表。 |
保存 | 点击即保存报表到服务器。下拉箭头可选择【保存为草稿】、【保存到本地】以及【保存为模板】。【保存到本地】生成的文件格式为*.coolrpt，后续可通过【资源-装入】装入进来。 |
2.4 编辑区
编辑区分为“代码区”、“设计区”，分别也称为代码态、设计态，可通过菜单栏中
进行切换。
代码区可编写html、js、css代码。
1 源代码：这里展示了设计界面中的dom元素和结构
2 “+”：用来新建js脚本文件和css样式文件，也可以通过上传的形式导入文件
3 文件添加规则：js和css最多各可以添加5个，每个大小100k以下
可以添加组件到设计区，进行排版、编辑等。
可拖动改变组件位置，拖拉改变组件大小。
在组件上右键可调整叠放顺序、打开组件属性面板等。
对于大尺寸的酷屏报表，可通过缩略图快速切换位置。
2.5 属性面板
不同的组件有不同的属性，可根据需要调整属性值。光标停在属性名称后的
上，会提示该属性作用和用法。
属性面板是浮起的，可以拖动改变位置。
打开方式：点击菜单栏中【酷屏属性】，打开报表属性面板，进行相关属性配置。
打开方式：
方式1，在组件上右键，选择【属性】，打开组件属性面板，进行相关属性配置和取数设置。
方式2，选中组件，点击菜单栏中【显示属性】，打开组件属性面板，进行相关属性配置和取数设置。
目前酷屏HTML组件数据支持静态数据、SQL和接口数据和默认四种取数方式：
1）默认：显示该组件自带的示例数据，用户可参考并直接编辑取数值，这里只能输入常量数据。
2）静态数据：当用户不需要从数据库表、接口等方式取数，而是需要录入固定的常量数据，可使用“默认”或“静态数据”取数，推荐使用“静态数据”取数，更方便录入数据。
3）SQL：通过手写sql获取想要的数据。
4）接口数据：从接口数据源获取想要的数据，需提前在【数据源】-【接口数据源】中定义好接口数据源。
请先登录