天天看點

輕松可視化實作裝置監控大屏效果

前言

前期團隊一直在搭建與雲端伺服器對接的事情,近期終于落地,資料采集中心實作了服務端與可視化編輯器的融合,整個案例中腳本就兩百行左右,基本通過可視化平台配置完成,展現了,我們平台的高效性。今天通過本案例講解下服務端接口搭建、服務端與可視化編輯器是如何配合使用的

看闆效果圖

輕松可視化實作裝置監控大屏效果

可視化端實作的互動效果分别有三點:1、報警滾動展示,2、表格翻頁顯示,3、裝置故障三角形動畫

裝置資料上報阿裡雲

輕松可視化實作裝置監控大屏效果

如基于海創邊緣計算網關如上圖設定好,裝置參數就會以隊列的形式上報阿裡雲平台

服務端接口搭建

前期準備,服務端上傳裝置到阿裡雲端,完成後,我們打開上圖阿裡雲平台具體要對接的産品資料,按下列驟訂閱消息

輕松可視化實作裝置監控大屏效果
輕松可視化實作裝置監控大屏效果

按以上設定儲存後消息訂閱完成

資料上報後,如何把資料從阿裡雲拉取下來呢,請看下圖

輕松可視化實作裝置監控大屏效果
輕松可視化實作裝置監控大屏效果

通過上圖對接好阿裡雲上的資訊後,資料就接入到我們的平台,在函數體内根據自己實際業務需求做相應處理後,就可以輸出到可視化平台了,以上資料接口已全部搭建完成

注:圖中的name即我們要綁定的字段名,value為綁定位置接收到的資料

資料集準備

輕松可視化實作裝置監控大屏效果

建立資料集,對接好相應字段,确定後重新打開,點選資料測試,就可以看到接口過來的資料

輕松可視化實作裝置監控大屏效果

可視化端操作步驟

以下介紹兩種處理方式

方式一,直接字段綁定

輕松可視化實作裝置監控大屏效果

如上圖步驟,直接綁定即可

方式二,函數處理後輸出,按需處理

輕松可視化實作裝置監控大屏效果

根據上圖步驟,接口資料在參數data中,在函數體内,可以根據自己需求處理完後push到容器中

注:對接資料不會自動累加,如果資料逐條過來,但是所有資料都要展示,就需要自己存在容器中,按需取容器資料

繼續閱讀