前言：
隨著物聯網仰禀、大數據等技術高速發(fā)展甜攀，我們逐步向數字化、可視化的人工智能（AI）時代的方向不斷邁進阱持。智能時代是工業(yè) 4.0 時代夭拌，我國工業(yè)領域正努力從“制造”邁向“智造”的新跨越。
正文：
1.mxgraph：
介紹：開源免費，但是需要解決的問題很多鸽扁，國內學習參考資料少蒜绽。但是，可視化組態(tài)的實現基本都是借助于這個框架來實現的桶现。
演示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
最大的交流社區(qū)：
https://forum.jgraph.com/tags/swimlane/index.html
交流社區(qū)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圖，動畫慰于、視頻支持）钮科。本框架目前已經實現了拖拽、縮放婆赠、旋轉绵脯、自定義屬性等基礎操作，開發(fā)者只用關心圖表繪畫實現即可休里。其次蛆挫，流暢、高性能 - 使用 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
社區(qū)博客：
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：圖撲軟件
社區(qū)博客：
https://www.hightopo.com/blog/
效果：
https://www.hightopo.com/demos/index.html
3D地鐵站臺：
2D電力相關：
editor參考：
https://www.hightopo.com/demo/Simple3DEditor/index.html
標題
5.3D可視化樓宇、水站實時監(jiān)測系統：
介紹：3D可視化樓宇管理系統纹安，實時監(jiān)測樓宇相關的各方面的數據尤辱。提到工業(yè)互聯網往往會涉及：物聯網砂豌、IoT、5G光督、數字孿生阳距、邊緣計算、PaaS平臺结借、SaaS應用筐摘、產業(yè)互聯網、互聯網+船老、工業(yè)4.0咖熟、智慧城市、智慧園區(qū)努隙、智慧樓宇球恤、智能制造等概念，但本文將圍繞可視化的話題荸镊，圍繞更基礎的 HTML5/WebGL/WebVR 等底層技術，我們覺得業(yè)界還沒達到智能化堪置、平臺化的成熟階段躬存，走得太快即使是 GE Predix 也會從明星變流星，了解垂直行業(yè)需求舀锨，采集足夠多有效數據岭洲，做好實時的、穩(wěn)定的坎匿、美觀的盾剩、Web 化的 2D 和 3D 數據可視化呈現，是工業(yè)互聯網需要走好的第一步替蔬。
演示
demo:http://www.hightopo.com/demo/ht-smart-building/
github：圖撲軟件
效果：
效果：
6告私、前端設計Mqtt（訂閱、發(fā)布）
參考：
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是一個工業(yè)物聯網的控件庫，基于C#開發(fā)凶异，配套HslCommunication組件可以實現工業(yè)上位機軟件的快速開發(fā)蜀撑，支持常用的工業(yè)圖形化控件，快速的集成界面開發(fā)剩彬。 主要包含了按鈕酷麦，開關，進度條喉恋，信號燈沃饶，數碼管粪摘，時鐘，曲線顯示控件绍坝，儀表盤控件徘意，管道控件，瓶子控件轩褐，餅圖控件椎咧，傳送帶控件，溫度計控件把介，鼓風機控件勤讽，閥門控件，電池控件等等拗踢。
開發(fā)語言：c#
github：https://github.com/dathlin/HslControlsDemo
博客：
https://www.cnblogs.com/dathlin/p/7703805.html
注意：前端主要是JavaScript語言開發(fā)脚牍，c#我也不懂，只是做參考巢墅，看看人家的思路啥的诸狭。
9.VUE組態(tài)-支持拖動
效果：
介紹：個人基于vue+quasar的web組態(tài)，核心代碼基于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組態(tài)百軟度件
效果：
介紹：基于HT框架的web組態(tài)軟件驯遇，HTML5技術，道在線專組態(tài)運屬行.
demo：http://www.wtscada.com/scada/
github：暫無
11蓄髓、WebGL
介紹：WebGL是目前最為流行的3D繪圖協議
12叉庐、WVGL
介紹：V虛擬現實行業(yè)
參考文章：
1.基于web組態(tài)軟件 關于組態(tài)軟件的設計與開發(fā)
2.組態(tài)軟件認識
成功案例（公司）：
智雨物聯：工業(yè)物聯網平臺 www.krmes.com 采用H5技術 數據采用websocket 無需任何回插件 真正的網頁組態(tài) 支持多種協議 還有豐富的圖形設答計庫。
上海迅饒：基于HTML5規(guī)范的組態(tài)軟件会喝。配合本公司組態(tài)網關(如HMI-2004-A9)或樓控觸摸屏等陡叠，實現現場數據采集，并直接轉為組態(tài)畫面進行數據實時監(jiān)控肢执。具有常規(guī)通用組態(tài)操作方便的特性枉阵，另外具有觸摸屏組態(tài)軟件可以運行在嵌入式系統上的特性。比起其它組態(tài)軟件蔚万，最大的亮點是完全基于WEB開發(fā)岭妖，用戶創(chuàng)建的組態(tài)工程，可以下載到硬件上運行反璃。智能手機昵慌、iPad或者PC可以通過瀏覽器訪問，特別適合應用在BA淮蜈、智能家居等場合斋攀。
圖撲旗下：圖撲 WEB 組態(tài)軟件，2D和3D都有梧田。
iNeuOS：工業(yè)物聯網平來臺自淳蔼，實現從設備&PLC侧蘸、云平百臺、移度動APP數據鏈路問閉環(huán)鹉梨。
感悟：
物聯網平臺上讳癌，可以有地圖支持，實時報警存皂，歷史告警晌坤，實時數據，組態(tài)工業(yè)軟件功能旦袋，數據解析等等骤菠，為客戶提供導航定位，車輛故障疤孕，傳感器組圖表商乎，工業(yè)協議數據變成可讀數據;智能家居上，可以有語音識別祭阀，視頻畫面鹉戚，無線配置等等，為客戶提供語音控制柬讨，安防控制崩瓤，藍牙wifi連接的配置等等服務；工業(yè)水處理上踩官，可以有報警功能，溫度度量境输，水為位置蔗牡，視頻監(jiān)控等等，為客戶提供遇到緊急報警嗅剖，溫度過高或者過低提醒辩越，水位高度測量，視頻時時查看等等服務信粮；光伏項目中黔攒，可以有實時數據，歷史數據强缘，當日產能督惰，收益計算，活躍報警旅掂，歷史報警等功能....
當你自己一點一滴去實現每一個功能而沒有參考的時候赏胚，你才會發(fā)現和別人的差距，開源不易商虐，很多公司基于別人的開源項目二次開發(fā)觉阅，最后研發(fā)自己的軟件崖疤，貼上自己的廣告。大多數看著很相似典勇，但是人家就說是自己實現的劫哼，你有什么辦法呢？而且這一塊開源的非常之少割笙，不過對于物聯網公司算是一個大的需求了权烧，也許未來的某一天，學生坐在教室咳蔚，看著8k屏幕上的實驗室或者科創(chuàng)空間的傳回來的可視化畫面和實時數據的時候豪嚎，我們也會感到欣慰，致敬每一個在幕后默默付出谈火，用行動踐行工業(yè)4.0的人侈询！
原文：最火前端Web組態(tài)軟件(可視化)_yb305-CSDN博客_web組態(tài)
https://blog.csdn.net/yb305/article/details/109118748
