基于HTML5+CSS3的Web Scada的应用场景

        Web SCADA系统主要通过组合各种物联网硬件，可对设备开关、模拟量及其他设备数据进行采集，通过配置传感器，还可以实现对设备温度、震动及环境湿度等多种数据进行采集；通过简单配置，用户既可以在工控机上实现数据监测和设备控制，也可通过手机、平板等联网终端进行远程监控；

        对于复杂逻辑则通过二次开发实现，通过最新的Web技术(JavaScript、HTML5、JQuery、CSS3、Ajax及最新的JS框架库等）等进行复杂逻辑的处理，通过引入ThreeJS库，可完美的支持3D漫游等效果,让工程师通过简单的托拉拽实现对设备的数据采集、监视及控制；

       对于有二次开发能力的企业或个人则让其更关注业务逻辑，无需关注底层的数据采集过程，将采集到的数据封装成JS包，通过引用JS包可通过简单的几个命令获取到数据进而进行其他逻辑处理，如GetTag(“TagName”)、SetTag(“TagName”)等进行逻辑处理，WEB SCADA可应用于智能制造、数字工厂、设备智能化、环境与能源、智慧楼宇、智慧热网、智慧水务、智慧管廊、智慧管网，行业涉及热力、自来水、污水处理、化工、中石油、电力、楼宇、消防、矿厂、制冷、路灯远控、数字工厂、汽车、电信、高铁楼宇、钢厂等行业;

Web SCADA逻辑架构图：

 

如下是通过简单的JS代码实现底层数据的获取与逻辑处理:

 
        

        
配电室1参数报表
        

        

         

            
电表
            
PWM001
            
PWM002
            
PWM003
            
PWM004
            
PWM005
         
            

                
参数
                
A向电流
                
B向电流
                
C向电流
                
A向电压
                
B向电压(V)
                
C向电压(V)
                
功率因数
                
总电度
                
                
                
A向电流
                
B向电流
                
C向电流
                
A向电压
                
B向电压(V)
                
C向电压(V)
                
功率因数
                
总电度
                
                
                
A向电流
                
B向电流
                
C向电流
                
A向电压
                
B向电压(V)
                
C向电压(V)
                
功率因数
                
总电度
                
                
                
A向电流
                
B向电流
                
C向电流
                
A向电压
                
B向电压(V)
                
C向电压(V)
                
功率因数
                
总电度
                
               
                
A向电流
                
B向电流
                
C向电流
                
A向电压
                
B向电压(V)
                
C向电压(V)
                
功率因数
                
总电度
                
         
            

                
时间/单位
                
(A)
                
(A)
                
(A)
                
(V)
                
(V)
                
(V)
                
(PF)
                
(Kwh)
                                
                
(A)
                
(A)
                
(A)
                
(V)
                
(V)
                
(V)
                
(PF)
                
(Kwh)
                
                
(A)
                
(A)
                
(A)
                
(V)
                
(V)
                
(V)
                
(PF)
                
(Kwh)
               
                
(A)
                
(A)
                
(A)
                
(V)
                
(V)
                
(V)
                
(PF)
                
(Kwh)
                
                
(A)
                
(A)
                
(A)
                
(V)
                
(V)
                
(V)
                
(PF)
                
(Kwh)
           
            

                
Time
                
                
###.#
  
                
###.#
   
                
####
                
####
                
###.#
                
###.#
                
###.#
                
###.#
               
                
###.#
  
                
###.#
   
                
####
                
####
                
###.#
                
###.#
                
###.#
                
###.#
               
                
###.#
  
                
###.#
   
                
####
                
####
                
###.#
                
###.#
                
###.#
                
###.#
                
                
###.#
  
                
###.#
   
                
####
                
####
                
###.#
                
###.#
                
###.#
                
###.#
                
                
###.#
  
                
###.#
   
                
####
                
####
                
###.#
                
###.#
                
###.#
                
###.#
                
                
            
        
    
    
    var getTotal = getTag("WH_Total")
    

通过引入igrX.js库，通过JS则可实时获取对应的TAG值，如{“attr”:"log","tag":"opc.kepi.PWM005.WH_Total"} 则代表当前属性进行LOG数据存储，且获取方式是通过OPC采集，采集的点为WH_Total；

实时图表分析：

       通过IDE环境将指定的采集点设置为曲线数据监控，如下图：

最终的展现效果为如下：

 单图表实现代码解析：

通过简单的配置系统生成对应的JS代码，技术人员可对JS代码进行相应的调整及逻辑处理；

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