ThingsBoard入門實戰(六):設備列表和帶狀態跳轉


設備列表和帶狀態跳轉

上節有提到,這節就是儀表盤甚至整個專題的精髓,信息量很大,請反復閱讀體會。。理解透了,甚至可以用儀表盤開發基於設備的應用系統

一、多個設備

為了實現設備的跳轉,我們至少需要兩個設備。
按照之前添加設備的方式添加 第二個設備路燈2

二、列表部件

路燈列表

添加路燈列表
在這里插入圖片描述

在這里插入圖片描述

進入編輯模式,選擇Entity admin widgets實體管理部件庫
在這里插入圖片描述

選擇Device admin table設備管理部件:
在這里插入圖片描述
在這里插入圖片描述

可見需要一個別名

別名

添加別名,注意篩選器類型要是設備類型
在這里插入圖片描述

設備類型選路燈
在這里插入圖片描述

選好要導入的遙測值:
在這里插入圖片描述

點擊添加,大功告成:
在這里插入圖片描述

仔細看看,增刪改一應俱全,簡直比低代碼還低代碼!
在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

看起來不錯,不過我覺得跳轉我們自己的詳情頁會更美麗。

列表Action到詳情

進入部件編輯模式,選擇Action這個Tab,可以發現剛我們看到的增刪改三大操作都是在這定義的,

在這里插入圖片描述

我們在這里定義一個新的按鈕,它可以有四個位置,
在這里插入圖片描述

對應到列表頁面:
在這里插入圖片描述

我們需要跳轉詳情,自然是在單元格之內比較直觀

設置一下
在這里插入圖片描述

注意這兩層都需要保存
在這里插入圖片描述

在這里插入圖片描述

點擊查看詳情
在這里插入圖片描述

看起來不錯的樣子,
在這里插入圖片描述

可是,數據對么?
記得我們詳情里選的別名是 路燈1,
現在有兩個路燈了,路燈2也得有姓名,
我們得讓別名隨着設備走。

三、設備詳情升級

設備詳情的別名修改

進入 路燈詳情 儀表板的 編輯模式,
在這里插入圖片描述

點擊別名圖標
在這里插入圖片描述

現在別名叫路燈1已經不合適了,我們叫它單路燈,
最重要的是,要把篩選器改成儀表板實體狀態,這樣他就能獲取跳轉之前這個實體的狀態了。
在這里插入圖片描述

切記,每次修改一定要記得保存!
現在用路燈2驗證一下:
在這里插入圖片描述

在這里插入圖片描述

跳轉成功!

再來點小優化,我們怎么跳回列表呢?用Action!

跳回列表

進入 路燈詳情 儀表板的 編輯模式,
在這里插入圖片描述

點擊地圖面板的編輯圖標:
在這里插入圖片描述

給地圖新增一個Action:
在這里插入圖片描述

保存,然后發現 路燈詳情 儀表板 右上角 多了個跳轉的圖標:
在這里插入圖片描述

點擊直接跳到列表,完美!
在這里插入圖片描述

四、下一步

通過這節的練習,我們幾乎只用配置就實現了一個基於路燈的管理模塊,下一節我們把它修改完善一下,然后發布出去。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM