A method and system for realizing visualization based on time period merging

Abstract

The present invention discloses a method and system for achieving visualization based on time period merging, primarily relating to the technical field of time node fusion. The method comprises the following steps: constructing a data object containing a weekday attribute and a time node array; sorting the single-day time node array in ascending order by start time to generate an ordered time period set; merging consecutive overlapping time periods in the ordered time period set to generate a merged time period array; calculating minute-level unit widths based on the total width of the time component; calculating the position information of the merged time period based on the unit widths, and rendering the visualization on the time component. The present invention has the beneficial effect of solving the problem of node granularity while also avoiding the problem of manual operation errors.

Description

Technical Field

[0001] The present invention relates to the technical field of time node fusion, and in particular to a method and system for realizing visualization based on time period merging. Background Art

[0002] Vue is a JavaScript framework for building user interfaces. Built on standard HTML, CSS, and JavaScript, it provides a declarative, component-based programming model for efficient user interface development. Vue was created to address the tedious and inefficient use of direct DOM manipulation in early front-end development. It utilizes the MVVM (Model-View-ViewModel) architecture, separating the view layer from the model layer and enabling two-way data binding through the ViewModel, greatly simplifying the development process.

[0003] During project development, you often encounter a requirement to draw a component that displays a time period and displays detailed time node data in the component. Currently, there are two common implementation methods. One is to draw a grid, that is, to draw a 24-hour time period into 48 grids, with each grid corresponding to 0.5 hours. The advantage of this method is that it is convenient and easy to implement, but it has the problem of too large granularity and insufficient precision. The other implementation method is to use manual interaction, adding a sliding gesture operation to a component, which can be dragged arbitrarily to display the time period. The advantage of this implementation method is that it is relatively free and flexible, but because it requires manual operation, it may be affected by misoperation and is not conducive to accurate control of time nodes.

[0004] Therefore, there is an urgent need for a time period display method and system based on Vue to realize time node fusion to solve the above problems. Summary of the Invention

[0005] The purpose of the present invention is to provide a method and system for realizing visualization based on time period merging, which solves the problem of node granularity while avoiding the problem of misoperation under manual operation.

[0006] To achieve the above-mentioned purpose, the present invention is implemented through the following technical solutions:

[0007] In one aspect, a method for realizing visualization based on time period merging is provided, comprising the following steps:

[0008] Step S1: Construct a data object containing a week attribute and a time node array;

[0009] Step S2: Sort the single-day time node array in ascending order by start time to generate an ordered time period set;

[0010] Step S3: Merge the consecutive overlapping time periods in the ordered time period set to generate a merged time period array;

[0011] Step S4: Calculating the minute-level unit width based on the total width of the time component;

[0012] Step S5: Calculate the position information of the merged time period according to the unit width and render the visualization on the time component.

[0013] Preferably, in step S1, the data object is represented as:

[0014] ;

[0015] in, , indicating the week index;

[0016] Represents a single time period, 、 is a time string that satisfies ;

[0017] Indicates the number of time periods.

[0018] Preferably, in step S3, merging consecutive overlapping time periods in the ordered time period set includes:

[0019] Step S31: Initialize the current start and end time variables and the empty merge array;

[0020] Step S32: Traverse the sorted time periods. If the current time period intersects with the previous time period, update the current end time to the maximum value of the current time period and the previous time period.

[0021] Step S33: If there is no intersection, add the previous time period to the merge array and update the current start and end time.

[0022] Preferably, in step S32, the intersection judgment condition is that the current start time is less than or equal to the previous end time.

[0023] Preferably, the merging operation of the consecutive overlapping time periods generates a continuous and uninterrupted time period.

[0024] Preferably, in step S4, the calculation of the minute-level unit width satisfies:

[0025] ;

[0026] in, The total width of the time component.

[0027] Preferably, step S5 includes:

[0028] Calculate the left distance: ;

[0029] Calculate the time period width: ;

[0030] in, 、 are the hour and minute components of the start time, 、 The hour and minute components of the end time.

[0031] Preferably, after the single-day rendering is completed, the weekly data object array is traversed, and the sorting, merging and rendering operations are repeatedly performed on the weekly data.

[0032] In another aspect, a system based on the above-mentioned time period merging and visualization method is provided, comprising:

[0033] The data object construction module is used to: construct a data object containing week attributes and time node arrays;

[0034] The ordered time period set generation module is used to: sort the single-day time node array in ascending order by start time to generate an ordered time period set;

[0035] The data merging module is used to merge consecutive overlapping time periods in the ordered time period set to generate a merged time period array;

[0036] A data calculation module is used to calculate the minute-level unit width based on the total width of the time component;

[0037] The rendering visualization module is used to calculate the position information of the merged time period according to the unit width and render the visualization on the time component.

[0038] Compared with the prior art, the beneficial effects of the present invention are:

[0039] 1. This invention is based on the user's manual and precise collection of node data and processing. It can draw 7*24*60 components with minute-level accuracy or 7*24*60*60 time components with second-level accuracy according to needs. Unlike previous development solutions, it effectively improves the accuracy of time nodes and operation accuracy. The design method of automatic width calculation also achieves the effect of multi-device adaptation, making it more convenient for users to apply various device scenarios.

[0040] 2. Through the autonomous time node fusion method, users are not restricted by the order of creating time nodes, nor do they need to consider the cross-relationships between multiple time nodes, which greatly facilitates the user's operation portability.

[0041] 3. Based on the present invention, the operation can be further deepened. Users can adjust the accuracy of time nodes according to their needs, and can also customize the time range to facilitate user customized development. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 is a flow chart of the method of the present invention;

[0043] Figure 2 It is a schematic diagram of the system structure of the present invention. DETAILED DESCRIPTION

[0044] Below in conjunction with specific embodiment, further set forth the present invention.Should be understood that these embodiments are only used to illustrate the present invention and are not used in limiting the scope of the present invention.In addition, should be understood that after reading the content taught by the present invention, those skilled in the art can make various changes or modifications to the present invention, and these equivalent forms fall equally within the scope limited by the application.

[0045] In the present invention, terms such as "upper", "lower", "left", "right", "front", "back", "vertical", "horizontal", "side", "bottom", etc. indicating directions or positional relationships are based on the directions or positional relationships shown in the accompanying drawings. They are relational words determined only for the convenience of describing the structural relationships of the various parts or elements of the present invention, and do not specifically refer to any part or element in the present invention, and should not be understood as limiting the present invention.

[0046] Example:

[0047] like Figure 1 As shown, this embodiment provides a method for realizing visualization based on time period merging, including the following steps:

[0048] Step S1: Construct a data object containing a week attribute and a time node array;

[0049] Step S2: Sort the single-day time node array in ascending order by start time to generate an ordered time period set;

[0050] Step S3: Merge the consecutive overlapping time periods in the ordered time period set to generate a merged time period array;

[0051] Step S4: Calculating the minute-level unit width based on the total width of the time component;

[0052] Step S5: Calculate the position information of the merged time period according to the unit width and render the visualization on the time component.

[0053] In this embodiment, the specific execution process of the above steps is as follows:

[0054] (1) Add a time selector component to collect time node data. A single time node data is a single object containing the start time and end time. Multiple time node data are integrated into an array.

[0055] (2) Get a value such as:

[0056] [{startTime:09:00,endTime:10:00},{startTime:12:00,endTime:14:00}]

[0057] An array of styles, each object in the array is a single time node data, such as:

[0058] {startTime: 09:00,endTime:10:00},

[0059] Where startTime is the start time and endTime is the end time. Such an array contains two time nodes, the first one starts at 09:00 and ends at 10:00; the second one starts at 12:00 and ends at 14:00;

[0060] (3) Add the week attribute to the single array generated in (1) and generate a new data object, which is specifically expressed as follows:

[0061] {week:0,timeNode:[{startTime:09:00,endTime:10:00},{startTime:12:00,endTime:14:00}]}, the data structure of this object is: week marks the week attribute of the current data; timeNode marks the time node attribute of the current data;

[0062] (4) Add the 7 object data generated in (3) to an array, and set the week attribute of each data to 0-6, corresponding to the 7 days of the week, so that the component can be expanded to cover all time periods of the week in the future;

[0063] (5) This operation until (12) focuses on the time node data array generated by (1). Through the sorting function, based on the start time of each time node object in the array, the entire data is sorted in ascending order and a new object array is generated, named sortedTimes;

[0064] (6) Generate an empty array mergedTimes to store the merged time period, and generate an object currentStart to record the current start time; generate an object currentEnd to record the current end time;

[0065] (7) Traverse the sortedTimes array generated in (5). The current index value is 0, which means the first time node object in the array is obtained and marked as currentTimeNode. The start time and end time of currentTimeNode are initialized to the corresponding timestamps through the method and saved as start and end respectively.

[0066] (8) Determine whether currentStart has a value. Since this is the first time the array is traversed and no value was assigned when the currentStart object was generated in step 6, the conditional judgment result is no. Then, the values ​​of currentStart and currentEnd are set to the start and end generated at the current time node respectively.

[0067] (9) Determine whether there are any values ​​in the sortedTimes array. If there are any values, repeat (7) and increase the index value by 1 to generate the start and end corresponding to the current time node.

[0068] (10) Based on the operation of (8), if currentStart has a value, then it is determined again whether the start generated in step nine is less than or equal to currentEnd. If the condition is yes, then currentEnd is reassigned, and the assignment result is the larger value between currentEnd and the end generated in step nine. This step realizes the fusion of multiple time nodes with an intersection relationship into a new time node data;

[0069] (11) If the condition in (10) is judged as no, that is, the currently generated start is greater than currentEnd, which means that the current time node data does not have an intersection relationship with the previous time node and belongs to an independent time node, then a time node object is generated by the current currentStart and currentEnd, inserted into the mergedTimes array, and the values ​​of currentStart and currentEnd are updated to the start and end generated in step 9;

[0070] (12) If the condition (9) is judged as no, that is, all the data in the sortedTimes array has been traversed, then the last set of currentStart and currentEnd is generated into a time node object and inserted into the mergedTimes array to complete the processing of all time nodes;

[0071] (13) Through (5) to (12), the processing of the single time node data array is completed, and a new array mergedTimes is generated, which contains the long time period generated by the fusion of multiple time nodes with an intersection relationship, as well as individual time nodes without an intersection relationship;

[0072] (14) Set the width of the time component to width. Taking minute-level precision as an example, the width of each minute is width / 24 / 60, which is set to minuteWidth;

[0073] (15) Traverse the mergedTimes generated in (13) and get the minutes corresponding to the start time and the minutes corresponding to the duration for each time node in the array;

[0074] (16) Take time node A: {startTime: 09:00, endTime: 10:00} as an example. The number of minutes corresponding to the start time is 9*60, and the number of minutes corresponding to the duration is (10-9)*60. The corresponding position information of time node A on the time component is: the left distance is 9*60*minuteWidth, and the width is 60*minuteWidth. Render time node A on the time component according to the position information;

[0075] (17) According to (16), all the time nodes of mergedTimes are rendered on the time component, that is, the rendering of the time nodes of a single day is completed. Using the form of traversal, all the data of the seven days of a week generated in step 4 can be rendered through the same steps to achieve full time coverage.

[0076] like Figure 2 As shown, this embodiment further provides a system based on the above-mentioned time period merging and visualization method, including:

[0077] The data object construction module is used to: construct a data object containing week attributes and time node arrays;

[0078] The ordered time period set generation module is used to: sort the single-day time node array in ascending order by start time to generate an ordered time period set;

[0079] The data merging module is used to merge consecutive overlapping time periods in the ordered time period set to generate a merged time period array;

[0080] A data calculation module is used to calculate the minute-level unit width based on the total width of the time component;

[0081] The rendering visualization module is used to calculate the position information of the merged time period according to the unit width and render the visualization on the time component.

[0082] The above is a specific description of the preferred implementation of the present invention, but the present invention is not limited to the embodiments. Those skilled in the art can make various equivalent modifications or substitutions without violating the spirit of the present invention. These equivalent modifications or substitutions are all included in the scope defined by the claims of this application.

Claims

1. A method for realizing visualization based on time period merging, characterized in that: The following steps are involved: Step S1: Construct a data object containing a week attribute and a time node array; Step S2: Sort the single-day time node array in ascending order by start time to generate an ordered time period set; Step S3: Merge the consecutive overlapping time periods in the ordered time period set to generate a merged time period array; Step S4: Calculating the minute-level unit width based on the total width of the time component; Step S5: Calculate the position information of the merged time period according to the unit width, and render the visualization on the time component; In step S1, the data object is represented as: ； in, , indicating the week index; Represents a single time period, 、 is a time string that satisfies ; Indicates the number of time periods; In step S3, the continuous overlapping time periods in the ordered time period set are merged, including: Step S31: Initialize the current start and end time variables and the empty merge array; Step S32: Traverse the sorted time periods. If the current time period intersects with the previous time period, update the current end time to the maximum value of the current time period and the previous time period. The intersection judgment condition is that the current start time is less than or equal to the previous end time. Step S33: If there is no intersection, add the previous time period to the merge array and update the current start and end time; After merging consecutive overlapping time periods, a continuous and uninterrupted time period is generated; In step S4, the calculation of the minute-level unit width satisfies: ； in, is the total width of the time component; Step S5 includes: Calculate the left distance: ; Calculate the time period width: ; in, 、 are the hour and minute components of the start time, 、 The hour and minute components of the end time; After the single-day rendering is completed, the weekly data object array is traversed and the sorting, merging and rendering operations are repeated for each week's data.

2. A system based on the method for realizing visualization based on time period merging according to claim 1, characterized in that: include: The data object construction module is used to: construct a data object containing week attributes and time node arrays; The ordered time period set generation module is used to: sort the single-day time node array in ascending order by start time to generate an ordered time period set; The data merging module is used to merge consecutive overlapping time periods in the ordered time period set to generate a merged time period array; A data calculation module is used to calculate the minute-level unit width based on the total width of the time component; The rendering visualization module is used to calculate the position information of the merged time period according to the unit width and render the visualization on the time component.

Images