一步一步教你使用AppCube應用魔方創建業務大屏應用

一、創建項目

1、打開AppCube官網

https://www.huaweicloud.com/product/appcube.html

2、點擊“立即使用”按鈕進入AppCube控制臺

3、點擊“進入開發環境”按鈕進入開發環境如下

4、選擇“項目”標簽下的“業務大屏”進入項目列表頁面

5、點擊“新建項目”按鈕

6、輸入“標簽”和“名稱”，點擊“新建”按鈕

7、項目創建成功后，自動進入項目開發環境，至此項目創建完成

二、開發看板頁面

1、創建頁面

（1）點擊左側目錄的加號，選擇新建頁面

（2）新建頁面可以選擇內置的業務大屏模板，也可以選擇空白頁，博主這里選擇空白頁

（3）輸入頁面標題，點擊“創建”按鈕

（4）創建完成后會直接打開新建的頁面，后續在該頁面進行編輯開發

2、頁面素材圖片準備

筆者用的所有素材圖片如下，部分來自作業截圖的摳圖，部分圖標來自于iconfont網站。

（1）標題背景圖

（2）產量表格背景圖

（3）時間圖標

（4）化工圖標

（5）熱電圖標

（6）水泥圖標

3、業務大屏看板開發

以上準備工作已經完成，接下來可以逐步開始對業務大屏內容進行開發。

3.1、修改頁面背景圖

頁面編輯窗口右側背景圖片處，點擊查看全部即可顯示所有內置的大屏背景圖片，選擇一個適合自己的即可

筆者這里選擇如下圖所示：

3.2、添加看板標題

（1）點開編輯界面的組件列表選項卡，選擇圖片組件和文本編輯組件拖動到頁面上

（2）選中圖片，鼠標右鍵，選擇高級設置，設置圖片背景及位置相關屬性值

（3）彈出窗口點擊選擇圖片按鈕上傳背景圖片

（4）上傳對應背景圖片后選中，并點擊確定按鈕，返回后繼續確定回到編輯界面，圖片修改完成

（5）選中圖片組件，在右側屬性窗口設置其屬性值，主要設置寬高、位置，對應屬性值如圖

（6）修改文字編輯組件對應屬性

文本格式設置如圖：

3.3、界面左側開發

（1）界面添加時間展示組件

（2）設置時間展示組件的位置屬性

（3）選中時間展示組件，鼠標右鍵，選擇高級設置，設置時間展示組件的組件屬性

設置標題不顯示，設置年月日、時間、星期字體大小為28，字體顏色為白色，設置背景顏色和時間條顏色為透明色，配置如圖：

這里只截取年月日的屬性配置圖，時間和星期的同年月日配置一致，背景顏色和時間條顏色直接將透明度設置為0即可。

（4）添加一個圖片組件，用于顯示時間圖標（上傳及修改圖片的參考2.1即可，這里不再贅述），圖標大小及位置屬性如下

（5）整體時間部分效果如圖

（1）、添加表格背景圖，屬性配置如圖

（2）添加產量表格，拖拽通用表格組件到界面

（3）設置表格位置及大小屬性

（4）設置表格數據屬性（右側選擇數據選項卡，橋接器實例選擇表格橋接器，數據類型選擇靜態數據）

數據內容如下：

{ "resCode": "0", "resMsg": "成功", "result": [ { "order": { "dataValue": [ { "output": "PVC", "outputDay": 20, "outputMonth": 632, "finishRate": 88 }, { "output": "燒堿", "outputDay": 18, "outputMonth": 588, "finishRate": 91 }, { "output": "鹽酸", "outputDay": 19, "outputMonth": 603, "finishRate": 89 }, { "output": "水泥", "outputDay": 31, "outputMonth": 698, "finishRate": 94 } ], "total": 4 } } ] }

（5）設置表格內容屬性（選中表格組件鼠標郵件高級設置），配置如圖（未截圖的采用默認即可）

表格行數改為4：

表頭行高占比改為15%，背景色改為rgba(6, 53, 134, 0.5)：

行配置奇偶行背景色均改為透明：

序列號改為不顯示：

數據映射的列與數據內容定義的屬性值做對應：

每一個屬性列進行如下相同配置：列名分別改為產量、日產量、月產量和月計劃完成率，字號改為18，字體顏色改為rgba(0, 106, 255, 1)：

（1）添加分割線組件，并設置位置及大小

（2）組件高級設置，設置分割線樣式（選擇模板5，并設置顏色為rgba(0, 106, 255, 1)）

后續分割線均采用以上這個分割線，知識位置和大小略有不同。

（1）拖拽水位圖到界面

（2）配置水位圖大小及位置屬性

（3）配置水位圖數據屬性

數據內容如下：

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "PV合格率", "value": [ { "value": 0.96, "name": "" } ] } ] } ] }

（4）水位圖顯示屬性高級設置（未截圖采用默認設置）

選擇藍色帶標題模板：

數據系列-圖表形狀直徑改為90%：

水波顏色改為rgba(2, 174, 83, 1)，水波背景色改為透明，波紋振幅改為10，顯示雙波紋改為關閉：

標簽位置上偏移改為36%：

標簽文字字體大小改為24，字體系列改為Din-Light：

輪廓樣式如下：起始顏色rgba(2, 171, 95, 1)，結束顏色rgba(3, 164, 136, 1)

顯示圖表標題為各系列名稱：

（5）其他三個水位圖通過復制第一個水位圖得到，分別配置其數據及第三個的顏色即可

（6）燒堿合格率水位圖配置

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "燒堿合格率", "value": [ { "value": 0.83, "name": "" } ] } ] } ] }

位置及大小：

（7）鹽酸合格率水位圖配置

水波顏色rgba(178, 22, 75, 1)：

輪廓樣式漸變色：起始顏色rgba(178, 32, 95, 1)，結束顏色rgba(178, 22, 75, 1)

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "鹽酸合格率", "value": [ { "value": 0.56, "name": "" } ] } ] } ] }

位置及大小：

（8）水泥合格率水位圖配置

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "水泥合格率", "value": [ { "value": 0.94, "name": "" } ] } ] } ] }

位置及大小：

復制3.3.3分割線，調整位置即可

（1）拖拽基本柱狀圖到界面

（2）修改數據屬性

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "order": { "dataX": [ "電石", "原煤", "原鹽" ], "dataValue": [ { "title": "30天內", "value": [ 60, 70, 70 ] }, { "title": "30天外", "value": [ 55, 43, 85 ] } ] } } ] }

（3）修改柱形圖顯示高級屬性

修改系列一顏色為rgba(84, 83, 252, 1)：

添加系列2并修改系列2柱狀圖顏色為rgba(0, 169, 240, 1)：

刪除x軸坐標軸名稱：

設置x軸柱間距為15：

刪除y軸坐標軸名稱：

設置標題不顯示：

設置圖例屬性：

（4）設置柱狀圖位置及大小

（5）由于柱狀圖自帶的標題與圖例不在一行上，所以這里使用一個文本作為柱狀圖標題（字體大小為14px，顏色為白色）

大小及位置如下：

添加方式同3.8一致，僅位置信息及數據內容不一樣：

（1）配置標題位置及文字內容

（2）配置柱狀圖位置及數據內容

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "order": { "dataX": [ "PVC", "燒堿", "鹽酸", "水泥" ], "dataValue": [ { "title": "30天內", "value": [ 78, 62, 62, 62 ] }, { "title": "30天外", "value": [ 53, 50, 88, 88 ] } ] } } ] }

位置及大小：

3.4、界面中間開發

（1）拖拽地圖控件到界面

（2）修改地圖數據中的地圖配置，選用靜態數據

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "mapType": "BAIDU_MAP", "viewMode": "2D", "longitude": 102, "latitude": 35, "zoomLevel": 5, "mapStyle": "blue" } ] }

（3）修改地圖大小及位置

（1）復制左側的產量表格

（2）修改表格綁定的數據如下

{ "resCode": "0", "resMsg": "成功", "result": [ { "order": { "dataValue": [ { "output": "PVC", "dayOrder": 16, "monthOrder": 350, "daySale": 13, "monthSale": 280, "daySend": 10, "monthSend": 250 }, { "output": "燒堿", "dayOrder": 15, "monthOrder": 280, "daySale": 11, "monthSale": 260, "daySend": 9, "monthSend": 200 }, { "output": "鹽酸", "dayOrder": 19, "monthOrder": 310, "daySale": 17, "monthSale": 250, "daySend": 13, "monthSend": 220 }, { "output": "水泥", "dayOrder": 22, "monthOrder": 379, "daySale": 16, "monthSale": 320, "daySend": 19, "monthSend": 310 } ], "total": 4 } } ]}

（3）修改表格高級設置內容的數據映射部分，參照3.3.2修改列綁定及標題內容

修改表頭行高占比14%，字體為16：

修改字號為16，列寬占比（第一列：14.2%，中間列14.3%，最后一列14.5%）：

（4）修改位置及大小

（1）拖動儀表盤組件到界面

（2）修改儀表盤數據屬性

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "PVC完成率", "data": [ { "value": 96 }, { "value": 96 } ] } ] } ] }

（2）修改儀表盤顯示高級設置

設置標題不顯示：

單位設置為空，區間范圍0到100，分段個數為10個：

儀表盤軸線寬度改為2，陰影顏色透明，陰影大小改為0，三個顏色位置分別為0.2、0.8、1：

詳情(用來顯示數據)配置字體顏色rgba(28, 204, 215, 1)，陰影、邊框及背景色均設置為透明：

刻度標簽陰影設置為透明：

刻度樣式陰影設置為透明：

分割線陰影設置為透明：

（3）設置儀表盤大小及位置

（4）設置儀表盤下方標題（使用文本組件設置）

文字大小16px，位置及大小如圖：

（5）其他三個儀表盤配置方式同上，只是數據內容及位置不同

（6）燒炭完成率儀表盤

標題位置：

距離左側：806像素距離上側：1020像素

儀表盤位置：

距離左側：764像素距離上側：840像素

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "P燒炭完成率", "data": [ { "value": 82 }, { "value": 82 } ] } ] } ] }

（7）鹽酸完成率儀表盤

標題位置：

距離左側：997像素 距離上側：1020像素

儀表盤位置：

距離左側：956像素 距離上側：840像素

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "鹽酸完成率", "data": [ { "value": 79 }, { "value": 79 } ] } ] } ] }

（8）水泥完成率儀表盤

標題位置：

距離左側：1187像素 距離上側：1020像素

儀表盤位置：

距離左側：1146像素 距離上側：840像素

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "水泥完成率", "data": [ { "value": 91 }, { "value": 91 } ] } ] } ] }

（9）至此完成效果如圖

3.5、界面右側開發

（1）拖拽翻牌器組件到界面

（2）設置翻牌器數據

{ "value": { "number": 456.888 }}

（3）設置翻牌器樣式

設置數字大小為30，數字背景色為rgba(0, 39, 122, 1)，數字間隔為3，

不顯示千分號，顯示標題，標題內容為“應收金額”，標題顏色rgba(0, 106, 255, 1)，標題大小為28：

（4）設置位置及大小

（5）設置應用額（直接復制應收金額組件，修改標題內容和位置即可）

復制3.3.3分割線，調整位置即可

（1）拖動底紋組件到界面

（2）調整底紋組件大小及位置

（3）拖動矩形裝飾組件到界面

（4）調整矩形裝飾組件高級設置

修改漸變背景色：漸變方向改為向右，顏色1改為rgba(0, 137, 164, 0.5)，顏色2改為rgba(2, 22, 55, 0.6)

邊框設置關閉圓角：

（5）調整矩形裝飾組件位置及大小

（6）將上述矩形裝飾組件復制兩個，分別調整位置如下

（7）拖動文組件到界面，修改內容、樣式及大小位置（文字大小為24px，字體顏色為白色）

（8）將上述文字復制兩個，分別調整內容及位置如下

（9）拖動圖片組件到界面，并設置圖片及大小和位置

（10）將上述圖片復制兩個，分別設置圖片、大小及位置如下

（11）添加分割線四

設置分割線使用模板七，設置位置及大小如下

（12）添加應收額行數據

標題字體大小20px，字體顏色白色，組件大小及位置：

數值字體大小20px，字體顏色#018BD6，組件大小及位置：

復制上述數字文本組件，設置其位置如下：

（13）添加應用額行數據

配置方式同12，除數字部分顏色不同及位置不同外，其他樣式與上述組件一致。

標題位置：

數字顏色#00A550，數字位置配置如下：

（1）添加漸變色餅圖到界面

（2）修改餅圖數據屬性

數據內容如下：

{ "resCode": "0", "resMsg": "成功", "result": [ { "dataValue": [ { "name": "金額", "value": [ { "value": 64.29, "name": "30天內" }, { "value": 35.71, "name": "30天外" } ] } ] } ] }

（3）修改餅圖顯示的高級設置

組件標題設置不顯示：

數據系列半徑修改如下：

數據系列圓心坐標修改如下：

扇區展現修改如下：

圖形樣式修改如下：

數據項展現-數據項1配置如下（起始顏色rgba(27, 147, 255, 1)，結束顏色rgba(90, 211, 250, 1)）：

數據項展現-數據項2配置如下（起始顏色rgba(41, 70, 92, 1)，結束顏色rgba(41, 70, 92, 1)）：

圖例設置不顯示：

設置圖例大小及位置：

（4）將上述設置的餅圖復制兩份，修改其位置屬性，改后如圖

（5）修改中間餅圖的高級設置中的圖列屬性

（6）完成效果如圖

復制3.3.3分割線，調整位置即可

（1）拖拽區域圖組件到界面

（2）修改區域圖數據屬性

數據內容：

{ "resCode": "0", "resMsg": "成功", "result": [ { "order": { "dataX": [ "9/01", "9/02", "9/03", "9/04", "9/05", "9/06", "9/07", "9/08", "9/09", "9/10" ], "dataValue": [ { "title": "原鹽單價", "value": [ 9, 5, 6, 3, 15, 24, 15, 24, 22, 20 ] } ] } } ] }

（3）修改區域圖高級設置

漸變色顏色1：rgba(63, 117, 255, 1)，漸變色顏色2：rgba(5, 203, 246, 1)

拐點顏色：漸變色1rgba(30, 87, 244, 1)，漸變色2rgba(12, 241, 249, 1)，區域漸變色1rgba(63, 117, 225, 0.6)，區域漸變色2rgba(91, 226, 255, 0.2)：

設置x軸標題不顯示：

x軸軸線配置如下（顏色rgba(1, 140, 200, 0.3)，文本顏色rgba(255, 255, 255, 1)）：

網格線設置不顯示：

關閉刻度標簽間隔：

設置y軸標題不顯示：

y軸坐標軸最小間隔大小修改為0：

y軸軸線設置如下（顏色rgba(1, 140, 200, 0.3)，文本顏色rgba(255, 255, 255, 1)）：

設置圖表標題屬性如下：

設置圖列不顯示：

（4）設置區域圖大小及位置

（5）將原鹽單價區域圖復制兩個，分別修改標題及位置即為煤炭單價區域圖和石灰石單價區域圖，兩個區域圖位置信息如下

煤炭單價區域圖位置：

石灰石單價位置：

4、最終效果

至此能源化工管理看板界面開發完成，整體開發效果如下圖所示：

整體運行效果如下圖所示：

應用魔方 AppCube

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。