Skip to content

Commit

Permalink
Merge pull request #57 from edp963/master
Browse files Browse the repository at this point in the history
merge from edp963/davinci master
  • Loading branch information
xxxllluuu authored Jul 9, 2021
2 parents 85ab9c0 + f2ffc40 commit e66efad
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 22 deletions.
4 changes: 3 additions & 1 deletion docs/_docs/zh/1.2-quick_start.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ last_modified_at: "2019-08-20"

## 1 注册与登录

首先需要注册账号,注册前确保邮件服务器已正确配置,填写真实的邮箱地址,用于接收激活邮件,点击注册后,到对应的邮箱中激活即可进入系统
Davinci 提供了一个默认账户,用户名 guest,密码 123456

也可以选择注册新账户,注册前确保邮件服务器已正确配置,填写真实的邮箱地址,用于接收激活邮件,点击注册后,到对应的邮箱中激活即可进入系统

![注册与登录1](../../assets/images/quick_start/1.1.png)

Expand Down
54 changes: 35 additions & 19 deletions docs/_docs/zh/2.5-display.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ last_modified_at: "2020-10-29"

大屏(Display)是 Davinci 提供的第二个可视化应用,提供自由布局和自定义样式能力,通过可视化组件和一系列内置辅助图形来打造视觉呈现丰富的可视化大屏

大屏的定位与仪表板不一样,仪表板倾向于快速打造可视化报表,而大屏通常被广泛用于静置观看与演示的场景,因此大屏的制作过程通常需要比仪表板花更多的时间,需要用户准备素材(如背景图)来丰富大屏的样式
大屏的定位与仪表板不一样,仪表板倾向于快速打造可视化报表,而大屏通常被广泛用于静置或滚动观看和演示的场景,因此大屏的制作过程通常需要比仪表板花更多的时间,需要用户准备素材(如背景图)来丰富大屏的样式

## 1 新建大屏

Expand All @@ -31,19 +31,19 @@ last_modified_at: "2020-10-29"

## 2 编辑器

点击大屏卡片进入编辑器,编辑器顶部为工具栏,下方为编辑区;编辑区中包含画布、图层列表和配置表单
点击大屏卡片进入编辑器,编辑器顶部左右分别为标题区和工具区,下方左侧为大屏页目录,中间是大屏主编辑区,右侧依次包含画布、图层列表和参数配置表单

![编辑器1](../../assets/images/display/2.1.png)

### 2.1 大屏页

每个大屏可以有多张大屏页,工具栏左侧为大屏页目录,点击目录切换大屏页,内容会展示到编辑区

### 2.1.1 添加大屏页
#### 2.1.1 添加大屏页

点击工具栏添加大屏页按钮,会在当前编辑中大屏页之后添加一张新大屏页

### 2.1.2 目录操作
#### 2.1.2 目录操作

在左侧目录可以进行如下操作:

Expand All @@ -53,24 +53,35 @@ last_modified_at: "2020-10-29"

2. 拖拽大屏页改变顺序

### 2.1.3 删除大屏页
#### 2.1.3 删除大屏页

在目录中打开右键菜单,或是在目录中选择大屏页后按 `Delete` 键,都可以删除大屏页

### 2.2 工具栏

工具栏共有4组按钮:
- 添加大屏页与大屏设置
工具栏共有6组按钮:
- 添加大屏页
- 大屏设置
- 组件与辅助图形:选择要展示在画布中的组件和辅助图形
- 操作键:用于对画布图层的功能操作
- 预览与分享
- 预览
- 分享

### 2.2.1 大屏设置
#### 2.2.1 大屏设置

点击大屏设置按钮打开全局设置面板,可以设置以下内容
- 大屏页轮播配置
- 大屏页播放动画配置
- 画布图层拖动步长配置
1. 全局播放设置
2. 全局动画设置

这两个是对于大屏最终展现而设置的

播放设置说明了屏与屏之间应该怎样切换(自动或手动)。当选择自动播放时,该间隔时间(秒)参数需要指定;当取消自动播放时,则由用户通过键盘左右键或者点击大屏中的左右箭头进行手动切换屏

动画设置说明了屏与屏之间切换的动画效果以及过度动画的速度

3. 拖动栅格设置

对于一个大屏页,有长高像素参数。在设计时,为方便布局以及规整,往往将大屏横纵方向分别切成若干个块来进行设计。出于此,栅格设置提供了 x 轴 y 轴方向的最小单位拖动像素大小,设置的值与大屏设计稿结合,可加快大屏的编辑,免去细微像素的计算麻烦

![大屏设置1](../../assets/images/display/2.1.0.1.png)

Expand All @@ -86,6 +97,8 @@ last_modified_at: "2020-10-29"

点击保存按钮后,所选组件会添加到画布图层中

拖动图层更改位置,鼠标拖拽图层右下角更改大小

![添加组件3](../../assets/images/display/2.1.1.3.png)

#### 2.2.3 添加辅助图形
Expand All @@ -102,16 +115,14 @@ last_modified_at: "2020-10-29"

#### 2.2.4 操作键

操作键包含复制、粘贴、撤销、前进、删除5个按钮,其中复制、粘贴和删除按钮支持多选图层后批量操作,编辑画布过程中,可随时点击撤销或前进来实现编辑的回滚和恢复
操作键有复制、粘贴2个按钮,其中复制、粘贴和删除按钮支持多选图层后批量操作

上述操作键同时也支持通过键盘快捷键控制,和我们平时使用的快捷键一致

| 功能 | Mac 快捷键 | Windows 快捷键 |
| - | - | - |
| 复制/粘贴 | `Cmd + C` / `Cmd + V` | `Ctrl + C`/ `Ctrl + V` |
| 删除 | `Delete` | Backspace |
| 撤销 | `Cmd + z` | `Ctrl + z` |
| 前进 | `Cmd + y``Shift + Cmd + z` | `Ctrl + y` |

#### 2.2.5 预览与分享

Expand All @@ -120,7 +131,7 @@ last_modified_at: "2020-10-29"
### 2.3 编辑区
#### 2.3.1 画布

组件和辅助图形添加到画布后可视为画布中的图层,用户可以在画布中通过拖拽编辑图层的尺寸和位置;为辅助对图层定位,在编辑图层时画布会显示相应的辅助线来帮助用户对齐图层
组件和辅助图形添加到画布后可视为画布中的图层,用户可以在画布中通过拖拽编辑图层的尺寸和位置;为辅助对图层定位,在编辑图层时,图层顶部会实时显示当前位置,画布会显示相应的辅助线来帮助用户对齐图层

![画布1](../../assets/images/display/2.2.1.1.gif)

Expand All @@ -138,7 +149,7 @@ last_modified_at: "2020-10-29"

#### 2.3.2 底部栏

画布的底部栏的左下角是截图按钮,可以对画布内容进行截图,生成大屏页封面
画布的底部栏的左下角是截图按钮,当前大屏页编辑完毕之后,可点击按钮生成缩略图,生成成功之后,我们发现左侧大屏列表中改大屏页的缩略图已经更新

右下角的滑块可以对画布进行缩放,辅助用户编辑局部样式

Expand All @@ -155,13 +166,18 @@ last_modified_at: "2020-10-29"

默认状态下,配置表单中显示画布配置项,其中包括:
- 屏幕尺寸:用户可根据实际展示大屏设备设置画布尺寸
- 背景颜色
- 背景
- 背景颜色
- 背景图片
- 播放设置
- 我们在 2.1.1 中的“全局播放设置”是对于所有大屏页播放的默认设置,在这里也是默认“跟随全局”的,可以通过取消勾选个性化设置当前大屏页的自动播放以及停留时间(秒)
- 过渡动画
- 与“播放设置”设置原理相同
- 缩放方式:
- 等比缩放宽度:画布宽度与显示终端宽度一致,高度等比缩放
- 等比缩放高度:画布高度与显示终端高度一致,宽度等比缩放
- 全屏铺满:画布宽、高皆与显示终端一致,此时画布有可能变形
- 实际尺寸
- 背景图片

在图层处于选中状态时,配置表单中显示图层配置项,其中包括:
- 尺寸
Expand Down
3 changes: 3 additions & 0 deletions docs/_docs/zh/2.6-schedule.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,12 @@ last_modified_at: "2020-10-29"
- 基本设置:任务名称、类型、描述、定时任务生效时间范围和执行周期
- 各类定时任务的私有设置
- 发送内容设置:选择要在邮件中发送的仪表板/大屏,可多选
- 其中部分选择大屏页时,鼠标悬浮在大屏页图标上时,若该大屏有缩略图,则会悬浮显示,方便用户的勾选

![新建定时任务2](../../assets/images/schedule/1.2.png)

![新建定时任务3](../../assets/images/schedule/1.3.gif)

点击保存定时任务配置

### 1.1 邮件
Expand Down
Binary file modified docs/assets/images/display/2.1.1.3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/schedule/1.3.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion webapp/internals/webpack/webpack.base.babel.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,11 @@ module.exports = options => ({
},
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
use: 'happypack/loader?id=js'
exclude: [
/\bcore-js\b/,
/\bwebpack\/buildin\b/
],
use: 'happypack/loader?id=js',
},
{
// Do not transform vendor's CSS with CSS-modules
Expand Down
2 changes: 1 addition & 1 deletion webapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"build:prod": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.dv.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean": "rimraf ./build",
"start": "cross-env NODE_ENV=development node server",
"start": "cross-env NODE_ENV=development node --max-old-space-size=3072 server",
"start:production": "npm run test && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
Expand Down

0 comments on commit e66efad

Please sign in to comment.