Method and device for customizing large visual screen and readable storage medium

Abstract

The invention provides a method and device for customizing a large visual screen and a readable storage medium. The method comprises the steps that the large visual screen is divided, and layout blocks and content components are set; popping up a layout block list according to a first operation triggered by a user based on the design page of the visual large screen; in response to selection and dragging operations of a user on the layout blocks in the layout block list, performing custom display on the corresponding layout blocks in the design page; receiving an association operation of a user for each layout block in the design page, associating each layout block with a corresponding content component, and filling and displaying a component effect picture of the corresponding content component in the corresponding layout block; and loading and displaying data according to the customized large-screen data information. According to the method, the device and the readable storage medium, the problems that an existing method for customizing a large visual screen cannot customize module layout, the user participation degree is low in the overall typesetting design of the large screen, and the whole is lack of flexibility can be solved.

Description

Technical Field

[0001] The present invention relates to the field of smart community technology, and in particular to a method, device and readable storage medium for customizing a large visualization screen. Background Art

[0002] With the continuous improvement of urbanization, communities, as the basic grid units of grassroots governance in my country, need to integrate smart technologies and means to cope with the increasingly diverse public management and service needs and promote the modernization of grassroots governance. In smart communities, large visual screens play a key role in connecting residents and community management.

[0003] At present, custom visualization large screens generally use common front-end frameworks such as React.js and Vue.js, and are developed in a component-based development mode. Developers combine chart libraries such as ECharts to present data from different modules on the large screen in an intuitive way. There are mainly the following methods: first, users fill in configuration information such as style sheets and import them into the large screen page, generate code and render them, and finally generate a custom large screen; second, developers write custom large screen code to expand the original large screen components to generate a custom large screen.

[0004] However, although the existing methods of customizing visualization large screens can obtain data sources and provide customized charts according to user needs, they cannot customize the module layout. User participation in the overall layout design of the large screen is low and lacks flexibility overall. Summary of the invention

[0005] The technical problem to be solved by the present invention is to provide a method, device and readable storage medium for customizing a large visualization screen in response to the above-mentioned deficiencies in the prior art, so as to at least solve the problem that the existing method for customizing a large visualization screen cannot customize the module layout, the user participation in the overall layout design of the large screen is low, and the overall lack of flexibility.

[0006] In a first aspect, the present invention provides a method for customizing a large visualization screen, which is applied to a large visualization screen, and the method comprises:

[0007] Divide the visualization screen and set layout blocks and content components;

[0008] According to the first operation triggered by the user on the design page of the visualization large screen, a layout block list is popped up;

[0009] In response to a user's selection and dragging operation on a layout block in the layout block list, customizing and displaying the corresponding layout block in the design page;

[0010] Receive an association operation from a user for each layout block in the design page, associate each layout block with a corresponding content component, and fill in a component rendering showing the corresponding content component in the corresponding layout block;

[0011] Load data and display it according to the customized large-screen data information.

[0012] Furthermore, the setting of layout blocks and content components specifically includes:

[0013] Setting a layout block according to layout block information input by a user, wherein the layout block information includes a name, width, height, and layout block identifier of the layout block;

[0014] The content component is set according to the configurable information of the content component input by the user, wherein the configurable information includes the component name, the layout block to which it belongs, the component rendering, the component introduction and the component path.

[0015] Furthermore, the popping up of the layout block list according to the first operation triggered by the user based on the design page of the visualization large screen specifically includes:

[0016] Receiving a first operation triggered by a user based on a preset object in a design page;

[0017] The layout block list is popped up according to the first operation, wherein each layout block in the layout block list is generated by Vue-Grid-Layout.

[0018] Furthermore, in response to the user's selection and dragging operation on a layout block in the layout block list, the corresponding layout block is customized and displayed on the design page, specifically including:

[0019] In response to a dragging operation in which a user selects a required layout block from the layout block list and drags the block to the design page, a transparent placeholder is displayed on the design page according to a current position of the dragging operation to indicate a position where the layout block is to be placed, and the layout block is displayed at a corresponding position on the design page according to a target position of the dragging operation;

[0020] During the dragging operation, the pop-up window containing the layout block list is hidden.

[0021] Furthermore, the method further comprises:

[0022] In response to a user's adjustment operation on the position and / or size of the layout block in the design page, the position and / or size of the layout block in the design page is updated according to the adjustment operation, and the changed key attributes are saved in corresponding variables, wherein the key attributes include the width, height, distance from the left, and distance from the top of the layout block.

[0023] Furthermore, after receiving the user's association operation for each layout block in the design page, associating each layout block with a corresponding content component, and filling the component effect diagram showing the corresponding content component in the corresponding layout block, the method further includes:

[0024] Save customized large-screen data information based on the user's identity.

[0025] Furthermore, the loading of data and display of data according to the customized large-screen data information specifically includes:

[0026] According to the customized large-screen data information, the data is loaded through lazy loading and displayed in the corresponding position.

[0027] In a second aspect, the present invention provides a device for customizing a large visualization screen, which is applied to a large visualization screen, and the device includes:

[0028] The division and setting module is used to divide the visualization screen and set layout blocks and content components;

[0029] A layout block list display module, connected to the division and setting module, is used to pop up a layout block list according to a first operation triggered by a user based on a design page of a visualization large screen;

[0030] A selection and drag module connected to the layout block list display module, for responding to a user's selection and drag operation of a layout block in the layout block list, and customizing and displaying the corresponding layout block in the design page;

[0031] A layout content association module, connected to the selection and dragging module, is used to receive the user's association operation for each layout block in the design page, associate each layout block with a corresponding content component, and fill in a component effect diagram showing the corresponding content component in the corresponding layout block;

[0032] The custom display module is connected to the layout content association module and is used to load and display data according to the customized large-screen data information.

[0033] In a third aspect, the present invention provides a device for customizing a large visualization screen, comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to implement the method for customizing a large visualization screen described in the first aspect.

[0034] In a fourth aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the method for customizing a large visualization screen as described in the first aspect above is implemented.

[0035] The method, device and readable storage medium for customizing a large visualization screen provided by the present invention first divide the large visualization screen, set layout blocks and content components; then, according to the first operation triggered by the user based on the design page of the large visualization screen, a layout block list pops up; and in response to the user's selection and drag operation of the layout block in the layout block list, the corresponding layout block is customized and displayed in the design page; at the same time, the user's association operation for each layout block in the design page is received, each of the layout blocks is associated with the corresponding content component, and the component renderings showing the corresponding content component are filled in the corresponding layout block; finally, data is loaded and displayed according to the customized large screen data information. Through the present invention, the user can customize the overall layout design of the large visualization screen in the form of dragging and dropping, improve the shortcomings of insufficient interactivity and flexibility, improve the usability of the large screen, improve the user experience, and solve the problems that the existing method for customizing the large visualization screen cannot customize the module layout, the user participation in the overall layout design of the large screen is low, and the overall lack of flexibility. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 This is a flow chart of a method for customizing a large visualization screen according to Embodiment 1 of the present invention;

[0037] Figure 2 This is a flowchart of another method for customizing a large visualization screen according to Embodiment 1 of the present invention;

[0038] Figure 3 This is a schematic diagram of the structure of a device for a customizable large-screen visualization according to Embodiment 2 of the present invention;

[0039] Figure 4 This is a schematic diagram of the structure of a device for a customized large-screen visualization according to Embodiment 3 of the present invention. DETAILED DESCRIPTION

[0040] In order to enable those skilled in the art to better understand the technical solution of the present invention, the embodiments of the present invention will be further described in detail below with reference to the accompanying drawings.

[0041] It should be understood that the specific embodiments and drawings described herein are only used to explain the present invention rather than to limit the present invention.

[0042] It can be understood that, in the absence of conflict, the various embodiments of the present invention and the various features in the embodiments can be combined with each other.

[0043] It can be understood that, for the convenience of description, the drawings of the present invention only show the parts related to the present invention, while the parts irrelevant to the present invention are not shown in the drawings.

[0044] It can be understood that each unit and module involved in the embodiments of the present invention may correspond to only one physical structure, or may be composed of multiple physical structures, or multiple units and modules may be integrated into one physical structure.

[0045] It can be understood that the terms "first", "second", etc. in the embodiments of the present invention are used to distinguish different objects, or to distinguish different processing of the same object, rather than to describe a specific order of objects.

[0046] It can be understood that, without conflict, the functions and steps marked in the flowcharts and block diagrams of the present invention may occur in an order different from that marked in the drawings.

[0047] It is understood that the flowcharts and block diagrams of the present invention illustrate the possible architectures, functions, and operations of the systems, devices, equipment, and methods according to the various embodiments of the present invention. Each box in the flowchart or block diagram may represent a unit, module, program segment, or code, which contains executable instructions for implementing the specified functions. Moreover, each box or combination of boxes in the block diagram and flowchart may be implemented by a hardware-based system that implements the specified functions, or may be implemented by a combination of hardware and computer instructions.

[0048] It can be understood that the units and modules involved in the embodiments of the present invention can be implemented by software or hardware. For example, the units and modules can be located in a processor.

[0049] Application Overview

[0050] At present, custom visualization large screens generally use common front-end frameworks such as React.js and Vue.js, and are developed in a component-based development mode. Developers combine chart libraries such as ECharts to present data from different modules in an intuitive way on the large screen. There are mainly the following methods: first, users fill in configuration information such as style sheets and import them into the large screen page, generate code and render them, and finally generate a custom large screen; second, developers write custom large screen code to expand the original large screen components to generate a custom large screen.

[0051] However, the existing methods for customizing visualization screens have the following disadvantages:

[0052] (1) Existing custom visualization screens can obtain data sources and provide custom charts according to user needs, but cannot customize module layouts. User participation in the overall layout design of the screen is low, and the overall design lacks flexibility.

[0053] (2) Existing custom visualization large screens can generate codes by receiving style sheets and style configurations input by users, and then generate large screens after rendering. However, users cannot see the large screen effects immediately, modifications and adjustments are not intuitive, and the user experience is poor.

[0054] (3) Customized visualization screens frequently obtain large-scale chart data for rendering and redrawing, which can easily lead to excessive pressure on network data transmission, resulting in a long download time for data resources, slow loading of charts, and thus delays in the rendering time of the visualization page.

[0055] In response to the above technical problems, the idea of ​​the present application is to provide a method, device and readable storage medium for customizing a large visual screen, so as to at least solve the problem that the existing method for customizing a large visual screen cannot customize the module layout, the user participation in the overall layout design of the large screen is low, and the overall lack of flexibility.

[0056] Embodiment 1:

[0057] This embodiment provides a method for customizing a large visualization screen, which is applied to a large visualization screen, such as Figure 1 As shown, the method includes:

[0058] Step S101: Divide the visualization screen and set layout blocks and content components;

[0059] In this embodiment, the idea of ​​front-end modularization and componentization is used to divide the visualization screen into multiple modules according to functions and regions, and then set corresponding layout blocks and content components. Layout blocks refer to things that can be dragged in the visualization screen. Content components refer to components that can be associated with different scene contents and are used to fill in layout blocks.

[0060] Optionally, the setting of layout blocks and content components specifically includes:

[0061] Setting a layout block according to layout block information input by a user, wherein the layout block information includes a name, width, height, and layout block identifier of the layout block;

[0062] The content component is set according to the configurable information of the content component input by the user, wherein the configurable information includes the component name, the layout block to which it belongs, the component rendering, the component introduction and the component path.

[0063] In this embodiment, the developer adds a new layout block and sets the information of the layout block: layout block name, layout block width w (for example, the screen width and height are divided into 24 equal parts, where w represents the number of parts), layout block height (same width), layout block identifier sizeId (automatically generated by width and height and cannot be modified, for example: width_height, 6_6), layout block introduction introduce, etc.

[0064] In this embodiment, the developer adds a new content component and enters the configurable information of the component, including: component name fileName (title displayed on the large screen), component folder name fileName (generated component path), component rendering pic, component introduction introduce, layout block sizeId (set layout block), component path filePath (automatically generated according to the component file name and the layout block to which it belongs, and can also be manually modified, representing the actual location of the component), etc. In the source code, the content component is set as a responsive component, and the content component size is adaptive. For example, the developed content components can include: community overview, community party building, community convenience, event statistics, equipment statistics, housing statistics, travel statistics, etc.

[0065] It should be noted that a content component can be bound to multiple layout blocks, and a layout block can also be bound to multiple content components. The content component and layout block are associated through sizeId.

[0066] Step S102: According to the first operation triggered by the user based on the design page of the visualization large screen, a layout block list is popped up.

[0067] Specifically, a first operation triggered by a user based on a preset object in a design page is received; and the layout block list is popped up according to the first operation, wherein each layout block in the layout block list is generated by Vue-Grid-Layout.

[0068] In this embodiment, the preset object can be any form such as a button, text, or picture. For example, the preset object can be a floating button. When the user clicks, double-clicks, long-presses, or touches the preset object, the first operation is triggered. For example, after the user clicks the floating button in the design page, a pop-up window containing a list of layout blocks pops up. These layout blocks are arranged by category, and each layout block is a component instance dynamically generated by Vue-Grid-Layout, with independent style, size, and functional attributes.

[0069] Step S103: in response to the user's selection and dragging operation on a layout block in the layout block list, the corresponding layout block is customized and displayed in the design page.

[0070] In this embodiment, the user long presses in the pop-up window to select the desired layout block, and the layout block enters the draggable state. With the built-in drag support of Vue-Grid-Layout, the user can drag the selected layout block from the pop-up window to the design page for customized display.

[0071] Optionally, in response to the user's selection and dragging operation on a layout block in the layout block list, customizing and displaying the corresponding layout block on the design page specifically includes:

[0072] In response to a dragging operation in which a user selects a required layout block from the layout block list and drags the block to the design page, a transparent placeholder is displayed on the design page according to a current position of the dragging operation to indicate a position where the layout block is to be placed, and the layout block is displayed at a corresponding position on the design page according to a target position of the dragging operation;

[0073] During the dragging operation, the pop-up window containing the layout block list is hidden.

[0074] In this embodiment, in order to ensure that the user's focus is on the design page and the layout operation is performed without visual interference, when the drag operation begins, the pop-up window where the layout block list is located is automatically hidden. At the same time, a transparent placeholder will appear on the design page to indicate the location where the layout block will be placed to enhance the user experience.

[0075] It should be noted that the placeholder can specifically take the current position dragged by the user as the center point, and the length and width of the layout block as the size of the placeholder.

[0076] Optionally, the method further comprises:

[0077] In response to a user's adjustment operation on the position and / or size of the layout block in the design page, the position and / or size of the layout block in the design page is updated according to the adjustment operation, and the changed key attributes are saved in corresponding variables, wherein the key attributes include the width, height, distance from the left, and distance from the top of the layout block.

[0078] In this embodiment, based on Vue-Grid-Layout, users can freely drag the selected layout block according to actual needs, and dynamically adjust its position and size on the design page. Whenever the position or size of the layout block changes, Vue-Grid-Layout will update the relevant status through its internal mechanism. In this process, we save the key attributes of the layout block, including width (w), height (h), distance from the left (x), and distance from the top (y), to the corresponding variables in real time. These variables serve as snapshots of the layout state, not only for instant presentation of layout effects, but also provide data support for subsequent saving and reuse of layout configurations.

[0079] Step S104: receiving the user's association operation for each layout block in the design page, associating each layout block with a corresponding content component, and filling the corresponding layout block with a component rendering showing the corresponding content component.

[0080] In this embodiment, the user obtains layout block information by clicking on the layout block, finds the associated content component through the layout block sizeId, and displays the associated content component in a pop-up window. Double-click or single-click to select the content component, and fills the layout block display according to the component rendering information in the selected content component, thereby obtaining a final module (a combination of layout blocks, content components, and location information).

[0081] Optionally, after receiving the user's association operation for each layout block in the design page, associating each layout block with a corresponding content component, and filling the component effect diagram showing the corresponding content component in the corresponding layout block, the method further includes:

[0082] Save customized large-screen data information based on the user's identity.

[0083] In this embodiment, after the user associates all layout blocks in the visualization large screen, the user obtains customized large screen data information, and saves the customized large screen data information according to the user's identity identifier (identity token).

[0084] Step S105: Load data and display it according to the customized large-screen data information.

[0085] Specifically, data is loaded through lazy loading according to the customized large-screen data information and displayed in the corresponding position.

[0086] In this embodiment, the designed large screen data information is requested according to the user's identity, and the data is loaded in a lazy loading manner. The interface is requested and the data is loaded only before the current component is loaded. After the data is loaded, the entry animation is loaded, etc. The component information is obtained according to the large screen information component compId, the file path of the component is obtained according to the filePath field of the component, and the location information of the setting component is obtained according to w, h, x, and y.

[0087] It should be noted that the method for customizing a large-screen visualization provided in an embodiment of the present invention is applied to a large-screen project in a smart community. Developers set and associate content components and layout blocks based on modular ideas. Users drag layout blocks and select corresponding content components to complete the large screen, thereby realizing the rapid construction and flexible configuration of the large screen in a smart community. At the same time, it supports functions such as data interface docking and real-time updates, which can meet the needs of various application scenarios. In addition, by using the Vue-Grid-Layout drag-and-drop plug-in, users can manually drag and drop to generate corresponding layout models according to their own ideas. This component supports multiple layout methods and responsive design, and can adapt to different resolutions and device sizes.

[0088] In a specific embodiment, Figure 2 As shown, the method for customizing the visualization large screen may include the following steps:

[0089] Step 1: Modular processing of the visual large screen. Using the idea of ​​front-end modularization and componentization, the large screen is divided into modules according to function and area.

[0090] Step 2: Set the layout block. To set the large screen layout by dragging, set some draggable objects, called layout blocks.

[0091] The developer adds a new layout block and sets the layout block information: layout block name, layout block width w (divide the screen width and height into 24 equal parts, where w represents the number of parts), layout block height (same width), layout block identifier sizeId (automatically generated by width and height and cannot be modified, for example: width_height, 6_6), layout block introduction, etc.

[0092] Pre-set the layout block size according to needs, for example: the editable area of ​​the large screen is 24*24, and the layout block is 6*6, 3*8, 12*6, 6*12, etc.

[0093] For example, the layout block interface type is as follows:

[0094]

[0095]

[0096] Step 3: Set up content components. Each layout block can be associated with different scene contents, called content components. Content components are adaptive in size, and data is requested within the current component. They can include charts, pop-up details, etc.

[0097] The developer adds a content component and enters the configurable information of the component, including: component name fileName (title displayed on the large screen), component folder name fileName (generated component path), component rendering pic, component introduction introduce, layout block sizeId (layout block set in step 2), component path filePath (automatically generated based on the component file name and the layout block to which it belongs, or can be manually modified, representing the actual location of the component). At the same time, the basic information of the newly added component is also associated with the layout block. In the source code, the content component is set as a responsive component. A content component can be bound to multiple layout blocks, and a layout block can also be bound to multiple content components, associating the content component with the layout block sizeId; take the actual component file name fileName in the large-screen project code, and automatically generate the component path filePath in the code with the layout block sizeId.

[0098] For example, the developed content components may include: community overview, community party building, community convenience, event statistics, equipment statistics, housing statistics, travel statistics, etc. The interface type of the content component can be as follows:

[0099]

[0100]

[0101] Step 4: User-defined large screen, that is, to implement a design page for a user-defined large screen.

[0102] (1) Drag and drop layout blocks: Place the layout block generated in step 2 in the pop-up window of the "Design Page". Click the floating button to display the list of layout blocks in the pop-up window. Long press to select the required layout block and drag it to the design page. When dragging begins, the pop-up window where the layout block is located is automatically hidden. At this point, the design page has a layout block. This process can be repeated to complete the large-screen custom design.

[0103] In the process of designing the application, in order to facilitate users to quickly build custom layouts, we adopted the Vue-Grid-Layout component and integrated it into a dedicated "design page". This design page contains a floating button. When the user clicks the button, a window with a rich list of layout blocks will pop up. These layout blocks are generated by Vue-Grid-Layout. They are draggable and resizable, designed to meet the user's various layout needs.

[0104] The specific operations are as follows:

[0105] Layout block list pop-up window: After the user clicks the floating button, a pop-up window containing preset layout blocks will be opened. These layout blocks are arranged by category, and each layout block is a component instance dynamically generated by Vue-Grid-Layout, with independent style, size and functional attributes.

[0106] Long press to select and drag: The user long presses to select the required layout block in the pop-up window, and the layout block enters the draggable state. With the built-in drag support of Vue-Grid-Layout, the user can drag the selected layout block from the pop-up window to the main workspace of the design page.

[0107] Interactive feedback when dragging starts: When the drag operation starts, Vue-Grid-Layout automatically hides the pop-up window where the layout block list is located, ensuring that the user's focus is on the design page and the layout operation is performed without visual interference. At the same time, a transparent placeholder will appear on the design page to indicate where the layout block will be placed, enhancing the user experience.

[0108] Real-time layout and state storage: With Vue-Grid-Layout, users can freely drag and drop selected layout blocks according to actual needs, and dynamically adjust their position and size on the design page. Components will respond to user operations in real time to ensure smooth transition and precise positioning of the layout. Whenever the position or size of a layout block changes, Vue-Grid-Layout will update the relevant state through its internal mechanism. In this process, we save the key attributes of the layout block, including width (w), height (h), distance from the left (x), and distance from the top (y), to the corresponding variables in real time. These variables serve as snapshots of the layout state, which are not only used to instantly present the layout effect, but also provide data support for subsequent saving and reuse of layout configurations.

[0109] Determine the size and position of the layout block: Finally, based on the saved variables w (layout block width), h (layout block height), x (distance from the left), and y (distance from the top), Vue-Grid-Layout determines the exact size and position information of each layout block on the design page. This information is stored persistently to ensure that users can accurately restore the previously created layout structure when they subsequently access or share the design.

[0110] In summary, by integrating the Vue-Grid-Layout component, designing the user interaction process, and realizing functions such as selecting, dragging, and resizing layout blocks, it provides users with an intuitive and flexible way to personalize the layout.

[0111] (2) Selecting content components: The user clicks on a layout block to obtain layout block information, and finds the associated content component in step 3 through the sizeId of the layout block. The associated content component is displayed in a pop-up window. Double-click or click to select the content component. The layout block is filled with the component rendering information in the selected content component, and a final module (a combination of layout block, content component, and location information) is obtained.

[0112] The module interface types are as follows:

[0113]

[0114]

[0115] (3) Save the module layout data based on the user's identity token.

[0116]

[0117] Step 5: Display the custom large screen. Request the designed large screen data information according to the user's identity, load the data through lazy loading, and request the interface and load the data only before loading the current component. After loading the data, load the entry animation, etc. Get the component information according to the large screen information component compId, get the component's file path according to the component's filePath field, and get the component's location information according to w, h, x, y; if there is a fixed navigation, the location information can be expressed as follows:

[0118]

[0119] It should be noted that the anov framework (with built-in animation, themes, sound effects, remote control and other functions) can be used to echo the large screen. The configuration data type obtained on the large screen code side is as follows:

[0120]

[0121] It should be noted that the method for customizing a large visualization screen provided by the present invention has the following beneficial effects:

[0122] a) Users can customize the overall layout design of the large screen by dragging and dropping, improving the shortcomings of insufficient interactivity and flexibility and improving the usability of the large screen.

[0123] b) Users can design large screens through relatively simple operations such as dragging and selecting, and can preview them in real time, so that non-professionals can design large screens without obstacles, improving user experience.

[0124] c) Through lazy loading, the loading of resources required for the page is minimized, the loading speed and performance of the visualization large screen are improved, and a better user experience is brought to users.

[0125] The method for customizing a large visualization screen provided by an embodiment of the present invention first divides the large visualization screen, sets layout blocks and content components; then, according to the first operation triggered by the user based on the design page of the large visualization screen, a layout block list pops up; and in response to the user's selection and dragging operation of the layout block in the layout block list, the corresponding layout block is customized and displayed in the design page; at the same time, the user's association operation for each layout block in the design page is received, each of the layout blocks is associated with the corresponding content component, and the component renderings showing the corresponding content component are filled in the corresponding layout block; finally, data is loaded and displayed according to the customized large screen data information. Through the present invention, the user can customize the overall layout design of the large visualization screen in the form of dragging and dropping, improve the shortcomings of insufficient interactivity and flexibility, improve the usability of the large screen, improve the user experience, and solve the problems that the existing method for customizing the large visualization screen cannot customize the module layout, the user participation in the overall layout design of the large screen is low, and the overall lack of flexibility.

[0126] Embodiment 2:

[0127] like Figure 3 As shown, this embodiment provides a device for customizing a large visualization screen, which is applied to a large visualization screen and is used to execute the method for customizing a large visualization screen, including:

[0128] The division and setting module 11 is used to divide the visualization screen and set layout blocks and content components;

[0129] A layout block list display module 12, connected to the division and setting module 11, is used to pop up a layout block list according to a first operation triggered by a user based on a design page of a visualization large screen;

[0130] A selection and dragging module 13, connected to the layout block list display module 12, for responding to a user's selection and dragging operation of a layout block in the layout block list, and customizing and displaying the corresponding layout block in the design page;

[0131] The layout content association module 14 is connected to the selection and dragging module 13, and is used to receive the user's association operation for each layout block in the design page, associate each layout block with a corresponding content component, and fill in the component effect diagram showing the corresponding content component in the corresponding layout block;

[0132] The custom display module 15 is connected to the layout content association module 14 and is used to load and display data according to the customized large-screen data information.

[0133] Optionally, the division and setting module 11 includes:

[0134] A layout block setting unit, used to set a layout block according to the layout block information input by the user, wherein the layout block information includes a name, width, height and layout block identifier of the layout block;

[0135] The content component setting unit is used to set the content component according to the configurable information of the content component input by the user, wherein the configurable information includes the component name, the layout block to which it belongs, the component rendering, the component introduction and the component path.

[0136] Optionally, the layout block list display module 12 includes:

[0137] A first operation receiving unit, used to receive a first operation triggered by a user based on a preset object in a design page;

[0138] A list pop-up unit is used to pop up the layout block list according to the first operation, wherein each layout block in the layout block list is generated by Vue-Grid-Layout.

[0139] Optionally, the selection and drag module 13 is specifically used for:

[0140] In response to a dragging operation in which a user selects a required layout block from the layout block list and drags the block to the design page, a transparent placeholder is displayed on the design page according to a current position of the dragging operation to indicate a position where the layout block is to be placed, and the layout block is displayed at a corresponding position on the design page according to a target position of the dragging operation;

[0141] During the dragging operation, the pop-up window containing the layout block list is hidden.

[0142] Optionally, the device further comprises:

[0143] A layout block adjustment module is used to respond to a user's adjustment operation on the position and / or size of the layout block in the design page, update the position and / or size of the layout block in the design page according to the adjustment operation, and save the changed key attributes to corresponding variables, wherein the key attributes include the width, height, distance from the left, and distance from the top of the layout block.

[0144] Optionally, the device further comprises:

[0145] The custom information saving module is used to save the customized large-screen data information according to the user's identity.

[0146] Optionally, the custom display module 15 is specifically used for:

[0147] According to the customized large-screen data information, the data is loaded through lazy loading and displayed in the corresponding position.

[0148] Embodiment 3:

[0149] refer to Figure 4 This embodiment provides a device for customizing a large visualization screen, including a memory 21 and a processor 22. The memory 21 stores a computer program, and the processor 22 is configured to run the computer program to execute the method for customizing a large visualization screen in Example 1.

[0150] The memory 21 is connected to the processor 22. The memory 21 may be a flash memory, a read-only memory or other memory. The processor 22 may be a central processing unit or a single-chip microcomputer.

[0151] Embodiment 4:

[0152] This embodiment provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the method for customizing a large visualization screen in the above-mentioned embodiment 1 is implemented.

[0153] The computer-readable storage medium includes volatile or non-volatile, removable or non-removable media implemented in any method or technology for storing information (such as computer-readable instructions, data structures, computer program modules or other data). Computer-readable storage media include, but are not limited to, RAM (Random Access Memory), ROM (Read-Only Memory), EEPROM (Electrically Erasable Programmable read only memory), flash memory or other memory technology, CD-ROM (Compact Disc Read-Only Memory), digital versatile disk (DVD) or other optical disk storage, magnetic cassettes, magnetic tapes, magnetic disk storage or other magnetic storage devices, or any other medium that can be used to store the desired information and can be accessed by a computer.

[0154] In summary, the method, device and readable storage medium for customizing a large visualization screen provided by an embodiment of the present invention first divide the large visualization screen, set layout blocks and content components; then, according to the first operation triggered by the user based on the design page of the large visualization screen, a list of layout blocks pops up; and in response to the user's selection and dragging operation of the layout block in the list of layout blocks, the corresponding layout block is customized and displayed in the design page; at the same time, the user's association operation for each layout block in the design page is received, each of the layout blocks is associated with the corresponding content component, and the component renderings showing the corresponding content component are filled in the corresponding layout block; finally, data is loaded and displayed according to the customized large screen data information. Through the present invention, users can customize the overall layout design of the large visualization screen in the form of dragging and dropping, improve the shortcomings of insufficient interactivity and flexibility, improve the usability of the large screen, improve the user experience, and solve the problems that the existing method of customizing the large visualization screen cannot customize the module layout, the user participation in the overall layout design of the large screen is low, and the overall lack of flexibility.

[0155] It is to be understood that the above embodiments are merely exemplary embodiments used to illustrate the principles of the present invention, but the present invention 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 essence of the present invention, and these modifications and improvements are also considered to be within the scope of protection of the present invention.

Claims

1. A method for customizing a large visualization screen, characterized in that: Applied to a large visualization screen, the method includes: Divide the visualization screen and set layout blocks and content components; According to the first operation triggered by the user on the design page of the visualization large screen, a layout block list is popped up; In response to a user's selection and dragging operation on a layout block in the layout block list, customizing and displaying the corresponding layout block in the design page; Receive an association operation from a user for each layout block in the design page, associate each layout block with a corresponding content component, and fill in a component rendering showing the corresponding content component in the corresponding layout block; Load data and display it according to the customized large-screen data information.

2. The method according to claim 1, characterized in that The setting of layout blocks and content components specifically includes: Setting a layout block according to layout block information input by a user, wherein the layout block information includes a name, width, height, and layout block identifier of the layout block; The content component is set according to the configurable information of the content component input by the user, wherein the configurable information includes the component name, the layout block to which it belongs, the component rendering, the component introduction and the component path.

3. The method according to claim 1, characterized in that The popping up of the layout block list according to the first operation triggered by the user based on the design page of the visualization large screen specifically includes: Receiving a first operation triggered by a user based on a preset object in a design page; The layout block list is popped up according to the first operation, wherein each layout block in the layout block list is generated by Vue-Grid-Layout.

4. The method according to claim 1, characterized in that In response to the user's selection and dragging operation on the layout block in the layout block list, customizing and displaying the corresponding layout block in the design page specifically includes: In response to a dragging operation in which a user selects a required layout block from the layout block list and drags the block to the design page, a transparent placeholder is displayed on the design page according to a current position of the dragging operation to indicate a position where the layout block is to be placed, and the layout block is displayed at a corresponding position on the design page according to a target position of the dragging operation; During the dragging operation, the pop-up window containing the layout block list is hidden.

5. The method according to claim 4, characterized in that The method further comprises: In response to a user's adjustment operation on the position and / or size of the layout block in the design page, the position and / or size of the layout block in the design page is updated according to the adjustment operation, and the changed key attributes are saved in corresponding variables, wherein the key attributes include the width, height, distance from the left, and distance from the top of the layout block.

6. The method according to claim 5, characterized in that After receiving the user's association operation for each layout block in the design page, associating each layout block with a corresponding content component, and filling the component effect diagram showing the corresponding content component in the corresponding layout block, the method further includes: Save customized large-screen data information based on the user's identity.

7. The method according to claim 1, characterized in that The loading of data and display according to the customized large-screen data information specifically includes: According to the customized large-screen data information, the data is loaded through lazy loading and displayed in the corresponding position.

8. A device for customizing a large visual screen, characterized in that: Applied to a large visual screen, the device comprises: The division and setting module is used to divide the visualization screen and set layout blocks and content components; A layout block list display module, connected to the division and setting module, is used to pop up a layout block list according to a first operation triggered by a user based on a design page of a visualization large screen; A selection and drag module connected to the layout block list display module, for responding to a user's selection and drag operation of a layout block in the layout block list, and customizing and displaying the corresponding layout block in the design page; A layout content association module, connected to the selection and dragging module, is used to receive the user's association operation for each layout block in the design page, associate each layout block with a corresponding content component, and fill in a component effect diagram showing the corresponding content component in the corresponding layout block; The custom display module is connected to the layout content association module and is used to load and display data according to the customized large-screen data information.

9. A device for customizing a large visual screen, characterized in that: The method comprises a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to implement the method for customizing a large visualization screen as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method for customizing a large visualization screen according to any one of claims 1 to 7 is implemented.

Images