BuildRun低代碼開發教程八節 | 圖表和儀表盤展示

課程說明

▍ 1.1 課程實現功能

本課程爲物聯網應用平臺設計一個儀表盤首頁，包括以下內容：

1. 卡片展示設備總數；
2. 卡片展示網關總數；
3. 卡片展示產品總數；
4. 卡片展示產品分組總數；
5. 圖表展示各運營商的產品統計數量；
6. 圖表展示各雲端協議的統計數量。

▍ 1.2 課程知識點

本課程涉及到的主要知識點包括：

• 非存儲數據庫對象的應用；
• JavaAction中對非存儲數據庫對象賦值；
• 圖表定義開發 （柱狀圖和餅圖，更多圖表類型讀者自行查看文檔）；
• 自定義渲染器實現個性化組件。

▍ 1.3 卡片顯示實現思路

1. 創建包括4個屬性的非存儲數據庫業務對象；
2. 編寫JavaAction來彙總業務對象的相關數量；
3. 在數據源定義中調用JavaAction生成的邏輯流，自動執行查詢獲得彙總數量；
4. 編寫組件渲染器，將邏輯流返回的彙總數量信息顯示爲卡片的樣式。

課程內容

01 創建業務對象

進入應用設計器定義業務對象：

• 名稱：數量統計
• 編碼：QTY_STATS
• 存儲數據庫：否

定義整數組件信息：

02 編寫JavaAction獲取統計數量

儀表盤中設備、網關、產品和產品組的數量需要實時統計出來，通過在邏輯流中的JavaAction統計得出各數量。

1. 定義JavaAction信息如下：

• 名稱：彙總設備網關產品設備組數量
• 編碼：AllProductsCount
• 返回值類型：List
• 業務對象：數量統計
• 暴露爲邏輯流：是
• 邏輯流類型：DataSet
• DataSet業務對象類型：數量統計

2. JavaAction彙總設備網關產品設備組數量的參數如下：

• 參數名稱：dataSetConfig
• 類型：DataSetConfig
• 業務對象：數量統計

保存之後可以看到生成了邏輯流彙總設備網關產品設備組數量。

代碼庫中打開io/buildrun/engine/briotsrv/action/AllProductsCount.java（可以使用在線的Web IDE，也可以克隆到本地使用其他IDE工具完成），修改executeAction()方法爲：

// BEGIN USER CODEArrayList<QtyStats> qtyArrayList = new ArrayList<QtyStats>();
JavaActionHelper javaActionHelper = context.getCore().getRuntimeManager().getPersistenceManager().getJavaActionHelper();
Long groupQty = (long)javaActionHelper.selectCountByExample(context,new DeviceGroups());
Long productQty = (long)javaActionHelper.selectCountByExample(context,new Products());
Products deviceProduct = new Products();deviceProduct.setProductType("DEVICE");Long deviceQty = (long)javaActionHelper.selectCountByExample(context,deviceProduct);
Products gatewayProduct = new Products();gatewayProduct.setProductType("GATEWAY");Long gatewayQty = (long)javaActionHelper.selectCountByExample(context,gatewayProduct);
QtyStats currentQtyStats = new QtyStats();currentQtyStats.setDeviceQty(deviceQty);currentQtyStats.setGroupQty(groupQty);currentQtyStats.setProductQty(productQty);currentQtyStats.setGatewayQty(gatewayQty);
qtyArrayList.add(currentQtyStats);
return qtyArrayList;// END USER CODE

03 編寫渲染器

首頁中儀表盤顯示，我們希望將各數量的統計顯示爲卡片風格，通過編寫一個渲染器來實現卡片式顯示。選擇應用設計器左側的渲染器圖標進入界面列表窗口：

1. 選擇右上角的創建鏈接進入創建渲染器窗口，錄入如下信息：

• 名稱：卡片風格顯示統計數據組件
• 編碼：CARD_VIEW_COMPONENT
• 類型：通用組件渲染器

2. 生成代碼後，代碼庫中打開 react/render/CARD_VIEW_COMPONENT/index.js（可以使用在線的Web IDE，也可以克隆到本地使用其他IDE工具完成）修改 observer(props)方法爲：

// BEGIN USER CODE AREAconst qtyStatsDataset = useDataSet('QTY_STATS');const { name: cardName, code } = designProps.toData();const iconMap = {    device_qty: 'memory',    gateway_qty: 'router',    product_qty: 'widgets',    group_qty: 'view_week',};
return(    <div className="el-card__body">        <div className="count-card el-row">            <div className="el-col">                <Icon className ="iconfont icon-devices-dashboard" type={iconMap[code] || 'important_devices'} />            </div>            <div className="count-desc el-col">                <li>{cardName}</li>                <li className="count-text">                    <span id="device-count-text2">{qtyStatsDataset.current?.get(code?.toUpperCase())??0}</span>                </li>            </div>        </div>    </div>);// END USER CODE AREA 請把你的邏輯代碼寫在這個註釋之間

3. 新增react/render/CARD_VIEW_COMPONENT/index.less，添加如下的樣式代碼：

.el-card__body {    width: 100%;    height: 100%;    padding: 20px 28px;
    .el-row {        display: flex;        height: 100%;
        .el-col {            flex: 1;        }    }
    .count-card {        text-align: center;
        .iconfont {            display: inline-block;            float: left;            width: 60px;            height: 60px;            line-height: 60px;            font-size: 28px;            font-weight: 600;            color: #34c388;            background-color: #f6f7fb;            border-radius: 50%;        }
        .count-desc {            text-align: right;            color: #b6bac5;            font-size: 16px;
            li {                line-height: 30px;                list-style-type: none;            }
            .count-text {                font-size: 24px;                color: #646775;            }        }    }}

4 創建頁面

▍ 4.1 定義頁面

進入應用設計器定義頁面：

• 名稱：首頁
• 編碼：homePage
• 標題：物聯網平臺首頁

▍ 4.2 定義數據源

定義如下數據源：

設置數據源數量統計的處理邏輯：

• 自動查詢：是
• 邏輯流：彙總設備網關產品設備組數量

▍ 4.3 定義卡片表格

在section下添加2行，設置行的“列間隔=20”，盒模型的上margin=20。 第一行中添加4列，列的屬性設置欄格數=6 , 高度=100, 邊框樣式=陰影，拖動4個自定義組件分別到第一行的4列中：

▍ 4.4 定義圖表

在section下的第二行中添加兩列。

1. 拖動圖表組件到第一列中，選擇數據源設備

• 組件名稱：圖表1
• 標題：產品數量
• 副標題：分運營商顯示
• 圖標樣式：柱狀圖
• 分類：運營商
• 左值軸：產品

2. 拖動圖表組件到第二列中，選擇數據源產品組件

• 名稱：圖表2
• 標題：雲端協議
• 副標題：分類統計
• 圖標樣式：餅圖
• 分類：雲端協議
• 指標：設備數量

05 發佈和運行應用

發佈應用後顯示如下效果：

 

 

--To be continued--

這一節介紹了非存儲數據庫對象的應用和圖表定義開發，下一節將介紹格式化報表的定義開發。本系列開發教程持續更新，歡迎關注。

 

前四節課程回顧▼

BuildRun低代碼開發教程第一節 | 項目環境準備

BuildRun低代碼開發教程第二節 | 功能需求梳理和任務定義

BuildRun低代碼開發教程第三節 | 數據模型設計和定義

BuildRun低代碼開發教程第四節 | 產品和設備組管理開發

遇到問題怎麼辦？

在Buildrun使用過程中，任何關於平臺的問題和建議，都可以點擊頁面右下角用戶反饋按鈕，實時向開發團隊提交反饋，我們會在第一時間處理。

關於BuildRun

BuildRun 帶來了多雲架構環境下基於視覺的企業級應用創建、集成、部署、生命週期管理和分發的能力，由開源Choerodon豬齒魚核心團隊創立的BuildRun公司（上海翹騰科技有限公司）的使命是以雲原生的現代化軟件架構來幫助企業提升軟件開發生產力和業務敏捷性，它提供企業級DevOps平臺和企業級低代碼開發平臺，幫助隱藏應用所依賴的基礎環境的複雜性，讓每個人都只需要專注在業務邏輯上，以新的方式讓團隊能夠快速、持續地將他們的想法轉化爲真正的商業價值。

 

歡迎免費註冊，體驗試用低代碼應用開發

• 註冊地址： apps.gobuildrun.com/#/base/regi…
• 官網： http://gobuildrun.com
• 微信：BuildRun低代碼開發平臺