Page editing method, device, computer-readable storage medium, and computer device

Abstract

The present application relates to a page editing method, apparatus, computer-readable storage medium, and computer device. The method includes: obtaining an initial dashboard layout corresponding to a dashboard page according to a pre-divided grid; obtaining an operation instruction for a target component and executing the operation instruction based on the initial dashboard layout; obtaining a grid layout of the components included in the dashboard page obtained after executing the operation instruction; and converting the grid layout into an absolute positioning layout to obtain a target dashboard layout of the dashboard page. The solution provided by the present application can execute an operation instruction for a target component according to the initial dashboard layout determined by the divided grid, and determine the target dashboard layout according to the absolute positioning layout of the components included in the dashboard page obtained after executing the operation instruction, reducing the complexity of the editing operation of the dashboard page.

Description

Technical Field

[0001] This application relates to the field of computer technologies, and particularly to a page editing method, apparatus, computer-readable storage medium, and computer device. Background Art

[0002] With the development of computer technologies, intelligent dashboards are increasingly widely used. An intelligent dashboard is a visualization tool for presenting data such as measurement information and business metrics; it can obtain data from a data source and display the obtained data through an interactive interface.

[0003] However, the measurement information and business metrics required by different enterprise users are often different, and enterprise users need to customize a suitable dashboard interaction interface according to their own needs. When the needs of enterprise users change, or new business metrics need to be added, developers need to change the layout of the dashboard interaction interface, which has the problem of high operation complexity. Summary of the Invention

[0004] Based on this, in view of the technical problem of high operation complexity in changing the interface layout of a dashboard, it is necessary to provide a page editing method, apparatus, computer-readable storage medium, and computer device.

[0005] A page editing method includes:

[0006] Obtaining an initial dashboard layout corresponding to a dashboard page according to a pre-divided grid;

[0007] Obtaining an operation instruction for a target component, and executing the operation instruction based on the initial dashboard layout;

[0008] Obtaining a grid layout of components included in the dashboard page obtained after executing the operation instruction;

[0009] Converting the grid layout into an absolute positioning layout to obtain a target dashboard layout of the dashboard page.

[0010] A page editing apparatus includes:

[0011] An initial layout obtaining module, configured to obtain an initial dashboard layout corresponding to a dashboard page according to a pre-divided grid;

[0012] An operation execution module, configured to obtain an operation instruction for a target component, and execute the operation instruction based on the initial dashboard layout;

[0013] A component layout obtaining module, configured to obtain a grid layout of components included in the dashboard page obtained after executing the operation instruction;

[0014] A target layout determination module, configured to convert the grid layout into an absolute positioning layout to obtain the target dashboard layout of the dashboard page.

[0015] A computer-readable storage medium stores a computer program, which when executed by a processor causes the processor to perform the following steps:

[0016] Obtain the initial dashboard layout corresponding to the dashboard page according to the pre-divided grid;

[0017] Obtain an operation instruction for a target component, and execute the operation instruction based on the initial dashboard layout;

[0018] Obtain the grid layout of the components included in the dashboard page obtained after executing the operation instruction;

[0019] Convert the grid layout into an absolute positioning layout to obtain the target dashboard layout of the dashboard page.

[0020] A computer device includes a memory and a processor. The memory stores a computer program, which when executed by the processor causes the processor to perform the following steps:

[0021] Obtain the initial dashboard layout corresponding to the dashboard page according to the pre-divided grid;

[0022] Obtain an operation instruction for a target component, and execute the operation instruction based on the initial dashboard layout;

[0023] Obtain the grid layout of the components included in the dashboard page obtained after executing the operation instruction;

[0024] Convert the grid layout into an absolute positioning layout to obtain the target dashboard layout of the dashboard page.

[0025] The above page editing method, device, computer-readable storage medium, and computer device can execute the operation instruction for the target component according to the initial dashboard layout determined by the divided grid, and determine the target dashboard layout according to the absolute positioning layout of the components included in the dashboard page obtained after executing the operation instruction, reducing the complexity of the editing operation of the dashboard page, eliminating the need for developers to modify the layout program of the dashboard page, and avoiding the problem of developers' modification not matching the needs of enterprise users. Description of the Drawings

[0026] Figure 1 It is an application environment diagram of the page editing method in an embodiment;

[0027] Figure 2 It is a flowchart of the page editing method in an embodiment;

[0028] Figure 3 Schematic diagram of the process for adjusting the positions of other components included in the dashboard page in one embodiment;

[0029] Figure 4 Schematic diagram of the process for executing operation instructions based on the initial dashboard layout in one embodiment;

[0030] Figure 5 Schematic diagram of the process for displaying the dashboard page in one embodiment;

[0031] Figure 6 Schematic diagram of the interface for editing a page in one embodiment;

[0032] Figure 7 Schematic diagram of the process for a page editing method in one embodiment;

[0033] Figure 8 Schematic diagram of the process for a page editing method in another embodiment;

[0034] Figure 9 Block diagram of the structure of a dashboard editor in one embodiment;

[0035] Figure 10 Block diagram of the structure of a page editing device in one embodiment;

[0036] Figure 11 Internal structure diagram of a computer device in one embodiment. Detailed implementation manners

[0037] In order to make the objectives, technical solutions and advantages of the present application clearer and more understandable, the present application will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0038] Figure 1 Schematic diagram of the application environment of a page editing method in one embodiment. Refer to Figure 1 , this page editing method is applied to a page editing system. The page editing system includes a terminal 110 and a server 120. The terminal 110 and the server 120 are connected through a network. The terminal 110 may specifically be a desktop terminal or a mobile terminal, and the mobile terminal may specifically be at least one of a mobile phone, a tablet computer, a laptop computer, etc. The server 120 may be implemented by an independent server or a server cluster composed of multiple servers.

[0039] As Figure 2 shown, in one embodiment, a page editing method is provided. This embodiment mainly takes this method applied to the terminal 110 in the above Figure 1 as an example for illustration. Refer toFigure 2 , the page editing method specifically includes the following steps:

[0040] S202. Obtain the initial dashboard layout corresponding to the dashboard page according to the pre-divided grid.

[0041] The pre-divided grid refers to the grid divided by the terminal for the dashboard page. Specifically, the terminal can pre-divide the dashboard page into multiple grids by setting the row height and column width, and then determine the arrangement of the components included in the dashboard page in the page based on the rows and columns of the grid. Optionally, the terminal can perform grid division and layout on the dashboard page based on technologies such as CSS (Cascading Style Sheets), Vue (progressive framework), or Angular (front-end framework) to achieve precise control and arrangement of the positions of elements in the web page.

[0042] The terminal obtains the initial dashboard layout corresponding to the dashboard page according to the pre-divided grid. Specifically, the terminal can determine the grid layout corresponding to each component included in the dashboard page according to the pre-divided grid, and obtain the initial dashboard layout composed of the grid layouts corresponding to each component respectively. For example, taking the upper left corner of the dashboard page as the origin and using the divided grid as the unit to represent the grid layout of the component, the grid layout of the component can be expressed as Array=(x, y, w, h, i), where i is the unique identifier corresponding to the component; w and h respectively represent the width and height of the component; x and y are the positions of the component in the column and row directions respectively; for example, Array=(1, 7, 2, 4, i1) means that the component with the identifier i1 is located in the 1st column, 7th row, with a width of 2 grid units and a height of 4 grid units.

[0043] In one embodiment, the row height and column width set by the terminal can be determined according to the sizes of the components included in the dashboard page. For example, the terminal can obtain and traverse the sizes of the components included in the dashboard page, and determine the row height and column width of the divided grid according to the size that appears most frequently; the terminal can also determine the row height and column width of the divided grid according to the smallest size, etc.

[0044] S204. Obtain the operation instruction for the target component, and execute the operation instruction based on the initial dashboard layout.

[0045] A component refers to an element that constitutes a dashboard page, and can include but is not limited to chart components, text box components, button components, etc. The target component is the component selected by the user obtained by the terminal. The target component can be a component included in the dashboard page, or a component obtained from the component library saved by the terminal.

[0046] The terminal can obtain an operation instruction for a target component. The operation instruction can include, but is not limited to, an addition instruction, a movement instruction, a scaling instruction, a deletion instruction, etc. The operation instruction can be generated by the user clicking a button on the display screen, or can be generated by the terminal according to the user's sliding operation on the display screen, or can also be generated by the terminal according to the user's operation on a peripheral component, etc. Among them, the peripheral component can include a keyboard, a mouse, etc. For example, the terminal can generate a scaling instruction according to the user's sliding operation on the mouse, or generate an operation instruction according to the user's operation on the shortcut keys of the keyboard, or generate a movement instruction according to the user's single-point sliding on the display screen, or generate a scaling instruction according to the user's two-point sliding operation on the display screen, etc.

[0047] The terminal executes the operation instruction based on the initial dashboard layout. Specifically, when the operation instruction includes a deletion instruction, the terminal can obtain the grid layout of the target component from the initial dashboard layout, delete the grid layout of the target component, so as not to display the target component on the dashboard page; when the operation instruction includes at least one of an addition instruction, a movement instruction, and a scaling instruction, the terminal can determine the target grid position of the target component according to the initial dashboard layout and the operation instruction, and then display the target component at the target grid position. Further, when the target grid position coincides with the positions of other components included in the dashboard page, the terminal can also adjust the positions of other components according to the initial dashboard layout to avoid the target component coinciding with other components.

[0048] S206. Obtain the grid layout of the components included in the dashboard page obtained after executing the operation instruction.

[0049] There are differences between the grid layout of the components included in the dashboard page obtained after executing the operation instruction and the initial dashboard layout. For example, when the operation instruction is a deletion instruction, the target component is not included in the dashboard page obtained after executing the operation instruction; when the operation instruction is a movement instruction, the grid layout of the target component in the dashboard page obtained after executing the operation instruction is different from that in the initial dashboard layout.

[0050] The terminal can obtain the grid layout of the components included in the dashboard page obtained after executing the operation instruction. Similarly, the terminal can traverse the dashboard page obtained after executing the operation instruction according to the preset divided grid to obtain the grid layout of the components included in the dashboard page obtained after executing the operation instruction.

[0051] S208. Convert the grid layout into an absolute positioning layout to obtain the target dashboard layout of the dashboard page.

[0052] Absolute positioning refers to page elements with the attributes of absolute or fixed. The position of an absolutely positioned element is determined relative to its parent element, and it is not affected by the content changes of the element, nor does it affect the layout of other elements.

[0053] The target dashboard layout includes the absolute positioning layout of the components included in the dashboard page obtained after adjustment. Specifically, the terminal can add positioning components outside the grid layout of the components, convert the grid layout corresponding to each component into an absolute positioning layout, and obtain the target dashboard layout composed of the absolute grid layouts corresponding to each component.

[0054] Further, after the terminal obtains the target dashboard layout, it can display the preview effect corresponding to the target dashboard layout, and send the target dashboard layout to the server according to the confirmation instruction for the preview effect, and the server saves the target dashboard layout corresponding to the dashboard page. Optionally, the terminal can also display the preview effect of the dashboard page after executing the operation instruction, obtain the grid layout of the components included in the dashboard page obtained after executing the operation instruction according to the confirmation instruction for the preview effect, convert the grid layout into an absolute positioning layout to obtain the target dashboard layout of the dashboard page, and then send the target dashboard layout to the server.

[0055] The above page editing method can obtain the initial dashboard layout corresponding to the dashboard page according to the preset divided grid, execute the operation instruction for the target component based on the initial dashboard layout, obtain the grid layout of the components included in the dashboard page obtained after executing the operation instruction, and convert the grid layout into an absolute positioning layout to obtain the target dashboard layout of the dashboard page. This page editing method can execute the operation instruction for the target component according to the initial dashboard layout determined by the divided grid, and determine the target dashboard layout according to the absolute positioning layout of the components included in the dashboard page obtained after executing the operation instruction, reducing the complexity of the editing operation of the dashboard page; it does not require developers to change the layout program of the dashboard page, and at the same time avoids the problem that the developers' changes do not match the needs of enterprise users. Moreover, by combining the absolute positioning method to determine the grid layout, the stability of page editing can be improved, and the components that overlap or are misaligned during page editing adjustment can be avoided.

[0056] In one embodiment, when the operation instruction includes at least one of a movement instruction and a zoom instruction, the process of executing the operation instruction based on the initial dashboard layout in the provided page editing method may include: obtaining the grid coordinates corresponding to the target component during the process of executing the operation instruction; adjusting the coordinate positions of other components included in the dashboard page according to the grid coordinates corresponding to the target component and the initial dashboard layout.

[0057] The movement indication refers to the indication of the position of the moving target component on the dashboard page. The zoom indication refers to the indication of enlarging or reducing the size of the target component on the dashboard page. Specifically, when the operation indication includes at least one of the movement indication and the zoom indication, the terminal can obtain the grid coordinates corresponding to the target component during the process of executing the operation indication in units of the grids divided on the dashboard page.

[0058] Furthermore, during the movement or zooming of the target component, there may be a situation where it collides with other components included in the dashboard page; the terminal can adjust the coordinate positions of other components included in the dashboard page according to the grid coordinates corresponding to the target component and the initial dashboard layout.

[0059] Specifically, the initial dashboard layout includes the grid layout corresponding to each component included in the dashboard page before the operation indication is executed. Furthermore, during the process of the terminal moving the target component according to the movement indication, the terminal can obtain the grid coordinates of the target component in real time and determine whether there is grid layout information that coincides with the grid coordinates in the initial dashboard layout. When there is grid layout information that coincides with the grid coordinates, the coordinate positions of other components included in the dashboard page are adjusted.

[0060] In one embodiment, when the terminal adjusts the positions of other components included in the dashboard page, it can be to adjust the position of the component to be processed corresponding to the grid layout information that coincides with the grid coordinates. For example, the component to be processed can be adjusted to below the last row of the dashboard page, or the position of the component to be processed can be moved down or to the right according to the width and height of the target component. Furthermore, to avoid the adjusted position of the component to be processed coinciding with other components after the position of the component to be processed is adjusted, the terminal can also adjust the positions of the component to be processed and the components in the dashboard page whose number of columns or rows is greater than the number of columns or rows corresponding to the component to be processed.

[0061] Optionally, when the terminal adjusts the positions of other components included in the dashboard page, it can display the position changes of each component on the dashboard page.

[0062] In this embodiment, the operation indication includes at least one of the movement indication and the zoom indication. The terminal can adjust the positions of other components included in the dashboard page according to the grid coordinates of the target component during the process of moving or zooming the target component according to the operation indication, which can avoid overlapping components in the dashboard page and improve the effect of component layout.

[0063] Figure 3 It is a schematic flow diagram for adjusting the positions of other components included in the dashboard page in one embodiment. As Figure 3As shown, in one embodiment, the process of adjusting the coordinate positions of other components included in the dashboard page according to the grid coordinates corresponding to the target component and the initial dashboard layout includes:

[0064] S302, taking the target component as a reference object.

[0065] S304, determining whether there is a component to be processed that collides with the reference object according to the grid coordinates corresponding to the reference object and the initial dashboard layout; if so, proceed to step S306, if not, end.

[0066] Specifically, the terminal can obtain the initial dashboard layout, which contains the layout information corresponding to each component included in the dashboard page; traverse the initial dashboard layout to detect whether there is a component to be processed that collides with the reference object.

[0067] In one embodiment, the terminal can perform collision detection based on the AABB (Axis-Aligned Bounding Box) algorithm. The AABB algorithm can determine whether two objects collide by judging whether there is no gap between any side of any two rectangles. Specifically, for any two components (x1, y1, w1, h1) and (x2, y2, w2, h2); if the following conditions are met: {((x1 < (x2 + w2)) & ((x1 + w1) > x2) & (y1 < (y2 + h2)) & ((y1 + h1) > y2)}, it is determined that the two collide. The terminal can detect whether there is a collision between the reference object and other components included in the initial dashboard layout, and use the components that collide with the reference object as the components to be processed.

[0068] S306, adjusting the coordinate position of the component to be processed according to the grid coordinates corresponding to the reference object.

[0069] The terminal adjusts the coordinate position of the component to be processed according to the grid coordinates corresponding to the reference object. Specifically, the terminal can vertically move the component to be processed downward according to the height corresponding to the reference object, or horizontally move the component to be processed to the right according to the width corresponding to the reference object, or move the component to be processed according to the size of the collision, etc., which is not limited here. For example, when the grid coordinates of the reference object are (x1, y1, w1, h1) and the coordinates of the component to be processed are (x2, y2, w2, h2), the terminal can adjust the coordinate position of the component to be processed to (x2, y1 + h1, w2, h2); it can also adjust the coordinate position of the component to be processed to (x1 + w1, y2, w2, h2), etc. The terminal can display the position adjustment of the component to be processed in real time.

[0070] S308, taking the component to be processed as a reference object and returning to step S304.

[0071] Since the position of the component to be processed is adjusted, there may be components in the initial dashboard layout that collide with the adjusted component to be processed. The terminal can use the component to be processed as a reference object and return to perform the operation in step S304. It can be understood that after returning to step S304, the grid coordinates corresponding to the reference object obtained by the terminal are the grid coordinates corresponding to the adjusted position of the component to be processed.

[0072] In this embodiment, it is possible to recursively detect whether there are components to be processed that collide with the reference object, and adjust the coordinate positions of the components to be processed that have collisions according to the grid coordinates of the reference object, so as to automatically adjust the positions of the collided components, avoid large position changes of the components on the dashboard page, and the operation is simple and easy to edit, ensuring that there are no collided components on the dashboard page.

[0073] In one embodiment, in the provided page editing method, when the operation instruction is a deletion instruction, the process of performing the operation instruction based on the initial dashboard layout may include: obtaining the grid layout corresponding to the target component according to the initial dashboard layout; deleting the grid layout corresponding to the target component.

[0074] The deletion instruction is an operation instruction for deleting the target component from the dashboard page. The target component targeted by the deletion instruction is located on the dashboard page. When the operation instruction is a deletion instruction, the terminal can obtain the grid layout corresponding to the target component from the initial dashboard layout and delete the grid layout corresponding to the target component. After deleting the grid layout corresponding to the target component, the target component will not be displayed on the dashboard page, and the dashboard page obtained after executing the deletion instruction does not include the target component.

[0075] In this embodiment, according to the deletion instruction for the target component, the grid layout corresponding to the target component can be deleted, and the target component is not displayed on the dashboard page, that is, the deletion operation of the components included in the dashboard page is realized.

[0076] Figure 4 It is a schematic flow diagram of performing an operation instruction based on the initial dashboard layout in an embodiment. As Figure 4 shown, in one embodiment, the process of performing an operation instruction based on the initial dashboard layout in the provided page editing method includes:

[0077] S402, when the operation instruction is an addition instruction, obtain the number of columns of the grids divided in the initial dashboard layout and the maximum height value of the components included in the dashboard layout in the column direction.

[0078] Among them, the width of the dashboard page is usually determined, and the number of columns can be determined according to the width of the dashboard page and the divided column width. The height of the dashboard page can be increased according to the size and height of the components to be laid out on the dashboard page; when displaying the dashboard page, the component content included in the dashboard page can be viewed through a sliding operation. The maximum height value refers to the maximum height value of the components included in the dashboard page in the column direction. Specifically, the height value of a component in the column direction can be determined by the number of rows and the height of the component. For example, a component with 10 rows and a height of 3 has a height value of 13 in the column direction; the terminal can traverse the components included in the dashboard page according to the initial dashboard layout to obtain the maximum height value among the heights of each component in the column direction.

[0079] Taking the grid layout of the components represented by taking the upper left corner of the dashboard page as the origin and the divided grid as the unit as Array=(x, y, w, h, i) as an example, if the layouts of the components with the largest number of rows on the dashboard page are respectively Array1=(1,7,2,4, i1), Array2=(4,8,2,2, i2), and Array3=(6,8,3,3, i3), then the heights of each component in the column direction are 11, 10, and 11 respectively; then the maximum height value in the column direction is 11.

[0080] S404, determine the target grid layout of the target component according to the number of columns and the maximum height value.

[0081] The grid layout is used to characterize the position of the component on the dashboard page. The target grid layout is the grid layout corresponding to the target component after the operation instruction is executed. In this embodiment, the dashboard page does not include the target component, and the target component is a component selected from other file locations. For example, the target component can be a component obtained from the server or a component obtained from the component library saved on the terminal, etc. Optionally, the terminal can display the components included in the component library on the dashboard page in ways such as embedding and floating layers, and obtain the operation instruction for the target component in the component library.

[0082] Specifically, the terminal can add a new page element in the dashboard page according to the number of columns and the maximum height value, and generate a target grid layout of the target component based on this page element. For example, when the number of divided columns is 10 and the maximum height value is 25, the terminal can add a page element with Item=(10, 25, 2, 2), that is, add a page element with a height and width of 2 grid cells in the 10th column and 25th row of the dashboard page, and then obtain the component identifier i4 of the target component, and generate a grid layout corresponding to the target component as Array4=(11, 25, 2, 2, i4). Among them, limited by the column width of the dashboard page, when the number of columns of the added page element exceeds the number of columns divided by the page, the page element will be arranged on a new line as a whole, that is, the terminal can add the target component in the first column of the last row of the dashboard page. Optionally, the position of the target component can also be not limited by a specific number of columns, that is, a page element can be added at any position below the last row to determine the target grid layout.

[0083] In one embodiment, the size of the new page element added by the terminal, that is, the height and width, can be set according to actual application requirements and will not be limited here. For example, it can be preset that both the width and height are 2, or the width is 4 and the height is 2. Optionally, when the target component is a chart component, the terminal can obtain the chart type corresponding to the chart component, obtain the preset width and height according to the chart type, and add a new page element in the dashboard page according to the preset width and height to generate a target grid layout of the target component. For example, when the chart type of the chart component is a pie chart, the preset size of the added page element is that both the width and height are 2; when the chart type of the chart component is a bar chart, the preset width of the added page element is 3 and the height is 2, etc.

[0084] S406, display the target component according to the target grid layout.

[0085] After the terminal determines the target grid layout corresponding to the target component, it can display the target component according to the target grid layout. That is, when an addition instruction for the target component can be obtained, the target grid layout of the target component is determined according to the initial dashboard layout, so as to display the target component in the dashboard page according to the target grid layout.

[0086] In this embodiment, the target grid layout for the target component can be determined according to the number of grid columns and the maximum height value divided by the initial dashboard layout, the target component is displayed according to the target grid layout, the dynamic effect of component addition can be displayed on the editing page, and the added target component can be prevented from overlapping with other components included in the dashboard page.

[0087] In one embodiment, the process of obtaining an operation instruction for a target component in the provided page editing method includes: obtaining the target component selected from the component library and generating an addition instruction for the target component.

[0088] The component library is a collection used to save components. Specifically, the terminal can display the components included in the component library. When receiving a selection instruction for the target component, it obtains the target component from the component library according to the selection instruction and generates an addition instruction for the target component. Among them, the selection instruction can be generated by the terminal according to the user's click operation, double-click operation, long-press operation, etc. on the target component.

[0089] In one embodiment, the provided page editing method further includes: obtaining the selected chart type, data source, and display parameters; generating a chart component corresponding to the chart type according to the data source and display parameters; and saving the chart component to the chart component library.

[0090] In this embodiment, the component library is a collection used to save chart components. Among them, the chart components included in the component library can be pre-stored in the terminal or chart components obtained by the terminal from the server. In this embodiment, the terminal can also add chart components to the component library.

[0091] The chart component includes parameters such as chart type, data source, and display parameters. The chart type can include line chart, bar chart, pie chart, area chart, scatter chart, dashboard relationship chart, etc., which are not limited here. The data source is used to determine the data to be displayed by the chart component. For example, the data source can be the number of service requests, the number of daily logged-in accounts, the distribution data of the account locations, etc. The display parameters are used to characterize the attributes of the chart component when it is displayed on the page. The display parameters can include parameters related to chart size, chart color, text size, text color, font, etc.

[0092] Specifically, the terminal can display a component editing page, and display the selectable chart type, data source, and display parameters on the component editing page; thereby obtaining the selected chart type, data source, and display parameters, generating a chart component corresponding to the chart type according to the selected data source and display parameters, and saving the generated chart component to the component library.

[0093] In this embodiment, the selected chart type, data source, and display parameters can be obtained, a chart component corresponding to the chart type can be generated according to the data source and display parameters, and the chart component can be saved to the component library. When editing the dashboard page, the chart component can be obtained from the component library and added to the dashboard page, that is, new chart components can be added as needed, which can meet the personalized needs of enterprise users.

[0094] In one embodiment, step S208 in the provided page editing method may include: obtaining a reference component in the dashboard page; converting the grid layout into an absolute positioning layout relative to the reference component to obtain a target dashboard layout.

[0095] The reference component is used to wrap the child elements as the parent element and serve as the positioning reference for the child elements. The reference component can be any component included in the dashboard page. Optionally, the terminal can also preset a rule for obtaining the reference component, and obtain the reference component from the dashboard page according to the preset rule. For example, any component with the smallest y value of the number of rows in the dashboard page can be used as the reference component, or the component with the smallest x value among the components with the smallest y value of the number of rows can be selected as the reference component, such as using the component with grid coordinates (x = 1, y = 1) as the reference component, etc.

[0096] The terminal converts the grid layout corresponding to the components included in the dashboard page obtained by executing the operation instruction into an absolute positioning layout relative to the reference component. Specifically, the terminal takes the grid layout of the reference component as the parent element of the grid layout of the components included in the dashboard page, that is, sets the components included in the dashboard page as absolute positioning elements relative to the reference component, and then the corresponding absolute positioning layout of the components can be obtained. Among them, the terminal can convert the components into an absolute positioning layout based on the CSS (Cascading Style Sheets) technology, or through Flex (Flexible Box, flexible layout), or Grid (grid layout).

[0097] In one embodiment, when the terminal converts the grid layout into an absolute positioning layout relative to the reference component, it may further include: converting the grid layout into a pixel layout, and converting the pixel layout into an absolute positioning layout corresponding to the reference component.

[0098] Specifically, the grid layout is determined based on the grids divided in the dashboard page. The divided grids contain multiple pixels. The terminal can obtain the number of pixel rows and pixel columns included in the divided grid cells; according to the number of pixel rows and pixel columns, the grid layout can be converted into the corresponding pixel layout, and the grid layout of the reference component can be converted into the corresponding pixel layout, and then the pixel layout corresponding to the components included in the dashboard page is converted into an absolute positioning layout according to the pixel layout of the reference component.

[0099] The target dashboard layout is composed of the layouts corresponding to each component included in the dashboard page obtained by executing the operation instruction. The terminal can generate the target dashboard layout according to the absolute positioning layout corresponding to each component.

[0100] In this embodiment, a reference component in the dashboard page can be obtained, and the grid layout corresponding to the components contained in the dashboard page obtained by executing the operation instructions can be converted into an absolute positioning layout relative to the reference component to obtain a target dashboard layout, so that the display of the components in the dashboard page is determined to be unchanged relative to the reference component, and will not be affected by changes in component content or other components, thereby ensuring the display effect and stability of the dashboard page.

[0101] Figure 5 FIG. 1 is a flow chart showing a dashboard page in one embodiment. Figure 5 As shown, in one embodiment, in the provided page editing method, after converting the grid layout to the absolute positioning layout to obtain the target dashboard layout of the dashboard page, the method further includes:

[0102] S502: Send the target dashboard layout to the server.

[0103] The server can be implemented as an independent server or a server cluster consisting of multiple servers. The server stores the data and layout corresponding to the dashboard page. When the terminal initiates a page viewing request to the server through the dashboard page link, the server can send the dashboard layout and data corresponding to the page link to the terminal.

[0104] S504, receiving chart data corresponding to the target dashboard layout sent by the server.

[0105] Chart data is the data displayed in the chart component. The chart data corresponding to the target dashboard layout includes the data corresponding to each chart component included in the target dashboard layout.

[0106] The terminal can obtain chart data from the server through the page link corresponding to the dashboard page, and the server can obtain the chart data corresponding to the target dashboard layout and send it to the terminal. Specifically, the server can obtain the data source corresponding to each chart component contained in the target dashboard layout, obtain the corresponding chart data from the third-party server according to the data source, and send the obtained chart data to the terminal. Among them, the third-party server is the server where the data source is located. For example, the third-party server can be a server corresponding to the enterprise operation system, a server corresponding to the customer service system, or a server corresponding to the information retrieval system, etc., which is not defined here.

[0107] S506, displaying chart data on the dashboard page according to the target dashboard layout.

[0108] The terminal displays chart data on the dashboard page according to the target dashboard layout. Specifically, the terminal renders the dashboard page according to the target dashboard layout, and displays the chart data corresponding to the data source according to the chart type corresponding to the chart component included in the target dashboard layout.

[0109] Specifically, step S506 may include: obtaining the chart type, data source, and display parameters corresponding to the components included in the target dashboard layout; obtaining target data corresponding to the data source of the component from the chart data; and displaying the target data according to the chart type and display parameters corresponding to the component.

[0110] The chart data sent by the server contains the data corresponding to each chart component included in the target dashboard layout. The terminal can obtain the corresponding target data according to the data source of the component, and display the target data according to the chart type of the component.

[0111] In this embodiment, it is possible to receive the chart data sent by the server, display the chart data on the dashboard page according to the target dashboard layout, and obtain the target data corresponding to the data source of the component from the chart data, and display the target data according to the chart type and display parameters of the component, that is, it is possible to implement the editing of the dashboard page and display data according to the edited dashboard.

[0112] Figure 6 It is a schematic diagram of the interface of the editing page in an embodiment. As Figure 6 shown, the editing page 600 includes a dashboard area 610 and a component library area 620. The dashboard area 610 is used to display the dashboard page; the component library area 620 is used to display the chart components included in the component library. The terminal can obtain the target component selected from the dashboard area 610 and add the target component to the dashboard area 610; it can also obtain the operation instruction for the target component displayed in the dashboard area 610 and perform operations such as moving, scaling, and deleting on the target component.

[0113] Figure 7 It is a schematic flowchart of the page editing method in an embodiment. As Figure 7 shown, in an embodiment, the provided page editing method includes:

[0114] S702, receiving a new or edit request for the dashboard page.

[0115] S704, determining whether the target component is included in the component library. If not, then enter S706; if not, then enter S714.

[0116] S706, receiving a target component addition request.

[0117] S708, Obtain the selected chart type, data source, and display parameters.

[0118] S710, Generate a target component corresponding to the chart type according to the data source and display parameters.

[0119] S712, Save the target component to the component library and enter S714.

[0120] S714, Obtain an operation instruction for the target component included in the component library, and execute the operation instruction based on the initial dashboard layout.

[0121] S716, Obtain the grid layout of the components included in the dashboard page obtained after executing the operation instruction, convert the grid layout to an absolute positioning layout to obtain the target dashboard layout of the dashboard page.

[0122] S718, Display a preview dashboard page of the target dashboard layout.

[0123] S720, Save the target dashboard layout and send the target dashboard layout to the server.

[0124] Figure 8 It is a flowchart of a page editing method in another embodiment. As Figure 8 shown, in one embodiment, the provided page editing method includes:

[0125] S802, Obtain the initial dashboard layout of the dashboard page.

[0126] S804, Receive an operation instruction for the target component. When the operation instruction includes at least one of a move operation and a scale operation, enter S806. When the operation instruction is an add operation, enter S810. When the operation instruction is a delete operation, enter S814.

[0127] S806, Obtain the grid coordinates for moving or scaling the target component.

[0128] S808, Determine whether there are pending components in collision according to the grid coordinates of the target component and the initial dashboard layout, adjust the coordinate positions of the pending components, and enter S816.

[0129] S810, Obtain the number of columns and the maximum height value divided according to the initial dashboard layout.

[0130] S812, Determine the target grid layout of the target component according to the number of columns and the maximum height value, and enter S1016.

[0131] S814, Traverse the initial dashboard layout, delete the grid layout corresponding to the target component, and enter S1016.

[0132] S816. After obtaining the operation instruction, obtain the target dashboard layout, and render the dashboard page according to the target dashboard layout.

[0133] Among them, the above page editing process can be implemented based on the binding events of html (HyperText Markup Language) language. For example, when the operation instruction is a move operation, step S802 can be executed by binding the onDragStert event, steps S806 and S808 can be executed by binding the onDrag event, and step S816 can be executed by binding the onDragStop event; when the operation instruction is a zoom operation, it can be implemented by binding the onResizeStart event, onResize event, onResizeStop event, etc., which is not limited here.

[0134] Figure 9 It is a structural block diagram of a dashboard editor in an embodiment. As Figure 9 shown, in an embodiment, a dashboard editor 900 is provided. The dashboard editor 900 includes a component editing unit 902, a component management unit 904, a dashboard editing unit 906, a dashboard management unit 908, and a data storage unit 910. The terminal realizes the editing of the chart component through the component editing unit 902, that is, selects and adjusts the data source, chart type, display parameters, etc. of the chart component; the chart components included in the component library can be managed through the component management unit 904, that is, chart components can be added, modified, deleted, queried, or previewed; the editing of the dashboard page can be realized through the dashboard editing unit 906, that is, operations such as adding, deleting, moving, and zooming components can be performed on the dashboard page; the dashboard page can be managed through the dashboard management unit 908, that is, operations such as deleting, modifying, adding, querying, and previewing the dashboard page are performed; the data storage unit 910 can be used to store the configuration data of the chart component and the dashboard page.

[0135] In an embodiment, the terminal can be deployed with a dashboard editor that can implement the above page editing method. Through this dashboard editor, the data source of the operation data of the operation system can be obtained from the server, a chart component can be generated according to the selected data source and chart type, and saved to the component library; the terminal can select the required chart components from the component library to create a dashboard page, and can also perform editing operations on the dashboard page to generate a dashboard page that can display the operation data of the security operation system.

[0136] Taking the application of this page editing method to a dashboard page for displaying the operation data of an enterprise security operation system as an example for illustration, the security operation system stores the data sources of the enterprise security operation data. The server can obtain the data sources from the security operation system and send them to the terminal. The terminal can obtain the selected data sources and generate corresponding chart components according to the chart type and display parameter configuration, and establish or edit the dashboard page based on the chart components to generate a dashboard page that can display the enterprise security operation data. When the dashboard page is requested through the terminal, the server can obtain the corresponding operation data from the security operation system according to the data sources of each chart component in the target dashboard layout corresponding to the dashboard page, and send the chart data of the dashboard page to the terminal to display the operation data on the terminal according to the target dashboard layout. Among them, the enterprise security operation data may include data related to request events, source IP (Internet Protocol Address), destination IP, source port, destination port, etc.

[0137] Figure 2-5 , Figures 7-8 are the schematic flowcharts of the page editing method in an embodiment. It should be understood that although Figure 2-5 , the various steps in the flowchart of Figures 7-8 are shown in sequence according to the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless there is a clear description in this article, the execution of these steps has no strict order limit, and these steps can be executed in other orders. Moreover, Figure 2-5 , at least a part of the steps in Figures 7-8 may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential either, but can be executed alternately or in turn with at least a part of other steps or sub-steps or stages of other steps.

[0138] Figure 10 is the structural block diagram of the page editing device in an embodiment. As Figure 10 shown, in an embodiment, the provided page editing device 1000 includes:

[0139] An initial layout obtaining module 1002, configured to obtain the initial dashboard layout corresponding to the dashboard page according to the pre-divided grid.

[0140] An operation execution module 1004, configured to obtain the operation instruction for the target component and execute the operation instruction based on the initial dashboard layout.

[0141] A component layout obtaining module 1006, configured to obtain the grid layout of the components included in the dashboard page obtained after executing the operation instruction.

[0142] A target layout determination module 1008 is configured to convert a grid layout into an absolute positioning layout to obtain a target dashboard layout of the dashboard page.

[0143] The above page editing device can execute an operation instruction for a target component according to the initial dashboard layout determined by the divided grid, and determine the target dashboard layout according to the absolute positioning layout of the components included in the dashboard page obtained after executing the operation instruction, reducing the complexity of the dashboard page editing operation; there is no need for a developer to change the layout program of the dashboard page, and at the same time, the problem that the developer's change does not match the enterprise user's requirements is avoided. Moreover, by combining the method of absolute positioning to determine the grid layout, the stability of page editing can be improved, and the components that overlap or are misaligned during page editing adjustment can be avoided.

[0144] In one embodiment, the operation execution module 1004 can also be configured to, when the operation instruction includes at least one of a movement instruction and a scaling instruction, obtain the grid coordinates corresponding to the target component during the execution of the operation instruction; adjust the coordinate positions of other components included in the dashboard page according to the grid coordinates corresponding to the target component and the initial dashboard layout.

[0145] In this embodiment, when the terminal moves or scales the target component according to at least one of the movement instruction and the scaling instruction, it can adjust the positions of other components included in the dashboard page according to the grid coordinates of the target component and the initial dashboard layout, which can avoid overlapping components in the dashboard page and improve the effect of component layout.

[0146] In one embodiment, the operation execution module 1004 can also be configured to use the target component as a reference object; determine whether there is a to-be-processed component that collides with the reference object according to the grid coordinates corresponding to the reference object and the initial dashboard layout; when it is determined that there is a to-be-processed component that collides with the reference object, adjust the coordinate position of the to-be-processed component according to the grid coordinates corresponding to the reference object; use the to-be-processed component as the reference object, and return to execute the operation of determining whether there is a to-be-processed component that collides with the reference object according to the grid coordinates corresponding to the reference object and the initial dashboard layout.

[0147] In this embodiment, it is possible to recursively detect whether there is a to-be-processed component that collides with the reference object, and adjust the positions of the to-be-processed components that collide according to the grid coordinates of the reference object, which can automatically adjust the positions of the collided components, avoid large position changes of the components in the dashboard page, and the operation is simple and editable, ensuring that there are no collided components in the dashboard page.

[0148] In one embodiment, the operation execution module 1004 may also be configured to, when the operation instruction is a deletion instruction, obtain the grid layout corresponding to the target component according to the initial dashboard layout; and delete the grid layout corresponding to the target component.

[0149] In this embodiment, according to the deletion instruction for the target component, the grid layout corresponding to the target component can be deleted, and the target component is not displayed on the dashboard page, that is, the deletion operation of the components included in the dashboard page is implemented.

[0150] In one embodiment, the operation execution module 1004 may also be configured to, when the operation instruction is an addition instruction, obtain the number of columns of the grids divided in the initial dashboard layout and the maximum height value of the components included in the dashboard layout in the column direction; determine the target grid layout of the target component according to the number of columns and the maximum height value; and display the target component according to the target grid layout.

[0151] In this embodiment, the target grid layout for the target component can be determined according to the number of grid columns and the maximum height value divided in the initial dashboard layout, and the target component is displayed according to the target grid layout, so that the dynamic effect of component addition can be displayed on the editing page, and the added target component can be prevented from overlapping with other components included in the dashboard page.

[0152] In one embodiment, the operation execution module 1004 may also be configured to obtain the target component selected from the component library and generate an operation instruction for the target component; the page editing method further includes a component generation module 1010, and the component generation module 1010 is configured to obtain the selected chart type, data source, and display parameters; generate a chart component corresponding to the chart type according to the data source and the display parameters; and save the chart component to the component library.

[0153] In this embodiment, the selected chart type, data source, and display parameters can be obtained, a chart component corresponding to the chart type can be generated according to the data source and the display parameters, and the chart component is saved to the component library. When editing the dashboard page, the chart component can be obtained from the component library and added to the dashboard page, that is, chart components can be newly added as needed, which can meet the personalized needs of enterprise users.

[0154] In one embodiment, the target layout determination module 1008 may also be configured to obtain a reference component in the dashboard page; and convert the grid layout into an absolute positioning layout relative to the reference component to obtain the target dashboard layout.

[0155] In this embodiment, a reference component in the dashboard page can be obtained, and the grid layout corresponding to the components included in the dashboard page obtained by performing an operation instruction is converted into an absolute positioning layout relative to the reference component, so as to obtain a target dashboard layout, ensuring that the display of the components in the dashboard page is determined relative to the reference component and remains unchanged, not affected by changes in the component content, and not affecting other components, thereby guaranteeing the display effect and stability of the dashboard page.

[0156] In one embodiment, the provided page editing method further includes a page display module 1012. The page display module 1012 can also be used to send the target dashboard layout to the server; receive the chart data corresponding to the target dashboard layout sent by the server; and display the chart data on the dashboard page according to the target dashboard layout.

[0157] In this embodiment, the chart data sent by the server can be received, and the chart data is displayed on the dashboard page according to the target dashboard layout, that is, the editing of the dashboard page can be realized, and data display can be performed according to the edited dashboard page.

[0158] Figure 11 The internal structure diagram of a computer device in one embodiment is shown. The computer device can specifically be Figure 1 the terminal 110 in. As Figure 11 shown, the computer device includes a processor, a memory, a network interface, an input device, and a display screen connected through a system bus. Among them, the memory includes a non-volatile storage medium and an internal memory. The non-volatile storage medium of the computer device stores an operating system and can also store a computer program. When the computer program is executed by the processor, the processor can implement the page editing method. The internal memory can also store a computer program. When the computer program is executed by the processor, the processor can execute the page editing method. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen. The input device of the computer device can be a touch layer covering the display screen, or a button, a trackball, or a touchpad provided on the housing of the computer device, or an external keyboard, touchpad, or mouse, etc.

[0159] Those skilled in the art can understand that Figure 11 the structure shown in is only a block diagram of some structures related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine some components, or have different component arrangements.

[0160] In one embodiment, the page editing device provided by the present application can be implemented in the form of a computer program, and the computer program can be in Figure 11Run on the computer device shown. In the memory of the computer device, various program modules that make up the page editing device can be stored. For example, Figure 10 the initial layout acquisition module, operation execution module, component layout acquisition module, and target layout determination module shown. The computer program composed of each program module enables the processor to execute the steps in the page editing method of each embodiment of the present application described in this specification.

[0161] For example, Figure 11 the computer device shown can execute step S202 through the initial layout acquisition module in the page editing device as Figure 10 shown. The computer device can execute step S204 through the operation execution module. The computer device can execute step S206 through the component layout acquisition module. The computer device can execute step S208 through the target layout determination module.

[0162] In one embodiment, a computer device is provided, including a memory and a processor. When the computer program stored in the memory is executed by the processor, the processor is caused to execute the steps of the above page editing method. The steps of the page editing method here can be the steps in the page editing methods of the above various embodiments.

[0163] In one embodiment, a computer-readable storage medium is provided, storing a computer program. When the computer program is executed by the processor, the processor is caused to execute the steps of the above page editing method. The steps of the page editing method here can be the steps in the page editing methods of the above various embodiments.

[0164] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The program can be stored in a non-volatile computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to a memory, storage, database, or other medium used in the embodiments provided in the present application can include non-volatile and / or volatile memories. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and Rambus dynamic RAM (RDRAM), etc.

[0165] The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity of description, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered as the scope recorded in this specification.

[0166] The above embodiments only represent several implementation manners of the present application. The description is relatively specific and detailed, but it should not be construed as a limitation on the patent scope of the present application. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present application, several modifications and improvements can still be made, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application should be subject to the appended claims.

Claims

1. A page editing method, comprising: Obtaining an initial dashboard layout corresponding to a dashboard page according to a pre-divided grid; Obtaining an operation instruction for a target component, and executing the operation instruction based on the initial dashboard layout, including: when the operation instruction includes at least one of a movement instruction and a scaling instruction, taking the target component as a reference object, and automatically adjusting the coordinate positions of collided components through recursive collision detection; Obtaining a grid layout of components included in the dashboard page obtained after executing the operation instruction; Obtaining a reference component in the dashboard page, and converting the grid layout into an absolute positioning layout relative to the reference component to obtain a target dashboard layout of the dashboard page; Sending the target dashboard layout to a server; Receiving chart data obtained by the server from a third-party server and sent respectively according to data sources corresponding to each chart component included in the target dashboard layout; Displaying the chart data on the dashboard page according to the target dashboard layout.

2. The method according to claim 1, wherein The automatically adjusting the coordinate positions of collided components through recursive collision detection with the target component as a reference object includes: Obtaining grid coordinates corresponding to the target component during the execution of the operation instruction; Taking the target component as a reference object, and automatically adjusting the coordinate positions of other components included in the dashboard page according to the grid coordinates corresponding to the target component and the initial dashboard layout through recursive collision detection for the coordinate positions of collided components.

3. The method according to claim 2, characterized in that, The automatically adjusting the coordinate positions of other components included in the dashboard page according to the grid coordinates corresponding to the target component and the initial dashboard layout through recursive collision detection with the target component as a reference object includes: Taking the target component as a reference object; Determining whether there is a to-be-processed component that collides with the reference object according to the grid coordinates corresponding to the reference object and the initial dashboard layout; When it is determined that there is a to-be-processed component that collides with the reference object, adjusting the coordinate position of the to-be-processed component according to the grid coordinates corresponding to the reference object; Taking the to-be-processed component as a reference object, and returning to execute the operation of determining whether there is a to-be-processed component that collides with the reference object according to the grid coordinates corresponding to the reference object and the initial dashboard layout.

4. The method according to claim 3, wherein The method further includes: Ending the execution of the operation instruction when there is no to-be-processed component that collides with the reference object.

5. The method according to claim 1, wherein The executing the operation instruction based on the initial dashboard layout includes: When the operation instruction is a deletion instruction, obtaining a grid layout corresponding to the target component according to the initial dashboard layout; Deleting the grid layout corresponding to the target component.

6. The method according to claim 1, characterized in that, The executing the operation instruction based on the initial dashboard layout includes: When the operation instruction is an addition instruction, obtaining the number of columns of the grid divided in the initial dashboard layout and the maximum height value of the components included in the dashboard layout in the column direction; Determining a target grid layout of the target component according to the number of columns and the maximum height value. Display the target component according to the target grid layout.

7. The method according to claim 5, characterized in that, The obtaining of the operation instruction for the target component includes: Obtain the target component selected from the component library and generate an addition instruction for the target component; The method further includes: Obtain the selected chart type, data source, and display parameters; Generate a chart component corresponding to the chart type according to the data source and the display parameters; Save the chart component to the component library.

8. A page editing device, characterized in that, The device includes: An initial layout obtaining module, configured to obtain an initial dashboard layout corresponding to the dashboard page according to a pre-divided grid; An operation execution module, configured to obtain an operation instruction for the target component and execute the operation instruction based on the initial dashboard layout; and when the operation instruction includes at least one of a movement instruction and a zoom instruction, take the target component as a reference object and automatically adjust the coordinate positions of the collided components through recursive collision detection; A component layout obtaining module, configured to obtain the grid layout of the components included in the dashboard page obtained after executing the operation instruction; A target layout determining module, configured to obtain a reference component in the dashboard page, convert the grid layout into an absolute positioning layout relative to the reference component, so as to obtain the target dashboard layout of the dashboard page; A page display module, configured to send the target dashboard layout to the server; receive the chart data respectively obtained from a third-party server and sent by the server according to the data sources corresponding to the respective chart components included in the target dashboard layout; and display the chart data on the dashboard page according to the target dashboard layout.

9. The page editing device according to claim 8, wherein The operation execution module is further configured to obtain the grid coordinates corresponding to the target component during the execution of the operation instruction; take the target component as a reference object, and automatically adjust the coordinate positions of the other components included in the dashboard page according to the grid coordinates corresponding to the target component and the initial dashboard layout through recursive collision detection.

10. The page editing device according to claim 9, characterized in that, The operation execution module is further configured to take the target component as a reference object; determine whether there is a to-be-processed component that collides with the reference object according to the grid coordinates corresponding to the reference object and the initial dashboard layout; when it is determined that there is a to-be-processed component that collides with the reference object, adjust the coordinate position of the to-be-processed component according to the grid coordinates corresponding to the reference object; take the to-be-processed component as a reference object, and return to execute the operation of determining whether there is a to-be-processed component that collides with the reference object according to the grid coordinates corresponding to the reference object and the initial dashboard layout.

11. The page editing device according to claim 10, characterized in that, The operation execution module is further configured to end the execution of the operation instruction when there is no to-be-processed component that collides with the reference object.

12. The page editing device according to claim 8, wherein The operation execution module is further configured to, when the operation instruction is a deletion instruction, obtain the grid layout corresponding to the target component according to the initial dashboard layout; and delete the grid layout corresponding to the target component.

13. The page editing device according to claim 8, wherein The operation execution module is further configured to, when the operation instruction is an addition instruction, obtain the number of columns of the grid divided in the initial dashboard layout and the maximum height value of the components included in the dashboard layout in the column direction; determine the target grid layout of the target component according to the number of columns and the maximum height value; and display the target component according to the target grid layout.

14. The page editing device according to claim 12, characterized in that, The operation execution module is further configured to obtain a target component selected from the component library and generate an addition instruction for the target component. The device further includes a component generation module, configured to obtain a selected chart type, data source, and display parameters; generate a chart component corresponding to the chart type according to the data source and the display parameters; and save the chart component to the component library.

15. A computer-readable storage medium storing a computer program, which when executed by a processor causes the processor to perform the steps of the method according to any one of claims 1 to 7.

16. A computer device including a memory and a processor, where the memory stores a computer program, and when the computer program is executed by the processor, it causes the processor to perform the steps of the method according to any one of claims 1 to 7.

17. A computer program product comprising computer instructions, characterized in that, The computer instructions, when executed by a processor, implement the method according to any one of claims 1 to 7.

Images