應(yīng)用魔方 AppCube 告警監(jiān)控大屏應(yīng)用開發(fā)開發(fā)實踐 丨【玩轉(zhuǎn)應(yīng)用魔方】

當(dāng)用戶需要開發(fā)業(yè)務(wù)大屏頁面，使用可視化大屏進行項目運營管理、業(yè)務(wù)監(jiān)控、風(fēng)險預(yù)警時，則需創(chuàng)建業(yè)務(wù)大屏應(yīng)用來進行大屏頁面的開發(fā)。本章節(jié)以開發(fā)告警監(jiān)控大屏應(yīng)用為例，介紹典型的大屏開發(fā)流程。

告警監(jiān)控大屏應(yīng)用場景：產(chǎn)品經(jīng)理、運營人員需要使用大屏來查看綜合指標(biāo)-全國范圍的告警監(jiān)控。

大屏頁面構(gòu)想如下圖所示。

組件

說明

文本

文本組件，用于展示標(biāo)題，例如告警監(jiān)控大屏、各區(qū)域未處理告警處理情況

基本柱圖

分狀態(tài)進行告警處理情況統(tǒng)計，狀態(tài)分：待派單、已派單、處理中、已關(guān)閉

基本折線圖

統(tǒng)計告警處理平均時長

地圖

分地區(qū)統(tǒng)計告警數(shù)量

基本餅圖

分類型統(tǒng)計告警數(shù)量

基本折線圖

統(tǒng)計告警數(shù)量趨勢

1.配置數(shù)據(jù)來源并制造告警數(shù)據(jù)。

該大屏頁面地圖、基本柱圖、基本折線圖、基本餅圖、數(shù)據(jù)標(biāo)記柱圖組件顯示的數(shù)據(jù)來自于后臺接口，您需要在該開發(fā)頁面配置所有組件用到的橋接器，配置前，需要獲取所有組件調(diào)用后臺的自定義接口URL。

獲取應(yīng)用包“AppExample.zip”，在開發(fā)環(huán)境首頁單擊“管理”，選擇“應(yīng)用管理 > 軟件包管理 > 軟件包安裝”，單擊“新建”，將應(yīng)用包拖入進去安裝。

安裝后，返回到首頁單擊“告警服務(wù)Mock應(yīng)用”，您可進入該應(yīng)用查看到告警對象、腳本、服務(wù)編排和自定義接口的詳細(xì)信息。

進入Appcube ?https://console.huaweicloud.com/appcube/?locale=zh-cn®ion=cn-north-4#/home

點擊進入開發(fā)環(huán)境 在開發(fā)環(huán)境首頁單擊“管理”

選擇“應(yīng)用管理 > 軟件包管理 > 軟件包安裝”

單擊“新建”，將應(yīng)用包拖入進去安裝。

等待安裝完成

安裝后，返回到首頁單擊“告警服務(wù)Mock應(yīng)用”，您可進入該應(yīng)用查看到告警對象、腳本、服務(wù)編排和自定義接口的詳細(xì)信息。

選擇運行版本

運行mock應(yīng)用中“Logic > Data”文件夾下的“hab_bachCreate”腳本，不用輸入入?yún)ⅲ糜谂恐圃旄婢瘮?shù)據(jù)。

在mock應(yīng)用開發(fā)界面，可以看到所有后臺邏輯（腳本、服務(wù)編排）、對象和自定義接口的詳細(xì)信息。在Logic文件夾下可查看到后臺接口（服務(wù)編排、腳本）的定義

在Model文件夾下可查看到模型對象告警對象“hab__INF_WARN__CST”的字段信息

在App視圖下左下角單擊“服務(wù)”，可查看到自定義接口的詳細(xì)信息。其中URL用于配置在頁面組件的橋接器數(shù)據(jù)源中。

頁面組件中橋接器數(shù)據(jù)源配置說明如下所示。

組件

橋接器

自定義接口URL

功能說明

基本柱圖

柱狀圖和折線圖數(shù)據(jù)橋接器

/service/hab__mock/1.0.1/WarnAmountPerStatus

分狀態(tài)進行告警處理情況統(tǒng)計，狀態(tài)分：待派單、已派單、處理中、已關(guān)閉。

基本折線圖

柱狀圖和折線圖數(shù)據(jù)橋接器

/service/hab__mock/1.0.1/WarnCostPerDay

統(tǒng)計告警處理平均時長。

地圖

“覆蓋物數(shù)據(jù)”區(qū)域下的“地圖覆蓋物數(shù)據(jù)橋接器”橋接器

/service/hab__mock/1.0.1/WarnAmountPerRegion

分地區(qū)統(tǒng)計告警數(shù)量接口。

基本餅圖

餅圖數(shù)據(jù)橋接器

/service/hab__mock/1.0.1/WarnAmountPerType

分類型告警數(shù)量統(tǒng)計接口。

基本折線圖

柱狀圖和折線圖數(shù)據(jù)橋接器

/service/hab__mock/1.0.1/WarnAmountPerDay

統(tǒng)計告警數(shù)量趨勢。

2.告警監(jiān)控大屏應(yīng)用開發(fā)。

開發(fā)大屏頁面

進入Appcube ?https://console.huaweicloud.com/appcube/?locale=zh-cn®ion=cn-north-4#/home

在AppCube服務(wù)控制臺，單擊“進入開發(fā)環(huán)境”。

登錄AppCube開發(fā)環(huán)境，在首頁“項目”頁簽下單擊“業(yè)務(wù)大屏”，即可進入“DMAX AI數(shù)據(jù)可視化大屏”界面。

大屏地址https://appcube.cn-north-4.huaweicloud.com/studio/index.html#/DMAX

在“DMAX AI數(shù)據(jù)可視化大屏”界面，單擊“新建項目”。

輸入項目標(biāo)簽和名稱為“Alarm”，單擊“新建”。

單擊左上“目錄”后的“+”，選擇“新建頁面”。

單擊“AI”，選擇“手繪圖”。使用AI識別功能前，您需要提前配置存儲。

拖拽上傳本地待識別的手繪圖，下載”Picture.zip”，解壓后獲取手繪圖

單擊“確認(rèn)選擇”

顯示“AI引擎處理中”，等待片刻。

系統(tǒng)處理完后，可看到自動生成的可視化頁面。

不用校正AI結(jié)果，單擊“確認(rèn)”。

輸入頁面標(biāo)題“告警監(jiān)控大屏”，單擊“新建”。

在彈出的提示框“在鎖定頁面告警監(jiān)控大屏前，所有頁面將會自動更新至最新版本。”，單擊“確認(rèn)”。即可進入頁面開發(fā)界面。

設(shè)置背景圖片。在右側(cè)“頁面設(shè)置”中，勾選“背景圖片”，單擊“查看全部”，根據(jù)個人喜好選擇背景圖片

單擊“返回屏幕屬性”

配置文本組件，設(shè)置“告警監(jiān)控大屏”標(biāo)題。選中左上角文本組件“文本標(biāo)題”，單擊鼠標(biāo)右鍵選擇“高級設(shè)置”，

設(shè)置文本內(nèi)容為“告警監(jiān)控大屏”，選擇設(shè)置的文本內(nèi)容，出現(xiàn)配置彈窗，配置文本顏色為“#F2EFEB”。

配置標(biāo)題對齊方式，并設(shè)置字體大小，單擊“確定”。

配置基本柱圖組件樣式，配置數(shù)據(jù)源。選擇基本柱圖組件，在頁面右側(cè)選擇“數(shù)據(jù)”頁簽，配置橋接器。

參數(shù)

說明

數(shù)據(jù)源類型

該組件在頁面呈現(xiàn)數(shù)據(jù)的來源類型。取值如下：

橋接器預(yù)置：通過橋接器動態(tài)調(diào)用后臺的接口來獲取后臺數(shù)據(jù)展示在頁面上。

報表：將系統(tǒng)中已建立的報表數(shù)據(jù)進行展示。

靜態(tài)數(shù)據(jù)：獲取靜態(tài)自定義數(shù)據(jù)展示在頁面上。

Excel文件：從Excel文件中獲取數(shù)據(jù)。選擇該類型時，您需要先下載模板，填入數(shù)據(jù)后上傳模板。請確保上傳的文件是基于下載的模板修改的或者格式和它相同。單擊刷新按鈕會重置成預(yù)置數(shù)據(jù)。

請選擇“橋接器預(yù)置”。

橋接器實例

調(diào)用的橋接器名稱，從下拉框選擇系統(tǒng)提供的預(yù)置橋接器“柱狀圖和折線圖數(shù)據(jù)橋接器”。

系統(tǒng)預(yù)置的橋接器可在App開發(fā)界面左側(cè)列表單擊，選擇“高級頁面 > 橋接器”，在“全局”頁簽進行查找并下載查看橋接器包中內(nèi)容。橋接器包中文件解壓后，一般包含三個文件：定義整個橋接器邏輯方法的js文件、定義橋接器對象模型的js文件和元數(shù)據(jù)描述json文件。當(dāng)預(yù)置橋接器不滿足需求時，可自定義橋接器，具體開發(fā)方法請參考自定義并上傳橋接器。

橋接器數(shù)據(jù)類型

橋接器的數(shù)據(jù)源類型，支持“靜態(tài)數(shù)據(jù)”和“AppCube API”。

請選擇“AppCube API”。

URL

若“橋接器數(shù)據(jù)類型”為“AppCube API”，該參數(shù)才會顯示。

請配置為自定義接口URL“/service/hab__mock/1.0.1/WarnAmountPerStatus”，檢查與前提條件中安裝mock應(yīng)用后的公共接口URL保持一致。

注意：

在拷貝復(fù)制參數(shù)取值樣例時，請檢查復(fù)制出來的數(shù)據(jù)是否準(zhǔn)確，不能有多余空格。

共享數(shù)據(jù)

是否共享數(shù)據(jù)。若“橋接器數(shù)據(jù)類型”為“AppCube API”，該參數(shù)才會顯示，勾選表示某項目里多個組件調(diào)用一個公共的請求（請求路徑與入?yún)⒕恢虏乓暈橥还舱埱螅┒L問同一個接口的數(shù)據(jù)，避免多次調(diào)接口。

不用勾選。

刷新周期

每隔多少秒調(diào)用一次后臺接口，默認(rèn)配置為“0”，表示只調(diào)用一次。若“數(shù)據(jù)源類型”為“橋接器預(yù)置”，該參數(shù)才會顯示。

配置為“30”。

選擇基本柱圖組件，單擊鼠標(biāo)右鍵選擇“高級設(shè)置”，對柱狀圖進行樣式配置。

依次設(shè)置好其他幾個圖表圖形即可

設(shè)置完成后點擊發(fā)布預(yù)覽就可以看到做好的大屏了

預(yù)覽

免費版不提供運行環(huán)境，請參考購買商用租戶，直接購買專業(yè)版或?qū)Ｏ戆婧螅龠M行打包發(fā)布操作，并在運行環(huán)境安裝該應(yīng)用。

應(yīng)用魔方 AppCube 智慧煙感行業(yè)應(yīng)用開發(fā)實踐完成

低代碼應(yīng)用開發(fā)最佳實踐

由淺入深，輕松玩轉(zhuǎn)低代碼應(yīng)用開發(fā)，積木式搭建應(yīng)用效率提升10+倍，加速業(yè)務(wù)敏捷創(chuàng)新，參與贏好禮！

歡迎報名 https://developer.huaweicloud.com/activity/low-code.html?utm_source=huaweiguanwang&utm_medium=bbs-huaweiyun&utm_campaign=roma&utm_content=202108?ggw_kfz

【玩轉(zhuǎn)應(yīng)用魔方】有獎?wù)魑幕馃徇M行中：https://bbs.huaweicloud.com/blogs/306271

附件： AppExample.zip 92.17KB 下載次數(shù)：0次

附件： Picture.zip 43.71KB 下載次數(shù)：0次

應(yīng)用魔方 AppCube

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。