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

最新推荐文章于 2024-04-30 11:27:38 发布
最新推荐文章于 2024-04-30 11:27:38 发布
阅读量2.2k 收藏 2
点赞数 1
文章标签： 前端 物联网 iot html5 云计算
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73346015/article/details/126868458
版权

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

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

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

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

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

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

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

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

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

对于维护的采集点，可通过简单的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>

对物联网技术感兴趣的伙伴们，欢迎留言讨论、共同交流学习，进步! 

WebScada
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
基于HTML5的电力接线图——SCADA应用
delishcomcn的博客
07-21 333
传统的数据绑定有单向绑定和双向绑定的概念，但 HT 系统的设计模式使得绑定更加简化易于理解，HT 只有一个 DataModel 数据模型， 绑定 DataModel 的图形组件并没有组件内部的其他数据模型，所以组件都是如实根据 DataModel 来呈现界面效果，因此当用户拖拽图元移动时， 本质也是修改了数据模型中 Node 的 position 位置值，而该属性变化触发的事件通过模型再次派发到图形组件，引发图形组件根据新的模型信息刷新界面。想了解所有的 func 的使用可以参考这个例子。
什么是Web SCADA系统？
专注一款Web技术的SCADA平台的研发、应用与推广
12-26 2669
SCADA(Supervisory Control And Data Acquisition)系统，即数据采集与监视控制系统
Web SCADA 低代码工业组态数字孪生平台
最新发布
Hightopo的博客
04-30 889
接过时代转型升级的接力棒，作为新质生产力的图扑软件，无论在设计工业组态界面，还是数字孪生可视化界面、GIS、VR、BIM 等多领域的设计成果日益卓越，设计的过程中堪比打造一件件艺术品。而设计的精进，得益于技术的不断革新和孜孜不倦的自研创新精神。
轻量型 Web SCADA 组态软件 TopLink
DLIOTOPO的博客
04-13 992
图扑物联 http://www.iotopo.com/ 发布了一款工业物联网边缘侧应用场景的轻量型 Web SCADA 组态软件 Iotopo TopLink。
一、开源且好用的WebScada-OSHMI介绍
热门推荐
linhan007的专栏
07-09 1万+
OSHMI是一种基于现代开源HTML5的HMI，它是为变电站自动化而从头开始构思的，但它可以用于任何其他自动化领域，如工业生产、楼宇系统、物联网等。 本人将逐步介绍OSHMI的安装、点表和协议的配置、图形创建、脚本编写等。 它指导思想是通过集成现成的开源技术，如Nginx、PHP、Lua、SQLite、Chromium、Inkscape等，使系统...
Web Scada云组态真的方便
cxwall的专栏
09-12 1501
web组态预览图 web组态在线编辑 绑定变量让图片显示具有交互性 设置水流线具有逻辑性，根据不同的条件可以正转，反转或停止 丰富的图库选择。 这块是公有云的一个基本模块，现在也已经独立出来了。采用svg+angular+typescript+material ui+dotnet core等相关技术。 关于公有云,有这几个基本模块：网关程序、云组态、APP等模块。网关程序具有采集数据的功能，是一个简易版的KepServer Ex。它具有跨平台，易扩展的功能。云组态（上面的截...
介绍一款轻量型 Web SCADA 组态软件
DLIOTOPO的博客
09-08 515
组态是指不需要编写计算机程序、通过类似“配置”的方式完成工业应用开发。这些应用可用于工厂的制造车间的PMC（生产过程管理），Andon（工台安全生产），工艺流程监控，设备反控，设备运维，生产看板等场景。组态是所有制造企业必不可少的工业软件系统。
SPICE-Web-based-SCADA-system-:监控集成控制系统 (SCADA)
05-29
SPICE（基于 Web 的 SCADA 系统） SPICE (SuPervisor & Integrated Control Enviroment) 服务器是 SCADA 系统的 Javascript/PHP/SQLite 实现。 默认配置的 SCADA 屏幕展示了 SPICE 服务器提供的一些 SCADA 系统功能...
汉光HOVA-SCADA-WEB电力监控系统 变配电电力监控系统.pdf
06-16
HV-SCADA-WEB版电力监控系统软件，为用户提供一个灵活部署，实时在线，24小时随时随地访问管理的可靠，灵活且高性能的电力监控方案，帮助用户实现在线监测，自动预警告警，提前做出预防式维护，减少断电时间，提高...
基于HTML5 Canvas的3D动态Chart图表的示例
12-14
在本文中，我们将探讨如何使用Canvas实现3D动态图表，特别是在工业SCADA系统和电信网管领域的应用。 【HT for Web 3D】HT for Web 是一个强大的可视化开发框架，它提供了丰富的3D图形组件和工具，使得开发者能够...
WEB SCADA平台的应用总结
02-01
WEB SCADA平台是一种基于互联网的监控与数据采集系统，它结合了物联网(IoT)、SCADA(监控与数据采集)和低代码开发的理念，旨在为各行业提供灵活且易于实施的解决方案。本文将深入探讨WEB SCADA在不同场景中的应用，并...
HTML5网页及微信调用监控直播
11-24
HTML5网页及微信调用监控直播
基于Web的SCADA系统设计的几项关键技术.rar
10-09
基于Web的SCADA系统设计的几项关键技术rar,WEB技术,SCADA　，实时数据库，Ｂ／Ｓ，网络控制器
SCADA风机中央监控系统-PPT课件.ppt
11-24
SCADA风机中央监控系统是基于Windows操作系统的风机监控系统，旨在提供一个功能强大、可靠的风机监控平台。该系统具有实时数据查询、系统控制、日志记录、权限管理、风机参数查询、故障查询、统计分析等功能。 系统...
数采系统SCADA如何批量快速采集PLC数据
JamesChan的专栏
02-15 5731
背景基础 数据采集与监视控制系统 SCADA(Supervisory Control And Data Acquisition)，作为现代基础的工业控制系统，已经在工业自动化领域得到了广泛的应用。 SCADA主要由三方面组成 数据采集 数据分析 设备控制 数据分析需要大大增加 现代自动化工业控制，对工业自动化的数据量，实时性，以及数据深度的要求逐渐增加，传统的SCADA系统已经开始捉襟见肘了。 问题出现的原因，主要是传统的SCADA系统，基于当时的弱数据分析考量，同时可连接PLC的编程平台比较
php网络调试助手源代码,基于CSerialPort修改类的串口调试助手源代码
weixin_28736145的博客
03-16 198
【实例简介】本串口工具集成目前多数串口工具的优秀功能于一身，采用CSerialPort类进行编写，并在此基础上对该类进行了改进。本工具免费试用，永不过期。并且本着奉献的精神，公开本串口工具的源代码，希望广大用户反馈意见或建议。源码地址:code.csdn.net/itas109/serialport_itas109博客地址：blog.csdn.net/itas109Email:itas109@qq...
基于 HTML5 的电力接线图 SCADA 应用
HT for Web 3D
01-17 2662
在电力、油田燃气、供水管网等工业自动化领域 Web SCADA 的概念已经提出了多年，早些年的 Web SCADA 前端技术大部分还是基于 Flex、Silverlight 甚至 Applet 这样的重客户端方案，在 HTML5 流行前 VML 和 SVG 算是真正纯种 Web 方案也是有不少应用，近些年随着 HTML5 的流行，加上移动终端以及浏览器对 HTML5 支持的普及，越来越多新项目开始...
图扑 Web SCADA 零代码组态水泥生产工艺流程 HMI
qq_28404179的博客
11-21 558
利用图扑软件低代码平台进行窑系统运行情况监控、生料质量控制、熟料质量控制、煤粉质量控制等。
基于HTML5的Web SCADA工控移动应用
dotedy的博客
12-30 942
在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年，早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案，在HTML5流行前VML和SVG算是真正纯种Web方案也是有不少应用，近些年随着HTML5的流行，加上移动终端对HTML5支持的普及，越来越多新项目开始采用真正纯HTML5的方案，更具体的说大数据量应用
基于 WebGL 的 HTML5 3D SCADA 主站系统
HT for Web 3D
03-07 687
这个例子的初衷是模拟服务器与客户端的通信，我把整个需求简化变成了今天的这个例子。3D 的模拟一般需要鹰眼来辅助的，这样找产品以及整个空间的概括会比较明确，在这个例子中我也加了，这篇文章就算是我对这次项目的一个总结吧。例子链接： http://www.hightopo.com/demo/3DEdgeFlow/index.html本文动图： 进入正题，整个例子用了两百多行的代码来实现的，这就是我喜欢用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WebScada

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值