最火前端Web組態軟體(視覺化)

友情提示： 本文為原創文章，轉載請註明出處！夏季到來，大家如果有需要購買雨傘、生活日用百貨的，可以搜尋淘寶小店：華誠榮邦百貨，凡是CSDN粉絲客戶加備註，全程商品一律有優惠！

前言：

隨著物聯網、大資料等技術高速發展，我們逐步向數字化、視覺化的人工智慧（AI）時代的方向不斷邁進。智慧時代是工業 4.0 時代，我國工業領域正努力從“製造”邁向“智造”的新跨越。
正文：
1.mxgraph：

介紹：開源免費，但是需要解決的問題很多，國內學習參考資料少。但是，視覺化組態的實現基本都是藉助於這個框架來實現的。

演示demo：Grapheditor

mxgraph官方文件API：mxCell

最大的交流社群：Diagram Software and Flowchart Maker

交流社群2：

github：

效果：

2.le5le-2.topology：

介紹：A diagram (topology, UML) framework uses canvas and typescript. 一個用canvas+typescript寫的繪圖【核心庫，不依賴框架】（微服務架構圖、拓撲圖、流程圖、類圖等ULM圖，動畫、視訊支援）。本框架目前已經實現了拖拽、縮放、旋轉、自定義屬性等基礎操作，開發者只用關心圖表繪畫實現即可。其次，流暢、高效能 - 使用 canvas 和多個場景離屏，操作過程流暢；完全不用擔心 SVG 方式 dom 元素過多，效能高效。其三，自帶部分動畫效果，能滿足基本的需求。使用TypeScript語言。chrome、firefox、ie11等瀏覽器是沒有問題的。IE9以下版本沒有測試，僅僅是繪圖引擎，只需要支援canvas+html5標準即可

演示demo：樂吾樂Topology - 基於開源的免費視覺化繪圖工具

github：

gitee：topology: 開源、易擴充套件、方便整合的線上繪圖（微服務架構圖、網路拓撲圖、流程圖等）工具

效果：

3.draw.io

介紹：和mxgraph相比，在其基礎上加了一些東西，更加完善。但是都是出自同一家公司之手。

演示demo：

github:

社群部落格：Blog - draw.io

效果：

4.HT-2D/3D

演示demo：

全部demo：

github：圖撲軟體

社群部落格：https://www.hightopo.com/blog/

效果：

 3D地鐵站臺：

         2D電力相關：

         editor參考：
3D
5.3D視覺化樓宇、水站實時監測系統：

介紹：3D視覺化樓宇管理系統，實時監測樓宇相關的各方面的資料。提到工業網際網路往往會涉及：物聯網、IoT、5G、數字孿生、邊緣計算、PaaS平臺、SaaS應用、產業網際網路、網際網路+、工業4.0、智慧城市、智慧園區、智慧樓宇、智慧製造等概念，但本文將圍繞視覺化的話題，圍繞更基礎的 HTML5/WebGL/WebVR 等底層技術，我們覺得業界還沒達到智慧化、平臺化的成熟階段，走得太快即使是 GE Predix 也會從明星變流星，瞭解垂直行業需求，採集足夠多有效資料，做好實時的、穩定的、美觀的、Web 化的 2D 和 3D 資料視覺化呈現，是工業網際網路需要走好的第一步。

演示demo:

github：圖撲軟體

效果：

效果：

6、前端設計Mqtt（訂閱、釋出）

參考：
7.OSHMI

效果：

介紹：適用於變電站，物聯網和自動化應用的移動和雲友好型SCADA HMI。

github:

官網：OSHMI Open Substation HMI

部落格：（被牆）

圖形參考來源1：Industry Vectors, Photos and PSD files | Free Download
8.HslControls控制元件庫

效果：

介紹：HslControls是一個工業物聯網的控制元件庫，基於C#開發，配套HslCommunication元件可以實現工業上位機軟體的快速開發，支援常用的工業圖形化控制元件，快速的整合介面開發。 主要包含了按鈕，開關，進度條，訊號燈，數碼管，時鐘，曲線顯示控制元件，儀表盤控制元件，管道控制元件，瓶子控制元件，餅圖控制元件，傳送帶控制元件，溫度計控制元件，鼓風機控制元件，閥門控制元件，電池控制元件等等。

開發語言：c#

github：

部落格：HslCommunication元件庫使用說明 - dathlin - 部落格園

注意：前端主要是JavaScript語言開發，c#我也不懂，只是做參考，看看人家的思路啥的。
9.VUE組態-支援拖動

效果：

介紹：個人基於vue+quasar的web組態，核心程式碼基於vue，quasar僅僅是為了方便構建
github預覽訪問如下地址：WebTopo

demo：WebTopo

github：

部落格：https://blog.csdn.net/lpch1987/article/details/96288974
10.WTScada HTML5組態百軟度件

效果：

介紹：基於HT框架的web組態軟體，HTML5技術，道線上專組態運屬行.

demo：WTScada組態軟體

github：暫無
11、WebGL

介紹：WebGL是目前最為流行的3D繪圖協議
12、WVGL

介紹：V虛擬現實行業
13、iNeuOS

效果：

介紹：一個工業物聯網的web組態，將組態和作業系統結合的模式，登入平臺類似進入一臺伺服器；可以有效防止原始碼洩露；應該也是基於mxgraph前端框架。他的介面優化的挺好的，圖元種類豐富，也是svg.點選圖元分類的時候，有的時候很卡這個也需要優化載入速度。

demo：iNeuOS工業網際網路作業系統

部落格(文章)：iNeuView檢視Web組態(2D&3D)建模平臺，各行業和領域豐富圖元資訊 - 產品介紹 - iNeuOS工業網際網路作業系統
14、Tempo

效果：

介紹：一款基於angular8開發的開源web組態編輯器：Demo(Tag0.1.0)。目前支援的效果：拖拽(建立組態，佈局)、專案管理、頁面管理(增加，刪除)、屬性繫結(樣式屬性，靜態資料)、快捷操作(佈局，刪除，拷貝，貼上)、樣式複製、預覽、服務端支援（目前僅支援node.js開發中）

開發語言：angular8、node.js

github：

demo：Tempo

部落格：

注意：這個支援拖拽元素，可以選擇固定和不固定，右側屬性繫結做的比較好，預覽較為流暢，還有一些管理也不錯，最重要的是博主個人進行開源。目前不支援雙擊元素到畫布的操作，元素不可以旋轉特別是連線也不能旋轉，大家可以去Github給別人打打星星。

15.Web前端組態軟體(視覺化繪圖編輯器)

效果：

架構：

部落格原文：
參考文章：

[1].基於web組態軟體 關於組態軟體的設計與開發

[2].組態軟體認識

[3].組態軟體原理與實現
成功案例（公司）：

智雨物聯：工業物聯網平臺  採用H5技術 資料採用websocket 無需任何回外掛 真正的網頁組態 支援多種協議 還有豐富的圖形設答計庫。

上海迅饒：基於HTML5規範的組態軟體。配合本公司組態閘道器(如HMI-2004-A9)或樓控觸控式螢幕等，實現現場資料採集，並直接轉為組態畫面進行資料實時監控。具有常規通用組態操作方便的特性，另外具有觸控式螢幕組態軟體可以執行在嵌入式系統上的特性。比起其它組態軟體，最大的亮點是完全基於WEB開發，使用者建立的組態工程，可以下載到硬體上執行。智慧手機、iPad或者PC可以通過瀏覽器訪問，特別適合應用在BA、智慧家居等場合。

圖撲旗下：圖撲 WEB 組態軟體，2D和3D都有。

iNeuOS：工業物聯網平來臺自，實現從裝置&PLC、雲平百臺、移度動APP資料鏈路問閉環。
感悟：

物聯網平臺上，可以有地圖支援，實時報警，歷史告警，實時資料，組態工業軟體功能，資料解析等等，為客戶提供導航定位，車輛故障，感測器組圖表，工業協議資料變成可讀資料;智慧家居上，可以有語音識別，視訊畫面，無線配置等等，為客戶提供語音控制，安防控制，藍芽wifi連線的配置等等服務；工業水處理上，可以有報警功能，溫度度量，水為位置，視訊監控等等，為客戶提供遇到緊急報警，溫度過高或者過低提醒，水位高度測量，視訊時時檢視等等服務；光伏專案中，可以有實時資料，歷史資料，當日產能，收益計算，活躍報警，歷史報警等功能....

當你自己一點一滴去實現每一個功能而沒有參考的時候，你才會發現和別人的差距，開源不易，很多公司基於別人的開源專案二次開發，最後研發自己的軟體，貼上自己的廣告。大多數看著很相似，但是人家就說是自己實現的，你有什麼辦法呢？而且這一塊開源的非常之少，不過對於物聯網公司算是一個大的需求了，也許未來的某一天，學生坐在教室，看著8k螢幕上的實驗室或者科創空間的傳回來的視覺化畫面和實時資料的時候，我們也會感到欣慰，致敬每一個在幕後默默付出，用行動踐行工業4.0的人！
————————————————
版權宣告：本文為CSDN博主「爾嶸」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/XU441520/article/details/103073202