步驟一：添加組件

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

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

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

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

   

步驟二：配置數據源

1. 在Web可視化編輯頁面右側樣式中選擇以下方式配置圖片數據源。

   • 單擊上傳圖片，上傳本地圖片，或從已有的圖片庫中選擇圖片。

   • 單擊上傳圖片右側的配置數據源按鈕，選擇數據源類型進行配置，將返回的數據作為圖片URL。

     可選數據類型為設備、接口、應用推送、頁面變量，返回數據的格式必須為字符串。

2. 單擊確定。

組件將基于關聯的數據源實時更新展示圖片。

步驟三：配置樣式

• 組件可見性：

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

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

  說明

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

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

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

• 圖片樣式：

  如果圖片被拉伸展示，可通過配置W值（寬度）和H值（高度），設置圖片大小。

有關組件通用樣式配置，請參見樣式配置。

步驟四：配置交互動作

1. 選中組件的交互頁簽，配置事件和交互動作。具體操作請參見交互配置。

   例如，點擊組件，執行動作打開鏈接，即配置鏈接打開方式，展示鏈接的內容。

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