Development method and system based on Vue formula editor

Abstract

The invention provides a Vue formula editor-based development method and system, and the method comprises the steps: creating a Vue component, splitting a user interface, defining an array used for storing elements needed by a formula, traversing the array through V-for, wrapping the elements of the formula with inline labels, presenting the wrapped elements on the split user interface, and finally, carrying out the Vue formula editor-based development. The user rectifies the formula according to the actual requirement on the split user interface, so that the user can better arrange the formula according to the requirement to obtain the equipment operation data or efficiency, and also can rectify the exclusive formula according to the characteristics of a certain type of equipment to obtain the equipment operation data or efficiency. And subsequently, personnel can be timely notified to carry out maintenance and the like through an abnormal result obtained through calculation, and the beneficial effects of simplicity, flexibility and high efficiency are achieved.

Description

Technical Field

[0001] The present invention relates to the technical field of data processing, and in particular, to a development method and system based on a Vue formula editor. Background Art

[0002] For most enterprises in intelligent manufacturing, equipment management is a particularly important part. Equipment performance and efficiency are the keys to supporting enterprises to create high-quality products to obtain reliable economic benefits. Through equipment management, the operating parameters of equipment can be adjusted and optimized to make the equipment work in the best state. Also, production tasks can be reasonably arranged according to the load capacity and operating characteristics of the equipment to avoid long-term overloading of the equipment. In addition, preventive equipment management can reduce equipment maintenance costs. Compared with emergency repairs after equipment failures, regular maintenance and upkeep costs are lower.

[0003] However, existing formulas for equipment management all adopt fixed management formulas, that is, the management formulas for equipment are unchangeable. In this way, not only can't the management formulas be arranged according to actual needs to obtain actual equipment operation data, but also it's impossible to add, delete, drag and drop according to equipment characteristics to formulate exclusive management calculation formulas, resulting in the situation that abnormal results obtained subsequently cannot be timely notified to personnel for maintenance, which may lead to equipment damage and other problems. Summary of the Invention

[0004] The present invention provides a development method and system based on a Vue formula editor to solve the defects in the prior art that it is impossible to arrange management formulas according to actual needs to obtain actual equipment operation data, and it is also impossible to add, delete, drag and drop according to equipment characteristics to formulate exclusive management calculation formulas, resulting in the situation that abnormal results obtained subsequently cannot be timely notified to personnel for maintenance, which may lead to equipment damage and so on.

[0005] The present invention provides a development method based on a Vue formula editor, including: Create a Vue component and split the user interface; Define an array, which is used to store elements required by the formula; Traverse the array through v-for, wrap the elements of the formula with inline tags and present them on the split user interface; Rectify the formula on the split user interface.

[0006] According to the development method based on a Vue formula editor provided by the present invention, the creating a Vue component and splitting the user interface specifically includes: Create a page of the Vue component; The page is split into a left page and a right page through HTML tags. Among them, the split left page is used for the operation and presentation of the formula, and the split right page is used for presenting a specific property list or the result generated by the formula. The left page is divided into an upper left page and a lower left page. The upper left page is used for presenting specific numbers and operators, and the lower left page is used for displaying the formula.

[0007] According to a development method of a Vue formula editor provided by the present invention, the defining an array, where the array is used to store elements required by the formula, specifically includes: Define the array as a propertyList array in the Vue component; Click on the numbers and / or operators on the split user interface; Store the clicked number or operator into propertyList through the push method of the array.

[0008] According to a development method of a Vue formula editor provided by the present invention, after defining the array as a propertyList array, it further includes: Click on the property on the split user interface, and push an object including the property name and / or property value.

[0009] According to a development method of a Vue formula editor provided by the present invention, the traversing the array through V-for, wrapping the elements of the formula with inline tags and presenting them on the split user interface, specifically includes: Traverse the array through V-for, and wrap each element of the formula with a span tag and present it on the split user interface.

[0010] According to a development method of a Vue formula editor provided by the present invention, the rectifying the formula on the split user interface, specifically includes: Perform deletion and modification processing on the array through click and / or drag events of the inline tag, where the inline tag is a span tag.

[0011] According to a development method of a Vue formula editor provided by the present invention, the performing deletion and modification processing on the array through click and / or drag events of the inline tag, where the inline tag is a span tag, specifically includes: On the split user interface, when the mouse hovers over any span element, a clear button will appear. Click the clear button to delete the span element, and each span element can be dragged to change the position order to rectify the formula.

[0012] According to a development method based on a Vue formula editor provided by the present invention, deleting the span element specifically includes: passing the element index index as a parameter into the click event, and using propertyList.splice(index, 1) to delete the element.

[0013] According to a development method based on a Vue formula editor provided by the present invention, the development method based on the Vue formula editor further includes: determining a list array composed of the formulas and click and / or drag events of span tags presented in the split user interface.

[0014] According to a development system based on a Vue formula editor provided by the present invention, it includes: A Vue component module, which is used to create Vue components and split the user interface; A defined array module, which is used to define an array and store elements required by the formula; A V-for module, which traverses the array, wraps the elements of the formula with inline tags, and presents them in the split user interface; A formula rectification module, which is used to rectify the formula in the split user interface.

[0015] A development method and system based on a Vue formula editor provided by the present invention, by creating Vue components and splitting the user interface, defining an array for storing elements required by the formula, then traversing the array through V-for, wrapping the elements of the formula with inline tags and presenting them in the split user interface, and finally, in the split user interface, the user rectifies the formula according to actual needs, so that the user can not only better arrange the formula according to requirements to obtain device operation data or efficiency, but also rectify the exclusive formula according to the characteristics of a certain type of device, and then can timely notify personnel for maintenance through the abnormal results obtained by calculation, etc., achieving the beneficial effects of simplicity, flexibility and high efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the technical solutions in the present invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following drawings are some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0017] Figure 1It is a flowchart of the development method based on the Vue formula editor provided by an embodiment of the present invention; Figure 2 It is a schematic diagram of the split user interface of the development method based on the Vue formula editor provided by an embodiment of the present invention; Figure 3 It is a schematic diagram of the structure of the development system based on the Vue formula editor provided by an embodiment of the present invention.

[0018] Reference numerals: 1. Development system; 10. Vue component module; 20. Definition array module; 30. V-for module; 40. Formula rectification module; 100. User interface; 101. Left page; 102. Right page; 1011. Upper left page; 1012. Lower left page. Detailed implementation manners

[0019] To make the objectives, technical solutions and advantages of the present invention clearer, the technical solutions in the present invention will be clearly and completely described below with reference to the accompanying drawings in the present invention. Apparently, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art without making creative efforts based on the embodiments in the present invention belong to the scope of protection of the present invention.

[0020] The present invention provides a development method based on a Vue formula editor, including: creating a Vue component and splitting the user interface; defining an array, where the array is used to store elements required by the formula, and the array is a propertyList array; traversing the array through V-for, wrapping the elements of the formula with inline tags and presenting them on the split user interface, where the inline tag is a span tag; rectifying the formula on the split user interface.

[0021] Among them, the creating a Vue component and splitting the user interface specifically includes: Creating a page of the Vue component; splitting the page into a left page and a right page through HTML tags. Among them, the split left page is used for the operation and presentation of the formula, and the split right page is used for presenting a specific property list or the result generated by the formula. In addition, the left page is divided into an upper left page and a lower left page. The upper left page is used for presenting specific numbers and operators, and the lower left page is used for displaying the formula.

[0022] Among them, for the defined array, the array is used to store the elements required by the formula, specifically including: defining the array as the propertyList array in the Vue component; clicking on the numbers and / or operators on the split user interface; using the push method of the array to store the clicked number or operator into propertyList.

[0023] Among them, after defining the array as the propertyList array, it further includes: clicking on the properties on the split user interface, and pushing an object including property names and / or property values.

[0024] Among them, traversing the array through V-for, wrapping the elements of the formula with inline tags and presenting them on the split user interface specifically includes: Traversing the array through V-for, wrapping each element of the formula with span tags and presenting them on the split user interface.

[0025] Among them, rectifying the formula on the split user interface specifically includes: Performing deletion and modification processing on the array through click and / or drag events of the inline tags. Among them, the inline tag is a span tag, and it specifically includes: On the split user interface, when the mouse hovers over any span element, a clear button will appear. Click the clear button to delete the span element, and each span element can be dragged to change the position order to rectify the formula. Among them, deleting the span element specifically means: passing the element index index as a parameter into the click event, and using propertyList.splice(index, 1) to delete the element.

[0026] Among them, the development method based on the Vue formula editor further includes: determining the list array composed of the formula and click and / or drag events of the span tags presented on the split user interface.

[0027] A development system based on the Vue formula editor provided by the present invention includes: Vue component module, the Vue component module is used to create Vue components and split the user interface; Defined array module, the defined array module is used to define an array and store the elements required by the formula; V-for module, the V-for module traverses the array, and wraps the elements of the formula with inline tags and presents them on the split user interface; Formula rectification module, which is used to rectify the formula in the split user interface.

[0028] A development method and system based on Vue formula editor provided by the present invention enable users to not only better arrange formulas according to requirements to obtain device operation data or efficiency, but also rectify exclusive formulas according to the characteristics of a certain type of device. Subsequently, abnormal results obtained through calculation can be used to promptly notify personnel for maintenance, etc., achieving beneficial effects of simplicity, flexibility, and high efficiency.

[0029] In this embodiment, please refer to Figure 1 , Figure 2 and Figure 3 , which are respectively the flowchart of the development method based on Vue formula editor provided by the embodiment of the present invention, the schematic diagram of the split user interface of the development method based on Vue formula editor provided by the embodiment of the present invention, and the schematic diagram of the structure of the development system 1 based on Vue formula editor provided by the embodiment of the present invention.

[0030] Specifically, in this embodiment, as Figure 1 shown, a development method based on Vue formula editor provided by the embodiment of the present invention includes: S1: Create a Vue component and split the user interface 100; S2: Define an array, which is used to store the elements required by the formula. Among them, the array is the propertyList array; S3: Traverse the array through V-for, wrap the elements of the formula with inline tags and present them in the split user interface 100. Among them, the inline tag is the span tag. Specifically, traverse the propertyList array through V-for, wrap each element of the formula with the span tag and present it in the split user interface 100; S4: Rectify the formula in the split user interface 100.

[0031] In this embodiment, the S1: Create a Vue component and split the user interface 100 specifically includes: Create the initial page of the Vue component; The page is split into two major parts, namely the left page 101 and the right page 102, through HTML tags. Preferably, the left page 101 and the right page 102 have the same height. Among them, the split left page 101 is used for the operation and presentation of the formula, and the split right page 102 is used for presenting a specific attribute list or the result generated by the formula. Preferably, the right page 102 is used for presenting a specific attribute list or the result of some formulas already generated by the components of the formula, and it is clickable. In this embodiment, the left page 101 is divided into an upper left page 1011 and a lower left page 1012. The upper left page 1011 is used for presenting specific numbers and operators, and it is clickable. The lower left page 1012 is used for displaying the formula, and its position can be dragged and moved, and it can also be deleted.

[0032] A user interface 100 is created using Vue and the user interface 100 is split into multiple independent user interfaces 100. Each user interface 100 has its own template, style, and logic, and these user interfaces 100 can be reused in different places. Since each user interface 100 is an independent unit, its functions and logic are relatively concentrated. When it is necessary to modify the function of a certain user interface 100, only this user interface 100 needs to be modified, rather than searching for the relevant part in a large amount of code, which is convenient for maintenance. Therefore, when we rectify the formula, it is very convenient and flexible.

[0033] In this embodiment, in step S2: Define an array, and the array is used to store the elements required by the formula. Specifically, it includes: defining the array as a propertyList array in the Vue component; clicking on the numbers and / or operators on the split user interface 100; storing the clicked number or operator into the propertyList through the push method of the array. Alternatively, click on the attributes on the split user interface 100, and it is necessary to push an object including the attribute name and / or attribute value. In this embodiment, preferably, a propertyList array is first defined to store all the elements required to form the formula. Each time a number or operator on the upper left page 1011 and a single attribute on the right page 102 are clicked, they are stored into the propertyList through the push method of the array. If it is a number or operator, just push the corresponding number or operator. If it is an attribute, it is necessary to push an object including at least one of the attribute name and the attribute value to facilitate echo display and background storage.

[0034] In this embodiment, in step S4: Rectify the formula on the split user interface 100, which specifically includes: In the split user interface 100, when the mouse hovers over any of the span elements, a clear button will appear. Click the clear button to delete the span element, and each span element can be dragged to change the position order to rectify the formula. Among them, deleting the span element specifically means: passing the element index 'index' as a parameter into the click event, and using 'propertyList.splice(index, 1)' to delete the element. And each element can be dragged to change the position order. Set the draggable attribute of the span element to 'draggable = `true`', and add the 'ondragover', 'ondrag', and 'ondrop' events. Among them, in the 'ondrag' event, store the dragged element and its position index 'dragobj: {obj, index}'. And in the 'ondragover' event function, write the 'e.preventDefault()' code block to prevent the default event. In the 'ondrop' event function, swap the positions of the dragged element and the target element position 'targetIndex' through 'this.propertyList.splice(dragobj.index, 1); this.propertyList.splice(0, targetIndex, dragobj.obj);' to facilitate the user to rectify the formula.

[0035] In addition, in this embodiment, the development method based on the Vue formula editor further includes: determining the list array composed of the formula and the click and / or drag events of the span tags presented in the split user interface 100, ensuring the data accuracy in the development process.

[0036] In this embodiment, the specific creation process of the formula editor and the formula rectification process are detailed as follows: Create the initial page of the Vue component; Split the page into two major parts, the left page 101 and the right page 102, through HTML tags. Preferably, the left page 101 and the right page 102 have the same height. Among them, the split left page 101 is used for the operation and presentation of the formula, and the split right page 102 is used for presenting the specific property list or the result generated by the formula. Preferably, the right page 102 is used for presenting the specific property list or the result of some formulas already generated by the components of the formula, and it is clickable. In this embodiment, the left page 101 is divided into the upper left page 1011 and the lower left page 1012. The upper left page 1011 is used for presenting specific numbers and operators and is clickable. The lower left page 1012 is used for displaying the formula, which can be dragged and moved, and can also be deleted; Define the array as the propertyList array in the Vue component; click on the numbers and / or operators on the split user interface 100; use the push method of the array to store the clicked number or operator into propertyList. Alternatively, click on the properties on the split user interface 100, and a push of an object including the property name and / or property value is required. In this embodiment, preferably, first define a propertyList array to store all the elements required to form the formula. Each time a number or operator on the upper left page 1011 or a single property on the right page 102 is clicked, store it into propertyList through the push method of the array. If it is a number or operator, just push the corresponding number or operator. If it is a property, a push of an object including at least one of the property name and property value is required to facilitate echo display and background storage; Traverse the propertyList array through V-for, and wrap each element of the formula with a span tag and present it on the split user interface 100; On the split user interface 100, when the mouse hovers over any span element, a clear button will appear. According to actual needs, the clear button can be clicked to delete the span element, and the position order of each span element can be changed by dragging according to actual needs to rectify the formula. Among them, deleting the span element specifically means: passing the element index index as a parameter into the click event, and using propertyList.splice(index,1) to delete the element. And each element can be dragged to change the position order. Set the draggable attribute of the span element to draggable=`true`, and add ondragover, ondrag, and ondrop events. Among them, in the ondrag event, store the dragged element and its position index dragobj:{obj,index}. And write the e.preventDefault() code block in the ondragover event function to prevent the default event. In the ondraop event function, swap the positions of the dragged element and the target element position targetIndex through this.propertyList.splice(dragobj.index,1);this.propertyList.splice(0, targetIndex, dragobj.obj); to facilitate the user to rectify the formula.

[0037] Preferably, it is possible to determine the list array composed of the formulas and the click and / or drag events of the span tags presented in the split user interface 100.

[0038] In this embodiment, a development system 1 based on a Vue formula editor is further provided, including a Vue component module 10 for creating Vue components; a definition array module 20 for storing elements required by the formulas, where the array is a propertyList array; a V-for module 30 that traverses the array through the V-for module 30, wraps the elements of the formulas with inline tags and presents them in the split user interface 100, where the inline tags are span tags. Specifically, by traversing the propertyList array through V-for, each element of the formula is wrapped with a span tag and presented in the split user interface 100; and a formula rectification module 40 for the user to rectify the formula in the split user interface 100 according to actual needs. The specific functions and implementation methods of each module are similar to the method functions described above and will not be elaborated.

[0039] A development method and system based on a Vue formula editor provided by the present invention create Vue components and split the user interface 100, define an array for storing elements required by the formulas, and then, through V-for, traverse the array, wrap the elements of the formulas with inline tags and present them in the split user interface 100. Finally, in the split user interface 100, the user rectifies the formula according to actual needs, so that the user can not only better arrange the formulas according to requirements to obtain device operation data or efficiency, but also rectify exclusive formulas according to the characteristics of a certain type of device. Subsequently, abnormal results obtained through calculation can be used to notify personnel for maintenance in a timely manner. The present invention facilitates developers to reuse and optimize, improves development efficiency, and can perform formula processing and arrangement on device operation data, improving work efficiency, achieving the beneficial effects of simplicity, flexibility, and high efficiency.

[0040] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art can understand and implement it without creative efforts.

[0041] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on such an understanding, the essence of the above technical solution, or the part that contributes to the prior art, can be embodied in the form of a software product. The computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0042] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements for some of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A development method based on Vue formula editor, characterized in that: include: Create Vue components and split the user interface; Define an array, the array is used to store the elements required by the formula; Traversing the array through V-for, wrapping the elements of the formula with inline tags and presenting them in the split user interface; The formula is rectified in the user interface after the split.

2. The development method based on Vue formula editor according to claim 1, characterized in that: The creation of Vue components and splitting of the user interface specifically include: Create a page for Vue components; The page is split into a left page and a right page through HTML tags, wherein the left page after the split is used for the operation and presentation of the formula, and the right page after the split is used to present a specific attribute list or the result generated by the formula, and the left page is divided into an upper left page and a lower left page, the upper left page is used to present specific numbers and operators, and the lower left page is used to display the formula.

3. The development method based on Vue formula editor according to claim 1, characterized in that: The definition array is used to store the elements required by the formula, specifically including: In the Vue component, define the array as a propertyList array; Click on the numbers and / or operators on the split user interface; The clicked number or the clicked operator is stored in propertyList through the push method of the array.

4. The development method based on Vue formula editor according to claim 3 is characterized in that: After defining the array as a propertyList array, the method further includes: clicking on the split property on the user interface, and pushing an object including the property name and / or property value.

5. The development method based on Vue formula editor according to claim 1, characterized in that: The traversing the array by V-for, wrapping the elements of the formula with inline tags and presenting them on the split user interface specifically includes: The array is traversed by V-for, and each element of the formula is wrapped with a span tag and presented in the split user interface.

6. The development method based on Vue formula editor according to claim 1, characterized in that: The formula is rectified in the user interface after the splitting, specifically including: The array is deleted and modified by clicking and / or dragging events on the inline tag, wherein the inline tag is a span tag.

7. The development method based on Vue formula editor according to claim 6, characterized in that: The array is deleted and modified by clicking and / or dragging events on the inline tag, wherein the inline tag is a span tag, specifically including: In the split user interface, when the mouse hovers over any span element, a clear button will appear. Click the clear button to delete the span element, and each span element can be dragged to change its position order to correct the formula.

8. The development method based on Vue formula editor according to claim 7, characterized in that: Deleting the span element specifically includes: passing the element index index as a parameter into the click event, and using propertyList.splice(index,1) to delete the element.

9. The development method based on Vue formula editor according to claim 1, characterized in that: The development method based on the Vue formula editor also includes: determining a list array composed of the formulas and click and / or drag events of span tags presented in the split user interface.

10. A development system based on Vue formula editor, characterized in that: include: A Vue component module, which is used to create a Vue component and split the user interface; An array definition module, wherein the array definition module is used to define an array and store elements required by the formula; A V-for module, wherein the V-for module traverses the array, and wraps the elements of the formula with inline tags and presents them in the split user interface; A formula rectification module is used to rectify the formula in the split user interface.

Images