Industrial control software interface design tool and method based on Vue development

Abstract

The invention discloses an industrial control software interface design tool and method based on Vue development, and the method comprises the steps: newly building an interface design project through a project management module, associating project information, newly building a page design file under the interface design project, carrying out the page editing of the built page design file, and carrying out the Vue development. The components are dragged to the middle editing area in a dragging mode, the components are subjected to position arrangement, and basic attribute parameters of the components are adjusted through the right side attribute editing area; after page editing is completed, automatically generating a page code file into a specific folder; and analyzing the generated project page code file, so that the project page code file can be rendered and displayed by a Vue engine. The industrial control software interface development method overcomes the defects that configuration software is mostly adopted for industrial control software interface development at present, the function is complex, and the learning cost is high, the industrial control software interface development cost is reduced, and the development efficiency is improved.

Description

Technical Field

[0001] The present application relates to the technical field of industrial control software development, and in particular to an industrial control software interface design tool and method. Background Art

[0002] At present, most industrial control software interface development uses configuration software for development in order to create, maintain monitoring and data acquisition. Configuration software is used in the process of designing software interfaces to configure system hardware, including input / output devices, communication protocols and network settings. A database needs to be created to store process variables, which usually involves classifying variables and configuring data types. Interfaces are designed by dragging and dropping components, including charts, dashboards, switches and indicator lights.

[0003] Designers are usually required to have certain automation and programming knowledge, which is a challenge for interface developers with non-technical backgrounds. The system configuration and database creation steps are cumbersome, requiring interface developers to invest a lot of time in learning and practice. Although graphical interface design tools are provided, interface developers still need to be familiar with various components and properties, which limits design flexibility. In particular, animation and event processing usually require scripting, which increases the burden of learning programming languages. Integration with other systems may involve complex communication protocols and interface issues, which require professional knowledge to solve.

[0004] Due to the above reasons, when designing industrial control software interface for working condition monitoring, users must have corresponding technical accumulation to achieve simple interface design, so the learning cost is high. Because of these complexities and high learning costs, configuration software has gradually shown its limitations in the development of modern industrial control software interface. Summary of the invention

[0005] The purpose of this application is to provide an industrial control software interface design tool and method based on Vue development, so as to improve the functional complexity and high learning cost limitations of state software in the development of modern industrial control software interfaces, reduce the cost of industrial control software interface development, and improve development efficiency.

[0006] The embodiment of the present application is implemented as follows: An industrial control software interface design tool developed based on Vue, characterized by including: Project management module, used to create new interface design projects and associate project information, including project name, project code and project file address information; The file management module is used to create and manage page design files under the interface design project. The file information includes the file name, project, background type, selected image file, image width, image height and output file name; The picture management module is used to manage picture information, including picture name, picture type, project, selected file, file height and file width; The page editing module is used to edit the page design file. The editing interface is divided into three parts: left, middle and right. The left side is the component bar, which contains a variety of optional components. The middle part is the page editing area, which is used to drag components to the middle editing area to arrange the components. The right side is the component property editing area, which is used to adjust the basic property parameters of the component. The component management module is used to manage basic components and drawing components. Basic components include temperature, fire, liquid level, and valve. Drawing components include line drawing components, rectangle components, and vector graphics components. The code generation module is used to automatically generate the page code file to a specific folder under the specified file path after completing the page editing; The parsing module is used to parse the project page code files generated by this tool so that the project page code files can be rendered and displayed by the Vue engine.

[0007] In the above technical solution, the basic components in the component management module have at least the following attributes: measuring point name, measuring point type, width, height, measuring point value, unit, X coordinate, Y coordinate, X angle, Y angle, Z angle, and pop-up direction.

[0008] In the above technical solution, the line drawing component in the drawing component at least includes setting line width, default color, status color, status value, direction value, and line type; the rectangle component at least includes setting background height and background width; and the vector graphics component at least includes setting background height and background width.

[0009] In the above technical solution, the parsing module parses the generated project page code file in the following manner, so that the project page code file can be rendered and displayed by the Vue engine: Introduce the generated project page code file into the Vue page code; Get all object information in the project page code file and perform data binding through the Vue engine; The Vue engine renders the file information and displays the page in the browser.

[0010] A method for designing an industrial control software interface based on a Vue engine, characterized in that it comprises the following steps: Step 1: Create a new interface in the project management module to design a project and associate project information, including project name, project code, and project file address information; Step 2: Create a new page design file under the interface design project. The file information includes the file name, project, background type, image file selection, image width, image height and output file name. There are two optional background types: image and self-drawing. Step 3: Edit the page design file that has been created. The page editing interface is divided into three parts: left, middle, and right. The left side is the component bar, the middle part is the page editing area, and the right side is the component property editing area. Drag the basic components to the middle editing area to arrange the positions of the basic components, and adjust the basic property parameters of the basic components through the property editing area on the right; connect and configure the basic components in the middle editing area through the drawing components to form a system; For example, you can use drawing components such as the line drawing component to click multiple points in the middle editing area to connect them into line segments, and then right-click the mouse to end drawing; for example, you can use the rectangle component to set the background height and background width; you can use the vector graphics component to set the background height and background width; Step 4: Generate a page code file. After completing the page editing, save it and automatically generate the code file to a specific folder under the file path set in step 1. Step 5: Generate a project page code file. Select the file in the file list under the project management module to generate the project output code file, and output the project page code file. Step six, parse the generated project page code file so that the project page code file can be rendered and displayed by the Vue engine.

[0011] In the above technical solution, in step 2, if the background type is selected as picture, you need to add a picture first. If the background type is selected as self-drawn, select the picture file option to automatically hide it and no filling is required.

[0012] In the above technical solution, in step 3, if the background type in step 2 is selected as picture, the component bar only has basic components; if the background type in step 2 is self-drawn, the component bar includes drawing components and basic components.

[0013] In the above technical solution, in step three, multiple page design files are edited simultaneously in the file list under the project management module.

[0014] In the above technical solution, in step 5, one or more files are selected from the file list under the project management module to generate a project output code file.

[0015] In the above technical solution, in step five, when multiple files are selected to generate a project output file, multiple page files are combined in the form of a menu combination and the project page code file is output.

[0016] In the above technical solution, step six includes: Introduce the generated project page code file into the Vue page code; Get all object information in the project page code file and perform data binding through the Vue engine; The Vue engine renders the file information and displays the page in the browser.

[0017] In summary, the industrial control software interface design tool developed based on VUE of the present invention includes functional modules such as project management, file management, image management, page editing, component management, code generation, and parsing module. The page design file generated by componentized design editing can realize the rapid development of industrial control software interface. The present invention overcomes the problem that most of the current industrial control software interface development adopts configuration software for development, which has complex functions and high learning cost. The advantage of the tool is that based on the current mainstream Vue front-end development technology, the industrial control software interface design can be quickly completed, which provides strong support for complex industrial control software interface design.

[0018] The industrial control software interface design tool or platform developed based on Vue in this invention has significant beneficial effects compared with traditional configuration software in terms of reducing development costs, improving development efficiency, optimizing user experience, improving performance and increasing system flexibility. The specific analysis is as follows: Traditional configuration software usually has complex functions and high learning costs. The Vue-based tool of the present invention greatly simplifies the industrial control software interface development process due to its lightweight and easy-to-learn front-end framework, reduces the dependence on professional skills, and enables developers to get started quickly, thereby reducing training costs and development time.

[0019] Modular design tools provide modules such as project management, file management, image management, page editing, and component management, making the development process more structured and modular, and improving the reusability and maintainability of the code.

[0020] Traditional industrial control software interfaces are often static and have poor interactivity, while Vue-based tools support responsive design, allowing industrial control software interfaces to adapt to different devices and screen sizes, and support dynamic interactive design, such as dragging components, real-time data updates, etc., making the interface more intuitive and easy to operate, providing a better user experience. Provides a richer and smoother user experience.

[0021] Traditional configuration software may have performance degradation when processing large amounts of data and complex interfaces, while Vue-based tools improve rendering efficiency and system response speed through optimization and virtual DOM mechanism, rendering and display through the Vue engine, and improving interface response speed and user experience.

[0022] Optimize the compression of components, pictures, graphics and other information to reduce resource usage.

[0023] Traditional configuration software interface design requires writing a lot of code, while Vue-based tools simplify design and maintenance through graphical editing and automatic code generation.

[0024] Traditional configuration software is often closed and has limited scalability, while Vue-based tools provide greater flexibility and scalability and can quickly adapt to changing business needs. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0026] Figure 1 This is a flow chart of the industrial control software interface design method based on the Vue engine in an embodiment of the present application. DETAILED DESCRIPTION

[0027] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. The components of the embodiments of the present application described and shown in the drawings here can be arranged and designed in various different configurations.

[0028] Therefore, the following detailed description of the embodiments of the present application provided in the accompanying drawings is not intended to limit the scope of the present application for which protection is sought, but merely represents selected embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without creative work are within the scope of protection of the present application.

[0029] It should be noted that similar reference numerals and letters denote similar items in the following drawings, and therefore, once an item is defined in one drawing, further definition and explanation thereof is not required in subsequent drawings.

[0030] The features and performance of the present application are further described in detail below in conjunction with the embodiments.

[0031] Example 1 In order to make the technical means, creative features and objectives of the present invention easy to understand, the present invention is further described below.

[0032] like Figure 1As shown in the figure, the industrial control software interface design tool developed based on Vue is used to design the industrial control software interface, including the following design steps: Step 1: For the page design work to be carried out, first create a new design project. Through the project management module, create a new interface design project. The project information includes project name, project code, and file address information; Step 2: Create a new page design file under the design project. In the management list of the project module, add an interface design file. The file information includes name, project, background type, image file selection, image width, image height, and output file name. The background type can be selected as image or self-drawn. If the background type is selected as image, you need to use this tool to add an image first. If the background type is selected as self-drawn, the image file option is automatically hidden and does not need to be filled in.

[0033] Step 3: Edit the page design file that has been created. The page editing interface is divided into three parts: left, middle, and right. The left side is the component bar, the middle part is the page editing area, and the right side is the component property editing area. Drag the component to the middle editing area, arrange the component, and adjust the basic property parameters of the component in the property editing area on the right.

[0034] If you select a picture as the background type in step 2, the component bar only has basic components; if you select self-drawn as the background type in step 2, the component bar includes drawing components and basic components. Using drawing components, you can perform drawing operations such as drawing lines, drawing rectangles, and adding vector graphics.

[0035] Step 4: Generate page code file. After completing page editing, click the Save button, and the tool will automatically generate the code file to a specific folder under the file path set in step 1.

[0036] Step 5: Generate project page code files. In the file list under the project management module, you can edit multiple page design files at the same time, and you can select one or more files to generate project output code files. When you select multiple files to generate project output files, multiple page files are combined in the form of menu combinations and the project page code files are output.

[0037] Step 6: Use the project page code file. The generated project page code file needs to be used with the parsing module. Through the parsing module, the generated project page code file can be edited using the industrial control software interface design tool developed based on Vue, and can be rendered and displayed by the Vue engine.

[0038] The project management module includes project name, project code, and file address. The project code only supports letters and numbers and is used for image and component association. The file address is used to specify the file generation path. The picture information in the picture management module includes picture name, picture type, project, selected file, file height, and file width. One picture can be associated with multiple projects. Use the above "Select File" to import local pictures into a specific directory of the software, which can be used as a public resource for other files or projects; Component management includes basic component management and drawing component management. Basic components include temperature, fire, liquid level, valve, fire cover, fire door, watertight door, measuring point, alarm, speed, current, voltage, displacement, pressure, oil tank, etc. Basic component properties include measuring point name, measuring point type, width, height, measuring point value, unit, X coordinate, Y coordinate, X angle, Y angle, Z angle, pop-up direction. Drawing components include: line drawing component, rectangle component, vector component. The line drawing component can set the line width, default color, status color, status value, direction value, and line type; the rectangle component can set the background height and background width; the vector component can set the background height and background width.

[0039] Use the tool to complete the page design. The tool will compress and optimize the components, pictures, drawings and other information edited on the page to generate a page code file.

[0040] The parsing module is used to parse the project page code files generated by this tool so that the project page code files generated by this tool can be rendered and displayed by Vue.

[0041] The specific parsing steps of the code file are as follows: introduce the generated project code file into the Vue page code; obtain all object information in the code file and bind data through the Vue engine; the Vue engine renders the file information and displays the page in the browser.

[0042] Example 2 The industrial control software interface design tool or platform based on Vue development implemented in the present invention includes functional modules such as project management, file management, image management, page editing, component management, code generation, and parsing modules. The page design file generated by tool editing can be rendered and displayed by the Vue engine. The present invention overcomes the difficulties of using configuration software to develop industrial control software interfaces, which has complex functions and high learning costs, reduces the cost of industrial control software development, and improves development efficiency.

[0043] The project management module includes project name, project code, and file address. The project code only supports letters and numbers and is used for image and component association. The file address is used to specify the file generation path. The picture information in the picture management module includes picture name, picture type, project, selected file, file height, and file width. One picture can be associated with multiple projects. Use the above "Select File" to import local pictures into a specific directory of the software, which can be used as a public resource for other files or projects; Component management includes basic component management and drawing component management. Basic components include temperature, fire, liquid level, valve, fire cover, fire door, watertight door, measuring point, alarm, speed, current, voltage, displacement, pressure, oil tank, etc. Basic component properties include measuring point name, measuring point type, width, height, measuring point value, unit, X coordinate, Y coordinate, X angle, Y angle, Z angle, pop-up direction. Drawing components include: line drawing component, rectangle component, vector component. The line drawing component can set the line width, default color, status color, status value, direction value, and line type; the rectangle component can set the background height and background width; the vector component can set the background height and background width.

[0044] Use the tool to complete the page design. The tool will compress and optimize the components, pictures, drawings and other information edited on the page to generate a page code file.

[0045] The parsing module is used to parse the project page code files generated by this tool so that the project page code files generated by this tool can be rendered and displayed by Vue.

[0046] The above industrial control software interface design tool developed based on Vue develops the interface according to the following steps: Step 1: Create a new interface in the project management module to design a project and associate project information, including project name, project code, and project file address information; Step 2: Create a new page design file under the interface design project. The file information includes the file name, project, background type, image file selection, image width, image height and output file name. There are two optional background types: image and self-drawing. Step 3: Edit the page design file that has been created. The page editing interface is divided into three parts: left, middle, and right. The left side is the component bar, the middle part is the page editing area, and the right side is the component property editing area. Drag the component to the middle editing area to arrange the position of the component, and adjust the basic property parameters of the component in the property editing area on the right. Step 4: Generate a page code file. After completing the page editing, save it and automatically generate the code file to a specific folder under the file path set in step 1. Step 5: Generate a project page code file. Select the file in the file list under the project management module to generate the project output code file, and output the project page code file. Step six, parse the generated project page code file so that the project page code file can be rendered and displayed by the Vue engine.

[0047] The specific parsing steps of the code file are as follows: introduce the generated project code file into the Vue page code; obtain all object information in the code file and perform data binding through the Vue engine; the Vue engine renders the file information and displays the page in the browser.

[0048] The embodiments described above are part of the embodiments of the present application, rather than all of the embodiments. The detailed description of the embodiments of the present application is not intended to limit the scope of the present application for protection, but merely represents the selected embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present application.

Claims

1. An industrial control software interface design tool developed based on Vue, characterized in that: include: Project management module, used to create new interface design projects and associate project information, including project name, project code and project file address information; The file management module is used to create and manage page design files under the interface design project. The file information includes the file name, project, background type, selected image file, image width, image height and output file name; The picture management module is used to manage picture information, including picture name, picture type, project, selected file, file height and file width; The page editing module is used to edit the page design file. The editing interface is divided into three parts: left, middle and right. The left side is the component bar, which contains a variety of optional components; The middle part is the page editing area, which is used to drag components to the middle editing area to arrange the components; the right side is the component property editing area, which is used to adjust the basic property parameters of the component; The component management module is used to manage basic components and drawing components. Basic components include temperature, fire, liquid level, and valve. Drawing components include line drawing components, rectangle components, and vector graphics components. The code generation module is used to automatically generate the page code file to a specific folder under the specified file path after completing the page editing; The parsing module is used to parse the project page code files generated by this tool so that the project page code files can be rendered and displayed by the Vue engine.

2. According to the industrial control software interface design tool developed based on Vue in claim 1, it is characterized in that: The basic components in the component management module have at least the following properties: measuring point name, measuring point type, width, height, measuring point value, unit, X coordinate, Y coordinate, X angle, Y angle, Z angle, and pop-up direction.

3. According to the industrial control software interface design tool developed based on Vue in claim 1, it is characterized in that: The line drawing component in the drawing component at least includes setting line width, default color, state color, state value, direction value, and line type; the rectangle component at least includes setting background height and background width; the vector graphics component at least includes setting background height and background width.

4. According to the industrial control software interface design tool developed based on Vue in claim 1, it is characterized in that: The parsing module is configured to parse the generated project page code file in the following way, so that the project page code file can be rendered and displayed by the Vue engine: Introduce the generated project page code file into the Vue page code; Get all object information in the project page code file and perform data binding through the Vue engine; The Vue engine renders the file information and displays the page in the browser.

5. A method for designing industrial control software interface based on Vue engine, characterized in that: The following steps are involved: Step 1: Create a new interface in the project management module to design a project and associate project information, including project name, project code, and project file address information; Step 2: Create a new page design file under the interface design project. The file information includes the file name, project, background type, image file selection, image width, image height and output file name. There are two optional background types: image and self-drawing. Step 3: Edit the page design file that has been created. The page editing interface is divided into three parts: left, middle, and right. The left side is the component bar, the middle part is the page editing area, and the right side is the component property editing area. Drag the basic component to the middle editing area to arrange the position of the basic component, and adjust the basic property parameters of the basic component through the property editing area on the right; use the drawing component to connect the basic component in the middle editing area and configure the color and shape; Step 4: After completing page editing, the page code file is automatically generated in a specific folder; Step 5: Generate a project page code file. Select the file in the file list under the project management module to generate the project output code file, and output the project page code file. Step six, parse the generated project page code file so that the project page code file can be rendered and displayed by the Vue engine.

6. The industrial control software interface design method based on the Vue engine according to claim 5 is characterized in that: In step 2, if you select picture as the background type, you need to add a new picture first. If you select self-drawn as the background type, select the picture file option to automatically hide it and you do not need to fill it in.

7. The industrial control software interface design method based on the Vue engine according to claim 5 is characterized in that: If the background type in step 2 is self-drawn, the component bar includes drawing components and basic components.

8. The industrial control software interface design method based on the Vue engine according to claim 5 is characterized in that: In step three, edit multiple page design files simultaneously in the file list under the project management module.

9. The industrial control software interface design method based on the Vue engine according to claim 5 is characterized in that: In step 5, select one or more files in the file list under the project management module to generate project output code files; When multiple files are selected to generate a project output file, multiple page files are combined in the form of menu combination and the project page code file is output.

10. The industrial control software interface design method based on Vue engine according to claim 5, characterized in that: Step six includes: Introduce the generated project page code file into the Vue page code; Get all object information in the project page code file and perform data binding through the Vue engine; The Vue engine renders the file information and displays the page in the browser.

Images