應用示例

如下圖所示，使用2.5D組件提示某設備發生告警。

步驟一：添加組件

1. 創建Web應用。具體操作，請參見創建Web應用。
2. 在Web應用編輯器中，單擊最左側的組件圖標。
3. 在畫布左側組件列表上方，輸入2.5D，找到該組件，然后將組件拖拽到中間畫布。

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

   

步驟二：配置2.5D組件樣式

1. 在Web應用編輯器右側樣式中，調整組件寬高和在頁面中的布局位置。

   具體操作，請參見樣式配置。

2. 在Web應用編輯器右側樣式中，單擊編輯組件。

   您也可以在中間畫布，雙擊2.5D組件。

3. 在組件編輯器頁面右側樣式中，配置2.5D組件展示樣式。

   配置項	說明
   背景	設置2.5D組件背景顏色。
   網格	設置2.5D組件是否顯示網格以及網格的密度。
   陰影設置	設置2.5D組件內模型是否顯示陰影，以及陰影的朝向和透明度。
   模型事件	設置2.5D組件是否顯示模型事件。
   全局模型標簽	設置2.5D組件是否顯示全局模型標簽和關聯狀態。 說明 選中關聯狀態復選框，標簽樣式會隨模型狀態變化而變化。

步驟三：配置2.5D組件內的模型

在組件編輯頁面，從左側組件頁簽和素材頁簽中拖拽所需的模型到2.5D組件中，配置各模型樣式。

例如2.5D管道模型和冷卻塔模型。下文介紹配置2.5D管道模型和冷卻塔模型的具體步驟。

• 2.5D管道模型
  1. 在組件編輯頁面，從左側組件頁簽中，拖拽2.5D管道模型到2.5D組件中，添加錨點繪制管道樣式。
  2. 可選：將鼠標指針移動至所選錨點上，使用Backspace鍵或Delete鍵刪除所選錨點。
  3. 完成繪制后，在右側樣式中，單擊結束編輯或按鍵盤上的Esc鍵結束編輯。

     如果需要再次編輯2.5D管道模型，在右側樣式中，單擊開始編輯或在畫布中雙擊2.5D管道模型進行編輯。

  4. 在右側樣式中，設置2.5D管道模型的顏色、寬度、流速、流動方向以及調整模型在頁面中的最終位置。
• 冷卻塔模型
  1. 在組件編輯頁面，從左側素材頁簽中，拖拽冷卻塔模型到2.5D組件中。
     1. 官方2.5D模型：在官方區域拖拽模型到2.5D組件中。
     2. 本地2.5D模型：單擊上傳素材，在素材庫對話框中，單擊上傳圖片，上傳本地2.5D模型至我的模型庫后，在個人區域拖拽模型到2.5D組件中。
        注意

        • 支持上傳.png格式的圖片文件。
        • 我的模型庫最大空間為5GB。
        • 官方模型庫中的2.5D模型不支持刪除。我的模型庫中的2.5D模型，您可單擊刪除圖標進行刪除。
  2. 在右側樣式中，設置冷卻塔模型的大小、標簽名稱、關聯狀態以及調整模型在頁面中的最終位置。
     說明 選中關聯狀態復選框，標簽樣式會跟隨模型狀態的變化而變化。

步驟四：配置模型數據源

1. 分別單擊2.5D組件中的模型，例如冷卻塔模型，在右側樣式中，單擊狀態后的配置數據源。
   注意 2.5D管道模型不支持配置數據源。
2. 在數據源配置面板中，選擇數據源類型，單擊確定，完成配置。

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

   數據源返回的數據類型必須為如下字符串。

   字符串	說明	狀態描述
   "NORMAL"	默認狀態，無數據源配置的設備狀態。
   "RUN"	設備正常運行。
   "IDLE"	設備空閑。
   "ALERT"	設備發生告警。
   "DOWN"	設備發生重大告警，已無法正常工作。

3. 單擊頁面右上角保存按鈕。
4. 單擊組件編輯頁面左上角的返回頁面。在Web應用編輯器，單擊頁面右上方的預覽，預覽和調試組件展示的數據和效果。