Design And Implementation Of Web Front End Of Monitoring And Management System

The rapid development of smart surveillance applications has transformed from the traditional extensive management mode to the modern,intellectualized,scientific and precise management mode.The real-time monitoring and management system is built on the Web.The front end is an indispensable part of the system.The display effect of the front end of the Web plays a vital role in the application experience of the monitoring and management system,which is currently a heated research topic as well.Though the current monitoring and management system has been applied in different fields,along with the increasing complexity of system requirements,the following problems still exist in the Web front-end of the monitoring and management system:poor maintainability of the project's Web front end,and poor display effect of different terminal devices;Under the condition of large amount of data transmission,real-time data display is obviously delayed and front-end rendering efficiency is low;The monitoring module has poor service performance.To solve the above problems,this paper focuses on the following four aspects from the perspective of monitoring and management system Web development mode and visual rendering optimization:Firstly,we study major Web development modes and visual rendering methods in Web front-end development,and analyze the influencing factors of the evolution of Web development model and the principle of visualization rendering method.Secondly,combining with the characteristics of monitoring management system,we analyze the deficiencies of its Web development mode and visualization rendering method,and proposed a suitable Web development mode and visualization rendering optimization strategy for monitoring management system in view of the existing problems.Thirdly,the above research content is applied to the lighting monitoring management system.Based on the proposed Web development model,in terms of front-end development,the reusability and maintainability of the front-end of the system are improved by abstracting the common UI components of web pages and controlling the modification of data,aiming at the problem of cross-platform and cross-terminal usage of the system,a multi-screen adaptive solution is given,and the multi-terminal display function of the system is realized.In terms of data transmission,a full-duplex real-time data transmission mechanism based on WebSocket is designed to optimize the data transmission efficiency of lighting monitoring.In the aspect of service performance of real-time monitoring module,the service of lighting monitoring module with high real-time requirements is designed separately.Based on Node.js and GraphQL specification,improve the parsing mechanism of real-time requests,the goal of aggregating user requests and accurately querying data is realized,and the performance of lighting monitoring service module is improved.Based on the proposed visualization rendering optimization strategy,a data dynamic loading strategy based on HTML5 cache is designed to improve the efficiency of data rendering and user experience.Finally,this paper completes the front-end development of the whole lighting monitoring and management system,and tests and verifies the effectiveness of the system.