CN119645374A

CN119645374A - A visual large-screen design system and method based on low code

Info

Publication number: CN119645374A
Application number: CN202411470830.0A
Authority: CN
Inventors: 胡继云; 陈丽萍; 罗宇
Original assignee: Beijing Honghu Yuanshu Technology Co ltd
Current assignee: Beijing Honghu Yuanshu Technology Co ltd
Priority date: 2024-10-21
Filing date: 2024-10-21
Publication date: 2025-03-18

Abstract

The present invention provides a low-code-based visual large-screen design system and method, the system includes: 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 realizes low coupling, high expansion, and supports multi-person collaboration of large-screen page design; the large-screen content switching subsystem realizes large-screen content switching of a single-page refresh mechanism; the component adaptation subsystem realizes third-party component adaptation of different technology stacks; the built-in component reconstruction subsystem supports the reconstruction and use of system built-in components; the component interaction subsystem realizes flexible component interaction and data communication mechanism. The present invention provides new features such as collaborative development, single-page refresh mechanism, and high scalability of components, provides a reconstruction mechanism of built-in components, a third-party component adaptation mechanism, a page container mechanism, and a complete event mechanism, so that the visual large-screen page design can achieve high flexibility, high scalability, and high synergy.

Description

Low-code-based visual large screen design system and method

Technical Field

The invention relates to the technical field of visual large screen design, in particular to a visual large screen design system and method based on low codes.

Background

Today, the technology is increasingly developed, a plurality of low-code products are developed, the appearance of the low-code products brings convenience to software development, and the efficiency is improved. With the rise and development of low-code technology, more and more large-screen configuration tools are available based on visual dragging of low codes, and a user can generate a page by dragging a developed component into a view.

However, these large screen tools with visual drag currently have many limitations, including mainly the following problems:

1. the built-in components of the system are fixed, only partial parameter configuration is supported, and the expandability is not strong;

2. The third party component is not supported to register and use;

3. The same large screen page does not have the capability of multi-person collaborative development;

4. the large screen pages of the same project cannot be smoothly switched, and the whole page needs to be refreshed, so that part of frame contents cannot be reused;

5. Only the existing components inside the system can be used, and the interaction mechanism between the components is not flexible enough, so that complex scene interaction cannot be configured.

Disclosure of Invention

In view of the above, the invention aims to provide more new characteristics of collaborative development, single page refreshing mechanism, high expansibility of components and the like on the basis of meeting the basic function requirements of the development of the large visual screen, provide a reconstruction mechanism of built-in components, provide a third party component adapting mechanism for registering and using the third party components in a system, provide a page container mechanism for partially containerizing the large screen frame, wherein each container comprises a menu area and a content area, provide a perfect event mechanism and drive all components, states of all components and global data by taking events as driving, thereby realizing rich interactive experience, realizing the high-flexibility, high-expansion and high-collaborative visual large screen page design and bringing better experience to users.

The invention provides a low-code-based visual large-screen design system, which 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, wherein the large-screen page designer subsystem is used for receiving a large-screen content;

The large-screen page designer subsystem is used for realizing low-coupling, high-expansion and multi-person collaboration supporting large-screen page design and comprises a component management module and a container management module, wherein the container management module comprises a parser, a drawing module and a component layout module, wherein the parser comprises a JSON module and a component layout module;

the large screen content switching subsystem is used for realizing the large screen content switching of a single page refreshing mechanism and comprises a container and a monitor;

The component adaptation subsystem is used for realizing the component adaptation of different technical stacks of a third party and comprises a parser, a converter and a component register;

The built-in component reconstruction subsystem is used for supporting the reconstruction and the use of a built-in component of the system and comprises a component reconstruction mode panel;

the component interaction subsystem is used for realizing flexible component interaction and data communication mechanism and comprises an event scheduler.

The 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 and comprises a large screen page design method for realizing low coupling, high expansion and supporting multi-user cooperation, a large screen content switching method of a single page refreshing mechanism, a large screen content switching method for realizing different technical stack assembly adaptation methods of a third party, a method for supporting reconstruction and use of built-in components of a system and a method for realizing flexible assembly interaction and data communication mechanism;

The large-screen page design method for realizing low coupling, high expansion and supporting multi-user cooperation comprises the following steps of:

s11, entering a component management module to develop a new component or maintain an old component, publishing the component in a component library after the development of the component is completed, and dragging the published component on a large screen page for use;

The method comprises the steps of storing a component, wherein the component comprises a JSON configuration file and a component vue source code file, the JSON configuration comprises component basic information including a component name, a component version number and a source code file path corresponding to the component, a plurality of versions of the component can exist in a component library, each version of the component corresponds to one JSON file, and vue files of the JSON configuration file can be identical or can be customized and developed according to the versions. If there are multiple versions of a component, the version of the component may be selected at the component configuration, with the configuration and component content for the component version changing after the switch.

S12, entering a container management module, constructing a container of a large-screen page layout according to a service scene, and analyzing the container according to a JSON character string in a database;

A container is understood to be a special page that has only frame-like components inside, such as a header, menu, content area (without specific content), etc.;

The configuration file of the container has no physical JSON file and vue source code file, but is just a JSON string that exists in the database.

And S13, creating a large-screen page, and dragging the content area of the container by using the container constructed in the step S12 to develop and distribute the completed assembly in the step S11 so as to complete the configuration of the large-screen page.

The container and the components can be applied to a plurality of different pages, and can also be expanded according to specific business scenes. The final presentation form of the large screen page is a JSON string.

Further, the large screen content switching method of the single page refreshing mechanism comprises the following steps:

S21, creating a container page, defining different containers according to service scene requirements, and customizing style positions of a menu area and a content area, wherein the container is only used as a carrier for displaying content, and no other service logic exists in the container, so that the container supports multiplexing of a plurality of large-screen pages;

S22, creating sub-pages of the container page, dragging corresponding components from a component library according to a specific service scene, carrying out layout display, and creating each sub-page;

If the sub-pages need multiplexing, configuring a data source of a global variable type for each component, and configuring a global data source for each page in step 23;

s23, creating a large-screen page, selecting a container in the global configuration of the large-screen page, configuring a menu list for the current container, wherein each menu comprises a menu name, a sub-page code associated with the menu and global data source parameters;

Optionally, the menu in the container is not fixed except for style positions, and needs to be initialized through externally transferred menu data.

S24, after the container menu list is configured, transmitting menu data into a container by a monitor in a large-screen page, carrying out initialization rendering in the container, and simultaneously starting monitoring on the container menu;

The monitor monitors the menu, collects the global data source information configured by the current menu, requests the global data source when loading the corresponding page content, synchronizes the result into the global data resource pool, stores the defined global constant and the interface data stored in the global, and the component bound with the corresponding global data variable is refreshed accordingly.

The invention disassembles the page structure into three plates of the assembly, the container and the page, the assembly and the container both provide version management mechanisms, the assembly of one page is simultaneously developed by different developers, and finally the final page is constructed by dragging by the developers.

Further, the method for realizing the adaptation of the third-party different technology stack components comprises the following steps:

s31, reading the component registration package through a parser, and converting the component registration package into an AST abstract syntax tree;

Specifically, the parser recognizes the technical type, basic information and the like of the current component through an entry, analyzes the component source code into an AST abstract syntax tree by utilizing the AST technology of babel compiler, carries out secondary processing on the abstract syntax tree, firstly maintains a syntax mapping table, such as this name= "Zhang Sano" in vue frame, maps to this name state ({ name: "Zhang Sano") and the like in the act syntax, traverses the AST after generating the AST abstract syntax tree, matches the corresponding syntax or lexical conversion result in the syntax mapping table, and integrates the AST abstract syntax tree into the AST as additional information to finally obtain a processed AST abstract syntax tree;

S32, calling an AST abstract syntax tree analyzed and processed by a converter, converting the AST abstract syntax tree processed by the converter into a corresponding component source file through traversing of the converter, and storing and transmitting the component source file to a component register for registration;

s33, registering the component source file into a system through the component registrar;

Specifically, the generated component source file is packaged into a Vue plug-in, the Vue plug-in is registered into a main key, and only the plug-in file transmitted in the component register is required to be read and registered into the system, so that plug-in trial can be realized without polluting the system. The component registrar internal principle is shown in fig. 10.

The third party different technology stack contains the same technology stack as the system of the present invention but a different version.

Further, the method for reconstructing and using the built-in component of the support system comprises the following steps:

s41, selecting built-in components to be reconstructed, and entering a component reconstruction mode panel, wherein the component reconstruction mode panel comprises 4 areas, namely a tool bar, a source code area, a preview area and a configuration parameter debugging area;

s42, adjusting the source code of the current built-in component according to the service scene requirement, performing parameter entering debugging, judging which version the current component is according to the JSON configuration of the current component, reading the source code of the current component and displaying the source code in a source code area;

s43, after the reconstruction of the built-in component is completed, the component is stored and registered, or the source file of the component is downloaded to the local;

s44, after the registration is successful, the reconstructed assembly is used.

Further, the method for implementing the flexible component interaction and data communication mechanism comprises the following steps:

S51, predefining a current built-in event of a component in a JSON configuration file of each component, wherein the built-in event of the component comprises an event triggering action type (button click, selection frame data change and the like) and event execution content (refresh data and the like);

s52, configuring events for the used components;

The scene is exemplified by three components in the page, namely a select component, a histogram component and an index display component. And when the histogram data is refreshed, three indexes with the maximum quantity are acquired and rendered in the index display component. In combination with the above scenario, the following event configuration is performed:

(1) Select an event trigger action "change" and then select an event execution action "assign the selected value to the global variable TYPE" (assuming a global variable TYPE field has been configured in the page).

(2) Selecting an event triggering behavior ' watch global vars ' for a histogram component, and configuring 3 event execution actions ' I. Taking a global variable TYPE as a parameter and adjusting a back-end API interface;

S53, registering the configured event to the global bus;

In the histogram component of step S52, 4 actions are configured, and the four actions are summarized as an "event stream" mechanism in the system, and the execution strategies of the events are configured in parallel or in series in the event stream (for example, the complaints I and II, III and IV are necessarily serial events, and the complaints II and III can be parallel events), so that the execution performance of part of the events can be effectively improved through the strategies.

S54, triggering an event in the event scheduler based on the event configuration in the global event bus and the global data resource pool, and updating the global data resource pool according to the requirement.

Further, in the step S42, if a new configurable parameter is required, a plus sign of the configuration parameter area is clicked, the new parameter is saved in the JSON configuration of the component, a new JSON configuration is generated, and the component is previewed according to the source code and the current parameter.

Further, the modes of triggering the event in the event scheduler in the step S54 include an active triggering mode and a passive triggering mode, wherein the active triggering mode is that the event action is executed after the current component executes certain interactive operation, the passive triggering mode is that triggering conditions of some event actions are preset, and the event action is executed when the conditions are met.

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

The invention also provides a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the low code based visual large screen design method as described above when executing the program.

Compared with the prior art, the invention has the beneficial effects that:

The low-code-based visual large screen design system and the low-code-based visual large screen design method provide more new characteristics such as collaborative development, a single-page refreshing mechanism, high expansibility of components and the like on the basis of meeting the basic function requirements of visual large screen development, provide a reconstruction mechanism of built-in components, not influence the original components after reconstruction, re-register the components into new components for subsequent use, provide a third-party component adaptation mechanism, register the third-party components into the system and use the components, provide a page container mechanism, realize single-page refreshing of large-screen page contents based on a container mode, partially containerize a large screen frame, and provide a perfect event mechanism, take events as driving, connect states of all the components and global data in series, realize rich interactive experience, realize high flexibility, high expansibility and high synergic performance of the visual large screen page design, and promote user experience.

Drawings

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

In the drawings:

FIG. 1 is a schematic diagram of a large screen page design implementing low coupling, high expansion, supporting multi-person collaboration in accordance with an embodiment of the present invention;

FIG. 2 is a block diagram of a component management module according to an embodiment of the present invention;

FIG. 3 is a block diagram of a container management module according to an embodiment of the present invention;

FIG. 4 is a schematic diagram of the architecture of a container according to an embodiment of the present invention;

FIG. 5 is a block diagram of a presentation of a large screen page according to an embodiment of the present invention;

FIG. 6 is a diagram of a multi-menu large screen page of a single page refresh mechanism according to an embodiment of the present invention;

FIG. 7 is a container page diagram of an embodiment of the present invention;

FIG. 8 is a sub-page view of a container page according to an embodiment of the present invention;

FIG. 9 is a schematic flow chart of initializing a menu configuration into a container, changing the container menu into rendering a container page, and analyzing a data source into refreshing page component data according to an embodiment of the present invention;

FIG. 10 is a basic operational schematic of a component registrar in accordance with an embodiment of the present invention;

FIG. 11 is an internal schematic diagram of a component registry in accordance with an embodiment of the present invention;

FIG. 12 is a schematic flow chart of secondary development and registration use of built-in components according to an embodiment of the present invention;

FIG. 13 is a region setup view of a component reconfiguration mode panel according to an embodiment of the present invention;

FIG. 14 is a schematic flow chart of step S42 according to an embodiment of the present invention;

FIG. 15 is a workflow diagram of an event mechanism according to an embodiment of the invention;

FIG. 16 is a mechanical drawing of an event stream according to an embodiment of the present invention;

FIG. 17 is a flow chart illustrating an internal process of an event scheduler according to an embodiment of the present invention;

FIG. 18 is a flow chart of a method for implementing a low-coupling, high-expansion, large-screen page design supporting multi-person collaboration in accordance with the present invention;

FIG. 19 is a flow chart of a method for switching large screen content of a single page refresh mechanism of the present invention;

FIG. 20 is a flow chart of a method of adapting a third party different technology stack component according to the present invention;

FIG. 21 is a flow chart of a method of use and reconfiguration of a built-in component of a support system according to the present invention;

FIG. 22 is a flow chart of a method of implementing a flexible component interaction and data communication mechanism in accordance with the present invention;

Fig. 23 is a schematic diagram of a computer device according to an embodiment of the present invention.

Detailed Description

Reference will now be made in detail to exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary examples are not representative of all implementations consistent with the present disclosure. Rather, they are merely examples of systems and products consistent with some aspects of the present disclosure as detailed in the appended claims.

The terminology used in the present disclosure is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. As used in this disclosure and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used herein refers to and encompasses any or all possible combinations of one or more of the associated listed items.

It should be understood that although the terms first, second, third, etc. may be used in this disclosure to describe various information, these information should not be limited to these terms. These terms are only used to distinguish one type of information from another. For example, first information may also be referred to as second information, and similarly, second information may also be referred to as first information, without departing from the scope of the present disclosure. The term "if" as used herein may be interpreted as "at..once" or "when..once" or "in response to a determination", depending on the context.

Embodiments of the present invention are described in further detail below.

The embodiment of the invention provides a low-code-based visual large-screen design system, which 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 embodiment of the 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 and comprises a large screen page design method for realizing low coupling, high expansion and supporting multi-user cooperation, a large screen content switching method of a single page refreshing mechanism, a large screen content switching method for realizing different technical stack assembly adaptation methods of a third party, a method for supporting built-in assembly reconstruction and use of the system and a method for realizing flexible assembly interaction and data communication mechanism;

The method for realizing the large-screen page design with low coupling, high expansion and supporting multi-user cooperation is shown in fig. 18, and comprises the following steps:

Figure 1 shows three main panels of the system, respectively the assembly panel, the container panel, the large screen page panel. When a large-screen page is developed, a plurality of persons can cooperate, the building of the page related to the components to be developed and the overall layout container of the page are distributed to different developers, and the container is composed of a plurality of mature components.

The method comprises the steps of providing a component, wherein the component comprises a JSON configuration file and a component vue source code file, the JSON configuration comprises component basic information including a component name, a component version number and a source code file path corresponding to the component, a plurality of versions of the component can exist in a component library, each version of the component corresponds to one JSON file, and vue files of the JSON configuration file can be identical or can be customized and developed according to the versions. If there are multiple versions of a component, the version of the component may be selected at the component configuration, and the configuration and content of the component for which the version of the component is switched will vary, as shown in FIG. 2.

As shown in fig. 3, the inside of the container has only frame-like components such as a header, menu, content area (without specific content), etc.;

the configuration file of the container has no physical JSON file and vue source code file, only JSON strings that exist in the database, as shown in fig. 4.

The container and the components can be applied to a plurality of different pages, and can also be expanded according to specific business scenes. The final presentation form of the large screen page is JSON string, as shown in fig. 5.

The large screen content switching method of the single page refreshing mechanism, as shown in fig. 19, comprises the following steps:

s21, creating a container page, defining different containers according to service scene requirements, and customizing style positions of a menu area and a content area (shown in FIG. 6);

the container supports multiplexing of a plurality of large screen pages;

The monitor monitors the menu, collects the global data source information configured by the current menu, requests the global data source when loading the corresponding page content, synchronizes the result into the global data resource pool, stores the defined global constant and the interface data stored in the global, and the component bound with the corresponding global data variable is refreshed accordingly. Fig. 9 illustrates the flow of menu configuration initialization into a container (blue arrow), container menu change to container page rendering (black arrow), data source resolution to page component data refresh (red arrow).

The adaptation method for realizing the different technical stack components of the third party is shown in fig. 20, and comprises the following steps:

Fig. 10 shows the basic operation principle of the component registry, which is mainly used for realizing the registration and use of external third party components and reconstructed built-in components. The component registration package is a unified standard structure for registering components, which is built in the system of the invention, and comprises three parts of content, namely, an src folder (used for storing component source files), an entry. Js (component entry file, an entry when a component is registered), and assets (component static resource package). Component adapters the core of this module, external components are registered into the system of the present invention based on differences in component technologies and versions that the component adapters can mask.

Specifically, the generated component source file is packaged into a Vue plug-in, the Vue plug-in is registered into a main key, and only the plug-in file transmitted in the component register is required to be read and registered into the system, so that plug-in trial can be realized without polluting the system. The internal principle of the component registrar is shown in fig. 11.

The method for reconstructing and using the built-in component of the support system, as shown in fig. 21, comprises the following steps:

s41, selecting built-in components to be reconstructed, and entering a component reconstruction mode panel, wherein the component reconstruction mode panel comprises 4 areas, namely a toolbar, a source code area, a preview area and a configuration parameter debugging area, as shown in FIG. 13;

as shown in fig. 12, when the built-in components in the system do not fully meet the service requirement, the corresponding components can be selected for secondary development and reconfiguration, and the components after reconfiguration can call the adapter to register as a third party component, so that the customization degree of the built-in components is greatly improved.

If the configurable parameters need to be newly added, clicking the plus sign of the configuration parameter area, storing the newly added parameters into the JSON configuration of the component, generating the new JSON configuration, previewing the component according to the source code and the current parameters, and the flow is shown in figure 14.

s44, after the registration is successful, the reconstructed assembly is used.

A method for implementing a flexible component interaction and data communication mechanism, as shown in fig. 22, includes the steps of:

S51, predefining a current built-in event of a component in a JSON configuration file of each component, wherein the built-in event of the component comprises event triggering action types (button clicking, selection frame data change and the like), event execution contents (refreshing data) and the like;

s52, configuring events for the used components;

the scene example is that the page has three components, namely a select component, a histogram component and an index display component. And when the histogram data is refreshed, three indexes with the maximum quantity are acquired and rendered in the index display component. In combination with the above scenario, the following event configuration is performed:

FIG. 15 illustrates an event mechanism workflow.

S53, registering the configured event to the global bus;

in the histogram component of step S52, 4 actions are configured, and the four actions are generalized into an "event stream" mechanism in the system, and the execution strategies of the events are configured in parallel or in series (for example, the complaints I and II, III and IV are necessarily serial events, and the complaints II and III can be parallel events), so that the execution performance of part of the events can be effectively improved through the strategies, and the event stream mechanism is shown in fig. 16.

S54, triggering an event in the event scheduler based on the event configuration in the global event bus and the global data resource pool, and updating the global data resource pool according to the requirement. The event scheduler internal flow is shown in fig. 17.

The modes for triggering the event in the event scheduler comprise an active triggering mode and a passive triggering mode, wherein the active triggering mode is that the event action is executed after the current component executes certain interactive operation, the passive triggering mode is that trigger conditions of some event actions are preset, and the event action is executed when the conditions are met.

An embodiment of the present invention further provides a computer device, fig. 23 is a schematic structural diagram of a computer device provided by the embodiment of the present invention, and referring to fig. 23 of the accompanying drawings, the computer device includes an input system 23, an output system 24, a memory 22 and a processor 21, where the memory 22 is used to store one or more programs, and 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 by the embodiment of the present invention, and the input system 23, the output system 24, the memory 22 and the processor 21 may be connected by a bus or another manner, and fig. 23 is exemplified by connection through the bus.

The memory 22 is a computer-readable and writable storage medium, and may be used to store software programs, computer-executable programs, and program instructions corresponding to the low-code based visual large-screen design method according to an embodiment of the present invention, the memory 22 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function, the storage data area may store data created according to use of the device, etc., and the memory 22 may further include a high-speed random access memory, a nonvolatile memory, such as at least one disk storage device, a flash memory device, or other nonvolatile solid-state storage device, and in some examples, the memory 22 may further include a memory remotely located with respect to the processor 21, and these remote memories may be connected to the device through a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

The input system 23 may be used to receive input numeric or character information and to generate key signal inputs related to user settings and function control of the device, and the output system 24 may include a display device such as a display screen.

The processor 21 executes various functional applications of the device and data processing by running software programs, instructions and modules stored in the memory 22, i.e. implements the low-code based visual large screen design method described above.

The computer equipment provided by the embodiment can be used for executing the low-code-based visual large screen design method provided by the embodiment, and has corresponding functions and beneficial effects.

Embodiments of the present invention also provide a storage medium containing computer executable instructions that when executed by a computer processor are for performing the low code based visual large screen design method as provided by the above embodiments, the storage medium being any of various types of memory devices or storage devices, including an installation medium, such as a CD-ROM, floppy disk or tape system, a computer system memory or random access memory, such as DRAM, DDR RAM, SRAM, EDO RAM, lanbas (Rambus) RAM, etc., a non-volatile memory, such as flash memory, magnetic media (e.g., 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, the second computer system being connected to the first computer system through a network (such as the internet), the second computer system may provide program instructions to the first computer for execution. Storage media includes two or more storage media that may reside in different locations (e.g., in different computer systems connected by a network). The storage medium may store program instructions (e.g., embodied as a computer program) executable by one or more processors.

Of course, the storage medium containing the computer executable instructions provided in the embodiments of the present invention is not limited to the low-code-based visual large-screen design method described in the above embodiments, and may also perform the related operations in the low-code-based visual large-screen design method provided in any embodiment of the present invention.

Thus far, the technical solution of the present invention has been described in connection with the preferred embodiments shown in the drawings, but it is easily understood by those skilled in the art that the scope of protection of the present invention is not limited to these specific embodiments. Equivalent modifications and substitutions for related technical features may be made by those skilled in the art without departing from the principles of the present invention, and such modifications and substitutions will be within the scope of the present invention.

The above description is only of the preferred embodiments of the present invention and is not intended to limit the present invention, and various modifications and variations of the present invention will be apparent to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. The low-code-based visual large-screen design system is characterized by comprising 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;

2. The low-code-based visual large screen design method is applied to the low-code-based visual large screen design system as claimed in claim 1, and is characterized by comprising a large screen page design method for realizing low coupling, high expansion and supporting multi-user cooperation, a large screen content switching method for a single page refreshing mechanism, a large screen content switching method for realizing different technical stack assembly adaptation methods of a third party, a method for supporting built-in assembly reconstruction and use of the system, and a method for realizing flexible assembly interaction and data communication mechanism;

3. The low-code based visual large screen design method according to claim 2, wherein the large screen content switching method of the single page refresh mechanism comprises the steps of:

S21, creating a container page, defining different containers according to service scene requirements, and customizing style positions of a menu area and a content area;

And S24, after the container menu list is configured, transmitting the menu data into the container by the monitor in the large-screen page, carrying out initialization rendering in the container, starting monitoring on the container menu, acquiring the menu which is currently required to be loaded by the monitor when the container content is subjected to menu switching, finding out the sub-page associated with the menu, and finally transmitting the configuration of the acquired sub-page to the container for real-time rendering.

4. The low-code based visual large screen design method according to claim 2, wherein the implementation of the third-party different technology stack component adaptation method comprises the following steps:

S33, registering the component source file into a system through the component registrar.

5. The low-code based visual large screen design method according to claim 2, wherein the support system built-in component reconstruction and use method comprises the steps of:

s44, after the registration is successful, the reconstructed assembly is used.

6. The low-code based visual large screen design method according to claim 2, wherein the method for implementing flexible component interaction and data communication mechanism comprises the steps of:

S51, predefining a current built-in event of each component in a JSON configuration file of each component, wherein the built-in event of each component comprises an event triggering action type and event execution content;

s52, configuring events for the used components;

S53, registering the configured event to the global bus;

7. The method of claim 5, wherein in step S42, if a new configurable parameter is required, then clicking the plus sign of the configuration parameter area, saving the new parameter to the JSON configuration of the component, generating a new JSON configuration, and previewing the component according to the source code and the current parameter.

8. The method for designing a large-screen based on low codes according to claim 6, wherein the modes of triggering events in the event scheduler in the step S54 include an active triggering mode and a passive triggering mode, wherein the active triggering mode is that events are executed after a certain interactive operation is executed by a current component, and the passive triggering mode is that triggering conditions of some event behaviors are preset, and the events are executed when the conditions are met.

9. A computer readable storage medium having stored thereon a computer program, wherein the program when executed by a processor implements the steps of the low code based visual large screen design method of any of claims 2-8.

10. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor implements the steps of the low code based visual large screen design method according to any of claims 2-8 when the program is executed by the processor.