[TOC] # 云平台WEB组态 ## 一、概述 云平台支持WEB组态，分组态编辑器和运行展示 **编辑页面示例：**  **运行页面示例：**  ## 二、组态编辑器介绍 组态编辑器主要由**顶部工具栏**、**左侧组件栏**、**画布**、**右侧配置栏**组成，以下简单介绍组态编辑器的各功能区域。  * **工具栏**：执行常见的操作，例如**复制、粘贴、保存、运行、放大、缩小、删除、全选、向上一层、向下一层、移至最上、移至最下** * 组件栏：分为控件、SVG、图片 * **控件**：分为基本控件、视频控件、仪表 * **SVG**：提供大量SVG图片 * **图片**：提供大量图片，支持本地上传素材 * **画布**：把组件从组件栏拖拽放置于此 * 配置栏：对画布样式、组件样式、组件数据进行配置 * **画布**：配置画布尺寸、背景、锚点颜色，支持本地上传背景图片 * **元素**：编辑组件位置、尺寸、外观、交互 * **数据**：为组件绑定数据来源 ## 三、工具栏介绍  顶部工具栏为元件在页面画布中的一些常用操作功能，**选中画布中的组件，点击工具栏中的按钮对组件进行操作**。 从左到右功能依次如下： * **放大** 将选中的组件放大 * **缩小** 将选中的组件缩小 * **复制** 可在当前组态工程中，复制多个相同配置的组件，**只支持复制文本组件、SVG组件、图片组件** * **粘贴** 把复制的组件粘贴在画布中 * **删除** 将选中的组件从画布中删除 * **全选** 选中画布中所有的组件，两种方式： * **点击“全选”按钮：只适用于文本组件、SVG组件、图片组件** * **鼠标“左键”选中多个组件：适用于所有组件** * **向上一层** 将选中组件的层级提高一层，具体表现就是提高层级的组件会覆盖在层级低的组件上面 * **向下一层** 将选中组件的层级降低一层，具体表现就是降低层级的组件会被层级高的组件覆盖 * **移至最上** 将选中组件的层级提高到最高层级 * **移至最下** 将选中组件的层级降低到最低层级 * **保存** 对当前的组态设计进行保存，点击“保存”按钮手动保存 * **运行** 查看当前组态设计的效果，点击“运行”按钮即可打开当前组态设计的运行画面 ## 四、组件栏介绍 ### 控件 #### 基本控件 * **文本控件**：用于文本描述信息 * **开关控件、按钮控件、指示灯控件**：控制和显示设备状态（开/关） * **输入控件、输出控件**：输入控件设置设备的数值，输出控件展示设备的数值，这两个要搭配在一起使用  #### 视频控件 用于视频展示  #### 仪表控件 更直观地展示设备信息  ### SVG SVG面板中是SVG图像素材的集合，系统提供已制作成型的图象，可根据需要应用于组态设计中。  ### 图片 图片面板中是图像素材的集合，系统提供已制作成型的图象，也支持用户在**自定义**面板中上传本地图片，可根据需要应用于组态设计中。  ## 五、配置栏介绍 ### 画布 * 可以配置**画布的尺寸**，目前支持的尺寸有：800 x 560（ipad竖屏）、1024 x 768（笔记本）、375 x 667（iphone6/7）、414 x 736（iphone6/7 plus）、自定义尺寸 * **锚点颜色** 可设置组件被选中时的锚点颜色 * **背景** 可设置背景颜色，背景图片（支持用户上传本地图片），背景网格  ### 元素 * **文本控件、SVG控件、图片控件** 文本控件、SVG控件和图片控件的配置项是一样的，下边以**文本控件**为例进行介绍： 可配置控件的**位置，宽高，缩放，透明度，旋转角度，颜色**，详见下图所示：  * **指示灯控件** 可配置控件**位置，宽高，缩放，真假值颜色**，详见下图所示：  * **输出控件** 可配置控件**位置，宽高，缩放，背景颜色，文字颜色，文字大小**，详见下图所示：  * **开关控件** 可配置控件**位置，宽高，缩放，点击时弹出的提示框内容**，详见下图所示：  * **按钮** 可配置控件**位置，宽高，缩放，文字样式，文字内容，点击时弹出的提示框内容**，详见下图所示：  * **输入控件** 可配置控件**位置，宽高，缩放，文字样式，点击时弹出的提示框内容**，详见下图所示：  * **仪表控件** 可配置控件**位置，宽高，缩放，表盘样式** **圆形仪表：**  **方形仪表：**  ### 数据 *特别说明：文本控件、SVG控件、图片控件不支持数据绑定* **数据绑定之前要确保设备在线，否则运行时组件状态不会更新** 数据绑定时，从上到下依次进行选择，**DTU——设备——数据点，这三个数据源缺一不可**  **视频控件** 可配置视频HLS地址，详见下图所示：  ## 六、数据绑定示例 特别说明：数据绑定时一定要确保设备在线，否则运行时组件状态不会更新，DTU——设备——数据点，这三个数据源缺一不可