WEB組態可視化軟件(B/S)
WEB組態可視化軟件
1 B/S組態軟件
它是一個獨立的產品，包含編輯器（設計時）和運行環境（運行時）兩大模塊，咱們將其命名爲——WEB組態可視化軟件（下稱「組態軟件」）。javascript
2 組態概念
組態（Configure）的概念來自於20世紀70年代中期出現的第一代集散控制系統（Distributed Control System），能夠理解爲「配置」、「設定」、「設置」等，是指經過人機開發界面，用相似「搭積木」的簡單方式來搭建軟件功能，而不須要編寫計算機程序。咱們也可稱之爲「二次開發」，組態軟件即爲「二次開發平臺」。css
3 組態產品呈現
組態軟件是個怎樣的產品？
先作一個概述：組態軟件經過瀏覽器操做組態工具、瀏覽組態畫面，實現工程管理、組態編輯以及組態運行三大功能。經過實現圖元組態、可視化圖表組態、數據庫組態的配置與關聯，完成基於Web服務的實時數據監控與服務端的多用戶訪問等。html
從用戶操做與界面呈現的角度來講，組態軟件採用標準HTML5技術，基於B/S架構進行開發，支持Web端呈現，在瀏覽器端便可完成便捷的人機交互，簡單的拖拽便可完成可視化頁面的編排設計。此外，因爲組態軟件功能較爲複雜，爲下降使用門檻，組態軟件進行了模塊集成化，旨在簡化用戶的操做步驟，提升用戶的工做效率。前端
從軟件架構來講，組態軟件具有高度的開放性。隨着應用場景的逐漸增長，軟件必然須要進行功能擴展，所以，組態軟件不只支持多種數據接口，也提供了二次開發接口，能夠由用戶自行完成二次開發。組態軟件在功能上集成了大量通用模塊和個性化模塊，以實現不一樣行業用戶的需求。針對具體的用戶，軟件支持定製化模塊的開發與配置，實現「即插即用「。vue
軟件的運行邏輯並不複雜，除了基礎的組態管理外，主要可分爲組態編輯和組態運行兩個部分。用戶須要在組態編輯環境中使用組態軟件提供的組態功能（圖元、圖表、數據庫）進行組態設置、創建網絡拓撲、繪製數據顯示界面、配置各類系統參數（如數據採集頻率）等；而後在組態運行環境中運行已經組態好的應用系統，包括數據實時監控、場景展現等。html5
二者之間的關係如圖所示：java
4 功能特色
- 基於html5，B/S架構
- 支持 2D、2.5D、3D多種呈現模式
- 可視化拖拽編輯、簡單易用
- 支持雲端/本地等部署方式，多終端使用
- 提供豐富的行業標準元器件圖元庫
- 提供行業模板和組件，支持自定義模板和圖紙管理
- 提供定製開發服務
- 支持Http、WebSocket等主流協議，支持擴展更多協議
- 支持嵌入第三方系統或者集成平臺，也可做爲獨立平臺
- 具有延續性、可擴展性、封裝性（易學易用）、通用性、開放性
- 周密的系統安全防範
軟件主要功能模塊有組態管理、組態編輯、組態運行三大模塊：react
- 組態管理
管理模塊的詳細功能與其餘軟件大同小異，系統管理經過分級權限保障系統的安全；工程管理則是對組態文件的創建、提交、刪除、恢復等基本操做提供入口。
2. 組態編輯web
本模塊是組態軟件的核心模塊，軟件絕大部分操做都在這一個模塊裏面進行。ajax
主要操做對象有畫布、圖元、可視化圖表以及數據庫。針對畫布與圖元這類基礎對象，軟件提供諸如調整尺寸、屬性、複製、粘貼、增刪、合併、拆分、綁定跳轉頁面/事件等操做，搭建可視化頁面的基礎架構。
可視化圖表是頁面展現的主要形式，所以，除了針對圖元的基本操做以外，軟件還提供了樣式設計、文本屬性以及運行參數設置，確保圖表在可視化頁面的展現效果。
數據庫做爲系統的數據源，須要與組態造成關聯，爲組態提供數據。軟件支持配置組態關聯的數據庫信息、綁定圖元/可視化圖表對應實時/歷史數據源、設置圖元/可視化圖表數據源觸發事件等功能。
- 組態運行
本模塊將爲各種應用場景提供實際的運行功能，具體以下所示：
- 解析組態畫面編輯文件
- 繪製動態實時監控頁面
- 關聯圖元及可視化圖表數據源
- 可視化圖表數據導出
- 網絡通訊檢測
- 設置可視化圖表運行參數
- 失效數據檢測處理等
5 組態軟件應用場景
組態軟件的出現，爲解決實際工程問題提供了一種嶄新的方法，用戶經過相似「搭積木」的簡單方式來完成本身所須要的軟件功能，不須要編輯計算機程序。組態軟件可以很好地解決各種場景中存在的種種問題，使用戶能根據本身的管理對象和管理目的的任意組態，完成最終的場景控制自動化、數據可視化。主要適應場景以下：
- 配電
- 工業（控制）
- 智能樓宇
- 變電站管理
- 電廠電氣
- 配電室監控
- 冶金工藝流程控制
- 水力自動控制
- 石油智能控制系統等
6 經典的案例
6.1 某通訊基站的組態可視化
本項目採用2.5D的形式進行可視化展現，2.5D技術使用三維建模方式，構創建體效果，同時增長了2D的光照和2D各類方法，系統的功能具備很好的延展性。系統在項目中能夠進行數據結構更換、tips效果優化、選中效果、設備告警、油箱動態油量顯示、油機開關機功能，支持自動佈局多種佈局方式，可進行接口對接，支持基站多設備的添加，設備基本信息的查看等功能。
7 具體實現
7.1 設計時
7.1.1 表單輸入
基於HTML5進行表單輸入，前端給ui打上id標籤
<li data-cIndex='16'><img src="./images/icons/door.png" class="CNicons" alt=""><a id="a_16" class=" controlName" group="">門禁</a></li> <tr id="tr_i_DoorState" style=" display:none;"> <td></td> <td class="txt i_attrName">門狀態點</td> <td class="txt"> <input type="text" id="i_DoorState" name="DoorState" style="width:150px;"> </td> </tr> <tr id="tr_i_OpenStateValue" style=" display:none;"> <td></td> <td class="txt i_attrName">門打開值</td> <td class="txt"> <select id="i_OpenStateValue" name="openValue"> <option value="0">0</option> <option value="1">1</option> </select> </td> </tr> <tr id="tr_i_OpenDoorState" style=" display:none;"> <td></td> <td class="txt i_attrName">開門控制點</td> <td class="txt"> <input type="text" id="i_OpenDoorState" name="OpenDoorState" style="width:150px;"> </td> </tr> <tr id="tr_i_linkdeviceid" style=" display:none;"> <td></td> <td class="txt" id="td_i_linkdeviceid_tit">聯動點</td> <td class="txt i_attrName"> <input id="i_linkdeviceid" class="input0" value="" style="width:150px;"> </td> </tr> <tr id="tr_i_CardReader" style=" display:none;"> <td></td> <td class="txt" id="td1">讀頭</td> <td class="txt i_attrName"> <input id="i_CardReader" name="CardReader" class="input0" value="" style="width:150px;"> </td> </tr>
7.1.2 js腳本
根據id，經過js來面向dom元素編程，若是時vue,angular,react則直接可綁定數據，面向數據編程。經過js來對拖動，點擊，修改，保存等事件進行編程；
//門狀態點
$('#i_DoorState').focus(function(){
var stateName = $(this).attr('name');
selectDevState(stateName);
});
//門打開控制點
$('#i_OpenDoorState').focus(function(){
var stateName = $(this).attr('name');
selectDevState(stateName);
});
//讀頭
$('#i_CardReader').focus(function(){
var stateName = $(this).attr('name');
selectDevState(stateName);
});
else if(devIndex==16){//門禁
$('#tr_i_OpenStateValue').show();
$('#tr_i_DoorState').show();
$('#tr_i_OpenDoorState').show();
$('#tr_i_CardReader').show();
如，以下保存點擊事件可保存配置屬性成json，生成json文件或者post給後臺服務加載到數據庫。
$('#a_save').click(function(){
var row = $('#MonitoringSiteTable').datagri('getSelected');
if(row){
var devArr= $('.dev');
for(var i=0;i<devArr.length;i++){
if(devArr.eq(i).css('outline-style'!=='none'){
var upId = devArr.eq(i).attr('id');
switch(stateName){
case 'devname':
$('#i_deviceid').val(rowdevname);
deviced[upId].devname=rowdevname;
if(deviced[upId].devIndex==8){
var txt = textShowMod(upId);
var textID = 'p'+upI+'img';
$('#'+textID).text(txt)css({color:deviced[upId]fontColor});
textAlign(devId);
}else if(deviced[upId]devIndex==14){
devArr.eq(i).find('span')text(row.devname).css{color:'#555'display:'inline-block'position:'absolute'bottom:'10px'});
}else if(deviced[upId]devIndex==5){
moniShowMode(upId);
var textID = 'p'+upI+'img';
$('#'+textID).css{color:deviced[upId]fontColor});
}else if(deviced[upId]devIndex==15){
devArr.eq(i).find('span')text(row.devname).css{color:'#555'position:'absolute'bottom:'10px',left:'0px'};
}
break;
case 'OpenDoorState':
$('#i_OpenDoorState').val(rowdevname);
deviced[upId].OpenDoorState =row.devname;
break;
case 'DoorState':
$('#i_DoorState').val(rowdevname);
deviced[upId].DoorState = rowdevname;
break;
case 'CardReader':
$('#i_CardReader').val(rowdevname);
deviced[upId].CardReader =row.devname;
break;
case 'linkorgid':
$('#i_linkorgid').val(roworgname);
deviced[upId].linkorgid=roworgname;
break;
7.2 運行時
7.2.1 前端給ui打上id標籤
<div id="centerTabs" class="easyui-tabs" style="width:100%;height:100%;"> <div title="組態圖設計" id="contentBox" data-options="closable:false" style="padding:4px;position:relative;"> <div id="resizeBox" style="position:relative;width:100%;height:100%;z-index:2;border:1px solid #ccc;overflow:hidden;" data-Box="bgBox"></div> </div> <div title="預覽" data-options="closable:false" style="padding:4px;position:relative;" id="previewBox"> </div> </div>
7.2.2 js腳本
須要先從數據庫或者*.json加載控件的配置數據，來展示完成的控件屬性，而後去對應的後臺接口，或者devicedata.json（後臺服務生成），來更新當前設備的實時數據。
定時刷新設備實時數據，其他定時刷新實時數據的代碼太長，這裏不粘貼，自行補全。
//預覽
$('#centerTabs').tabs({
onSelect:function(title,index){
if(title=="預覽"){
preview();
}else if(title=="組態圖設計"){
clearInterval(intervalId);
if($('.video').length>0){
var video = $('.video').eq(0);
$('#resizeBox').append(video);
var devId = video.attr('id');
video.css('outline-style',deviced[devId].outlineStyle);
if(video.css('outline-style')!=='none'){
$('#'+devId+'img').show();
}
$('#'+devId).resizable({
disabled:false
});
deviced[devId].ocx.DisConnectAllChannel();
}else if($('.chart').length>0){
var chart = $('.chart');
for(var j=0;j<chart.length;j++){
$('#resizeBox').append(chart.eq(j));
var devId = chart.eq(j).attr('id');
chart.eq(j).css('outline-style',deviced[devId].outlineStyle);
$('#'+devId).resizable({
disabled:false
});
}
}
$('#previewBox').empty();
for(var i in deviced){
if(deviced[i].devIndex==14){
deviced[i].option.series[0].data[0].value=50;
deviced[i].Chart = echarts.init(document.getElementById(i+'img'));
deviced[i].Chart .setOption(deviced[i].option,true);
}else if(deviced[i].devIndex==15){
deviced[i].dial = new canvasPanel();
deviced[i].dial.bgColor = deviced[i].panelColor;
deviced[i].dial.splitNum = deviced[i].lineValue;
deviced[i].dial.MaxNum=parseInt(deviced[i].dmaxvalue);
deviced[i].dial.MinNum = parseInt(deviced[i].dminvalue);
deviced[i].dial.init(i+'img');
}else if(deviced[i].devIndex==24){
deviced[i].data = [];
clearInterval(deviced[i].chartInterval);
}
}
}
}
});
8 小結
- 設計時，根據配置屬性，生成配置json文件，或者配置後臺服務，經過webapi接口持久化配置到db；
- 運行時，從數據庫或者配置文件來生成定製的控件，根據配置參數來加載實時json或者去實時接口ajax或者websocket拿數據；
版權聲明：本文爲博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接和本聲明。 本文連接：http://www.javashuo.com/article/p-nuuncpxi-nx.html
- 1. TWaver可視化軟件（七） WEB組態可視化軟件
- 2. Web前端組態軟件(可視化)
- 3. Web前端組態軟件(可視化繪圖編輯器)
- 4. Web前端組態軟件--------目前開源可用的可視化編輯軟件
- 5. darknet loss可視化軟件
- 6. smartClient 2--可視化組件
- 7. vue可視化組件
- 8. empire-web可視化
- 9. TWaver可視化軟件（八）工業可視化 下
- 10. TWaver可視化軟件（六）工業可視化 上
- 更多相關文章...
- • XSL-FO 軟件 - XSL-FO 教程
- • Web 語義化 - 網站建設指南
- • Git可視化極簡易教程 — Git GUI使用方法
- • IntelliJ IDEA安裝代碼格式化插件
-
每一个你不满意的现在，都有一个你没有努力的曾经。