跨瀏覽器動態(tài)展示方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001 ]本發(fā)明涉及計算機領(lǐng)域，具體地，涉及一種跨瀏覽器動態(tài)展示方法和裝置，主要適 用于基于B/S模式的ERP應(yīng)用系統(tǒng)或協(xié)同應(yīng)用系統(tǒng)中瀏覽器前端流程圖繪制及展示的應(yīng)用 場景。
【背景技術(shù)】
[0002] 在ERP應(yīng)用系統(tǒng)或協(xié)同應(yīng)用系統(tǒng)中，流程圖繪制、布局調(diào)整、流程圖展示及流程節(jié) 點狀態(tài)跟蹤展示等功能越來越受客戶的重視，隨著信息辦公自動化的推進，企業(yè)內(nèi)部的審 批流程越來越多，也更復(fù)雜，一些復(fù)雜的流程圖可能需要功能強大的流程圖繪制工具來繪 制。流程的展示和ERP系統(tǒng)后臺的流程處理引擎是分不開的，因此在ERP系統(tǒng)中必需提供強 大流程圖繪制、展示功能。目前市場上的流程圖實現(xiàn)機制大概有三種： 1、通過flash插件方式實現(xiàn)： 在瀏覽器頁面嵌入flash，通過flash完成流程圖的繪制展示，該方式不存在瀏覽器兼 容性問題，且flash展示流程圖比較美觀。該方式主要的缺點有:flash的技術(shù)體系和ERP系 統(tǒng)的技術(shù)體系屬于不同的技術(shù)，存在數(shù)據(jù)交互問題，雙方需要定義好交互數(shù)據(jù)的格式和接 口，另外ERP系統(tǒng)中流程圖功能改動或新增時都需要flash端配合改動，并再次進行交互數(shù) 據(jù)的定義和接口開發(fā)。另外一個缺點是，flash程序有畫布的概念，且flash畫布大小是固定 的，一旦流程圖高寬超出flash畫布范圍，flash將無法處理。
[0003] 2、通過瀏覽器畫布方式實現(xiàn)： 通過瀏覽器支持的畫布，實現(xiàn)流程圖的繪制展示，通過Json和Ajax實現(xiàn)數(shù)據(jù)交互，不存 在數(shù)據(jù)交互問題，并且新增或修改流程圖功能都很方便，缺點在于瀏覽器兼容性問題無法 處理，例如火狐、谷歌支持HTML5,可通過canvas實現(xiàn)流程圖繪制展示，但是IE8不支持 HTML5,只能通過IE8的VML技術(shù)或其他替代技術(shù)來實現(xiàn)流程圖的繪制展示。VML技術(shù)和 canvas技術(shù)區(qū)別很大，因此流程圖功能就需要針對不同的瀏覽器進行不同的實現(xiàn)。
[0004] 3、通過ocx插件方式實現(xiàn)： 在網(wǎng)頁嵌入ocx插件，缺點同flash插件方式實現(xiàn)。還是因為ocx技術(shù)體系和ERP系統(tǒng)的 技術(shù)體系不同，存在數(shù)據(jù)交互問題，及功能新增修改都需要ocx端配合改動。
[0005] 綜上所述，現(xiàn)有解決方案的弊端可以總結(jié)為如下兩點： (1) 瀏覽器兼容性問題； (2) 不同技術(shù)體系引起的數(shù)據(jù)交互不便，功能的擴展新增復(fù)雜。

【發(fā)明內(nèi)容】

[0006] 本發(fā)明的目的在于，針對上述問題，提出一種跨瀏覽器動態(tài)展示方法和裝置，以實 現(xiàn)解決兼容性和數(shù)據(jù)交互不便的問題。
[0007] 為實現(xiàn)上述目的，本發(fā)明采用的技術(shù)方案是： 一種跨瀏覽器動態(tài)展示裝置，包括： 數(shù)據(jù)引擎:負責(zé)流程節(jié)點定義，流程節(jié)點關(guān)系的維護以及節(jié)點坐標的定位； 事件引擎:負責(zé)鼠標及頁面事件響應(yīng)，以及事件函數(shù)定義； 畫布引擎:負責(zé)畫布的繪制，流程圖的繪制以及流程圖樣式的美化調(diào)整； 交互引擎:負責(zé)跟ERP后臺的交互數(shù)據(jù)定義，交互事件定義，交互數(shù)據(jù)的轉(zhuǎn)化。
[0008] 優(yōu)選的，所述數(shù)據(jù)引擎，包括流程節(jié)點定義單元、節(jié)點關(guān)系維護單元和節(jié)點坐標定 位單元； 所述流程節(jié)點定義單元:定義節(jié)點的屬性； 所述節(jié)點關(guān)系維護單元:按雙向遍歷的原則進行節(jié)點上下級關(guān)系的維護； 所述節(jié)點坐標定位單元:負責(zé)定位節(jié)點的X、Y坐標。
[0009] 優(yōu)選的，所述事件引擎，包括，事件響應(yīng)單元和事件函數(shù)定義單元； 所述事件響應(yīng)單元:響應(yīng)鼠標的操作事件和頁面的操作事件； 所述事件函數(shù)定義單元:處理事件函數(shù)的定義。
[0010]優(yōu)選的，所述處理事件函數(shù)的定義具體包括，節(jié)點的新增、修改、刪除或移動事件。 [0011]優(yōu)選的，所述畫布引擎，包括畫布繪制單元、流程圖繪制單元和樣式美化調(diào)整單 元； 所述畫布繪制單元:繪制簡單的圖形； 所述流程圖繪制單元:根據(jù)數(shù)據(jù)引擎模塊提供的節(jié)點的x、Y坐標，根據(jù)定義好的橫豎坐 標軸單位寬度，算出該節(jié)點的絕對或相對位置，從而完成流程圖的繪制； 所述樣式美化調(diào)整單元，控制流程圖的樣式。
[0012] 優(yōu)選的，所述交互引擎，包括交互數(shù)據(jù)定義單元、交互事件定義單元和交互數(shù)據(jù)轉(zhuǎn) 化單元； 所述交互數(shù)據(jù)定義單元:結(jié)合ERP系統(tǒng)中流程數(shù)據(jù)的格式，定義交互過程中的雙方都認 可的數(shù)據(jù)格式，格式要求符合Json規(guī)范； 所述交互事件定義單元:采用Ajax的方式來實現(xiàn)交互事件的編寫； 所述交互數(shù)據(jù)轉(zhuǎn)化單元:把前端流程圖的數(shù)據(jù)轉(zhuǎn)化成用于同ERP交互的BDF格式數(shù)據(jù)， 同時，把ERP端提供的BDF格式數(shù)據(jù)，轉(zhuǎn)化成前端流程圖數(shù)據(jù)格式。
[0013] 優(yōu)選的，所述節(jié)點坐標定位單元中節(jié)點定位具體包括： 確定X坐標:從起始節(jié)點開始遞歸遍歷流程圖，設(shè)定當(dāng)前節(jié)點子節(jié)點的X坐標為當(dāng)前節(jié) 點的X坐標+1; 確定Y坐標； 其中，起始節(jié)點的X坐標是1，Y坐標是固定的，且位于畫布的Y軸中點。
[0014] 優(yōu)選的，所述確定Y坐標，具體包括： 建立節(jié)點關(guān)系：建立節(jié)點上下級關(guān)系，在節(jié)點中存儲上下級節(jié)點的信息，方便雙向遍 歷； 給節(jié)點設(shè)置初始Y坐標;根據(jù)確定的起始節(jié)點Υ，利用基本公式，遞歸遍歷整個流程圖， 給所有節(jié)點一個初始的Y坐標，所述基本公式為:y(n) = a + η - 0.5*(Ν+1)，其中a為節(jié)點 Y坐標，n代表第n個子節(jié)點，N代表該節(jié)點子節(jié)點數(shù)量； 對節(jié)點Y坐標進行動態(tài)調(diào)整。
[0015] 優(yōu)選的，所述對節(jié)點Y坐標進行動態(tài)調(diào)整具體包括： 確定最小分支:若該節(jié)點的直接或間接父節(jié)點的兄弟節(jié)點不是該節(jié)點的直接或間接父 節(jié)點，則第一次出現(xiàn)的該父節(jié)點為該節(jié)點的最小分支； 確定值域:當(dāng)前節(jié)點到最小分支節(jié)點的Y軸坐標的上下限為該節(jié)點的值域； 計算偏移量； 調(diào)整兄弟節(jié)點：根據(jù)計算的偏移量，運用運算法則，調(diào)整該節(jié)點的兄弟節(jié)點及兄弟節(jié)點 的子節(jié)點的Y坐標，所述運算法則為節(jié)點的兄弟節(jié)點上移或下移。
[0016] 同時本發(fā)明的技術(shù)方案還公開一種跨瀏覽器動態(tài)展示方法，為采用本發(fā)明技術(shù)方 案公開的裝置繪制流程圖并展示的方法。
[0017] 本發(fā)明的技術(shù)方案具有以下有益效果： 本發(fā)明的技術(shù)方案，利用圖結(jié)構(gòu)的雙向遍歷及賦權(quán)定位機制，并取消對瀏覽器畫布對 象及flash、〇CX第三方插件的依賴，利用前端js插件實現(xiàn)流程圖的繪制定位。解決兼容性和 數(shù)據(jù)交互不便的問題。
[0018] 下面通過附圖和實施例，對本發(fā)明的技術(shù)方案做進一步的詳細描述。
【附圖說明】
[0019] 圖1為本發(fā)明實施例所述的跨瀏覽器動態(tài)展示裝置的原理框圖； 圖2為本發(fā)明實施例所述的流程圖繪制功能展示圖； 圖3為本發(fā)明實施例所述的節(jié)點定位基本公式用例說明圖； 圖4為本發(fā)明實施例所述的Y坐標初始設(shè)置示意圖。
【具體實施方式】
[0020] 以下結(jié)合附圖對本發(fā)明的優(yōu)選實施例進行說明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實 施例僅用于說明和解釋本發(fā)明，并不用于限定本發(fā)明。
[0021] 本技術(shù)方案提供的流程圖實現(xiàn)機制底層技術(shù)采用jquery，這樣就不存在瀏覽器兼 容性問題，另外在跟ERP系統(tǒng)的數(shù)據(jù)交互上，采用通用的Json+Ajax方式。
[0022] 具體技術(shù)方案，如圖1所示，一種跨瀏覽器動態(tài)展示裝置，包括： 數(shù)據(jù)引擎:負責(zé)流程節(jié)點定義，流程節(jié)點關(guān)系的維護以及節(jié)點坐標的定位； 事件引擎:負責(zé)鼠標及頁面事件響應(yīng)，以及事件函數(shù)定義； 畫布引擎:負責(zé)畫布的繪制，流程圖的繪制以及流程圖樣式的美化調(diào)整； 交互引擎:負責(zé)跟ERP后臺的交互數(shù)據(jù)定義，交互事件定義，交互數(shù)據(jù)的轉(zhuǎn)化。
[0023]下文對跨瀏覽器動態(tài)展示進行具體說明： 數(shù)據(jù)引擎:負責(zé)流程節(jié)點定義，流程節(jié)點關(guān)系的維護以及節(jié)點坐標的定位。
[0024] 1、流程節(jié)點定義:定義節(jié)點的屬性包括節(jié)點ID、節(jié)點名稱、節(jié)點類型(開始節(jié)點、結(jié) 束節(jié)點、串聯(lián)節(jié)點、并聯(lián)節(jié)點）、父節(jié)點列表、子節(jié)點列表、X坐標或Y坐標等； 2、 節(jié)點關(guān)系維護:流程圖可以算是一種圖結(jié)構(gòu)，因此節(jié)點關(guān)系是按雙向遍歷的原則進 行節(jié)點上下級關(guān)系的維護，開始節(jié)點和結(jié)束節(jié)點比較特殊，開始節(jié)點只有子節(jié)點沒有父節(jié) 點，結(jié)束節(jié)點只有父節(jié)點沒有子節(jié)點； 3、 節(jié)點坐標定位:本技術(shù)方案的核心內(nèi)容，即核心的功能，負責(zé)定位節(jié)點的X、Y坐標，采 用賦權(quán)算法來定位X坐標和Y坐標，具體在下文中進行詳細說明。
[0025] 事件引擎:負責(zé)鼠標及頁面事件響應(yīng)，以及節(jié)點增刪改拖動等事件的定義。
[0026] 1、事件響應(yīng):響應(yīng)鼠標的單擊、雙擊、右擊、拖動、onmouseover等事件，響應(yīng)頁面的 onload、滾動條拖動等事件； 2、事件函數(shù)定義:處理各種事件函數(shù)的定義，大體包括節(jié)點的新增、修改、刪除、移動等 事件； 畫布引擎:負責(zé)畫布的繪制，流程圖的繪制，流程圖樣式的美化調(diào)整。
[0027] 1、畫布繪制：繪制各種簡單圖形，包括矩形、文本框、圓形、直線等，在這里為了保 證瀏覽器的兼容性，采用純JS實現(xiàn)的"wz_jsgraphics. js"的插件來完成這些工作； 2、 流程圖繪制:本技術(shù)方案的核心功能，根據(jù)數(shù)據(jù)引擎模塊提供好的流程節(jié)點的X、Y坐 標，根據(jù)定義好的橫豎坐標軸單位寬度(Ux、Uy)，很容易能算出該節(jié)點的絕對(相對)位置， 若采用CSS絕對布局，則X*Ux是相對瀏覽器左側(cè)的像素值，Y*Uy是相對瀏覽器頂部的像素 值，通過CSS很容易控制節(jié)點位置，另外節(jié)點之間的連線通過簡單的算法便可確定直線的開 始和結(jié)束坐標。若采用CSS相對布局，處理方式和絕對布局大體一樣，不同的是X、Y不是相對 瀏覽器的像素值，而是相對頁面的某個DIV元素的像素值； 對于折線的繪制采用分成一段橫線和一段豎線的方式來處理； 對于在流程圖任意位置進行文字標注的功能，只需要確定文本標注的位置，就可以通 過wz_jsgra