一種適用于監測服務類應用動態構建頁面的方法技術

一種適用于監測服務類應用動態構建頁面的方法，該方法包括一種構建組件的方法和一種配置頁面的方法，兩者相配合實現具體的實施過程，設計組件的外觀。通過UI的交互設計完成。設計組件的接口，組件的接口也為組件的配置方式。組件的實現設計，組件的實現過程其實就是完成從設計組件的接口到最終設計組件的應用的過渡，每個組件的開發都包含邏輯代碼JS，展示代碼HTML+CSS。然后設計的數據特征值會使得組件從后臺獲取到相關的數據，然后用這些數據渲染到組件中，進而形成與設計匹配的組件表現；最終進行配置組件；本方法形成了一整套完善的頁面配置流程和方法，使得不同的工程人員專注于各自負責的領域。

Method for dynamically constructing page for monitoring service class application

Page construction method suitable for monitoring service application of dynamic, this method including a method of building component and a configuration page, two phase with the realization of the specific implementation process, the appearance of the component design. Through the interactive design of UI. The interface of the design component, and the interface of the component is also the configuration mode of the component. Component implementation design, the component implementation process is actually complete from the design component interface to the final design component of the application of transition, each component development contains logical code JS, display code HTML+CSS. The characteristics of data and then design value will make the components obtained from the background to the related data, and then use these data to the rendering component, and the formation of design, performance and components; final configuration components; the method form the page configuration process and method of a set of perfect, so that different engineers focus on the respective the field.

【技術實現步驟摘要】
一種適用于監測服務類應用動態構建頁面的方法
本專利技術涉及一種動態構建實時數據展示頁面的方法，在大量的實時監測數據中動態選擇業務相關的數據，按照符合監測大屏布局的方式來快速構建監測頁面。
技術介紹
傳統的前端頁面開發是以頁面為獨立的最小單元，一個業務場景設計一個頁面，在這個頁面上根據業務場景設計布局，不同的區域顯示不同的內容，整個頁面的HTML元素和CSS樣式是耦合在一起的。隨著業務場景的逐漸增多，有兩個問題逐漸顯現出來：1.當業務場景發生變化時，有時可能是某些區域的內容發生了變化，有時可能是多個區域間的業務關聯發生了變化，這個時候只能對頁面整體代碼進行修改調整。而這樣的修改調整經常維持不了多久又會隨著下一次的業務調整而發生新的變化。2.當有新的業務場景出現的時候，必須重新設計頁面布局，開發新的頁面HTML和CSS，這個時候需要引入設計人員和開發人員把頁面的開發過程再次實施一遍。這兩個問題其實總結來說就是頁面的開發不能適應業務場景的變化，而在監測服務類應用中，由于監測數據繁多，監測場景復雜多變，上述兩個問題尤其明顯。為了解決上述問題，本文提出了一種適用于監測服務類應用的動態構建頁面的方法。這種方法的核心思想是從數據展示的角度出發，構建僅僅為數據服務的組件，然后用配置的方式將監測數據和組件組合起來構建用戶頁面。這樣隨著組件庫的不斷完善，無論業務場景變化或者新增，都不再需要開發人員去修改原始代碼，只需要相關人員去更改配置文件即可。
技術實現思路
針對現有技術中存在的上述問題，本專利技術采用的技術方案為一種適用于監測服務類應用動態構建頁面的方法，該方法包括一種構建組件的方法和一種配置頁面的方法，一種構建組件的方法為下述步驟的1-3，一種配置頁面的方法為下述步驟4，一種構建組件的方法和一種配置頁面的方法兩者相配合實現具體的實施過程，步驟1：設計組件的外觀。這一步驟通過UI的交互設計完成，根據整個網頁應用的外觀風格來確定不同的組件外觀，組件外觀圖表以及自定義外觀的數據展示組件，圖表的形式為餅圖、折線圖、區域圖或柱狀圖等，數據展示組件中為一個多列的表格，其中表格的某一列顯示一個進度條和指示標桿來顯示當前日期的值和指定的對比日期的值。步驟2：設計組件的接口。組件的接口也為組件的配置方式，這里需要明確這個通用的組件需要暴露哪些配置項給用戶，有了這些配置項用戶就在配置文件中隨時修改從而讓對應的組件適用于對應的業務場景。組件的接口設計要考慮到組件所適用的數據類型、業務場景、表現形式。組件會展示一組數據的對比，那接口中一定會有一個這組數據的特征值項；組件在不同的場景下表現的對比形式不一樣，對比形式是一組柱圖對比或是一個餅圖對比總體百分比權重，那接口中會有一個表現外觀的配置項。步驟3：組件的實現設計。組件的實現過程其實就是完成從設計組件的接口到最終設計組件的應用的過渡，每個組件的開發都包含邏輯代碼JS，展示代碼HTML+CSS。設計組件的接口中設計的配置項都會作為組件JS的初始化參數，組件的模板采用含表達式的動態編譯模板引擎，步驟2中設計的接口配置項中外觀表現相關的參數首先會使得模板編譯為配置項要求的HTML片段。然后步驟2設計的數據特征值會使得組件從后臺獲取到相關的數據，然后用這些數據渲染到組件中，進而形成與設計匹配的組件表現。步驟4：配置組件在組件的實現設計的基礎之上，有以上組件后頁面的開發過程就轉變為編寫配置文件的過程，配置文件的格式很靈活，配置文件的格式是xml、json或者其他解析格式的文件。在配置文件里需要以下兩方面的內容，第一方面是頁面布局和組件選擇，當前這個頁面需要顯示為上下兩行時，上面一行按50％-50％分為兩列，下面一行按40％-20％-40％的比例分成三列，這一共5個顯示單元每個單元顯示哪個特定的組件都寫在配置文件中。第二方面就是配置單個組件的接口參數，即第一個單元格的組件需要一個id一個日期，一個顯示主題，單個組件的接口參數都需要寫到配置文件中。與現有技術相比，本專利技術具有以下明顯的優勢：1.適應復雜多變的業務場景。配置文件中的排版和組件選擇都是很靈活，隨時可以改動的，業務場景變化后只需要修改配置文件即可。2.形成了一整套完善的頁面配置流程和方法，使得不同的工程人員專注于各自負責的領域。框架開發人員只需要專注于組件的完善，頁面配置人員只專注于對業務的理解和組件的配置使用。附圖說明圖1頁面設計效果圖；圖2頁面用XMLDocument描述的排版代碼圖；具體實施方式下面結合附圖和具體實施方式對本專利技術做進一步說明。具體實施方式以開發一個如圖1所示的高速公路免通行費專題監測頁面為例。從設計圖上可以看出，這個頁面將高速公路通行的繁雜數據分類整理，既可以看到各條高速公路的交通量占比和交通量排名，也可以看到每條高速公路的實時小時交通量，還能看到高速公路上發生的事件列表。本專利技術所述的方法包括以下步驟：設計并實現設計圖中包含的圖形化組件，包括以下步驟：步驟1.1高速公路交通量占比餅圖組件。步驟1.2高速公路實時交通量線圖組件以及過濾線圖數據的單選+多選復合組件。步驟1.3高速公路交通量排名柱狀圖組件。步驟1.4高速公路事件列表組件。定義頁面排版結構描述XML文檔，包括以下步驟：步驟2.1分析頁面DOM結構，設計行列組合。步驟2.2以XMLDocument格式完成頁面結構描述，其中Container代表容器，Module代表上面步驟1中實現的組件。配置組件接口參數，完成最終效果，包括以下步驟：步驟3.1分析每個組件包含的數據，以接口設計的模板完成參數配置。步驟3.2微調頁面樣式完成最終效果。至此整個頁面的開發就完成了，可以看到本專利技術中將頁面開發分解為組件開發加頁面布局開發兩個主要步驟，組件開發只考慮數據展示，頁面布局開發只考慮排版，這樣就可以十分靈活的設計對組件的排放，從而快速完成每一個新頁面的開發。本文檔來自技高網...

【技術保護點】
一種適用于監測服務類應用動態構建頁面的方法，其特征在于：該方法包括一種構建組件的方法和一種配置頁面的方法，一種構建組件的方法為下述步驟的1?3，一種配置頁面的方法為下述步驟4，一種構建組件的方法和一種配置頁面的方法兩者相配合實現具體的實施過程，步驟1：設計組件的外觀；這一步驟通過UI的交互設計完成，根據整個網頁應用的外觀風格來確定不同的組件外觀，組件外觀圖表以及自定義外觀的數據展示組件，圖表的形式為餅圖、折線圖、區域圖或柱狀圖等，數據展示組件中為一個多列的表格，其中表格的某一列顯示一個進度條和指示標桿來顯示當前日期的值和指定的對比日期的值；步驟2：設計組件的接口；組件的接口也為組件的配置方式，這里需要明確這個通用的組件需要暴露哪些配置項給用戶，有了這些配置項用戶就在配置文件中隨時修改從而讓對應的組件適用于對應的業務場景；組件的接口設計要考慮到組件所適用的數據類型、業務場景、表現形式；組件會展示一組數據的對比，那接口中一定會有一個這組數據的特征值項；組件在不同的場景下表現的對比形式不一樣，對比形式是一組柱圖對比或是一個餅圖對比總體百分比權重，那接口中會有一個表現外觀的配置項；步驟3：組件的實現設計；組件的實現過程其實就是完成從設計組件的接口到最終設計組件的應用的過渡，每個組件的開發都包含邏輯代碼JS，展示代碼HTML+CSS；設計組件的接口中設計的配置項都會作為組件JS的初始化參數，組件的模板采用含表達式的動態編譯模板引擎，步驟2中設計的接口配置項中外觀表現相關的參數首先會使得模板編譯為配置項要求的HTML片段；然后步驟2設計的數據特征值會使得組件從后臺獲取到相關的數據，然后用這些數據渲染到組件中，進而形成與設計匹配的組件表現；步驟4：配置組件在組件的實現設計的基礎之上，有以上組件后頁面的開發過程就轉變為編寫配置文件的過程，配置文件的格式很靈活，配置文件的格式是xml、json或者其他解析格式的文件；在配置文件里需要以下兩方面的內容，第一方面是頁面布局和組件選擇，當前這個頁面需要顯示為上下兩行時，上面一行按50％?50％分為兩列，下面一行按40％?20％?40％的比例分成三列，這一共5個顯示單元每個單元顯示哪個特定的組件都寫在配置文件中；第二方面就是配置單個組件的接口參數，即第一個單元格的組件需要一個id一個日期，一個顯示主題，單個組件的接口參數都需要寫到配置文件中。...

【技術特征摘要】
1.一種適用于監測服務類應用動態構建頁面的方法，其特征在于：該方法包括一種構建組件的方法和一種配置頁面的方法，一種構建組件的方法為下述步驟的1-3，一種配置頁面的方法為下述步驟4，一種構建組件的方法和一種配置頁面的方法兩者相配合實現具體的實施過程，步驟1：設計組件的外觀；這一步驟通過UI的交互設計完成，根據整個網頁應用的外觀風格來確定不同的組件外觀，組件外觀圖表以及自定義外觀的數據展示組件，圖表的形式為餅圖、折線圖、區域圖或柱狀圖等，數據展示組件中為一個多列的表格，其中表格的某一列顯示一個進度條和指示標桿來顯示當前日期的值和指定的對比日期的值；步驟2：設計組件的接口；組件的接口也為組件的配置方式，這里需要明確這個通用的組件需要暴露哪些配置項給用戶，有了這些配置項用戶就在配置文件中隨時修改從而讓對應的組件適用于對應的業務場景；組件的接口設計要考慮到組件所適用的數據類型、業務場景、表現形式；組件會展示一組數據的對比，那接口中一定會有一個這組數據的特征值項；組件在不同的場景下表現的對比形式不一樣，對比形式是一組柱圖對比或是一個餅圖對比總體百分比權重，那接口中會有一個表現外觀的配置項；步驟3：組件的實現設計；組件的實現過程其實就是完成從設計組件的接口到最終設計組件的應用的過渡，每個組件的開發都包含邏輯代碼JS，展示代碼HTML+CSS；設計組件的接口中設計的配置項都會作為組件JS的初始化參數，組件的模板采用含表達式的動態編譯模板引擎，步驟2中設計的接口配置項中外觀表現相關的參數首先會使得模板編譯為配置項要求的HTML片段；然后步驟2設計的數據特征值會使得組件從后臺獲取到相關的數據，然后用這些數據渲染到組件中，進而形成與設計匹配的組...

【專利技術屬性】
技術研發人員：方秀川，陳智宏，孟凡強，
申請(專利權)人：北京通途永久科技有限公司，
類型：發明
國別省市：北京,11