Web SCADA系统主要通过组合各种物联网硬件，可对设备开关、模拟量及其他设备数据进行采集，通过配置传感器，还可以实现对设备温度、震动及环境湿度等多种数据进行采集；通过简单配置，用户既可以在工控机上实现数据监测和设备控制，也可通过手机、平板等联网终端进行远程监控；
对于复杂逻辑则通过二次开发实现，通过最新的Web技术(JavaScript、HTML5、JQuery、CSS3、Ajax及最新的JS框架库等）等进行复杂逻辑的处理，通过引入ThreeJS库，可完美的支持3D漫游等效果,让工程师通过简单的托拉拽实现对设备的数据采集、监视及控制；
对于有二次开发能力的企业或个人则让其更关注业务逻辑，无需关注底层的数据采集过程，将采集到的数据封装成JS包，通过引用JS包可通过简单的几个命令获取到数据进而进行其他逻辑处理，如GetTag(“TagName”)、SetTag(“TagName”)等进行逻辑处理，WEB SCADA可应用于智能制造、数字工厂、设备智能化、环境与能源、智慧楼宇、智慧热网、智慧水务、智慧管廊、智慧管网，行业涉及热力、自来水、污水处理、化工、中石油、电力、楼宇、消防、矿厂、制冷、路灯远控、数字工厂、汽车、电信、高铁楼宇、钢厂等行业;
Web SCADA逻辑架构图：
如下是通过简单的JS代码实现底层数据的获取与逻辑处理:
<body style="background:#778899">
<div id="idButtons" class="paragraph"></div>
<h1 style="color:#FFFAFA" >配电室1参数报表</h1>
<div id="idTimestamp" class="paragraph"></div>
<table width="100%" style="color:#00008B" ； text-align:center>
<tr>
<th>电表</th>
<th colspan="8">PWM001
<th colspan="8">PWM002
<th colspan="8">PWM003
<th colspan="8">PWM004
<th colspan="8">PWM005
</tr>
<tr>
<th>参数</th>
<th>A向电流</th>
<th>B向电流</th>
<th>C向电流</th>
<th>A向电压</th>
<th>B向电压(V)</th>
<th>C向电压(V)</th>
<th>功率因数</th>
<th>总电度</th>
<th>A向电流</th>
<th>B向电流</th>
<th>C向电流</th>
<th>A向电压</th>
<th>B向电压(V)</th>
<th>C向电压(V)</th>
<th>功率因数</th>
<th>总电度</th>
<th>A向电流</th>
<th>B向电流</th>
<th>C向电流</th>
<th>A向电压</th>
<th>B向电压(V)</th>
<th>C向电压(V)</th>
<th>功率因数</th>
<th>总电度</th>
<th>A向电流</th>
<th>B向电流</th>
<th>C向电流</th>
<th>A向电压</th>
<th>B向电压(V)</th>
<th>C向电压(V)</th>
<th>功率因数</th>
<th>总电度</th>
<th>A向电流</th>
<th>B向电流</th>
<th>C向电流</th>
<th>A向电压</th>
<th>B向电压(V)</th>
<th>C向电压(V)</th>
<th>功率因数</th>
<th>总电度</th>
</tr>
<tr>
<th>时间/单位</th>
<th>(A)</th>
<th>(A)</th>
<th>(A)</th>
<th>(V)</th>
<th>(V)</th>
<th>(V)</th>
<th>(PF)</th>
<th>(Kwh)</th>
<th>(A)</th>
<th>(A)</th>
<th>(A)</th>
<th>(V)</th>
<th>(V)</th>
<th>(V)</th>
<th>(PF)</th>
<th>(Kwh)</th>
<th>(A)</th>
<th>(A)</th>
<th>(A)</th>
<th>(V)</th>
<th>(V)</th>
<th>(V)</th>
<th>(PF)</th>
<th>(Kwh)</th>
<th>(A)</th>
<th>(A)</th>
<th>(A)</th>
<th>(V)</th>
<th>(V)</th>
<th>(V)</th>
<th>(PF)</th>
<th>(Kwh)</th>
<th>(A)</th>
<th>(A)</th>
<th>(A)</th>
<th>(V)</th>
<th>(V)</th>
<th>(V)</th>
<th>(PF)</th>
<th>(Kwh)</th>
<tr>
<td data-igrx='{"attr":"log","tag":"app.currentTime"}'>Time</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM001.I_PhA"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM001.I_PhB"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM001.I_PhC"}'>####</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM001.U_PhA"}'>####</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM001.U_PhB"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM001.U_PhC"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM001.PF_Total"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM001.WH_Total"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM002.I_PhA"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM002.I_PhB"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM002.I_PhC"}'>####</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM002.U_PhA"}'>####</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM002.U_PhB"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM002.U_PhC"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM002.PF_Total"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM002.WH_Total"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM003.I_PhA"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM003.I_PhB"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM003.I_PhC"}'>####</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM003.U_PhA"}'>####</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM003.U_PhB"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM003.U_PhC"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM003.PF_Total"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM003.WH_Total"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM004.I_PhA"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM004.I_PhB"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM004.I_PhC"}'>####</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM004.U_PhA"}'>####</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM004.U_PhB"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM004.U_PhC"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM004.PF_Total"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM004.WH_Total"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM005.I_PhA"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM005.I_PhB"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM005.I_PhC"}'>####</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM005.U_PhA"}'>####</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM005.U_PhB"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM005.U_PhC"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM005.PF_Total"}'>###.#</td>
<td data-igrx='{"attr":"log","tag":"opc.kepi.PWM005.WH_Total"}'>###.#</td>
</tr>
</table>
</body>
<script type='text/javascript'src='system/scripts/igrX.js'></script>
var getTotal = getTag("WH_Total")
<script type="text/javascript">
var rpt = igrx.report();
getTotal
</script>通过引入igrX.js库，通过JS则可实时获取对应的TAG值，如{“attr”:"log","tag":"opc.kepi.PWM005.WH_Total"} 则代表当前属性进行LOG数据存储，且获取方式是通过OPC采集，采集的点为WH_Total；
实时图表分析：
通过IDE环境将指定的采集点设置为曲线数据监控，如下图：
最终的展现效果为如下：
单图表实现代码解析：
通过简单的配置系统生成对应的JS代码，技术人员可对JS代码进行相应的调整及逻辑处理；
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Plot</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="system/styles/igrX.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" media="screen, print" href="system/styles/plot.compat.css" />
<![endif]-->
</head>
<body>
<div class='trend'
data-trend='{"pen":
[{"enabled":false,
"max":100.000000,
"min":0.000000,
"name":"Temperature",
"pens":[
{"format":"#.##","name":"Temp Cook","tag":"temperature_cook"},
{"format":"#.##","name":"Effluent Temp","tag":"effTemp"}
],"unit":"°C"},
{"enabled":false,"max":100.000000,"min":0.000000,"name":"Flowrate",
"pens":[{"format":"#.###","name":"Effluent Flow","tag":"effFlow"},
{"format":"#.###","name":"Influent Flow 1","tag":"infFlow1"},
{"format":"#.###","name":"Influent Flow 2","tag":"infFlow2"}],"unit":"m3/hr"},
{"enabled":false,"max":14.000000,"min":0.000000,"name":"Acidity",
"pens":[{"format":"##.#","name":"Effluent pH","tag":"effPH"}],"unit":"pH"},
{"enabled":false,"max":120.000000,"min":0.000000,"name":"Pressure",
"pens":[{"format":"##.##","name":"Cooking Pressure","tag":"pressure_cook"}],"unit":"kPa"},
{"enabled":false,"max":30000.000000,"min":0.000000,"name":"ModSim",
"pens":[{"format":"#","name":"HR40001","tag":"HR40001"},
{"format":"#","name":"HR40002","tag":"HR40002"},
{"format":"#","name":"HR40003","tag":"HR40003"}],"unit":"unit"},
{"enabled":false,"max":70.000000,"min":-10.000000,"name":"Miscellaneous",
"pens":[{"format":"0","name":"Time in Second","tag":"timeSecond"},
{"format":"0","name":"Time in Minute","tag":"timeMinute"},
{"format":"0","name":"Time in Hour","tag":"timeHour"},
{"format":"0","name":"Time in Day","tag":"timeDay"}],"unit":"-"}],
"opt":{"axisColor":"#555555","backgroundColor":"white",
"borderColor":"#333333","borderWidth":0,"disableNavigation":0,
"hideParameter":0,"legendPosition":"nw","length":600,"limit":0,
"lineWidth":2,"lograte":5000,"maxPen":100,"min-zoom":20000,"refLineColor":"black",
"showLegend":0,"showMarker":0,"title":"Temperature","x-tickColor":"#dddddd","y-tickColor":"#dddddd"}}'></div>
</body>
<script type="text/javascript" src="system/scripts/igrX.js"></script>
</html>对物联网技术感兴趣的伙伴们，欢迎留言讨论、共同交流学习，进步!