Method and system for realizing visualization based on time period combination

Abstract

The invention discloses a method and a system for realizing visualization based on time period merging, and mainly relates to the technical field of time node fusion. Comprising the following steps: constructing a data object containing week attributes and a time node array; sorting the single-day time node array in an ascending order according to starting time to generate an ordered time period set; continuously overlapped time periods in the ordered time period set are merged, and a merged time period array is generated; calculating a minute-level unit width based on the total width of the time component; and calculating the position information of the merged time period according to the unit width, and rendering visualization on the time component. The method has the beneficial effects that the problem of node granularity is solved, and meanwhile, the problem of misoperation caused by manual operation is also avoided.

Description

Technical Field

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

[0002] Vue is a JavaScript framework for building user interfaces. It is built based on standard HTML, CSS, and JavaScript, and provides a declarative and component-based programming model, which can efficiently develop user interfaces. The background of the birth of Vue is to solve the cumbersome and inefficient problems of directly operating the DOM in early front-end development. It adopts the MVVM (Model-View-ViewModel) architecture, separates the view layer from the model layer, and performs two-way data binding through the ViewModel, greatly simplifying the development process.

[0003] In project development, a type of requirement is often encountered, which is to draw a component for displaying time periods and display detailed time node data in the component. There are currently two common implementation forms. One is to draw by drawing grids, that is, to draw the 24-hour time period into 48 grids, and each single grid corresponds to 0.5 hours. The advantage of this is that it is convenient to use and easy to implement, but there is a problem of too large granularity and insufficient fineness; the other implementation method is to use a manual interaction method, add a sliding gesture operation in a component, and the time period display can be achieved by arbitrary dragging. The advantage of this implementation method is relatively free and flexible, but because it requires manual operation, there will be problems such as misoperation, and it is not conducive to accurately controlling the time node.

[0004] Therefore, there is an urgent need for a method and system for displaying time periods based on Vue to achieve 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 visualization based on time period merging, which solves the problem of node granularity and at the same time avoids the problem of misoperation under manual operation.

[0006] To achieve the above object, the present invention is realized through the following technical solutions: On the one hand, a method for visualization based on time period merging is provided, including the following steps: Step S1: Construct a data object containing week attributes and an array of time nodes; Step S2: Sort the single-day time node array in ascending order according to the start time to generate an ordered time period set; Step S3: Merge the continuously overlapping time periods in the ordered time period set to generate an array of merged time periods; Step S4: Calculate the unit width at the minute level 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.

[0007] Preferably, in the step S1, the data object is represented as: ; Wherein, , represents the week index; represents a single time period, 、 is a time string and satisfies ; represents the number of time periods.

[0008] Preferably, in the step S3, merging consecutive overlapping time periods in the ordered set of time periods includes: Step S31: Initialize the current start and end time variables and an empty merged array; Step S32: Traverse the sorted time periods. If there is an intersection between the current time period and the previous time period, update the current end time to the maximum value of the current time period and the previous time period; Step S33: If there is no intersection, add the previous time period to the merged array and update the current start and end times.

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

[0010] Preferably, the merging operation of the consecutive overlapping time periods generates consecutive and uninterrupted time periods.

[0011] Preferably, in the step S4, the calculation of the unit width at the minute level satisfies: ; Wherein, is the total width of the time component.

[0012] Preferably, the step S5 includes: Calculate the left distance: ; Calculate the time period width: ; Wherein, 、 are the hour and minute components of the start time, 、 are the hour and minute components of the end time.

[0013] Preferably, after the single-day rendering is completed, traverse the array of weekly data objects, and repeatedly perform sorting, merging, and rendering operations on the weekly data.

[0014] On the other hand, a system based on the time period merging and visualization method as described above is provided, including: A data object construction module for constructing a data object including a week attribute and an array of time nodes; An ordered time period set generation module for sorting the single-day time node array in ascending order of the start time to generate an ordered time period set; A data merging module for merging continuously overlapping time periods in the ordered time period set to generate an array of merged time periods; A data calculation module for calculating the minute-level unit width based on the total width of the time component; A rendering and visualization module for calculating the position information of the merged time periods according to the unit width and rendering visualization on the time component.

[0015] Compared with the prior art, the beneficial effects of the present invention are as follows: 1. Based on the user's manual and precise collection of node data and processing, the present invention can draw a time component with a precision of 7*24*60 components at the minute level or 7*24*60*60 components at the second level according to requirements, which is different from the previous development solutions, effectively improving the time node accuracy 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.

[0016] 2. By means of autonomous time node fusion, users are not restricted by the order of creating time nodes and do not need to consider the cross relationships between multiple time nodes, greatly facilitating the operation portability of users.

[0017] 3. On the basis of the present invention, the operation can be further deepened. Users can adjust the accuracy of time nodes according to requirements or customize the time range, facilitating the customized development of users. Description of the Drawings

[0018] Figure 1 is the method flowchart of the present invention; Figure 2 is the system structure schematic diagram of the present invention. Detailed Embodiments

[0019] The present invention will be further described below in conjunction with specific embodiments. It should be understood that these embodiments are only used to illustrate the present invention and not to limit the scope of the present invention. In addition, it 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 also fall within the scope defined by this application.

[0020] In the present invention, terms such as "upper", "lower", "left", "right", "front", "rear", "vertical", "horizontal", "side", "bottom", etc. indicate the orientation or positional relationship based on the orientation or positional relationship shown in the drawings. They are only relational terms determined for the convenience of describing the structural relationship of each component or element of the present invention, and do not specifically refer to any component or element in the present invention, and should not be construed as a limitation to the present invention.

[0021] Embodiment: As Figure 1 shown, this embodiment provides a method for realizing visualization based on time period merging, including the following steps: Step S1: Construct a data object containing week attributes and an array of time nodes; Step S2: Sort the single-day time node array in ascending order according to the start time to generate an ordered time period set; Step S3: Merge consecutive overlapping time periods in the ordered time period set to generate an array of merged time periods; Step S4: Calculate the minute-level unit width based on the total width of the time component; Step S5: Calculate the position information of the merged time periods according to the unit width and render the visualization on the time component.

[0022] In this embodiment, the specific execution process of the above steps is as follows: (1) Add a time selector component for collecting time node data. The single time node data is a single object containing a start time and an end time, and integrate multiple time node data into an array; (2) Obtain an array in the following format: [{startTime:09:00,endTime:10:00},{startTime:12:00,endTime:14:00}] Each object in the array is single time node data, such as: {startTime: 09:00,endTime:10:00}, where startTime is the start time and endTime is the end time. Such an array contains two time nodes. The start time of the first one is 09:00 and the end time is 10:00; the start time of the second one is 12:00 and the end time is 14:00; (3) Add week attributes to the single array generated in (1) and generate a new data object, specifically expressed as: {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; (4) Add the object data generated in (3) to an array, and set the week attribute of each data to 0 - 6 respectively, corresponding to 7 days of a week, which is convenient for later expanding the component to cover the entire 7 - day period of a week; (5) This operation from (1) to (12) focuses on the time node data array generated in (1). Through the sorting function, based on the start time of each time node object in the array, complete the ascending sorting of the entire data and generate a new object array named sortedTimes; (6) Generate an empty array mergedTimes to store the merged time periods, and generate an object currentStart to record the current start time; generate an object currentEnd to record the current end time; (7) Traverse the sortedTimes array generated in (5). At this time, the current index value is 0, that is, obtain the first time node object in the array, marked as currentTimeNode. Initialize the start time and end time of currentTimeNode to the corresponding timestamps through a method, and save them as start and end respectively; (8) Judge whether currentStart has a value. Since this is the first time to traverse the array currently, and no value was assigned when generating the currentStart object in step six before, the condition judgment result is no. Then set the values of currentStart and currentEnd to the start and end generated by the current time node respectively; (9) Judge whether there is still a value in the sortedTimes array. If there is a value, repeat (7), and the index value increases by 1 correspondingly to generate the start and end corresponding to the current time node; (10) Based on the operation in (8), since currentStart has a value now, judge again whether the start generated in step nine is less than or equal to currentEnd. If the condition judgment is yes, re - assign currentEnd, and the assignment result takes 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 brand - new time node data; If the condition judgment in (10) is negative, that is, the currently generated start is greater than currentEnd, it indicates that there is no intersection relationship between the current time node data and the previous time node, and it belongs to an independent time node. Then, a time node object is generated through 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 nine. If the condition judgment in (9) is negative, that is, all the data in the sortedTimes array has been traversed, then a time node object is generated from the last group of currentStart and currentEnd, inserted into the mergedTimes array, and the processing of all time nodes is completed. Through (5) to (12), the processing of a single time node data array is completed, and a new array mergedTimes is generated, which contains long time periods generated by fusing multiple time nodes with intersection relationships, as well as individual time nodes without intersection relationships. Set the width of the time component to width. Taking the minute-level fineness as an example, the width of each minute is width / 24 / 60, which is set as minuteWidth. Traverse the mergedTimes generated in (13), and for each time node in the array, obtain the minute corresponding to the start time and the minute corresponding to the duration. Taking the time node A: {startTime: 09:00, endTime: 10:00} as an example, the minute corresponding to the start time is 9*60, and the minute corresponding to the duration is (10 - 9)*60. Then, the position information of the time node A on the time component is that the left distance is 9*60*minuteWidth, and the width is 60*minuteWidth. Render the time node A onto the time component according to the position information. According to (16), render all the time nodes of mergedTimes onto the time component, that is, complete the rendering of the time nodes for a single day. By using a traversal form, all the data for 7 days in a week generated in step four can be rendered through the same steps, achieving full-time coverage.

[0023] As Figure 2 shown, this embodiment also provides a system based on the above-mentioned time period merging and visualization method, including: A data object construction module for constructing a data object containing week attributes and an array of time nodes; An ordered time period set generation module, configured to: sort the single-day time node array in ascending order according to the start time, and generate an ordered time period set; A data merging module, configured to: merge continuously overlapping time periods in the ordered time period set, and generate an array of merged time periods; A data calculation module, configured to: calculate the minute-level unit width based on the total width of the time components; A rendering visualization module, configured to: calculate the position information of the merged time periods according to the unit width, and render the visualization on the time components.

[0024] The above is a specific description of the preferred embodiment of the present invention, but the present invention is not limited to the described embodiment. Those skilled in the art can also make various equivalent deformations or substitutions without departing from the spirit of the present invention, and these equivalent deformations 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, It includes the following steps: Step S1: Construct a data object containing week attributes and an array of time nodes; Step S2: Sort the single-day time node array in ascending order of start time to generate an ordered time period set; Step S3: Merge the continuously overlapping time periods in the ordered time period set to generate an array of merged time periods; Step S4: Calculate the minute-level unit width based on the total width of the time component; Step S5: Calculate the position information of the merged time periods according to the unit width and render the visualization on the time component.

2. The method for realizing visualization based on time period merging according to claim 1, characterized in that, In the said Step S1, the data object is represented as: ； Among them, , represents the week index; Represents a single time period, 、 is a time string and satisfies ; Indicates the number of time periods.

3. A method for realizing visualization based on time period merging according to claim 1, characterized in that, In the said Step S3, merging the continuously overlapping time periods in the ordered time period set includes: Step S31: Initialize the current start and end time variables and an empty merged array; Step S32: Traverse the sorted time periods. If there is an intersection between the current time period and the previous time period, update the current end time to the maximum value of the current time period and the previous time period; Step S33: If there is no intersection, add the previous time period to the merged array and update the current start and end times.

4. A method for realizing visualization based on time period merging according to claim 3, characterized in that In Step S32, the intersection judgment condition is that the current start time is less than or equal to the previous end time.

5. The method for realizing visualization based on time period merging according to claim 3, wherein, The merging operation of the said continuously overlapping time periods generates continuously uninterrupted time periods.

6. A method for realizing visualization based on time period merging according to claim 1, characterized in that, In the said Step S4, the calculation of the minute-level unit width satisfies: ； Among them, is the total width of the time component.

7. A method for realizing visualization based on time period merging according to claim 6, characterized in that The said Step S5 includes: Calculate the left distance: ; Calculate the time period width: ; Among them, , are the hour and minute components of the start time, , are the hour and minute components of the end time.

8. The method for realizing visualization based on time period merging according to claim 1, characterized in that, After the single-day rendering is completed, traverse the array of weekly data objects and repeat the sorting, merging, and rendering operations for each week of data.

9. A system based on the method for realizing visualization by merging time periods as described in claim 1, characterized in that, It includes: A data object construction module for constructing a data object containing week attributes and an array of time nodes; An ordered time period set generation module for sorting the single-day time node array in ascending order of start time to generate an ordered time period set; A data merging module for merging the continuously overlapping time periods in the ordered time period set to generate an array of merged time periods; A data calculation module for calculating the minute-level unit width based on the total width of the time component; A visualization rendering module for calculating the position information of the merged time periods according to the unit width and rendering the visualization on the time component.

Images