Detailed Description
The present application will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present application more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the application.
FIG. 1 is a diagram of an application environment for a page editing method in one embodiment. Referring to fig. 1, the 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 be a desktop terminal or a mobile terminal, and the mobile terminal may be at least one of a mobile phone, a tablet computer, a notebook computer, and the like. The server 120 may be implemented as a stand-alone server or as a server cluster composed of a plurality of servers.
As shown in FIG. 2, in one embodiment, a page editing method is provided. The present embodiment is mainly exemplified by the application of the method to the terminal 110 in fig. 1. Referring to fig. 2, the page editing method specifically includes the steps of:
S202, acquiring an initial instrument board layout corresponding to the instrument board page according to the pre-divided grids.
The pre-divided grid refers to a grid of the terminal divided on the dashboard page. Specifically, the terminal can divide the dashboard page into a plurality of grids in advance through the set row and column widths, and further determine the arrangement of components contained in the dashboard page in the page based on the rows and columns of the grids. Optionally, the terminal may grid and layout the dashboard page based on CSS (CASCADING STYLE SHEETS, cascading style sheet) technology, vue (progressive frame) technology, or Angular (front end frame) technology, to implement accurate control and arrangement of the positions of elements in the web page.
The terminal obtains an initial dashboard layout corresponding to the dashboard page according to the pre-divided grids, specifically, the terminal can determine grid layouts corresponding to all components contained in the dashboard page according to the pre-divided grids, and obtain an initial dashboard layout composed of the grid layouts corresponding to all components. For example, taking the upper left corner of the dashboard page as the origin, the divided grid is taken as a unit to represent the grid layout of the component, where the grid layout of the component may be represented as array= (x, y, w, h, i), where i is a 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, i 1) represents that the component with identifier i1 is located in the 7 th row of column 1, the width is 2 grid units, and the height is 4 grid units.
In one embodiment, the row and column widths set by the terminal may be determined based on the size of the components contained in the dashboard page. For example, the terminal may acquire the size of the component included in the traverse dashboard page, determine the row and column widths of the divided grids according to the size with the largest number of occurrences, determine the row and column widths of the divided grids according to the smallest size, and the like.
S204, acquiring an operation instruction of the target component, and executing the operation instruction based on the initial instrument panel layout.
Components refer to elements that make up a dashboard page and may include, but are not limited to, chart components, text box components, button components, and the like. The target component is a component selected by a user and acquired by the terminal. The target component may be a component contained in a dashboard page, or may be a component obtained from a component library stored in the terminal.
The terminal may obtain an indication of operation for the target component. The operation indication may include, but is not limited to, an add indication, a move indication, a zoom indication, a delete indication, and the like. The operation instruction may be generated by the user by clicking a button on the display screen, may be generated by the terminal according to a sliding operation of the user on the display screen, may be generated by the terminal according to an operation of the user on the peripheral component, or the like. Wherein the peripheral components may include a keyboard, a mouse, and the like. For example, the terminal may generate a zoom instruction according to a sliding operation of the user on the mouse, may generate an operation instruction according to an operation of the user on a shortcut key of the keyboard, may generate a movement instruction according to a single-point sliding operation of the user on the display screen, or generate a zoom instruction according to a double-point sliding operation of the user on the display screen.
The terminal executes an operation instruction based on the initial dashboard layout, specifically, when the operation instruction comprises a deletion instruction, the terminal can acquire 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, and when the operation instruction comprises 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 further display the target component at the target grid position. Further, when the target grid position is overlapped with the positions of other components contained in the dashboard page, the terminal can adjust the positions of the other components according to the initial dashboard layout so as to avoid overlapping of the target components with the other components.
S206, acquiring the grid layout of the components contained in the dashboard page obtained after the operation instruction is executed.
The grid layout of the components contained in the dashboard page obtained after the operation instruction is executed is different from 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 the operation instruction is executed, and when the operation instruction is a movement instruction, the grid layout of the target component in the dashboard page obtained after the operation instruction is executed is different from the initial dashboard layout.
The terminal may execute the grid layout of the components contained in the dashboard page obtained after the operation instruction. Similarly, the terminal may traverse the dashboard page obtained after the operation instruction is performed according to the preset divided grid, and obtain the grid layout of the components included in the dashboard page obtained after the operation instruction is performed.
S208, converting the grid layout into an absolute positioning layout to obtain a target dashboard layout of the dashboard page.
Absolute positioning refers to a page element with an attribute of absolute or fixed. The position of the absolute positioning element relative to the parent element is determined, so that the absolute positioning element is not influenced by the content change of the element, and the layout mode of other elements is not influenced.
The target dashboard layout includes an absolute positioning layout of the components included in the adjusted dashboard page. Specifically, the terminal may add a positioning component outside the grid layout of the component, and convert the grid layout corresponding to each component into an absolute positioning layout, so as to obtain a target instrument panel layout formed by the absolute grid layout corresponding to each component.
Further, after the terminal obtains the target dashboard layout, the preview effect corresponding to the target dashboard layout can be displayed, the target dashboard layout is sent to the server according to the confirmation indication of the preview effect, and the server stores the target dashboard layout corresponding to the dashboard page. Optionally, the terminal may also display a preview effect of the dashboard page after the operation instruction is executed, obtain, according to the confirmation instruction of the preview effect, a grid layout of components included in the dashboard page obtained after the operation instruction is executed, convert the grid layout into an absolute positioning layout, so as to obtain a target dashboard layout of the dashboard page, and then send the target dashboard layout to the server.
According to the page editing method, the initial instrument board layout corresponding to the instrument board page can be obtained according to the preset divided grids, the operation instruction for the target component is executed based on the initial instrument board layout, the grid layout of the component contained in the instrument board page obtained after the operation instruction is executed is obtained, and the grid layout is converted into the absolute positioning layout, so that the target instrument board layout of the instrument board page is obtained. The page editing method can execute the operation instruction aiming at the target component according to the initial instrument board layout determined by the divided grids, and determine the target instrument board layout according to the absolute positioning layout of the components contained in the instrument board page obtained after the operation instruction is executed, so that the complexity of the editing operation of the instrument board page is reduced, a developer is not required to change the layout program of the instrument board page, and the problem that the developer is not matched with the enterprise user requirement in changing is avoided. And the grid layout is determined by combining an absolute positioning mode, so that the stability of page editing can be improved, and components which are overlapped or misplaced in page editing adjustment can be avoided.
In one embodiment, when the operation instruction includes at least one of a movement instruction and a zoom instruction, the provided page editing method may include the steps of acquiring grid coordinates corresponding to the target component in the process of executing the operation instruction, and adjusting 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.
The movement indication refers to an indication of the position of the movement target component in the dashboard page. The zoom instruction refers to an instruction to enlarge or reduce the size of the target component in the dashboard page. Specifically, when the operation instruction includes at least one of a movement instruction and a zoom instruction, the terminal may acquire grid coordinates corresponding to the target component in the process of executing the operation instruction according to the grid divided by the dashboard page as a unit.
Further, in the moving or zooming process of the target component, collision exists with other components contained in the dashboard page, and the terminal can adjust the coordinate positions of the other components contained in the dashboard page according to the grid coordinates corresponding to the target component and the initial dashboard layout.
Specifically, the initial dashboard layout includes a grid layout corresponding to each component included in the dashboard page before the operation instruction is executed. Furthermore, in the process that the terminal moves the target component according to the movement instruction, the terminal can acquire the grid coordinates of the target component in real time, determine whether grid layout information overlapped with the grid coordinates exists in the initial instrument panel layout, and adjust the coordinate positions of other components contained in the instrument panel page when the grid layout information overlapped with the grid coordinates exists.
In an embodiment, the terminal may adjust the positions of other components included in the dashboard page, which may be the positions of the components to be processed corresponding to the grid layout information overlapped with the grid coordinates, for example, the components to be processed may be adjusted to a position below the last line of the dashboard page, or the positions of the components to be processed may be moved down or moved right according to the width and the height of the target component. Further, in order to avoid that the position of the component to be processed is overlapped with other components after the position of the component to be processed is adjusted, the terminal may also adjust the positions of the component to be processed and the component with the column number or the line number greater than the column number or the line number corresponding to the component to be processed in the dashboard page.
Optionally, when the terminal adjusts the positions of other components contained in the dashboard page, the position change of each component can be displayed in the dashboard page.
In this embodiment, the operation instruction includes at least one of a movement instruction and a scaling instruction, and the terminal may adjust the positions of other components included in the dashboard page according to the grid coordinates of the target component in the process of moving or scaling the target component according to the operation instruction, so as to avoid overlapping components in the dashboard page, and improve the effect of component layout.
FIG. 3 is a flow diagram of adjusting the position of other components included in a dashboard page, in one embodiment. As shown in fig. 3, 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:
s302, taking the target component as a reference object.
S304, determining whether a component to be processed collides with the reference object exists or not according to the grid coordinates corresponding to the reference object and the initial instrument board layout, if so, proceeding to step S306, otherwise, ending.
Specifically, the terminal may acquire an initial dashboard layout, where the initial dashboard layout includes layout information corresponding to each component included in the dashboard page, and traverse the initial dashboard layout to detect whether there is a component to be processed that collides with the reference object.
In one embodiment, the terminal may perform collision detection based on an AABB (Axis-Aligned Bounding Bos) algorithm, which may determine whether any two rectangles collide by determining whether any one side of the two rectangles is not spaced. Specifically, for any two components (x 1, y1, w1, w 1), (x 2, y2, w2, h 2), if { ((x 1< (x 2+w2)) & ((x 1+w1) > x 2) & (y1 < (y2+h2)) & ((y1+h1) > y 2) }, then the two components are determined to have collision, the terminal can detect whether the collision exists between the reference object and other components contained in the original instrument panel layout, and take the component having the collision with the reference object as the component to be processed.
S306, adjusting the coordinate position of the component to be processed according to the grid coordinates corresponding to the reference object.
The terminal adjusts the coordinate position of the component to be processed according to the grid coordinate corresponding to the reference object, specifically, the terminal may move the component to be processed vertically downward according to the height corresponding to the reference object, or may move the component to be processed horizontally right according to the width corresponding to the reference object, or move the component to be processed according to the size of the collision, and the like, which is not limited herein. For example, when the grid coordinates of the reference object are (x 1, y1, w1, h 1) and the coordinates of the component to be processed are (x 2, y2, w2, h 2), the terminal may adjust the coordinate position of the component to be processed to (x 2, y1+h1, w2, h 2), may also adjust the coordinate position of the component to be processed to (x1+w1, y2, w2, h 2), and so on. The terminal can display the position adjustment of the component to be processed in real time.
S308, taking the component to be processed as a reference object, and returning to the step S304.
Because the position of the component to be processed is adjusted, there may be a component that collides with the adjusted component to be processed in the initial dashboard layout, the terminal may use the component to be processed as a reference object, and return to execute the operation of step S304, and it may be understood that, after returning to step S304, the grid coordinates corresponding to the reference object obtained by the terminal are grid coordinates corresponding to the adjusted position of the component to be processed.
In this embodiment, whether a component to be processed collides with the reference object exists can be recursively detected, the coordinate position of the component to be processed, which collides with the reference object, can be adjusted according to the grid coordinates of the reference object, the position of the collided component can be automatically adjusted, the larger position variation of the component in the dashboard page is avoided, the operation is simple and the editing is performed, and the fact that the collided component does not exist in the dashboard page can be ensured.
In one embodiment, the page editing method provided in the embodiment, when the operation instruction is a deletion instruction, the process of executing the operation instruction based on the initial dashboard layout may include acquiring a grid layout corresponding to the target component according to the initial dashboard layout, and deleting the grid layout corresponding to the target component.
The delete indication is an operation indication for deleting the target component from the dashboard page. The target component for which the delete indication is directed is located in the dashboard page. When the operation indication is a deletion indication, the terminal may acquire a 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 dashboard page does not display the target component, and the dashboard page obtained after executing the deletion instruction does not contain the target component.
In this embodiment, according to the deletion instruction of the target component, the grid layout corresponding to the target component is deleted, and the target component is not displayed on the dashboard page, that is, the deletion operation of the component included in the dashboard page is implemented.
FIG. 4 is a flow diagram of an embodiment of performing an indication of an operation based on an initial dashboard layout. As shown in fig. 4, in one embodiment, a page editing method is provided in which a process of performing an operation instruction based on an initial dashboard layout includes:
S402, when the operation instruction is the addition instruction, the number of columns of the grids divided in the initial dashboard layout and the maximum height value of the components contained in the dashboard layout in the column direction are obtained.
The width of the dashboard page is generally determined, and the number of columns may be determined according to the width of the dashboard page and the divided column widths. The height of the dashboard page can be increased according to the size and the height of the components which are required to be laid out by the dashboard page, and when the dashboard page is displayed, the content of the components contained in the dashboard page can be checked through sliding operation. The maximum height value refers to the maximum height value of the component contained in the dashboard page in the column direction. Specifically, the height value of the component in the column direction may be determined by using the number of rows and the height of the component, for example, the number of rows is 10, the height value of the component with the height of 3 in the column direction is 13, and the terminal may traverse the component included in the dashboard page according to the initial dashboard layout to obtain the maximum height value of each component in the height of the component in the column direction.
Taking the upper left corner of the dashboard page as the origin, the grid layout of the components is represented by the unit of grid, and the grid layout of the components is represented by the example of array= (x, y, w, h, i), if the layout of the component with the largest row number in the dashboard page is respectively Array 1= (1, 7,2,4, i 1), array 2= (4, 8,2, i 2), array 3= (6, 8,3, i 3), the heights of the components in the column direction are respectively 11, 10, 11, and the maximum height value in the column direction is 11.
S404, determining the target grid layout of the target component according to the column number and the maximum height value.
The grid layout is used to characterize the location of the component in 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 may be a component obtained from a server, or may be a component obtained from a component library stored in the terminal, or the like. Optionally, the terminal may display the components contained in the component library on the dashboard page in an embedded manner, a floating layer manner, or the like, and obtain an operation instruction for a target component of the component library.
Specifically, the terminal may add a new page element to the dashboard page according to the column number and the maximum height value, and generate a target grid layout of the target component according to the page element. For example, when the number of divided columns is 10 and the maximum height value is 25, the terminal may add a page element of item= (10,25,2,2), that is, the 10 th column 25 line of the dashboard page adds page elements of 2 grid units in height and width, so as to obtain the component identifier i4 of the target component, and generate the grid layout corresponding to the target component as Array 4= (11, 25,2, i 4). When the column number of the added page elements exceeds the column number of the page division due to the column width limitation of the dashboard page, the page elements are arranged as a whole in one row, i.e. the terminal can add the target component in the first column of the last row of the dashboard page. Alternatively, the location of the target component may not be limited by a specific number of columns, i.e., page elements may be added at any location below the last row to determine the target grid layout.
In one embodiment, the size, i.e. the height and the width, of the new page element added by the terminal may be set according to the actual application requirements, which is not limited herein. For example, it may be preset that the width and the height are both 2, or the width is 4 and the height is 2. Optionally, when the target component is a chart component, the terminal may acquire a chart type corresponding to the chart component, acquire a preset width and a preset height according to the chart type, and add a new page element in the dashboard page according to the preset width and the preset height, so as 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 size and height of the preset added page element are both 2, and when the chart type of the chart component is a bar chart, the width and height of the preset added page element are 3, 2, etc.
S406, displaying the target components according to the target grid layout.
After the terminal determines the target grid layout corresponding to the target component, the target component may be displayed according to the target grid layout. I.e., when an add-on indication for a target component is obtained, determining a target grid layout of the target component according to the initial dashboard layout, thereby displaying the target component according to the target grid layout in the dashboard page.
In this embodiment, the target grid layout for the target component may be determined according to the grid column number and the maximum height value of the initial dashboard layout division, and the target component may be displayed according to the target grid layout, so as to display the dynamic effect added by the component in the editing page, and avoid the added target component overlapping with other components included in the dashboard page.
In one embodiment, the process of obtaining the operation indication of the target component in the page editing method comprises the steps of obtaining the target component selected from a component library and generating the addition indication of the target component.
A component library is a collection used to hold components. Specifically, the terminal may display the components contained in the component library, and when receiving the selection indication for the target component, acquire the target component from the component library according to the selection indication, and generate an addition indication of the target component. The selection indication can be generated by the terminal according to a single click operation, a double click operation, a long press operation or the like of the user on the target component.
In one embodiment, the page editing method further comprises the steps of obtaining the selected chart type, the data source and the display parameters, generating a chart component corresponding to the chart type according to the data source and the display parameters, and storing the chart component in a chart component library.
In this embodiment, component libraries are used to save collections of chart components. The chart components contained in the component library can be prestored by the terminal, and can also be chart components acquired by the terminal from the server. In this embodiment, the terminal may also add a diagramming component in the component library.
The chart component includes parameters such as chart type, data source, and presentation parameters. The chart types may include, but are not limited to, a line graph, bar graph, pie graph, area graph, scatter graph, dashboard relationship graph, and the like. The data source is used to determine the data to be presented by the chart component. For example, the data source may be the number of requests of the service, the number of daily login accounts, the distribution data of the address locations where the accounts are located, and so on. The presentation parameters are used to characterize the properties of the chart component at the time of page presentation. The presentation parameters may include parameters related to chart size, chart color, text size, text color, font, etc.
The terminal can display an assembly editing page, display selectable chart types, data sources and display parameters on the assembly editing page, acquire the selected chart types, data sources and display parameters, generate chart assemblies corresponding to the chart types according to the selected data sources and display parameters, and store the generated chart assemblies in an assembly library.
In this embodiment, the selected chart type, the data source and the presentation parameter may be obtained, the chart component corresponding to the chart type is generated according to the data source and the presentation parameter, and the chart component is saved to the component library. When the dashboard page is edited, the chart components can be obtained from the component library and added to the dashboard page, namely, the chart components can be newly added according to the needs, and the personalized requirements of enterprise users can be met.
In one embodiment, the method for editing a page provided in step S208 may include obtaining a reference component in a dashboard page, and converting the grid layout to an absolute positioning layout relative to the reference component to obtain a target dashboard layout.
The reference component is used for wrapping the child element as a parent element and is used for positioning and referencing the child element. The reference component may be any component contained in the dashboard page. Optionally, the terminal may also preset an acquisition rule of the reference component, and acquire the reference component from the dashboard page according to the preset acquisition rule. For example, any component with the smallest line number y value in the dashboard page may be used as a reference component, or a component with the smallest x value in the components with the smallest line number y value may be selected as a reference component, for example, a component with grid coordinates (x=1, y=1) may be used as a reference component, and so on.
The terminal converts the grid layout corresponding to the component contained in the dashboard page obtained by executing the operation instruction into an absolute positioning layout corresponding to the reference component, specifically, the terminal uses the grid layout of the reference component as a parent element of the grid layout of the component contained in the dashboard page, namely, the component contained in the dashboard page is set as the absolute positioning element corresponding to the reference component, and then the absolute positioning layout corresponding to the component can be obtained. The terminal may be based on css cascading style sheet technology, or may convert the component into an absolute positioning layout through flex (Flexible Box) or grid (grid layout).
In one embodiment, the terminal converts the grid layout to an absolute positioning layout relative to the reference component, and may further include converting the grid layout to a pixel layout and converting the pixel layout to an absolute positioning layout corresponding to the reference component.
The grid layout is determined based on a grid divided by a dashboard page, a plurality of pixels are contained in the divided grid, a terminal can acquire the number of rows and the number of columns of pixels contained in the divided grid cells, the grid layout can be converted into a corresponding pixel layout according to the number of rows and the number of columns of pixels, the grid layout of a reference component is converted into a corresponding pixel layout, and the pixel layout corresponding to the component contained in the dashboard page is converted into an absolute positioning layout according to the pixel layout of the reference component.
The target dashboard layout is composed of a layout corresponding to each component contained in the dashboard page obtained by executing the operation instruction. The terminal may generate a target dashboard layout from the absolute positioning layout corresponding to each component.
In this embodiment, a reference component in the dashboard page may be obtained, and a grid layout corresponding to a component included in the dashboard page obtained by performing an operation instruction is converted into an absolute positioning layout corresponding to the reference component, so as to obtain a target dashboard layout, so that the display of the component in the dashboard page is unchanged relative to the determination of the reference component, and is not affected by the change of the component content, and is not affected by other components, and the display effect and stability of the dashboard page may be ensured.
FIG. 5 is a flow diagram illustrating dashboard pages in one embodiment. As shown in fig. 5, in one embodiment, after converting the grid layout into the absolute positioning layout to obtain the target dashboard layout of the dashboard page, the method further includes:
s502, the target instrument board layout is sent to a server.
The server may be implemented as a stand-alone server or as a server cluster composed of a plurality of servers. The server stores data and layout corresponding to the dashboard pages, and when the terminal initiates a page viewing request to the server through the dashboard page links, the server can send the dashboard layout and data corresponding to the page links to the terminal.
S504, receiving chart data corresponding to the target instrument board layout sent by the server.
Chart data is data for presentation at a chart component. The chart data corresponding to the target instrument panel layout comprises data corresponding to each chart component contained in the target instrument panel layout.
The terminal can acquire the chart data from the server through the page links corresponding to the dashboard pages, and the server can acquire the chart data corresponding to the target dashboard layout and send the chart data to the terminal. Specifically, the server may acquire a data source corresponding to each chart component included in the target dashboard layout, acquire corresponding chart data from the third-party server according to the data source, and send the acquired chart data to the terminal. The third party server may be a server corresponding to the enterprise operation system, a server corresponding to the customer service system, a server corresponding to the information retrieval system, or the like, which is not specified herein.
S506, displaying the chart data on the dashboard page according to the target dashboard layout.
The terminal displays the chart data on the instrument panel page according to the target instrument panel layout, specifically, the terminal renders the instrument panel page according to the target instrument panel layout, displays the chart data corresponding to the data source according to the chart type corresponding to the chart component according to the data source corresponding to the chart component contained in the target instrument panel layout.
Specifically, step S506 may include obtaining a chart type, a data source and a presentation parameter corresponding to a component included in the target dashboard layout, obtaining target data corresponding to the data source of the component from the chart data, and presenting the target data according to the chart type and the presentation parameter corresponding to the component.
The chart data sent by the server comprise data corresponding to each chart component contained in the target instrument board layout, and the terminal can acquire corresponding target data according to the data sources of the components and display the target data according to the chart types of the components.
In this embodiment, the chart data sent by the server may be received, the chart data may be displayed on the dashboard page according to the layout of the target dashboard, and the target data corresponding to the data source of the component may be obtained from the chart data, and the target data may be displayed according to the chart type and the display parameter of the component, so that editing of the dashboard page may be implemented, and data display may be performed according to the edited dashboard.
FIG. 6 is a schematic diagram of an interface for editing a page in one embodiment. As shown in fig. 6, the editing page 600 includes a dashboard area 610 and a component library area 620. Dashboard area 610 is used to present dashboard pages and component library area 620 is used to present chart components contained in the component library. The terminal may acquire a target component selected from the dashboard area 610, and add the target component to the dashboard area 610, or may acquire an operation instruction for the target component displayed in the dashboard area 610, and perform operations such as moving, zooming, deleting, and the like on the target component.
FIG. 7 is a flow chart of a page editing method in one embodiment. As shown in fig. 7, in one embodiment, a page editing method is provided that includes:
s702, receiving a new or editing request of the dashboard page.
S704, determining whether the component library contains the target component, if not, entering S706, and if not, entering S714.
S706, receiving a target component adding request.
S708, acquiring the selected chart type, the data source and the presentation parameters.
S710, generating a target component corresponding to the chart type according to the data source and the display parameters.
S712, the target component is saved to the component library, and the process proceeds to S714.
S714, acquiring an operation instruction for a target component contained in the component library, and executing the operation instruction based on the initial instrument panel layout.
S716, acquiring the grid layout of the components contained in the dashboard page obtained after the operation instruction is executed, and converting the grid layout into an absolute positioning layout to obtain the target dashboard layout of the dashboard page.
S718, displaying a preview dashboard page of the target dashboard layout.
S720, saving the target instrument board layout and sending the target instrument board layout to the server.
Fig. 8 is a flowchart of a page editing method in another embodiment. As shown in fig. 8, in one embodiment, a page editing method is provided that includes:
s802, acquiring an initial dashboard layout of a dashboard page.
S804, an operation instruction for the target component is received, and when the operation instruction includes at least one of a move operation and a zoom operation, S806 is entered, when the operation instruction is an add operation, S810 is entered, and when the operation instruction is a delete operation, S814 is entered.
S806, grid coordinates of movement or scaling of the target component are acquired.
S808, determining whether a collision component to be processed exists according to the grid coordinates of the target component and the initial instrument panel layout, adjusting the coordinate position of the component to be processed, and entering S816.
S810, obtaining the number of columns and the maximum height value according to the initial instrument board layout.
S812, determining the target grid layout of the target component according to the column number and the maximum height value, and proceeding to S1016.
S814, traversing the initial dashboard layout, deleting the grid layout corresponding to the target component, and proceeding to S1016.
S816, obtaining a target instrument board layout after the execution operation instruction is obtained, and rendering an instrument board page according to the target instrument board layout.
The above page editing process may be implemented based on a binding event in html (HyperText Markup Language ) language, for example, when the operation is indicated as a mobile operation, step S802 may be performed by a binding onDragStert event, steps S806 and S808 may be performed by a binding onDrag event, step S816 may be performed by a binding onDragStop event, and when the operation is indicated as a zoom operation, implementation may be performed by a binding onResizeStart event, onResize event, onResizeStop event, etc., which are not limited herein.
FIG. 9 is a block diagram of an instrument panel editor in one embodiment. As shown in fig. 9, in one embodiment, a dashboard editor 900 is provided, the dashboard editor 900 comprising 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 can edit the chart components through the component editing unit 902, namely, select and adjust the data sources, chart types, display parameters and the like of the chart components, can manage the chart components contained in the component library through the component management unit 904, namely, can add, modify, delete, inquire or preview the chart components, can edit the dashboard pages through the dashboard editing unit 906, namely, can perform operations of adding, deleting, moving, zooming components and the like on the dashboard pages, can manage the dashboard pages through the dashboard management unit 908, namely, perform operations of deleting, modifying, adding, inquiring and previewing the dashboard pages, and the like, and the data storage unit 910 can be used for storing configuration data of the chart components and the dashboard pages.
In one embodiment, the terminal can be deployed with a dashboard editor capable of realizing the page editing method, a data source of operation data of the operation system can be obtained from the server through the dashboard editor, chart components are generated according to the selected data source and chart types and are stored in the component library, the terminal can select needed chart components from the component library to establish a dashboard page, and editing operation can be performed on the dashboard page to generate the dashboard page capable of displaying the operation data of the safe operation system.
Taking the page editing method as an example for illustrating the dashboard page for displaying the operation data of the enterprise safety operation system, the safety operation system stores the data source of the enterprise safety operation data, the server can acquire the data source from the safety operation system and issue the data source to the terminal, the terminal can acquire the selected data source, generate the corresponding chart component according to the chart type and the display parameter configuration, and establish or edit the dashboard page according to the chart component so as to generate the dashboard page capable of displaying the enterprise safety operation data. When the dashboard page is requested by the terminal, the server can acquire 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 so as to display the operation data at the terminal according to the target dashboard layout. The enterprise security operations data may include, among other things, data related to the request event, source IP (Internet Protocol Address ), destination IP, source port, destination port, etc.
FIGS. 2-5,7-8 are flow diagrams of a page editing method in one embodiment. It should be understood that, although the steps in the flowcharts of fig. 2-5,7-8 are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps of fig. 2-5,7-8 may include multiple sub-steps or stages that are not necessarily performed at the same time, but may be performed at different times, nor does the order in which the sub-steps or stages are performed necessarily occur sequentially, but may be performed alternately or alternately with other steps or at least a portion of the sub-steps or stages of other steps.
Fig. 10 is a block diagram showing the structure of a page editing apparatus in one embodiment. As shown in fig. 10, in one embodiment, a page editing apparatus 1000 is provided, including:
the initial layout obtaining module 1002 is configured to obtain an initial dashboard layout corresponding to a dashboard page according to a pre-divided grid.
The operation execution module 1004 is configured to obtain an operation instruction for the target component, and execute the operation instruction based on the initial dashboard layout.
The component layout obtaining module 1006 is configured to obtain a grid layout of components included in the dashboard page obtained after the operation instruction is executed.
The target layout determining module 1008 is configured to convert the grid layout into an absolute positioning layout to obtain a target dashboard layout of the dashboard page.
The page editing device can execute the operation instruction aiming at the target component according to the initial dashboard layout determined by the divided grids, and determine the target dashboard layout according to the absolute positioning layout of the components contained in the dashboard page obtained after the operation instruction is executed, so that the complexity of the dashboard page editing operation is reduced, a layout program of the dashboard page does not need to be changed by a developer, and the problem that the developer is not matched with the enterprise user requirement in changing is avoided. And the grid layout is determined by combining an absolute positioning mode, so that the stability of page editing can be improved, and components which are overlapped or misplaced in page editing adjustment can be avoided.
In one embodiment, the operation execution module 1004 may be further configured to, when the operation instruction includes at least one of a movement instruction and a zoom instruction, obtain grid coordinates corresponding to the target component in the process of executing the operation instruction, and adjust 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.
In this embodiment, when the terminal moves or zooms the target component according to at least one of the movement instruction and the zoom instruction, the position of other components included in the dashboard page is adjusted according to the grid coordinates of the target component and the initial dashboard layout, so that the overlapping components in the dashboard page can be avoided, and the effect of the component layout is improved.
In one embodiment, the operation execution module 1004 may be further configured to use the target component as a reference object, determine whether a component to be processed that collides with the reference object exists according to the grid coordinates and the initial dashboard layout corresponding to the reference object, adjust the coordinate position of the component to be processed according to the grid coordinates corresponding to the reference object when it is determined that the component to be processed that collides with the reference object exists, and return to execute the operation of determining whether the component to be processed that collides with the reference object exists according to the grid coordinates and the initial dashboard layout corresponding to the reference object by using the component to be processed as the reference object.
In this embodiment, whether a component to be processed collides with the reference object exists can be recursively detected, the position of the component to be processed, which collides with the reference object, can be adjusted according to the grid coordinates of the reference object, the position of the collided component can be automatically adjusted, the larger position variation of the component in the dashboard page is avoided, the operation is simple and the collision-free component in the dashboard page can be ensured.
In one embodiment, the operation execution module 1004 may be further configured to obtain, when the operation instruction is a deletion instruction, a grid layout corresponding to the target component according to the initial dashboard layout, and delete the grid layout corresponding to the target component.
In this embodiment, according to the deletion instruction of the target component, the grid layout corresponding to the target component is deleted, and the target component is not displayed on the dashboard page, that is, the deletion operation of the component included in the dashboard page is implemented.
In one embodiment, the operation execution module 1004 may be further configured to obtain a number of columns of the grid divided in the initial dashboard layout and a maximum height value of the components included in the dashboard layout in the column direction when the operation instruction is the addition instruction, determine a target grid layout of the target components according to the number of columns and the maximum height value, and display the target components according to the target grid layout.
In this embodiment, the target grid layout for the target component may be determined according to the grid column number and the maximum height value of the initial dashboard layout division, and the target component may be displayed according to the target grid layout, so as to display the dynamic effect added by the component in the editing page, and avoid the added target component overlapping with other components included in the dashboard page.
In one embodiment, the operation execution module 1004 may be further configured to obtain a target component selected from the component library and generate an operation instruction for the target component, and the page editing method further includes a component generation module 1010, where the component generation module 1010 is configured to obtain a selected chart type, a data source, and a presentation parameter, generate a chart component corresponding to the chart type according to the data source and the presentation parameter, and store the chart component to the component library.
In this embodiment, the selected chart type, the data source and the presentation parameter may be obtained, the chart component corresponding to the chart type is generated according to the data source and the presentation parameter, and the chart component is saved to the component library. When the dashboard page is edited, the chart components can be obtained from the component library and added to the dashboard page, namely, the chart components can be newly added according to the needs, and the personalized requirements of enterprise users can be met.
In one embodiment, the target layout determination module 1008 may also be used to obtain reference components in a dashboard page, and convert the grid layout to an absolute positioning layout relative to the reference components to obtain the target dashboard layout.
In this embodiment, a reference component in the dashboard page may be obtained, and a grid layout corresponding to a component included in the dashboard page obtained by performing an operation instruction is converted into an absolute positioning layout corresponding to the reference component, so as to obtain a target dashboard layout, so that the display of the component in the dashboard page is unchanged relative to the determination of the reference component, and is not affected by the change of the component content, and is not affected by other components, and the display effect and stability of the dashboard page may be ensured.
In one embodiment, the provided page editing method further includes a page display module 1012, where the page display module 1012 can be further configured to send the target dashboard layout to the server, receive 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.
In this embodiment, the chart data sent by the server may be received, and the chart data may be displayed on the dashboard page according to the target dashboard layout, that is, editing of the dashboard page may be implemented, and data display may be performed according to the edited dashboard page.
FIG. 11 illustrates an internal block diagram of a computer device in one embodiment. The computer device may be specifically the terminal 110 of fig. 1. As shown in fig. 11, the computer device includes a processor, a memory, a network interface, an input device, and a display screen connected by a system bus. The memory includes a nonvolatile storage medium and an internal memory. The non-volatile storage medium of the computer device stores an operating system, and may also store a computer program that, when executed by a processor, causes the processor to implement a page editing method. The internal memory may also store a computer program that, when executed by the processor, causes the processor to perform the page editing method. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, the input device of the computer equipment can be a touch layer covered on the display screen, can also be keys, a track ball or a touch pad arranged on the shell of the computer equipment, and can also be an external keyboard, a touch pad or a mouse and the like.
It will be appreciated by those skilled in the art that the structure shown in FIG. 11 is merely a block diagram of some of the structures associated with the present inventive arrangements and is not limiting of the computer device to which the present inventive arrangements may be applied, and that a particular computer device may include more or fewer components than shown, or may combine some of the components, or have a different arrangement of components.
In one embodiment, the page editing apparatus provided by the present application may be implemented in the form of a computer program that is executable on a computer device as shown in fig. 11. The memory of the computer device may store therein various program modules constituting the page editing apparatus, such as an initial layout acquisition module, an operation execution module, a component layout acquisition module, and a target layout determination module shown in fig. 10. The computer program constituted by the respective program modules causes the processor to execute the steps in the page editing method of the respective embodiments of the present application described in the present specification.
For example, the computer device shown in fig. 11 may execute step S202 by the initial layout acquisition module in the page editing apparatus as shown in fig. 10. The computer device may execute step S204 by operating the execution module. The computer device may perform step S206 through the component layout acquisition module. The computer device may perform step S208 by the target layout determination module.
In one embodiment, a computer device is provided that includes a memory and a processor, the memory storing a computer program that, when executed by the processor, causes the processor to perform the steps of the page editing method described above. The steps of the page editing method here may be the steps in the page editing method of the above-described respective embodiments.
In one embodiment, a computer readable storage medium is provided, storing a computer program which, when executed by a processor, causes the processor to perform the steps of the page editing method described above. The steps of the page editing method here may be the steps in the page editing method of the above-described respective embodiments.
Those skilled in the art will appreciate that the processes implementing all or part of the methods of the above embodiments may be implemented by a computer program for instructing relevant hardware, and the program may be stored in a non-volatile computer readable storage medium, and the program may include the processes of the embodiments of the methods as above when executed. Any reference to memory, storage, database, or other medium used in embodiments provided herein may include non-volatile and/or volatile memory. The nonvolatile 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 a variety of forms such as Static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double Data Rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (SYNCHLINK) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), among others.
The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the description.
The foregoing examples illustrate only a few embodiments of the application, which are described in detail and are not to be construed as limiting the scope of the application. It should be noted that it will be apparent to those skilled in the art that several variations and modifications can be made without departing from the spirit of the application, which are all within the scope of the application. Accordingly, the scope of protection of the present application is to be determined by the appended claims.