應用示例

• 廁所使用狀況監測大屏中使用指示燈展示廁所占用狀況。如下圖所示。

• 使用多個指示燈表示多個狀態，例如水溫過低顯示藍色，正常顯示綠色，過高顯示紅色。

步驟一：添加組件

1. 創建Web應用。具體操作，請參見創建Web應用。

2. 在Web應用編輯器中，單擊最左側的組件圖標。

3. 在畫布左側組件列表上方，輸入指示燈，找到該組件，然后將組件拖拽到中間畫布。

   有關組件添加的更多信息，請參見添加組件。

   

步驟二：配置數據源

1. 在Web應用編輯器右側樣式中，單擊展示數據后的配置數據源。

2. 在數據源配置頁面，選擇數據源類型，完成配置。

   可選數據類型有設備、接口、靜態數據、應用推送。

   說明

   • 設備數據源支持返回的數據類型為布爾型（bool）、枚舉型（enum）和數值型（單精度數字、雙精度數字和整數）。接口數據源支持返回的數據類型為布爾型（bool）和數值型（單精度數字、雙精度數字和整數）。

     • 布爾型：true和false對應的指示燈開關，由設備物模型屬性和接口返回值的配置決定。

     • 枚舉型：不同枚舉值對應不同的狀態和顏色。 可根據產品物模型的枚舉型屬性配置相應顏色。

     • 整數：將設備返回的整數型數據轉換為布爾型或枚舉型。

     • 單精度數字、雙精度數字：將設備返回的單精度數字、雙精度數字，轉換為枚舉型。

     • 數值型：使用數據過濾腳本將接口返回的數值型數據轉換為布爾型或枚舉型。

   • 數據源為設備時，可設置設備離線時，指示燈默認展示的顏色或圖片。

     在重復列表中使用該組件時，若需設置設備離線時的組件顯示，該組件數據源配置需關聯設備，配置方法如下：

     • 重復列表數據源配置為設備，該組件的數據源可配置為母組件數據源或設備。

     • 重復列表數據源配置非設備，該組件的數據源必須為設備。

   組件會從綁定屬性的值解析對應狀態，在樣式中顯示對應的配置項。

3. 單擊確定。

步驟三：配置樣式

1. 在右側樣式中，選擇展示樣式，完成指示燈樣式配置。

   • 組件可見性：

     組件可見性支持配置動態數據源，可選設備、接口、應用推送。數據源返回數據格式必須為布爾型或枚舉型。

     如果配置數據源為設備，僅支持選擇屬性，支持數據格式為單精度數字、雙精度數字、整數、布爾型和枚舉型。此時，支持設置設備離線時組件是否可見。若數據源的數據格式為數值型，需要轉換整數型為布爾值或轉換數字為枚舉型后設置對應的可見性。

     說明

     在重復列表中使用該組件時，若需要根據設備物模型屬性設置組件可見性及對應設備離線時組件可見性，該組件數據源配置需關聯設備，配置方法如下：

     • 重復列表數據源配置為設備，該組件可見性的數據源可配置為母組件數據源或設備。

     • 重復列表數據源配置非設備，該組件可見性的數據源必須為設備。

   • 展示數據：

     • 顏色：指示燈會展示數據源狀態值對應的默認顏色，支持修改。

     • 圖片：上傳圖片后，指示燈會展示數據源狀態值對應的圖片。

     

2. 調整組件在頁面中的最終位置。有關組件通用樣式配置的更多信息，請參見樣式配置。

步驟四：配置交互動作

1. 在Web應用編輯器右側交互中，單擊新增交互，設置事件和動作。

   該組件支持鼠標移入事件。例如，鼠標移入，執行動作展示隱藏，顯示某個隱藏的組件，展示組件數據更多的說明信息。

   具體操作，請參見交互配置。

2. 單擊頁面右上方的預覽，預覽和調試組件展示的數據和樣式。