Realtime Monitoring Mes System In Production Based On VueJS Framework

Manufacturing Execution System(MES)is an important part of intelligent manufacturing.At present,the function of manufacturing execution system of the domestic medium-sized enterprises in Web application is inadequate,and there are also some problems in real-time and compatibility.At the same time as the development of the Internet,the diversified interactive requirements of rich media elements make the web application more and more complicated.More and more data processing and business logic are inclined to front-end development increasingly.Complicated DOM operation and lots of script code result in some problems,such as much code,bad expansion and low reusability.For the issues of traditional front-end development and maintenance,the Web front-end framework VueJS,which is based on MVVM(Model-View-ViewModel)model,is designed to separate the different logical types and reduce the dependence between modules to ease front-end development issues,such as lots of code,high reliability and low reuse,so as to improve the development efficiency and responsive performance.Based on SSH framework,using OPC technology to collect real-time data,combined with WebSocket real-time communication technology,the MES production real-time monitoring system based on VueJS framework is designed and developed.The main work and achievements of this paper are as follows:1.Research background and significance of the project are reviewed,the status at home and abroad of MES production real-time monitoring system and the basic front-end technology of system development are expounded.The front-end framework VueJS,back-end framework SSH,PostgreSQL database,OPC data acquisition,WebSocket real-time communication are introduced in detail.2.On the basis of the demand of the system,the overall analysis is carried out from the aspects of performance requirements,functional requirements and front-end framework requirements.Further,the real-time monitoring module,data acquisition and transmission module,warehouse management module,user management module,are designed and introduced in detail.3.According to the demand analysis,the hierarchical structure design of presentation layer,business logic layer and data layer is adopted as the overall structure of the system.The database structure of the system is designed according to the information demand.Combined with WebSocket technology,the client realized the real-time operating data display through two-way data binding technology of the VueJS framework.4.By the field workshop equipment data collection,storage,transmission,the system functions include workshop production dynamic monitoring,warehouse dynamic management,user management,production screen and workshop video are realized on the basis of the VueJS framework and front-end development specifications.At present,the MES monitoring system has been come into service in a company in SuZhou,and the system runs stably and achieves good performance.