Time range selection method and system, electronic equipment and storage medium

Abstract

The embodiment of the invention provides a time range selection method and system, electronic equipment and a storage medium, and belongs to the technical field of computers. The method comprises the steps of displaying a time axis of a corresponding time interval in a time selection area in response to a fast selection instruction of a front end, then determining starting time in response to a first operation instruction of a first sliding block on the time axis, and updating a first pixel position of the first sliding block on the time axis; and in response to a second operation instruction for a second sliding block on the time axis, determining end time, updating a second pixel position of the second sliding block on the time axis, and determining a target time range according to the starting time and the end time. The time range selection method and device can simplify the interaction mode of time range selection, improve the time range selection efficiency and improve the user experience.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a time range selection method, system, electronic device and storage medium. Background Art

[0002] In web applications, there are many scenarios where you need to select a time range to filter data within a specific time range. At present, the time range setting is based on clicking the input box to pull down and expand the time panel. In the time panel, select the year, month, and day corresponding to the start time and the year, month, and day corresponding to the end time. This time setting method is inefficient. For example, the initial selection operation of the time range that needs to be accurate to the day requires a total of 5 clicks to complete a time range setting: 1. Click the input box to open the time panel; 2. Click to select the start time; 3. Click OK (the interface jumps to the end time selection panel); 4. Click to select the end time; 5. Click OK to complete the time range setting. This complex time selection interaction method leads to inefficient time range selection and poor user experience. Summary of the invention

[0003] The main purpose of the embodiments of the present application is to propose a time range selection method, system, electronic device and storage medium, aiming to simplify the interactive mode of time range selection, improve the efficiency of time range selection, and improve user experience.

[0004] To achieve the above purpose, one aspect of an embodiment of the present application provides a time range selection method, comprising the following steps:

[0005] In response to the time range selection instruction, displaying a time selection area, wherein the time selection area includes a time axis, a first slider, and a second slider;

[0006] In response to a first operation instruction on a first slider on the timeline, determining a start time and updating a first pixel position of the first slider on the timeline;

[0007] In response to a second operation instruction on a second slider on the timeline, determining an end time and updating a second pixel position of the second slider on the timeline;

[0008] A target time range is determined according to the start time and the end time.

[0009] In some embodiments, the time range selection method further comprises the following steps:

[0010] In response to an operation instruction on a first control on the time selection area, moving the time axis in a first direction according to a preset moving time length;

[0011] Alternatively, in response to an operation instruction on a second control on the time selection area, the time axis is moved in a second direction according to a preset moving time length.

[0012] In some embodiments, in response to the time range selection instruction, displaying the time selection area comprises the following steps:

[0013] In response to the time range selection instruction, the time axis is initialized, and the first slider and the second slider are initialized according to a default time interval;

[0014] An instance container is created on the front-end page, and the initialized timeline, the first slider and the second slider are written into the instance container to obtain a time selection area displayed on the front-end page, wherein the first slider and the second slider are both located on the upper layer of the timeline.

[0015] In some embodiments, the time range selection method further comprises the following steps:

[0016] In response to the quick selection instruction, determining a corresponding configuration time interval;

[0017] A first pixel position of a first slider on the time axis is updated according to the configured time interval, or a second pixel position of a second slider on the time axis is updated.

[0018] In some embodiments, the time parameters displayed by the time axis are stored in a time array;

[0019] The first pixel position of the first slider on the time axis is obtained by the following steps:

[0020] Determine the first element position of the start time in the time array by traversing the time array;

[0021] Adjust the position of the first element according to a first adjustment amount to obtain a first adjustment value;

[0022] Determine a first pixel position according to the first adjustment value, a single time relative width value, and a time axis relative width value;

[0023] The second pixel position of the second slider on the time axis is obtained by the following steps:

[0024] Determine the second element position of the end time in the time array by traversing the time array;

[0025] Adjust the position of the second element according to a second adjustment amount to obtain a second adjustment value;

[0026] The second pixel position is determined according to the second adjustment value, the time axis limited width value, the single time relative width value and the time axis relative width value.

[0027] In some embodiments, in response to a first operation instruction on a first slider on the timeline, determining a start time and updating a first pixel position of the first slider on the timeline comprises the following steps:

[0028] In response to a first operation instruction on a first slider on the time axis, determining a first operation position of an operation point on a front page, and subtracting the first operation position from a reference position of a reference end of the time axis relative to a reference position of the front page to obtain a first pixel position of the first slider;

[0029] Determine a first array subscript value according to a ratio of the first pixel position to the time axis relative width value and a single time relative width value;

[0030] Query the time array according to the first array subscript value to determine the start time;

[0031] A first pixel position of the first slider on the time axis is updated according to the start time.

[0032] In some embodiments, in response to a second operation instruction on a second slider on the timeline, determining an end time and updating a second pixel position of the second slider on the timeline comprises the following steps:

[0033] In response to a second operation instruction on a second slider on the time axis, determining a second operation position of the operation point on the front page, and subtracting the second operation position from a reference position of the reference end of the time axis relative to the front page to obtain a second pixel position of the second slider;

[0034] Determine the second array subscript value according to the ratio of the second pixel position to the time axis relative width value and the single time relative width value;

[0035] Query the time array according to the second array subscript value to determine the end time;

[0036] A second pixel position of the second slider on the time axis is updated according to the end time.

[0037] To achieve the above purpose, another aspect of the embodiment of the present application provides a time range selection system, including:

[0038] A first module, configured to display a time selection area in response to a time range selection instruction, wherein the time selection area includes a time axis, a first slider, and a second slider;

[0039] A second module is used for determining a start time and updating a first pixel position of the first slider on the time axis in response to a first operation instruction on the first slider on the time axis;

[0040] A third module is used to determine an end time and update a second pixel position of the second slider on the time axis in response to a second operation instruction on the second slider on the time axis;

[0041] The fourth module is used to determine the target time range according to the start time and the end time.

[0042] To achieve the above-mentioned purpose, another aspect of an embodiment of the present application proposes an electronic device, which includes a memory, a processor, a program stored in the memory and executable on the processor, and a data bus for realizing connection and communication between the processor and the memory, and the program implements the method described in the above embodiment when executed by the processor.

[0043] To achieve the above-mentioned purpose, another aspect of an embodiment of the present application proposes a storage medium, which is a computer-readable storage medium used for computer-readable storage, and the storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the method described in the above embodiment.

[0044] The time range selection method, system, electronic device and storage medium proposed in the present application respond to the front-end quick selection instruction, display the timeline of the corresponding time interval in the time selection area, and then respond to the first operation instruction of the first slider on the timeline to determine the start time and update the first pixel position of the first slider on the timeline, and respond to the second operation instruction of the second slider on the timeline to determine the end time and update the second pixel position of the second slider on the timeline, and determine the target time range according to the start time and end time. The present application displays the timeline of the corresponding time interval in the time selection area on the front-end interactive page, and respectively sets a first slider and a second slider on the timeline for the user to locate the start time and end time, and updates the landing position of the first slider and the second slider on the timeline to show the user the start time and end time identified by the backend. This not only enables accurate time selection, but also simplifies the interactive method of time range selection, improves the efficiency of time range selection, and improves user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] Figure 1 is a flow chart of a time range selection method provided in an embodiment of the present application;

[0046] Figure 2 yes Figure 1Flow chart of step S101 in FIG.

[0047] Figure 3 is a flow chart of a time range selection method provided by another embodiment of the present application;

[0048] Figure 4 yes Figure 1 A flowchart of calculating the first pixel position of the first slider on the time axis in step S102;

[0049] Figure 5 yes Figure 1 A flowchart of calculating the second pixel position of the second slider on the time axis in step S103;

[0050] Figure 6 yes Figure 1 Flow chart of step S102 in FIG.

[0051] Figure 7 yes Figure 1 Flow chart of step S103 in FIG.

[0052] Figure 8 is a schematic diagram of a time range selection system provided in an embodiment of the present application;

[0053] Fig. 9 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application;

[0054] Fig.10 It is a schematic diagram of the time selection area provided in the embodiment of the present application;

[0055] Fig.11 is a schematic diagram of a draggable range of a first slider provided in an embodiment of the present application;

[0056] Fig.12 is a schematic diagram of a draggable range of a second slider provided in an embodiment of the present application;

[0057] Fig.13 This is a schematic diagram of a target time range selectable by a user provided in an embodiment of the present application. DETAILED DESCRIPTION

[0058] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0059] It should be noted that, although the functional modules are divided in the system and the logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the system or the order in the flowchart. The terms "first", "second", etc. in the specification, claims and the above drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence.

[0060] 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.

[0061] First, some nouns involved in this application are analyzed:

[0062] The Vue (also known as Vue.js) framework is a progressive JavaScript framework for building user interfaces. Vue is designed to be applied layer by layer from the bottom up, and its core library only focuses on the view layer. It is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. In some cases, Vue can also develop single-page applications (SPA) by utilizing routing (VueRouter), state management (Vuex), and build tools (Vue CLI) in the official ecosystem. Vue.js is a powerful, easy-to-learn and easy-to-use JavaScript framework that is particularly suitable for developing single-page applications (SPA) and complex web interfaces.

[0063] Number function: A built-in function of javascript that converts a string into a number.

[0064] toFixed function: A built-in function of javascript that converts a decimal into a string that retains the number of input parameters.

[0065] Math.floor function: A built-in function in javascript that rounds a decimal number down.

[0066] Instance container, in the Vue framework, the instance container is the element mounted by the Vue instance. The element mounted by the instance serves as the "container" of the Vue instance and carries the view rendered by Vue. For example, when using Vue to develop a Web application, you need to define one or more elements (usually div elements) on the HTML page. These elements will serve as the mounting points of the Vue instance, that is, Vue will manage the DOM (Document Object Model) structure, style and events inside these elements, thereby realizing the rendering of the component view.

[0067] CSS, the full name of which is Cascading Style Sheets, is a computer language used to express the style of files such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language). The main function of CSS is to beautify the page and work together with HTML, where HTML is mainly responsible for the structure of the page, while CSS focuses on the style and layout of the page.

[0068] v-for is a built-in directive in Vue.js that is used to render a list based on an array or object. The v-for directive can traverse each element of an array or object and render one or more template blocks for each element. It is a directive for building dynamic lists and tables.

[0069] Taking into account the complex interaction of the time range selection operation mode provided by the current front-end interactive page, the embodiments of the present application provide a time range selection method, system, electronic device and storage medium, which can simplify the interaction mode of time range selection, improve the efficiency of time range selection, and improve user experience.

[0070] The time range selection method, system, electronic device and storage medium provided in the embodiments of the present application are specifically described through the following embodiments. First, the time range selection method in the embodiments of the present application is described.

[0071] The time range selection method provided in the embodiment of the present application relates to the field of computer technology. The time range selection method provided in the embodiment of the present application can be applied to a terminal, can be applied to a server side, or can be software running in a terminal or a server side. In some embodiments, the terminal can be a smart phone, a tablet computer, a laptop computer, a desktop computer, etc.; the server side can be configured as an independent physical server, or can be configured as a server cluster or a distributed system composed of multiple physical servers, and can also be configured as a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application that implements the time range selection method, etc., but is not limited to the above forms.

[0072] The present application can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0073] In some embodiments of the present application, when a user needs to enter a time range in a certain input box, the user can click the input box to trigger the system to display a time selection area on the current page of the user terminal. The time selection area can be as follows: Fig.10 As shown, the time selection area includes a timeline 100, and a first slider 200 and a second slider 300 are arranged on the upper layer of the timeline. The user can move the first slider to the left to determine the start time, and move the second slider to the right to determine the end time. That is, the time period between the first slider and the second slider forms the time range selected by the user. This time selection interaction method has a simple operation process, and the user can quickly select the required time range, thereby improving the user experience.

[0074] Figure 1 is an optional flowchart of the time range selection method provided in the embodiment of the present application. Figure 1 The method may include but is not limited to steps S101 to S104.

[0075] Step S101, in response to a time range selection instruction, displaying a time selection area, wherein the time selection area includes a time axis, a first slider and a second slider;

[0076] Step S102, in response to a first operation instruction on a first slider on the time axis, determining a start time and updating a first pixel position of the first slider on the time axis;

[0077] Step S103, in response to a second operation instruction on a second slider on the time axis, determining an end time and updating a second pixel position of the second slider on the time axis;

[0078] Step S104, determining the target time range according to the start time and the end time.

[0079] In steps S101 to S104 shown in the embodiment of the present application, the backend system displays the timeline of the corresponding time interval in the time selection area in response to the front-end quick selection instruction, and then determines the start time and updates the first pixel position of the first slider on the timeline in response to the first operation instruction of the first slider on the timeline, and determines the end time and updates the second pixel position of the second slider on the timeline in response to the second operation instruction of the second slider on the timeline, and determines the target time range according to the start time and the end time. The embodiment of the present application displays the timeline of the corresponding time interval in the time selection area on the front-end interactive page, and respectively sets the first slider and the second slider on the timeline for the user to locate the start time and the end time, and updates the landing position of the first slider and the second slider on the timeline to show the user the start time and the end time identified by the backend, which not only enables accurate time selection, but also simplifies the interactive method of time range selection, improves the efficiency of time range selection, and improves user experience.

[0080] In step S101 of some embodiments, the time range selection instruction is used to trigger the display of the time selection area. For example, the time range selection instruction can be generated by the user clicking the time range input box of the current page. Fig.10 The time selection area includes a time axis 100, and a first slider 200 and a second slider 300 are arranged on the upper layer of the time axis. The time axis is used to display continuous time parameters. The time parameters can be in the form of dates such as year, month, and day, or in the form of hours, minutes, and seconds, and can be set according to the input time requirements. In this embodiment, the time axis whose time parameters are in the form of dates is also called the date axis, such as Fig.10 The time axis shown is the date axis, and the date axis displays the time parameters of 31 days between July 10 and August 9, wherein the time parameters can be displayed in two rows, the upper row displays the month, and the lower row displays the specific date. On the time axis, the first slider and the second slider are arranged between the two time parameters, and the first slider and the second slider are movable controls. The continuous time parameters between the first slider and the second slider form a time range, that is, the time parameter on the right side of the first slider is the start time, and the time parameter on the left side of the second slider is the end date. It can be understood that the overall direction of the time axis can be horizontal or vertical. The increasing direction of the continuous time parameters on the time axis can be from left to right or from right to left; or the increasing direction of the continuous time parameters on the time axis can be from top to bottom or from bottom to top, which is not specifically limited in the embodiment of the present application. The time axis can display the time parameters of 31 days, or it can display more or less time parameters, which is not specifically limited in the embodiment of the present application. The width of the time axis on the page determines the dragging boundary of the first slider and the second slider.

[0081] In step S102 of some embodiments, the first slider is a drag control that can change its position by dragging, and its position determines the start time of the selected time range. The user can click on the first slider and drag it to generate a first operation instruction, and the first operation instruction is used to indicate the current first pixel position of the first slider. The start time can be determined by matching the first pixel position with the pixel position range where each time parameter gap is located. Exemplarily, the time parameter gap refers to the range between the center line of the previous time parameter and the middle of the next time parameter. Furthermore, when the user drags the first slider to determine the start time, the date recognized by the system may be inaccurate due to operational errors. For example, the user needs to select July 20 as the start date. When dragging the first slider, the first slider is directly dragged to the vicinity of the pixel position of "July 20". The system may recognize that the start date is "July 21st". The system accurately places the first pixel position of the first slider between "July 20th" and "July 21st" according to the recognized start date, thereby showing the user that the start date recognized by the system is "July 21st". The user adjusts the first slider again based on the start date displayed by the system to locate the accurate start date.

[0082] In some embodiments, the draggable interval of the first slider can be limited, such as the first slider cannot exceed the left end of the time axis when dragged to the left, and the first slider cannot exceed the second pixel position of the second slider when dragged to the right. Fig.11 As shown in the dashed box.

[0083] In step S103 of some embodiments, the second slider is a drag control that can change its position by dragging, and its position determines the end time of the selected time range. The user can generate a second operation instruction by clicking and dragging the second slider, and the second operation instruction is used to indicate the current second pixel position of the second slider. The end time can be determined by matching the second pixel position with the pixel position range where each time parameter gap is located. Further, when the user drags the second slider to determine the end time, the date recognized by the system may be inaccurate due to operation errors. For example, the user needs to select August 2 as the end date. When dragging the second slider, the second slider is directly dragged to the vicinity of the pixel position where August 2 is located. The system may recognize that the end date is "August 1". The system accurately places the second pixel position of the second slider at the position between "August 1" and "August 2" according to the recognized end date, thereby showing the end date recognized by the system to the user as "August 1". The user adjusts the second slider again based on the end date displayed by the system, thereby locating the accurate end date.

[0084] In some embodiments, the draggable range of the second slider can be limited, such as the second slider cannot exceed the right end of the timeline when dragged to the right, and cannot exceed the first pixel position of the first slider when dragged to the left. Fig.12 As shown in the dashed box.

[0085] In step S104 of some embodiments, the time range between the first pixel position of the first slider and the second pixel position of the second slider forms the target time range selected by the user, that is, the start time is determined by the first pixel position, the end time is determined by the second pixel position, and the start time and the end time form the target time range. In this embodiment, the target time range selectable by the user includes the leftmost end to the rightmost end of the time axis, as shown in FIG. Fig.13 As shown in the dashed box.

[0086] In some embodiments, after the system identifies the target time range, the target time range can be automatically filled into the corresponding input box.

[0087] In some embodiments, the time range selection method of the embodiment of the present application may also include but is not limited to the following steps:

[0088] In response to an operation instruction on a first control on the time selection area, moving the time axis in a first direction according to a preset moving time length;

[0089] Alternatively, in response to an operation instruction on a second control on the time selection area, the time axis is moved in a second direction according to a preset moving time length.

[0090] Specifically, Fig.10 As shown, the time selection area is also provided with a first control 400 and a second control 500. The first control can be located at one end of the timeline, and the second control can be located at the other end of the timeline. For example, the first control is located at the leftmost end of the timeline, and the second control is located at the rightmost end of the timeline. The first control is used to reduce the time parameter displayed on the timeline. After the user clicks the first control, the date on the timeline can be moved to the past by a preset time length (for example, 7 days). The second control is used to increase the time parameter displayed on the timeline. After the user clicks the second control, the date on the timeline can be moved to the future by a preset time length (for example, 7 days).

[0091] According to some embodiments of the present application, the embodiments of the present application can be developed based on the Vue framework, and are suitable for setting the time range of a large-screen visualization developed based on Vue, and the event mechanism and component communication method provided by Vue.js are used to set and obtain the event range. Specifically, the 30 days before and after the day can be displayed horizontally on the interface in a tiled manner, and the daily information displays the month and day numbers of the corresponding date. For example, June 5th will be displayed as 6, 5, where the month 5 is on the top and the date 5 is on the bottom. A range drag module is provided, including a left drag control (i.e., a first slider) and a right drag control (i.e., a second slider). The landing points of the left and right side controls are rounded off after calculation and automatically placed on the left or right side of the target time point. The time range is determined by the position of the left and right side drag controls. For example, the left drag control is dragged to the left of June 3, and the right drag control is dragged to the right of June 7. The current target time range is from 0:00:00 on June 3 to 23:59:59 on June 7. Furthermore, the user can drag the selected time range as a whole. For example, the user can simultaneously select the left drag control and the right drag control of the range drag module to move the target time range so that the target time range can be dragged to the left as a whole by the required number of days (for example, the time range as a whole is subtracted by 2 days), or dragged to the right as a whole by the required number of days (for example, the time range as a whole is increased by 2 days). In addition, the present implementation provides a selectable time range click button, including the first control on the far left and the drop-in control on the far right. After clicking, the selectable time range moves to the past or to the future by a preset time length. The preset moving time length can be configured according to specific business needs, such as 7 days, 10 days, 15 days, etc.

[0092] See also Figure 2 In some embodiments, step S101 may include but is not limited to steps S201 to S202:

[0093] Step S201, in response to a time range selection instruction, initializing a time axis, and initializing a first slider and a second slider according to a default time interval;

[0094] Step S202, creating an instance container on the front-end page, and writing the initialized timeline, the first slider and the second slider into the instance container to obtain a time selection area displayed on the front-end page, wherein the first slider and the second slider are both located on the upper layer of the timeline.

[0095] Exemplarily, the system creates and initializes the timeline, the first slider, and the second slider in response to the time range selection instruction. The initialized timeline can be a time parameter showing 30 days before and after the current time. The default time interval can be the left and right of the current time, that is, the positions of the initialized first slider and the second slider are located on the left and right sides of the current date, respectively. The date axis can be set to relative positioning (position:relative), and the sliders can be set to absolute positioning (position:absolute). An instance container is created on the front-end page, and instances of the timeline, the first slider, and the second slider are written into the instance container to obtain a time selection area displayed on the front-end page. The time selection area can display the timeline, the first slider, and the second slider in the initial state, and the first slider and the second slider are stacked on the timeline.

[0096] Furthermore, in response to the time range selection instruction, the system can further create instances of the first control and the second control, and write the instances into the above instance container, so that the time selection area can also display the first control and the second control.

[0097] See also Figure 3 In some embodiments, the time range selection method of the embodiment of the present application may also include but is not limited to steps S301 to S302:

[0098] Step S301, in response to the shortcut selection instruction, determining a corresponding configuration time interval;

[0099] Step S302: updating a first pixel position of a first slider on the time axis according to a configured time interval, or updating a second pixel position of a second slider on the time axis.

[0100] Exemplarily, the time selection area is also provided with quick selection controls such as "Same Day", "Last 7 Days", "Last 15 Days" and "Last 30 Days", and the user clicks on one of the quick selection controls to generate a quick selection instruction. In response to the quick selection instruction, the system determines the start time and the end time according to the parameters in the instruction and the preset rules, thereby configuring the time interval accordingly. For example, the start time corresponding to the "Same Day" instruction is the same day, and the start time corresponding to the "Last 7 Days" instruction is 7 days before the same day, and the end time is the same day, thereby obtaining the corresponding configuration time interval. In another example, the end time corresponding to the "Same Day" instruction is the same day, and the end time corresponding to the "Last 7 Days" instruction is 7 days after the same day, and the start time is the same day, thereby obtaining the corresponding configuration time interval. The preset rules or quick selection controls of this embodiment can be set as required, and this embodiment is not specifically limited.

[0101] Furthermore, the first pixel position of the first slider on the timeline is updated according to the configured time interval, or the second pixel position of the second slider on the timeline is updated, so that the first slider or the second slider can be quickly operated according to the quick selection instruction, thereby improving user operation efficiency.

[0102] See also Figure 4 In some embodiments, the first pixel position of the first slider on the time axis in step S102 is obtained through but not limited to steps S401 to S403:

[0103] Step S401, determining the first element position of the start time in the time array by traversing the time array;

[0104] Step S402, adjusting the position of the first element according to the first adjustment amount to obtain a first adjustment value;

[0105] Step S403, determining the first pixel position according to the first adjustment value, the single time relative width value and the time axis relative width value;

[0106] In this embodiment, the time parameters displayed on the time axis can be determined according to the time array, and dateList is defined as an array for storing time parameters, which is used for rendering the time axis and calculating the selected time range. Specifically, the time array dateList is created during initialization, and the vue built-in instruction v-for is used in combination with dateList to create a date axis of 31 days before and after the current time, and the width of a single date block dayWidth and the width of the date axis totalWidth are determined at the same time, in pixels px.

[0107] In this embodiment, when the system determines the start date (for example, the current day is determined as the start date when the first slider is initialized), the specific calculation process of the first pixel position of the first slider on the date axis is:

[0108] S11, the system determines the start date to be located, for example, during initialization, the start date startTime is set to the current date;

[0109] S12, find out the array subscript index of startTime in dateList by traversing (i.e., the first element position, indicating the sequence number of the start date in the time array);

[0110] S13, adjusting index according to the first adjustment amount to determine an initial left value (i.e., the first adjustment value). For example, the initial left value may be index+0.1. Adding the first adjustment amount 0.1 to index may cause the first slider to be located to the left of the current start date. The first adjustment amount may be set according to specific display conditions. In this embodiment, the first adjustment amount may be adjusted to a value in the range of 0.05 to 0.4.

[0111] S14, calculating the final position finalLeft (i.e., the first pixel position) of the first slider according to the initial left value and its proportion on the date axis, the formula is:

[0112] finalLeft=(Number((100 / 31).toFixed(5))*left*totalWidth) / 100;

[0113] Among them, (100 / 31) represents the relative width value of a single time, 100 is the display width range of the preset time axis on the display screen, and 31 represents the time parameter that the time axis displays a total of 31 days; totalWidth is the fixed width of the time axis, and totalWidth / 100 is the relative width value of the time axis, indicating that the time axis is limited to a certain proportion or range for display.

[0114] S15, using the calculated finalLeft as the final left value in the CSS style of the first slider, thereby positioning the first slider to the left of the start date.

[0115] See also Figure 5 In some embodiments, the second pixel position of the second slider on the time axis in step S103 is obtained by, but not limited to, steps S501 to S503:

[0116] Step S501, determining the second element position of the end time in the time array by traversing the time array;

[0117] Step S502, adjusting the position of the second element according to the second adjustment amount to obtain a second adjustment value;

[0118] Step S503: determining the second pixel position according to the second adjustment value, the time axis limited width value, the single time relative width value and the time axis relative width value.

[0119] In this embodiment, when the system determines the end date (for example, the current day is determined as the end date when the first slider is initialized), the specific calculation process of the second pixel position of the second slider on the date axis is:

[0120] S21, the system determines the end date to be located, for example, the end date endTime is set to the current date during initialization;

[0121] S22, find out the array subscript index of endTime in dateList by traversing (i.e., the second element position, indicating the sequence number of the end date in the time array);

[0122] S23, adjusting the index according to the second adjustment amount to determine an initial right value (i.e., the second adjustment value). For example, the initial right value may be index+0.9. Adding the second adjustment amount 0.9 to the index may cause the second slider to be located to the right of the current end date. The second adjustment amount may be set according to specific display conditions. In this embodiment, the second adjustment amount may be adjusted to a value in the range of 0.6 to 0.95.

[0123] S24, calculating the final position finalRight (i.e., the second pixel position) of the second slider according to the initial right value and its proportion on the date axis, the formula is:

[0124] finalRight=((100-Number((100 / 31).toFixed(5))*right)*totalWidth) / 100;

[0125] Among them, (100 / 31) represents the relative width value of a single time, 100 is the display width range of the preset time axis on the display screen (that is, the time axis limited width value), and 31 represents the time parameter that the time axis displays a total of 31 days; totalWidth is the fixed width of the time axis, and totalWidth / 100 is the relative width value of the time axis, indicating that the time axis is limited to a certain proportion or range for display.

[0126] S25, using the calculated finalRight as the final finalRight value in the CSS style of the second slider, thereby positioning the second slider to the right of the end date.

[0127] See also Figure 6 In some embodiments, step S102 may include but is not limited to steps S601 to S604:

[0128] Step S601, in response to a first operation instruction on a first slider on the time axis, determining a first operation position of an operation point on a front page, and subtracting the first operation position from a reference position of a reference end of the time axis relative to a reference position of the front page to obtain a first pixel position of the first slider;

[0129] Step S602, determining a first array subscript value according to a ratio of a first pixel position to a time axis relative width value and a single time relative width value;

[0130] Step S603, querying the time array according to the first array index value to determine the start time;

[0131] Step S604: update the first pixel position of the first slider on the time axis according to the start time.

[0132] In this embodiment, when the user moves the first slider, the time scale represented by the current landing point is calculated based on the relative position of the first slider landing point and the date axis, accurate to the day, so as to identify the start date selected by the user. Further, based on the start time identified by the system, the landing point is returned to the left side of the identified start time through calculation. The specific process is as follows:

[0133] S31, when the user drags the first slider, the system calculates the current first pixel position of the first slider in real time according to the leftmost relative page position boxInfoX (i.e., reference position) of the date axis and the page position eventX (i.e., first operation position) of the mouse point on the first slider, and the formula is: finalLeft=eventX–boxInfoX. It can be understood that in this embodiment, the leftmost end can be selected as the reference end and the display position of the leftmost end can be used as the reference position, or the rightmost end can be selected as the reference end and the display position of the rightmost end can be used as the reference position.

[0134] S32, when the dragging of the first slider ends, the first array subscript value corresponding to the dateList array is determined according to finalLeft, so that the corresponding date can be queried according to the first array subscript value as the start date. Specifically, timeUnit is defined to represent the proportion of a single date on the date axis:

[0135] timeUnit=100 / 31;

[0136] The first array index value startIndex is:

[0137] startIndex=Math.floor(((finalLeft / boxInfoWidth)*100) / timeUnit);

[0138] Among them, boxInfoWidth represents the relative width of the displayed time axis.

[0139] S33, according to the first array index value startIndex, the start date of system recognition can be determined, and based on the recognition, steps S11 to S15 are further executed to set the left value in the slider CSS style, thereby achieving the correct return of the landing point.

[0140] See also Figure 7 In some embodiments, step S103 may include but is not limited to steps S701 to S704:

[0141] Step S701, in response to a second operation instruction on a second slider on the time axis, determining a second operation position of the operation point on the front page, and subtracting the second operation position from a reference position of the reference end of the time axis relative to the front page to obtain a second pixel position of the second slider;

[0142] Step S702, determining a second array subscript value according to a ratio of a second pixel position to a time axis relative width value and a single time relative width value;

[0143] Step S703, query the time array according to the second array index value to determine the end time;

[0144] Step S704: update the second pixel position of the second slider on the time axis according to the end time.

[0145] In this embodiment, when the user moves the second slider, the time scale represented by the current landing point is calculated based on the relative position of the second slider landing point and the date axis, accurate to the day, so as to identify the end date selected by the user. Further, based on the end time identified by the system, the landing point is returned to the right side of the identified end time through calculation. The specific process is as follows:

[0146] S41, when the user drags the second slider, the system calculates the current second pixel position of the second slider in real time according to the leftmost relative page position boxInfoX of the date axis (i.e., the reference position) and the page position eventX of the mouse point on the second slider (i.e., the second operation position), and the formula is: finalRight = (eventX-boxInfoX).

[0147] S42, when the dragging of the second slider ends, the corresponding second array subscript value in the dateList array is determined according to finalRight, so that the corresponding date can be queried according to the second array subscript value as the end date. Specifically, timeUnit is defined to represent the proportion of a single date on the date axis:

[0148] timeUnit=100 / 31;

[0149] The second array index value endIndex is:

[0150] endIndex=Math.floor(((finalRight / boxInfoWidth)*100) / timeUnit);

[0151] S43, the end date of system recognition can be determined according to the second array index value endIndex, and based on the recognition, steps S21 to S125 are further executed to set the right value in the slider CSS style, thereby achieving the correct return of the landing point.

[0152] According to some embodiments of the present application, when the user clicks the quick selection control on the time selection area, the system determines the new start time and the new end time according to the configured time interval corresponding to the quick selection instruction, and then executes the above steps S11 to S15 to set the left value in the slider CSS style to set the first slider to the left of the new start time, and executes the above steps S21 to S25 to set the right value in the slider CSS style to set the second slider to the right of the new end time.

[0153] According to some embodiments of the present application, the user can click the first control and the second control on the left and right ends of the date axis to move the date range on the current date axis to the past / future by 7 days (or other number of days), generate a new dateList, traverse the dateList through the vue built-in instruction v-for to render a new date axis, execute steps S11 to S15 and steps S21 to S25, and re-render the selected date range on the new date axis.

[0154] See also Figure 8 , the embodiment of the present application also provides a time range selection system, including:

[0155] A first module is used to display a time selection area in response to a time range selection instruction, wherein the time selection area includes a time axis, a first slider and a second slider;

[0156] A second module is used to determine a start time and update a first pixel position of the first slider on the time axis in response to a first operation instruction on the first slider on the time axis;

[0157] A third module is used to determine the end time and update the second pixel position of the second slider on the time axis in response to a second operation instruction on the second slider on the time axis;

[0158] The fourth module is used to determine the target time range according to the start time and the end time.

[0159] It can be understood that the contents of the above-mentioned time range selection method embodiment are applicable to the present system embodiment, the functions specifically implemented by the present system embodiment are the same as those in the above-mentioned time range selection method embodiment, and the beneficial effects achieved are also the same as those achieved by the above-mentioned time range selection method embodiment.

[0160] The embodiment of the present application also provides an electronic device, the electronic device comprising: a memory, a processor, a program stored in the memory and executable on the processor, and a data bus for realizing connection and communication between the processor and the memory, and the program is executed by the processor to realize the above-mentioned time range selection method. The electronic device can be any intelligent terminal including a tablet computer, a car computer, etc.

[0161] See also Fig. 9 , Fig. 9 The hardware structure of an electronic device of another embodiment is illustrated, and the electronic device includes:

[0162] The processor 901 may be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (Application Specific Integrated Circuit, ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of the present application;

[0163] The memory 902 may be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 902 may store an operating system and other application programs. When the technical solution provided in the embodiment of this specification is implemented by software or firmware, the relevant program code is stored in the memory 902, and the processor 901 calls and executes the time range selection method of the embodiment of this application;

[0164] Input / output interface 903, used to implement information input and output;

[0165] Communication interface 904, used to realize communication interaction between the device and other devices, which can be realized by wired mode (such as USB, network cable, etc.) or wireless mode (such as mobile network, WIFI, Bluetooth, etc.);

[0166] A bus 905 that transmits information between various components of the device (e.g., the processor 901, the memory 902, the input / output interface 903, and the communication interface 904);

[0167] The processor 901 , the memory 902 , the input / output interface 903 and the communication interface 904 are connected to each other in communication within the device via a bus 905 .

[0168] An embodiment of the present application also provides a storage medium, which is a computer-readable storage medium used for computer-readable storage. The storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the above-mentioned time range selection method.

[0169] The memory, as a non-transient computer-readable storage medium, can be used to store non-transient software programs and non-transient computer executable programs. In addition, the memory may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some embodiments, the memory may optionally include a memory remotely disposed relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0170] The embodiments described in the embodiments of the present application are intended to more clearly illustrate the technical solutions of the embodiments of the present application and do not constitute a limitation on the technical solutions provided in the embodiments of the present application. Those skilled in the art will appreciate that with the evolution of technology and the emergence of new application scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.

[0171] Those skilled in the art will appreciate that the technical solutions shown in the figures do not constitute a limitation on the embodiments of the present application, and may include more or fewer steps than shown in the figures, or a combination of certain steps, or different steps.

[0172] The system embodiments described above are merely illustrative, and the units described as separate components may or may not be physically separated, that is, they may be located in one place or distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the present embodiment.

[0173] Those skilled in the art will appreciate that all or some of the steps in the methods disclosed above, and the functional modules / units in the systems and devices may be implemented as software, firmware, hardware, or a suitable combination thereof.

[0174] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present application and the above-mentioned drawings 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 of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0175] It should be understood that in the present application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the objects associated before and after are in an "or" relationship. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.

[0176] In the several embodiments provided in the present application, it should be understood that the disclosed systems and methods can be implemented in other ways. For example, the system embodiments described above are only schematic. For example, the division of the above 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 through some interfaces, indirect coupling or communication connection of systems or units, which can be electrical, mechanical or other forms.

[0177] The units described above 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.

[0178] 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.

[0179] 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, 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 multiple instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of various embodiments of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (Read-Only Memory, referred to as ROM), random access memory (Random Access Memory, referred to as RAM), disk or optical disk and other media that can store programs.

[0180] The preferred embodiments of the present invention are described above with reference to the accompanying drawings, but the scope of the rights of the present invention is not limited thereto. Any modification, equivalent substitution and improvement made by a person skilled in the art without departing from the scope and essence of the present invention should be within the scope of the rights of the present invention.

Claims

1. A time range selection method, It is characterized in that The following steps are involved: In response to the time range selection instruction, displaying a time selection area, wherein the time selection area includes a time axis, a first slider, and a second slider; In response to a first operation instruction on a first slider on the timeline, determining a start time and updating a first pixel position of the first slider on the timeline; In response to a second operation instruction on a second slider on the timeline, determining an end time and updating a second pixel position of the second slider on the timeline; A target time range is determined according to the start time and the end time.

2. The time range selection method according to claim 1, It is characterized in that The time range selection method further comprises the following steps: In response to an operation instruction on a first control on the time selection area, moving the time axis in a first direction according to a preset moving time length; Alternatively, in response to an operation instruction on a second control on the time selection area, the time axis is moved in a second direction according to a preset moving time length.

3. The time range selection method according to claim 1, It is characterized in that The step of displaying a time selection area in response to a time range selection instruction comprises the following steps: In response to the time range selection instruction, the time axis is initialized, and the first slider and the second slider are initialized according to a default time interval; An instance container is created on the front-end page, and the initialized timeline, the first slider and the second slider are written into the instance container to obtain a time selection area displayed on the front-end page, wherein the first slider and the second slider are both located on the upper layer of the timeline.

4. The time range selection method according to claim 3, It is characterized in that The time range selection method further comprises the following steps: In response to the quick selection instruction, determining a corresponding configuration time interval; A first pixel position of a first slider on the time axis is updated according to the configured time interval, or a second pixel position of a second slider on the time axis is updated.

5. The time range selection method according to claim 1, It is characterized in that The time parameters displayed by the time axis are stored in a time array; The first pixel position of the first slider on the time axis is obtained by the following steps: Determine the first element position of the start time in the time array by traversing the time array; Adjust the position of the first element according to a first adjustment amount to obtain a first adjustment value; Determine a first pixel position according to the first adjustment value, a single time relative width value, and a time axis relative width value; The second pixel position of the second slider on the time axis is obtained by the following steps: Determine the second element position of the end time in the time array by traversing the time array; Adjust the position of the second element according to a second adjustment amount to obtain a second adjustment value; The second pixel position is determined according to the second adjustment value, the time axis limited width value, the single time relative width value and the time axis relative width value.

6. The time range selection method according to claim 5, It is characterized in that The step of determining a start time and updating a first pixel position of the first slider on the time axis in response to a first operation instruction on the first slider on the time axis comprises the following steps: In response to a first operation instruction on a first slider on the time axis, determining a first operation position of an operation point on a front page, and subtracting the first operation position from a reference position of a reference end of the time axis relative to a reference position of the front page to obtain a first pixel position of the first slider; Determine a first array subscript value according to a ratio of the first pixel position to the time axis relative width value and a single time relative width value; Query the time array according to the first array subscript value to determine the start time; A first pixel position of the first slider on the time axis is updated according to the start time.

7. The time range selection method according to claim 5, It is characterized in that The step of determining the end time and updating the second pixel position of the second slider on the time axis in response to the second operation instruction on the second slider on the time axis comprises the following steps: In response to a second operation instruction on a second slider on the time axis, determining a second operation position of the operation point on the front page, and subtracting the second operation position from a reference position of the reference end of the time axis relative to the front page to obtain a second pixel position of the second slider; Determine the second array subscript value according to the ratio of the second pixel position to the time axis relative width value and the single time relative width value; Query the time array according to the second array subscript value to determine the end time; A second pixel position of the second slider on the time axis is updated according to the end time.

8. A time range selection system, It is characterized in that include: A first module, configured to display a time selection area in response to a time range selection instruction, wherein the time selection area includes a time axis, a first slider, and a second slider; A second module is used to determine a start time and update a first pixel position of the first slider on the time axis in response to a first operation instruction on the first slider on the time axis; A third module is used to determine an end time and update a second pixel position of the second slider on the time axis in response to a second operation instruction on the second slider on the time axis; The fourth module is used to determine the target time range according to the start time and the end time.

9. An electronic device, It is characterized in that The electronic device includes a memory, a processor, a program stored in the memory and executable on the processor, and a data bus for realizing connection and communication between the processor and the memory. When the program is executed by the processor, the steps of the method described in any one of claims 1 to 7 are realized.

10. A storage medium, the storage medium being a computer-readable storage medium, used for computer-readable storage, It is characterized in that The storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the steps of any one of claims 1 to 7.

Images