本文介紹使用Web可視化開發工具，搭建一個農業生產環境的溫室監控大屏。

背景信息

在農業生產的場景中，使用監控大屏實時展示各智能監控設備上報的數據，您可隨時了解溫室內和溫室外的溫度、濕度、光照度、土壤水分等信息。

監控大屏示例圖：

1. 創建Web可視化應用。具體操作，請參見創建Web應用。
2. 在Web應用編輯頁左側導航欄，單擊頁面，然后配置應用頁面背景、分辨率等信息。
   • 分辨率選擇為1920*1080（常見寬屏比例）。
   • 在底部工具欄，選中自適應前的復選框，應用頁面就可以自適應屏幕大小（等比縮放，寬度撐滿屏幕）。

   
3. 布局。
   1. 拖拽矩形組件到畫布上。這些矩形組件將作為其他組件的背景。
   2. 單擊選中矩形組件，然后在右側配置樣式：大小、位置、填充顏色、邊框顏色和粗細。
      
   3. 拖拽一個iframe組件到頁面中間，調整組件大小、位置，和配置關聯鏈接。iframe組件可用于展示鏈接的頁面內容，如企業介紹視頻等。
      

      設置目標鏈接為HTTPS鏈接后，組件中將展示目標頁面的內容。

      注意 如果設置為HTTP鏈接，畫布上不會顯示鏈接頁面內容。需單擊上方預覽按鈕，預覽頁面會展示HTTP鏈接頁的內容。

      
4. 配置文字組件，用于展示大屏的標題。
   從左側組件中，拖拽一個文字組件到畫布上。然后在右側配置欄中，設置文字顯示位置、文字內容、文字樣式等。
5. 配置時鐘組件，用于展示當前時間。
   
6. 配置數據展示組件。

   設備上報的數據可使用多種組件展示，如文字組件、表格組件、各種圖形組件。配置組件時，需將組件的數據源配置為設備上報的對應數據。

   本文示例中，使用了以下組件：

   • 配置文字組件，展示各區域的標題。
   • 配置儀表盤組件，用于展示智能設備上報的屬性數據。
     • 在儀表盤組件樣式配置中，配置標題為該儀表盤展示的數據類名稱，如濕度、室內溫度、室外溫度等。
     • 數據源配置為設備上報的對應屬性。如，濕度的數據源為溫濕度計上報的當前濕度。

     下圖為展示溫度數據的儀表盤配置。

     
   • 配置文字組件，用于展示某類數據值。

     本示例中，使用三個文字組件共同實現數據展示，組成數據類+數據+數據單位的組合。三個文字組件的文字內容分別為：

     • 手動輸入的數據類名稱。
     • 單擊文字內容右側配置數據源按鈕，在數據源配置面板，配置設備上報的相關屬性數據。
     • 手動輸入的屬性數據單位。

     下圖為展示室外溫度數據的配置。

     
   • 配置開關組件，用于展示溫室內設備狀態。

     開關組件的數據源需配置為對應的設備。

     
   • 配置一個曲線圖，展示一天內的光照度。

     曲線圖的數據源配置為光照監控設備；實時數據時間段選擇為當天0點-24點。

     
7. 配置完成后，單擊預覽，查看和驗證應用頁面。
8. 單擊發布，將應用發布到云端。