Gantt chart display method and system and related product

Abstract

The embodiment of the invention discloses a Gantt chart display method and system and a related product, and belongs to the technical field of Gantt charts. In the embodiment of the invention, a task bar control corresponding to a task is displayed in a Gantt chart page; in response to a touch operation on the task bar control, determining an associated task corresponding to the task, and obtaining Gantt chart configuration data of the associated task; based on the touch operation and Gantt chart configuration data of the associated task, rendering a task bar of the associated task in a Gantt chart page, and obtaining and displaying a Gantt chart of the associated task; the Gantt chart of the associated task can be quickly displayed on the same Gantt chart page; and when the Gantt chart of the associated task needs to be checked, the corresponding Gantt chart page does not need to be switched to search for the Gantt chart of the associated task, so that the Gantt chart of the associated task can be quickly checked.

Description

Technical Field

[0001] The embodiments of the present application relate to the technical field of Gantt charts, and in particular to a display method, system and related products of a Gantt chart. Background Art

[0002] A Gantt chart, also known as a bar chart, is a bar chart that shows how the internal relationships of projects, schedules, and other time-related systems progress over time.

[0003] In the existing Gantt chart page, tasks are generally displayed on the left and the Gantt chart is displayed on the right. In the Gantt chart, each bar represents a task. When there are many Gantt charts for tasks, users can compare and view the Gantt charts of different tasks by scrolling the page. A task may have associated tasks with related relationships. The Gantt chart page corresponding to the associated task generally contains the Gantt charts of other non-associated tasks. When the user needs to view the Gantt chart of the associated task, the page needs to be switched to the corresponding Gantt chart page and the Gantt chart of the associated task needs to be found from the corresponding Gantt chart page. It is cumbersome for users to view the Gantt chart of the associated task. Summary of the invention

[0004] The embodiments of the present application provide a Gantt chart display method, system and related products, which can facilitate quick viewing of Gantt charts of associated tasks.

[0005] The present application provides a method for displaying a Gantt chart, including:

[0006] Display the task bar control corresponding to the task in the Gantt chart page;

[0007] In response to a touch operation on the task bar control, determining an associated task corresponding to the task, and acquiring Gantt chart configuration data of the associated task;

[0008] Based on the touch operation and the Gantt chart configuration data of the associated task, a task bar of the associated task is rendered in the Gantt chart page, and the Gantt chart of the associated task is obtained and displayed.

[0009] The embodiment of the present application also provides a Gantt chart display system, including:

[0010] A display unit is used to display the task bar control corresponding to the task in the Gantt chart page;

[0011] an acquisition unit, configured to determine, in response to a touch operation on the task bar control, an associated task corresponding to the task, and acquire Gantt chart configuration data of the associated task;

[0012] A rendering unit is used to render the task bar of the associated task in the Gantt chart page based on the touch operation and the Gantt chart configuration data of the associated task, and obtain and display the Gantt chart of the associated task.

[0013] The embodiment of the present application also provides an electronic device, including: a processor and a memory;

[0014] The processor is configured to communicate with the memory and execute instructions in the memory to implement the above method.

[0015] An embodiment of the present application further provides a readable storage medium, wherein the readable storage medium stores computer instructions, and when the computer instructions are executed by a processor, the method described above is implemented.

[0016] An embodiment of the present application further provides a computer program product, which includes computer instructions, and when the computer instructions are executed by a processor, the method described above is implemented.

[0017] It can be seen from the above technical solutions that the embodiments of the present application have the following advantages:

[0018] In an embodiment of the present application, a task bar control corresponding to a task is displayed in a Gantt chart page; in response to a touch operation on the task bar control, an associated task corresponding to the task is determined, and the Gantt chart configuration data of the associated task is obtained; based on the touch operation and the Gantt chart configuration data of the associated task, a task bar of the associated task is rendered in the Gantt chart page, and a Gantt chart of the associated task is obtained and displayed.

[0019] It can be seen that in the embodiment of the present application, in response to the touch operation of the task bar control, based on the Gantt chart configuration data of the associated task, the Gantt chart of the associated task can be quickly displayed on the same Gantt chart page; when it is necessary to view the Gantt chart of the associated task, there is no need to switch to the corresponding Gantt chart page to find the Gantt chart of the associated task, which facilitates quick viewing of the Gantt chart of the associated task. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the present application. For ordinary technicians in this field, other drawings can also be obtained based on these drawings.

[0021] Figure 1 A schematic diagram of a communication architecture disclosed in an embodiment of the present application;

[0022] Figure 2 A display flow chart of a Gantt chart disclosed in an embodiment of the present application;

[0023] Figure 3 A flowchart of multiple task controls for configuring a task disclosed in an embodiment of the present application;

[0024] Figure 4 A flowchart of a penetration view associated task disclosed in an embodiment of the present application;

[0025] Figure 5 A flowchart of a split-screen viewing associated task disclosed in an embodiment of the present application;

[0026] Figure 6 A flowchart of adjusting the time of a task bar control disclosed in an embodiment of the present application;

[0027] Figure 7 A schematic diagram of a Gantt chart configuration window disclosed in an embodiment of the present application;

[0028] Figure 8 A schematic diagram of multiple task controls disclosed in an embodiment of the present application;

[0029] Fig. 9 A schematic diagram of a mouse touch event disclosed in an embodiment of the present application;

[0030] Fig.10 A schematic diagram of a penetration view upstream task disclosed in an embodiment of the present application;

[0031] Fig.11 A schematic diagram of a downstream task of penetrating viewing disclosed in an embodiment of the present application;

[0032] Fig.12 A schematic diagram of a split-screen view of downstream tasks disclosed in an embodiment of the present application;

[0033] Fig.13 A schematic diagram of adjusting the time of a task bar control disclosed in an embodiment of the present application;

[0034] Fig.14 A schematic diagram of a prompt for an associated task disclosed in an embodiment of the present application;

[0035] Fig.15 A schematic diagram of viewing a current view in a split screen according to an embodiment of the present application;

[0036] Fig.16 A schematic diagram of the structure of a Gantt chart display system disclosed in an embodiment of the present application;

[0037] Fig.17 A schematic diagram of the structure of an electronic device disclosed in an embodiment of the present application. DETAILED DESCRIPTION

[0038] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings. The described embodiments should not be regarded as limiting the present application. All other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of this application.

[0039] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims and drawings of the present application are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0040] In the following description, similar expressions such as "a specific implementation" or "a specific example" are involved, which describe a subset of all possible embodiments, but it is understood that "a specific implementation" or "a specific example" can be the same subset or different subsets of all possible embodiments, and can be combined with each other without conflict. In the following description, the term multiple refers to at least two. The numerical value mentioned in this application reaches a threshold value (if any), which may include the case where the former is greater than the latter in some specific examples.

[0041] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein are only for the purpose of describing the embodiments of this application and are not intended to limit this application.

[0042] For ease of understanding and explanation, before further describing the embodiments of the present application in detail, the communication architecture of the present application will be briefly described.

[0043] like Figure 1As shown, the communication architecture includes a server 101 and at least one front-end device 102, the server 101 is in communication connection with the front-end device 102, the front-end device 102 can be a smart phone, a tablet computer, a laptop, a desktop computer, a smart car, etc.; the server 101 stores task data of multiple tasks, such as the task name, start time and end time of the task, etc. The front-end device 102 can obtain the task data of the task through the server 101, and display the Gantt chart of the task on the Gantt chart page based on the task data of the task. When using the Gantt chart, the user can add a task bar to the Gantt chart by adding a task and configuring the time.

[0044] Currently, a task may have associated tasks with an associated relationship. The Gantt chart page corresponding to the associated task generally contains Gantt charts of other non-associated tasks. When a user needs to view the Gantt chart of an associated task, he needs to switch to the corresponding Gantt chart page and find the Gantt chart of the associated task from the corresponding Gantt chart page. It is cumbersome for users to view the Gantt chart of associated tasks. Therefore, the embodiment of the present application discloses a Gantt chart display method, which can facilitate quick viewing of the Gantt chart of associated tasks, such as Figure 2 As shown, the specific steps are as follows:

[0045] 201. Display the task bar control corresponding to the task in the Gantt chart page.

[0046] In an embodiment of the present application, a task bar control corresponding to a task can be displayed in a Gantt chart page of a front-end device. It is understandable that the Gantt chart page includes a list area and a Gantt chart area, and the task identifier of the task is recorded in the list area through a table on the vertical axis; the time is recorded through the horizontal axis in the Gantt chart area, and the duration of the task (including the start time and the end time) is represented by a task bar (horizontal bar). That is, the Gantt chart of the task is displayed in the Gantt chart page, and the Gantt chart contains the task bar control corresponding to the task.

[0047] In the Gantt chart page, you can display task bar controls for multiple tasks, such as a task bar control for multiple tasks included in a project, where the duration of each task can be divided into multiple time periods, each time period corresponds to a task bar control, that is, you can display multiple task bar controls for tasks.

[0048] 202. In response to a touch operation on the task bar control, determine an associated task corresponding to the task, and obtain Gantt chart configuration data of the associated task.

[0049] It is understandable that the task bar control can receive a touch operation, such as touching the screen corresponding to the task bar control, or touching with a mouse; in response to the touch operation on the task bar control, the associated task corresponding to the task is determined, and the Gantt chart configuration data of the associated task is obtained. Among them, the touch operation on the task bar control can be to trigger the viewing of the Gantt chart of the associated task by clicking the task bar control, or to drag the task bar control to adjust the time of the task bar control. The associated task is a task that has an associated relationship in composition, and the associated task can be an upstream task or a downstream task, wherein the upstream task is composed of multiple downstream tasks.

[0050] Based on the touch operation of the task bar control, the selected task bar control can be determined, the associated task corresponding to the task can be determined, and the Gantt chart configuration data of the associated task can be obtained. It can be understood that the Gantt chart configuration data is the configuration data of the task bar contained in the Gantt chart area corresponding to the associated task; for example, when the associated task includes multiple associated tasks, the Gantt chart configuration data of the associated task is the configuration data of the task bar of multiple associated tasks. Among them, the configuration data of the task bar includes: the start time and end time of the task bar, the height of the task bar, the color of the task bar, etc., which are not specifically limited here. When an associated task contains multiple task bars, the start time and end time of each task bar in the associated task can be pre-configured.

[0051] The front-end device may determine the associated task, send the task identifier of the associated task to the server, and query and return the task data and Gantt chart configuration data of the associated task through the server; the front-end device may also send the task identifier of the task to the server, and query and return the task data and Gantt chart configuration data of the associated task on the server. The task data of the associated task includes the task identifier, start time, end time and other task information.

[0052] 203. Based on the touch operation and the Gantt chart configuration data of the associated task, a task bar of the associated task is rendered in the Gantt chart page, and the Gantt chart of the associated task is obtained and displayed.

[0053] In an embodiment of the present application, based on the touch operation and the Gantt chart configuration data of the associated task, a task bar of the associated task can be rendered in the Gantt chart page, and the Gantt chart of the associated task can be obtained and displayed. The task bar of the associated task is rendered in the Gantt chart page as follows: the task data of the associated task is filled in the list area, and the task bar of the associated task is rendered in the Gantt chart area corresponding to the task identifier of the associated task based on the Gantt chart configuration data of the associated task.

[0054] It can be understood that based on different touch operations, there are also differences in displaying the Gantt charts of associated tasks; for example, when the touch operation is to view the Gantt chart of associated tasks, the Gantt chart page is updated to display the Gantt chart of associated tasks; when the touch operation is to view the Gantt chart of associated tasks in split screen, the Gantt chart page displays the Gantt chart of the task and the Gantt chart of associated tasks at the same time.

[0055] It can be seen that in the embodiment of the present application, in response to the touch operation of the task bar control, based on the Gantt chart configuration data of the associated task, the Gantt chart of the associated task can be quickly displayed on the same Gantt chart page; when it is necessary to view the Gantt chart of the associated task, there is no need to switch to the corresponding Gantt chart page to find the Gantt chart of the associated task, which facilitates quick viewing of the Gantt chart of the associated task.

[0056] Furthermore, in the existing Gantt chart, one task generally corresponds to one task bar. However, one task often has multiple execution stages. One task bar can only view the time of the entire task, or the execution stage is divided into multiple tasks of the same level for tracking, which is not conducive to the user to clearly understand the multiple execution stages of the task. Therefore, in the embodiment of the present application, it is proposed to configure multiple task bar controls for the task, such as Figure 3 As shown, the specific steps are as follows:

[0057] 301. In response to a view configuration instruction triggered on the Gantt chart page, display a Gantt chart configuration window.

[0058] In the embodiment of the present application, before the task bar control of the task is displayed on the Gantt chart page of the front-end device, that is, the task bar control of the task is not rendered in the Gantt chart area, the front-end device can display the Gantt chart configuration window in response to the view configuration instruction triggered on the Gantt chart page. Among them, the task includes multiple execution stages, and the Gantt chart configuration window is used to provide the user with the corresponding Gantt chart configuration data, and the Gantt chart configuration data includes the start time and end time of the task bar control corresponding to the multiple execution stages and the color of the task bar control; the Gantt chart configuration window is as follows: Figure 7 As shown, the execution stages of a task are: planning, development and acceptance. Each execution stage has a corresponding color, and each execution stage has a corresponding start time and end time of the to-be-configured item.

[0059] 302. In response to the configuration instruction, corresponding task bar controls are configured for the multiple execution phases in the Gantt chart configuration window.

[0060] The front-end device can respond to the configuration instruction and configure corresponding task bar controls for multiple execution stages in the Gantt chart configuration window to display multiple task bar controls of the task. The configuration instruction can be the start time and end time of the execution stage entered by the user in the Gantt chart configuration window, as well as the color configured for the execution stage. The execution stage division can be the default execution stage of the task of the front-end device, or it can be re-divided and modified according to user needs through configuration instructions. By configuring corresponding task bar controls for multiple execution stages, a Gantt chart of the task is obtained as shown in the figure below. Figure 8 As shown in the figure, the serial number and task name are displayed in the list area, including: service and support management, sales management, customer management, marketing management, data analysis, contract management and channel management, and the task bar controls of the tasks in multiple execution stages are displayed in the Gantt chart area. When the Gantt chart area of ​​the task is selected, the configuration information of multiple task bar controls of the task can be displayed, including: color, the execution stage name corresponding to the task bar control, the start time and end time of the task bar control, and the duration of the task bar control.

[0061] It can be seen that in the embodiment of the present application, a corresponding task bar control is configured for each execution stage in the task, and multiple task bar controls are configured in the task. There is no need to configure multiple tasks of the same level to distinguish the different execution stages of the same task, and the different execution stages of a task can be clearly and intuitively displayed.

[0062] Furthermore, in the existing system, when a user needs to know the associated tasks of a task, he needs to switch to the corresponding Gantt chart page and find the Gantt chart of the associated task from the corresponding Gantt chart page, which is cumbersome. Therefore, in the embodiment of the present application, it is proposed to view the Gantt chart of the associated task through the Gantt chart page, such as Figure 4 As shown, the specific steps are as follows:

[0063] 401. Display the task bar control corresponding to the task in the Gantt chart page.

[0064] In an embodiment of the present application, when entering the Gantt chart page, the front-end device can initiate a request to the server, carry the task identifier of the task in the request, receive the task data of the task and the Gantt chart configuration data of the task returned by the server, render and fill the task data in the list area of ​​the Gantt chart page, and render the task bar control corresponding to the task in the Gantt chart area of ​​the Gantt chart page based on the Gantt chart configuration data of the task, so as to display the task bar control corresponding to the task. The request can be an ajax request, which obtains the task data and the Gantt chart configuration data from the server by asynchronously sending an HTTP request, and uses these new data to update the list area and the Gantt chart area in the Gantt chart page without reloading the entire Gantt chart page, thereby improving the loading efficiency of the Gantt chart page.

[0065] The specific steps are as follows: Step 4011 to Step 4013:

[0066] 4011. Obtain Gantt chart configuration data corresponding to the task IDs filtered out in the list area.

[0067] In the embodiment of the present application, the Gantt chart configuration data corresponding to the task identifiers screened out in the list area can be obtained. It can be understood that the Gantt chart page includes: a list area and a Gantt chart area, and the list area records the preset task identifiers of multiple tasks, and the multiple preset task identifiers are multiple field values ​​in the list area.

[0068] The task identifier can be filtered out from the preset task identifiers of multiple tasks based on the filtering instructions input in the list area; that is, the filtering conditions can be configured in the list area to filter out the task identifier, and the filtering conditions can be the start time of the task, or the duration of the task, etc., which are not limited here. The task identifier can be a task name or a task ID (taskId); then, the Gantt chart configuration data corresponding to the filtered task identifier is obtained. Specifically, the task identifier can be sent to the server through a request, and the server can query and return the task data and Gantt chart configuration data corresponding to the task identifier based on the task identifier; or, the task data and Gantt chart configuration data corresponding to the task identifier can be obtained in the local pre-storage of the front-end device based on the task identifier; the specifics are not limited here.

[0069] By obtaining the Gantt chart configuration data corresponding to the task identifiers filtered out in the list area, it is not necessary to obtain the Gantt chart configuration data corresponding to all the task identifiers in the list area, which effectively saves resources; and the user can obtain the corresponding Gantt chart configuration data by inputting the filtering instruction, and can quickly obtain the Gantt chart configuration data that meets the user's needs.

[0070] 4012. Unify the row height of the list area and the row height of the Gantt chart area based on the Gantt chart configuration data.

[0071] It can be understood that a row of data in the list area represents a task. When a task contains multiple task bar controls, such as task bar controls corresponding to multiple execution stages, in order to make the task data recorded in the list area correspond to the task bar controls displayed in the Gantt chart area, the row height of the list area and the row height of the Gantt chart area can be unified based on the Gantt chart configuration data.

[0072] Specifically, the total number of task bar controls corresponding to a single task and the height of a single task bar control can be obtained based on the Gantt chart configuration data corresponding to the task identifier of the list area; it can be understood that the entire list area shares a set of Gantt chart configuration data, the task identifier of the list area includes the task identifiers of multiple tasks, each task includes multiple task bar controls, and the Gantt chart configuration data is the configuration data of the task bar controls of multiple tasks; the total number of task bar controls corresponding to a single task and the height of a single task bar control can be determined from the configuration data of the task bar controls of multiple tasks.

[0073] The front-end device can determine the target row height based on the total number of task bar controls corresponding to a single task and the height of a single task bar control; that is, the total number of task bar controls multiplied by the height of a single task bar control can be used to obtain the target row height. Then, the target row height can be sent to the list component in the list area and the Gantt chart component in the Gantt chart area, and the row height of the list area and the row height of the Gantt chart area can be configured as the target row height, so that the row height of the list area and the row height of the Gantt chart area are unified.

[0074] It can be seen that the row height of the list area and the row height of the Gantt chart area are unified based on the Gantt chart configuration data, so that the task data recorded in the list area corresponds to the task bar control displayed in the Gantt chart area, so as to more intuitively display the task bar control of the task.

[0075] 4013. Based on the Gantt chart configuration data corresponding to the task identifier, render and display the task bar control of the task in the Gantt chart area corresponding to the task identifier.

[0076] After unifying the row height of the list area and the row height of the Gantt chart area, the task bar control of the task can be rendered and displayed in the Gantt chart area corresponding to the task ID based on the Gantt chart configuration data corresponding to the task ID. That is, the task data of the task ID is rendered and filled in the list area corresponding to the task ID, and the task bar control of the task is rendered and displayed in the Gantt chart area corresponding to the task ID based on the start time, end time, row height, color, etc. of the task bar control in the Gantt chart configuration data corresponding to the task ID.

[0077] 402. When a touch event of a mouse on a task bar control in a Gantt chart page is monitored, the Gantt chart configuration data of the associated task is obtained.

[0078] It is understandable that the touch operation on the task bar control may be a touch event of the mouse on the task bar control in the Gantt chart page. In the embodiment of the present application, the touch event of the mouse on the task bar control in the Gantt chart page may be monitored. Fig. 9As shown, when the mouse click event (contextmenu) of the taskbar control is monitored, a menu can be called out, which includes multiple groups: view, edit, delete and split screen. At this time, it can be checked whether the task corresponding to the taskbar control has associated tasks (upstream tasks and downstream tasks). If so, the corresponding associated task options (upstream / downstream task options) are given in the view group and split screen group.

[0079] When it is necessary to view the Gantt chart of the associated tasks, the user can right-click the task bar control to call out the menu, and click the associated task option in the viewing group, that is, the mouse is pressed and released after the associated task option of the viewing group is pressed, triggering the click event of viewing the associated tasks. At this time, the front-end device can monitor the touch event of the mouse on the task bar control in the Gantt chart page as: View associated tasks. When the touch event of the mouse on the task bar control in the Gantt chart page is monitored as: View associated tasks, the task ID of the task is sent to the server, the associated tasks corresponding to the task are determined, and the Gantt chart configuration data of the associated tasks returned by the server is received.

[0080] 403. Based on the Gantt chart configuration data of the associated task, the task bar of the associated task is updated and rendered on the Gantt chart page.

[0081] When the touch operation of the task bar control is to view the associated tasks, the task bar of the associated tasks can be updated and rendered on the Gantt chart page based on the Gantt chart configuration data of the associated tasks. At this time, only the Gantt chart of the associated tasks is displayed on the Gantt chart page, that is, the Gantt chart of the associated tasks can be viewed through. Fig.10 As shown in the figure, the Gantt chart of the upstream tasks of the sales management task is viewed through: the Gantt chart of the company system management task; Fig.11 As shown, the Gantt chart of the downstream tasks of the sales management task is viewed through. The downstream tasks of the sales management task include: user portrait, salesperson management, quotation and order, sales report, activity management, sales automation and feedback tracking.

[0082] It can be seen that in the embodiment of the present application, the Gantt chart of associated tasks can be viewed in the same Gantt chart page, and the user can penetrate upward to the associated upstream task Gantt chart or penetrate downward to the downstream task Gantt chart. The user does not need to switch the Gantt chart page, so that the user can quickly view and adjust the associated tasks.

[0083] Furthermore, when viewing the Gantt chart of the associated task through penetration, only the Gantt chart of the associated task is displayed on the Gantt chart page, making it difficult to intuitively compare the Gantt chart of the task with the Gantt chart of the associated task. Therefore, in the embodiment of the present application, it is proposed to view the Gantt chart of the associated task in split screen, such as Figure 5 As shown, the specific steps are as follows:

[0084] 501. Display the task bar control corresponding to the task in the Gantt chart page.

[0085] It is understandable that step 501 is similar to the above step 401 and will not be described in detail here.

[0086] 502. When a touch event of a mouse on a task bar control in a Gantt chart page is monitored, the Gantt chart configuration data of the associated tasks is obtained by viewing the associated tasks in split screen.

[0087] That is, when it is necessary to view the Gantt chart of associated tasks in split screen, the user can right-click the task bar control to call out the menu, and click the associated task option in the split screen group, that is, the mouse is pressed and released after the associated task option in the split screen group, triggering the click event of viewing the associated task in split screen. At this time, the front-end device can monitor the touch event of the mouse on the task bar control in the Gantt chart page as: view associated tasks in split screen. When the touch event of the mouse on the task bar control in the Gantt chart page is monitored as: view associated tasks, the task ID of the task is sent to the server, the associated tasks corresponding to the task are determined, and the Gantt chart configuration data of the associated tasks returned by the server is received.

[0088] 503. Shrink the Gantt chart area where the task is located on the Gantt chart page, and split the Gantt chart page into another Gantt chart area.

[0089] When the touch operation of the task bar control is: view the associated tasks in split screen, the Gantt chart area where the task is located in the Gantt chart page can be reduced, and another Gantt chart area can be split on the Gantt chart page. Specifically, the style (style) of the div container of the list area and the Gantt chart area in the Gantt chart page can be updated, and the height (height) of the original list area and the original Gantt chart area can be adjusted, that is, the height of the original display area can be adjusted, and a split-screen display area can be split on the Gantt chart page, and another list area and another Gantt chart area are included in the split-screen display area. It can be understood that the width of the original display area can also be adjusted for splitting the screen, and the specifics are not limited here.

[0090] 504. Based on the Gantt chart configuration data of the associated task, render a task bar of the associated task in another Gantt chart area.

[0091] Next, based on the Gantt chart configuration data of the associated task, the task bar of the associated task can be rendered in another Gantt chart area. That is, the task data of the associated task is rendered to another list area, the task bar of the associated task is rendered in another Gantt chart area based on the Gantt chart configuration data of the associated task, and a new Gantt chart of the associated task is rendered in the split-screen display area. A Gantt chart of the associated task displayed in split screen can be obtained, that is, the Gantt chart of the task is displayed on the Gantt chart page, and the Gantt chart of the associated task is displayed in split screen, such as Fig.12As shown, the split screen displays the Gantt chart of downstream tasks of sales management.

[0092] Furthermore, the height of the split-screen display area can be adjusted. Specifically, a div element can be added between the split-screen display area and the original display area of ​​the Gantt chart page, a dividing line can be drawn using the CSS pseudo-element ::after, and the drag start event (dragstart) and the drag end event (dragend) of the dividing line can be monitored to determine the real-time position of the dividing line, and the height of the original display area and the split-screen display area can be adjusted based on the real-time position of the dividing line.

[0093] Among them, the list area of ​​the split-screen display area may include multiple related tasks. The user can also configure filtering conditions to filter out the related tasks that he wants to display, and then update the Gantt chart area of ​​the split-screen display area based on the Gantt configuration data of the filtered related tasks, so that the Gantt chart of the related tasks displayed in the split-screen can better meet user needs.

[0094] It can be seen that in the embodiment of the present application, the Gantt chart of the associated tasks can be displayed in a split screen on the Gantt chart page, and the Gantt charts of two dimensions can be displayed in a split screen to facilitate intuitive comparison of the Gantt chart of the task and the Gantt chart of the associated tasks.

[0095] Furthermore, in the existing case, a task may have multiple associated tasks. When adjusting the time of a task, the user needs to spend a lot of effort to switch back and forth between the Gantt chart of the task and the Gantt chart of the associated tasks to determine whether the associated tasks will be affected and to confirm the affected parts of the associated tasks. Therefore, in the embodiment of the present application, it is proposed to give corresponding prompts when adjusting the time of the task bar control, such as Figure 6 As shown, the specific steps are as follows:

[0096] 601. Display the task bar control corresponding to the task in the Gantt chart page.

[0097] It is understandable that step 601 is similar to the above step 401 and will not be described in detail here.

[0098] 602. When a touch event of a mouse on a task bar control in a Gantt chart page is monitored, the time of the task bar control is adjusted, and Gantt chart configuration data of the associated task is obtained.

[0099] In an embodiment of the present application, when a touch event of a mouse on a task bar control in a Gantt chart page is monitored: the time of the task bar control is adjusted, and the Gantt chart configuration data of the associated task is obtained. Specifically, the time of the task bar control can be adjusted in the Gantt chart configuration window, or the time of the task bar control can be adjusted by dragging the border of the task bar control, which is not limited here. Among them, adjusting the time of the task bar control by dragging the border of the task bar control is: monitoring the drag start event (dragstart) and the drag end event (dragend) of the task bar control border, calculating the drag distance of the border, and converting the adjusted time (increased or reduced time) based on the proportion of the drag distance in the timeline.

[0100] 603 . In the process of adjusting the time of the task bar control, determine whether the task bar of the associated task is affected based on the Gantt chart configuration data of the associated task; if so, execute step 604 .

[0101] In the process of adjusting the time of the task bar control, it can be determined based on the Gantt chart configuration data of the associated task whether the task bar of the associated task is affected, that is, whether the time of the adjusted task conflicts with the time of the associated task. It is understandable that when the associated tasks of the task include: upstream tasks and downstream tasks, under normal circumstances, the time of the upstream task includes the time of the task, and the time of the task includes the time of the downstream task. It is understandable that when adjusting the time of the task bar control, the associated tasks will be affected only when the start time or the end time of the task is adjusted; if the task contains multiple task bar controls, the end time of the last task bar control in the time sequence is adjusted, at this time, the end time of the task is adjusted.

[0102] Specifically, the Gantt chart configuration data of the associated task includes: the start time and end time of the associated task; when the associated task contains multiple task bars, the start time of the first task bar in the time sequence is the start time of the associated task, and the end time of the last task bar in the time sequence is the end time of the associated task.

[0103] When the associated task includes: an upstream task, in the process of adjusting the time of the task bar control, if the start time of the task bar control is earlier than the start time of the upstream task, that is, the start time of the corresponding task is earlier than the start time of the upstream task; or, the end time of the task bar control is later than the end time of the upstream task, that is, the end time of the corresponding task bar is later than the end time of the upstream task, then the task bar that affects the associated task is determined. When the associated task includes: a downstream task; in the process of adjusting the time of the task bar control, if the start time of the task bar control is later than the start time of the downstream task, that is, the start time of the corresponding task bar is later than the start time of the downstream task; or, the end time of the task bar control is earlier than the end time of the downstream task, that is, the end time of the corresponding task is earlier than the end time of the downstream task, then the task bar that affects the associated task is determined.

[0104] It can be seen that in the process of adjusting the time of the task bar control, by comparing the start time and end time of the task bar control with the start time and end time of the associated task, the task bar that affects the associated task can be accurately determined.

[0105] It can be understood that in an embodiment of the present application, the front-end device can obtain the Gantt chart configuration data of the associated task through the server to determine whether the task bar of the associated task is affected; or, the front-end device sends the time of the adjusted task bar control and the task identifier of the task to the server. When the server queries the Gantt chart configuration data of the associated task, it determines whether the task bar of the associated task is affected based on the time of the adjusted task bar control. If it is affected, the warning data is returned to the front-end device together with the Gantt chart configuration data of the associated task.

[0106] 604. When the Gantt chart page displays the Gantt chart of the associated task, a prompt message is rendered on the affected portion of the task bar of the associated task.

[0107] When determining the task bar that affects the associated task, a modification confirmation box is displayed in the affected part of the task bar control, such as Fig.13 As shown, shorten the end time of the last task bar control of the service and support management task, that is, shorten the end time of the service and support management task; prompt that the associated tasks will be affected after the modification, whether to confirm the modification. Then, in response to the confirmation modification instruction entered in the modification confirmation box, when the Gantt chart page displays the Gantt chart of the associated task, the prompt information is rendered on the affected part of the task bar of the associated task. That is, when the user clicks to confirm the modification in the modification confirmation box, the time of the task bar control is modified, and when the Gantt chart page displays the Gantt chart of the associated task, the prompt information is rendered on the affected part of the task bar of the associated task based on the early warning data. That is, the affected part of the task bar of the associated task will be highlighted and prompted, reminding the user to modify it as soon as possible. As shown Fig.14As shown, the service and support management tasks include downstream tasks: user portrait, purchase record tracing, etc. At this time, the task bar of the user portrait is affected, and a prompt is displayed: The current end time conflicts with the upstream task time, please adjust it.

[0108] It can be seen that in the embodiment of the present application, when adjusting the time of the task bar control, if it affects the associated tasks, by displaying a modification confirmation box in the affected part of the task bar control, and rendering prompt information in the affected part of the task bar of the associated task, the affected part in the task bar control and the affected part of the task bar of the associated task can be intuitively determined without switching back and forth between the Gantt chart of the task and the Gantt chart of the associated task, thereby effectively saving human resources.

[0109] Furthermore, in the existing Gantt chart, when there are multiple task bar controls in the Gantt chart, it is difficult to compare the task bar controls of multiple non-adjacent tasks in the Gantt chart page due to the limited number of tasks that can be displayed on the Gantt chart page. Therefore, in the embodiment of the present application, the current view can also be viewed in split screen; specifically, when the touch operation of the task bar control is: view the current view in split screen; that is, the touch event of the mouse on the task bar control is monitored as viewing the current view in split screen; at this time, the Gantt chart area where the task is located in the Gantt chart page can be reduced, and another Gantt chart area can be split in the Gantt chart page, which is similar to the above step 503 and will not be described in detail here; based on the Gantt chart configuration data of the task, the task bar control of the task is rendered in another Gantt chart area, that is, the task data of the task and the Gantt chart configuration data of the task can be obtained from the cache of the front-end device, and a new Gantt chart is rendered in the split screen display area to achieve the comparison of the task bar controls of multiple non-adjacent tasks in the Gantt chart page.

[0110] It can be seen that in the embodiment of the present application, the same Gantt chart is displayed in split screen on the Gantt chart page to conveniently compare the task bar controls of multiple tasks in the same Gantt chart.

[0111] To summarize, in the implementation of the present application, in the Gantt chart, multiple task bar controls can be configured for a single task, the same Gantt chart can be viewed in split screens, the Gantt charts of related tasks can be viewed through and in split screens, and prompts and warnings can be given when adjusting the time of the task bar control, which can effectively improve the display function of the Gantt chart and facilitate users to use the Gantt chart.

[0112] The present application also provides a Gantt chart display system. Fig.16 As shown, including:

[0113] The display unit 1601 is used to display the task bar control corresponding to the task in the Gantt chart page;

[0114] The acquisition unit 1602 is used to determine the associated task corresponding to the task in response to the touch operation on the task bar control, and acquire the Gantt chart configuration data of the associated task;

[0115] The rendering unit 1603 is used to render the task bar of the associated task in the Gantt chart page based on the touch operation and the Gantt chart configuration data of the associated task, and obtain and display the Gantt chart of the associated task.

[0116] The present application also provides an electronic device. Fig.17 The electronic device 1700 of the embodiment of the present application may include one or more central processing units (CPU) 1701 and a memory 1702 , in which one or more application programs or data are stored.

[0117] The memory 1702 may be a volatile storage or a persistent storage. The program stored in the memory 1702 may include one or more modules, each of which may include a series of instruction operations in the electronic device. Furthermore, the central processor 1701 may be configured to communicate with the memory 1702 and execute a series of instruction operations in the memory 1702 on the electronic device 1700.

[0118] The electronic device 1700 may also include one or more power supplies 1705, one or more wired or wireless network interfaces 1704, one or more input and output interfaces 1703, and / or one or more operating systems, such as Windows ServerTM, Mac OS XTM, UnixTM, LinuxTM, FreeBSDTM, etc.

[0119] The central processor 1701 can execute the operations performed by the aforementioned first aspect or any specific method embodiment of the first aspect, and the details will not be repeated here.

[0120] The present application provides a computer-readable storage medium, comprising instructions, which, when executed on a computer, enable the computer to execute the method described in the first aspect or any specific implementation of the first aspect.

[0121] The present application provides a computer program product comprising instructions or a computer program. When the computer program product is run on a computer, the computer is enabled to execute the method described in the first aspect or any specific implementation of the first aspect.

[0122] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0123] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.

[0124] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0125] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0126] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, read-only memory), random access memory (RAM, random access memory), disk or optical disk and other media that can store program code.

Claims

1. A method for displaying a Gantt chart, characterized in that: include: Display the task bar control corresponding to the task in the Gantt chart page; In response to a touch operation on the task bar control, determining an associated task corresponding to the task, and acquiring Gantt chart configuration data of the associated task; Based on the touch operation and the Gantt chart configuration data of the associated task, a task bar of the associated task is rendered in the Gantt chart page, and the Gantt chart of the associated task is obtained and displayed.

2. The display method according to claim 1, characterized in that: Before displaying the Gantt chart object corresponding to the task in the Gantt chart area of ​​the Gantt chart page, the method further includes: In response to a view configuration instruction triggered on the Gantt chart page, a Gantt chart configuration window is displayed; the task includes multiple execution stages; In response to the configuration instruction, corresponding task bar controls are respectively configured for the multiple execution stages in the Gantt chart configuration window to display multiple task bar controls of the task.

3. The display method according to claim 1, characterized in that: The Gantt chart page includes: a list area and a Gantt chart area, wherein the list area records preset task identifiers of multiple tasks; The task bar control for displaying tasks in the Gantt chart area of ​​the Gantt chart page includes: Filtering out task identifiers from preset task identifiers of the plurality of tasks based on a filter instruction input in the list area; Obtaining Gantt chart configuration data corresponding to the task identifier; Based on the Gantt chart configuration data corresponding to the task identifier, a task bar control of the task is rendered and displayed in the Gantt chart area corresponding to the task identifier.

4. The display method according to claim 3, characterized in that: The task includes a plurality of task bar controls; Before rendering and displaying the task bar control of the task in the Gantt chart area corresponding to the task identifier, the method further includes: Based on the Gantt chart configuration data corresponding to the task identifier, obtaining the total number of task bar controls corresponding to a single task and the height of a single task bar control; Determine a target row height based on the total number of task bar controls corresponding to a single task and the height of a single task bar control; The row height of the list area and the row height of the Gantt chart area are configured as the target row height.

5. The display method according to claim 1, characterized in that: When the touch operation on the task bar control is: viewing the associated tasks in split screen; The step of rendering the task bar of the associated task in the Gantt chart page based on the touch operation and the Gantt chart configuration data of the associated task includes: Shrinking the Gantt chart area where the task is located on the Gantt chart page, and splitting the Gantt chart page to display another Gantt chart area; Based on the Gantt chart configuration data of the associated task, a task bar of the associated task is rendered in the other Gantt chart area.

6. The display method according to claim 1, characterized in that: When the touch operation on the task bar control is: adjusting the time of the task bar control; The step of rendering the task bar of the associated task in the Gantt chart page based on the touch operation and the Gantt chart configuration data of the associated task includes: In the process of adjusting the time of the task bar control, determining whether to affect the task bar of the associated task based on the Gantt chart configuration data of the associated task; If so, displaying a modification confirmation box on the affected portion of the taskbar control; In response to a modification confirmation instruction input in the modification confirmation box, when the Gantt chart page displays the Gantt chart of the associated task, prompt information is rendered on an affected portion of the task bar of the associated task.

7. The display method according to claim 6, characterized in that: The Gantt chart configuration data of the associated task includes: the start time and the end time of the associated task; When the associated task includes an upstream task, determining whether to affect the task bar of the associated task based on the Gantt chart configuration data of the associated task during the process of adjusting the time of the task bar control includes: In the process of adjusting the time of the task bar control, if the start time of the task bar control is earlier than the start time of the upstream task, or the end time of the task bar control is later than the end time of the upstream task, then determining the task bar that affects the associated task; When the associated task includes: a downstream task; in the process of adjusting the time of the task bar control, determining whether to affect the task bar of the associated task includes: In the process of adjusting the time of the task bar control, if the start time of the task bar control is later than the start time of the downstream task, or the end time of the task bar control is earlier than the end time of the downstream task, then the task bar that affects the associated task is determined.

8. A Gantt chart display system, characterized in that: include: A display unit is used to display the task bar control corresponding to the task in the Gantt chart page; an acquisition unit, configured to determine, in response to a touch operation on the task bar control, an associated task corresponding to the task, and acquire Gantt chart configuration data of the associated task; A rendering unit is used to render the task bar of the associated task in the Gantt chart page based on the touch operation and the Gantt chart configuration data of the associated task, and obtain and display the Gantt chart of the associated task.

9. An electronic device, characterized in that: include: Processor and memory; The processor is configured to communicate with the memory and execute instructions in the memory to implement the method according to any one of claims 1 to 7.

10. A readable storage medium, characterized in that: The readable storage medium stores computer instructions, and when the computer instructions are executed by a processor, the method according to any one of claims 1 to 7 is implemented.

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

Images