Page generation method, display device, computer equipment and storage medium

Abstract

The invention provides a page generation method, a display device, computer equipment and a storage medium, and belongs to the technical field of Internet and software development. The page generation method disclosed by the invention comprises the following steps: in response to a page acquisition operation for a target business scene, displaying a preset business page; the preset business page comprises a plurality of preset target components located in an information display area; the target component comprises sub-service information which is displayed by the preset service page in a default manner and is related to the target service scene; in response to a moving operation on any to-be-displayed component in the selectable list displayed on the preset service page, rendering sub-service information of the currently moving to-be-displayed component to an information display area; the selectable list comprises a plurality of to-be-displayed components.

Description

Technical Field

[0001] The present invention belongs to the field of Internet and software development technology, and specifically relates to a page generation method, a display device, a computer device and a storage medium. Background Art

[0002] The page structure of traditional smart dashboards is fixed, that is, the multiple sub-business components displayed on the page cannot be adjusted; the content displayed by the sub-business components includes the relevant indicator information of the sub-business in the current business scenario. Since the dashboard page structure is fixed, the indicator information concerned in the same business scenario under different circumstances changes, and developers need to re-make the dashboard page, which means that secondary development of the relevant page code is required. In addition, for the same business scenario, the indicator information concerned by different users is also different; since the page structure after secondary development is still fixed, it is still impossible to meet the needs of different users at the same time. Summary of the invention

[0003] The present disclosure aims to solve at least one of the technical problems existing in the prior art, and provides a page generation method, a display device, a computer device and a storage medium.

[0004] In the first aspect, the technical solution adopted to solve the technical problem of the present disclosure is a page generation method, including:

[0005] In response to a page acquisition operation for a target business scenario, a preset business page is displayed; the preset business page includes a plurality of target components that are preset and located in an information display area; the target components include sub-business information related to the target business scenario that is displayed by default on the preset business page;

[0006] In response to a move operation on any component to be displayed in a selectable list displayed on the preset business page, sub-business information of the component to be displayed currently being moved is rendered to the information display area; the selectable list includes a plurality of components to be displayed.

[0007] In some embodiments, before displaying the preset business page in response to the page acquisition operation for the target business scenario, the method further includes:

[0008] Get the sub-business code that has been developed on the front end;

[0009] Extracting a sub-business structure code from the sub-business code and encapsulating it into a first file; the sub-business structure code represents structural information of a sub-business component;

[0010] Extracting a sub-service cascading style code from the sub-service code and encapsulating it into a second file; the sub-service cascading style code represents style information of a sub-service component;

[0011] Extracting a sub-business data code from the sub-business code and encapsulating it into a third file; the sub-business data code represents the sub-business information of the sub-business component;

[0012] The first file, the second file and the third file are processed as sub-business components.

[0013] In some embodiments, before displaying the preset business page in response to the page acquisition operation for the target business scenario, the method further includes:

[0014] For any of the sub-business components, based on a preset framework, create component category information, identity information and display type information of the sub-business component;

[0015] When the component category information is of the first category, determining the sub-business component as the target component;

[0016] When the component category information is of the second category, determining the sub-business component as the component to be displayed;

[0017] The first creation information of the target component and the second creation information of the component to be displayed are respectively introduced into the data file of the preset business page, wherein the first creation information includes the identity information and display type information created by the target component; the second creation information includes the identity information and display type information created by the component to be displayed.

[0018] In some embodiments, before the first creation information of the target component and the second creation information of the component to be displayed are introduced into the data file of the preset business page respectively, the method further includes:

[0019] Based on the preset framework, a page structure of the preset business page is created, and a structure file, a cascading style file and a data file of the preset business page are obtained.

[0020] In some embodiments, before displaying the preset business page in response to the page acquisition operation for the target business scenario, the method further includes:

[0021] Configuring a movable function for the component to be displayed using preset attributes;

[0022] The movable function includes a start event function and an end event function; the start event function is used to be triggered when the user drags the component to be displayed to obtain the starting position information of the component to be displayed; the end event function is used to be triggered when the user completes dragging the component to be displayed to obtain the added position information of the component to be displayed.

[0023] In some embodiments, in response to the moving operation of the component to be displayed, rendering the sub-business information of the component to be displayed currently moved to the information display area includes:

[0024] In response to a drag operation on a component to be displayed, obtaining starting position information, adding position information, and second creation information of the component to be displayed;

[0025] Based on the starting position information, determining the component to be displayed that is currently dragged;

[0026] Based on the second creation information, calling the first file, the second file and the third file corresponding to the currently dragged component to be displayed;

[0027] The sub-business information of the currently dragged component to be displayed is rendered to the position in the information display area indicated by the adding position information by using the first file, the second file and the third file.

[0028] In some embodiments, after rendering the sub-business information of the currently dragged component to be displayed to the position in the information display area indicated by the adding position information using the first file, the second file and the third file, the method further includes:

[0029] In the case that the position indicated by the adding position information is the display position of the target component, the target component located at the position indicated by the adding position information is taken as a new component to be displayed and added to the selectable list.

[0030] In some embodiments, before the step of rendering the sub-business information of the component to be displayed that is currently being moved to the information display area in response to the moving operation of any component to be displayed in the selectable list, the step further includes:

[0031] In response to the user's operation of calling up the selectable list, the selectable list is superimposed and displayed in the information display area of ​​the preset business page.

[0032] In some embodiments, the moving operation includes any one of a dragging operation, a selecting operation, or a clicking operation.

[0033] In a second aspect, an embodiment of the present disclosure further provides a display device, including a display and a controller;

[0034] The controller is configured to control the display of a preset business page in response to a page acquisition operation for a target business scenario; the preset business page includes a plurality of pre-set target components located in an information display area; the target component is sub-business information related to the target business scenario that is displayed by default on the preset business page; and, in response to a move operation on any component to be displayed in a selectable list displayed on the preset business page, render the sub-business information of the component to be displayed that is currently being moved to the information display area; the selectable list includes a plurality of components to be displayed.

[0035] In a third aspect, an embodiment of the present disclosure further provides a computer device, comprising: a processor, a memory and a bus, wherein the memory stores machine-readable instructions executable by the processor, and when the computer device is running, the processor and the memory communicate via the bus, and when the machine-readable instructions are executed by the processor, the steps of the page generation method described in any one of the first aspects are performed.

[0036] In a fourth aspect, an embodiment of the present disclosure further provides a computer non-volatile readable storage medium, wherein a computer program is stored on the computer non-volatile readable storage medium, and when the computer program is executed by a processor, the steps of the page generation method as described in any one of the first aspects are executed. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 A flow chart of a page generation method provided by an embodiment of the present disclosure;

[0038] Figure 2 A schematic diagram of a preset business page provided in an embodiment of the present disclosure;

[0039] Figure 3 A schematic diagram of displaying a selectable list on a preset business page provided in an embodiment of the present disclosure;

[0040] Figure 4 A schematic diagram of a component folder representing a sub-business component provided in an embodiment of the present disclosure;

[0041] Figure 5a A schematic diagram of the switching process between the component to be displayed and the target component provided in an embodiment of the present disclosure;

[0042] Figure 5b A schematic diagram of a component to be displayed and a target component after switching provided in an embodiment of the present disclosure;

[0043] Figure 6 A schematic diagram of a display device provided in an embodiment of the present disclosure;

[0044] Figure 7A schematic diagram of the structure of a computer device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0045] In order to make the purpose, technical solutions and advantages of the embodiments of the present disclosure clearer, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are only part of the embodiments of the present disclosure, rather than all of the embodiments. The components of the embodiments of the present disclosure generally described and shown in the drawings here can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present disclosure provided in the drawings is not intended to limit the scope of the present disclosure for protection, but merely represents the selected embodiments of the present disclosure. Based on the embodiments of the present disclosure, all other embodiments obtained by those skilled in the art without making creative work belong to the scope of protection of the present disclosure.

[0046] Unless otherwise defined, the technical terms or scientific terms used in the present disclosure should be understood by people with ordinary skills in the field to which the present disclosure belongs. The "first", "second" and similar words used in the present disclosure do not indicate any order, quantity or importance, but are only used to distinguish different components. Similarly, similar words such as "one", "one" or "the" do not indicate quantity restrictions, but indicate that there is at least one. Similar words such as "include" or "comprise" mean that the elements or objects appearing before the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. Similar words such as "connect" or "connected" are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0047] The "multiple or several" mentioned in this disclosure refers to two or more. "And / or" describes the association relationship of the associated objects, indicating that three relationships may exist. 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 associated objects before and after are in an "or" relationship.

[0048] In the related art, the traditional smart signage (display device) is based on the business development of the front-end code and the back-end code, and the structure of the page finally displayed is fixed, that is, the multiple sub-business components displayed on the page cannot be adjusted; wherein, the corresponding content displayed by the sub-business component includes the relevant indicator information of the sub-business under the current business scenario. For example, the current business scenario is the product operation business; the sub-businesses of the product operation business include the product inventory monthly report, the product yield monthly report, the product output achievement status, the capital reporting execution status and the timely closure rate of the work order, etc. Taking the product yield monthly report as an example, the relevant indicator information of the sub-business includes the product yield information for at least three consecutive months from January to December.

[0049] Since the structure of the dashboard page is fixed, the indicator information that is concerned about in the same business scenario under different circumstances changes, which means that the sub-business components change. Therefore, developers need to remake the dashboard page and conduct secondary development of the relevant page code to display new sub-business components and the corresponding indicator information required by users. In addition, for the same business scenario, the indicator information that different users are concerned about is also different; since the page structure after secondary development is still fixed, it is still impossible to meet the needs of different users at the same time. In this way, the traditional dashboard cannot adjust the sub-business components in real time and flexibly according to business attention and user needs, and the page layout cannot be changed, resulting in low efficiency of business analysis for users, reducing user practicality and experience.

[0050] In view of this, the embodiment of the present disclosure provides a page generation method, a display device, a computer device and a storage medium, which essentially pre-set a large number of sub-business components, initialize the default display of some sub-business components on the preset business page, that is, multiple target components, and the target components displayed in the information display area specifically include sub-business information related to the target business scenario; at the same time, through the pre-set selectable list, multiple components to be displayed are added, which are the remaining sub-business components. It should be noted that the components to be displayed mainly represent the pre-set sub-business information that can be added under the target business scenario, but do not display the sub-business information, saving space for the preset business page; the user can customize and select any component to be displayed, and in response to the moving operation of the component to be displayed, the sub-business information of the currently moved component to be displayed is rendered to the information display area. In this way, the user can adjust the sub-business components in real time and flexibly according to their own needs, realize the real-time replacement of the page layout, greatly improve the user's analysis efficiency of the business, and improve the user's practicality and experience. At the same time, it also saves the secondary development of related page codes for developers and simplifies the workload of code development.

[0051] In order to facilitate understanding of the embodiments of the present disclosure, special terms involved in the embodiments of the present disclosure are first described in detail.

[0052] 1. JavaScript ("JS" for short): is a high-level, interpreted programming language, commonly used to implement interactive functions on web pages.

[0053] 2. Angular: It is a front-end framework for building web applications. It is written in TypeScript (TS for short) and follows a series of design principles and best practices.

[0054] 3. ECharts: (Enterprise Charts) is a JavaScript-based visualization icon library for creating rich, interactive data visualization charts.

[0055] 4. DOM: (Document Object Model) is a programming interface for representing and manipulating document structures such as HTML and XML. It parses the document into a structured tree consisting of nodes and objects. Each node in the tree represents a part of the document, such as an element, attribute, text, etc. DOM provides a programming interface that allows developers to access and modify the content, structure, and style of a document through scripting languages ​​​​(such as JavaScript).

[0056] 5. HTML (Hyper Text Markup Language): It is a markup language that includes a series of tags. Through these tags, the document format on the Internet can be unified and the scattered network resources can be connected into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animations, sounds, tables, links, etc.

[0057] 6. CSS (Cascading Style Sheets) is a computer language used to express the style of documents such as HTML or XML. CSS can accurately control the layout of element positions in web pages at the pixel level, supports almost all font sizes, and has the ability to edit web page objects and model styles.

[0058] 7. TS (TypeScript): is an open source programming language built by adding static type definitions based on JavaScript.

[0059] 8. primeNG is a relatively complete Angular UI component library that supports the card platform. PrimeNG provides a wealth of reusable UI components designed to help developers quickly build modern web applications.

[0060] 9. pDraggable is a global attribute introduced by HTML5, which is used to implement the drag-and-drop function of an element. In the embodiment of the present disclosure, the pDraggable attribute is used to implement the dragging function of the component to be displayed.

[0061] A page generation method provided by an embodiment of the present disclosure is described in detail below.

[0062] Figure 1 A flow chart of a page generation method provided by an embodiment of the present disclosure, such as Figure 1 As shown, it includes steps S11 to S12.

[0063] S11. In response to a page acquisition operation for a target business scenario, a preset business page is displayed.

[0064] The target business scenario refers to a specific business scenario, such as but not limited to product operation business and product manufacturing business, etc. The page acquisition operation can be a series of operations of the user on the display to obtain the preset business page, such as logging in to a website or opening a specific application (Application, App) to enter a specified web page, which is the preset business page.

[0065] Figure 2 A schematic diagram of a preset business page provided in an embodiment of the present disclosure, such as Figure 2 As shown, the preset business page includes a function menu area 21 and an information display area 22; wherein the function menu area 21 includes a plurality of setting function controls 211, which are configured to support jumping to the corresponding function window. The preset business page includes a plurality of target components that are preset and located in the information display area 22; the target component includes sub-business information related to the target business scenario that is displayed by default on the preset business page. Taking the product operation business as an example, a large number of sub-business components are preset, and some sub-business components are initialized to be displayed by default on the preset business page, that is, a plurality of target components, and such sub-business components correspond to the relevant sub-business information displayed in the information display area 22. The plurality of target components respectively include component A related to the product inventory monthly report and component B related to the product yield monthly report; wherein the sub-business information of component A is the indicator information of the product inventory monthly report, such as the product inventory in August, the product inventory in September, and the product inventory in October; the sub-business information of component B is the indicator information of the product yield monthly report, such as the product yield in September and the product yield in October.

[0066] S12 . In response to a move operation on any component to be displayed in the selectable list displayed on the preset business page, the sub-business information of the component to be displayed currently being moved is rendered to the information display area 22 .

[0067] In one case, in response to the user's operation of calling the selectable list, the selectable list is superimposed and displayed in the preset business page information display area 22 to support the user to re-plan the page layout of the target business scenario as required. In another case, the selectable list is displayed by default in a blank area of ​​the preset business page, such as a preset blank area on the top, bottom, left or right of the preset business page. In another case, while displaying the preset business page, a list window automatically pops up and is superimposed and displayed on the preset business page, and the selectable list is displayed in the list window.

[0068] The selectable list includes multiple components to be displayed; the multiple components to be displayed are the remaining sub-business components in a large number of pre-set sub-business components except the target component that has been displayed by default. It should be noted that this type of sub-business component, or the component to be displayed, mainly represents the pre-set sub-business information that can be added in the target business scenario, but the sub-business information is not displayed to prepare for user-defined configuration.

[0069] Figure 3 A schematic diagram of displaying a selectable list on a preset business page provided by an embodiment of the present disclosure, such as Figure 3 As shown, continuing to take the product operation business as an example, the function menu area 21 includes a pre-set "call" button. In response to the user's triggering operation on the "call" button, a selectable list 23 is superimposed and displayed in the preset business page information display area 22; the selectable list 23 includes multiple components to be displayed 231, and the multiple components to be displayed 231 include product output achievement status, funding execution status, and work order timely closure rate. In the case of a large number of components to be displayed, the initially displayed selectable list only displays part of the components to be displayed, and the other components to be displayed are hidden; the function menu area 21 also includes a pre-set "more" button. In response to the user's triggering operation on the "more" button, the remaining components to be displayed hidden in the selectable list are displayed.

[0070] The user can customize and select any component to be displayed, and in response to a move operation on a component to be displayed, the sub-business information of the currently moved component to be displayed is rendered to the information display area 22. The move operation includes but is not limited to a drag operation, a selection operation, or a click operation. "Rendering" refers to the process by which the control end generates an image based on a model. For example, the control end of the present disclosure responds to the move operation of the component to be displayed, and the memory has pre-stored the sub-business information corresponding to the component to be displayed. Therefore, the control end can directly retrieve the sub-business information and display the sub-business information in the form of an image. The generation process from data to image here is rendering.

[0071] Continue as Figure 3As shown, the currently moved component to be displayed is the product output achievement status as an example. Optionally, in response to the drag operation of the "product output achievement status" component, the sub-business information of the "product output achievement status" component is rendered to the user drag and drop position in the information display area 22. The user drag and drop position refers to the position where the user releases under the drag operation. Among them, the sub-business information of the "product output achievement status" component includes the product output achievement rate in September and the product output achievement rate in October. The rendering process refers to the process of displaying the sub-business information of the "product output achievement status" component on a preset business page according to preset text content, preset text format (such as pictures, charts or audio), and preset text fonts and font sizes and other pre-set strategies. The rendering technology used can be selected according to actual needs, and the embodiments of the present disclosure are not specifically limited.

[0072] In this way, users can adjust sub-business components in real time and flexibly according to their own needs, realize real-time replacement of page layout, greatly improve the efficiency of user analysis of business, and improve the user's practicality and experience. At the same time, it also saves developers the secondary development of related page codes and simplifies the workload of code development.

[0073] In some embodiments, in response to a dragging operation on any component to be displayed in the selectable list, the sub-business information of the currently dragged component to be displayed is rendered to the designated drag-and-drop position in the information display area 22, thereby realizing page layout more conveniently and quickly, and further improving user personalized adjustments to adapt to user needs.

[0074] In some embodiments, in the above step S11, in response to the page acquisition operation for the target business scenario, before displaying the preset business page, it also includes: generating multiple sub-business components corresponding to the target business scenario. Here, multiple sub-business components are divided into two categories, one of which is used as a target component, which is displayed immediately while displaying the preset business page; the other is used as a component to be displayed, which is hidden when initially logging into the preset business page, and can be prepared for calling at any time according to user needs. The process of generating sub-business components is described in detail below, including S21 to S25.

[0075] S21. Obtain the sub-business code that has been developed on the front end.

[0076] Here, the sub-service code that has been developed by the front end can be pre-stored, and the sub-service code can be read in response to the acquisition instruction.

[0077] Optionally, the sub-business code is the front-end Javascrip code, which is the code that has been developed on the front end. In this way, this embodiment directly reuses the code that has been developed on the front end, which can greatly improve the generation efficiency of the sub-business components, thereby improving development efficiency, shortening development time, and saving development costs.

[0078] Here, the sub-business code is the Javascrip code directly obtained from the front end. The sub-business code integrates all the codes of the sub-business component, but is in a fused state. In order to rebuild the sub-business component and configure it to the target business scenario of the present invention, the code needs to be split and repackaged, see S22 to S24 below.

[0079] S22. Extract the sub-business structure code from the sub-business code and encapsulate it into a first file.

[0080] The sub-business structure code represents the structural information of the sub-business component, including but not limited to the positioning information of the sub-business component in the sub-area of ​​the preset business page, such as its absolute position on the page or its relative position relationship with other structures.

[0081] Specifically, in response to the selection instruction, the sub-business structure code is extracted from the sub-business code, and the sub-business structure code is packaged to form a first file. Optionally, the first file is an HTML file.

[0082] In a possible implementation manner, the sub-service structure code may be packaged in response to the sub-service structure code input by the user to form a first file.

[0083] S23. Extract the sub-business cascading style code from the sub-business code and encapsulate it into a second file.

[0084] The sub-business cascading style code represents the style information of the sub-business component, such as the style displayed by the sub-business component on the preset business page, such as circle, column or square, graphic color, and text font and size.

[0085] Specifically, in response to the selection instruction, the sub-service cascading style code is extracted from the sub-service code, and the sub-service cascading style code is encapsulated to form a second file. Optionally, the second file is a CSS file.

[0086] In a possible implementation manner, the sub-service cascading style code may be packaged in response to the sub-service cascading style code input by the user to form a second file.

[0087] S24. Extract the sub-business data code from the sub-business code and encapsulate it into a third file.

[0088] Among them, the sub-business data code represents the sub-business information of the sub-business component, such as the inventory and yield rate listed above. Optionally, the sub-business data code also represents the interactive logic information of the sub-business component, such as some sub-contents in the sub-business information corresponding to jump links or a pop-up window after clicking the sub-content to display certain prompt information, etc.

[0089] Specifically, in response to the selection instruction, the sub-service data code is extracted from the sub-service code, and the sub-service data code is packaged to form a third file. Optionally, the third file is a TS file.

[0090] In a possible implementation manner, the sub-service data code may be packaged in response to the sub-service data code input by the user to form a third file.

[0091] S25. Process the first file, the second file, and the third file into sub-business components.

[0092] Specifically, the first file, the second file, and the third file may be packaged into a component folder, and the component folder represents a sub-business component for subsequent invocation by a user when customizing a page layout.

[0093] In this embodiment, the code is encapsulated into HTML files, CSS files and TS files respectively. The contents of these three types of files are all basic programming languages ​​under the actual operating system, including various instruction commands. The encapsulated HTML files, CSS files and TS files can be widely used in various operating systems, such as Windows systems or Unix systems, etc., and are easy to reuse on different operating system platforms, thereby improving development efficiency and saving development time.

[0094] Figure 4 A schematic diagram of a component folder representing a sub-business component provided in an embodiment of the present disclosure, such as Figure 4 As shown, it includes multiple component folders 40, such as chart-a to chart-z, which also means that it includes multiple sub-business components represented, and each component folder includes an HTML file 41 (ie, chart-m.component.html), a CSS file 42 (ie, chart-m.component.css) and a TS file 43 (ie, chart-m.component.ts).

[0095] Optionally, the component folder 40 includes identity information for indicating a sub-business component, such as a name of the component folder (eg, chart-a to chart-z, where a to z represent unique identities).

[0096] In some embodiments, before the above step S11 responds to the page acquisition operation for the target business scenario and displays the preset business page, it also includes: determining the target component and the component to be displayed in response to the layout display configuration for the sub-business component. Here, the process of layout display configuration includes dividing the sub-business components into target components and components to be displayed, and laying them out on the preset business page, specifically including: for any sub-business component, based on the preset framework, creating the component category information, identity information and display type information of the sub-business component. In the case where the component category information is the first category, the sub-business component is determined to be the target component. Among them, the code of the first category is represented by layoutShowConfig. In the case where the component category information is the second category, the sub-business component is determined to be the component to be displayed. Among them, the code of the second category is represented by layoutConfig.

[0097] Among them, the preset framework can be an Angular framework.

[0098] The code for the creation process is as follows: / / Target component

[0099] layoutShowConfig=[

[0100] {key: "E",

[0101] name: "Product Inventory Monthly Report",

[0102] component:ChartComponent,},

[0103] {target component 2}, ..., {target component n}].

[0104] Among them, layoutShowConfig represents the component category information of the target component, and also represents a type of array of the target component. The above only shows the creation code of target component 1, with a total of 1 to n components to be displayed, and n is a positive integer greater than or equal to 2. "key" represents the identity identifier, and E represents the unique non-repeating flag of target component 1. For example, the identity identifier of target component 2 is F, the identity identifier of target component 3 is G, and so on. "name" represents the name of the target component displayed on the preset business page. "component" represents the display type information of the target component, and ChartComponent represents the display type configured by the user. For example, according to the presentation form of the product inventory monthly report, it can be set to a pie chart, a line chart, or a bar chart, etc. The identity information (including key and name) and display type information (including component) created by the target component are used as the first creation information.

[0105] / / Components to be displayed

[0106] layoutConfig=[

[0107] {key: "A",

[0108] name: "Product output achievement status",

[0109] component:ChartComponent,},

[0110] {component 2 to be displayed}, ..., {component m to be displayed}].

[0111] Among them, layoutConfig represents the component category information of the component to be displayed, and also represents a type of array of components to be displayed. The above only shows the creation code of component 1 to be displayed, with a total of 1 to m components to be displayed, and m is a positive integer greater than or equal to 2. "key" represents the identity identifier, and A represents the unique non-repeating flag of component 1 to be displayed. For example, the identity identifier of component 2 to be displayed is B, and the identity identifier of component 3 to be displayed is C, etc. "name" represents the name of the component to be displayed displayed in the selectable list. "component" represents the display type information of the component to be displayed, and ChartComponent represents the display type configured by the user. For example, it can be set to a pie chart, a line chart, or a bar chart according to the form of expression of the product output achievement. The identity information (including key and name) and display type information (including component) created for the component to be displayed are used as the second creation information.

[0112] The first creation information of the target component and the second creation information of the component to be displayed are respectively introduced into the data file of the preset business page for subsequent drag and drop function calls. The data file of the preset business page is the TS file of the preset business page created in advance. Specifically, the code of the target component and the code of the component to be displayed are packaged and put into the TS file of the preset business page created in advance.

[0113] In some embodiments, after the identity information of the sub-business component is created, the method further includes: for any sub-business component, in response to a specified jump path input by a user, configuring a jump path for the sub-business component to jump to a page specified by the specified jump path.

[0114] The code for the creation process is as follows: / / Target component

[0115] layoutShowConfig=[

[0116] {key: "E",

[0117] name: "Product Inventory Monthly Report",

[0118] linkUrl: "# / xx1 / xx2 / xx3",

[0119] component:ChartComponent,},

[0120] {target component 2}, ..., {target component n}].

[0121] / / Components to be displayed

[0122] layoutConfig=[

[0123] {key: "A",

[0124] name: "Product output achievement status",

[0125] linkUrl: "# / yy1 / yy2 / yy3",

[0126] component:ChartComponent,},

[0127] {component 2 to be displayed}, ..., {component m to be displayed}].

[0128] Among them, linkUrl represents the specified jump path of the target component or the component to be displayed. Clicking it can jump to the corresponding specified page. You can decide whether to add a jump link based on your needs.

[0129] In some embodiments, before the first creation information of the target component and the second creation information of the component to be displayed are respectively introduced into the data file of the preset business page, the method further includes: creating a page structure of the preset business page based on the preset framework to obtain a structure file, a cascading style file and a data file of the preset business page. Optionally, the preset framework can be an Angular framework.

[0130] The structure file is the HTML DOM structure file; the cascading style file is the CSS file; the data file is the TS file. Create the page structure code based on the Angular framework, including the HTML DOM structure design, the creation of CSS files and TS files.

[0131] In some embodiments, for the sub-business components prepared in the above embodiments, a movable function is configured for the components to be displayed using preset attributes. The movable function includes a start event function and an end event function; the start event function is used to be triggered when the user drags the component to be displayed to obtain the starting position information of the component to be displayed; the end event function is used to be triggered when the user finishes dragging the component to be displayed to obtain the added position information of the component to be displayed (that is, the user drag and drop position).

[0132] Optionally, the preset property is PrimeNG's pDraggable property.

[0133] The code to configure the movable function is as follows:

[0134] <div*ngFor=“let menu of layoutConfig;let i=index“[ngClass]=”{

[0135] 'cnt-menu-item':true,

[0136] Selected:hasltem(rightSelected,menu)

[0137] }"pDraggable="menus"(onDragStart)="dragStart(i,menu)"(onDragEnd)="dragEnd($event)">

[0138] {{menu,name}}

[0139]

[0140] Among them, div*ngFor=“let menu of layoutConfig;let i=index“[ngClass]=”{'cnt-menu-item':true,Selected:hasltem(rightSelected,menu)}” means looping each component to be displayed in the layoutConfig array; let i means the i-th component to be displayed; [ngClass] means the style of the component to be displayed, such as color, font, and whether it is selected. pDraggable is a preset attribute, and pDraggable=“menus”(onDragStart)=“dragStart(i,menu)”(onDragEnd)=“dragEnd($event)” is used to configure the movable function for the component to be displayed. onDragStart represents the start event function, which is triggered when the user drags the component to be displayed to obtain the starting position information of the component to be displayed; onDragEnd represents the end event function, which is triggered when the user completes dragging the component to be displayed to obtain the added position information of the component to be displayed. {{menu,name}} represents the attributes and name of the i-th component to be displayed. Represents a closing tag.

[0141] It should be noted that the present disclosure uses the Angular framework as an example for page creation and deployment. At the same time, the corresponding sub-business component is selected as primeNG, and the preset attribute is the global attribute pDraggable. Of course, other front-end frameworks can also be selected, such as the vue framework. In this case, the selection of the sub-business component library and the preset attributes are relatively changed, which will not be listed here.

[0142] In some embodiments, the above step S12 specifically includes S121 to S124.

[0143] S121. In response to a drag operation on a component to be displayed, obtain starting position information, adding position information, and second creation information of the component to be displayed.

[0144] Specifically, the draggable operation is performed using the movable function configured by the above-mentioned pDraggable attribute.

[0145] The execution code for obtaining the starting position information, adding position information, and second creation information of the component to be displayed is as follows:

[0146] dragStart(index,menu){

[0147] this.selected = menu; (save and select a component to be displayed)

[0148] this.selectedIndex = index;

[0149] }

[0150] dragEnd(){

[0151] console.log('end');

[0152] }

[0153] Among them, dragStart(index,menu) indicates the response to the drag operation of the component to be displayed, which means that the component to be displayed has started to be dragged, and this.selectedIndex=index is used to record the starting position information of the component to be displayed currently being dragged, that is, the position in the layoutShowConfig array, such as the 3rd. dragEnd() is used to record the added position information of the component to be displayed in the case of dragging and dropping the component to be displayed, console.log('end'). this.selected=menu is used to record the second creation information of the component to be displayed currently being dragged in the layoutShowConfig array, that is, key, name and component, etc.

[0154] S122: Determine the component to be displayed that is currently being dragged based on the starting position information.

[0155] Under the guidance of the starting position information, the currently dragged component to be displayed is determined from the layoutShowConfig array, for example, the third component to be displayed.

[0156] S123. Based on the second creation information, call the first file, the second file, and the third file corresponding to the component to be displayed.

[0157] Specifically, based on the identity information in the second creation information, such as key and / or name, the component folder chart corresponding to the component to be displayed can be called, and the HTML file, CSS file and TS file can be obtained.

[0158] S124. Render the sub-business information of the currently dragged component to be displayed to the position in the information display area indicated by the added position information by using the first file, the second file and the third file.

[0159] Specifically, based on the structural information of the components to be displayed in the HTML file and the style information of the components to be displayed in the CSS file, the sub-business information in the TS file may be rendered to the position indicated by the adding position information.

[0160] In a possible implementation, when the location indicated by the added location information is located at a blank location in the information display area 22, the component to be displayed can be directly converted into a new target component for display.

[0161] In another possible implementation, when the location indicated by the added location information is located at the location of a target component in the information display area 22, the target component can be replaced by the currently dragged component to be displayed and rendered and displayed at the location of the target component; at the same time, the target component is added to the selectable list as a new component to be displayed.

[0162] Exemplarily, the component category information of the target component corresponding to the added position information is updated to the second category to obtain a new component to be displayed; the second creation information of the new component to be displayed is introduced into the data file (TS file) of the preset business page. Exemplarily, the key, name and component of the target component corresponding to the current added position information in the layoutShowConfig array are updated to the layoutConfig array, and reintroduced into the TS file of the preset business page, thereby realizing the update of the selectable list. At the same time, the component category information of the currently dragged component to be displayed is updated to the first category to obtain a new target component; the first creation information of the new target component is introduced into the data file (TS file) of the preset business page. Exemplarily, the key, name and component of the currently dragged component to be displayed in the layoutConfig array are updated to the layoutShowConfig array, and reintroduced into the TS file of the preset business page to realize the switching of the component to be displayed and the target component.

[0163] The switching execution code between the component to be displayed and the target component is as follows:

[0164] Drop(idx){

[0165] let index=idx.charAt(idx.length–1);

[0166] let data:any=this.layoutShowConfig[index];

[0167] this.layoutConfig.push(data);

[0168] this.layoutConfig.splice(this.selectedIndex,1);

[0169] this.layoutShowConfig[index]=this.selected;

[0170] }

[0171] Among them, let index=idx.charAt(idx.length–1) is used to obtain the adding position information of the currently moved component to be displayed; let data:any=this.layoutShowConfig[index] is used to obtain the target component (referred to as target component A) corresponding to the indicated position of the adding position information from the layoutShowConfig array; this.layoutConfig.push(data) is used to put the target component A as a new component to be displayed into the layoutConfig array; this.layoutConfig.splice(this.selectedIndex,1) is used to remove the currently dragged component to be displayed in the layoutConfig array; this.layoutShowConfig[index]=this.selected is used to replace the target component A in layoutShowConfig with the currently dragged component to be displayed.

[0172] Figure 5a A schematic diagram of the switching process between the component to be displayed and the target component provided in an embodiment of the present disclosure, Figure 5b A schematic diagram of the switching between the to-be-displayed component and the target component provided in the embodiment of the present disclosure, such as Figure 3 , Figure 5a and Figure 5b As shown, Figure 3 It illustrates the situation before the display component and the target component are switched. In response to the dragging operation on the "Product Output Achievement Status" component, when the location indicated by the added location information is the location of the "Product Inventory Monthly Report" component, the sub-business information of the "Product Output Achievement Status" component is rendered to the location of the "Product Inventory Monthly Report" component. At the same time, the "Product Inventory Monthly Report" component is added to the selectable list as a new component to be displayed.

[0173] In another possible implementation, when the position indicated by the added position information is located at the position of a target component in the information display area 22, the currently dragged component to be displayed is rendered at the position indicated by the added position information, and the original target component located at the position indicated by the added position information is moved to other blank positions for display, or moved sequentially to the position of the next target component for display, and the next target component is displayed in this manner and so on.

[0174] Those skilled in the art will appreciate that, in the above method of specific implementation, the order in which the steps are written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of the steps should be determined by their functions and possible internal logic.

[0175] In addition, a display device corresponding to the page generation method is also provided in the embodiment of the present disclosure. Since the principle of solving the problem by the display device in the embodiment of the present disclosure is similar to the above-mentioned page generation method in the embodiment of the present disclosure, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be repeated.

[0176] Figure 6 A schematic diagram of a display device provided in an embodiment of the present disclosure, such as Figure 6 As shown, the display device includes a display 61 and a controller 62 .

[0177] The display 61 is configured to display pages and receive various operations or instructions directly performed by the user on the display screen.

[0178] The controller 62 is configured to display a preset business page on the display 61 in response to a page acquisition operation for a target business scenario; the preset business page includes a plurality of pre-set target components located in an information display area; the target component is sub-business information related to the target business scenario that is displayed by default on the preset business page; and, for a selectable list displayed on the preset business page, in response to a move operation on a component to be displayed, render the currently moved component to be displayed to the information display area; the selectable list includes a plurality of components to be displayed; the component to be displayed represents pre-set sub-business information that can be added under the target business scenario.

[0179] It should be noted that the controller in the embodiment of the present disclosure is configured to execute steps S11 to S12 in the above-mentioned page generation method.

[0180] For example, the display device can be any product with a display function, such as a mobile phone, a tablet computer, a television, a monitor, a laptop computer, a digital photo frame, a vehicle-mounted device, etc. Other essential components of the display device are well understood by those skilled in the art, and are not described in detail here, nor should they be used as limitations on the present disclosure.

[0181] Figure 7 The following is a schematic diagram of the structure of a computer device provided in an embodiment of the present disclosure. Figure 7 As shown, the embodiment of the present disclosure provides a computer device including: one or more processors 701, a memory 702, and one or more I / O interfaces 703. The memory 702 stores one or more programs, and when the one or more programs are executed by the one or more processors, the one or more processors implement any of the page generation methods in the above embodiments; the one or more I / O interfaces 703 are connected between the processor and the memory, and are configured to implement information interaction between the processor and the memory.

[0182] Among them, the processor 701 is a device with data processing capabilities, including but not limited to a central processing unit (CPU); the memory 702 is a device with data storage capabilities, including but not limited to random access memory (RAM, more specifically SDRAM, DDR, etc.), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory (FLASH); the I / O interface (read-write interface) 703 is connected between the processor 701 and the memory 702, and can realize information interaction between the processor 701 and the memory 702, including but not limited to a data bus (Bus), etc.

[0183] In some embodiments, the processor 701 , the memory 702 , and the I / O interface 703 are connected to each other via a bus 704 , and further connected to other components of the computing device.

[0184] According to an embodiment of the present disclosure, a non-transitory computer readable storage medium is further provided. The non-transitory computer readable storage medium stores a computer program, wherein when the program is executed by a processor, the steps in the page generation method in any of the above embodiments are implemented.

[0185] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a machine-readable medium, and the computer program contains a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication part, and / or installed from a removable medium. When the computer program is executed by a central processing unit (CPU), the above-mentioned functions defined in the system of the present disclosure are executed.

[0186] It should be noted that the computer non-transient readable medium shown in the present disclosure may be a computer readable signal medium or a computer readable storage medium or any combination of the above two. The computer readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, a computer readable storage medium may be any tangible medium containing or storing a program, which may be used by or in combination with an instruction execution system, device or device. In the present disclosure, a computer readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer readable program code. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable non-transient storage medium other than a computer-readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program code contained on the computer-readable non-transient storage medium may be transmitted using any suitable medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0187] The flow charts and block diagrams in the accompanying drawings illustrate the possible architecture, functions and operations of the devices, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flow chart or block diagram can represent a module, a program segment, or a part of a code, and the aforementioned module, program segment, or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two connected boxes can actually represent that they are executed in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, and the combination of the boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0188] It is to be understood that the above embodiments are merely exemplary embodiments used to illustrate the principles of the present disclosure, but the present disclosure is not limited thereto. For those of ordinary skill in the art, various modifications and improvements can be made without departing from the spirit and substance of the present disclosure, and these modifications and improvements are also considered to be within the scope of protection of the present disclosure.

Claims

1. A page generation method, wherein: include: In response to a page acquisition operation for a target business scenario, a preset business page is displayed; the preset business page includes a plurality of target components that are preset and located in an information display area; the target components include sub-business information related to the target business scenario that is displayed by default on the preset business page; In response to a move operation on any component to be displayed in a selectable list displayed on the preset business page, sub-business information of the component to be displayed currently being moved is rendered to the information display area; the selectable list includes a plurality of components to be displayed.

2. The page generation method according to claim 1, wherein: Before displaying the preset business page in response to the page acquisition operation for the target business scenario, the method further includes: Get the sub-business code that has been developed on the front end; Extracting a sub-business structure code from the sub-business code and encapsulating it into a first file; the sub-business structure code represents structural information of a sub-business component; Extracting a sub-service cascading style code from the sub-service code and encapsulating it into a second file; the sub-service cascading style code represents style information of a sub-service component; Extracting a sub-business data code from the sub-business code and encapsulating it into a third file; the sub-business data code represents the sub-business information of the sub-business component; The first file, the second file and the third file are processed as sub-business components.

3. The page generation method according to claim 2, wherein: Before displaying the preset business page in response to the page acquisition operation for the target business scenario, the method further includes: For any of the sub-business components, based on a preset framework, create component category information, identity information and display type information of the sub-business component; When the component category information is of the first category, determining the sub-business component as the target component; When the component category information is of the second category, determining the sub-business component as the component to be displayed; The first creation information of the target component and the second creation information of the component to be displayed are respectively introduced into the data file of the preset business page, wherein the first creation information includes the identity information and display type information created by the target component; the second creation information includes the identity information and display type information created by the component to be displayed.

4. The page generation method according to claim 3, wherein: Before the first creation information of the target component and the second creation information of the component to be displayed are introduced into the data file of the preset business page respectively, the method further includes: Based on the preset framework, a page structure of the preset business page is created, and a structure file, a cascading style file and a data file of the preset business page are obtained.

5. The page generation method according to any one of claims 1 to 4, wherein: Before displaying the preset business page in response to the page acquisition operation for the target business scenario, the method further includes: Configuring a movable function for the component to be displayed using preset attributes; The movable function includes a start event function and an end event function; the start event function is used to be triggered when the user drags the component to be displayed to obtain the starting position information of the component to be displayed; the end event function is used to be triggered when the user completes dragging the component to be displayed to obtain the added position information of the component to be displayed.

6. The page generation method according to claim 1, wherein: The step of rendering the sub-business information of the component to be displayed that is currently being moved to the information display area in response to the move operation of the component to be displayed includes: In response to a drag operation on a component to be displayed, obtaining starting position information, adding position information, and second creation information of the component to be displayed; Based on the starting position information, determining the component to be displayed that is currently dragged; Based on the second creation information, calling the first file, the second file and the third file corresponding to the currently dragged component to be displayed; The sub-business information of the currently dragged component to be displayed is rendered to the position in the information display area indicated by the adding position information by using the first file, the second file and the third file.

7. The page generation method according to claim 6, wherein: After rendering the sub-business information of the currently dragged component to be displayed to the position in the information display area indicated by the adding position information by using the first file, the second file and the third file, the method further includes: In the case that the position indicated by the adding position information is the display position of the target component, the target component located at the position indicated by the adding position information is taken as a new component to be displayed and added to the selectable list.

8. The page generation method according to claim 1, wherein: Before, in response to the moving operation of any component to be displayed in the selectable list, rendering the sub-business information of the component to be displayed currently moved to the information display area, the method further includes: In response to the user's operation of calling up the selectable list, the selectable list is superimposed and displayed in the information display area of ​​the preset business page.

9. The page generation method according to claim 1, wherein: The moving operation includes any one of a dragging operation, a selecting operation or a clicking operation.

10. A display device comprising a display and a controller; The controller is configured to control the display to display a preset business page in response to a page acquisition operation for a target business scenario; the preset business page includes a plurality of target components that are preset and located in an information display area; The target component is sub-business information related to the target business scenario and displayed by default on the preset business page; And, in response to a move operation on any component to be displayed in the selectable list displayed on the preset business page, rendering the sub-business information of the component to be displayed currently moved to the information display area; The selectable list includes multiple components to be displayed.

11. A computer device, wherein: include: A processor, a memory and a bus, wherein the memory stores machine-readable instructions executable by the processor, and when the computer device is running, the processor and the memory communicate via the bus, and when the machine-readable instructions are executed by the processor, the steps of the page generation method as described in any one of claims 1 to 9 are performed.

12. A computer non-transitory readable storage medium, wherein: The computer non-transitory readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the page generation method according to any one of claims 1 to 9 are executed.

Images