Dynamic flow chart creating method and device based on JavaScript

Abstract

The invention belongs to the technical field of ERP (Enterprise Resource Planning), and relates to a dynamic flow chart creation method and device based on JavaScript, computer equipment and a storage medium, and the method comprises the following steps: defining a plurality of templates; according to the template, a rule table is defined, and the rule table is used for matching the flow chart template; judging whether business data is acquired at the moment; when business data is obtained at the moment, template matching is carried out, after template matching succeeds, a template ID is output, and then template copying is carried out; and distributing UI style information of the flow chart, extracting a public style from the public style pool, outputting the public style to a front end, and performing UI rendering to form the dynamic flow chart. Based on a visual page, flow chart imaging and flow chart clickability are realized, the interaction efficiency is improved, and collaborative operation can be improved; the flow chart can be visually seen, certain operability style adjustment, flow adjustment and the like are achieved, and operability is higher.

Description

Technical Field

[0001] The present invention relates to the field of ERP technology, and in particular to a method, device, computer equipment and storage medium for creating a dynamic flowchart based on JavaScript. Background Art

[0002] Generally speaking, enterprises have many rules and regulations, and their business processes are relatively complex. The business processes in each business scenario are diverse. When using ERP management tools, users need to understand the processes in various scenarios in advance when using the system. The investment is large, the process branches are complicated, and there is usually no clear indication of the status of the process documents.

[0003] In the prior art, for example, e-chart cannot flexibly display flowcharts while having the function of configuring jumps to the source system processing page. For example, when you see a node is "in progress", you want to jump to the details page immediately, and when you see a node is "completed", you want to jump to the management page immediately. These functions cannot be achieved with e-chart; or the flowchart tools that already exist on the market are mostly only applicable to their own systems, and cannot be used for other systems after simple configuration. Other applications on the market cannot have the characteristics of formula display of the overall company flowchart, and at the same time have the highly compatible, configurable and operable dynamic process function of process rules, nor can they realize the matching use of flowchart templates and the flexible expansion of node status. The main disadvantage of the prior art is that it cannot have both high compatibility and high configurability when displaying flowcharts. Enterprises urgently need standardized collaborative office tools that are highly compatible, flexibly configurable, and applicable to ERP management systems. Summary of the invention

[0004] The purpose of the embodiments of the present invention is to propose a method, device, computer equipment and storage medium for creating a dynamic flowchart based on JavaScript, so as to solve the problem that the prior art cannot achieve both high compatibility and high configurability when displaying flowcharts.

[0005] In order to solve the above technical problems, the present invention provides a method for creating a dynamic flowchart based on JavaScript, which adopts the following technical solution, including:

[0006] Defining a plurality of templates, wherein the templates are used to support configuration of flowchart nodes and flowchart edges;

[0007] According to the template, a rule table is defined, and the rule table is used to match the flow chart template;

[0008] Determine whether the business data was obtained at that time;

[0009] When the business data is obtained, template matching is performed. After the template matching is successful, the template ID is output and the template is copied.

[0010] Assign flowchart style information, extract common styles from a common style pool, output the common styles to the front end, perform UI rendering, and form a dynamic flowchart.

[0011] Preferably, the step of defining multiple templates specifically includes:

[0012] By defining the flowchart template ID and flowchart template name in the database;

[0013] Enter the flowchart node configuration according to the flowchart template ID;

[0014] According to the flowchart nodes, enter the flowchart node edges;

[0015] Save the flowchart template.

[0016] Preferably, the step of defining a rule table according to the template specifically includes:

[0017] Select the flowchart template ID from the database;

[0018] The database scripting language is added by the flowchart template ID to match the business scenario;

[0019] Save the rules table;

[0020] During operation, when a business scenario occurs, the microservices deployed in the server allocate flowchart templates according to the rules.

[0021] Preferably, the step of determining whether the business data is acquired at that time specifically includes:

[0022] Use microservices to monitor in real time whether users have entered business data that does not match the flowchart template ID;

[0023] If a match is found, then end, otherwise proceed to the next step;

[0024] The microservice reads the flowchart rule table according to the Java language program, and reads the flowchart template ID according to the rule table;

[0025] Match the business data with the flowchart template ID.

[0026] Preferably, the steps of obtaining the business data, performing template matching, outputting the template ID after the template matching is successful, and then performing template copying specifically include:

[0027] After the match is successful, the Java program obtains the output template ID, and the Java program copies the flowchart template data to the flowchart business table according to the template ID;

[0028] Copy the flowchart template nodes to the flowchart business node table;

[0029] Copy the flowchart node edge template table to the flowchart node edge business table;

[0030] Save the flowchart node table and flowchart node edge table.

[0031] Preferably, the steps of allocating flowchart style information, extracting a common style from a common style pool, outputting the common style to a front end, performing UI rendering, and forming a dynamic flowchart specifically include:

[0032] After the Java program reads the flowchart data, flowchart node data and flowchart node edge data according to the template ID;

[0033] Read the flowchart style from the public style pool in the Oracle database;

[0034] Convert common styles into UI front-end language in Java programs;

[0035] Send the converted language to the UI front end;

[0036] The UI front end compiles the language into a visual page;

[0037] The visualization page is presented to the user through Vue.

[0038] In order to solve the above technical problems, the present invention also provides a dynamic flowchart creation device based on JavaScript, which adopts the following technical solution, including:

[0039] A definition module, used to define multiple templates, including a flowchart template, a flowchart node template, and a flowchart node edge template, wherein the template is used to support configuration of flowchart nodes and flowchart edges;

[0040] A rule module is used to define a rule table according to the template, wherein the rule table is used to match the flowchart template, and the rule table includes a flowchart matching business rule table, a flowchart classification rule table, a flowchart node classification rule table, a flowchart node right state rule table, a flowchart node right state legend table, a flowchart node detail acquisition rule table, a tree diagram SQL rule table, a flowchart node link table, a flowchart node link additional table, and a flowchart node link parameter table;

[0041] A judgment module is used to judge whether the business data is obtained at that time;

[0042] The matching module is used to obtain the business data at that time, and then perform template matching. After the template matches successfully, the template ID is output and the template is copied;

[0043] The allocation module is used to allocate flowchart style information, extract common styles from the common style pool, output the common styles to the front end, perform UI rendering, and form a dynamic flowchart.

[0044] Preferably, the allocation module comprises:

[0045] The reading module is used by the Java program to read the flowchart data, flowchart node data and flowchart node edge data according to the template ID;

[0046] The style module is used to read the flowchart style from the public style pool in the Oracle database;

[0047] The conversion module is used to convert the common styles into the UI front-end language in the Java program;

[0048] The sending module is used to send the converted language to the UI front end;

[0049] Compilation module, used by the UI front end to compile the language into a visual page;

[0050] The presentation module is used to present the page to the user.

[0051] In order to solve the above technical problems, the present invention also provides a computer device, which adopts the technical solution described below, including a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, it implements the steps of the above-mentioned JavaScript-based dynamic flowchart creation method.

[0052] In order to solve the above technical problems, the present invention also provides a computer-readable storage medium, which adopts the technical solution described below, and stores computer-readable instructions on the computer-readable storage medium. When the computer-readable instructions are executed by the processor, the steps of the above-mentioned JavaScript-based dynamic flowchart creation method are implemented.

[0053] Compared with the prior art, the present invention mainly has the following beneficial effects: it has the flowchart function of E-chat, which is further enhanced, and at the same time realizes dynamic configuration of flowcharts, compatibility, and is suitable for other management systems, which can improve user experience and be put into production as soon as possible; it realizes friendly interaction with users based on front-end methods such as vue.js and ElementUi, and has excellent user interaction capabilities; based on visual pages, it realizes flowchart graphics, flowcharts are clickable, and interaction efficiency is improved, which can improve collaborative work; in addition to being able to intuitively see the flowchart, it also has certain operability style adjustment, process adjustment, etc., and is more operable. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] In order to more clearly illustrate the scheme in the present invention, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present invention. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0055] Figure 1 It is a flowchart of an embodiment of a method for creating a dynamic flowchart based on JavaScript of the present invention;

[0056] Figure 2 It is a schematic diagram of the underlying operation logic of a flowchart of the method for creating a dynamic flowchart based on JavaScript of the present invention;

[0057] Figure 3 It is a schematic diagram of a tree node combined with a flowchart in the method for creating a dynamic flowchart based on JavaScript of the present invention;

[0058] Figure 4 It is a flowchart menu function schematic diagram of the JavaScript-based dynamic flowchart creation method of the present invention;

[0059] Figure 5 It is a schematic diagram of color settings used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0060] Figure 6 is a schematic diagram of color setting details used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0061] Figure 7 It is a schematic diagram of the data structure used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0062] Figure 8It is a schematic diagram of the running process of the dynamic flowchart used in the dynamic flowchart creation method based on JavaScript of the present invention;

[0063] Fig. 9 It is a user-side schematic diagram for simultaneously displaying multiple flowcharts used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0064] Fig.10 It is a user-side schematic diagram of a flowchart display used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0065] Fig.11 It is a schematic diagram of height setting used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0066] Fig.12 It is a schematic diagram of node state setting used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0067] Fig.13 It is a flowchart configuration schematic diagram used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0068] Fig.14 It is a schematic diagram of node configuration used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0069] Fig.15 It is a schematic diagram of edge configuration used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0070] Fig.16 It is a schematic diagram of link configuration used in the JavaScript-based dynamic flowchart creation method of the present invention;

[0071] Fig.17 It is a structural schematic diagram of an embodiment of a dynamic flowchart creation device based on JavaScript of the present invention;

[0072] Fig.18 It is a schematic structural diagram of an embodiment of a computer device of the present invention. DETAILED DESCRIPTION

[0073] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present invention; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present invention; the terms "including" and "having" and any variations thereof in the specification and claims of the present invention and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present invention or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0074] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present invention. The appearance of the phrase in various places in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0075] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings.

[0076] It should be noted that the JavaScript-based dynamic flowchart creation method provided in the embodiment of the present invention is generally executed by a server / terminal device, and accordingly, the JavaScript-based dynamic flowchart creation device is generally set in the server / terminal device.

[0077] It should be understood that the number of terminal devices, networks and servers is only illustrative. Depending on the implementation requirements, there can be any number of terminal devices, networks and servers.

[0078] Embodiment 1

[0079] Continue to refer Figure 1 , shows a flowchart of an embodiment of a method for creating a dynamic flowchart based on JavaScript of the present invention. The method for creating a dynamic flowchart based on JavaScript comprises the following steps:

[0080] Step S1, defining multiple templates.

[0081] In some optional implementations, the template includes a flowchart template, a flowchart node template, and a flowchart node edge template, and the template is used to support configuration columns. A flowchart template refers to a flowchart template generated by a requirements consultant based on preliminary research results in a project, a flowchart node template refers to configuration items of each node in the flowchart, and a flowchart node edge template refers to configuration items of lines used to connect each node.

[0082] In this embodiment, step S1, defining multiple templates may further include the following steps:

[0083] S11. By defining the flowchart template ID and the flowchart template name in the database.

[0084] Databases include: Oracle database, ACCESS database, SQL database, DB2 data, Sybase, mysql, MariaDB, VF, SqlServer, SQLite, database, also known as data management system, is a data collection in which the processed data is stored together in a certain way, which can be shared by multiple users and minimize redundancy. In short, it can be regarded as an electronic file cabinet - a place to store electronic files. This embodiment uses mysql. MySQL is a relational database management system. The SQL language used by mysql is the most commonly used standardized language for accessing databases. Its advantages are small size, fast speed, open source, etc.

[0085] S12. Enter the flowchart node configuration according to the flowchart template ID.

[0086] The flowchart nodes include node ID, flowchart ID, classification code, link code, identification, data type, node name, node alias, node x-axis, node y-axis, node remarks, node size, node shape type, node right status configuration, node left icon configuration, whether the node is disabled, whether the node is hidden, whether the node is required, and other information, which are entered by the user or consultant in the system interface.

[0087] S13. Enter the flow chart node edges according to the flow chart nodes.

[0088] Through the system interactive interface, the MySQL database enters the flow chart node edges.

[0089] S14. Save the flowchart template.

[0090] Write the data into the flowchart template table of the MySQL database through the Java program.

[0091] Step S2: define a rule table according to the template.

[0092] During specific implementation, the rule tables include flowchart matching business rule table, flowchart classification rule table, flowchart node classification rule table, flowchart node right side status rule table, flowchart node right side status legend table, flowchart node details acquisition rule table, tree diagram SQL rule table, flowchart node link table, flowchart node link additional table, flowchart node link parameter table, etc.

[0093] In this embodiment, step S2, defining a rule table according to a template, may further include the following steps:

[0094] S21. Select a flowchart template ID from the database.

[0095] The Java background program receives the flowchart template ID, matches it through the programmed program logic, and selects the flowchart template ID from the database.

[0096] S22. Add a database scripting language based on the flowchart template ID to match the business scenario.

[0097] The MySQL DML language is used to match the flowchart template with the rule table.

[0098] S23. Save the rule table.

[0099] Store the rule table in the mysql database.

[0100] S24. During operation, when a business scenario occurs, the microservices deployed in the server allocate flowchart templates according to the rules.

[0101] The prepared Java program reads the DML language of the rule table for parsing, and the Java program makes business scenario judgments based on the parsed results.

[0102] Step S3, determining whether the business data is obtained at that time.

[0103] In this embodiment, step S3, determining whether the business data is acquired at that time, may further include the following steps:

[0104] S31. Use microservices to monitor in real time whether the user has entered business data that does not match the flowchart template ID

[0105] Microservices refer to servers that deploy Java programs.

[0106] S32: If a match is found, the process ends; otherwise, the process goes to step S33.

[0107] The written Java program reads the flowchart rule table in the MySQL database, and then the Java program combines the rules with the business scenario to obtain the flowchart template ID.

[0108] S33. The microservice reads the flowchart rule table according to the Java language program, and reads the flowchart template ID according to the rule table.

[0109] Microservices is a fine-grained service architecture that splits an application into a series of small, independent services, each of which runs in its own process and communicates through a lightweight communication mechanism. In a microservice architecture, interactions and data exchange between services are usually implemented through API calls. Reading a flowchart rule table according to a Java language program refers to accessing a database or data storage system that stores flowchart rules through a Java program to obtain relevant information about the flowchart. This information may include the template ID, node information, connection relationships, etc. of the flowchart. The flowchart template ID is an identifier that uniquely identifies the template of the flowchart. It is usually associated with a flowchart and is used to retrieve the corresponding template information from a database or data storage system. By obtaining the flowchart template ID, the Java program can further read the flowchart template and generate the corresponding flowchart based on the template. In a microservice architecture, a Java program can be used as part of a service to provide access to the flowchart rule table. Other services can obtain the required flowchart information by calling the Java program's API and perform corresponding operations based on the information obtained. This microservice-based architecture is flexible and scalable. By splitting the application into multiple independent services, each service can independently handle specific business functions and can be independently deployed and expanded according to needs. At the same time, by using Java programs to read the flowchart rule table, the generation and management of flowcharts can be easily realized, improving development efficiency and flexibility of use.

[0110] S34. Match the business data with the flowchart template ID.

[0111] Matching business data to a flowchart template ID means associating and matching the actual business data with the flowchart template. A flowchart template is a graphical representation of a business process that describes the relationship and sequence between the various steps. By matching business data to a flowchart template, you can better understand and analyze the business process for optimization and management. Specifically, the steps to match business data to a flowchart template ID include:

[0112] Determine the business data and flowchart template that need to be matched; collect relevant business data, such as order information, customer information, etc.; classify and organize the business data according to the steps of the flowchart template; match and associate the organized business data with the flowchart template; analyze and optimize based on the matching results to improve the efficiency and accuracy of the business process. Matching business data with the flowchart template ID is a method of associating and matching actual business data with the flowchart template, which helps to better understand and analyze business processes and improve work efficiency and accuracy.

[0113] Step S4, when the business data is obtained, template matching is performed. After the template matching is successful, the template ID is output and the template is copied.

[0114] In this embodiment, step S4, when the business data is obtained, template matching is performed, and after the template matching is successful, the template ID is output, and then the template copying may further include the following steps:

[0115] S41. After the match is successful, the Java program obtains the output template ID, and the Java program copies the flowchart template data to the flowchart business table according to the template ID.

[0116] When the Java program successfully matches certain conditions, it will obtain the output template ID. Then, based on this template ID, the Java program will copy the flowchart template data to the flowchart business table. The purpose of this is to facilitate subsequent business processing or data analysis. Successful matching and obtaining template ID: After the Java program performs certain operations (such as data comparison, pattern matching, etc.), if it successfully matches the preset conditions, it will obtain a template ID. This template ID may be a string or a number, which uniquely identifies the template that has successfully matched. Copy the flowchart template data to the business table based on the template ID: Once the template ID is obtained, the Java program will start to retrieve data from the place where the flowchart template data is stored (it may be a database or a file system). Then, the program will insert the retrieved data into the flowchart business table. This business table is usually to support subsequent business processing or data analysis, such as editing, viewing, and deleting flowcharts. In this way, a large amount of data and business processes can be managed and processed flexibly.

[0117] S42: Copy the flowchart template nodes to the flowchart business node table.

[0118] The written java program copies the flowchart template node information, and then writes the flowchart template node information into the flowchart business node table in the mysql database.

[0119] S43, copying the flowchart node edge template table to the flowchart node edge business table.

[0120] The written java program copies the flowchart template node edge information, and then writes the flowchart template node edge information into the flowchart business node writing table in the mysql database.

[0121] S44. Save the flowchart node table and the flowchart node edge table.

[0122] Step S5, allocating flowchart style information, extracting common styles from the common style pool, outputting the common styles to the front end, performing UI rendering, and forming a dynamic flowchart.

[0123] In this embodiment, step S5, allocating flowchart style information, extracting common styles from a common style pool, outputting the common styles to the front end, performing UI rendering, and forming a dynamic flowchart may further include the following steps:

[0124] S51, the Java program reads the flowchart data, flowchart node data and flowchart node edge data according to the template ID.

[0125] The java program reads the flowchart information, flowchart node information, and flowchart node edge information from the mysql database according to the template ID.

[0126] S52. Read the flowchart style from the public style pool in the Oracle database.

[0127] The Java program reads the flowchart style information from the flowchart style table in the MySQL database according to the template ID.

[0128] S53. Convert the common style into UI front-end language in the Java program.

[0129] The java program reorganizes the script language stored in the mysql database into a UI front-end language adapted to vue according to the html format.

[0130] S54. Send the converted language to the UI front end.

[0131] The Java program sends the converted language information to the UI front end, i.e. the front end program, through an http request.

[0132] S55. The UI front end compiles the language into a visual page.

[0133] The front end calls the two-way binding function of Vue to achieve visual page rendering.

[0134] S56. Present the visualization page to the user through Vue.

[0135] Use the JavaScript framework vue.js to display data in a visual form on the web page and present it to the user. vue is a popular front-end framework that helps developers quickly build user interfaces. With vue, developers can use components to build web pages, and these components can be reused, which greatly improves development efficiency. Visual page presentation is one of vue's strengths. With vue, data can be displayed in the form of charts, graphs, tables, etc., and the style and behavior of these visualizations can be customized. For example, vue can be used to display a dynamically updated line chart that can dynamically adjust the shape and color of the line according to the background data. In addition to displaying data, vue can also be used to process user input. When users click, drag, or enter data on the visualization page, vue can capture these events and respond, and then update the background data or update the visualization elements on the page. By presenting the visualization page to the user through vue, users can see the data and information more intuitively, and can easily interact with the data, thereby achieving a better user experience.

[0136] Figure 2 This is a schematic diagram of the underlying operation logic of a flowchart of the method for creating a dynamic flowchart based on JavaScript of the present invention. Figure 2 As shown, first set the template <set the main flowchart, set the flowchart nodes, set the flowchart edges> and store, then set the rules <set the main flowchart matching rules, set the node status rules, set the legend and jump link> and store. When the business data is loaded, the matching function is automatically triggered. The system matches the templates in sequence. After the match is successful, the template ID is output, and then the template is copied <create flowchart business data, create main flowchart data, create node data, create edge data> and stored. At the same time, continue to allocate style information, take the public style <container style, theme style, node style, edge style> from the public style pool, and then output it to the front end for UI rendering. Users can perform the next step of jump processing, modify the style, etc. based on the system allocation.

[0137] The benefits of such a design are: first, when setting the template, the nodes and edges are separated, the complex data structure becomes simpler, and the scalability is improved; second, when setting the rules, the rules such as setting the main process template matching rules and setting the node status rules are partitioned and autonomous, which is conducive to reducing the risk of confusion during the configuration of the rules; third, after the business data is loaded, the template matching operation is performed, and after the match is successful, the template is copied and the business data is associated at the same time. During this period, the system only needs to focus on simple business data without paying attention to styles and old data, which is conducive to improving performance during execution.

[0138] Figure 3 This is a schematic diagram of a tree node combined with a flowchart in the method for creating a dynamic flowchart based on JavaScript of the present invention. Figure 3 As shown, the left side is business data, and you can search for a flowchart by clicking on the business data. If there is no flowchart, it is considered new data and allocated first. After allocation once, it will not be allocated again later, but you can use "Rematch", which will load the data on the right after clicking it; the specific information of the flowchart is displayed on the right.

[0139] The advantages of this design are: first, data will only be loaded after being clicked, and it will identify whether data needs to be allocated when loading, which is beneficial for systems with old data and some unnecessary allocation of process information data, saving this part of the cost; and it will only be allocated once, and will not cause memory waste. Second, the flowchart is displayed on the right, and the view can be zoomed in and out, which is conducive to a better user experience and more intuitive business process diagram analysis.

[0140] Figure 4 1 is a flowchart menu function diagram of the dynamic flowchart creation method based on JavaScript of the present invention. Figure 4 As shown, right-click the node and a button group pops up: "Enter details page: click to enter the details page corresponding to this node", "Enter management page: click to enter the management page corresponding to this node", "Left: click to move the left side of the node 40 pixels to the left", "Right: click to move 40 pixels to the right", "Up: click to move up 20 pixels", "Down: click to move down 20 pixels", "Edit name: click to enter the name editing page", "Edit remarks: click to enter the remarks filling page", "Edit description: click to enter the description management page", "Subsequent mark: click to enter the subsequent mark page, you can mark the node with a mark".

[0141] The advantage of this design is that the visualized flowchart nodes allow you to see at a glance which business node the data is currently in, and you can use the "button group" to perform corresponding operations on the current business node.

[0142] Figure 5 It is a schematic diagram of color settings used in the JavaScript-based dynamic flowchart creation method of the present invention; Figure 6 Detailed diagram of color settings used in the JavaScript-based dynamic flowchart creation method of the present invention. Figure 5 , Figure 6 As shown, after clicking "Color Settings", you will enter the style settings page, which provides various configurations for the flowchart: color, font, etc.

[0143] The advantages of such a design are: first, this setting only needs to be set once to affect all flowcharts. One setting and global use are conducive to certain control of the system style, while reducing the maintenance workload of operation and maintenance; second, it provides a more comprehensive setting, which can basically meet various personalized settings, which is conducive to the use of various system styles.

[0144] Figure 7 This is a schematic diagram of the data structure used in the JavaScript-based dynamic flowchart creation method of the present invention. Figure 7As shown, the data structure is divided into four layers. The first layer is a dynamic table, which defines: flowchart template <flowchart ID, classification code, theme, container theme, element in container, container, source>, node template <node ID, flowchart ID, classification code, link code, identifier, data type, node name, node alias, node x-axis, node y-axis, node remarks, node size, node shape type, node right status configuration, node left icon configuration, whether the node is disabled, whether the node is hidden, whether the node is required), line table template (edge ​​ID, flowchart ID, edge source, edge target, edge shape, line source orientation, edge target orientation, edge name, edge type) and other basic information as one of the basic sources to support configuration columns. ; The second layer of matching rule storage, definition: flowchart matching business rule table (flowchart matching business rule table ID, flowchart ID (template), SQL basis rule, flowchart matching business rule description), flowchart classification rule table (flowchart classification rule table ID, flowchart classification code, SQL basis rule, flowchart classification rule description), flowchart node state rule table (flowchart node state rule table ID, flowchart node unique identifier, SQL basis rule, SQL basis rule description, flowchart node right state rule legend table ID, node state sequence), flowchart node right state legend table (flowchart node right state legend table ID, ico path, ico meaning, type) and other basic information;The third layer defines the storage of flowchart information in use, including: flowchart business table (flowchart business table ID, business ID, flowchart ID, flowchart template ID, whether it has been diverted, whether it has been completed), flowchart diagram (flowchart ID, classification code, theme, container element, element in container, container (div) unique identifier, configuration source), flowchart node (node ​​ID, flowchart ID, classification code, link code, node identifier, data type, name, alias, x-axis, y-axis, remarks, size, shape type, state configuration, state legend table ID, icon configuration, whether it is disabled, whether it is hidden, whether it is required, private border color, private fill color), node edge table (edge ​​table ID, flowchart ID, source, target, shape, source orientation, target orientation, name, type), flowchart layout configuration table (layout configuration table ID, flowchart ID, type, direction, alignment center, Horizontal distance, vertical distance, layout point, layout margin, whether overlap is allowed), flowchart node prompt table (node ​​prompt table ID, node ID, subject, details), flowchart node link table (flowchart node link table ID, flowchart node link code, flowchart node link name, flowchart node link (key configuration, must correspond to the path registered in the routing file)), flowchart node link parameter table (flowchart node link parameter table ID, flowchart node link table ID, flowchart node link parameter code, flowchart node link parameter name, flowchart node link parameter rule), flowchart node link additional table (flowchart node link additional table ID, flowchart node link table ID, flowchart node link additional type code, flowchart node link additional type name, flowchart node additional link (key configuration, must correspond to the path registered in the routing file));The fourth layer stores various styles, defining: flowchart container (div) style sheet (flowchart container (div) style sheet ID, flowchart ID (public ID = public), flowchart container (div) other styles [css statement]), flowchart theme (span) style sheet (flowchart theme (span) style sheet ID, flowchart ID (public ID = public), flowchart theme (span) style [css statement]), flowchart node name configuration table (flowchart node name configuration table ID, flowchart node ID (public ID = public), node name configuration offset, node name style sheet ID), flowchart node name style sheet (node ​​name style sheet ID, node name font size, node name mouse shape, node name font thickness, node name horizontal shadow offset, node name vertical shadow offset, node name shadow color, node name shadow fuzziness), flowchart node note configuration table (flowchart node note configuration table ID, flowchart node ID (public ID = public) (private = chart_id), flowchart node note upper padding, flowchart node note style table ID), flowchart node note style sheet (flowchart node note style sheet ID, flowchart node note font size, flowchart node note font color), flowchart node style sheet (flowchart node style sheet ID, flowchart node ID, flowchart node fill color, flowchart node inner margin, flowchart node border width, flowchart node border radius, flowchart node border color), flowchart node left rectangle configuration table (flowchart node left rectangle configuration table ID, flowchart node ID (public ID = public) (private = chart_id), flowchart node Whether the left rectangle of the point is displayed, the width of the left rectangle of the flowchart node, the fill color of the left rectangle of the flowchart node, the rounded corners of the left rectangle of the flowchart node), the flowchart node edge style table (the flowchart node edge style table ID, the flowchart node edge table ID (public ID = public), the flowchart node edge color), the flowchart node edge font color (the flowchart node edge font style table ID, the flowchart node edge table ID (public ID = public), the flowchart node edge font y-axis offset, the flowchart node edge font color, the flowchart node edge font size). ;

[0145] The benefits of such a design are: First, the template table separates nodes from edges, which reduces complexity and improves the flexibility of node and edge combination. The main process and node edges are one process corresponding to multiple node edges, forming the most basic one-to-many relationship, which is conducive to reducing the difficulty of understanding and improving configuration flexibility. Second, in the rule table, each rule is placed in a variety of tables, which is conducive to adapting to the matching requirements in different business scenarios; the matching method uses the most flexible SQL data source language for parsing and matching, which is similar to the stored procedure of the database, and can be flexibly adapted to various management systems on the market. Third, the "database table" and "style sheet" in the business use stage are a dependency relationship, but not a strong dependency relationship. The style will be read only when it is used. In this way, when new data uses the flowchart template, there is no need to consider the style, only the business itself needs to be focused on, which reduces the complexity. Fourth, the style sheet is independent of the system, which means that it can be independently configured separately, which is conducive to stripping business attributes and making it easier to be compatible with other system styles.

[0146] Figure 8 This is a schematic diagram of the dynamic flowchart operation process used in the JavaScript-based dynamic flowchart creation method of the present invention. Figure 8 As shown in the figure, when the user clicks on a business, the system finds all the documents under this business and assigns them to each sub-thread for processing. When the thread processes, for the node status, only when the first unfinished node status is captured, the rule for obtaining the latest node status is executed, and then the node status is updated according to the status returned by the rule. After one is processed, it is output. Then the processing results of the threads are returned to the memory in sequence. Here, heap storage is used until all threads return the processing results, and then the results are output;

[0147] The benefits of this design are: first, there may be multiple business documents under one business ID, and distributing the business documents to multiple threads for processing can effectively improve processing efficiency; second, in thread processing, only the first unfinished node status is processed instead of updating the status of all process nodes, which improves operating efficiency. At the same time, the system provides a separate function to update the status of all nodes, which makes up for the risk of delayed status node updates.

[0148] Fig. 9 This is a user-side schematic diagram showing multiple flowcharts simultaneously used in the JavaScript-based dynamic flowchart creation method of the present invention. Fig. 9 As shown, click the "triangle symbol" to load the flowchart of all business documents under this process.

[0149] The advantage of this design is that you can intuitively see the functions of all process nodes with one click, and make certain comparisons with other processes.

[0150] Fig.10 It is a user-side schematic diagram of a flowchart display used in the JavaScript-based dynamic flowchart creation method of the present invention. Fig.10 As shown, when you click "Sub-Document", the flowchart of a single document is loaded.

[0151] The advantage of this design is that it is helpful when you only want to view one document and reduces interference from other processes.

[0152] Fig.11 Schematic diagram of height setting used in the JavaScript-based dynamic flow chart creation method of the present invention. Fig.11 As shown in the figure, when you click "Height Setting", you can adjust the height of all flowcharts. The advantage of such a design is that it is conducive to the user to freely adjust according to the predetermined height.

[0153] Fig.12 Schematic diagram of node state setting used in the JavaScript-based dynamic flow chart creation method of the present invention. Fig.12 As shown, when you click "Node Status Settings", you can adjust the node status of the flowchart.

[0154] The advantage of such a design is that it is conducive to dynamic configuration of node status. When the business scenario changes, there is no need to change the code, only the configuration logic needs to be modified to complete the node status configuration.

[0155] Fig.13 It is a flowchart configuration diagram used in the JavaScript-based dynamic flowchart creation method of the present invention. Fig.13 As shown in the figure, when you click "Template Settings" to enter the template settings page, you can "add templates, modify templates, and delete templates." The advantage of this design is that it is conducive to the configurability of templates.

[0156] Fig.14 Schematic diagram of node configuration used in the JavaScript-based dynamic flowchart creation method of the present invention. Fig.14 As shown in the figure, when you click "Node" to enter the node setting page, you can "add nodes, modify nodes, and delete nodes." The benefit of this design: It is conducive to the configurability of flowchart nodes.

[0157] Fig.15 Schematic diagram of edge configuration used in the JavaScript-based dynamic flow chart creation method of the present invention. Fig.15 As shown in the figure, when you click "node" to enter the edge setting page, you can "add edges, modify edges, and delete edges". The advantage of this design is that it is conducive to the configurability of flow chart edges.

[0158] Fig.16 Schematic diagram of link configuration used in the method for creating a dynamic flow chart based on JavaScript of the present invention. Fig.16 As shown in the figure, when you click "Link" to enter the link setting page, you can "add links, modify links, and delete links." The benefit of this design: it is conducive to the configurability of flowchart links.

[0159] When the user adds a new business data in the background, the application will synchronize the business data that meets the regulations to the tree node diagram according to the rules. At this time, the flowchart will not be allocated. When the user clicks the tree diagram node, a request is initiated to the background. After receiving this request, the background performs a series of judgments and allocations.

[0160] The beneficial effects of implementing this embodiment are as follows: it has the flowchart function of E-chat, which is further enhanced, and at the same time realizes dynamic configuration of flowcharts, compatibility, and is suitable for other management systems, which can improve user experience and be put into production as soon as possible; it realizes friendly interaction with users based on front-end methods such as vue.js and ElementUi, and has excellent user interaction capabilities; based on visual pages, it realizes flowchart graphics, flowcharts are clickable, and interaction efficiency is improved, which can improve collaborative work; in addition to being able to intuitively see the flowchart, it also has certain operability style adjustment, process adjustment, etc., and is more operable.

[0161] The present invention can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present invention can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present invention can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0162] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through computer-readable instructions, and the computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0163] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0164] Embodiment 2

[0165] Further references Fig.17 , as a response to the above Figure 1 The present invention provides an embodiment of a dynamic flowchart creation device based on JavaScript, and the device embodiment is similar to Figure 1 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0166] like Fig.17 As shown, the JavaScript-based dynamic flowchart creation device 60 of this embodiment includes: a definition module 61, a rule module 62, a judgment module 63, a matching module 64 and an allocation module 65. Among them:

[0167] A definition module 61, used to define multiple templates;

[0168] A rule module 62, used to define a rule table according to the template, and the rule table is used to match the flow chart;

[0169] A judgment module 63 is used to judge whether the business data is obtained at that time;

[0170] The matching module 64 is used to obtain the business data at that time, then perform template matching, and after the template matching is successful, output the template ID and then copy the template;

[0171] The allocation module 65 is used to allocate flowchart style information, extract common styles from the common style pool, output the common styles to the front end, perform UI rendering, and form a dynamic flowchart.

[0172] The beneficial effects of implementing this embodiment are as follows: it has the flowchart function of E-chat, which is further enhanced, and at the same time realizes dynamic configuration of flowcharts, compatibility, and is suitable for other management systems, which can improve user experience and be put into production as soon as possible; it realizes friendly interaction with users based on front-end methods such as vue.js and ElementUi, and has excellent user interaction capabilities; based on visual pages, it realizes flowchart graphics, flowcharts are clickable, and interaction efficiency is improved, which can improve collaborative work; in addition to being able to intuitively see the flowchart, it also has certain operability style adjustment, process adjustment, etc., and is more operable.

[0173] Embodiment 3

[0174] To solve the above technical problems, the embodiment of the present invention also provides a computer device. Fig.18 , Fig.18 This is a basic structural block diagram of the computer device in this embodiment.

[0175] The above-mentioned computer device 6 includes a memory 61, a processor 62, and a network interface 63 that are interconnected through a system bus. It should be noted that the figure only shows a computer device 6 having components of a memory 61, a processor 62, and a network interface 63, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to a microprocessor, an application specific integrated circuit (ASIC), a programmable gate array (FPGA), a digital processor (DSP), an embedded device, etc.

[0176] The computer device may be a desktop computer, a notebook computer, a PDA, a cloud server, etc. The computer device may interact with the user through a keyboard, a mouse, a remote control, a touch pad, or a voice control device.

[0177] The memory 61 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 61 may be an internal storage unit of the computer device 6, such as a hard disk or memory of the computer device 6. In other embodiments, the memory 61 may also be an external storage device of the computer device 6, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (FlashCard), etc. equipped on the computer device 6. Of course, the memory 61 may also include both the internal storage unit of the computer device 6 and its external storage device. In this embodiment, the memory 61 is generally used to store the operating system and various application software installed on the computer device 6, such as computer-readable instructions of a dynamic flowchart creation method based on JavaScript, etc. In addition, the memory 61 can also be used to temporarily store various types of data that have been output or are to be output.

[0178] The processor 62 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips in some embodiments. The processor 62 is generally used to control the overall operation of the computer device 6. In this embodiment, the processor 62 is used to run the computer-readable instructions stored in the memory 61 or process data, such as running the computer-readable instructions of the JavaScript-based dynamic flowchart creation method.

[0179] The network interface 63 may include a wireless network interface or a wired network interface. The network interface 63 is generally used to establish a communication connection between the computer device 6 and other electronic devices.

[0180] The beneficial effects of implementing this embodiment are as follows: it has the flowchart function of E-chat, which is further enhanced, and at the same time realizes dynamic configuration of flowcharts, compatibility, and is suitable for other management systems, which can improve user experience and be put into production as soon as possible; it realizes friendly interaction with users based on front-end methods such as vue.js and ElementUi, and has excellent user interaction capabilities; based on visual pages, it realizes flowchart graphics, flowcharts are clickable, and interaction efficiency is improved, which can improve collaborative work; in addition to being able to intuitively see the flowchart, it also has certain operability style adjustment, process adjustment, etc., and is more operable.

[0181] Embodiment 4

[0182] The present invention also provides another embodiment, namely, providing a computer-readable storage medium, which stores computer-readable instructions, and the computer-readable instructions can be executed by at least one processor to enable the at least one processor to perform the steps of the JavaScript-based dynamic flowchart creation method as described above.

[0183] The beneficial effects of implementing this embodiment are as follows: it has the flowchart function of E-chat, which is further enhanced, and at the same time realizes dynamic configuration of flowcharts, compatibility, and is suitable for other management systems, which can improve user experience and be put into production as soon as possible; it realizes friendly interaction with users based on front-end methods such as vue.js and ElementUi, and has excellent user interaction capabilities; based on visual pages, it realizes flowchart graphics, flowcharts are clickable, and interaction efficiency is improved, which can improve collaborative work; in addition to being able to intuitively see the flowchart, it also has certain operability style adjustment, process adjustment, etc., and is more operable.

[0184] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the various embodiment methods of the present invention.

[0185] Obviously, the embodiments described above are only some embodiments of the present invention, rather than all embodiments. The preferred embodiments of the present invention are given in the accompanying drawings, but they do not limit the patent scope of the present invention. The present invention can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present invention more thorough and comprehensive. Although the present invention has been described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific embodiments, or to perform equivalent replacements for some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of the present invention, directly or indirectly used in other related technical fields, is also within the scope of patent protection of the present invention.

Claims

1. A method for creating a dynamic flowchart based on JavaScript, characterized in that: The steps include: Define multiple templates; According to the template, a rule table is defined, and the rule table is used to match the flow chart template; Determine whether the business data was obtained at that time; When the business data is obtained, template matching is performed. After the template matching is successful, the template ID is output and the template is copied. Assign flowchart style information, extract common styles from a common style pool, output the common styles to the front end, perform UI rendering, and form a dynamic flowchart.

2. The method for creating a dynamic flowchart based on JavaScript according to claim 1, characterized in that: The steps of defining multiple templates specifically include: By defining the flowchart template ID and flowchart template name in the database; Enter the flowchart node configuration according to the flowchart template ID; According to the flowchart nodes, enter the flowchart node edges; Save the flowchart template.

3. The method for creating a dynamic flowchart based on JavaScript according to claim 1, characterized in that: The step of defining a rule table according to the template specifically includes: Select the flowchart template ID from the database; The database scripting language is added by the flowchart template ID to match the business scenario; Save the rules table; During operation, when a business scenario occurs, the microservices deployed in the server allocate flowchart templates according to the rules.

4. The method for creating a dynamic flowchart based on JavaScript according to claim 1, characterized in that: The step of determining whether the business data is obtained at that time specifically includes: Use microservices to monitor in real time whether users have entered business data that does not match the flowchart template ID; If a match is found, then end, otherwise proceed to the next step; The microservice reads the flowchart rule table according to the Java language program, and reads the flowchart template ID according to the rule table; Match the business data with the flowchart template ID.

5. The method for creating a dynamic flowchart based on JavaScript according to claim 1, characterized in that: After the business data is obtained, template matching is performed. After the template matching is successful, the template ID is output, and then the steps of template copying specifically include: After the match is successful, the Java program obtains the output template ID, and the Java program copies the flowchart template data to the flowchart business table according to the template ID; Copy the flowchart template nodes to the flowchart business node table; Copy the flowchart node edge template table to the flowchart node edge business table; Save the flowchart node table and flowchart node edge table.

6. The method for creating a dynamic flowchart based on JavaScript according to claim 1, characterized in that: The steps of allocating flowchart style information, extracting a common style from a common style pool, outputting the common style to a front end, performing UI rendering, and forming a dynamic flowchart specifically include: After the Java program reads the flowchart data, flowchart node data and flowchart node edge data according to the template ID; Read the flowchart style from the public style pool in the Oracle database; Convert common styles into UI front-end language in Java programs; Send the converted language to the UI front end; The UI front end compiles the language into a visual page; The visualization page is presented to the user through Vue.

7. A dynamic flowchart creation device based on JavaScript, characterized in that: include: A definition module, used to define multiple templates, the templates include a flowchart template, a flowchart node template, and a flowchart node edge template, the flowchart template is used to support the configuration of flowchart nodes and flowchart edges; A rule module is used to define a rule table according to the template, wherein the rule table is used to match the flowchart template, and the rule table includes a flowchart matching business rule table, a flowchart classification rule table, a flowchart node classification rule table, a flowchart node right state rule table, a flowchart node right state legend table, a flowchart node detail acquisition rule table, a tree diagram SQL rule table, a flowchart node link table, a flowchart node link additional table, and a flowchart node link parameter table; A judgment module is used to judge whether the business data is obtained at that time; The matching module is used to obtain the business data at that time, and then perform template matching. After the template matches successfully, the template ID is output and the template is copied; The allocation module is used to allocate flowchart style information, extract common styles from the common style pool, output the common styles to the front end, perform UI rendering, and form a dynamic flowchart.

8. The JavaScript-based dynamic flowchart creation device according to claim 7, characterized in that: The allocation module comprises: The reading module is used by the Java program to read the flowchart data, flowchart node data and flowchart node edge data according to the template ID; The style module is used to read the flowchart style from the public style pool in the Oracle database; The conversion module is used to convert the common styles into the UI front-end language in the Java program; The sending module is used to send the converted language to the UI front end; Compilation module, used by the UI front end to compile the language into a visual page; The presentation module is used to present the page to the user.

9. A computer device comprising a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the JavaScript-based dynamic flowchart creation method as described in any one of claims 1 to 6 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by a processor, the steps of the JavaScript-based dynamic flowchart creation method according to any one of claims 1 to 6 are implemented.

Images