Switch panel port multi-selection method, equipment and medium

Abstract

The invention discloses a switch panel port multi-selection method, equipment and a medium, belongs to the technical field of switch ports, and is used for solving the problems that the selection of the existing switch panel ports is relatively single, batch port selection is difficult to perform more conveniently, one-to-one selection of single ports is relatively tedious, and the efficiency is high. And interaction experience of the user is not facilitated. The method comprises the steps of adding a mouse operation event based on relative positioning of port panel elements of a switch in a park; the mouse operation event comprises a mouser down event, a mouser move event, a mouser up event and a mouser ave event, and the mouse operation event comprises a mouser down event, a mouser move event, a mouser up event and a mouser ave event; performing addition configuration of related operation variables and position variables on sub-level elements of the port panel elements, and configuring mask layers of the sub-level elements; performing trigger control in a related assignment state and a selected state on the mouse operation event, and determining an event processing completion instruction; and batch selection of the port panel elements is completed.

Description

Technical Field

[0001] The present application relates to the field of switch ports, and in particular to a switch panel port multi-selection method, device and medium. Background Art

[0002] In the campus network web management system, the switch panel ports are displayed graphically. When operations such as issuing configurations to ports are required, operations are usually performed by clicking. When users need to perform batch operations on multiple ports, they need to select individual ports one by one.

[0003] In the existing switch panel port operation, it is necessary to click on the ports one by one to select them, which makes it difficult to achieve batch selection. In actual use, the operation is extremely inconvenient, and it is difficult to drag the required port range to achieve multiple selections. The time required to select ports is long and cumbersome, which has a negative impact on the user's interactive experience. Summary of the invention

[0004] The embodiments of the present application provide a switch panel port multi-selection method, device and medium, which are used to solve the following technical problems: the existing switch panel port selection is relatively single, and it is difficult to select batch ports more conveniently. The one-by-one selection of a single port is relatively cumbersome, which is not conducive to the user's interactive experience.

[0005] The present application embodiment adopts the following technical solutions:

[0006] On the one hand, an embodiment of the present application provides a switch panel port multi-selection method, including: adding mouse operation events based on the relative positioning of the port panel elements of the switches in the campus; wherein the mouse operation events include: mousedown event, mousemove event, mouseup event and mouseleave event; adding and configuring relevant operation variables and position variables to the child elements of the port panel elements, and configuring a mask layer of the child elements; through the mouse position attribute of the mask layer, triggering control of the mouse operation events in the assignment state and the selection state is performed to determine the event processing completion instruction; based on the event processing completion instruction, completing the batch selection of the port panel elements.

[0007] The embodiment of the present application enables users to achieve multiple selections by dragging the required port range with the mouse through batch selection processing of the switch port panel elements, so that ports can be selected more quickly and conveniently, thereby improving the user's interactive experience. The tedious process of clicking on ports one by one is avoided, thereby improving operational efficiency. By triggering control through the mouse position attribute of the mask layer, the user's selection intention can be determined more accurately to avoid misselection or omission of ports. It is convenient for users to select multiple ports at one time, and is suitable for scenarios where multiple ports need to be operated at the same time. This method reduces the user's operating steps and cognitive burden, making port selection simpler and easier to understand. At the same time, this efficient multi-selection method can save time and improve work efficiency, especially for large-scale campus network management.

[0008] In a feasible implementation, based on the relative positioning of the port panel elements of the switches in the campus, mouse operation events are added, specifically including: configuring the port panel elements of each campus network device to the relative positioning; based on the relative positioning, adding the mouse operation events to the corresponding port panel elements.

[0009] In a feasible implementation manner, the operation variables and position variables are added and configured for the child elements of the port panel element to configure the mask layer of the child elements, specifically including: adding an initial mask layer to the child elements of the port panel element; configuring the initial mask layer to be absolutely positioned and adding a background color to the initial mask layer; configuring the first initial value of the position variable as an object parameter, and the object parameter is zero; wherein the attributes of the object parameter include: startX, startY, endX and endY; configuring the second initial value of the operation variable as a false attribute; and adding and configuring the initial mask layer based on the first initial value of the position variable and the second initial value of the operation variable to obtain the mask layer of the child element.

[0010] In a feasible implementation, after adding and configuring relevant operation variables and position variables to the child elements of the port panel element and configuring the mask layer of the child elements, the method further includes: calculating the position attributes of the mask layer through the position variables of the mask layer, and displaying the mask layer based on the position attributes; wherein the position attributes include: the width, height, left side and top side of the mask layer; the width is endX minus startX in the object parameters; the height is endY minus startY; the left side is endX minus the width; and the top side is endY minus the height.

[0011] In a feasible implementation manner, the mouse position attribute of the mask layer is used to perform trigger control on the mouse operation event in the assignment state and the selection state, and determine the event processing completion instruction, including: when processing the mousedown event in the mouse operation event, obtaining the current mouse coordinates under the mouse position attribute; wherein the current mouse coordinates include: offsetX and offsetY; the mousedown event is an event triggered when the user presses the mouse button; the offsetX and offsetY in the current mouse coordinates are assigned to the startX and startY of the position variable in the mask layer respectively; the operation variable in the mask layer is modified to the true attribute; based on the assignment state of the position variable and the attribute modification of the operation variable, the mousedown event completion instruction is determined.

[0012] In a feasible implementation, the mouse position attribute of the mask layer is used to perform trigger control on the mouse operation event in the assignment state and the selection state, and determine the event processing completion instruction, including: when processing the mousemove event, based on the offsetX and offsetY in the current mouse coordinates obtained, respectively assigning endX and endY of the position variable in the mask layer; wherein the mousemove event is an event triggered when the user moves the mouse on the page; through the global browsing function of the port panel element, all single port elements in the port panel element are obtained; through getBoundingClientRe ct technology, obtain the current mask layer coordinates within the selected range of the current mask layer; traverse all the single port elements, and obtain the port element coordinates of each single port element through the getBoundingClientRect technology; compare the port element coordinates with the current mask layer coordinates within the coordinate range, and determine a number of the single port elements in the current mask layer coordinates; obtain the port data corresponding to the single port elements within the coordinate range, and store the port data in the selected array; based on the selected array, determine the selected single port element as selected, and determine the mousemove event completion instruction.

[0013] In a feasible implementation manner, the mouse position attribute of the mask layer is used to perform trigger control on the mouse operation event in the assignment state and the selected state, and determine the event processing completion instruction, including: when processing the mouseup event, based on the mousemove event completion instruction in the selected state, the final offsetX and the final offsetY in the final mouse coordinates are assigned to the final endX and the final endY of the position variable in the mask layer respectively; wherein the mouseup event is an event triggered when the user releases the mouse button; based on the final endX and the final endY of the position variable, the mouseup event completion instruction is determined.

[0014] In a feasible implementation manner, the mouse position attribute of the mask layer is used to trigger the mouse operation event in the assignment state and the selection state, and determine the event processing completion instruction, which specifically includes: when processing the mouseleave event, modifying the operation variable in the mask layer to a false attribute; resetting the attributes startX, startY, endX and endY of the object parameter in the position variable to zero, and performing data hiding processing on the mask layer; based on the reset processing of the position variable and the attribute modification of the operation variable, determining the mouseleave event completion instruction; based on the mousedown event completion instruction, the mousemove event completion instruction, the mouseup event completion instruction and the mouseleave event completion instruction, obtaining the event processing completion instruction for the mouse operation event.

[0015] In the second aspect, an embodiment of the present application also provides a switch panel port multi-selection device, the device comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor so that the at least one processor can execute a switch panel port multi-selection method described in any of the above embodiments.

[0016] In a third aspect, an embodiment of the present application also provides a non-volatile computer storage medium, characterized in that the storage medium is a non-volatile computer-readable storage medium, and the non-volatile computer-readable storage medium stores at least one program, each of which includes instructions, and when the instructions are executed by a terminal, the terminal executes a switch panel port multi-selection method described in any of the above embodiments.

[0017] The present application provides a switch panel port multi-selection method, device and medium. Compared with the prior art, the embodiments of the present application have the following beneficial technical effects:

[0018] 1. Improve operational efficiency: By adding mouse operation events and mask layers, users can more conveniently perform multiple port selection operations, avoiding the tedious process of clicking ports one by one and improving operational efficiency.

[0019] 2. Enhanced user experience: This intuitive multi-selection method enables users to select the required ports more quickly and accurately, reducing the possibility of operational errors, thereby improving the user experience.

[0020] 3. Simplify the configuration process: add and configure the operation variables and position variables to the child elements of the port panel element, so that the mask layer can be triggered and controlled according to the mouse position, simplifying the multi-selection configuration process.

[0021] 4. Improve selection accuracy: Trigger control through the mouse position attribute of the mask layer can more accurately determine the user's selection intention and avoid misselection or omission of ports.

[0022] 5. Batch selection function: This method can realize batch selection of port panel elements, making it convenient for users to select multiple ports at one time. It is suitable for scenarios where multiple ports need to be operated simultaneously.

[0023] 6. Flexibility and scalability: This approach can be customized and extended according to specific needs, such as adding other mouse operation events or further optimizing the selection logic to meet different application scenarios.

[0024] 7. Reduce operational complexity: Compared with the traditional port selection method, this method reduces the user's operating steps and cognitive burden, making port selection simpler and easier to understand.

[0025] 8. Improve work efficiency: When frequent port selection is required, this efficient multi-selection method can save time and improve work efficiency, especially for large-scale campus network management. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the drawings required for use in the embodiments or the prior art descriptions are briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0027] Figure 1 A flow chart of a switch panel port multi-selection method provided in an embodiment of the present application;

[0028] Figure 2 A schematic diagram of batch processing of switch ports provided in an embodiment of the present application;

[0029] Figure 3 A schematic diagram of the structure of a switch panel port multi-selection device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0030] In order to enable those skilled in the art to better understand the technical solutions in this application, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the drawings in the embodiments of this application. Obviously, the described embodiments are only part of the embodiments of this application, not all of them. Based on the embodiments of this specification, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of this application.

[0031] The present application embodiment provides a switch panel port multiple selection method, such as Figure 1 As shown, the switch panel port multiple selection method specifically includes steps S101-S104:

[0032] S101. Add mouse operation events based on the relative positioning of the port panel elements of the switches in the campus; wherein the mouse operation events include: mousedown event, mousemove event, mouseup event and mouseleave event.

[0033] Specifically, it is necessary to first configure the port panel element of each campus network device as relative positioning, and then add a mouse operation event to the port panel element based on the relative positioning.

[0034] In one embodiment, Figure 2 A schematic diagram of batch processing of switch ports provided in an embodiment of the present application is shown in FIG. Figure 2 As shown in the figure, the port panel element of each campus network device is set to relative positioning (position:relative), and then mousedown (press), mousemove (mouse move), mouseup (mouse release), and mouseleave (mouse leave) events are added to the port panel element.

[0035] S102: Add and configure relevant operation variables and position variables to the child elements of the port panel element, and configure a mask layer of the child elements.

[0036] Specifically, an initial mask layer is added to the child element of the port panel element; the initial mask layer is configured to be absolutely positioned and a background color is added to the initial mask layer.

[0037] Furthermore, the first initial value of the position variable is configured as an object parameter, and the object parameter is zero; wherein the attributes of the object parameter include: startX, startY, endX and endY.

[0038] Furthermore, the second initial value of the operation variable is configured as a false attribute.

[0039] Furthermore, based on the first initial value of the position variable and the second initial value of the operation variable, the initial mask layer is added and configured to obtain the mask layer of the child element.

[0040] In one embodiment, it is also necessary to add a mask layer to the child element of the port panel element. The initial mask layer is absolutely positioned (position:absolute), and a background color (background:#47e5f6) is added. The initial width and height are both 0 (width:0, height:0), and it is not displayed by default. Add a position variable (mousePosition) and an operation variable (isDragMouse). The initial value of the position variable mousePosition is an object, and the object contains four properties: startX, startY, endX, and endY. The initial values ​​are all 0. The initial value of the operation variable isDragMouse is false, indicating that the drag box selection has not yet been performed.

[0041] Furthermore, the position attribute of the mask layer is calculated through the position variable of the mask layer, and the mask layer is displayed based on the position attribute, wherein the position attribute includes: the width, height, left side and top side of the mask layer.

[0042] Furthermore, the width is endX minus startX in the object parameters; the height is endY minus startY. The left side is endX minus the width. The top side is endY minus the height.

[0043] In one embodiment, the position of the mask layer is calculated by the position attribute of the position variable mousePosition and the mask layer is displayed to indicate the selected range. The width of the mask layer is endX of mousePosition minus startX, the height is endY of mousePosition minus startY, left is endX minus the width of the mask layer, and top is endY minus the height of the mask layer.

[0044] S103, using the mouse position attribute of the mask layer, performing trigger control on the mouse operation event in the assignment state and the selection state, and determining an event processing completion instruction.

[0045] Specifically, when processing the mousedown event in the mouse operation event, obtain the current mouse coordinates under the mouse position attribute. Among them, the current mouse coordinates include: offsetX and offsetY. The mousedown event is an event triggered when the user presses the mouse button. The offsetX and offsetY in the current mouse coordinates are assigned to the startX and startY of the position variable in the mask layer respectively. The operation variable in the mask layer is modified to the true attribute. Based on the assignment state of the position variable and the attribute modification of the operation variable, determine that the mousedown event is completed.

[0046] In one embodiment, a mousedown event is processed, which is an event triggered when a user presses a mouse button. When the user presses the mouse, the current mouse coordinates are obtained, offsetX (direction displacement x) and offsetY (direction displacement x) are obtained and assigned to startX and startY of mousePosition respectively, and then the operation variable isDragMouse is modified to true, indicating that drag selection has been performed.

[0047] When processing the mousemove event, based on the offsetX and offsetY in the current mouse coordinates, assign them to the endX and endY of the position variables in the mask layer. The mousemove event is triggered when the user moves the mouse on the page. Through the global browsing function of the port panel element, all single port elements in the port panel element are obtained. Through the getBoundingClientRect technology, the current mask layer coordinates under the selected range of the current mask layer are obtained.

[0048] Furthermore, all the single port elements are traversed, and the port element coordinates of each single port element are obtained through the getBoundingClientRect technology.

[0049] Furthermore, the port element coordinates are compared with the current mask layer coordinates within the range to which the coordinates belong, and a number of single port elements in the current mask layer coordinates are determined.

[0050] Further, the port data corresponding to the single port element in the range of coordinates is obtained, and the port data is stored in the selected array. Based on the selected array, the selected single port element is determined to be in the selected state, and a mousemove event completion instruction is determined.

[0051] In one implementation, the mousemove event is processed. The mousemove event is an event triggered when the user moves the mouse on the page. When the mouse moves, the current mouse coordinates of the mouse need to be obtained, and offsetX and offsetY are obtained and assigned to endX and endY of mousePosition respectively. At the same time, the selected data needs to be processed. All ports in the port panel element are obtained through the querySelectorAll of the port panel element (querySelectorAll returns all elements in the document that match the specified CSS selector and returns a NodeList object; the NodeList object represents a collection of nodes). Then, the coordinates of the mask layer are obtained through getBoundingClientRect, including left, right, top, and bottom. Then, all port elements are traversed, and the left, right, top, and bottom of each port element are obtained through getBoundingClientRect. By comparing whether the range of each port element is within the mask layer, if it is within the mask layer, the complete port data (the port data corresponding to a single port element) is obtained and the port data is stored in the selected array, and the port is modified to the selected state.

[0052] When processing the mouseup event, based on the mousemove event completion instruction in the selected state, the final offsetX and final offsetY in the final mouse coordinates are assigned to the final endX and final endY of the position variable in the mask layer, respectively. Among them, the mouseup event is an event triggered when the user releases the mouse button. Based on the final endX and final endY of the position variable, the mouseup event completion instruction is determined.

[0053] In one embodiment, a mouseup event is processed, which is an event triggered when the user releases the mouse button. When the user releases the mouse, it means that the user has completed the drag selection operation, and the final selection range needs to be obtained, and the final offsetX and offsetY of the mouse are assigned to endX and endY of mousePosition respectively.

[0054] When processing the mouseleave event, the operation variable in the mask layer is modified to the false attribute. The attributes startX, startY, endX and endY of the object parameter in the position variable are reset to zero, and the mask layer is processed for data hiding. Based on the reset processing of the position variable and the modification of the attribute of the operation variable, the mouseleave event completion instruction is determined.

[0055] In one embodiment, the mouseleave event is processed, which is an event triggered when the mouse leaves an element. When the user leaves the port element, it means that all operations have been completed. At this time, isDragMouse needs to be modified to the initial value false, indicating that dragging and selecting is not performed. At the same time, the properties startX, startY, endX, and endY of mousePosition need to be reset to 0 to hide the mask layer.

[0056] Furthermore, based on the mousedown event completion instruction, the mousemove event completion instruction, the mouseup event completion instruction, and the mouseleave event completion instruction, an event processing completion instruction regarding the mouse operation event is obtained.

[0057] S104: Based on the event processing completion instruction, batch selection of port panel elements is completed.

[0058] By utilizing the mousedown event completion instruction, mousemove event completion instruction, mouseup event completion instruction and mouseleave event completion instruction in the event processing completion instruction, batch selection of the port panels of the relevant switches can be completed, thereby selecting ports more conveniently and quickly, and improving the user's interactive experience.

[0059] In addition, the present application embodiment also provides a switch panel port multi-selection device, such as Figure 3 As shown, the switch panel port multi-selection device 300 specifically includes:

[0060] At least one processor 301. And a memory 302 in communication with the at least one processor 301. The memory 302 stores instructions that can be executed by the at least one processor 301, so that the at least one processor 301 can execute:

[0061] Based on the relative positioning of the port panel elements of the switches in the campus, mouse operation events are added; the mouse operation events include: mousedown event, mousemove event, mouseup event, and mouseleave event;

[0062] Add and configure the relevant operation variables and position variables to the child elements of the port panel element, and configure the mask layer of the child elements;

[0063] Through the mouse position attribute of the mask layer, the trigger control of the mouse operation event in the assignment state and the selection state is performed to determine the event processing completion instruction;

[0064] Based on the event processing completion instruction, batch selection of port panel elements is completed.

[0065] The embodiment of the present application enables users to achieve multiple selections by dragging the required port range with the mouse through batch selection processing of the switch port panel elements, so that ports can be selected more quickly and conveniently, thereby improving the user's interactive experience. The tedious process of clicking on ports one by one is avoided, thereby improving operational efficiency. By triggering control through the mouse position attribute of the mask layer, the user's selection intention can be determined more accurately to avoid misselection or omission of ports. It is convenient for users to select multiple ports at one time, and is suitable for scenarios where multiple ports need to be operated at the same time. This method reduces the user's operating steps and cognitive burden, making port selection simpler and easier to understand. At the same time, this efficient multi-selection method can save time and improve work efficiency, especially for large-scale campus network management.

[0066] Each embodiment in this application is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device and non-volatile computer storage medium embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiments.

[0067] The devices and media provided in the embodiments of the present application correspond one-to-one to the methods. Therefore, the devices and media also have similar beneficial technical effects as the corresponding methods. Since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media will not be repeated here.

[0068] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0069] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0070] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0071] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0072] The above describes specific embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0073] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the embodiments of the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the embodiments of the present application should be included in the scope of the claims of the present application.

Claims

1. A switch panel port multiple selection method, characterized in that: The method comprises: Based on the relative positioning of the port panel elements of the switches in the campus, mouse operation events are added; wherein the mouse operation events include: mousedown event, mousemove event, mouseup event and mouseleave event; Adding and configuring relevant operation variables and position variables to the child elements of the port panel element, and configuring a mask layer of the child elements; By using the mouse position attribute of the mask layer, the trigger control of the mouse operation event in the assignment state and the selection state is performed to determine the event processing completion instruction; Based on the event processing completion instruction, batch selection of the port panel elements is completed.

2. A switch panel port multiple selection method according to claim 1, characterized in that: Based on the relative positioning of the port panel elements of the switches in the campus, add mouse operation events, including: Configuring the port panel elements of each campus network device to be in the relative positioning; Based on the relative positioning, the mouse operation event is added correspondingly to the port panel element.

3. A switch panel port multiple selection method according to claim 1, characterized in that: Adding and configuring relevant operation variables and position variables to the child elements of the port panel element to configure the mask layer of the child elements specifically includes: Adding an initial mask layer to the child element of the port panel element; configuring the initial mask layer to be absolutely positioned and adding a background color to the initial mask layer; The first initial value of the position variable is configured as an object parameter, and the object parameter is zero; wherein the attributes of the object parameter include: startX, startY, endX and endY; Configuring the second initial value of the operation variable to be a false attribute; Based on the first initial value of the position variable and the second initial value of the operation variable, the initial mask layer is added and configured to obtain the mask layer of the child element.

4. A switch panel port multiple selection method according to claim 3, characterized in that: After adding and configuring the operation variables and the position variables to the child elements of the port panel element and configuring the mask layer of the child elements, the method further includes: Calculating the position attribute of the mask layer through the position variable of the mask layer, and displaying the mask layer based on the position attribute; The position attributes include: the width, height, left side and top side of the mask layer; The width is endX minus startX in the object parameters; the height is endY minus startY; the left side is endX minus the width; and the top side is endY minus the height.

5. A switch panel port multiple selection method according to claim 1, characterized in that: By using the mouse position attribute of the mask layer, the trigger control of the mouse operation event in the assignment state and the selection state is performed to determine the event processing completion instruction, including: When processing the mousedown event in the mouse operation event, the current mouse coordinates under the mouse position attribute are obtained; wherein the current mouse coordinates include: offsetX and offsetY; the mousedown event is an event triggered when the user presses the mouse button; Assign offsetX and offsetY in the current mouse coordinates to startX and startY of the position variables in the mask layer respectively; Modify the operation variable in the mask layer to true attribute; Based on the assignment state of the position variable and the property modification of the operation variable, a mousedown event completion instruction is determined.

6. A switch panel port multiple selection method according to claim 1, characterized in that: By using the mouse position attribute of the mask layer, the trigger control of the mouse operation event in the assignment state and the selection state is performed to determine the event processing completion instruction, including: When processing the mousemove event, based on the offsetX and offsetY in the current mouse coordinates obtained, the endX and endY of the position variable in the mask layer are assigned respectively; wherein the mousemove event is an event triggered when the user moves the mouse on the page; Obtain all single port elements in the port panel element through the global browsing function of the port panel element; Get the coordinates of the current mask layer within the selected range of the current mask layer through the getBoundingClientRect technology; Traversing all the single port elements, and obtaining the port element coordinates of each single port element through the getBoundingClientRect technology; Performing an inclusion comparison between the port element coordinates and the current mask layer coordinates within the coordinate range, and determining a number of the single port elements in the current mask layer coordinates; Obtaining port data corresponding to the single port element within the coordinate range, and storing the port data in a selected array; Based on the selected array, the selected single port element is determined to be in a selected state, and a mousemove event completion instruction is determined.

7. A switch panel port multiple selection method according to claim 1, characterized in that: By using the mouse position attribute of the mask layer, the trigger control of the mouse operation event in the assignment state and the selection state is performed to determine the event processing completion instruction, including: When processing the mouseup event, the instruction is completed based on the mousemove event in the selected state, and the final offsetX and the final offsetY in the final mouse coordinates are assigned to the final endX and the final endY of the position variable in the mask layer respectively; wherein the mouseup event is an event triggered when the user releases the mouse button; Based on the final endX and final endY of the position variable, a mouseup event completion instruction is determined.

8. A switch panel port multiple selection method according to claim 1, characterized in that: By using the mouse position attribute of the mask layer, the trigger control of the mouse operation event in the assignment state and the selection state is performed to determine the event processing completion instruction, which specifically includes: When processing the mouseleave event, modifying the operation variable in the mask layer to a false attribute; Reset the attributes startX, startY, endX and endY of the object parameters in the position variable to zero, and perform data hiding processing on the mask layer; Based on the reset processing of the position variable and the attribute modification of the operation variable, determining a mouseleave event completion instruction; Based on the mousedown event completion instruction, the mousemove event completion instruction, the mouseup event completion instruction and the mouseleave event completion instruction, the event processing completion instruction regarding the mouse operation event is obtained.

9. A switch panel port multi-selection device, characterized in that: The device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, so that the at least one processor can execute a switch panel port multi-selection method according to any one of claims 1-8.

10. A non-volatile computer storage medium, characterized in that: The storage medium is a non-volatile computer-readable storage medium, and the non-volatile computer-readable storage medium stores at least one program, each of which includes instructions, and when the instructions are executed by the terminal, the terminal executes a switch panel port multi-selection method according to any one of claims 1-8.

Images