[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——設備——數據點，這三個數據源缺一不可