Theme card display system and method based on data realization

Abstract

The present invention relates to a theme card display system and method based on data implementation. The system includes: a data front-end mapping module, which receives configuration data and formulates mapping rules to map the configuration data with UI components; a data rendering module, which inputs the configuration data into the UI components and renders them; and a theme card data display module, which triggers the UI components. When the label of the corresponding entity object belongs to the preset theme card type, the corresponding theme card type of the entity object is returned according to the unique ID request of the entity object by accessing the corresponding path, and accordingly obtains the corresponding theme card page display data of the entity object under the corresponding theme card module configured by a configuration center according to the label. By setting the UI component, the UI component is used as the entrance of the theme card, and the entity configuration information is displayed by triggering the UI component, and the configuration information and the corresponding theme card page are precisely positioned, thereby improving the reusability and development efficiency of the components.

Description

Technical Field

[0001] The present application relates to the technical field of computer software development, and in particular to a theme card display system and method based on data implementation. Background Art

[0002] In the related products of the wise system, the data model platform provides a data configuration function. According to the configuration information, different entity (schema) information will be dynamically generated. When displaying entity information in the prior art, it is impossible to accurately locate the configuration information to the corresponding theme card page of the entity in the corresponding theme card module.

[0003] The existing solution is generally to display the data of a certain field according to the data returned by the backend interface, and use this data to represent the entity. Then move the mouse into the entity, and a popup layer will pop up to display more configuration information related to the entity. However, the existing technical solution cannot fully meet our needs due to the following reasons:

[0004] 1. At the UI design level, there is no view component that fully meets the needs;

[0005] 2. The data format returned by the interface is fixed and cannot be returned according to the dynamic configuration of the data model platform;

[0006] 3. The component has a single function and is only used to view entity information. It does not support direct association between dynamic data and the theme card module.

[0007] Currently, no effective solution has been proposed for the problem that configuration information cannot be accurately located during data configuration. Summary of the invention

[0008] The embodiment of the present application provides a data-based theme card display system and method, which can display entity information while connecting the theme card module to at least solve the problem that configuration information cannot be accurately located in the related art.

[0009] In a first aspect, an embodiment of the present application provides a theme card display system based on data implementation, including:

[0010] The data front-end mapping module receives configuration data and formulates mapping rules to map the configuration data with UI components;

[0011] Data rendering module, inputs configuration data into UI components and renders them;

[0012] The theme card data display module triggers the UI component. When the label of the corresponding entity object belongs to the preset theme card type, it accesses the specified URL path and requests to return the corresponding theme card type of the entity object according to the unique ID of the entity object, and thereby obtains the corresponding theme card page display data of the entity object under the corresponding theme card module configured by a configuration center according to the label.

[0013] In some of the embodiments, an interactive display module is also included, which obtains the parameters required for the corresponding theme card from the entity object and encapsulates them into a parameter object, binds the parameter object to the click interaction event of the UI component, encapsulates the UI component in a non-theme card module, and when the UI component is clicked, the click interaction event is triggered, the parameter object is assembled, and sent to the theme card. The theme card receives the parameter object and returns the corresponding theme card page display data accordingly, and displays it in a browser.

[0014] In some of the embodiments, the data front-end mapping module also formats the configuration data accordingly according to the data type required for UI component rendering.

[0015] In some of the embodiments, the data rendering module inputs the configuration data into the UI component and stores it in the global store. When the configuration data changes, the corresponding data in the global store is updated in real time.

[0016] In a second aspect, an embodiment of the present application provides a method for displaying a theme card based on data, applying the theme card display system based on data in the first aspect, including the following steps:

[0017] The data front-end mapping step receives configuration data and formulates mapping rules to map the configuration data with UI components;

[0018] Data rendering step: input configuration data into UI components and render them;

[0019] The step of displaying the theme card data is to trigger the UI component. When the label of the corresponding entity object belongs to the preset theme card type, the type of the corresponding theme card of the entity object is returned according to the unique ID request of the entity object by accessing the specified URL path, and thereby obtain the corresponding theme card page display data of the entity object under the corresponding theme card module configured by a configuration center according to the label.

[0020] In some of the embodiments, an interactive display step is also included, which specifically includes the following steps:

[0021] Get the parameters required for the corresponding theme card from the entity object and encapsulate them into a parameter object, bind the parameter object to the click interaction event of the UI component, encapsulate the UI component in the non-theme card module, and when the UI component is clicked, the click interaction event is triggered, assemble the parameter object that the theme card needs to display, and send it to the theme card. The theme card receives the parameter object and returns the corresponding theme card page display data accordingly, and displays it in a browser.

[0022] In some embodiments, the data front-end mapping step further includes:

[0023] Format the configuration data accordingly according to the data type required for UI component rendering.

[0024] In some embodiments, the data rendering step further includes:

[0025] Input configuration data into UI components and store them in the global store. When configuration data changes, the corresponding data in the global store is updated in real time.

[0026] In a third aspect, an embodiment of the present application provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the data-based theme card display method as described in the second aspect above is implemented.

[0027] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the data-based theme card display method as described in the second aspect above.

[0028] Compared with the related technology, the data-based theme card display system and method provided in the embodiment of the present application can be applied to the field of data capability technology, and can also be specifically applied to the field of data visualization technology. By setting the UI component, the UI component is used as the entrance to the theme card, and the entity configuration information is displayed by triggering the UI component. At the same time, the configuration information and the corresponding theme card page are accurately positioned, which greatly solves the problem in the prior art that the configuration information cannot be accurately positioned to the corresponding theme card interface of the entity in the theme card module, thereby improving the reusability and development efficiency of the component.

[0029] Details of one or more embodiments of the present application are set forth in the following drawings and description to make other features, objects, and advantages of the present application more readily apparent. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0031] Figure 1 is a structural block diagram of a theme card display system based on data implementation according to an embodiment of the present application;

[0032] Figure 2 is a flow chart of a method for displaying a theme card based on data implementation according to an embodiment of the present application;

[0033] Figure 3 is a preferred flow chart of a method for displaying a theme card based on data implementation according to an embodiment of the present application;

[0034] Figure 4 Schematic diagram of the hardware structure of an electronic device according to an embodiment of the present application. Description of the drawings:

[0036] Data front-end mapping module 1; data rendering module 2;

[0037] Theme card data display module 3; interactive display module 4;

[0038] Processor 81; memory 82; communication interface 83; bus 80. DETAILED DESCRIPTION

[0039] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application is described and illustrated below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not intended to limit the present application. Based on the embodiments provided in the present application, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application.

[0040] Obviously, the drawings described below are only some examples or embodiments of the present application. For ordinary technicians in this field, the present application can also be applied to other similar scenarios based on these drawings without creative work. In addition, it can also be understood that although the efforts made in this development process may be complicated and lengthy, for ordinary technicians in this field related to the content disclosed in this application, some changes in design, manufacturing or production based on the technical content disclosed in this application are just conventional technical means, and should not be understood as insufficient content disclosed in this application.

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

[0042] Unless otherwise defined, the technical terms or scientific terms involved in this application should be understood by people with ordinary skills in the technical field to which this application belongs. The words "one", "a", "a", "the" and the like involved in this application do not indicate a quantitative limitation, and may represent the singular or plural. The terms "include", "comprise", "have" and any of their variations involved in this application are intended to cover non-exclusive inclusions; for example, a process, method, system, product or device that includes a series of steps or modules (units) is not limited to the listed steps or units, but may also include steps or units that are not listed, or may also include other steps or units inherent to these processes, methods, products or devices. The words "connect", "connected", "coupled" and the like involved in this application are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. The "multiple" involved in this application refers to two or more. "And / or" describes the association relationship of associated objects, indicating that there may be three relationships, for example, "A and / or B" can represent: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the objects before and after are in an "or" relationship. The terms "first", "second", "third", etc. involved in this application are only used to distinguish similar objects and do not represent a specific ordering of the objects.

[0043] The data-based theme card display system and method proposed in the embodiments of the present application can be applied to the wise system, which is an AI-driven data governance platform (including the structured data governance platform CONA, the unstructured text governance platform Raptor, and the associative knowledge mining product HARTS), which realizes the symbolization process of various structured and unstructured videos, images, texts and other multi-heterogeneous data, completes data aggregation, fusion, reasoning and complex calculations through the knowledge graph database honeycomb NEST, and the knowledge graph analysis platform SCOPA realizes second-level calculations and online analysis and mining.

[0044] This embodiment provides a theme card display system based on data implementation. As used below, the terms "module", "unit", "subunit", etc. can implement a combination of software and / or hardware of a predetermined function. Although the device described in the following embodiments is preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0045] Figure 1 is a structural block diagram of a theme card display system based on data implementation according to an embodiment of the present application, such as Figure 1 As shown, the system includes:

[0046] The data front-end mapping module 1 receives configuration data and formulates mapping rules to map the configuration data with UI components;

[0047] Data rendering module 2, inputs configuration data into UI components and renders them;

[0048] Theme card data display module 3, by triggering the UI component, when the label of the corresponding entity object belongs to the preset theme card type, by accessing the specified URL path, requests to return the type of the corresponding theme card of the entity object according to the unique ID of the entity object, and thereby obtains the corresponding theme card page display data of the entity object under the corresponding theme card module configured by a configuration center according to the label.

[0049] By setting the above modules, the reusability and development efficiency of the components are improved, and a method for displaying the subject portrait information of entity objects based on configuration data is realized, thereby meeting the dynamic configuration data UI display requirements in the smart system scenario.

[0050] The above-mentioned topic card is the portrait information corresponding to a certain entity object. The portrait information can be divided into different types of topic cards according to the label attribute of the entity object. The modules displayed by different types of topic cards are not necessarily the same. The type of preset topic card refers to the type of topic card preset according to the label attribute of the entity object.

[0051] In the embodiment of the present application, the theme cards include five major types, each type includes multiple modules, and the modules include numerous theme card pages. However, the present invention is not limited to this.

[0052] Currently, the five types of theme cards are employee theme cards, product theme cards, business opportunity theme cards, customer organization theme cards, and customer individual theme cards. Among them, the portrait information of employee theme cards includes three modules: basic information, my customers, and past projects; the portrait information of product theme cards includes basic information, related business opportunities, product team, core functions, solutions, application cases, and document information modules; the business opportunity theme card includes basic information and business opportunity group chat modules; the customer organization theme card includes basic information, business opportunity information, organizational structure, close contact with customers, and project track modules; the customer individual includes three modules: basic information, inline contacts, and customer organizational structure.

[0053] It should be noted that the above mapping rules refer to mapping the key of the configuration field of the configuration data received from the data model with the key rendered by the UI component. For example, the key of the title attribute configured in the data model is titleProp, but the title rendered in the UI component is a field with a fixed key of title. In this case, titleProp needs to be mapped to title.

[0054] In actual applications, the UI component supports flexible configuration of the entrance to display the theme card. When the label of the entity object does not belong to the above five categories, the UI component does not provide a theme card entrance. When the label of the entity object belongs to the above five categories, the UI component provides a theme card entrance. The specific operation of displaying the theme card is to access the specified URL path. The URL path requires the unique ID of the entity object as a request parameter. The request will return the category to which the portrait information of the entity object belongs, and then obtain the module configuration that the theme card should display based on the category. Each module receives the label attribute as a request parameter and obtains the data required by the module. The above display data is the configuration center that performs module configuration, filters the data in the module, and obtains the displayed data.

[0055] It should be noted that the format of the above URL path is: http: / / service deployment domain:service deployment port / topic / entity / info / :id.

[0056] The configuration center obtains the data of the theme card page that needs to be displayed from the model data of the corresponding theme card through model calculation.

[0057] In some embodiments, the system also includes an interactive display module 4, which obtains the parameters required for the corresponding theme card from the entity object and encapsulates them into a parameter object, binds the parameter object to the click interaction event of the UI component, encapsulates the UI component in a non-theme card module, and when the UI component is clicked, the click interaction event is triggered, assembles the parameter object that needs to be displayed for the theme card, and sends it to the theme card. The theme card receives the parameter object and returns the corresponding theme card page display data accordingly, and displays it in a browser.

[0058] It should be noted that the non-theme card module refers to a theme card whose label type of the corresponding entity object is not in the preset theme card type. The non-theme card module is connected to the theme card module by encapsulating the UI component.

[0059] In actual applications, entity objects can be used as any module, theme card module or non-theme card module. The significance of entity object theme card entry configuration is to open up the channel from the non-theme card module configured with entity objects to the theme card module display. It associates different project modules, which can be done through configuration entry and interactive association.

[0060] By setting up the interactive display module 4, a mechanism for connecting the non-theme card module with the theme card module is realized, the reusability and development efficiency of the components are improved, and a method for displaying theme portrait information of entity objects based on configuration data is realized, thereby meeting the dynamic configuration data UI display requirements in the smart system scenario and the requirements of other modules to connect with the associated theme card modules.

[0061] In some embodiments, the data front-end mapping module 1 further formats the configuration data according to the data type required for rendering the UI component.

[0062] In actual applications, the values ​​of the configuration fields are formatted according to the fixed format requirements of the UI components. For example, if the data model is configured with a title attribute, the interface will directly return array type data, but the UI component requires a string type to render the title. In this case, the mapping model will convert the array type value into a string type value according to the format requirements.

[0063] In some embodiments, the data rendering module 2 inputs the configuration data into the UI component and stores it in the global store. When the configuration data changes, the corresponding data in the global store is updated in real time.

[0064] The above-mentioned UI component is a Popup component that pops up when the user moves the mouse to the entity object. Inside it is a component that needs to be implemented separately according to the UI design. This component receives the configuration data output by the data front-end mapping module 1. When the configuration data is updated, the UI component displays the latest configuration data in real time.

[0065] Take the graph analysis page as an example. The page displays a relationship graph formed by a series of user operations. A relationship graph component needs to be implemented for display. The data used to display the relationship graph is stored in the global store. When the user adds or deletes data in the relationship graph, the data stored in the global store is updated.

[0066] It should be noted that the above modules can be functional modules or program modules, and can be implemented by software or hardware. For modules implemented by hardware, the above modules can be located in the same processor; or the above modules can be located in different processors in any combination.

[0067] Therefore, this embodiment provides a method for displaying a theme card based on data. This method is used to implement the above embodiments and preferred implementations, and will not be repeated for what has been described. Figure 2 is a flow chart of a method for displaying a topic card based on data according to an embodiment of the present application. Figure 2 As shown, the process includes the following steps:

[0068] Data front-end mapping step S1, receiving a configuration data and formulating a mapping rule to map the configuration data with the UI component;

[0069] Data rendering step S2, inputting the configuration data into the UI component and rendering it;

[0070] Theme card data display step S3, by triggering the UI component, when the label of the corresponding entity object belongs to the preset theme card type, by accessing the specified URL path, the type of the corresponding theme card of the entity object is returned according to the unique ID request of the entity object, and the corresponding theme card page display data of the entity object under the corresponding theme card module configured by a configuration center according to the label is obtained.

[0071] The type of theme card is pre-set according to user needs. When the label attribute of the entity object belongs to the type of the set theme card, the portrait information type of the entity object is returned by accessing the specified URL path according to the unique ID request of the entity object, and the module configuration corresponding to the theme card is obtained accordingly to obtain the data required by the module.

[0072] In some embodiments, the data front-end mapping step further includes:

[0073] Format the configuration data accordingly according to the data type required for UI component rendering.

[0074] In some embodiments, the method also includes an interactive display step S4, which specifically includes the following steps: obtaining the parameters required for the corresponding theme card from the entity object and encapsulating them into a parameter object, binding the parameter object to the click interaction event of the UI component, encapsulating the UI component in a non-theme card module, and when the UI component is clicked, triggering the click interaction event, assembling the parameter object that the theme card needs to display, and sending it to the theme card. The theme card receives the parameter object and returns the corresponding theme card page display data accordingly, and displays it in a browser.

[0075] In some embodiments, the data rendering step further includes:

[0076] Input configuration data into UI components and store them in the global store. When configuration data changes, the corresponding data in the global store is updated in real time.

[0077] This embodiment also provides a theme card display method based on data implementation. Figure 3 is a preferred flow chart of a method for displaying a theme card based on data according to an embodiment of the present application, such as Figure 3 As shown, the process includes the following steps:

[0078] S301: Configure data front-end mapping model

[0079] Receive the configuration data of the data model, map the key of the configuration field with the UI component rendering key, and format the value of the configuration field according to the fixed format requirements of the UI component.

[0080] S302: UI display components in the smart system scenario

[0081] The Popup component that pops up when the user moves the mouse into the entity contains a component that needs to be implemented separately according to the UI design. This component receives the data output in the first step. When the data is updated, the UI component displays the latest configuration data value in real time.

[0082] S303: Theme card display method

[0083] The theme card is the portrait information corresponding to a certain entity object. The portrait information can be divided into different types of theme cards according to the label attribute of the entity object. The modules displayed by different types of theme cards may not be the same. Currently, five types of theme cards are provided, namely employee theme cards, product theme cards, business opportunity theme cards, customer organization theme cards, and customer personal theme cards. Among them, the portrait information of employee theme cards includes three modules: basic information, my customers, and past projects. The portrait information of product theme cards includes basic information, related business opportunities, product team, core functions, solutions, application cases, and document information modules. Business opportunity theme cards include basic information and business opportunity group chat modules. Customer organization theme cards include basic information, business opportunity information, organizational structure, close contact with customers, and project track modules. Customer personal cards include three modules: basic information, inline contacts, and customer organizational structure. The UI component supports flexible configuration of the entrance to display theme cards.

[0084] When the label of an entity object belongs to one of these five categories, the UI component provides a topic card entry. The specific operation of displaying the topic card is to access the specified URL path (http: / / service deployment domain:service deployment port / topic / entity / info / :id). The URL path requires the unique ID of the entity object as a request parameter. The request will return the category to which the portrait information of the entity object belongs, and then obtain the module configuration that the topic card should display based on the category. Each module receives the label as a request parameter and obtains the data required by the module.

[0085] When the label of the entity object does not belong to these five categories, the UI component does not provide a theme card entry. The entity object can be used as any module, and the UI component can be encapsulated into the entity object whose label does not belong to these five categories. The significance of its theme card entry configuration is to open up the channel from the non-theme card module project module configured with the entity object to the theme card module display. It associates different project modules. In addition to configuring the entry, this process also requires association in interaction. The specific operation is: take out the parameters required for the theme card display from the entity object and encapsulate them into parameter objects, and click and interact with the configured theme card entry (corresponding button) to bind. When the user clicks the button for displaying the theme card of a specific configuration, the bound click event is triggered. In the click event, the parameter object required for the theme card display is assembled and sent to the theme card. After the theme card receives the parameter object, the corresponding browser will open a new page to parse the parameters and display the theme portrait information of the entity object.

[0086] The above page parsing parameters are encapsulated configuration data. From the page parsing parameters to the display of the subject portrait information of the entity object, parsing and packaging are required.

[0087] Through the above steps, the reusability and development efficiency of the components are improved, and a method for displaying the theme portrait information of the entity object based on the configuration data is realized, thereby meeting the dynamic configuration data UI display requirements in the smart system scenario and the requirements of other modules to open up the associated theme card module.

[0088] It should be noted that the steps shown in the above process or the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0089] In addition, combined Figure 1 The method for displaying a theme card based on data in the embodiment of the present application described above can be implemented by an electronic device. Figure 4 Schematic diagram of the hardware structure of an electronic device according to an embodiment of the present application.

[0090] The electronic device may include a processor 81 and a memory 82 storing computer program instructions.

[0091] Specifically, the processor 81 may include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.

[0092] Among them, the memory 82 may include a large-capacity memory for data or instructions. By way of example and not limitation, the memory 82 may include a hard disk drive (HDD), a floppy disk drive, a solid-state drive (SSD), a flash memory, an optical disk, a magneto-optical disk, a magnetic tape, or a universal serial bus (USB) drive, or a combination of two or more of these. Where appropriate, the memory 82 may include a removable or non-removable (or fixed) medium. Where appropriate, the memory 82 may be inside or outside the data processing device. In a specific embodiment, the memory 82 is a non-volatile memory. In a specific embodiment, the memory 82 includes a read-only memory (ROM) and a random access memory (RAM). Where appropriate, the ROM may be a mask-programmed ROM, a programmable ROM (Programmable Read-Only Memory, PROM for short), an erasable PROM (Erasable ProgrammableRead-Only Memory, EPROM for short), an electrically erasable PROM (Electrically Erasable ProgrammableRead-Only Memory, EEPROM for short), an electrically alterable ROM (Electrically Alterable Read-Only Memory, EAROM for short) or a flash memory (FLASH) or a combination of two or more of these. Under appropriate circumstances, the RAM can be a static random access memory (SRAM) or a dynamic random access memory (DRAM), wherein the DRAM can be a fast page mode dynamic random access memory (FPMDRAM), an extended data output dynamic random access memory (EDODRAM), a synchronous dynamic random access memory (SDRAM), etc.

[0093] The memory 82 may be used to store or cache various data files required for processing and / or communication, as well as possible computer program instructions executed by the processor 81 .

[0094] The processor 81 reads and executes the computer program instructions stored in the memory 82 to implement any one of the data-based theme card display methods in the above embodiments.

[0095] In some of the embodiments, the electronic device may further include a communication interface 83 and a bus 80. Figure 4 As shown, the processor 81, the memory 82, and the communication interface 83 are connected via a bus 80 and communicate with each other.

[0096] The communication interface 83 is used to implement communication between the modules, devices, units and / or equipment in the embodiment of the present application. The communication interface 83 can also implement data communication with other components such as: external devices, image / data acquisition equipment, databases, external storage, and image / data processing workstations.

[0097] The bus 80 includes hardware, software or both, and couples the components of the electronic device to each other. The bus 80 includes but is not limited to at least one of the following: a data bus, an address bus, a control bus, an expansion bus, and a local bus. By way of example and not limitation, bus 80 may include an Accelerated Graphics Port (AGP) or other graphics bus, an Extended Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a Hyper Transport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an InfiniBand interconnect, a Low Pin Count (LPC) bus, a memory bus, a Micro Channel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local Bus (VLB) bus, or other suitable buses or a combination of two or more of these. Where appropriate, bus 80 may include one or more buses. Although embodiments of the present application describe and illustrate a particular bus, the present application contemplates any suitable bus or interconnect.

[0098] The electronic device can encapsulate the UI component, use the UI component as the entrance to display the theme card, and execute the theme card display step in the embodiment of the present application, thereby realizing the combination Figure 1 The described method of displaying topic cards based on data implementation.

[0099] In addition, in combination with the data-based theme card display method in the above embodiment, the present application embodiment can provide a computer-readable storage medium for implementation. The computer-readable storage medium stores computer program instructions; when the computer program instructions are executed by the processor, any one of the data-based theme card display methods in the above embodiment is implemented.

[0100] The technical features of the above-described embodiments may be arbitrarily combined. To make the description concise, not all possible combinations of the technical features in the above-described embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0101] The above-mentioned embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application shall be subject to the attached claims.

Claims

1. A data-based theme card display system, characterized in that: include: A data front-end mapping module receives configuration data and formulates mapping rules to map the configuration data with UI components; A data rendering module inputs the configuration data into the UI component and renders it; The theme card data display module, by triggering the UI component, when the label of the corresponding entity object belongs to the preset theme card type, by accessing the specified URL path, requesting to return the type of the corresponding theme card of the entity object according to the unique ID of the entity object, and obtaining the corresponding theme card page display data of the entity object under the corresponding theme card module configured by a configuration center according to the label; The interactive display module obtains the parameters required for the corresponding theme card from the entity object and encapsulates them into a parameter object, binds the parameter object to the click interaction event of the UI component, encapsulates the UI component in a non-theme card module, and when the UI component is clicked, the click interaction event is triggered, the parameter object is assembled, and sent to the theme card. The theme card receives the parameter object and returns the corresponding theme card page display data accordingly, and displays it in a browser.

2. The data-based theme card display system according to claim 1, characterized in that: The data front-end mapping module also formats the configuration data accordingly according to the data type required for rendering the UI component.

3. The data-based theme card display system according to claim 1, characterized in that: The data rendering module inputs the configuration data into the UI component and stores it in the global store. When the configuration data changes, the corresponding data in the global store is updated in real time.

4. A data-based theme card display method, applied to the data-based theme card display system according to any one of claims 1 to 3, characterized in that: The following steps are involved: A data front-end mapping step, receiving a configuration data and formulating a mapping rule to map the configuration data with the UI component; A data rendering step, inputting the configuration data into the UI component and rendering it; The step of displaying theme card data, by triggering the UI component, when the label of the corresponding entity object belongs to the type of the preset theme card, by accessing the specified URL path, requesting to return the type of the corresponding theme card of the entity object according to the unique ID of the entity object, and obtaining the corresponding theme card page display data of the entity object under the corresponding theme card module configured by a configuration center according to the label; The interactive display step specifically includes the following steps: The parameters required for the corresponding theme card are obtained from the entity object and encapsulated into a parameter object, the parameter object is bound to the click interaction event of the UI component, and the UI component is encapsulated in a non-theme card module. When the UI component is clicked, the click interaction event is triggered, the parameter object required to be displayed by the theme card is assembled, and sent to the theme card. The theme card receives the parameter object and returns the corresponding theme card page display data accordingly, and displays it in a browser.

5. The method for displaying a theme card based on data realization according to claim 4, characterized in that: The data front-end mapping step also includes: The configuration data is formatted accordingly according to the data type required for rendering the UI component.

6. The method for displaying a theme card based on data according to claim 4, characterized in that: The data rendering step further includes: The configuration data is input into the UI component and stored in the global store. When the configuration data changes, the corresponding data in the global store is updated in real time.

7. An electronic device comprising a memory, one or more processors, and one or more computer programs stored in the memory and executable on the processors, characterized in that: When one or more of the processors execute one or more of the computer programs, the data-based theme card display method according to any one of claims 4 to 6 is implemented.

8. A storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the data-based theme card display method according to any one of claims 4 to 6 is implemented.

Images