基于HTML5+CSS3的Web Scada的应用场景-水厂监控-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于HTML5+CSS3的Web Scada的应用场景-水厂监控。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Web SCADA在水利行业应用场景较多，通过对设备增加物联网关，在网关中实现边缘计算后，将有处理后的数据通过4G信号传输至Web SCADA平台，主要可实现对供排水、加压站、泵房等进行监测及联动控制、远程监控、能源管理、数据采集及报警等管理。节省大量人工、实时监控供排水的合格率，通过对设备能源的监控，进行峰、谷、平的有效调控，实现各水厂及加压站的节能降耗。

第一步：将各种数据采集点通过各种IO驱动进行维护，如下图：

第二步：监控画面，如下图：

tgmtcm,前端,物联网,iot,html5,云计算

第三步：对各种设备进行数据采集点逐一绑定：

tgmtcm,前端,物联网,iot,html5,云计算

第三步：构建系统功能菜单并将准备的监控画面与之绑定，如下图：

tgmtcm,前端,物联网,iot,html5,云计算

第四步：运行WEB SCADA平台，实现对设备数据的采集、监控及控制、能源及单耗的综合分析等；

tgmtcm,前端,物联网,iot,html5,云计算

基于实时采集数据的图表对比分析：

tgmtcm,前端,物联网,iot,html5,云计算

基于实时采集数据的能源分析：

tgmtcm,前端,物联网,iot,html5,云计算

能源数据分析报表代码分析：

对于维护的采集点，可通过简单的HTML及JS代码进行实时数据的展示，能源数据报表代码如下：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>IntegraXor Report</title>
        <link rel="stylesheet" type="text/css" href="system/styles/igrX.css" />
		<style type="text/css">
			.reportDiv{
				position: absolute;
				top: 480px;
				left: 2%;
				right: 2%;
				width: 1200px;
				z-index:0;
			}
			.plotcontainer{
				position: absolute;
				top: 50px;
				width:46%;
				height:325px;
			}
			.plottitle{
				position: absolute; 
				width:40%;
			}
			.background-plot{
				width:100%;
				height:380px;
				top:90px;
				position: absolute;
				background-color: Lavender;
				z-index:1;
			}
			.background-header{
				position: absolute;
				width:100%;
				background-color: white;
				z-index:1;
			}
			.legend{
				position: relative;
				margin-top: -375px;
				margin-left: 20px;
			} 
			#div1{
				display:inline-block;
				zoom: 1;
				*display:inline;
				vertical-align:top;
				left:inherit;
				float:left;
			}
			#div2{
				display:inline-block;
				zoom: 1;
				*display:inline;
				width:900px;
				overflow-x:scroll;
				vertical-align:top;
				left:inherit;
				float:left;
			}
			td, th{
				height:15px;
			}
		</style>
    </head>
    <body>
		<div class='background-header'>
			<div id="idButtons" class="paragraph"></div>
			<h1>Power Consumption Summary</h1>
			<div id="idTimestamp" class="paragraph"></div>
		</div>
		<div class="background-plot" style="min-width:800px">
			<h1 class='plottitle' style='left:5%;'>百分比图</h1>
			<div class='plotcontainer' data-igrx='{"attr":"cht","type":"pie",
				"tag":[ "PlantA", "buswayLV", "equipUPS", "genUPS", "PlantB", "DataCenter", "ConnectedLoads", "chillerUnits", "chillerCP", "MAU", "PCW", "CWP", "CWSP", "CTF", "CTMF", "CWPP", "RCU", "AHU", "FFU", "scrubberExhaust", "SRP", "generalExhaust", "solventExhaust", "WWTP", "PWP", "TCM", "TGM", "PVP", "lighting", "boiler", "DWP", "CCTV", "scada"] }' style="left: 2%;"></div>
			<h1 class='plottitle' style='left:55%;'>日能源图</h1>
			<div class='plotcontainer' data-igrx='{"attr":"cht","type":"bar",
				"tag":[ "totalConsumption", "PlantA", "buswayLV", "equipUPS", "genUPS", "PlantB", "DataCenter", "ConnectedLoads", "chillerUnits", "chillerCP", "MAU", "PCW", "CWP", "CWSP", "CTF", "CTMF", "CWPP", "RCU", "AHU", "FFU", "scrubberExhaust", "SRP", "generalExhaust", "solventExhaust", "WWTP", "PWP", "TCM", "TGM", "PVP", "lighting", "boiler", "DWP", "CCTV", "scada"] }' style="left: 52%;"></div>
		</div>
		<div class='reportDiv'>
			<table width="60%">
				<tr>
					<th style="visibility:hidden;"></th>
					<th style="visibility:hidden;"></th>
					<td data-igrx='{"attr":"log","tag":"app.currentTime"}'>Time</td>
					<td style="visibility:hidden;"></td>
				</tr>
				<tr>
					<th colspan='2'>系统/设备</th>
					<td data-igrx='{"attr":"log","tag":"dummyText"}'>xxx</td>
					<td>Average</td>
				</tr>
				<tr>
					<th colspan='2'>总能源图</th>
					<td data-igrx='{"attr":"log","tag":"totalConsumption"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"totalConsumption"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>区域 A</th>
					<td data-igrx='{"attr":"log","tag":"PlantA"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"PlantA"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th rowspan="3">IGRX Module Tools</th>
					<th>Busway LV Switchboards</th>
					<td data-igrx='{"attr":"log","tag":"buswayLV"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"buswayLV"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Equipment UPS</th>
					<td data-igrx='{"attr":"log","tag":"equipUPS"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"equipUPS"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Gen-UPS</th>
					<td data-igrx='{"attr":"log","tag":"genUPS"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"genUPS"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>区域 B</th>
					<td data-igrx='{"attr":"log","tag":"PlantB"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"PlantB"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>IGRX Datacenter</th>
					<td data-igrx='{"attr":"log","tag":"DataCenter"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"DataCenter"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>IGRX Connected Loads ( Static UPS Data Center)</th>
					<td data-igrx='{"attr":"log","tag":"ConnectedLoads"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"ConnectedLoads"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th rowspan="12">HVAC System</th>
					<th>Chiller Units</th>
					<td data-igrx='{"attr":"log","tag":"chillerUnits"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"chillerUnits"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Chiller Control Panel</th>
					<td data-igrx='{"attr":"log","tag":"chillerCP"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"chillerCP"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>MAU</th>
					<td data-igrx='{"attr":"log","tag":"MAU"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"MAU"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Process Cooling Water</th>
					<td data-igrx='{"attr":"log","tag":"PCW"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"PCW"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Condenser Water Pumps</th>
					<td data-igrx='{"attr":"log","tag":"CWP"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"CWP"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Chilled Water Secondary Pump</th>
					<td data-igrx='{"attr":"log","tag":"CWSP"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"CWSP"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Cooling Tower Fans</th>
					<td data-igrx='{"attr":"log","tag":"CTF"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"CTF"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Cooling Tower Makeup Fans</th>
					<td data-igrx='{"attr":"log","tag":"CTMF"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"CTMF"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Chilled Water Primary Pump</th>
					<td data-igrx='{"attr":"log","tag":"CWPP"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"CWPP"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>RCU</th>
					<td data-igrx='{"attr":"log","tag":"RCU"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"RCU"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>AHU</th>
					<td data-igrx='{"attr":"log","tag":"AHU"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"AHU"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>FFU</th>
					<td data-igrx='{"attr":"log","tag":"FFU"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"FFU"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th rowspan="4">Exhaust System</th>
					<th>Scrubber Exhaust</th>
					<td data-igrx='{"attr":"log","tag":"scrubberExhaust"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"scrubberExhaust"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Scrubber Recirculating Pumps</th>
					<td data-igrx='{"attr":"log","tag":"SRP"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"SRP"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>General Exhaust</th>
					<td data-igrx='{"attr":"log","tag":"generalExhaust"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"generalExhaust"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>Solvent Exhaust</th>
					<td data-igrx='{"attr":"log","tag":"solventExhaust"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"solventExhaust"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>WWTP</th>
					<td data-igrx='{"attr":"log","tag":"WWTP"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"WWTP"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>Process Water Pump</th>
					<td data-igrx='{"attr":"log","tag":"PWP"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"PWP"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th rowspan="2">TCM/TGM</th>
					<th>TCM</th>
					<td data-igrx='{"attr":"log","tag":"TCM"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"TCM"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th>TGM</th>
					<td data-igrx='{"attr":"log","tag":"TGM"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"TGM"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>PVP</th>
					<td data-igrx='{"attr":"log","tag":"PVP"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"PVP"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>Lighting/Power</th>
					<td data-igrx='{"attr":"log","tag":"lighting"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"lighting"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>Boiler</th>
					<td data-igrx='{"attr":"log","tag":"boiler"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"boiler"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>Domestic Water Pump</th>
					<td data-igrx='{"attr":"log","tag":"DWP"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"DWP"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>Security/CCTV</th>
					<td data-igrx='{"attr":"log","tag":"CCTV"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"CCTV"}'>#,###,##0.#0</td>
				</tr>
				<tr>
					<th colspan='2'>IntegraXor Scada/PLC</th>
					<td data-igrx='{"attr":"log","tag":"scada"}'>#,###,##0.#0</td>
					<td data-igrx='{"attr":"avg","tag":"scada"}'>#,###,##0.#0</td>
				</tr>
			</table>
		</div>
		<div style="visibility:hidden; height:100px;"></div>
    </body>

    <script type="text/javascript" src="system/scripts/igrX.js"></script>
    <script type="text/javascript">
    var option = {
		'horizontal': true
	};

    var rpt = igrx.report( option );
    
    </script>
</html>

对物联网技术感兴趣的伙伴们，欢迎留言讨论、共同交流学习，进步! 文章来源地址https://www.toymoban.com/news/detail-819378.html

到了这里，关于基于HTML5+CSS3的Web Scada的应用场景-水厂监控的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！