功能概述
FastBee 提供了開箱即用的可拖拽運行狀態(tài)面板。用戶在登錄移動端后，可以看到自己關聯(lián)的一個或多個設備，點擊設備后進入設備詳情頁面，這個頁面也稱為設備面板。
每個設備類型都有自己獨立的設備面板，也就是說，同一類設備擁有同樣的設備面板，您不需要為每個設備重復編輯設備面板。
因此，用戶在運行狀態(tài)中看到的每個設備面板，是由設備所屬產品決定的，通過編輯產品的應用配置，就可以為用戶展示各種不同的設備面板。
功能分布
設備面板是可編輯的，您可以在產品管理中，進入任意產品的詳情頁面，在應用配置中可以看到設備面板編輯器的入口，如下圖：
編輯面板
- 點擊“打開編輯面板”按鈕，進入設備面板編輯器，如下圖：
啟動
- 點擊“啟用”按鈕將啟用編輯面板生成的內容作為設備面板，如“停用”側顯示系統(tǒng)默認的狀態(tài)面板。
拖拽編輯器
拖拽編輯器由頂部工具欄、左側組件列表、編輯區(qū)域、右側組件配置組成
一、工具欄
可視化界面右上角為工具欄，可進行重置、導入、導出、查看Json、預覽，以及保存操作。
- 重置：點擊后清空所有設置
- 導入：導入Json文件生成可視化頁面
- 導出：將設計頁面導出為Json文件
- 查看：查看當前設計頁面的Json數(shù)據
- 預覽：預覽當前設計頁面在移動端的樣式
- 保存：保存數(shù)據并上傳云
二、組件列表
組件列表中不同組件作用不同，對應的數(shù)據類型也有所不同
| 組件類型名稱 | 數(shù)據類型 | 是否只讀 | 是否圖表 |
|---|---|---|---|
| 標題 | / | / | / |
| 文字展示 | 字符串 | / | 非圖表 |
| 數(shù)值展示 | 小數(shù)、整數(shù) | 只讀數(shù)據 | 非圖表 |
| 數(shù)值控制 | 小數(shù)、整數(shù) | 非只讀數(shù)據 | 非圖表 |
| 多狀態(tài)控制 | 枚舉 | / | 非圖表 |
| 開關控制 | 布爾 | / | 非圖表 |
| 歷史數(shù)據 | 小數(shù)、整數(shù) | 只讀數(shù)據 | 圖表 |
三、編輯區(qū)域
這里的“編輯”指的是設備面板的編輯區(qū)域，它是我們的主要編輯區(qū)域。 在編輯區(qū)域可以拖動組件列表中的組件進行編排設計，可以隨意除一個組件，也用鼠標左鍵選中一個組件，按下刪除鍵圖標即可刪除，同時可以滾動鼠標對畫布大小進行縮放。
四、組件配置
右側為組件配置，可在此進行頁面設置、圖層管理、組件樣式和屬性管理
- 頁面設置：進行運行狀態(tài)頁面背景顏色，背景圖片的設置
- 圖層管理：對多個組件的順序進行拖動管理
- 組件設置：組件對應屬性選擇以及樣式參數(shù)設計
操作流程
- 在產品詳情中選擇應用配置目錄，點擊啟用按鈕，并點擊打開編輯面板按鈕即可打開編輯面板。
- 從左側組件欄中選擇對應組件拖拽至中編輯區(qū)域（以文字展示組件為例），此時畫布提示需在右側對組件進行設置。
- 點擊屬性選擇按鈕組件屬性進行選擇，選擇需要屬性后點擊確認，即可在畫布中展示對應屬性。
- 設計完成后可將頁面導出保存為Json文件，或預覽移動端樣式，確認無誤后點擊右上側保存按鈕，保持數(shù)據至云端。
- 保存后打開移動端，選擇對應產品下的設備，即可查看設計的運行狀態(tài)頁面。
