[發明專利]一種適用于監測服務類應用動態構建頁面的方法

在審

• 申請號: 201611212103.X
• 申請日: 2016-12-25
• 公開（公告）號: CN106873965A
• 公開（公告）日: 2017-06-20
• 發明（設計）人: 方秀川;陳智宏;孟凡強
• 申請（專利權）人: 北京通途永久科技有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44;G06F9/445;G06F17/30
• 代理公司: 北京思海天達知識產權代理有限公司11203
• 代理人: 沈波

技術領域

本發明涉及一種動態構建實時數據展示頁面的方法，在大量的實時監測數據中動態選擇業務相關的數據，按照符合監測大屏布局的方式來快速構建監測頁面。

背景技術

傳統的前端頁面開發是以頁面為獨立的最小單元，一個業務場景設計一個頁面，在這個頁面上根據業務場景設計布局，不同的區域顯示不同的內容，整個頁面的HTML元素和CSS樣式是耦合在一起的。

隨著業務場景的逐漸增多，有兩個問題逐漸顯現出來：

1.當業務場景發生變化時，有時可能是某些區域的內容發生了變化，有時可能是多個區域間的業務關聯發生了變化，這個時候只能對頁面整體代碼進行修改調整。而這樣的修改調整經常維持不了多久又會隨著下一次的業務調整而發生新的變化。

2.當有新的業務場景出現的時候，必須重新設計頁面布局，開發新的頁面HTML和CSS，這個時候需要引入設計人員和開發人員把頁面的開發過程再次實施一遍。

這兩個問題其實總結來說就是頁面的開發不能適應業務場景的變化，而在監測服務類應用中，由于監測數據繁多，監測場景復雜多變，上述兩個問題尤其明顯。

為了解決上述問題，本文提出了一種適用于監測服務類應用的動態構建頁面的方法。這種方法的核心思想是從數據展示的角度出發，構建僅僅為數據服務的組件，然后用配置的方式將監測數據和組件組合起來構建用戶頁面。這樣隨著組件庫的不斷完善，無論業務場景變化或者新增，都不再需要開發人員去修改原始代碼，只需要相關人員去更改配置文件即可。

發明內容

針對現有技術中存在的上述問題，本發明采用的技術方案為一種適用于監測服務類應用動態構建頁面的方法，該方法包括一種構建組件的方法和一種配置頁面的方法，一種構建組件的方法為下述步驟的1-3，一種配置頁面的方法為下述步驟4，一種構建組件的方法和一種配置頁面的方法兩者相配合實現具體的實施過程，

步驟1：設計組件的外觀。

這一步驟通過UI的交互設計完成，根據整個網頁應用的外觀風格來確定不同的組件外觀，組件外觀圖表以及自定義外觀的數據展示組件，圖表的形式為餅圖、折線圖、區域圖或柱狀圖等，數據展示組件中為一個多列的表格，其中表格的某一列顯示一個進度條和指示標桿來顯示當前日期的值和指定的對比日期的值。

步驟2：設計組件的接口。

組件的接口也為組件的配置方式，這里需要明確這個通用的組件需要暴露哪些配置項給用戶，有了這些配置項用戶就在配置文件中隨時修改從而讓對應的組件適用于對應的業務場景。

組件的接口設計要考慮到組件所適用的數據類型、業務場景、表現形式。組件會展示一組數據的對比，那接口中一定會有一個這組數據的特征值項；組件在不同的場景下表現的對比形式不一樣，對比形式是一組柱圖對比或是一個餅圖對比總體百分比權重，那接口中會有一個表現外觀的配置項。

步驟3：組件的實現設計。

組件的實現過程其實就是完成從設計組件的接口到最終設計組件的應用的過渡，每個組件的開發都包含邏輯代碼JS，展示代碼HTML+CSS。設計組件的接口中設計的配置項都會作為組件JS的初始化參數，組件的模板采用含表達式的動態編譯模板引擎，步驟2中設計的接口配置項中外觀表現相關的參數首先會使得模板編譯為配置項要求的HTML片段。然后步驟2設計的數據特征值會使得組件從后臺獲取到相關的數據，然后用這些數據渲染到組件中，進而形成與設計匹配的組件表現。

步驟4：配置組件

在組件的實現設計的基礎之上，有以上組件后頁面的開發過程就轉變為編寫配置文件的過程，配置文件的格式很靈活，配置文件的格式是xml、j son或者其他解析格式的文件。在配置文件里需要以下兩方面的內容，第一方面是頁面布局和組件選擇，當前這個頁面需要顯示為上下兩行時，上面一行按50％-50％分為兩列，下面一行按40％-20％-40％的比例分成三列，這一共5個顯示單元每個單元顯示哪個特定的組件都寫在配置文件中。第二方面就是配置單個組件的接口參數，即第一個單元格的組件需要一個id一個日期，一個顯示主題，單個組件的接口參數都需要寫到配置文件中。

與現有技術相比，本發明具有以下明顯的優勢：

1.適應復雜多變的業務場景。配置文件中的排版和組件選擇都是很靈活，隨時可以改動的，業務場景變化后只需要修改配置文件即可。

2.形成了一整套完善的頁面配置流程和方法，使得不同的工程人員專注于各自負責的領域?？蚣荛_發人員只需要專注于組件的完善，頁面配置人員只專注于對業務的理解和組件的配置使用。

附圖說明