1.一種適用于監(jiān)測服務(wù)類應(yīng)用動態(tài)構(gòu)建頁面的方法,其特征在于:該方法包括一種構(gòu)建組件的方法和一種配置頁面的方法,一種構(gòu)建組件的方法為下述步驟的1-3,一種配置頁面的方法為下述步驟4,一種構(gòu)建組件的方法和一種配置頁面的方法兩者相配合實現(xiàn)具體的實施過程,
步驟1:設(shè)計組件的外觀;
這一步驟通過UI的交互設(shè)計完成,根據(jù)整個網(wǎng)頁應(yīng)用的外觀風格來確定不同的組件外觀,組件外觀圖表以及自定義外觀的數(shù)據(jù)展示組件,圖表的形式為餅圖、折線圖、區(qū)域圖或柱狀圖等,數(shù)據(jù)展示組件中為一個多列的表格,其中表格的某一列顯示一個進度條和指示標桿來顯示當前日期的值和指定的對比日期的值;
步驟2:設(shè)計組件的接口;
組件的接口也為組件的配置方式,這里需要明確這個通用的組件需要暴露哪些配置項給用戶,有了這些配置項用戶就在配置文件中隨時修改從而讓對應(yīng)的組件適用于對應(yīng)的業(yè)務(wù)場景;
組件的接口設(shè)計要考慮到組件所適用的數(shù)據(jù)類型、業(yè)務(wù)場景、表現(xiàn)形式;組件會展示一組數(shù)據(jù)的對比,那接口中一定會有一個這組數(shù)據(jù)的特征值項;組件在不同的場景下表現(xiàn)的對比形式不一樣,對比形式是一組柱圖對比或是一個餅圖對比總體百分比權(quán)重,那接口中會有一個表現(xiàn)外觀的配置項;
步驟3:組件的實現(xiàn)設(shè)計;
組件的實現(xiàn)過程其實就是完成從設(shè)計組件的接口到最終設(shè)計組件的應(yīng)用的過渡,每個組件的開發(fā)都包含邏輯代碼JS,展示代碼HTML+CSS;設(shè)計組件的接口中設(shè)計的配置項都會作為組件JS的初始化參數(shù),組件的模板采用含表達式的動態(tài)編譯模板引擎,步驟2中設(shè)計的接口配置項中外觀表現(xiàn)相關(guān)的參數(shù)首先會使得模板編譯為配置項要求的HTML片段;然后步驟2設(shè)計的數(shù)據(jù)特征值會使得組件從后臺獲取到相關(guān)的數(shù)據(jù),然后用這些數(shù)據(jù)渲染到組件中,進而形成與設(shè)計匹配的組件表現(xiàn);
步驟4:配置組件
在組件的實現(xiàn)設(shè)計的基礎(chǔ)之上,有以上組件后頁面的開發(fā)過程就轉(zhuǎn)變?yōu)榫帉懪渲梦募倪^程,配置文件的格式很靈活,配置文件的格式是xml、json或者其他解析格式的文件;在配置文件里需要以下兩方面的內(nèi)容,第一方面是頁面布局和組件選擇,當前這個頁面需要顯示為上下兩行時,上面一行按50%-50%分為兩列,下面一行按40%-20%-40%的比例分成三列,這一共5個顯示單元每個單元顯示哪個特定的組件都寫在配置文件中;第二方面就是配置單個組件的接口參數(shù),即第一個單元格的組件需要一個id一個日期,一個顯示主題,單個組件的接口參數(shù)都需要寫到配置文件中。
2.根據(jù)權(quán)利要求1所述的一種適用于監(jiān)測服務(wù)類應(yīng)用動態(tài)構(gòu)建頁面的方法,其特征在于:高速公路免通行費專題監(jiān)測頁面中,這個頁面將高速公路通行的繁雜數(shù)據(jù)分類整理,既能看到各條高速公路的交通量占比和交通量排名,也能看到每條高速公路的實時小時交通量,還能看到高速公路上發(fā)生的事件列表;
本方法包括以下步驟:
設(shè)計并實現(xiàn)設(shè)計圖中包含的圖形化組件,包括以下步驟:
步驟1.1高速公路交通量占比餅圖組件;
步驟1.2高速公路實時交通量線圖組件以及過濾線圖數(shù)據(jù)的單選+多選復(fù)合組件;
步驟1.3高速公路交通量排名柱狀圖組件;
步驟1.4高速公路事件列表組件;
定義頁面排版結(jié)構(gòu)描述XML文檔,包括以下步驟:
步驟2.1分析頁面DOM結(jié)構(gòu),設(shè)計行列組合;
步驟2.2以XMLDocument格式完成頁面結(jié)構(gòu)描述,其中Container代表容器,Module代表上面步驟1中實現(xiàn)的組件;
配置組件接口參數(shù),完成最終效果,包括以下步驟:
步驟3.1分析每個組件包含的數(shù)據(jù),以接口設(shè)計的模板完成參數(shù)配置;
步驟3.2微調(diào)頁面樣式完成最終效果。