--- layout: zh_single title: 大屏 sidebar: nav: "zh_docs_sidebar" toc: true toc_label: 大屏 toc_icon: "cog" last_modified_at: "2020-10-29" --- 大屏（Display）是 Davinci 提供的第二个可视化应用，提供自由布局和自定义样式能力，通过可视化组件和一系列内置辅助图形来打造视觉呈现丰富的可视化大屏 大屏的定位与仪表板不一样，仪表板倾向于快速打造可视化报表，而大屏通常被广泛用于静置或滚动观看和演示的场景，因此大屏的制作过程通常需要比仪表板花更多的时间，需要用户准备素材（如背景图）来丰富大屏的样式 ## 1 新建大屏 在可视化应用首页，点击“创建新 Display”按钮来创建大屏 ![新建大屏1](../../assets/images/display/1.1.png) 与仪表板一样，制作中的大屏可以选择“编辑”，这样对于[可视化应用模块只读权限的角色](3.4-project#32-权限设置)是不可见的 权限管理页签可以选择该大屏对哪些[角色](3.3-role)可见 ![新建大屏2](../../assets/images/display/1.2.png) 点击保存之后，可以看到刚才创建的大屏卡片，编辑状态的大屏卡片是置灰的；发布之后卡片会正常显示，卡片右上角有编辑、复制和删除按钮 ![新建大屏3](../../assets/images/display/1.3.png) ## 2 编辑器 点击大屏卡片进入编辑器，编辑器顶部左右分别为标题区和工具区，下方左侧为大屏页目录，中间是大屏主编辑区，右侧依次包含画布、图层列表和参数配置表单 ![编辑器1](../../assets/images/display/2.1.png) ### 2.1 大屏页 每个大屏可以有多张大屏页，工具栏左侧为大屏页目录，点击目录切换大屏页，内容会展示到编辑区 #### 2.1.1 添加大屏页 点击工具栏添加大屏页按钮，会在当前编辑中大屏页之后添加一张新大屏页 #### 2.1.2 目录操作 在左侧目录可以进行如下操作： 1. 打开右键菜单，可以将该大屏页截图设为大屏封面（前提是该大屏页已[设置封面](2.5-display#232-底部栏)），以及删除大屏页 ![目录操作1](../../assets/images/display/2.0.2.1.png) 2. 拖拽大屏页改变顺序 #### 2.1.3 删除大屏页 在目录中打开右键菜单，或是在目录中选择大屏页后按 `Delete` 键，都可以删除大屏页 ### 2.2 工具栏 工具栏共有6组按钮： - 添加大屏页 - 大屏设置 - 组件与辅助图形：选择要展示在画布中的组件和辅助图形 - 操作键：用于对画布图层的功能操作 - 预览 - 分享 #### 2.2.1 大屏设置 点击大屏设置按钮打开全局设置面板，可以设置以下内容 1. 全局播放设置 2. 全局动画设置 这两个是对于大屏最终展现而设置的 播放设置说明了屏与屏之间应该怎样切换（自动或手动）。当选择自动播放时，该间隔时间（秒）参数需要指定；当取消自动播放时，则由用户通过键盘左右键或者点击大屏中的左右箭头进行手动切换屏 动画设置说明了屏与屏之间切换的动画效果以及过度动画的速度 3. 拖动栅格设置 对于一个大屏页，有长高像素参数。在设计时，为方便布局以及规整，往往将大屏横纵方向分别切成若干个块来进行设计。出于此，栅格设置提供了 x 轴 y 轴方向的最小单位拖动像素大小，设置的值与大屏设计稿结合，可加快大屏的编辑，免去细微像素的计算麻烦 ![大屏设置1](../../assets/images/display/2.1.0.1.png) #### 2.2.2 添加组件 点击 Widgets 按钮会弹出可视化组件列表，点击组件卡片进行选择；在下一步中指定组件数据刷新模式，支持以下两种模式： 1. 手动刷新：通过点击组件右上角“同步数据”按钮更新数据 1. 定时刷新：根据所设置的更新时长定时自动轮询更新数据，时长单位为秒 ![添加组件1](../../assets/images/display/2.1.1.1.png) ![添加组件2](../../assets/images/display/2.1.1.2.png) 点击保存按钮后，所选组件会添加到画布图层中 拖动图层更改位置，鼠标拖拽图层右下角更改大小 ![添加组件3](../../assets/images/display/2.1.1.3.png) #### 2.2.3 添加辅助图形 点击辅助图形下拉列表，可以看到目前支持的4种辅助图形： - 矩形：支持设置背景颜色、背景图片和边框，一般用于给组件做背景修饰 - 标签：用于做文本展示，双击进行编辑 - 视频：支持播放在线视频 - 时间器：展示一个动态变化的时钟 ![添加辅助图形1](../../assets/images/display/2.1.2.1.png) 点击列表项即可添加辅助图形到画布中 #### 2.2.4 操作键 操作键有复制、粘贴2个按钮，其中复制、粘贴和删除按钮支持多选图层后批量操作 上述操作键同时也支持通过键盘快捷键控制，和我们平时使用的快捷键一致 | 功能 | Mac 快捷键 | Windows 快捷键 | | - | - | - | | 复制/粘贴 | `Cmd + C` / `Cmd + V` | `Ctrl + C`/ `Ctrl + V` | | 删除 | `Delete` | Backspace | #### 2.2.5 预览与分享 制作完成大屏之后，可以点击预览按钮进行预览；分享功能则与[仪表板分享](2.4-dashboard#23-分享)一致，有普通分享、口令分享和授权分享 ### 2.3 编辑区 #### 2.3.1 画布 组件和辅助图形添加到画布后可视为画布中的图层，用户可以在画布中通过拖拽编辑图层的尺寸和位置；为辅助对图层定位，在编辑图层时，图层顶部会实时显示当前位置，画布会显示相应的辅助线来帮助用户对齐图层 ![画布1](../../assets/images/display/2.2.1.1.gif) ![画布2](../../assets/images/display/2.2.1.2.gif) 在画布中按住 `Cmd` 或 `Alt` 键点击图层可以批量选中，然后进行复制、删除和对齐等操作 ![画布4](../../assets/images/display/2.2.1.4.png) 对于选中图层，可以使用键盘方向键对图层位置进行微调 另外对于画布中的组件，可以点击右上角的编辑按钮进入组件编辑界面 点击画布中的空白区域，可以去掉对图层的选中状态 #### 2.3.2 底部栏 画布的底部栏的左下角是截图按钮，当前大屏页编辑完毕之后，可点击按钮生成缩略图，生成成功之后，我们发现左侧大屏列表中改大屏页的缩略图已经更新 右下角的滑块可以对画布进行缩放，辅助用户编辑局部样式 ![画布3](../../assets/images/display/2.2.1.3.gif) #### 2.3.3 图层列表 用户可以在图层列表编辑以下操作： - 选择图层：点击列表项可以让画布中的图层处于被选中状态 - 批量选中图层：按住 `Cmd` 或 `Alt` 键点击图层列表项可以批量选中图层 - 编辑图层 Z 轴位置：选择图层之后，可以点击图层列表顶部的按钮改变图层 Z 轴位置 #### 2.3.4 配置表单 默认状态下，配置表单中显示画布配置项，其中包括： - 屏幕尺寸：用户可根据实际展示大屏设备设置画布尺寸 - 背景 - 背景颜色 - 背景图片 - 播放设置 - 我们在 2.1.1 中的“全局播放设置”是对于所有大屏页播放的默认设置，在这里也是默认“跟随全局”的，可以通过取消勾选个性化设置当前大屏页的自动播放以及停留时间（秒） - 过渡动画 - 与“播放设置”设置原理相同 - 缩放方式： - 等比缩放宽度：画布宽度与显示终端宽度一致，高度等比缩放 - 等比缩放高度：画布高度与显示终端高度一致，宽度等比缩放 - 全屏铺满：画布宽、高皆与显示终端一致，此时画布有可能变形 - 实际尺寸 在图层处于选中状态时，配置表单中显示图层配置项，其中包括： - 尺寸 - 位置 - 背景色 - 边框 - 数据刷新模式 - 特有配置 在批量选中图层时，配置表单中显示图层对齐方式