在輸電送電配電數字化趨勢下，Web 端電力接線圖需要滿足制圖規范、便捷的接線編輯以及設備實時工況展示。為此，我們開發了 WireFlow —— 圖撲自研HT Studio 的電力專業圖元增強模塊。模塊聚焦電力接線圖應用，內置專業設備圖元、母線、正交連線、吸附點、輔助連接及狀態驅動等全套圖形能力，支撐標準化廠站接線畫面快速構建。

從專業圖元調用、線路繪制，到設備間自動連線，WireFlow 不止實現電力接線圖的可視化出圖，更致力于將接線工作中大量重復繁瑣的編輯操作，封裝為可復用的標準化能力。

為什么要做 WireFlow？

WireFlow 的誕生主要源于兩方面：

1. 源自電力工程項目實踐

我們在開展 HT Studio 編輯器二次開發期間，落地了一系列連線編輯與輔助編輯能力。在實際項目試用中發現，這類功能在電力圖紙繪制場景下具備很高實用價值。因此我們提取其中通用性較強的模塊，逐步封裝集成，形成獨立模塊。

2. 源自電力行業標準化要求

母線、熔斷器、開關、變壓器…… 電力圖紙需要大量行業專用圖元。HT Studio 原生自帶基礎圖元資源，我們參照 Q/GDW 11162-2014《變電站監控系統圖形界面規范》，補充電力專業圖元與編輯能力，還原電力項目真實繪圖工作流。

產品優勢

WireFlow 功能用于增強圖撲 HT Studio 的電力繪圖能力。通過預置符合行業規范的電力專業圖元，簡化接線圖繪制操作，有效提升電力圖紙繪制效率，保障圖紙表達的規范性與一致性。

Q/GDW 11162-2014 標準要求解讀

電力接線圖繪制，不只是完成設備與線路的圖形繪制。圖面配色、圖元樣式、標識符號以及接線布局，都必須遵循相應規范與技術要求。Q/GDW 11162-2014《變電站監控系統圖形界面規范》作為國家電網企業標準，明確規定了變電站監控系統圖形界面的圖元、標注、色彩與接線布局相關要求。

這份標準里，我們重點落地顏色規范和圖元樣式：

●附錄 A — 圖形界面著色規范：明確不同電壓等級對應的配色規則；

●附錄 B — 常用標志：定義各類通用符號標識；

●附錄 C — 圖元設計規范：規定母線、開關、熔斷器、變壓器等常用電力圖元的基礎樣式；

●附錄 D — 典型接線圖示例：我們選取其中三張接線圖，完成繪制并開展功能驗證。

該圖為附錄 A 圖形界面著色規范

基于這套行業標準，我們開發 WireFlow 時，并非簡單把規范條文直接導入編輯器，而是將通用規則沉淀至圖元與工具體系中，降低多項目場景下重復繪圖、反復統一樣式的工作量。

核心功能

具備標準化專業圖元僅是基礎。在復雜電力接線圖繪制過程中，母線布設、連接線排布以及多設備接線關聯往往會占用大量工時。為此，WireFlow 除提供成套電力專業圖元庫之外，還針對電力圖紙場景，配套實現專業連線、吸附錨點與輔助布線機制。

電力專業圖元庫

母線

電力接線圖中基礎且高頻使用的圖元。

操作演示：在 HT Studio 主工具欄選中母線繪制工具，在編輯區域單擊設定起始點，再次單擊確定終止點，便可完成母線繪制。

母線繪制操作演示

橫平豎直連接線與跨越線

用于連接電氣設備/開關/母線，僅限水平、垂直繪制。

操作演示：在 HT Studio 中選擇橫平豎直連接線工具后，左鍵單擊確定起始點，每次左鍵單擊確定一個折點，右鍵單擊結束創建。

橫平豎直連接線操作演示

●特點：創建時首尾點可以不連接任何節點，系統會在首尾位置自動創建不可見的節點來占位；當連接線的一端是設備且為直線時，另一端可以在母線上滑動。

跨越弧自動生成

跨越線是復雜電力接線圖中很常見的表達。電力接線圖里經常有導線交叉的場景，兩根線交叉時需要用跨越弧來表示它們在電氣上不連接。WireFlow 支持跨越弧自動生成，可以更加清晰地區分“線路交叉”和“實際電氣連接”，復雜接線場景也能很好支持。

跨越弧自動生成演示

電力圖元

用于繪制電力監控與接線圖紙的標準化圖形單元。按照前文中規范附錄 C 的要求，我們繪制了一系列電力圖標。HT Studio 變電站監控系統目錄下的這些圖元，都可以直接拖入畫布使用，包括母線、熔斷器、開關、變壓器等常用電力設備。

電力圖元庫一覽

預置圖元并非固定不可修改。落地至實際項目階段，可依據項目規范對圖元的色彩、尺寸與可視化展示樣式進行自定義配置。如將默認預覽色設置為紅色。

當前絕大多數電力專業圖元已具備根據狀態動態控制開關等顯示效果的能力。在對接業務實時數據時，可依托現場數據的映射規則，將采集數值解析為圖元狀態，進而驅動圖元色彩、顯隱屬性、內部子組件的動態變化。

單個圖元樣式展示

吸附點配置能力

電力圖紙中的設備之間存在大量明確的連接關系，這些關系主要通過吸附點建立。在 HT Studio 圖元的吸附點上新增 id 屬性，執行連線操作時，吸附點 ID 將同步記錄至連線對象，使設備間的電氣連接關系具備更強的清晰度與可追溯性。

操作演示：HT Studio 右側工具欄提供“顯示全部吸附點”功能，可直觀檢查吸附點的連接狀態——紅色代表該吸附點已建立有效連接。

吸附點操作演示

連線時，端點會自動吸附到最近的吸附點。如果沒有吸附點，則無法建立連接——該機制保證了圖紙連接的規范性和準確性。

圖元連接輔助

在 HT Studio 中點擊右上角按鈕開啟輔助連接，一共有三種輔助模式：

點對線

拖拽圖元時，當圖元的吸附點靠近已有連接線，系統會自動生成一段連接線建立連接關系。只需要把設備拖到目標線路附近，后續連接可以自動完成。該方式適合將設備快速接入已有線路，無需為了增加一個設備再單獨補畫一段連接線。

點對線輔助連接演示

雙端設備

當雙端設備拖放到橫平豎直連接線上時，連接線會自動拆分成兩條，分別與雙端設備的兩個吸附點相連——連接線主動“讓位”給設備。反過來，當雙端設備被刪除，或按住 Shift 鍵拖出時，兩端的連接線會自動合并成一條——刪除設備的同時連接關系也自動修復。

對于需要頻繁調整設備位置和接線結構的圖紙，這種編輯方式會方便很多。

雙端設備輔助連接演示

點對點

拖拽圖元時，當吸附點靠近另一個吸附點，系統會自動生成一條連線建立連接關系。這種方式適用于設備之間需要直接連接的場景。

點對點輔助連接演示

點對線、雙端設備和點對點三種方式，基本覆蓋了設備插入、刪除、移動等常見操作場景。如果說專業圖元庫解決的是“畫什么”的問題，那么這一系列輔助連接能力，則聚焦于提升一次設備接線的構建效率，即“如何更快地完成設備互連”。

HT Studio 應用與數據驅動

WireFlow 不僅提供了繪圖能力，更與 HT Studio 平臺深度結合，實現了無代碼配置與可視化數據綁定，讓電力監控畫面的搭建更加高效。依托上述能力，最終構建的成果不再局限于靜態電力接線圖，而是一套可接入業務工況數據、支持人機交互的監控可視化界面。

無代碼交互配置

界面跳轉：利用 HT Studio 的交互配置功能，通過拖拽路徑配置索引圖與接線圖之間的跳轉，無需編寫代碼即可完成多級導航。返回機制：支持配置返回按鈕，實現多界面之間的無縫切換，用戶在不同層級圖紙中漫游瀏覽時，操作體驗連貫順暢，可為結構復雜的變電站監控畫面構建層次清晰的瀏覽鏈路。

無代碼交互配置演示

可視化數據綁定

電力監控畫面最終需依托現場實時數據進行驅動。HT Studio 支持將測點數據與圖元屬性建立綁定關系，通過 WireFlow 繪制的設備與連線，可直接復用這套數據聯動機制。遙測數據綁定：支持電壓、電流、功率等連續性數據的測點綁定，通過 Excel 表導入測點 ID 進行批量配置，無需逐個手動設置。開關量狀態映射：針對開關量（0/1、開/關），支持通過自定義配置實現狀態分支映射，無需編寫代碼即可實現狀態可視化，例如 v1 = 1 顯示“合”狀態，v1 = 0 顯示“分”狀態。

可視化數據綁定演示

多 IO、狀態著色與前后端設計

真實電力項目中，設備狀態并非由單一信號決定。圖元色彩、告警與組件展示，由多路 IO、設備工況、信號質量、異常等級共同控制。因此除圖形繪制能力外，前后端職責劃分尤為關鍵。

多 IO 組合狀態

HT Studio 支持函數綁定與數據處理，按照業務規則將多路信號轉換為統一圖元狀態，驅動顏色、顯隱、子組件變化。簡單邏輯可直接在數據綁定層配置，通過多信號運算輸出運行/停止/分/合/告警等展示狀態。若涉及信號校驗、告警優先級、多級告警覆蓋、多設備聯動等復雜規則，建議邏輯統一放在后端。后端完成綜合狀態計算后下發結果，前端僅負責渲染。避免業務邏輯散落在各個圖元，方便后續規則迭代與維護。

電壓等級著色

WireFlow 內置電壓等級配色與屬性聯動能力，母線、連線、設備圖元可依據電壓等級、實時工況動態變色，直觀區分電壓層級與設備運行狀態。設備實時狀態同樣可以驅動色彩，正常、告警、停運等狀態映射對應視覺效果，監控畫面可直接反映現場工況。

電壓等級著色與拓撲狀態

WireFlow 提供電壓等級配色及屬性聯動，線路與設備可根據實時狀態動態換色，依托電壓等級、運行狀態驅動圖元展示，實現可視化區分。需區分：著色展示和帶電拓撲計算是兩套獨立能力。WireFlow 負責前端圖元、連接關系與狀態結果渲染；帶電拓撲分析需要結合開關位置、端子、線路關系做業務運算。WireFlow 并非電力拓撲計算引擎。項目中可由獨立拓撲服務算出帶電/失電區域，再把結果同步到 WireFlow 的線路設備，實現拓撲計算和可視化分離。兼顧前端圖形靈活性，同時將復雜電力業務收斂在后端。

圖元屬性與設備擴展

項目里設備類型、業務屬性差異大，固定圖元無法覆蓋全部場景。WireFlow 提供基礎通用電力圖元，支持組合配置與自定義擴展，按需構建設備模型。單個設備圖元可承載多類屬性：基礎信息（設備名稱、型號）、顯示屬性（顏色、尺寸、顯隱）、業務屬性（電壓等級、運行狀態）、項目自定義參數及其他擴展字段。屬性對外暴露，可在 HT Studio 面板配置。屬性繁多的復雜設備，支持按業務分組，或條件控制屬性顯隱，精簡編輯面板，防止參數堆砌。

前端展示與后端計算各司其職

電力監控項目建議清晰劃分前后端職責：前端負責繪圖、狀態展示、交互、數據綁定與結果可視化；后端承擔復雜狀態判定、信號質量處理、告警優先級等業務計算。

前后端職責劃分建議

該模式可防止前端算法膨脹，后端無需關注圖元渲染細節。雙方依靠標準化狀態數據對接，便于大型電力項目長期迭代擴容。

應用場景

WireFlow 適用于變電站監控、電力一次接線圖等電力圖形開發，可視化展示主接線結構、設備工況與監控畫面。面向需批量繪制母線、開關、變壓器并維護線路關聯的電力項目，可快速完成圖紙搭建，對接實時監控數據。

應用場景：變電站監控可視化

除電力場景外，其連接編輯機制也可以擴展到其他具有設備與線路關系的二維工業圖紙，如水汽管道、閥門、泵站等流程圖。根據具體行業補充對應圖元和業務屬性后，即可復用相關連接與編輯能力。

擴展場景：網絡拓撲與流程圖

總結

作為圖撲 HT Studio 的電力專業圖元增強模塊，WireFlow 的核心價值可概括為三點：

WireFlow 核心價值

而通過與 HT Studio 平臺的深度整合，WireFlow 進一步實現了無代碼交互配置和可視化數據綁定，讓電力監控畫面的搭建從繪圖到數據對接形成完整閉環。

WireFlow 插件功能全景圖

該模式可減少多項目下重復繪圖、接線調試與狀態配置工作，保持圖元、線路與業務數據的關聯。WireFlow 旨在實現電力接線圖繪制高效、便于迭代，同時具備業務數據承載能力。