[發明專利]一種輕量的基于DOM的流程圖渲染方法

在審

• 申請號: 202111060027.6
• 申請日: 2021-09-10
• 公開（公告）號: CN113849697A
• 公開（公告）日: 2021-12-28
• 發明（設計）人: 張彤;賈順昌
• 申請（專利權）人: 上海得帆信息技術有限公司
• 主分類號: G06F16/901
• 分類號: G06F16/901;G06F16/904;G06T11/20
• 代理公司: 上海創開專利代理事務所(普通合伙) 31374
• 代理人: 張佑富

本發明公開了一種輕量的基于DOM的流程圖渲染方法，涉及數據處理技術領域。本發明提供一種流程圖渲染方式，能夠簡單、輕量的渲染到瀏覽器中，幫助相關人員直觀、高效的了解整個工作流，當然為了支撐業務的發展必須設計一種合理的數據結構，既能保證存儲時相對結構化，又要兼顧前端的渲染。本發明基于Vue開發體系，采用DOM的方式，不依賴第三方插件，產出更加輕量、高效；支持自定義節點的樣式，并且對外暴露交互事件，方便擴展；采用鏈式的存儲結構，相對結構化，方便以后的業務發展。

技術領域

本發明屬于數據處理技術領域，特別是涉及一種輕量的基于DOM的流程圖渲染方法。

背景技術

隨著web前端領域的不斷發展，尤其是Vue、React等業務框架的興起，大大提高了前端程序員的工作效率，解放了生產力，讓前端程序員可以由更多的精力關注于業務和用戶體驗，尤其是B端場景下，用戶希望更加直觀的呈現整個工作流程，以便及時做成調整和優化。

目前主流的解決方案是使用螞蟻AntV系列的產品，如X6、g6等，但這些產品使用svg來渲染，設計上相對復雜，而且需要接受螞蟻AntV系列的設計風格，不容易修改，擴展性相對不足，很多簡單場景下，并不需要采用這套方案。

發明內容

本發明提供了一種輕量的基于DOM的流程圖渲染方法，解決了以上問題。

為解決上述技術問題，本發明是通過以下技術方案實現的：

本發明的一種輕量的基于DOM的流程圖渲染方法，基于唯一開始節點和唯一結束節點設定，每個子流程都最終會匯合至一個父流程的節點上，該節點稱為匯合節點，并且后端存儲的數據結構中第一個節點即為開始節點，所述渲染方法包括如下步驟：

S01、初始化最終的結果集graph為空，建立通過節點nodeId找到節點完整信息的映射表，并且確定匯合節點以及每個匯合節點的上級節點個數JoinNodes，從開始節點開始，執行下一步驟；

S02、將當前節點push到最終的結果graph，然后執行下一步驟；

S03、如果當前節點的nextNodeId只有一個，則通過映射表取下一個節點，繼續執行S02步驟，否則執行下一步驟；

S04、如果當前節點的nextNodeId為空，則流程結束，否則執行S05步驟；

S05、初始化計數面板為空，遍歷當前節點的nextNodeId，通過映射表找到每個節點的完整信息，然后對于每一個節點執行S06步驟；

S06、當前節點存在，則初始化子結果集subGraph為空，從當前節點的開始，執行S07步驟，否則執行S12步驟；

S07、將當前節點push到子結果集subGraph，然后執行下一步驟；

S08、如果當前節點的nextNodeId字符串化在匯合節點的集合中，則執行下一步驟，否則執行S10步驟；

S09、如果當前節點的nextNodeId字符串化之后在計數面板中，則計數+1，當前遍歷結束，否則計數置為1，當前循環結束，繼續執行S06步驟；

S10、如果當前節點的nextNodeId只有一個，則通過映射表取下一個節點，則繼續執行S07步驟，否則執行下一步驟；

S11、如果當前節點nextNodeId為空，則當前循環結束，繼續執行S06步驟，否則遞歸執行S05步驟；

S12、將子結果集subGraph push到最終的結果graph中，然后遍歷計數面板中的結果，對于每一個結果執行S13步驟；

S13、如果當前結果在匯合節點中的計數等于在計數面板中的計數，則將當前結果移出JoinNodes，然后執行下一步驟，否則執行S15步驟；