Visual large screen design system and method based on low codes

Abstract

The invention provides a visual large screen design system and method based on low codes. The system comprises a large screen page designer subsystem, a large screen content switching subsystem, a component adaptation subsystem, a built-in component reconstruction subsystem and a component interaction subsystem. The large-screen page designer subsystem is used for realizing large-screen page design which is low in coupling, high in expansion and capable of supporting multi-person collaboration; the large-screen content switching subsystem realizes large-screen content switching of a single-page refreshing mechanism; the component adaptation subsystem is used for realizing adaptation of different technical stack components of a third party; the built-in component reconfiguration subsystem supports system built-in component reconfiguration and use; and the component interaction subsystem realizes a flexible component interaction and data communication mechanism. According to the method, new characteristics of collaborative development, a single-page refreshing mechanism, high component expansibility and the like are provided, and a reconstruction mechanism of a built-in component, a third-party component adaptation mechanism, a page container mechanism and a perfect event mechanism are provided, so that high flexibility, high expansibility and high collaboration of visual large-screen page design are realized.

Description

Technical Field

[0001] The present invention relates to the technical field of large-screen visualization design; specifically, to a low-code-based large-screen visualization design system and method. Background Art

[0002] As technology develops, many low-code products have emerged. The emergence of low-code products has brought convenience to software development and improved efficiency. With the rise and development of low-code technology, there are more and more large-screen configuration tools based on low-code visual drag and drop. Users only need to drag the developed components into the view to generate a page.

[0003] However, at present, these large-screen tools for visual dragging generally have many limitations, including the following problems: 1. The system's built-in components are fixed, only some parameter configurations are supported, and the scalability is not strong; 2. Registration and use of third-party components is not supported; 3. The same large-screen page does not have the ability for multiple people to collaborate on development; 4. Multiple large-screen pages of the same project cannot be switched smoothly, and the entire page needs to be refreshed, resulting in the inability to reuse some framework content; 5. Only existing components within the system can be used, and the interaction mechanism between components is not flexible enough, and complex scene interactions cannot be configured. Summary of the invention

[0004] In view of this, the purpose of the present invention is to provide more new features such as collaborative development, single-page refresh mechanism, high scalability of components, etc. on the basis of meeting the basic functional requirements of large-screen visualization development, and provide a reconstruction mechanism for built-in components; provide a third-party component adaptation mechanism to register third-party components into the system and use them; provide a page container mechanism to containerize part of the large-screen frame, and each container includes a menu area and a content area; provide a complete event mechanism, driven by events, to connect all components, the status of all components, and global data in series, thereby achieving a rich interactive experience, and realizing a highly flexible, highly scalable, and highly collaborative large-screen visualization page design, giving users a better experience.

[0005] The present invention provides a low-code-based visual large-screen design system, including: a large-screen page designer subsystem, a large-screen content switching subsystem, a component adaptation subsystem, a built-in component reconstruction subsystem, and a component interaction subsystem; The large-screen page designer subsystem is used to realize the large-screen page design with low coupling, high expansion and support for multi-person collaboration, including: a component management module and a container management module. The container management module includes: a parser. The parser includes: a module for generating JSON according to dragged components and a module for generating component layout according to JSON. The large screen content switching subsystem is used to implement large screen content switching of a single page refresh mechanism, including: a container and a listener; The component adaptation subsystem is used to implement the adaptation of third-party components with different technology stacks, including: a parser, a converter, and a component registrar; The built-in component reconstruction subsystem is used to support the reconstruction and use of the system's built-in components, including: a component reconstruction mode panel; The component interaction subsystem is used to implement flexible component interaction and data communication mechanisms, including an event scheduler.

[0006] The present invention also provides a low-code-based visual large-screen design method, which is applied to the low-code-based visual large-screen design system as described above, including: a large-screen page design method that realizes low coupling, high scalability, and supports multi-person collaboration, a large-screen content switching method with a single-page refresh mechanism, a method for implementing third-party component adaptation with different technology stacks, a method for supporting the reconstruction and use of system built-in components, and a method for realizing flexible component interaction and data communication mechanisms; The large-screen page design method that realizes low coupling, high expansion, and supports multi-person collaboration includes the following steps: S11. Enter the component management module to develop new components or maintain old components. After the component is developed, it is published in the component library. The published component can be dragged and dropped on the large screen page for use. Specifically, a component consists of a JSON configuration file and a component Vue source code file; the JSON configuration contains basic component information: component name, component version number, and the source code file path corresponding to the component; a component can have multiple versions in the component library, and each version of the component corresponds to a JSON file. Its Vue file can be the same or customized according to the version. If a component has multiple versions, you can choose to switch the component version in the component configuration. After switching, the configuration and component content of the component version will change accordingly.

[0007] S12. Enter the container management module, build a container for the large-screen page layout according to the business scenario, and parse the container according to the JSON string in the database; A container can be understood as a special page that only has framework components, such as a header, menu, content area (without specific content), etc. The container's configuration file does not have a physical JSON file or Vue source code file, it is only a JSON string that exists in the database.

[0008] S13. Create a large-screen page. Use the container built in step S12 to drag the components developed and published in step S11 in the content area of ​​the container to complete the configuration of the large-screen page.

[0009] Containers and components can be applied to multiple different pages and can also be expanded according to specific business scenarios. The final presentation format of the large screen page is a JSON string.

[0010] Furthermore, the large-screen content switching method of the single-page refresh mechanism includes the following steps: S21. Create a container page, define different containers according to business scenario requirements, and customize the style and position of the menu area and content area. The container is only used as a carrier for content display. There is no other business logic inside the container, so the container supports multiple large-screen pages for reuse. S22. Create sub-pages of the container page, drag and drop corresponding components from the component library according to specific business scenarios, perform layout display, and create each sub-page; for each component, select whether to configure a data source; If the sub-pages need to be reused, a data source of a global variable type is configured for each component, and a global data source is configured for each page in step 23; S23. Create a large screen page, select a container in the global configuration of the large screen page, and configure a menu list for the current container. Each menu includes a menu name, a sub-page code associated with the menu, and global data source parameters. At the same time, predefine global constants in the global configuration of the large screen page for subsequent interaction between components. Optionally, except for the style and position, the rest of the contents of the menu in the container are not fixed and need to be initialized by menu data transmitted externally.

[0011] S24. After configuring the container menu list, the listener in the large screen page passes the menu data to the container, performs initial rendering in the container, and starts listening to the container menu; when the container content switches to a menu, the listener obtains the menu that needs to be loaded, finds the sub-page associated with the menu, and finally passes the obtained sub-page configuration to the container for real-time rendering; In addition to listening to the menu, the listener also collects the global data source information configured by the current menu, and requests the global data source when loading the corresponding page content, and synchronizes the results to the global data resource pool for storing the defined global constants and interface data saved globally. Components bound to the corresponding global data variables will also be refreshed accordingly.

[0012] The present invention breaks down the page structure into three sections: components, containers, and pages. Both components and containers provide version management mechanisms, so that components of a page can be developed simultaneously by different developers, and finally the developers drag and drop to build the final page.

[0013] Furthermore, the method for implementing the adaptation of third-party different technology stack components includes the following steps: S31, read the component registration package through the parser, and convert the component registration package into an AST abstract syntax tree; Specifically, the parser identifies the technical type and basic information of the current component through the entry.js entry, and uses the AST technology of the babel compiler to parse the component source code into an AST abstract syntax tree. At the same time, the abstract syntax tree is processed again. First, a syntax mapping table is maintained. For example, this.name = "Zhang San" in the vue framework is mapped to this.setState ({name: "Zhang San"}) in the react syntax. After generating the AST abstract syntax tree, the AST is traversed and the corresponding syntax or lexical conversion results are matched in the syntax mapping table, and integrated into the AST as additional information, and finally a processed AST abstract syntax tree is obtained; S32, calling the converter to parse the processed AST abstract syntax tree, converting the processed AST abstract syntax tree into a corresponding component source file through the converter's traversal, saving the component source file and passing it to the component registrar for registration; S33, registering the component source file into the system through the component registrar; Specifically, the generated component source file is packaged into a Vue plug-in, which is registered as the primary key in the Vue plug-in. In the component registrar, only the passed plug-in file needs to be read and the plug-in is registered to the system. This allows plug-in trials without polluting the system. Fig.10 shown.

[0014] The third-party different technology stack includes the same technology stack as the system of the present invention, but with a different version.

[0015] Furthermore, the method for reconstructing and using the built-in components of the support system includes the following steps: S41, select the built-in component to be reconstructed, and enter the component reconstruction mode panel, which includes four areas: a toolbar, a source code area, a preview area, and a configuration parameter debugging area; S42. Adjust the source code of the current built-in component according to the business scenario requirements, and perform parameter input debugging. Determine the version of the current component according to the JSON configuration of the current component, read the source code of the current component and display it in the source code area; load the configurable parameters into the configuration parameter debugging area according to the configuration supported by the component configured in JSON; S43. After the built-in component reconstruction is completed, save the component and register it, or download the component source file to the local computer at the same time; S44. After successful registration, use the reconstructed components.

[0016] Furthermore, the method for implementing a flexible component interaction and data communication mechanism comprises the following steps: S51, pre-define the current component built-in events in the JSON configuration file of each component, wherein the component built-in events include: event triggering action type (button click, selection box data change, etc.), event execution content (refresh data, etc.); S52, configuring events for used components; The scenario example is: there are three components on the page, namely the select component, the bar chart component, and the indicator display component. When the value of the select component is switched, the data of the bar chart component is obtained synchronously according to this value; when the bar chart data is refreshed, the three indicators with the largest number are obtained and rendered in the indicator display component. Combined with the above scenario, the following event configuration is performed: (1) Select an event trigger behavior "change" for select, and then select an event execution action "Assign the selected value to the global variable TYPE" (assuming that a global variable TYPE field has been configured on the page).

[0017] (2) Select an event trigger behavior "watch global vars" for the bar chart component, and configure three event execution actions: "Ⅰ. Use the global variable TYPE as a parameter to call the backend API interface; Ⅱ. Refresh the chart data; Ⅲ. Find the data with the largest value in the bar chart; Ⅳ. Set the value of the indicator display component to the result returned by action Ⅲ"; S53, registering the configured event to the global bus; Four actions are configured in the bar chart component of step S52. These four actions are summarized as an "event flow" mechanism in the system. The execution strategies of these events are configured as parallel or serial in the event flow (for example, the above Ⅰ and Ⅱ, Ⅲ and Ⅳ must be serial events, while Ⅱ and Ⅲ can be parallel events). The execution performance of some events can be effectively improved through the strategy.

[0018] S54. Based on the event configuration in the global event bus and the global data resource pool, trigger events in the event scheduler and update the global data resource pool as required.

[0019] Furthermore, in the step S42, if new configurable parameters need to be added, click the plus sign in the configuration parameter area to save the new parameters to the component's JSON configuration, generate a new JSON configuration, and preview the component based on the source code and current parameters.

[0020] Furthermore, the modes of triggering events in the event scheduler in step S54 include two types: active trigger mode and passive trigger mode; the active trigger mode is to execute an event action after the current component executes a certain interactive operation; the passive trigger mode is to pre-set some trigger conditions for event behaviors, and execute the event action when the conditions are met.

[0021] The present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the low-code-based visual large-screen design method as described above.

[0022] The present invention also provides a computer device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the program, the steps of the low-code-based visual large-screen design method as described above are implemented.

[0023] Compared with the prior art, the present invention has the following beneficial effects: The low-code-based visual large-screen design system and method provided by the present invention provide more new features such as collaborative development, single-page refresh mechanism, and high scalability of components on the basis of meeting the basic functional requirements of visual large-screen development. It also provides a reconstruction mechanism for built-in components, which will not affect the original components after reconstruction and can be re-registered as new components for subsequent use; a third-party component adaptation mechanism is provided to register and use third-party components in the system; a page container mechanism is provided to implement single-page refresh of large-screen page content based on the container mode, and the large-screen frame part is containerized, and each container includes a menu area and a content area; a complete event mechanism is provided, which is driven by events to connect all components, the status of all components, and global data in series to achieve a rich interactive experience, so that the visual large-screen page design achieves high flexibility, high scalability, and high coordination, and improves the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the following detailed description of the preferred embodiment.The drawings are only for the purpose of illustrating the preferred embodiments and are not to be construed as limiting the invention.

[0025] In the attached picture: Figure 1An architectural diagram of a large-screen page design that realizes low coupling, high scalability, and supports multi-person collaboration in an embodiment of the present invention; Figure 2 is an architecture diagram of a component management module according to an embodiment of the present invention; Figure 3 is an architecture diagram of a container management module according to an embodiment of the present invention; Figure 4 This is a schematic diagram of the architecture of a container according to an embodiment of the present invention; Figure 5 This is a structural diagram of the presentation form of a large-screen page according to an embodiment of the present invention; Figure 6 This is a multi-menu large-screen page diagram of a single-page refresh mechanism according to an embodiment of the present invention; Figure 7 A container page diagram of an embodiment of the present invention; Figure 8 A sub-page diagram of a container page according to an embodiment of the present invention; Fig. 9 A schematic diagram of the process of menu configuration to initialization in a container, container menu changes to container page rendering, data source parsing to page component data refresh in an embodiment of the present invention; Fig.10 A basic working principle diagram of a component registrar according to an embodiment of the present invention; Fig.11 is an internal schematic diagram of a component registrar according to an embodiment of the present invention; Fig.12 A general flow chart of secondary development, registration and use of built-in components in an embodiment of the present invention; Fig.13 A diagram showing the regional settings of a component reconstruction mode panel according to an embodiment of the present invention; Fig.14 Schematic diagram of the process architecture of step S42 of an embodiment of the present invention; Fig.15 This is a flowchart of the event mechanism of an embodiment of the present invention; Fig.16 is an event flow mechanism diagram of an embodiment of the present invention; Fig.17 This is an internal flow chart of an event scheduler according to an embodiment of the present invention; Fig.18 A flowchart of a large-screen page design method that realizes low coupling, high expansion, and supports multi-person collaboration in the present invention; Fig.19 It is a flow chart of the large-screen content switching method of the single-page refresh mechanism of the present invention; Fig. 20 A flowchart of the method for implementing the adaptation of third-party different technology stack components in the present invention; Fig.21A flowchart of the method for reconfiguring and using the built-in components of the support system of the present invention; Fig. 22 A flow chart of a method for implementing a flexible component interaction and data communication mechanism of the present invention; Fig.23 The figure is a schematic diagram of the structure of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0026] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present disclosure. Instead, they are merely examples of systems and products consistent with some aspects of the present disclosure as detailed in the appended claims.

[0027] The terms used in this disclosure are for the purpose of describing specific embodiments only and are not intended to limit the disclosure. The singular forms of "a", "said" and "the" used in this disclosure and the appended claims are also intended to include plural forms unless the context clearly indicates otherwise. It should also be understood that the term "and / or" used herein refers to and includes any or all possible combinations of one or more associated listed items.

[0028] It should be understood that although the terms first, second, third, etc. may be used in the present disclosure to describe various information, such information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of the present disclosure, the first information may also be referred to as the second information, and similarly, the second information may also be referred to as the first information. Depending on the context, the word "if" as used herein may be interpreted as "at the time of" or "when" or "in response to determining".

[0029] The embodiments of the present invention are described in further detail below.

[0030] The embodiment of the present invention provides a low-code-based visual large-screen design system, including: a large-screen page designer subsystem, a large-screen content switching subsystem, a component adaptation subsystem, a built-in component reconstruction subsystem, and a component interaction subsystem; The large-screen page designer subsystem is used to realize the large-screen page design with low coupling, high expansion and support for multi-person collaboration, including: a component management module and a container management module. The container management module includes: a parser. The parser includes: a module for generating JSON according to dragged components and a module for generating component layout according to JSON. The large screen content switching subsystem is used to implement large screen content switching of a single page refresh mechanism, including: a container and a listener; The component adaptation subsystem is used to implement the adaptation of third-party components with different technology stacks, including: a parser, a converter, and a component registrar; The built-in component reconstruction subsystem is used to support the reconstruction and use of the system's built-in components, including: a component reconstruction mode panel; The component interaction subsystem is used to implement flexible component interaction and data communication mechanisms, including an event scheduler.

[0031] The embodiment of the present invention also provides a low-code-based visual large-screen design method, which is applied to the low-code-based visual large-screen design system as described above, including: a large-screen page design method that realizes low coupling, high scalability, and supports multi-person collaboration, a large-screen content switching method with a single-page refresh mechanism, a method for implementing third-party component adaptation with different technology stacks, a method for supporting the reconstruction and use of system built-in components, and a method for realizing flexible component interaction and data communication mechanisms; Among them, the large-screen page design method that achieves low coupling, high scalability, and supports multi-person collaboration is described in Fig.18 As shown, the following steps are included: S11. Enter the component management module to develop new components or maintain old components. After the component is developed, it is published in the component library. The published component can be dragged and dropped on the large screen page for use. Figure 1 The three main sections of this system are shown, namely the component section, the container section, and the large-screen page section. When developing a large-screen page, multiple people can collaborate, and the components that need to be developed in the page and the construction of the overall layout container of the page are assigned to different developers. The container is composed of multiple mature components.

[0032] A component consists of a JSON configuration file and a component Vue source code file; the JSON configuration contains basic information about the component: component name, component version number, and the source code file path corresponding to the component; a component can have multiple versions in the component library, and each version of the component corresponds to a JSON file. Its Vue file can be the same or customized according to the version. If a component has multiple versions, you can choose to switch the component version in the component configuration. After switching, the configuration and component content of the component version will change accordingly, such as Figure 2 shown.

[0033] S12. Enter the container management module, build a container for the large-screen page layout according to the business scenario, and parse the container according to the JSON string in the database; like Figure 3 As shown, there are only framework components inside the container, such as the header, menu, content area (without specific content), etc. The container configuration file does not have a physical JSON file or Vue source code file, but only a JSON string in the database, such as Figure 4 shown.

[0034] S13. Create a large-screen page. Use the container built in step S12 to drag the components developed and published in step S11 in the content area of ​​the container to complete the configuration of the large-screen page.

[0035] Containers and components can be applied to multiple different pages and can also be expanded according to specific business scenarios. The final presentation format of the large screen page is a JSON string, such as Figure 5 shown.

[0036] For the large screen content switching method of the single page refresh mechanism, see Fig.19 As shown, the following steps are included: S21. Create a container page, define different containers according to business scenario requirements, and customize the style and position of the menu area and content area (such as Figure 6 shown); The container supports multiple large-screen pages for reuse; S22. Create sub-pages of the container page. Drag and drop corresponding components from the component library according to specific business scenarios, display the layout, and create each sub-page. For each component, select whether to configure the data source (such as Figure 7 , 8 shown); If the sub-pages need to be reused, a data source of a global variable type is configured for each component, and a global data source is configured for each page in step 23; S23. Create a large screen page, select a container in the global configuration of the large screen page, and configure a menu list for the current container. Each menu includes a menu name, a sub-page code associated with the menu, and global data source parameters. At the same time, predefine global constants in the global configuration of the large screen page for subsequent interaction between components. S24. After configuring the container menu list, the listener in the large screen page passes the menu data to the container, performs initial rendering in the container, and starts listening to the container menu; when the container content switches to a menu, the listener obtains the menu that needs to be loaded, finds the sub-page associated with the menu, and finally passes the obtained sub-page configuration to the container for real-time rendering; In addition to listening to the menu, the listener also collects the global data source information configured by the current menu, and requests the global data source when loading the corresponding page content, and synchronizes the results to the global data resource pool for storing the defined global constants and interface data saved globally. Components bound to the corresponding global data variables will also be refreshed accordingly. Fig. 9It shows the process from menu configuration to container initialization (blue arrow), container menu changes to container page rendering (black arrow), and data source parsing to page component data refresh (red arrow).

[0037] To implement the adaptation method of third-party components with different technology stacks, see Fig. 20 As shown, the following steps are included: S31, read the component registration package through the parser, and convert the component registration package into an AST abstract syntax tree; Specifically, the parser identifies the technical type and basic information of the current component through the entry.js entry, and uses the AST technology of the babel compiler to parse the component source code into an AST abstract syntax tree. At the same time, the abstract syntax tree is processed again. First, a syntax mapping table is maintained. For example, this.name = "Zhang San" in the vue framework is mapped to this.setState ({name: "Zhang San"}) in the react syntax. After generating the AST abstract syntax tree, the AST is traversed and the corresponding syntax or lexical conversion results are matched in the syntax mapping table, and integrated into the AST as additional information, and finally a processed AST abstract syntax tree is obtained; Fig.10 The basic working principle of the component registrar is shown. The component registrar is mainly used to realize the registration and use of external third-party components and reconstruct built-in components. The component registration package is a unified standard structure for registering components built into the system of the present invention, which contains three parts: src folder (for storing component source files), entry.js (component entry file, the entry when registering components), and assets (component static resource package). The component adapter is the core of this module. Based on the component adapter, the differences in component technology and versions can be shielded, and external components can be registered into the system of the present invention.

[0038] S32, calling the converter to parse the processed AST abstract syntax tree, converting the processed AST abstract syntax tree into a corresponding component source file through the converter's traversal, saving the component source file and passing it to the component registrar for registration; S33, registering the component source file into the system through the component registrar; Specifically, the generated component source file is packaged into a Vue plug-in, which is registered as the primary key in the Vue plug-in. In the component registrar, only the passed plug-in file needs to be read and the plug-in is registered to the system. This allows plug-in trials without polluting the system. The internal principle of the component registrar is as follows: Fig.11 shown.

[0039] Supports the reconstruction and usage of system built-in components, see Fig.21As shown, the following steps are included: S41, select the built-in component to be refactored, and enter the component refactoring mode panel, which includes four areas: a toolbar, a source code area, a preview area, and a configuration parameter debugging area; Fig.13 As shown; like Fig.12 As shown, when the built-in components in the system do not fully meet the business needs, the corresponding components can be selected for secondary development and reconstruction. The reconstructed components can call the adapter to register as a third-party component, which greatly improves the customization of the built-in components.

[0040] S42. Adjust the source code of the current built-in component according to the business scenario requirements, and perform parameter input debugging. Determine the version of the current component according to the JSON configuration of the current component, read the source code of the current component and display it in the source code area; load the configurable parameters into the configuration parameter debugging area according to the configuration supported by the component configured in JSON; If you need to add configurable parameters, click the plus sign in the configuration parameter area to save the newly added parameters to the component's JSON configuration, generate a new JSON configuration, and preview the component based on the source code and current parameters. The process is as follows: Fig.14 shown.

[0041] S43. After the built-in component reconstruction is completed, save the component and register it, or download the component source file to the local computer at the same time; S44. After successful registration, use the reconstructed components.

[0042] For methods to implement flexible component interaction and data communication mechanisms, see Fig. 22 As shown, the following steps are included: S51, pre-define the current component built-in events in the JSON configuration file of each component, wherein the component built-in events include: event trigger action type (button click, selection box data change, etc.), event execution content (refresh data), etc.; S52, configuring events for used components; Scenario example: There are three components on the page, namely the select component, the bar chart component, and the indicator display component. When the value of the select component is switched, the data of the bar chart component is obtained synchronously according to this value; when the bar chart data is refreshed, the three indicators with the largest number are obtained and rendered in the indicator display component. Combined with the above scenario, the following event configuration is performed: (1) Select an event trigger behavior "change" for select, and then select an event execution action "Assign the selected value to the global variable TYPE" (assuming that a global variable TYPE field has been configured on the page).

[0043] (2) Select an event trigger behavior "watch global vars" for the bar chart component, and configure three event execution actions: "Ⅰ. Use the global variable TYPE as a parameter to call the backend API interface; Ⅱ. Refresh the chart data; Ⅲ. Find the data with the largest value in the bar chart; Ⅳ. Set the value of the indicator display component to the result returned by action Ⅲ"; Fig.15 The event mechanism workflow is shown.

[0044] S53, registering the configured event to the global bus; In step S52, four actions are configured in the bar chart component. The system summarizes these four actions into an "event flow" mechanism. In the event flow, the execution strategy of these events is configured as parallel or serial (for example, the above Ⅰ and Ⅱ, Ⅲ and Ⅳ must be serial events, while Ⅱ and Ⅲ can be parallel events). The execution performance of some events can be effectively improved through the strategy. The event flow mechanism is as follows: Fig.16 shown.

[0045] S54. Based on the event configuration in the global event bus and the global data resource pool, trigger the event in the event scheduler and update the global data resource pool as required. Fig.17 shown.

[0046] There are two modes for triggering events in the event scheduler: active trigger mode and passive trigger mode. The active trigger mode is to execute an event action after the current component performs a certain interactive operation; the passive trigger mode is to pre-set some trigger conditions for event behaviors, and execute the event action when the conditions are met.

[0047] An embodiment of the present invention further provides a computer device, Fig.23 is a schematic diagram of the structure of a computer device provided by an embodiment of the present invention; see the accompanying drawings Fig.23 As shown, the computer device includes: an input system 23, an output system 24, a memory 22 and a processor 21; the memory 22 is used to store one or more programs; when the one or more programs are executed by the one or more processors 21, the one or more processors 21 implement the low-code-based visual large-screen design method provided in the above embodiment; wherein the input system 23, the output system 24, the memory 22 and the processor 21 can be connected by a bus or other means, Fig.23 The example of connecting through bus is taken in the following.

[0048] The memory 22 is a readable and writable storage medium of a computing device, which can be used to store software programs, computer executable programs, such as the corresponding program instructions of the low-code-based visual large-screen design method described in the embodiment of the present invention; the memory 22 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, at least one application required for a function; the data storage area may store data created according to the use of the device, etc.; in addition, the memory 22 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage device; in some instances, the memory 22 may further include a memory remotely arranged relative to the processor 21, and these remote memories may be connected to the device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0049] The input system 23 may be used to receive input digital or character information, and to generate key signal input related to user settings and function control of the device; the output system 24 may include display devices such as display screens.

[0050] The processor 21 executes various functional applications and data processing of the device by running software programs, instructions and modules stored in the memory 22, thereby realizing the above-mentioned low-code-based visual large-screen design method.

[0051] The computer device provided above can be used to execute the low-code-based visual large-screen design method provided in the above embodiment, and has corresponding functions and beneficial effects.

[0052] The embodiment of the present invention also provides a storage medium containing computer executable instructions, which are used to execute the low-code-based visual large-screen design method provided in the above embodiment when executed by a computer processor. The storage medium is any of various types of memory devices or storage devices, and the storage medium includes: installation media, such as CD-ROM, floppy disk or tape system; computer system memory or random access memory, such as DRAM, DDR RAM, SRAM, EDO RAM, Rambus RAM, etc.; non-volatile memory, such as flash memory, magnetic media (such as hard disk or optical storage); registers or other similar types of memory elements, etc.; the storage medium may also include other types of memory or combinations thereof; in addition, the storage medium may be located in a first computer system in which the program is executed, or may be located in a different second computer system, which is connected to the first computer system via a network (such as the Internet); the second computer system may provide program instructions to the first computer for execution. The storage medium includes two or more storage media that can reside in different locations (for example, in different computer systems connected via a network). The storage medium can store program instructions (for example, specifically implemented as a computer program) that can be executed by one or more processors.

[0053] Of course, the storage medium containing computer executable instructions provided in an embodiment of the present invention, whose computer executable instructions are not limited to the low-code-based visual large-screen design method described in the above embodiment, can also execute related operations in the low-code-based visual large-screen design method provided in any embodiment of the present invention.

[0054] So far, the technical solutions of the present invention have been described in conjunction with the preferred embodiments shown in the accompanying drawings. However, it is easy for those skilled in the art to understand that the protection scope of the present invention is obviously not limited to these specific embodiments. Without departing from the principle of the present invention, those skilled in the art can make equivalent changes or substitutions to the relevant technical features, and the technical solutions after these changes or substitutions will fall within the protection scope of the present invention.

[0055] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A low-code-based visual large-screen design system, characterized in that: include: Large-screen page designer subsystem, large-screen content switching subsystem, component adaptation subsystem, built-in component reconstruction subsystem, component interaction subsystem; The large-screen page designer subsystem is used to realize the large-screen page design with low coupling, high expansion and support for multi-person collaboration, including: a component management module and a container management module. The container management module includes: a parser. The parser includes: a module for generating JSON according to dragged components and a module for generating component layout according to JSON. The large screen content switching subsystem is used to implement large screen content switching of a single page refresh mechanism, including: a container and a listener; The component adaptation subsystem is used to implement the adaptation of third-party components with different technology stacks, including: a parser, a converter, and a component registrar; The built-in component reconstruction subsystem is used to support the reconstruction and use of the system's built-in components, including: a component reconstruction mode panel; The component interaction subsystem is used to implement flexible component interaction and data communication mechanisms, including an event scheduler.

2. A low-code-based visual large-screen design method, applied to the low-code-based visual large-screen design system according to claim 1, characterized in that: include: Implement a large-screen page design method that is low-coupling, highly scalable, and supports multi-person collaboration, a large-screen content switching method with a single-page refresh mechanism, a third-party component adaptation method with different technology stacks, support for the reconstruction and use of system built-in components, and a method for implementing flexible component interaction and data communication mechanisms; The large-screen page design method that realizes low coupling, high expansion, and supports multi-person collaboration includes the following steps: S11. Enter the component management module to develop new components or maintain old components. After the component is developed, it is published in the component library. The published component can be dragged and dropped on the large screen page for use. S12. Enter the container management module, build a container for the large-screen page layout according to the business scenario, and parse the container according to the JSON string in the database; S13. Create a large-screen page. Use the container built in step S12 to drag the components developed and published in step S11 in the content area of ​​the container to complete the configuration of the large-screen page.

3. The low-code-based visual large-screen design method according to claim 2 is characterized in that: The large-screen content switching method of the single-page refresh mechanism comprises the following steps: S21. Create a container page, define different containers according to business scenario requirements, and customize the style and position of the menu area and content area; S22. Create sub-pages of the container page, drag and drop corresponding components from the component library according to specific business scenarios, perform layout display, and create each sub-page; for each component, select whether to configure a data source; If the sub-pages need to be reused, a data source of a global variable type is configured for each component, and a global data source is configured for each page in step 23; S23. Create a large screen page, select a container in the global configuration of the large screen page, and configure a menu list for the current container. Each menu includes a menu name, a sub-page code associated with the menu, and global data source parameters. At the same time, predefine global constants in the global configuration of the large screen page for subsequent interaction between components. S24. After configuring the container menu list, the listener in the large screen page passes the menu data to the container, and performs initial rendering in the container, and starts listening to the container menu at the same time; when the container content switches the menu, the listener obtains the menu that needs to be loaded currently, and finds the sub-page associated with this menu, and finally passes the obtained sub-page configuration to the container for real-time rendering.

4. The low-code-based visual large-screen design method according to claim 2 is characterized in that: The method for implementing the adaptation of third-party different technology stack components includes the following steps: S31, read the component registration package through the parser, and convert the component registration package into an AST abstract syntax tree; S32, calling the converter to parse the processed AST abstract syntax tree, converting the processed AST abstract syntax tree into a corresponding component source file through the converter's traversal, saving the component source file and passing it to the component registrar for registration; S33. Register the component source file into the system through the component registrar.

5. The low-code-based visual large-screen design method according to claim 2 is characterized in that: The method for supporting the reconstruction and use of the built-in components of the system includes the following steps: S41, select the built-in component to be reconstructed, and enter the component reconstruction mode panel, which includes four areas: a toolbar, a source code area, a preview area, and a configuration parameter debugging area; S42. Adjust the source code of the current built-in component according to the business scenario requirements, and perform parameter input debugging. Determine the version of the current component according to the JSON configuration of the current component, read the source code of the current component and display it in the source code area; load the configurable parameters into the configuration parameter debugging area according to the configuration supported by the component configured in JSON; S43. After the built-in component reconstruction is completed, save the component and register it, or download the component source file to the local computer at the same time; S44. After successful registration, use the reconstructed components.

6. The low-code-based visual large-screen design method according to claim 2 is characterized in that: The method for implementing a flexible component interaction and data communication mechanism comprises the following steps: S51, pre-define the current component built-in event in the JSON configuration file of each component, wherein the component built-in event includes: event triggering action type and event execution content; S52, configuring events for used components; S53, registering the configured event to the global bus; S54. Based on the event configuration in the global event bus and the global data resource pool, trigger events in the event scheduler and update the global data resource pool as required.

7. The low-code-based visual large-screen design method according to claim 5 is characterized in that: In the step S42, if new configurable parameters need to be added, click the plus sign in the configuration parameter area to save the new parameters to the component's JSON configuration, generate a new JSON configuration, and preview the component based on the source code and current parameters.

8. The low-code-based visual large-screen design method according to claim 6 is characterized in that: There are two modes for triggering events in the event scheduler in step S54: active trigger mode and passive trigger mode. The active trigger mode is to execute an event action after the current component executes a certain interactive operation. The passive trigger mode is to pre-set some trigger conditions of event behaviors, and execute the event action when the conditions are met.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by the processor, the steps of the low-code based visual large-screen design method described in any one of claims 2-8 are implemented.

10. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, it implements the steps of the low-code based visual large-screen design method as described in any one of claims 2-8.

Images