IoT Studio平臺,即物聯網開發平臺。您可以使用IoT Studio中的Web應用編輯器搭建監控大屏,展示設備上報的數據。本文介紹Web應用開發過程。

操作步驟

  1. 登錄物聯網應用開發控制臺,在頁面左上角選擇對應實例后,在左側導航欄單擊項目管理。在項目管理頁面新建一個普通項目,具體操作,請參見普通項目
    創建成功,自動進入該項目。
  2. 在項目左側導航欄,選擇產品,然后單擊關聯物聯網平臺產品,將已創建的氣象監測產品與該項目關聯,具體操作,請參見關聯產品至普通項目
  3. 在項目左側導航欄,選擇設備,然后單擊關聯物聯網平臺設備,將要監控數據的來源設備與該項目關聯,具體操作,請參見關聯設備至普通項目
  4. 在項目左側導航欄,選擇主頁,單擊Web應用頁簽中新建,新建一個Web應用,具體操作,請參見創建Web應用
  5. 在Web應用編輯器中,搭建實時氣象數據監控面板。
    1. 選擇自定義新增頁,設置頁面標題和背景顏色等面板頁面顯示效果。在左側導航欄中,選擇組件組件,打開組件列表。
    2. 從組件列表中,拖拽一個矩形組件到畫布上,并配置組件樣式,具體操作,請參見矩形
    3. 從組件列表中,拖拽一個文字組件重疊于矩形組件上,再配置文字組件的數據源為氣象監測設備的溫度屬性,具體操作,請參見文字
      設置完成后,該文字組件將顯示氣象監測設備上報的溫度值。
    4. 從組件列表中,拖拽一個文字組件重疊于矩形組件上,文字內容設置為溫度(℃),作為溫度顯示組件的標題。
    5. 選中配置好的三個組件,單擊鼠標右鍵,選擇成組,將這三個組件組成組件組。
      成組
    6. 根據要展示的屬性數量,復制多個組。
      復制組件組時,各組件的顯示效果配置和數據源配置同時被復制。組件組
    7. 對復制的組件組單擊鼠標右鍵,選擇解散組
      復制的組件組所有配置均相同。需先解散組,才能重新配置組件數據源等信息。
    8. 分別將數據源設置為該產品的其他屬性,并設置對應的屬性名稱和單位。
      如有需要,還可在頁面上增加其他組件,如圖片組件等,請參見基礎組件使用說明
      控制面板效果參考圖如下。效果
    9. 所有組件配置完成后,單擊頁面上方的預覽預覽,預覽和測試應用頁面。
  6. 在Web應用編輯器中,新建空白頁面,配置屬性數據曲線展示圖。
    以配置溫度數據展示曲線圖為例。
    1. 在左側導航欄,選擇頁面頁面,再單擊新建符號+,新增空白頁面。
    2. 在左側導航欄,選擇組件組件,拖拽一個實時曲線組件到畫布上,并配置實時曲線組件的數據源為氣象監測設備的溫度屬性,具體操作,請參見實時曲線(舊)
    3. 配置曲線圖的顯示樣式。
      調整曲線圖大小、坐標,設置是否顯示時間選擇器,設置系列名稱為溫度等。
      說明 如果選中時間選擇器前的復選框,表示曲線圖上顯示時間選擇器。應用發布后,可以設置時間,查看對應時間段的溫度數據。
    4. 配置完成后,單擊頁面上方的預覽預覽,預覽和測試應用頁面。
  7. 單擊頁面上方的發布發布,發布應用。

后續步驟

應用發布后,在左側導航欄中選擇設置應用設置,可以開啟應用Token驗證,為應用綁定您自己的域名等。

更多Web應用可視化開發操作指導,請參見Web可視化開發文檔