Front-end development method for platform risk detection system

Abstract

The invention relates to a platform risk detection system front-end development method, and the method comprises the steps: S1, dividing a to-be-developed platform risk detection system into a plurality of sub-modules according to development demands, and planning a page of each sub-module and components in the page; s2, installing a front-end development framework; and S3, compiling logic, view and style codes of each component based on the installed front-end development framework.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a front-end development method for a platform risk detection system in a railway transportation system. Background Art

[0002] Railway transportation undertakes a large number of passenger and freight transportation tasks. Due to the complexity of the railway system and the diversity of its operating environment, railway transportation may face various emergencies. In order to monitor various risks in real time, it is necessary to develop various intelligent systems with the help of computer technology, among which the development of platform risk detection system is indispensable.

[0003] At present, the site risk detection system adopts a BS structure. The client uses the browser as a carrier, performs front-end display on the page, and the server processes data.

[0004] The study found that the problems that may be encountered in the front-end development of the platform risk detection system include: the difficulty of learning front-end development technology for technicians; the low efficiency of collaborative development between different members. These problems increase development costs and reduce efficiency. Therefore, it is necessary to provide a front-end development method that can reduce the labor difficulty of technicians and improve collaborative efficiency. Summary of the invention

[0005] The present invention provides a front-end development method for a platform risk monitoring and detection system, which can reduce the work difficulty of technical personnel and improve collaboration efficiency.

[0006] To achieve the above object, the present invention adopts the following technical solutions:

[0007] In a first aspect, the present application provides a front-end development method for a platform risk detection system, the method comprising:

[0008] S1, according to the development requirements, divide the site risk detection system to be developed into multiple sub-modules, and plan the pages and components in each sub-module;

[0009] S2, install the front-end development framework;

[0010] S3, writes the logic, view and style code of each component based on the installed front-end development framework.

[0011] In one implementation, in S1, the site risk detection system to be developed is divided into a monitoring management module, a video source management module and a result query module; wherein,

[0012] A monitoring management module, used to display the camera resources connected to the platform risk detection system on the front-end interface;

[0013] The video source management module is used to display the video images of each video source on the front-end interface, and to provide a management interface for each video source;

[0014] The result query module is used to display the corresponding information query results according to the video source query command input by the user in the management interface.

[0015] In one implementation, the display mode of the camera resources includes 1-split screen, 4-split screen or 9-split screen.

[0016] In one implementation, the video source query instruction includes a query instruction for video codec algorithm information; the corresponding result query result, based on the query result, displays the video codec algorithm on the interface.

[0017] In one implementation, in S2, the front-end development framework adopts Vue.js.

[0018] In one implementation, in S3, based on the Vue.js framework, the display code is written in the template part, using element as the UI component tool; the logic code is written in the script part to implement the business logic function; and the style code is written in the style part.

[0019] The technical solution of the present invention adopts the vue framework for the front-end development of the platform risk detection system, which has the following beneficial effects:

[0020] 1) Easy to learn: Even non-professionals can use it easily as long as they master Javascript, HTML, and CSS technologies.

[0021] 2) Component-based development: The Vue framework adopts a component-based development approach, which is very suitable for group collaborative development. Different people are responsible for the development of different components, thereby improving wage efficiency.

[0022] 3) Data-driven: The Vue framework adopts a data-driven mechanism. Developers do not need to directly control the DOM elements in the web page and can focus their main energy on business logic development, which can greatly improve work efficiency.

[0023] 4) Comprehensive documentation: The Vue framework has rich and comprehensive Chinese documentation, which is very convenient for developers to consult and quickly locate solutions to problems. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 It is a flowchart of a front-end development method of a platform risk detection system in an embodiment of the present invention. DETAILED DESCRIPTION

[0025] In order to make the purpose, technical solution and advantages of the embodiment of the present invention clearer, the technical solution of the embodiment of the present invention will be clearly and completely described below in conjunction with the drawings of the embodiment of the present invention. Obviously, the described embodiment is a part of the embodiment of the present invention, not all of the embodiments. Based on the described embodiment of the present invention, all other embodiments obtained by ordinary technicians in this field belong to the scope of protection of the present invention.

[0026] In view of the defects and problems of the prior art, the present application provides a front-end development method of a platform risk detection system, the method comprising:

[0027] S1, according to the development requirements, divide the site risk detection system to be developed into multiple sub-modules, and plan the pages and components in each sub-module;

[0028] Specifically, the platform risk detection system to be developed is divided into a monitoring management module, a video source management module and a result query module; among them,

[0029] Monitoring management module: Centrally display the camera resources connected to the system. Users can select the camera name from the directory tree, and the screen is displayed on the right. The screen display can be selected as 1-split screen, 4-split screen, and 9-split screen. Use the element's directory tree component to implement directory selection, video access uses socket technology to receive video data, and uses the img tag to display the screen.

[0030] Video source management module: Centrally manage the video sources in the system. Users can add, delete, modify and check the video sources. The left side is the directory tree, and the right side is the video source list. The video source can be set to start or stop, and detailed data can also be viewed, such as algorithm management. The table component of element is mainly used here to implement the list function.

[0031] Results Query Module: Users can search for results obtained by algorithms attached to each video source. Users can search based on start and end time, type, and keywords.

[0032] S2, install the front-end development framework;

[0033] Specifically, the vue framework is adopted in the embodiment of the present invention.

[0034] Vue.js is a progressive framework for building user interfaces. Here are the main features of Vue.js:

[0035] 1) Responsive Data Binding: Vue.js uses data binding and a responsive system that automatically tracks page dependencies and updates views.

[0036] 2) Componentization: Vue.js allows you to decompose a page into small, reusable components, each of which can manage its own logic, view, and style.

[0037] 3) Virtual DOM: Vue.js uses virtual DOM to update DOM efficiently. Virtual DOM is a theory that maintains a snapshot of the DOM in memory and then updates it before the actual DOM, so that only minimal changes need to be applied to the actual DOM.

[0038] 4) Integration: Vue.js can be easily integrated with other libraries or existing projects.

[0039] 5) Fast running speed: Vue.js uses the latest front-end technology and is optimized to provide fast rendering speed.

[0040] In the embodiment of the present invention, vuex is used to manage state data, that is, to save cross-page data in memory. Vuex is a state management mode specially developed for vue.js applications. It uses centralized storage to manage the state of all components of the application and solve the problem of multi-component data communication.

[0041] Vuex includes the following components:

[0042] State: The state of the application, storing data shared between components.

[0043] Mutations: Methods for modifying states, similar to events. Each mutation has a string event name and a callback function.

[0044] Actions: A module that handles asynchronous events and can trigger mutations to modify the state.

[0045] Getters: Methods that derive some states from State.

[0046] Modules: Split the application state into multiple modules, each with its own State, Mutations, Actions, and Getters.

[0047] The steps to use vuex are as follows:

[0048] 1. Install Vuex: Install Vuex using npm or yarn.

[0049] 2. Create a Vuex store: Every Vue application needs to create a store instance.

[0050] 3. Use the store in components: Access the state and methods in the store through this.$store in the component. For example, you can access the data in the state through this.$store.state.someState, or use calculated properties to map the state to the component.

[0051] In the present invention, vue-router performs routing management, that is, managing the browser address jump to the corresponding page. vue-router is a vue plug-in library, which is specifically used to implement SPA applications, that is, the entire application is a complete page, and clicking the navigation on the page will not jump or refresh the page. vue-router binds the URL address and the component, so that when switching the routing component, the page does not need to be reloaded from the server, thereby improving the user experience.

[0052] The steps to use vue-router are as follows:

[0053] 1. Install vue-router: You can use the npm package manager to install the vue-router plug-in.

[0054] 2. Import and use vue-router in the main.js file.

[0055] 3. Create routing configuration. Create a router folder in the src directory and create an index.js file in it.

[0056] 4.Introduce the routing configuration in main.js and pass it into the VueRouter instance.

[0057] 5. Use in template <router-link>To define navigation links, use <router-view>Display the corresponding component content.

[0058] 4) Use webpack for project packaging management.

[0059] S3, writes the logic, view and style code of each component based on the installed front-end development framework.

[0060] Specifically, for the monitoring management module, video source management module and result query module divided in the embodiment of the present invention, based on the vue framework, the display code is written in the template part, and element is used as the UI component tool; the logic code is written in the script part to realize the business logic function; and the style code is written in the style part.

[0061] In summary, the use of the Vue framework for the front-end development of the platform risk detection system has the following beneficial effects:

[0062] 1) Easy to learn: Even non-professionals can use it easily as long as they master Javascript, HTML, and CSS technologies.

[0063] 2) Component-based development: The Vue framework adopts a component-based development approach, which is very suitable for group collaborative development. Different people are responsible for the development of different components, thereby improving wage efficiency.

[0064] 3) Data-driven: The Vue framework adopts a data-driven mechanism. Developers do not need to directly control the DOM elements in the web page and can focus their main energy on business logic development, which can greatly improve work efficiency.

[0065] 4) Comprehensive documentation: The Vue framework has rich and comprehensive Chinese documentation, which is very convenient for developers to consult and quickly locate solutions to problems.

[0066] In the several embodiments provided by the present invention, it should be understood that the disclosed method can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the above units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0067] The above-mentioned integrated unit implemented in the form of a software functional unit can be stored in a computer-readable storage medium. The above-mentioned software functional unit is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor (Processor) to perform some steps of the above-mentioned method of each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (Read-Only Memory, ROM), random access memory (Random Access Memory, RAM), disk or optical disk and other media that can store program codes.

[0068] The above are only preferred embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A front-end development method for a platform risk detection system, characterized in that: The method comprises: S1, according to the development requirements, divide the site risk detection system to be developed into multiple sub-modules, and plan the pages and components in each sub-module; S2, install the front-end development framework; S3, writes the logic, view and style code of each component based on the installed front-end development framework.

2. The front-end development method of the platform risk detection system according to claim 1 is characterized in that: In S1, the platform risk detection system to be developed is divided into a monitoring management module, a video source management module and a result query module; wherein, A monitoring management module, used to display the camera resources connected to the platform risk detection system on the front-end interface; The video source management module is used to display the video images of each video source on the front-end interface, and to provide a management interface for each video source; The result query module is used to display the corresponding information query results according to the video source query command input by the user in the management interface.

3. The front-end development method of the platform risk detection system according to claim 2 is characterized in that: The display mode of the camera resource includes 1-split screen, 4-split screen or 9-split screen.

4. The front-end development method of the platform risk detection system according to claim 2 is characterized in that: The video source query instruction includes a query instruction for video codec algorithm information; the corresponding result query result, according to the query result, displays the video codec algorithm on the interface.

5. The front-end development method of the platform risk detection system according to claim 1 is characterized in that: In S2, the front-end development framework adopts Vue.js.

6. The front-end development method of the platform risk detection system according to claim 5 is characterized in that: In S3, based on the Vue.js framework, the display code is written in the template part, using element as the UI component tool; the logic code is written in the script part to implement business logic functions; and the style code is written in the style part.

Images