Page single data display method and system

Abstract

The invention relates to the technical field of front-end page development, in particular to a page single data display method and system, and the method comprises the following steps: defining a single data display component DataItemPanelComponent, carding and summarizing common single data display layout modes, defining a layout type variable layout Type in the DataItemPanelComponent, extracting and defining configuration attributes, and packaging the DataItemPanelComponent component; the page single data display method and system provided by the invention have the beneficial effects that rapid development of a single data display panel is realized by packaging the single data item display component. A user only needs to transmit corresponding configuration items to achieve an expected effect, and high flexibility is shown. According to the method, the code structure is simplified, the maintenance cost is remarkably reduced, and meanwhile, the development efficiency is improved while the development cost is reduced. In addition, the user can customize the default style of the component according to the style of the product, so that good expansibility is ensured.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end page development, and in particular to a method and system for displaying single item data on a page. Background Art

[0002] In the context of the data age, with the surge in data volume and the rising demand for data analysis, the importance of front-end data visualization has become increasingly prominent. This trend has not only promoted the innovation of page design and data display methods, but also made it particularly important to present data in a more concise and clear form. In portal projects, workbench projects, and product homepages, statistical display design occupies an important position, and there is no shortage of statistical display requirements for specific indicators or data. Although there are many products on the market that are specifically designed for data analysis and display, these tools can help users intuitively understand data and conduct analysis and decision-making efficiently, but they are often more suitable for chart-intensive page scenarios, and due to their large size, they are not easy to integrate into portal, workbench and other projects.

[0003] In actual development, for the statistical data display in the portal, workbench and other projects described above, the interface is often drawn directly according to the prototype. Although the interface is not complicated, it is used in many places, resulting in a lot of repeated and redundant codes. In view of the problem of statistical data display in the above portal and other projects, the present invention proposes a method and system for displaying single data on a page. Summary of the invention

[0004] The purpose of the present invention is to provide a method and system for displaying single item data on a page to solve the problems raised in the above background technology.

[0005] To achieve the above object, the present invention provides the following technical solution: a method for displaying single item data on a page, the method comprising the following steps:

[0006] Define a single data display component DataItemPanelComponent, which contains a display element component DisplayItem, which is used to clearly and efficiently display key information on the interface;

[0007] Sort out and summarize the commonly used single-item data display layout methods, including single data item display, left-right layout of icons and data items, top-bottom layout of icons and data items, and flexible layout of icons, data items and description texts;

[0008] Define the layout type variable layoutType in DataItemPanelComponent, as well as the array variables leftItem, rightItem, upItem, and downItem used to store display elements. The layoutType variable is set to a corresponding value according to the layout mode, and each array variable stores the DisplayItem object of the corresponding layout.

[0009] Extract and define configuration properties, including panel size, data, units, layout type, font size, color, icon, background, description text and style class, for flexible configuration and customization of the appearance and display content of display components;

[0010] Encapsulates the DataItemPanelComponent component and provides the initialization function init(opt), the property setting method setDataItemProps(opt) and the property getting method getDataItemProps(itemKey?) to initialize the component and perform property operations.

[0011] Preferably, the DisplayItem component contains the following variables:

[0012] The unique identifier itemKey is used to uniquely identify each display element;

[0013] Element type itemType, used to define the type of element, such as text, image or font icon;

[0014] Display content itemContent, store the corresponding text, image URL or font icon class name according to itemType;

[0015] The data unit itemUnit provides a metric for displaying content;

[0016] Element style itemStyle, used to control the appearance style of the element;

[0017] The custom style class customClass allows users to further customize the style of the element according to their personal preferences.

[0018] Preferably, the initialization function init(opt) receives a parameter opt containing all configuration properties, and renders the DataItemPanelComponent component according to the configuration properties to display a single item of data.

[0019] Preferably, the property setting method setDataItemProps(opt) and the property obtaining method getDataItemProps(itemKey?) provide flexible operation on the properties of the DataItemPanelComponent component, wherein setDataItemProps(opt) is used to set the component properties, and getDataItemProps(itemKey?) is used to obtain the properties of the component or the specified element.

[0020] Preferably, the method further includes the steps of: using a single data display panel in the project, implementing customized data display panel rendering by calling the init(opt) function and configuring corresponding layout types and attribute parameters, and allowing users to customize the style of the panel by adjusting the class attribute to suit the overall style of the project or user preferences.

[0021] A page single item data display system, the system comprising:

[0022] Single data display component DataItemPanelComponent: used to provide a clear and efficient interface to display key information;

[0023] DisplayItem: As a subcomponent of DataItemPanelComponent, it is used to display data items, icons, description texts and other elements to enhance user experience and data readability.

[0024] Layout type variable layoutType: defined in DataItemPanelComponent, used to specify the display layout mode, including none (default), left-right, up-down;

[0025] Element storage array: including leftItem, rightItem, upItem, downItem, used to store DisplayItem objects under the corresponding layout mode to support different display layout requirements.

[0026] Preferably, the configuration attributes are also included, specifically including:

[0027] Panel dimensions: such as width and height, which define how much space the panel will have on the page;

[0028] Data attributes: used to store the information content to be displayed on the panel;

[0029] Unit attributes: provide a metric for the data;

[0030] Font size, color, icon, background: used to refine design details and enhance visual effects;

[0031] Description text: Provides necessary descriptions of interface elements;

[0032] Style class: allows you to apply predefined or custom style rules through the class attribute to achieve personalized design.

[0033] Preferably, the DisplayItem component contains the following variables:

[0034] Unique identifier itemKey: used to uniquely identify each display element;

[0035] Element type itemType: defines the type of element, such as text, picture, font icon;

[0036] Display content itemContent: stores specific text, image URL or font icon class name according to itemType;

[0037] Data unit itemUnit: provides a metric for displaying content;

[0038] Element style itemStyle: directly controls the appearance of the element;

[0039] Custom style class customClass: allows users to further customize the element style according to personal preferences.

[0040] Preferably, the following interface method is also included:

[0041] Initialization function init(opt): receives the parameter opt containing configuration properties, starts the component initialization process, and renders the DataItemPanelComponent component according to the preset configuration;

[0042] Property setting method setDataItemProps(opt): allows developers to set the properties of the component, and supports setting the properties of a specific DisplayItem object or all DisplayItem objects;

[0043] Property acquisition method getDataItemProps(itemKey?): provides the function of obtaining components or specifying DisplayItem object properties to meet the needs of different scenarios.

[0044] Preferably, a style adjustment function is also included, allowing the user to customize the style settings of the DataItemPanelComponent component by adjusting the class attribute to match the overall style of the project or user preferences, thereby further improving the clarity and attractiveness of the data display.

[0045] Compared with the prior art, the present invention has the following beneficial effects:

[0046] The method and system for displaying single data items on a page proposed by the present invention realize the rapid development of a single data display panel by encapsulating a single data item display component. The user only needs to pass the corresponding configuration items to achieve the expected effect, showing a high degree of flexibility. This method not only simplifies the code structure, but also significantly reduces the maintenance cost, while reducing the development cost and improving the development efficiency. In addition, the user can customize the default style of the component according to the style of his own product, thereby ensuring good scalability. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] Figure 1 The figure is a flow chart of the method of the present invention. DETAILED DESCRIPTION

[0048] In order to make the purpose and technical solution of the present invention clearly and completely described, and the advantages more clearly understood, the embodiments of the present invention are further described in detail with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are part of the embodiments of the present invention, rather than all of the embodiments, and are only used to explain the embodiments of the present invention, and are not used to limit the embodiments of the present invention. All other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0049] For example, see Figure 1 The present invention provides a technical solution: a method for displaying single item data on a page, the method comprising the following steps:

[0050] Step 1: Define the single data display component DataItemPanelComponent and the display element component DisplayItem in the display component in the project. The core function of the DataItemPanelComponent component is to provide a clear and efficient interface for displaying key information. In order to enhance the user experience and data readability, the DisplayItem component is further designed to display each element in the DataItemPanelComponent. This meticulous division of labor ensures the flexibility and high customization of data display, while optimizing the process of user interaction with data.

[0051] Step 2: Sort out the commonly used single data display layouts. The single data display methods on the page were carefully sorted out and summarized. Through analysis, several commonly used layout methods were summarized (see Figure 2), which are designed to optimize the presentation of information and ensure that users can quickly and accurately obtain the required information.

[0052] The first layout is a single data item display, which is concise and suitable for data display that does not require additional explanation or auxiliary information. It directly presents the data to the user, reduces visual interference, and allows the user to focus entirely on the data itself.

[0053] The second layout is the left-right layout of icons and data items. In this layout, icons and data items are placed side by side, with icons usually on the left and data items on the right. This layout takes advantage of the intuitiveness of icons to help users understand the meaning of data more quickly, while also increasing the aesthetics of the page.

[0054] The third layout is the top-bottom layout of icons and data items. Similar to the left-right layout, the top-bottom layout also combines icons and data items, but the icons are located at the top and the data items are located at the bottom. This layout is suitable for scenarios where the importance of data needs to be emphasized, because it allows the user's eyes to naturally transition from icons to data items, thereby deepening their understanding of the data.

[0055] The fourth layout method is to lay out the icons, data items, and description text up and down or left and right, and support independent layout of two of them. This layout method provides more flexibility, allowing designers to adjust the order and position of elements according to actual needs. For example, you can place the icons and data items at the top and the description text at the bottom; or place the icons on the left and the data items and description text on the right. This layout method can not only display data, but also provide additional information to help users understand the background and meaning of the data more comprehensively.

[0056] In order to adapt to these different layout categories, a layout type variable named layoutType is defined in DataItemPanelComponent. The optional values ​​of this variable include none (default), left-right, and up-down, which correspond to the above layout methods. At the same time, array type variables leftItem, rightItem, upItem, and downItem are introduced to store the display elements corresponding to left-right and up-down. The elements in these arrays are all of DisplayItem type, which is a custom type used to encapsulate the data to be displayed and related style information.

[0057] When layoutType is set to none, it means that there is no need to use icons or other auxiliary elements to display data. In this case, the data to be displayed is stored in the variable dataItem of the DisplayItem type. The dataItem variable contains all the necessary information, such as the value, format, unit, etc. of the data, to ensure that the data can be displayed to the user accurately.

[0058] Step 3, extract configuration attributes. According to the organized layout, extract the corresponding configuration attributes, including panel size, data, unit, layout type, font size, color, icon, background, description text, and style class. The size parameters of the panel, such as width and height, determine the space occupied by the panel on the page. The data attributes involve the information content to be displayed by the panel, and the unit attributes provide a metric for this data, although the unit may not be specified by default.

[0059] The choice of layout type is a core link in interface development, which directly affects the arrangement and visual effects of elements. Attributes such as font size, color, and icon further refine the design details so that text and graphic elements can be displayed in an appropriate form. The background attribute provides a background color or image background for the panel, enhancing the visual hierarchy. The description text provides necessary instructions for interface elements to help users understand the functions and content of the interface.

[0060] The application of style classes allows developers to apply predefined or customized style rules to elements through the class attribute, thereby achieving personalized design. This flexibility is not only reflected in the layout types defined in the DataItemPanelComponent component, but also extends to the definition of the width and height of the panel, ensuring the diversity and adaptability of the layout.

[0061] In the DisplayItem component, a series of variables can be defined to describe and control the display of elements. These variables include the unique identifier itemKey, which ensures that each element can be accurately identified and referenced; the element type itemType, which determines whether the element is text, image or font icon; the display content itemContent, which can be a specific text string, a URL address of an image or a class name of a font icon according to different itemType; the data unit itemUnit provides a metric for the display content, although the unit may not be specified by default; the element style itemStyle provides direct control over the appearance of the element; and the user-defined style class customClass, which allows end users to further customize the style of the element according to their personal preferences.

[0062] Through these detailed configuration properties, developers can build interface elements that meet both design specifications and user needs, thereby improving the overall user experience.

[0063] Step 4: Component encapsulation and providing initialization and property setting interfaces. Define the component initialization function init(opt) and the corresponding property setting method setDataItemProps(opt) and the acquisition method getDataItemProps(itemKey?).

[0064] The initialization function init(opt) is not only responsible for starting the initialization process of the component, but also ensures that the component can be rendered according to the preset configuration, so as to display the required single-item digital information panel. To achieve this goal, the init function needs to receive a parameter opt, which must contain all the properties defined in steps 2 and 3, and at least one object of the DisplayItem type to ensure that the component can display the data correctly.

[0065] The two methods setDataItemProps(opt) and getDataItemProps(itemKey?) make the operation of component properties extremely flexible and convenient. Through the setDataItemProps method, developers can set the properties of the component. If the opt parameter contains itemKey, the method will only set the properties of the specified DisplayItem object; if it does not contain itemKey, all properties in the current DataItemPanelComponent will be set and the relevant properties will be applied to all DisplayItem objects. This design allows both precise property setting for specific objects and batch updating of properties of all objects, greatly improving development efficiency; on the other hand, the getDataItemProps method provides a means to obtain property values. When the itemKey parameter is passed in, the method only returns the properties of the specified DisplayItem object; if no itemKey is passed in, all configuration properties in the DataItemPanelComponent are returned. This design makes it very flexible to obtain component properties. You can obtain the properties of a specific object or all configuration properties at once, meeting the needs of different scenarios.

[0066] In summary, through the initialization and rendering of the init function, as well as the flexible property operations of the setDataItemProps and getDataItemProps methods, the component can not only display data in the desired way, but also set and get properties efficiently, greatly improving the usability and flexibility of the component.

[0067] Step 5, use this single data display panel in the project. By calling the component initialization function, you can configure the corresponding layout type and attribute parameters according to the project requirements, and then realize customized data display panel rendering. Customized data display panel rendering brings a high degree of flexibility and personalization to the project. Developers can choose the most appropriate display configuration according to different data types and display requirements to intuitively present key information. In addition, the user experience can be further optimized by carefully adjusting the attribute parameters.

[0068] Step 6, adjust the style of the single data display panel. The single data display panel provided by the present invention is equipped with a set of default styles. In order to further enhance the personalized experience, users can customize the style settings by simply adjusting the class attribute, so that the look and feel of the panel is consistent with the overall style of the project. This flexibility not only allows users to customize according to personal preferences or project style, but also ensures the clarity and attractiveness of data display.

[0069] In the process of achieving personalized visual presentation, users can choose from a series of preset style options or write custom CSS code to create unique visual effects. This approach is suitable for both users who want to quickly deploy standard solutions and those who seek highly customized designs.

[0070] Embodiment 2, based on embodiment 1, proposes a page single item data display system, the system comprising:

[0071] Single data display component DataItemPanelComponent: used to provide a clear and efficient interface to display key information;

[0072] DisplayItem: As a subcomponent of DataItemPanelComponent, it is used to display data items, icons, description texts and other elements to enhance user experience and data readability.

[0073] Layout type variable layoutType: defined in DataItemPanelComponent, used to specify the display layout mode, including none (default), left-right, up-down;

[0074] Element storage array: including leftItem, rightItem, upItem, downItem, used to store DisplayItem objects under the corresponding layout mode to support different display layout requirements.

[0075] Also includes configuration properties, including:

[0076] Panel dimensions: such as width and height, which define how much space the panel will have on the page;

[0077] Data attributes: used to store the information content to be displayed on the panel;

[0078] Unit attributes: provide a metric for the data;

[0079] Font size, color, icon, background: used to refine design details and enhance visual effects;

[0080] Description text: Provides necessary descriptions of interface elements;

[0081] Style class: allows you to apply predefined or custom style rules through the class attribute to achieve personalized design.

[0082] The DisplayItem component contains the following variables:

[0083] Unique identifier itemKey: used to uniquely identify each display element;

[0084] Element type itemType: defines the type of element, such as text, picture, font icon;

[0085] Display content itemContent: stores specific text, image URL or font icon class name according to itemType;

[0086] Data unit itemUnit: provides a metric for displaying content;

[0087] Element style itemStyle: directly controls the appearance of the element;

[0088] Custom style class customClass: allows users to further customize the element style according to personal preferences.

[0089] The following interface methods are also included:

[0090] Initialization function init(opt): receives the parameter opt containing configuration properties, starts the component initialization process, and renders the DataItemPanelComponent component according to the preset configuration;

[0091] Property setting method setDataItemProps(opt): allows developers to set the properties of the component, and supports setting the properties of a specific DisplayItem object or all DisplayItem objects;

[0092] Property acquisition method getDataItemProps(itemKey?): provides the function of obtaining components or specifying DisplayItem object properties to meet the needs of different scenarios.

[0093] It also includes a style adjustment function, allowing users to customize the style settings of the DataItemPanelComponent component by adjusting the class property to match the overall style of the project or user preferences, thereby further improving the clarity and attractiveness of data display.

[0094] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for displaying single item data on a page, characterized in that: The method comprises the following steps: Define a single data display component DataItemPanelComponent, which contains a display element component DisplayItem, which is used to clearly and efficiently display key information on the interface; Sort out and summarize the commonly used single-item data display layout methods, including single data item display, left-right layout of icons and data items, top-bottom layout of icons and data items, and flexible layout of icons, data items and description texts; Define the layout type variable layoutType in DataItemPanelComponent, as well as the array variables leftItem, rightItem, upItem, and downItem used to store display elements. The layoutType variable is set to a corresponding value according to the layout mode, and each array variable stores the DisplayItem object of the corresponding layout. Extract and define configuration properties, including panel size, data, units, layout type, font size, color, icon, background, description text and style class, for flexible configuration and customization of the appearance and display content of display components; Encapsulates the DataItemPanelComponent component and provides the initialization function init(opt), the property setting method setDataItemProps(opt) and the property getting method getDataItemProps(itemKey?) to initialize the component and perform property operations.

2. A method for displaying single item data on a page according to claim 1, characterized in that: The DisplayItem component contains the following variables: The unique identifier itemKey is used to uniquely identify each display element; Element type itemType, used to define the type of element, such as text, image or font icon; Display content itemContent, store the corresponding text, image URL or font icon class name according to itemType; The data unit itemUnit provides a metric for displaying content; Element style itemStyle, used to control the appearance style of the element; The custom style class customClass allows users to further customize the style of the element according to their personal preferences.

3. A method for displaying single item data on a page according to claim 1, characterized in that: The initialization function init(opt) receives the parameter opt containing all configuration properties, and renders the DataItemPanelComponent component according to the configuration properties to display a single item of data.

4. A method for displaying single item data on a page according to claim 1, characterized in that: The property setting method setDataItemProps(opt) and the property getting method getDataItemProps(itemKey?) provide flexible operations on the properties of the DataItemPanelComponent component, where setDataItemProps(opt) is used to set component properties, and getDataItemProps(itemKey?) is used to get the properties of the component or the specified element.

5. A method for displaying single item data on a page according to claim 1, characterized in that: The method also includes the following steps: using a single data display panel in the project, implementing customized data display panel rendering by calling the init(opt) function and configuring corresponding layout types and attribute parameters, and allowing users to customize the style of the panel by adjusting the class attribute to suit the overall style of the project or user preferences.

6. A page single item data display system according to the page single item data display method according to any one of claims 1 to 5, characterized in that: The system comprises: Single data display component DataItemPanelComponent: used to provide a clear and efficient interface to display key information; DisplayItem: As a subcomponent of DataItemPanelComponent, it is used to display data items, icons, description texts and other elements to enhance user experience and data readability. Layout type variable layoutType: defined in DataItemPanelComponent, used to specify the display layout mode, including none (default), left-right, up-down; Element storage array: including leftItem, rightItem, upItem, downItem, used to store DisplayItem objects under the corresponding layout mode to support different display layout requirements.

7. A page single item data display system according to claim 6, characterized in that: The configuration properties are also included, including: Panel dimensions: such as width and height, which define how much space the panel will have on the page; Data attributes: used to store the information content to be displayed on the panel; Unit attributes: provide a metric for the data; Font size, color, icon, background: used to refine design details and enhance visual effects; Description text: Provides necessary descriptions of interface elements; Style class: allows you to apply predefined or custom style rules through the class attribute to achieve personalized design.

8. A page single item data display system according to claim 6, characterized in that: The DisplayItem component contains the following variables: Unique identifier itemKey: used to uniquely identify each display element; Element type itemType: defines the type of element, such as text, picture, font icon; Display content itemContent: stores specific text, image URL or font icon class name according to itemType; Data unit itemUnit: provides a metric for displaying content; Element style itemStyle: directly controls the appearance of the element; Custom style class customClass: allows users to further customize the element style according to personal preferences.

9. A page single item data display system according to claim 6, characterized in that: The following interface methods are also included: Initialization function init(opt): receives the parameter opt containing configuration properties, starts the component initialization process, and renders the DataItemPanelComponent component according to the preset configuration; Property setting method setDataItemProps(opt): allows developers to set the properties of the component, and supports setting the properties of a specific DisplayItem object or all DisplayItem objects; Property acquisition method getDataItemProps(itemKey?): provides the function of obtaining components or specifying DisplayItem object properties to meet the needs of different scenarios.

10. A page single item data display system according to claim 6, characterized in that: It also includes a style adjustment function, allowing users to customize the style settings of the DataItemPanelComponent component by adjusting the class property to match the overall style of the project or user preferences, thereby further improving the clarity and attractiveness of data display.

Images