## 快速入门

### 创建可视化应用

1. 进入平台，在**大屏管理**页面中，单击**新建大屏**。

   ![新增1](新增1.png)

2. 在**新建大屏** 对话框中，输入可视化应用的信息。

   ![新增2](新增2.png)

3. 单击**确认**

   应用创建成功后会跳转到大屏编辑页面

   然后跳转进入大屏编辑页面

   ![新增3](新增3.png)

### 添加并配置可视化组件

#### 添加并配置柱形图组件

1. 在画布左上组件栏中，鼠标滑过第一列**图表列**，出现图标列组件，点击**柱形图**，将**柱形图**组件添加到画布中.

   ![编辑1](编辑1.png)  

2. 配置**柱形图**的样式

   ![柱形图2](柱形图2.png)

3. 配置**柱形图**的数据，

   在**代码编辑**中，修改数据

   ![柱形图3](柱形图3.png)

   修改好数据后，剪辑**确认**。

   ![柱形图4](柱形图4.png)

   然后点击**刷新**。

   ![柱形图4](柱形图5.png)  

   通过上面的方式添加上您的大屏所需要的组件，完成大屏组件的拖拽。

### 调整组件的图层和位置

1. 在平台**大屏管理**页面中，选择一个可视化应用，单击**编辑**。

   ![调整组件的图层和位置-编辑-1](调整组件的图层和位置-编辑-1.png)

2. 右击组件，选择调整组件的图层位置，或者在左侧图层栏，拖动组件上移或下移，调整组件图层位置。

   ![调整组件的图层和位置-编辑-2](调整组件的图层和位置-编辑-2.png)

3. 在画布中通过拖拽调整组件位置，或在**操作栏**的参数中修改组件的坐标位置。

   ![调整组件的图层和位置-编辑-3](调整组件的图层和位置-编辑-3.png)

### 预览并保存可视化应用

1. 单击画布编辑器顶部的**预览**图标，预览可视化应用。

   ![预览并保存可视化应用-预览-1](预览并保存可视化应用-预览-1.png)  

2. 单击画布编辑器顶部的**保存**图标，保存可视化应用。

   ![预览并保存可视化应用-预览-1](预览并保存可视化应用-预览-2.png)  

### 查看可视化应用

1. 在平台**大屏管理**页面中，选择一个可视化应用，单击**预览**。

   ![查看可视化应用-预览-1](查看可视化应用-预览-1.png)

2. 即可成功查看到可视化应用

   ![查看可视化应用-预览-2](查看可视化应用-预览-2.png)

## 可视化应用管理

### 编辑可视化应用

1. 在平台**大屏管理**页面中，选择一个可视化应用，单击**编辑**。

   ![可视化应用管理-编辑-1](可视化应用管理-编辑-1.png)

2. 在可视化应用编辑页面，修改组件的布局和配置，或者添加、删除组件，完成可视化应用的编辑。

   编辑完成后，可查看可视化应用。

### 重命名可视化应用

1. 在平台**大屏管理**页面中，选择一个可视化应用，单击**编辑**图标。

   ![可视化应用管理-重命名-1](可视化应用管理-重命名-1.png)

### 复制可视化应用

1. 在平台**大屏管理**页面中，选择一个可视化应用，单击**复制**图标。

   ![可视化应用管理-复制-1](可视化应用管理-复制-1.png)

2. 重新填写大屏信息，系统会自动生成一个相同的可视化应用

   ![可视化应用管理-复制-2](可视化应用管理-复制-2.png)

### 下载和导入可视化应用

1. 在平台**大屏管理**页面中，选择一个可视化应用，单击**下载**图标，可以把可视化应用下载下来。

   ![下载和导入可视化应用-下载](下载和导入可视化应用-下载.png) 

2. 在平台**大屏管理**页面中，选择一个可视化应用，单击**快速导入**图标，可以把下载下来的可视化应用导入进平台。

   ![下载和导入可视化应用-导入](下载和导入可视化应用-导入.png)
::: tip 温馨提示：
**注意json文件的大屏id是否与平台已有的数据重复，如果重复，需要先修改id，才能导入成功
:::
### 删除可视化应用

1. 新建的可视化应用默认是**已启动**状态，此时是不能删除的，需要把其改为**已禁用**状态

   ![删除可视化应用-1](删除可视化应用-1.png)

2.  然后就可以单击删除，删除可视化应用，同时也可以启动可视化应用

   ![删除可视化应用-2](删除可视化应用-2.png)

### 预览可视化应用

1. 在平台**大屏管理**页面中，选择一个可视化应用，单击**预览**图标。

   ![预览可视化应用](预览可视化应用.png)

## 数据配置管理

一个组件最多只有5种数据配置方式，分别为：静态数据、动态数据、WebSocket、设备数据和脚本数据

![数据配置管理](数据配置管理.png)

### 静态数据

第一步，点击选择**静态数据**，编辑数据值

![静态数据-1](静态数据-1.png)

第二步，弹出数据值编辑框，修改数据值，点击**确定**

![静态数据-2](静态数据-2.png)

第三步，此时数据就成功被设置。

![静态数据-3](静态数据-3.png)

### 动态数据

第一步， 选择数据类型为**动态数据**，然后填入请求接口url，选择请求方式

![动态数据-1](动态数据-1.png)

第二步，编辑参数，参数必须是json格式，而且**需要避免符号为中文符号**

![动态数据-2](动态数据-2.png)

第三步，刷新时间设置，默认为5s刷新一次（即5s重新请求一次接口）。接下来需要编辑接口返回的数据（注意里面的代码为js代码），让其渲染到组件上。

![动态数据-3](动态数据-3.png)

第四步，点击刷新

![动态数据-4](动态数据-4.png)

### WebSocket

第一步，选择数据类型为**WebSocket**

![WebSocket-1](WebSocket-1.png)

第二步，编辑接口参数

![WebSocket-2](WebSocket-2.png)

第三步，编辑接口返回数据

![WebSocket-3](WebSocket-3.png)

第四步，点击刷新

![WebSocket-4](WebSocket-4.png)

### 设备数据

第一步，选择数据类型为**设备数据**，然后选择设备，配置参数

![设备数据-1](设备数据-1.png)

第二步，编辑返回数据

![设备数据-2](设备数据-2.png)

第三步，点击刷新

![设备数据-3](设备数据-3.png)

### 脚本数据

第一步，选择数据类型为**脚本数据**

![image-20201125172019476](脚本1.png)

第二步，编辑脚本代码

![image-20201125172047088](脚本2.png)

第三步，编辑返回数据

![image-20201125172131783](脚本3.png)

第四步，点击刷新

![脚本4](脚本4.png)