一、實(shí)訓(xùn)目的

1、智慧小區(qū)安全防護(hù)系統(tǒng)的可視化展現(xiàn)；

二、 實(shí)訓(xùn)步驟

1 物聯(lián)網(wǎng)云平臺(tái)可視化組件配置運(yùn)用

步驟 1 創(chuàng)建一個(gè)可視化項(xiàng)目

可視化能力是 OneNET 平臺(tái)重點(diǎn)打造的基于物聯(lián)網(wǎng)設(shè)備大數(shù)據(jù)的增值服務(wù)能力，可以從平臺(tái)全部產(chǎn)
品服務(wù)的菜單列表中，點(diǎn)擊”數(shù)據(jù)可視化 view“菜單后，點(diǎn)擊“立即試用”按鈕進(jìn)入。

image.png

首先新增一個(gè)可視化項(xiàng)目，在彈出的模板選擇頁(yè)面，選擇一個(gè) 2D 項(xiàng)目模板下的“空白模板”作為本
次項(xiàng)目可視化的基礎(chǔ)模板，填寫(xiě)位于右側(cè)的項(xiàng)目名稱(chēng)、項(xiàng)目描述后，點(diǎn)擊“確定”完成可視化項(xiàng)目創(chuàng)建。

屏幕截圖 2022-04-15 103702.png

步驟 2 增加數(shù)據(jù)源模板

點(diǎn)擊左側(cè)菜單“數(shù)據(jù)管理”下“數(shù)據(jù)源模板”子菜單，右側(cè)頁(yè)面中，點(diǎn)擊“創(chuàng)建數(shù)據(jù)源模板”，預(yù)先
為界面展示距離的變化圖表建立一個(gè)數(shù)據(jù)來(lái)源模板。

image.png

在展開(kāi)的配置項(xiàng)中，先設(shè)定第一項(xiàng)的“數(shù)據(jù)類(lèi)型” 為“OneNET Studio”，這時(shí)頁(yè)面會(huì)切換為配置從
“OneNET Studio”抓取數(shù)據(jù)所需的必要信息。依次
填寫(xiě)帶“*”的所有項(xiàng)。（以其中一個(gè)為例）

image.png

步驟 3 編輯可視化頁(yè)面及各個(gè)組件

回到可視化項(xiàng)目列表展示頁(yè)面，點(diǎn)擊已創(chuàng)建好可視化項(xiàng)目縮略圖下方的“編輯”按鈕，進(jìn)入頁(yè)面編輯狀態(tài)，如果是采用已有模板，則需將頁(yè)面多余的控件加以刪除，保留背景等基礎(chǔ)效果，如果是空白模板，則直接添加本次實(shí)訓(xùn)所需的控件：常規(guī)圖表中的平滑折線(xiàn)圖。

步驟 4 設(shè)置圖表的數(shù)據(jù)來(lái)源

保持折線(xiàn)圖處于選擇狀態(tài)（可再次雙擊折線(xiàn)圖，右側(cè)出現(xiàn)屬性修改頁(yè)），現(xiàn)在切換到“數(shù)據(jù)”屬性 Tab頁(yè)。選擇“數(shù)據(jù)綁定方式”為“數(shù)據(jù)源”，此時(shí)“數(shù)據(jù)源選擇”下拉列表為“請(qǐng)選擇”狀態(tài)，點(diǎn)擊“管理數(shù)據(jù)源”按鈕，彈出“數(shù)據(jù)源管理”頁(yè)面。

image.png

[圖片上傳中...(屏幕截圖 2022-04-15 114906.png-675493-1650179797124-0)]

步驟 5 設(shè)置不使用數(shù)據(jù)過(guò)濾器

點(diǎn)擊 “使用數(shù)據(jù)過(guò)濾器”前面的勾選框，去掉勾選，即不使用數(shù)據(jù)過(guò)濾器。

image.png

步驟6 重復(fù)以上步驟進(jìn)行其他功能配置

屏幕截圖 2022-04-15 114336.png

屏幕截圖 2022-04-15 114906.png

三、實(shí)驗(yàn)成果展示

屏幕截圖 2022-04-15 115555.png

實(shí)驗(yàn)后，可以實(shí)現(xiàn)基礎(chǔ)的OneNETStudio 可視化輸出，可以將數(shù)據(jù)通過(guò)onenet平臺(tái)可視化數(shù)據(jù)，可以更加直觀的獲取數(shù)據(jù)。