前言：
隨着物聯網、大數據等技術高速發展，我們逐步向數字化、可視化的人工智能（AI）時代的方向不斷邁進。智能時代是工業 4.0 時代，我國工業領域正努力從“製造”邁向“智造”的新跨越。
正文：
1.mxgraph：
介紹：開源免費，但是需要解決的問題很多，國內學習參考資料少。但是，可視化組態的實現基本都是藉助於這個框架來實現的。
演示demo：https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html
mxgraph官方文檔API：http://jgraph.github.io/mxgraph/docs/js-api/files/model/mxCell-js.html
最大的交流社區：https://forum.jgraph.com/tags/swimlane/index.html
交流社區2：https://stackoverflow.com/questions/tagged/mxgraph
github：https://github.com/jgraph/mxgraph
效果：
2.le5le-topology：
介紹：A diagram (topology, UML) framework uses canvas and typescript. 一個用canvas+typescript寫的繪圖【核心庫，不依賴框架】（微服務架構圖、拓撲圖、流程圖、類圖等ULM圖，動畫、視頻支持）。本框架目前已經實現了拖拽、縮放、旋轉、自定義屬性等基礎操作，開發者只用關心圖表繪畫實現即可。其次，流暢、高性能 - 使用 canvas 和多個場景離屏，操作過程流暢；完全不用擔心 SVG 方式 dom 元素過多，性能高效。其三，自帶部分動畫效果，能滿足基本的需求。使用TypeScript語言。chrome、firefox、ie11等瀏覽器是沒有問題的。IE9以下版本沒有測試，僅僅是繪圖引擎，只需要支持canvas+html5標準即可
演示demo：http://topology.le5le.com/
github：https://github.com/le5le-com/topology
gitee：https://gitee.com/mirrors/topology
效果：
3.draw.io
介紹：和mxgraph相比，在其基礎上加了一些東西，更加完善。但是都是出自同一家公司之手。
演示demo：https://www.draw.io/
github:https://github.com/jgraph/drawio
社區博客：https://about.draw.io/blog/
效果：
4.HT-2D/3D
演示demo：http://www.hightopo.com/demo/2deditor/HT-2D-Editor.html
全部demo：http://www.hightopo.com/demos/index.html
github：圖撲軟件
社區博客：https://www.hightopo.com/blog/
效果：
3D地鐵站臺：
2D電力相關：
5.3D可視化樓宇管理：
介紹：3D可視化樓宇管理系統，實時監測樓宇相關的各方面的數據。提到工業互聯網往往會涉及：物聯網、IoT、5G、數字孿生、邊緣計算、PaaS平臺、SaaS應用、產業互聯網、互聯網+、工業4.0、智慧城市、智慧園區、智慧樓宇、智能製造等概念，但本文將圍繞可視化的話題，圍繞更基礎的 HTML5/WebGL/WebVR 等底層技術，我們覺得業界還沒達到智能化、平臺化的成熟階段，走得太快即使是 GE Predix 也會從明星變流星，瞭解垂直行業需求，採集足夠多有效數據，做好實時的、穩定的、美觀的、Web 化的 2D 和 3D 數據可視化呈現，是工業互聯網需要走好的第一步。
演示demo:http://www.hightopo.com/demo/ht-smart-building/
github：圖撲軟件
效果：
6、前端設計Mqtt（訂閱、發佈）
參考：https://github.com/UsrIot/usrCloudDemo_js/blob/master/web/mqttws31.js
7.OSHMI
效果：
介紹：適用於變電站，物聯網和自動化應用的移動和雲友好型SCADA HMI。
github:https://github.com/riclolsen/OSHMI
官網：https://oshmiopensubstationhmi.sourceforge.io/
博客：http://ricolsen1supervc.wordpress.com（被牆）
圖形參考來源1：https://www.freepik.com/search?dates=any&format=search&page=1&query=%E5%B7%A5%E4%B8%9A&sort=popular
8.HslControls控件庫
效果：
介紹：HslControls是一個工業物聯網的控件庫，基於C#開發，配套HslCommunication組件可以實現工業上位機軟件的快速開發，支持常用的工業圖形化控件，快速的集成界面開發。 主要包含了按鈕，開關，進度條，信號燈，數碼管，時鐘，曲線顯示控件，儀表盤控件，管道控件，瓶子控件，餅圖控件，傳送帶控件，溫度計控件，鼓風機控件，閥門控件，電池控件等等。
開發語言：c#
github：https://github.com/dathlin/HslControlsDemo
博客：https://www.cnblogs.com/dathlin/p/7703805.html
注意：前端主要是JavaScript語言開發，c#我也不懂，只是做參考，看看人家的思路啥的。
9.VUE組態-支持拖動
效果：
介紹：個人基於vue+quasar的web組態，核心代碼基於vue，quasar僅僅是爲了方便構建
github預覽訪問如下地址：https://phynos.github.io/WebTopo/dist/spa
demo：https://phynos.github.io/WebTopo/dist/spa/
github：https://github.com/phynos/WebTopo
博客：https://bloghttps://github.com/phynos/WebTopo.csdn.net/lpch1987/article/details/96288974
10.WTScada HTML5組態百軟度件
效果：
介紹：基於HT框架的web組態軟件，HTML5技術，道在線專組態運屬行.
demo：http://www.wtscada.com/scada/
github：暫無
11、WebGL
介紹：WebGL是目前最爲流行的3D繪圖協議
12、WVGL
介紹：V虛擬現實行業
參考文章：
2.組態軟件認識
成功案例（公司）：
智雨物聯：工業物聯網平臺 www.krmes.com 採用H5技術 數據採用websocket 無需任何回插件 真正的網頁組態 支持多種協議 還有豐富的圖形設答計庫。
上海迅饒：基於HTML5規範的組態軟件。配合本公司組態網關(如HMI-2004-A9)或樓控觸摸屏等，實現現場數據採集，並直接轉爲組態畫面進行數據實時監控。具有常規通用組態操作方便的特性，另外具有觸摸屏組態軟件可以運行在嵌入式系統上的特性。比起其它組態軟件，最大的亮點是完全基於WEB開發，用戶創建的組態工程，可以下載到硬件上運行。智能手機、iPad或者PC可以通過瀏覽器訪問，特別適合應用在BA、智能家居等場合。
圖撲旗下：圖撲 WEB 組態軟件，2D和3D都有。
iNeuOS：工業物聯網平來臺自，實現從設備&PLC、雲平百臺、移度動APP數據鏈路問閉環。
感悟：
物聯網平臺上，可以有地圖支持，實時報警，歷史告警，實時數據，組態工業軟件功能，數據解析等等，爲客戶提供導航定位，車輛故障，傳感器組圖表，工業協議數據變成可讀數據;智能家居上，可以有語音識別，視頻畫面，無線配置等等，爲客戶提供語音控制，安防控制，藍牙wifi連接的配置等等服務；工業水處理上，可以有報警功能，溫度度量，水爲位置，視頻監控等等，爲客戶提供遇到緊急報警，溫度過高或者過低提醒，水位高度測量，視頻時時查看等等服務；光伏項目中，可以有實時數據，歷史數據，當日產能，收益計算，活躍報警，歷史報警等功能....
當你自己一點一滴去實現每一個功能而沒有參考的時候，你纔會發現和別人的差距，開源不易，很多公司基於別人的開源項目二次開發，最後研發自己的軟件，貼上自己的廣告。大多數看着很相似，但是人家就說是自己實現的，你有什麼辦法呢？而且這一塊開源的非常之少，不過對於物聯網公司算是一個大的需求了，也許未來的某一天，學生坐在教室，看着8k屏幕上的實驗室或者科創空間的傳回來的可視化畫面和實時數據的時候，我們也會感到欣慰，致敬每一個在幕後默默付出，用行動踐行工業4.0的人！