功能介绍
我的大屏
在我的大屏页面，可以完成以下操作：
创建大屏
-
登录观云平台。
-
在左侧导航栏，选择"全部应用"，并在弹出的轻应用列表中选择"大屏"。
-
在"我的大屏"页面，单击"创建"。
-
选择合适的模板，单击"创建"。
-
在弹出的对话框中输入大屏名称，单击"确定"。
-
创建成功后会跳转到大屏编辑页面。
-
在组件列表中单击目标组件，即可将组件添加至画布区域。拖拽组件也可以达到相同的效果。不同的组件会位于不同的图层中。
-
接下来可在左侧图层面板进行图层管理，在右侧组件配置面板进行组件样式配置、组件数据配置和组件交互配置，具体可参见组件指南。
-
单击顶部工具栏中的保存图标，完成大屏的配置。
编辑大屏
-
登录观云平台。
-
在左侧导航栏，选择"全部应用"，并在弹出的轻应用列表中选择"大屏"。
-
在"我的大屏"页面，选择一个可视化大屏，单击"编辑"图标。
-
在大屏编辑页面，修改组件的布局和配置，或者添加、删除组件，详见可视化编辑。
编辑完成后，可预览大屏查看效果。
复制大屏
通过可视化大屏复制功能，您可以在现有可视化大屏的基础上，开发类似的可视化大屏，或者作为开发测试环境来进行修改更新，不会影响在线生产大屏。
-
登录观云平台。
-
在左侧导航栏，选择"全部应用"，并在弹出的轻应用列表中选择"大屏"。
-
在"我的大屏"页面，选择一个可视化大屏，单击"复制"图标。
复制成功后，系统会自动生成一个同名的可视化大屏。您可以修改此可视化大屏的名称，并在此大屏的基础上，修改可视化大屏的布局和配置。
预览大屏
在"我的大屏"页面，选择一个可视化大屏，单击"预览"，可预览当前大屏。预览成功且效果符合预期后，可将可视化大屏发布到线上环境供其他人员在线观看。
发布大屏
发布功能提供了两种分享大屏的方式：
-
公开分享（默认）
-
加密分享
-
在"我的大屏"页面，选择一个可视化大屏，单击"发布"图标。
-
在弹出的对话框中，配置是否加密分享和有效期。
-
开启加密分享后，默认会生成一个8位的随机密码，也可以自己设置，单击右侧的"刷新"图标会重新生成一个随机密码。
-
设置分享的有效期。默认分享有效期为1天，可以根据自己的需求设置，如果想永久分享，可以将有效期的值设置的很大，例如10000
-
-
单击"确定"即可发布大屏。
发布成功后，大屏的右下角会显示“已发布”字样。再次单击"发布"图标，可复制大屏的分享链接发送给其他人，如果开启了加密分享，被分享者输入随机密码即可访问大屏。单击"取消发布"按钮，可立即取消发布。
共享大屏
-
在"我的大屏"页面，选择一个可视化大屏，单击"共享"图标。
-
在弹出的"共享"对话框中，选择子账号及读写权限。
用户可以在子账号选择框中输入关键字筛选。如果选择"只读"，被分享人只能查看大屏；如果选择"编辑"，被分享人可以修改大屏。
-
单击"确定"，完成共享。
导出大屏
在"我的大屏"页面，选择一个可视化大屏，单击"导出"图标，可以将该大屏导出一个zip 格式的数据包。
导入大屏
在"我的大屏"页面，单击右上角的"导入大屏"按钮，然后选择之前导出的大屏zip文件
删除大屏
在"我的大屏"页面，选择一个可视化大屏，单击"删除"图标，可删除大屏。
我的数据
在"我的数据"页面，可以完成以下操作：
-
添加数据源
- CSV
-
数据库
-
MySQL
-
PostgreSQL
-
DM
-
- 基调听云
- 编辑数据源
- 删除数据源
添加CSV文件
-
在"我的数据"页面，单击左上角的"添加数据源"按钮。
-
在"类型"下拉菜单中选择"CSV"
-
输入名称和描述后，上传CSV文件。上传后，CSV文件的路径会显示在上方文本框中。
-
单击"确定"按钮，完成数据源的添加。
添加数据库
-
在"我的数据"页面，单击左上角的"添加数据源"按钮。
-
在"类型"下拉菜单中选择"数据库"。
-
填写数据库信息。
-
单击"测试连接"按钮，测试数据库是否能连接成功。
-
单击"确定"按钮，完成数据源的添加。
添加基调听云数据源
-
在"我的数据"页面，单击左上角的"添加数据源"按钮。
-
在"类型"下拉菜单中选择"基调听云"。
-
在"请求方式"下拉菜单中选择"GET"或"POST"请求方式。
-
在"请求地址"文本框中，填写需要请求的接口。
-
根据您选择的不同请求方式，可在下方"请求参数"和"请求体"中填写相应的请求参数值。
-
单击"确定"按钮，完成数据源的添加。
编辑数据源
在"我的数据"页面，单击"操作"列的"编辑"图标，可修改数据源信息。
删除数据源
在"我的数据"页面，单击"操作"列的"删除"图标，可删除当前数据源。
可视化编辑
编辑器概览
-
顶部工具栏
-
图层面板
-
组件列表
-
画布
-
页面配置（栅格间距是组件在页面中的最小移动单位）
-
底部工具栏
-
组件配置面板
-
样式配置
-
数据配置
-
交互配置
-
画布编辑
添加组件
在画布编辑器中，您可以通过以下两种方式添加组件：
-
按住鼠标直接将组件拖拽到画布即可。
-
直接单击组件。
选择组件
-
单击组件选中，按住 shift 键可以加选。
-
直接框选单个或多个组件。
修改组件的基本属性
-
平移
-
缩放
-
旋转
使用标尺
画布提供了标尺线功能。
-
移动鼠标到左侧或上方的标尺处，按住鼠标直接拖拽到画布可生成一条标尺线。
-
按住标尺线拖拽到画布外可删除一条标尺线。
-
拖动组件可以吸附到标尺线。
画布缩放及平移
-
通过底部工具栏可以修改画布的显示比例（页面布局变化时画布比例会自适应）。
-
当画布扩大到出现滚动条时，按住空格键可以平移画布。
收藏组件
支持对配置好且使用频率高的组件进行收藏。
-
右击组件，在弹出的功能列表里选择"收藏"。
-
收藏的组件会进入到左侧收藏菜单，可将收藏菜单下的组件单击或者拖拽的形式拖到右侧画布里去共享使用。
-
收藏组件的同时，会将当前组件的配置项目（配置属性、数据项）同时进行收藏。
-
在收藏菜单下单击"删除"按钮取消收藏。
图层管理
使用图层面板或者在画布中选中组件后单击右键都可以操作图层。
移动图层
单击选择图层，按住 ctrl 键可以选择多个图层。有以下两种方式可移动图层：
-
选中一个图层，单击"图层栏"上方的"置于顶层"、"置于底层"、"上移一层"或"下移一层"图标，可调整组件所在的图层。
-
在"画布"中右键单击组件，选择菜单中的"置于顶层"、"置于底层"、"上移一层"或"下移一层"，也可调整组件所在的图层。
隐藏图层
有以下两种方式可隐藏图层：
-
在图层面板中，单击"眼睛"图标，可以切换隐藏及显示的状态。
-
在"画布"中右键单击组件，选择"隐藏"，图层即可隐藏。显示图层需要在图层面板选择。
锁定图层
有以下两种方式可锁定图层：
-
鼠标悬浮到图层上面，右侧会出现"锁头"图标，单击该图标可锁定图层，再次单机锁头图标可以取消锁定。
-
在"画布"中右键单击组件，选择"锁定"，解锁图层必须在"图层面板"选择。
编组
有以下两种方式可编组图层：
-
选择一个或多个图层，单击"图层栏"下方的"编组"按钮。
-
在"画布"中框选多个组件，右键选择"编组"。
取消编组
有以下两种方式可取消编组图层：
-
选择编组图层，单击"图层栏"下方的"取消编组"按钮。
-
在画布中选择编组组件，右键选择"取消编组。"
重命名图层
双击图层名称进入编辑模式，可编辑图层的名称。
删除图层
有以下两种方式可删除图层：
-
选择一个或多个图层，单击"图层栏"下方的"删除"按钮。
-
在"画布"中选择一个或多个组件，右键选择"删除"。
复制图层
有以下两种方式可复制图层：
-
选择一个或多个图层，单击"图层栏"下方的"复制"按钮。
-
在"画布"中选择一个或多个组件，右键选择"复制"。
配置栏介绍
单击画布中任意一个组件，页面右侧会自动弹出组件配置栏，包含"样式"、"数据"和"交互"三个面板。
-
样式配置
-
数据配置
-
交互配置
组件样式
在"样式"面板中，您可以配置组件的"图表尺寸"、"图表位置"、"旋转角度"、"透明度"和其他属性样式。其中"图表尺寸"、"图表位置"、"旋转角度"和"透明度"适用于所有的组件，配置方法请参见基本属性。其他属性样式对每个组件来说都是不同的，属于私有配置，请参见各组件的配置说明。
- 基本属性
- 私有配置
基本属性
在"交互"面板中，您可以调整组件的尺寸、位置、旋转角度和透明度。
- 图表尺寸：包括组件的宽度和高度，单位为px。
- 图表位置：包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
- 旋转角度：以组件的中心为中心点，进行旋转，单位为度deg。
- 手动输入角度值，控制组件的旋转角度。
- 勾选
图标，控制组件左右翻转样式。 - 勾选
图标，控制组件上下翻转样式。
- 透明度：取值范围为0~1。为0时，图表隐藏；为1时，图表全部显示。默认为1。
组件数据
在"数据"面板中，您可以配置数据来源、配置字段映射、配置数据过滤器等。详情请参见配置组件数据。
组件交互
在"交互"面板中，您可以配置组件之间的交互事件，详情请参见配置组件交互。
焦点管理
焦点管理可有效提高大屏Pro产品的交互操作，使用 Tab 和 Shift + Tab可以快速切换光标位置。
示例一
-
选中组件，使右侧配置栏聚焦（单击一下配置栏）。
-
按 Tab 键，样式配置栏会出现高亮效果。
-
按左、右键可以切换焦点。
示例二
-
选中组件，聚焦右侧配置栏。
-
按 Tab 和 Shift + Tab 切换表单控件。
示例三
-
选中组件，聚焦到手风琴控件。
-
按空格键可以展开面板。
示例四
-
选中组件，聚焦到颜色控件。
-
按空格键可打开颜色编辑器。
示例五
-
聚焦到标题栏。
-
按Tab键观察聚焦效果。
配置组件数据
使用静态数据
-
在画布中选中组件。
-
在右侧配置栏"数据"面板，单击"配置数据源"。
-
修改静态数据值后，即可看到组件中数据发生变化。
使用API数据
以下教程以 API 数据为例解释一些基本概念。
使用 API 数据源
-
在画布中选中组件。
-
在右侧配置栏"数据"面板，单击"配置数据源"。
-
在数据源列表选择 "API"。
-
选择请求方式，填写API 地址及所有请求参数。
如果存在跨域或需要token等问题，需要勾选"由服务端发起请求"。
-
在下方的"数据响应结果"处可查看数据源的返回结果样式。
字段映射
字段映射表示图表数据与列表数据的映射关系。一般情况下，系统能够自动匹配数据源中的类目和值，完成数据映射。如果数据复杂，则需要手动输入字段来完成数据映射。数据映射成功后，状态列会自动显示匹配成功。
-
观察图表所需字段。
-
观察返回数据。
-
设置映射关系。
数据系列
上面的数据实际有两组值，type分别为Lon和Bor，我们需要设置"系列映射"并在图表中指定对应的系列值。
-
在右侧配置栏"数据"面板，设置系列映射。
-
在右侧配置栏"样式"面板，单击"数据列"区域，设置系列1的名为Lon。
-
单击右上角的加号图标，新增一个系列，设置系列2的名为Bor。
-
观察图表。
受控模式
受控模式表示组件初始化加载时是否请求接口。
-
在"数据"面板启用"受控模式"。
-
预览大屏，组件是没有渲染数据的。
自动请求更新
由于组件使用了受控模式，则需要设置"自动请求更新"或者"交互事件"才可以驱动组件重新渲染。
-
在"数据"面板，开启自动请求更新，设置时间间隔为 5s。
-
预览大屏，等待5s观察组件变化。
使用CSV数据
-
在画布中选中组件。
-
在右侧配置栏"数据"面板，单击"配置数据源"。
-
在数据源列表选择 "CSV"。
-
在CSV数据列表中选择一条数据（从"我的数据"创建），下方的"数据响应结果"处可以查看数据。
使用数据库
-
在画布中选中组件。
-
在右侧配置栏"数据"面板，单击"配置数据源"。
-
在数据源列表选择"数据库"。
-
在数据库列表中选择一条数据（从"我的数据"创建）。
-
输入SQL语句。
使用听云数据源
-
在画布中选中组件。
-
在右侧配置栏"数据"面板，单击"配置数据源"。
-
在数据源列表选择"基调听云"。
-
在数据列表中选择一条数据（从"我的数据"创建）。
使用观云数据源
-
在观云平台"多维探索"中配置查询语句，点击"高级模式"。
-
在高级模式中，点击右下角"复制"按钮复制语句。
-
在画布中选中组件。
-
在右侧配置栏"数据"面板，单击"配置数据源"。
-
在数据源列表选择"基调观云"。
-
在请求参数中粘贴复制好的NBQL语句。
数据过滤器
新增过滤器
在"配置数据源"面板中，在"数据过滤器"处单击新增按钮可以创建一个过滤器。
删除过滤器
单击删除按钮可以删除一个过滤器。
编写过滤函数
示例：从数据列表中取前三条数据。
创建多个过滤器
大屏编辑器允许创建多个过滤器，后一个过滤器的data为前一个过滤器的输出值。
配置组件交互
交互事件
一对一交互1
下面以ECharts柱状图和标题两个组件为例，介绍交互配置。
-
新增"Echarts柱状图"和"标题"组件，然后选中ECharts柱状图。
-
在"交互"面板配置交互事件。
-
处理柱状图传给标题组件的data。
-
预览大屏，观察组件变化。
一对一交互2
组件可以与自身交互。
-
添加一个"日期时间"组件。
-
样式面板开启定时回调。
-
在交互面板配置交互事件。
-
预览大屏，观察组件变化。
一对多交互
-
添加"Echarts柱状图"及两个"标题"组件。
-
在"交互"面板中新增交互事件。
多个相同组件可以通过id区分。
-
配置第二个交互事件为切换显隐。
-
预览大屏，观察组件变化。
多对一交互
-
添加"Echarts柱状图"、"Echarts折线图"及"标题"组件。
-
分别配置柱状图与标题，折线图与标题联动。
-
预览大屏，观察组件变化。
辅助交互组件
辅助交互组件没有常规样式，主要用于辅助其它组件做一些交互联动。在组件列表中选择"交互"，即可查看交互组件。
定时器
"定时器"可实现延迟定时、延迟循环定时及定点定时。
使用场景：
-
单击按钮，延迟执行某个动作。
-
到达某个时间点执行某个动作。
| 配置项 | 说明 |
|---|---|
| 定时方式 | 支持延迟定时和定点定时。 |
| 是否循环 | 是否循环，只支持延迟定时，根据延迟间隔配置循环。 |
| 延迟间隔 | 可设置间隔及单位。 |
| 定点时间 | 当选择定点定时时有效，设置具体的时间点。 |
| 事件 | 说明 |
|---|---|
| 当到计时点时 | 到达计时点时抛出事件。 |
| 动作 | 说明 |
|---|---|
| 开始计时 | 启 动计时器。 |
| 停止计时 | 停止计时器。 |
页面导航
| 配置项 | 说明 |
|---|---|
| 链接类型 | 固定值：固定打开某个链接。 动态值：根据组件数据动态打开某个链接。 |
| 链接地址 | 跳转页面的链接地址。 |
| 变量名 | 动态打开链接时，上游组件传递给该组件的对象 key。 |
| 在新窗口中打开 | 是否在新tab页面中打开链接。 |
| 请求参数 | 链接上面的请求参数，支持动态增减。 |
| 动作 | 说明 |
|---|---|
| 打开页面 | 打开配置的链接地址。 |
WebSocket
| 配置项 | 说明 |
|---|---|
| socket 服务地址 | socket 后端服务地址，默认根据当前环境自动填充。 |
| 用户名 | 当前用户名，默认根据当前环境自动填充。 |
| 分组 | 分组名称，两个交互大屏的分组必须保持一致。 |
| 接收消息事件 | 配置接收消息，支持动态增减。 |
| 发送消息动作 | 配置发送消息，支持动态增减。 |
事件：根据接收消息配置动态生成。
动作：根据发送消息配置动态生成。
终端交互
创建控制端大屏
-
单击"创建控制端"按钮。
-
在弹出的对话框中输入大屏名称，选择设备类型及分辨率，也可以自定义输入设备分辨率。
-
单击"确定"进入大屏编辑页面。
预览控制端大屏
控制端大屏的预览页面分为两部分，左侧是预览区域，右侧是扫码区域，同时可以设置访问密码及有效期。
注意：必须发布之后才可以扫码预览。
设置多屏交互
用户交互需求：单击控制端上面的按钮组改变主屏幕的标题名称。
大屏Pro通过建立不同屏幕的WebSocket服务，将需要交互的组件与WebSocket组件关联，从而实现控制端大屏与主屏的联动。
编辑控制端大屏
-
新增一个"按钮组"组件及"WebSocket"组件。
-
更改WebSocket配置，对于控制端大屏需要设置WebSocket的"发送消息动作"。
-
设置按钮组的选中事件，关联到WebSocket的发送消息动作【按钮选中】。
编辑被控制大屏
-
新增一个"标题"组件及"WebSocket"组件。
-
设置WebSocket组件的接收消息事件，"接受消息名称"必须和控制端的"发送消息名称"一致。
-
设置WebSocket组件的交互事件，关联标题组件的"导入数据"。
预览交互
说明：WebSocket组件是一个单纯的交互组件，预览时不需要显示在屏幕上，可以在编辑器中将该组件移到画布之外。