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