CN118519622A

CN118519622A - Low-code flowchart dynamic configuration and customized interactive system

Info

Publication number: CN118519622A
Application number: CN202410980343.2A
Authority: CN
Inventors: 廖万里; 金卓; 魏小彬; 林达南; 郑文锋; 陈鹏
Original assignee: Zhuhai Kingsware Information Technology Co Ltd
Current assignee: Zhuhai Jinzhiwei Artificial Intelligence Co., Ltd.
Priority date: 2024-07-22
Filing date: 2024-07-22
Publication date: 2024-08-20
Anticipated expiration: 2044-07-22
Also published as: CN118519622B

Abstract

The present invention discloses a low-code system for dynamic configuration of flowcharts and customized interaction, including a low-code page rendering module, a data structure definition module, a flowchart rendering module and a low-code page designer module; wherein the low-code page rendering module is used to render low-code pages; the data structure definition module is used to define the data structure required for the flowchart; the flowchart rendering module is used to initialize the diagram configuration of the process and the visualization module of the data for rendering the flowchart; the low-code page designer module is a designer, and the user edits the page by dragging. The present invention unifies the data structure and implementation mode, which helps to reduce the development cost of implementing a variety of similar flowchart solutions; at the same time, it combines the low-code page design in an event-based manner, and can implement different interaction logics for different nodes; in addition, the configuration is provided in a low-code manner, which is ready to use out of the box, reducing the code development work of the repeated parts.

Description

Low-code flow chart dynamic configuration and self-defined interaction system

Technical Field

The invention relates to the field of visual modeling, in particular to a system for dynamic configuration and custom interaction of a low-coding flow chart.

Background

Modern enterprises are increasingly focusing on digital transformation, and many information systems begin to adopt business flow diagrams for visual modeling. The flow chart can clearly show the service circulation steps and decision nodes, and effectively helps to manage and optimize the service processing flow.

Although there are some excellent flow chart rendering works in the market at present, the application of the flow charts is in different vertical fields, so that the event, node expansion mode, structural design and functional pertinence defined by different software developers on the flow charts are different, the integration work of different related flow charts is different, and may be introduced into different flow chart implementation modes and codes, and most of the implementation modes may be logic repetition, but the implementation modes are only developed and implemented separately because the implementation modes are difficult to unify from different industries or technical fields, and the development modes are often waste cost and have low efficiency. The reason exposes the following problems to be solved:

(1) The defining modes of the flow charts are different, and the flows of different systems in the same enterprise are difficult to integrate and reuse;

(2) The process nodes have single interaction function, and are inconvenient to customize according to the specific business industry or technical field;

(3) The data format and structure of the flow chart have no standard, and the expansibility and compatibility are poor;

(4) For flow modification, redevelopment of deployment is required to achieve, which is inefficient.

For example, "202111351513.3, a method for implementing a customized visual topological graph based on Antv, the technical scheme of Jiangsu province future network innovation institute" is an implementation method only aiming at the topological graph, when a user introduces the method to implement an implementation page aiming at the topological graph, if the user has new requirements at the moment, a scene of a workflow needs to be implemented, the method may not be implemented, because the method is only applicable to the layout mode, connection line and the like of the topological graph and the manner of the workflow.

Disclosure of Invention

The invention aims to overcome the defects and shortcomings of the prior art and provide a low-coding flow chart dynamic configuration and custom interaction system.

The aim of the invention is achieved by the following technical scheme:

the system for dynamically configuring and customizing interaction of the low-code flow chart comprises a low-code page rendering module, a data structure definition module, a flow chart rendering module and a low-code page designer module; wherein,

The low-code page rendering module is used for rendering the low-code page;

the data structure definition module is used for defining a data structure required by the flow chart;

The flow chart rendering module is used for initializing the chart configuration of the flow chart and rendering the visualization module of the data of the flow chart;

the low code page designer module, which is a designer, the user edits the page by dragging.

The low-code page rendering module has the following working processes:

step1, when entering a page, starting to load a page renderer;

Step 2, after loading the page renderer, reading JSONs corresponding to the pages from the database through the interface;

step 3, transmitting the page JSON to a page renderer, and rendering a page effect through the renderer;

Step 4, if the page has binding events in the design process, the rendered page monitors the corresponding events, and event processing is carried out according to the event processing function bound by the design; if no trigger event exists, the page rendering is completed.

The data structure definition module is used for defining configuration information required by the rendering of the flow chart, the whole configuration information is a JSON object, and the data structure definition module comprises: two main configurations of the initialization configuration data object and the flow chart entity data are provided, wherein the initialization configuration data object comprises a layout configuration, a state list and a node style configuration.

The data structure definition module operates in the following manner when the display of an RPA flow chart is realized and when the RPA flow chart can be started by clicking the starting node on the flow chart:

1) Adding components of the flow chart rendering module into a page, wherein the data structure of the page is an iframe of which the page contains a flow chart renderer;

2) Configuration initialization configuration data:

a. The nodes that need to initialize several data types to correspond to the task node types of RPA, assuming that there are 3 nodes: a start node, an end node and a task node;

b. respectively configuring green, gray and blue for a starting node, an ending node and a task node;

c. Defining a node state list, namely defining 3 states to be done, being done and being done respectively, and configuring corresponding colors for the 3 states, namely blue, red and green respectively;

3) Configuration flow diagram data source interface: the data returned by the interface needs to be object data, 2 arrays exist in the object, namely a node array and a connection array, and in the node data, a node state which can correspond to the state name configured above is needed;

4) Configuration start event: adding a monitoring node adding event in the low-code page designer module, judging that if the node is a 'start node', initiating a request to start an RPA flow, refreshing data of a 'flow chart data source interface' configured in 3 every 5 seconds after initiation to refresh the flow chart rendering module, and judging that if the end node is in an 'ended' state, stopping refreshing;

5) The node array in the data returned by the flow chart data source interface has 3 data, namely a start node, an end node and a task node, the connection array has2 data, and if the returned node data has the following sequential states from the start to the end: when completed, in progress, or to be done, the graphics on the flow chart rendering module will be displayed in blue, red, and green; if the sequential state is: when completed, that indicates the color will be green, green.

After the user obtains the flow chart data and the initialization configuration information, the flow chart rendering module embeds the flow chart data and the initialization configuration information into a page of the flow chart rendering module in an iframe mode through the low-code page rendering module, and the flow chart data and the initialization configuration information interact with the flow chart rendering module in the iframe through a window message sending mechanism.

The flow chart rendering module transmits flow chart data and initialization parameters to the flow chart rendering module when initializing a page, the flow chart rendering module renders the flow chart data and the initialization parameters into a flow chart, when clicking a node in the flow chart, the flow chart rendering module triggers the node to click an event, at the moment, the data of an event response is transmitted to the low-code page rendering module through a window message transmitting method, the low-code page rendering module serves as a parent page to monitor the event, and when triggered, the low-code page rendering module correspondingly processes related services.

The monitoring mechanism of the flow chart rendering module is in deep binding butt joint with the event of the low code page designer module, and the monitoring mechanism is as follows: in the interaction process of event definition and driving, a flow chart rendering module defines that an event is open to the outside through internal encapsulation, wherein the event comprises node clicking and saving; when the events are triggered, the events are communicated in a window message sending mode, data are sent to an external low-code page rendering module for interaction, and after the external low-code page rendering module monitors the events, the events are configured to execute corresponding actions based on the low-code page designer module for the event processing configured in advance for the page, wherein the actions comprise requesting an interface and opening a popup window.

The interaction process between the low-code page rendering module and the flow chart rendering module in the iframe is as follows:

(1) Entering a page, and acquiring flow chart initialization information from a server;

(2) After the initialization information is obtained, loading the iframe is started, and initialization data is transmitted to the inside of the iframe through a window message sending method;

(3) After entering the inside of the iframe, starting a flow chart renderer module to start rendering;

(4) After the flow chart is rendered, opening the event to the internal binding of the iframe, and opening the event to a low-code page rendering module of the parent page through a window message sending method;

(5) The low-code page rendering module of the parent page monitors an open event in the iframe and waits for a user operation triggering event;

(6) After the user operates, triggering an event, and immediately transmitting the event to a flow chart rendering module in the iframe;

(7) After responding to the event operation, the flow chart rendering module sends the corresponding event and data to the iframe;

(8) The iframe layer transmits the event and the data to the low-code page rendering module, and the service processing function corresponding to the page rendering allocation event responds to the user.

The working process of the low-code page design module is as follows:

S1, creating a new page in a page information table, and initially inputting the new page into a low-code page design module;

S2, dragging an iframe component from the component area in the low-code page design module, and putting the iframe component into the effect area;

S3, setting the attribute of the iframe as a page where the flow chart rendering module is located;

S4, adding monitoring of the events opened by the flow chart in an event panel of the iframe, and selecting a processing mode;

and S5, after the design is completed, page storage and receiving can be called, and the current page is stored in the page information table.

Compared with the prior art, the invention has the following advantages and beneficial effects:

1. the invention unifies the data structure and the realization mode, and is beneficial to reducing the development cost for realizing various flow chart-like schemes.

2. The invention combines the design of the low-code page in an event mode, and can realize different interaction logics aiming at different nodes.

3. The invention provides configuration in a low code mode, is used after unpacking, and reduces code development work of repeated parts.

4. The invention stores the flow chart structure, configuration, event and page configuration in a data mode, and can realize different service customization functions without packing and deploying again.

Drawings

FIG. 1 is a flow chart of a design-state business of a system for dynamic configuration and custom interaction of a low-coding flow chart according to the present invention.

FIG. 2 is a flow chart of an executable business of the system for dynamic configuration and custom interaction of the low-coding flow chart of the invention.

FIG. 3 is a workflow diagram of a low code page rendering module in a run state.

FIG. 4 is a workflow diagram of a data structure definition module.

FIG. 5 is a business logic diagram of the low code page rendering module and the flowchart rendering module described in the iframe.

FIG. 6 is a page design effect diagram of the low code page design module.

Fig. 7 is a diagram of a page information table structure.

Detailed Description

The present invention will be described in further detail with reference to examples and drawings, but embodiments of the present invention are not limited thereto.

As shown in fig. 1 to 6, the system for dynamically configuring and customizing interaction of the low-coding flow chart is a solution for realizing the dynamic configuration and the customization interaction of the flow chart based on the data driving and low-coding technology. The method adopts the standard JSON data format to define common elements of the flow, such as nodes, wires and attributes thereof, so that the flow diagram definition is independent of a specific system, and has good expansibility and reusability. Meanwhile, the scheme supports the rapid construction of the binding of various flow chart interaction behaviors through the low-code page designer, such as the opening of a custom attribute form by binding node events. In addition, the method adopts a modularized design, divides flow definition from rendering, and realizes loose coupling interaction among modules through an event-driven mechanism. The proposal integrally adopts the thought of data driving, and unifies and stores the information of the related elements of the flow, such as definition, forms and the like, in a database, thereby realizing the function of dynamic configuration

In this solution, four modules are mutually matched, which are respectively:

Module one: the low-code page rendering module is used for rendering the low-code page;

and a second module: the data structure definition module is used for defining a data structure required by the flow chart;

And a third module: the flow chart rendering module is used for initializing the chart configuration of the flow chart and rendering the visualization module of the data of the flow chart;

and a fourth module: a low code page designer module, which is a designer that a user can edit a page by dragging;

Through the four modules, the corresponding functions of the design state and the execution state are respectively completed to realize the core functions in the invention.

In the design state, the low-code page designer module configures page layout, reference components, data configuration (configuration is defined according to the data structure standard), interface configuration, event operation configuration and the like to complete the design of a flow chart page, and issues the flow chart page into a low-code page so that the low-code page designer module can be used for rendering in a code page rendering module, and the service flow of the low-code page designer module is as shown in figure 1.

In the execution state, during the process of loading the published flow chart page, the low-code page rendering module respectively reads configuration, flow chart data, events and the like, monitors related events, realizes the functions of rendering, operation and the like of the flow chart, and the business flow is as shown in fig. 2.

In the invention, four modules are used to realize the whole function in a matched way, and in the four modules, a unified data modeling module and an event driving mechanism are defined, wherein the decoupling of flow definition and operation is realized through the definition of a unified data structure, and the flow dynamic capability is supported:

1. flow common elements, such as structural elements of nodes, wires and the like, are defined by using a JSON data format in a data structure definition module (module two).

2. The flow definition is abstracted into two parts of configuration information and entity data in a data structure definition module (a second module) and is respectively used for storing and calling.

(1) The configuration information defines relevant configuration information of styles, state lists and layout methods.

(2) The data module defines a data model of the nodes and the wires.

3. By means of the low code page design module (module four), a page executable by the low code page renderer (module one) is designed and stored, the flow chart renderer module (module three) is embedded in a manner of an iframe component, and event processing is configured (see below for details of the "page renderer and flow chart renderer interaction process in iframe").

4. When the page is accessed, a low-code page renderer (module I) reads out the page designed and stored by the low-code page design module to render the page, acquires interaction behavior and event configuration, and monitors the configured events in the page

5. The flow chart rendering module performs dynamic rendering based on the read configuration and the entity data.

6. All flow related definitions are unified as data for management and invocation herein.

7. The automatic validation of the flow modification is supported, the restarting is not needed, and the hot updating capability is realized.

The interaction modes mentioned above are interaction communication mechanisms which are decoupled and loosely coupled among modules through event definition and driving, and the interaction modes of the modules are as follows:

1. Standard events need to be implemented in the flow chart rendering module and opened to the outside, and event lists are shown in the event table encapsulated by the flow chart rendering module.

2. The low code renderer module processes the logic by retrieving events or interactions that the low code designer binds for different events.

3. The two modules are in loose coupling interaction through free binding event driving.

The key logic for each module is described as follows:

1. Module one, low code page rendering module: the module is realized by using the existing mature low-code page renderer, and describes information such as page elements, layout, event processing and the like in a JSONSchema standard JSON (JavaScript Object Notation, JS object numbered musical notation, a lightweight data exchange format) data mode, and has two use states in total: in the design state, page elements can be laid out in a dragging mode by using a page designer (editor), attribute values and event processing functions are bound through attribute panels, all operations in the editor can be finally converted into a JSONSchema-standard JSON, and the unified data structures can be stored, and the editing and storing process is described in a fourth module; in the running state, the renderer can render JSON conversion generated in the design state into a standard Web HTML page, and the rendering is realized as 3, and the realization steps are as follows:

Step 1: when we enter the page, start loading the page renderer;

Step 2: after loading the page renderer, reading JSONs corresponding to the pages from the database through the interface;

Step 3: transmitting the page JSON to a page renderer, and rendering a page effect through the renderer;

step 4: if the page has binding events in the design process, the rendered page monitors the corresponding events, and event processing is carried out according to the event processing function bound by the design; if no trigger event exists, the page rendering is completed.

2. And a second module, a data structure definition module: the module mainly defines configuration information required by the rendering of the flow chart, and the whole configuration information is a JSON object and comprises: the initialization configuration data object and the flow chart entity data are mainly configured, and the initialization configuration data object comprises layout configuration, a state list and node style configuration.

By defining a set of data structures, the style (icon, color and style) of the node can be flexibly expanded, and the self-defined data attribute of the user can be arbitrarily expanded in the node data object.

Such as: when a user needs to implement a topological graph and a workflow flow chart in the system, if a traditional development mode is used, two different corresponding professional graph tools may be respectively introduced, and corresponding functions are respectively developed on different pages to implement, and because the two different professional graph tools are developed by different people, the data structures, names and the like are likely to be different, the developers can respectively store the two professional graph tools, and thus if the requirement adjustment is later carried out, the maintenance cost may be higher. However, if the present invention is used, since the configuration such as layout and style is defined in the data structure definition module, the user can freely select what layout form and style the flow chart is currently intended to realize in the design stage, and the interface data structure realized by the user can be rendered according to the configuration as long as the interface data structure meets the data structure requirement of the present invention, so the present invention can be uniformly managed.

In addition, if the user wants to realize that the attribute of each node is self-defined and the attribute editing page can be self-adjusted, then the traditional development mode is used, even if the user designs the attribute into a dynamic data table mode, the attribute editing page generally needs to be developed in advance, and the self-adjustment space for the user is not large. The low-code renderer is used for combining, that is, the advantage of low-code design can be fully exerted, when a user needs to design an attribute page, the user can open a design state to design the attribute window, bind the attribute window with a node in an attribute page mode, and then configure a trigger event of the node to open the page for rendering, so that the purpose of giving the option to the user is achieved.

The data structures are shown in tables 1, 2 and 3.

TABLE 1

TABLE 2

TABLE 3 Table 3

As can be seen from table 1, table 2 and table 3, the data core mainly lies in the initialization configuration and the flow data, the initialization configuration is mainly characterized in that the style and configuration of the node can be predefined, the flow data adopts the same data structure as the industry, and the custom data attribute, style attribute and the like are added on that basis, so that the development habit of people is ensured, and the functions of some active configurations are expanded.

Examples: for example, we want to implement a display of RPA flowchart, and clicking on the start node on the flowchart can start the RPA flowchart, as in fig. 4, then we should operate as follows when designing:

1) After entering the design module: we add the flow renderer component to the page where the data structure of the page is the iframe of the page containing a flow renderer

2) Configuration initialization configuration data:

a. The nodes needing to initialize several data types are corresponding to the task node types of the RPA, and 3 kinds of nodes respectively including a start node, an end node and a task node are assumed to be arranged;

b. the above 3 nodes are respectively provided with a green, a gray and a blue;

c. Defining a node state list, namely defining 3 states to be done, being done and being done respectively, and configuring the 3 states with corresponding colors of blue, red and green respectively;

4) Configuration start event: adding a monitoring node adding event in the page designer, judging that if the node is a 'start node', initiating a request to start an RPA flow, refreshing data of a 'flow chart data source interface' configured in 3 every 5 seconds after initiation to refresh the flow chart renderer, and judging that if the end node is in an 'ended' state, stopping refreshing;

5) The node array in the data returned by the flow chart data source interface has 3 data, namely a start node, an end node and a task node, the connection array has 2 data, and if the data of the returned nodes is in the sequence from the start to the end, the states are as follows: when completed, in progress, or about to do, the graphics on the flow chart renderer will be displayed in blue, red, and green; if the sequential state is: when completed, that indicates the color will be green, green.

3. And thirdly, a flow chart rendering module: after the user obtains the flow chart data and the initialization configuration information, the page renderer embeds the flow chart data and the initialization configuration information into the page of the flow chart rendering module in an iframe (HTML floating frame) mode, and the flow chart data and the initialization configuration information interact with the flow chart rendering module in the iframe through a window message sending mechanism. For example: when initializing a page, the data of the flow chart and the initialization parameters are transmitted to a flow chart renderer, the flow chart is rendered into the flow chart, but when clicking a node in the flow chart, the node clicking event is triggered, at the moment, the data of the event response is transmitted to a parent page of the page renderer through a window message transmitting method, the parent page monitors the event, and when triggered, related services are correspondingly processed.

In the module, the events such as clicking, selecting and the like of common interaction events in the flow chart are opened through the flow chart renderer, and unlike the traditional implementation, on the listening processing mechanism of the events, the events are deeply bound and butted with the events of the low-code page designer, so that the events can be directly accessed in the low-code page and processed, a developer can completely use a low-code mode to access when interacting, task codes do not need to be written, and only the data structure is ensured to be defined according to the standard defined by the developer.

1) Listening mechanism

In the interaction process of event definition and driving, the flow chart rendering module defines that events such as node clicking, saving and the like are opened to the outside through internal encapsulation, when the events are triggered, the events are communicated in a window message sending mode, data are sent to an external page renderer module for interaction, and after the external page rendering module monitors the events, the external page rendering module performs corresponding actions (such as requesting interfaces, opening popup windows and the like) based on event processing configuration which is preconfigured by the designer module for the page.

2) The interaction process of the page renderer and the flow chart renderer in the iframe is shown in fig. 5, which shows how to render, monitor, trigger and process the interaction process of the corresponding events between the low-code page rendering module and the flow chart rendering module in the iframe.

Logic description:

step 1: entering a page, and acquiring flow chart initialization information from a server;

step 2: after the initialization information is obtained, loading the iframe is started, and initialization data is transmitted to the inside of the iframe through a window message sending method;

Step 3: after entering the inside of the iframe, starting a flow chart renderer to start rendering;

Step 4: after the flow chart is rendered, opening the event to the internal binding of the iframe, and opening the event to a page renderer of the father page through a window message sending method;

Step 5: the page renderer monitors an event opened in the iframe and waits for a user operation triggering event;

Step 6: after the user operates, triggering an event, and immediately transmitting the event to a flow chart renderer in the iframe;

step 7: after responding to the event operation, the flow chart renderer sends the corresponding event and data to the iframe;

step 8: the iframe layer transmits the event and the data to the page renderer, and the service processing function corresponding to the page rendering distribution event responds to the user.

3) The events encapsulated by the flow chart rendering module are as in table 4.

TABLE 4 Table 4

4. The low code page design module, we can design page layout, form, interface docking and event docking effects on the top as in fig. 6, and to ensure that the low code pages can be modified, read, rendered in real time, they need to be persisted to the server, and the store table structure (key fields) as in fig. 7.

1) Page design key logic description:

Step 1: creating a new page in the page information table, and initializing the new page into a page designer (the effect is blank);

step 2: in the designer, dragging an iframe component from the component area and dropping the component into the effect area;

step 3: setting the attribute of the iframe as a page where the flow chart renderer is located;

Step 4: adding interception of the events opened by the flow chart to an event panel of the iframe, and selecting a processing mode, wherein the processing mode is as follows:

Jump linking;

Refreshing the page;

Rollback pages;

Opening/closing popup window (if popup window, the popup window content can be designed for 2 times, and the editing mode is the same as the page designer mode and can be designed in a nested way);

Popping up a message reminder;

Sending an HTTP request;

Downloading a file;

setting the visibility and usability of some other component;

transmitting parameters and variable assignment to a certain component;

submitting, emptying, enclosing and checking the form;

Flexibly expanding JavaScript processing;

step 5: after the design is completed, page save and receive can be invoked to save the current page to dev_page (page information table).

The key technical points of the invention are as follows:

1. a standard flow element system is defined based on a JSON data model. This enables configurability and multiplexing of the flow.

2. An event driven mechanism is used to implement flow interactions across modules. The flow chart rendering module and the low code page are in loose coupling interaction through the event, so that the two modules can be independently and iteratively upgraded.

3. And performing flow interactive binding based on the low-code page designer. The designer supports binding different processing logics for the flow chart events, and realizes the rapid configuration of the flow interaction behavior.

4. And storing the related elements of the flow in a data driving mode. And the flow chart definition, page definition and other information are stored in the database, so that the capability of dynamic configuration is realized.

The above examples are preferred embodiments of the present invention, but the embodiments of the present invention are not limited to the above examples, and any other changes, modifications, substitutions, combinations, and simplifications that do not depart from the spirit and principle of the present invention should be made in the equivalent manner, and the embodiments are included in the protection scope of the present invention.

Claims

1. A low-code flowchart dynamic configuration and customized interactive system, characterized by comprising a low-code page rendering module, a data structure definition module, a flowchart rendering module and a low-code page designer module; wherein,

Low-code page rendering module, used to render low-code pages;

Data structure definition module, used to define the data structure required by the flow chart;

Flowchart rendering module, a visualization module for initializing the diagram configuration of the process and rendering the data of the flowchart;

Low-code page designer module, this module is a designer that allows users to edit pages by dragging and dropping.

2. According to the low-code flowchart dynamic configuration and customized interaction system of claim 1, it is characterized in that the low-code page rendering module works as follows:

Step 1: When entering the page, start loading the page renderer;

Step 2: After loading the page renderer, read the JSON corresponding to the page from the database through the interface;

Step 3: Pass the page JSON to the page renderer, and render the page effect through the renderer;

Step 4: If the page has bound events during the design process, the rendered page will listen to the corresponding events and handle the events according to the event handling function bound by the design; if no event is triggered, the page rendering is completed.

3. According to the low-code system for dynamic configuration and customized interaction of flowcharts in claim 1, it is characterized in that the data structure definition module is used to define the configuration information required for flowchart rendering. The entire configuration information is a JSON object, which includes two main configurations: initialization configuration data object and flowchart entity data. The initialization configuration data object includes layout configuration, status list, and node style configuration.

4. According to claim 3, the low-code flowchart dynamic configuration and customized interaction system is characterized in that the data structure definition module operates in the following manner when realizing the display of an RPA flowchart and clicking the start node on the flowchart to start the RPA flowchart:

1) Add the flowchart rendering module component to the page. At this time, the data structure of the page is an iframe containing a flowchart renderer.

2)Configure initialization configuration data:

a. You need to initialize several nodes of different data types to correspond to the RPA task node types. Assume there are three types of nodes: start node, end node, and task node.

b. Assign green, gray, and blue to the start node, end node, and task node respectively;

c. Define the node status list, which defines three states: to be done, being done, and completed, and configure corresponding colors for these three states, namely blue, red, and green;

3) Configure the flow chart data source interface: The data returned by the interface needs to be an object data. There are two arrays in the object, namely the node array and the connection array. In the node data, there needs to be a node state that corresponds to the state name configured above;

4) Configure the start event: Add a listener node to add an event in the low-code page designer module. If the node is a "start node", initiate a request to start the RPA process. After the process is initiated, refresh the data of the "flowchart data source interface" configured in 3 every 5 seconds to refresh the flowchart rendering module. If the end node is in the "ended" state, stop refreshing.

5) The data returned by the "Flowchart Data Source Interface" contains 3 data in the node array, namely the start node, the end node, and the task node, and 2 data in the connection array. If the status of the returned node data from start to end is: completed, in progress, or to be done, then the diagram on the flowchart rendering module will be displayed in blue, red, and green; if the sequence status is: completed, completed, completed, then the display color will be green, green, and green.

5. According to the low-code system for dynamic configuration and customized interaction of flowcharts as described in claim 1, it is characterized in that after the user obtains the flowchart data and initialization configuration information, the flowchart rendering module embeds it into the page of the flowchart rendering module in the form of an iframe through the low-code page rendering module, and performs initialization actions and event interactions with the flowchart data and initialization configuration information through the window message sending mechanism with the flowchart rendering module in the iframe.

6. According to the low-code system for dynamic configuration and customized interaction of flowcharts in claim 1, it is characterized in that the flowchart rendering module passes the flowchart data and initialization parameters to the flowchart rendering module when initializing the page. The flowchart rendering module renders them into a flowchart. When a node is clicked in the flowchart, a node click event is triggered. At this time, the event response data is sent to the low-code page rendering module through the window message sending method. The low-code page rendering module listens to this event as the parent page, and will process the relevant business accordingly when triggered.

7. According to the low-code system for dynamic configuration and customized interaction of flowcharts in claim 1, it is characterized in that the monitoring mechanism of the flowchart rendering module is deeply bound and connected with the events of the low-code page designer module, and its monitoring mechanism is as follows: During the interactive process of event definition and driving, the flowchart rendering module is open to the outside by defining events through internal encapsulation, and the events include node clicks and saves; when these events are triggered, they will communicate through the window message sending method, and send data to the external low-code page rendering module for interaction, and after the external low-code page rendering module monitors this event, it will perform corresponding actions based on the event processing configuration pre-configured for this page by the low-code page designer module, and the actions include requesting interfaces and opening pop-up windows.

8. According to the low-code flowchart dynamic configuration and customized interaction system of claim 1, it is characterized in that the interaction process between the low-code page rendering module and the flowchart rendering module in the iframe is as follows:

(1) Enter the page and obtain the flowchart initialization information from the server;

(2) After obtaining the initialization information, start loading the iframe and pass the initialization data to the iframe through the window message sending method;

(3) After entering the iframe, start the flowchart renderer module to start rendering;

(4) After rendering the flowchart, open the event to the iframe internal binding, and open the event to the low-code page rendering module of the parent page through the window message sending method;

(5) The low-code page rendering module of the parent page listens to the events opened in the iframe and waits for the user to trigger the event;

(6) After the user operates, an event is triggered and the event is immediately passed to the flowchart rendering module inside the iframe;

(7) After the flowchart rendering module responds to the event operation, it sends the corresponding event and data to the iframe;

(8) The iframe layer then passes the events and data to the low-code page rendering module, which then assigns the business processing functions corresponding to the events to respond to the user.

9. According to the low-code flowchart dynamic configuration and customized interaction system of claim 1, it is characterized in that the working process of the low-code page design module is as follows:

S1. Create a new page in the page information table and enter the low-code page design module. S2. In the low-code page design module, drag an iframe component from the component area and drop it into the effect area.

S3. Set the properties of the iframe to the page where the flowchart rendering module is located;

S4. Add a listener for the events opened by the flowchart in the event panel of the iframe and select the processing method;

S5. After the design is completed, you can call the page save and receive to save the current page to the page information table.