A switch panel port multi-selection method, device and medium

Abstract

The application discloses a switch panel port multi-selection method and device and a medium, belongs to the technical field of switch ports, and aims to solve the technical problem that the existing switch panel port selection is relatively single, it is difficult to conveniently select batch ports, one-to-one selection of a single port is relatively cumbersome, and user interaction experience is not good. The method comprises the following steps: adding a mouse operation event based on the relative positioning of the port panel element of the switch in the park; the mouse operation event comprises a mousedown event, a mousemove event, a mouseup event and a mouseleave event; adding configuration of operation variables and position variables to the child elements of the port panel element, and configuring a mask layer of the child elements; triggering control of the mouse operation event in the assignment state and the selected state is performed, an event processing completion instruction is determined; and batch selection of the port panel element is completed.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of switch port, and particularly relates to a switch panel port multi-selection method, device and medium. BACKGROUND

[0002] In a web management system of a campus network, switch panel ports are displayed in a graphical manner. When a configuration is to be issued to the ports or other operations are to be performed on the ports, the user usually clicks to perform the operations. When the user needs to perform batch operations on multiple ports, the user needs to select the single ports one by one.

[0003] In the existing switch panel port operation, the ports need to be clicked one by one to be selected, and it is difficult to implement batch selection. In actual use, the operation is extremely inconvenient, it is difficult to drag the required port range to implement multi-selection, the time for selecting the ports is long and the operation is cumbersome, and the user's interactive experience is adversely affected. SUMMARY

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

[0005] The present application adopts the following technical solution:

[0006] In one aspect, the present application provides a switch panel port multi-selection method, including: adding a mouse operation event based on the relative positioning of port panel elements of a switch in a campus; wherein the mouse operation event includes a mousedown event, a mousemove event, a mouseup event and a mouseleave event; adding configuration of an operation variable and a position variable to a child element of the port panel element, and configuring a mask layer of the child element; triggering control of the mouse operation event in a value assignment state and a selected state through a mouse position attribute of the mask layer, and determining an event processing completion instruction; and completing batch selection of the port panel element based on the event processing completion instruction.

[0007] The embodiments of the present application can let the user use the mouse to drag the required port range to realize multiple selection, select the port more quickly and conveniently, and improve the user's interactive experience through batch selection processing of the switch port panel element. The cumbersome process of clicking the port one by one is avoided, and the operation efficiency is improved. The selection intention of the user can be determined more accurately through the mouse position attribute of the mask layer to trigger control, and the misselection or omission of the port is avoided. The user can select multiple ports at a time, which is suitable for the scene of simultaneously operating multiple ports. The method reduces the operation steps and cognitive burden of the user, and makes the port selection more simple and easy to understand. At the same time, this efficient multiple selection method can save time and improve work efficiency, especially for large-scale park network management.

[0008] In a feasible implementation, based on the relative positioning of the port panel element of the switch in the park, a mouse operation event is added, specifically including: configuring the port panel element of each park network device as the relative positioning; based on the relative positioning, adding the mouse operation event to the port panel element.

[0009] In a feasible implementation, the sub-element of the port panel element is configured with an operation variable and a position variable, and a mask layer of the sub-element is configured, specifically including: adding an initial mask layer to the sub-element of the port panel element; and configuring the initial mask layer as absolute positioning and adding a background color to the initial mask layer; configuring a 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 a second initial value of the operation variable as 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 configured to obtain the mask layer of the sub-element.

[0010] In a feasible implementation, after the sub-element of the port panel element is configured with an operation variable and a position variable, and the mask layer of the sub-element is configured, 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; wherein the position attribute includes: the width, height, left edge and top edge of the mask layer; the width is endX minus startX in the object parameter; the height is endY minus startY; the left edge is endX minus the width; and the top edge is endY minus the height.

[0011] In an implementation, the mouse operation event is triggered and controlled in relation to the assignment state and the selected state of the mouse position attribute of the mask layer, and an event processing completion instruction is determined, including: when processing the mousedown event in the mouse operation event, obtaining current mouse coordinates in the mouse position attribute; wherein the current mouse coordinates include offsetX and offsetY; the mousedown event is triggered when a user presses a mouse button; assigning offsetX and offsetY in the current mouse coordinates to startX and startY of a position variable in the mask layer, respectively; modifying an operation variable in the mask layer to a true attribute; based on the assignment state of the position variable and the attribute modification of the operation variable, determining a mousedown event completion instruction.

[0012] In an implementation, the mouse operation event is triggered and controlled in relation to the assignment state and the selected state of the mouse position attribute of the mask layer, and an event processing completion instruction is determined, including: when processing the mousemove event, assigning offsetX and offsetY in the obtained current mouse coordinates to endX and endY of a position variable in the mask layer, respectively; wherein the mousemove event is triggered when a user moves a mouse on a page; obtaining all single port elements in a port panel element through a global browsing function of the port panel element; obtaining current mask layer coordinates in a selected range of the current mask layer through a getBoundingClientRect technology; traversing all the single port elements, and obtaining port element coordinates of each single port element through the getBoundingClientRect technology; performing a range-included comparison between the port element coordinates and the current mask layer coordinates, and determining a plurality of single port elements in the current mask layer coordinates; obtaining port data corresponding to the single port elements in the range, and storing the port data in a selected array; based on the selected array, determining the selected single port elements to be in a selected state, and determining a mousemove event completion instruction.

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

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

[0015] In a second aspect, the embodiments of the present application further provide a switch panel port multi-selection device, the device comprising: at least one processor; and a memory in communication connection with the at least one processor; wherein the memory stores instructions executable by the at least one processor, so that the at least one processor can execute the switch panel port multi-selection method in any of the above embodiments.

[0016] In a third aspect, the embodiments of the present application further provide 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 the programs including instructions, which, when executed by a terminal, cause the terminal to execute the switch panel port multi-selection method 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. Improved operational efficiency: By adding mouse operation events and mask layers, users can more easily perform multiple selection operations on ports, avoiding the tedious process of clicking on each port one by one, and improving operational efficiency.

[0019] 2. Enhanced user experience: This intuitive multiple selection method allows users to quickly and accurately select the desired ports, reducing the likelihood of operational errors and improving user experience.

[0020] 3. Simplified configuration process: The addition of operation variables and position variables to the child elements of the port panel element allows the mask layer to be triggered and controlled based on mouse position, simplifying the configuration process for multiple selection.

[0021] 4. Improved selection accuracy: Triggering control through the mouse position attribute of the mask layer can more accurately determine the user's selection intent, avoiding misselection or omission of ports.

[0022] 5. Batch selection function: This method allows batch selection of port panel elements, making it easy for users to select multiple ports at once, suitable for scenarios where multiple ports need to be operated simultaneously.

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

[0024] 7. Reduced operational complexity: Compared to traditional port selection methods, this method reduces the number of user operation steps and cognitive burden, making port selection simpler and easier to understand.

[0025] 8. Improved work efficiency: In situations where port selection needs to be performed frequently, this efficient multiple selection method can save time and improve work efficiency, especially for large-scale park network management. BRIEF DESCRIPTION OF DRAWINGS

[0026] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings needed to be used in the embodiment or prior art description. Obviously, the drawings in the following description are only some embodiments described in the present application, and for those skilled in the art, other drawings can also be obtained without creative labor. In the drawings:

[0027] Figure 1 A flowchart of a switch panel port multiple selection method is provided for the embodiments of the present application;

[0028] Figure 2 A schematic diagram of a switch port batch processing is provided for the embodiments of the present application;

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

[0030] In order for those skilled in the art to better understand the technical solutions in the present application, the technical solutions in the embodiments of the present application will be described clearly and completely below in combination with the drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, but not all the embodiments. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without creative work should fall within the scope of protection of the present application.

[0031] The present application provides a switch panel port multi-selection method, as shown in Figure 1 The switch panel port multi-selection method specifically includes steps S101-S104:

[0032] S101, based on the relative positioning of the port panel elements of the switches in the park, adding a mouse operation event; wherein the mouse operation event includes: mousedown event, mousemove event, mouseup event and leave event.

[0033] Specifically, the port panel elements of each park network device need to be configured to be relatively positioned first. Then, based on the relative positioning, the mouse operation event is added to the port panel elements.

[0034] In one embodiment, Figure 2 A switch port batch processing schematic diagram is provided for an embodiment of the present application, as shown in Figure 2 The port panel elements of each park network device are set to be relatively positioned (position:relative), and then the mousedown (press down), mousemove (mouse move), mouseup (mouse release), and leave event (mouse leave) are added to the port panel elements.

[0035] S102, adding configuration of operation variables and position variables to the child elements of the port panel elements, and configuring the mask layer of the child elements.

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

[0037] Further, 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] Further, the second initial value of the operation variable is configured as a false attribute.

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

[0040] In one embodiment, a mask layer also needs to be added to the child element of the port panel element. The initial mask layer is position: absolute, has a background color of background: #47e5f6, an initial width and height of 0 (width: 0, height: 0), and is not displayed by default. A position variable (mousePostion) and an operation variable (isDragMouse) are added. The initial value of the position variable mousePostion is an object, which includes four attributes: startX, startY, endX, and endY, and the initial values of the four attributes are all 0. The initial value of the operation variable isDragMouse is false, indicating that the drag box selection has not been performed.

[0041] Further, 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, and top of the mask layer.

[0042] Further, the width is the endX minus the startX in the object parameter; the height is the endY minus the startY; the left is the endX minus the width; and the top is the endY minus the height.

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

[0044] S103, through the mouse position attribute of the mask layer, the mouse operation event is triggered and controlled in the relevant assignment state and the selected state to determine the event processing completion instruction.

[0045] Specifically, when processing the mousedown event in the mouse operation event, the current mouse coordinates under the mouse position attribute are obtained. The current mouse coordinates include offsetX and offsetY. The mousedown event is triggered when the user presses the mouse button. The offsetX and offsetY in the current mouse coordinates are respectively assigned to startX and startY of the position variable in the mask layer. 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.

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

[0047] When processing the mousemove event, based on the offsetX and offsetY in the obtained current mouse coordinates, endX and endY of the position variable in the mask layer are respectively assigned. 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] Further, all single port elements are traversed, and the port element coordinates of each single port element are obtained through the getBoundingClientRect technology.

[0049] Further, the port element coordinates and the current mask layer coordinates are compared in the range of the coordinates belonging to the range to determine a plurality of single port elements in the current mask layer coordinates.

[0050] Further, the port data corresponding to the single port element in the range of the coordinates belonging to the range 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 the mousemove event completion instruction is determined.

[0051] In one implementation, the mousemove event is processed, and the mousemove event refers to an event triggered when the user moves the mouse on the page. When the mouse moves, the current mouse coordinates of the mouse are also obtained, and offsetX and offsetY are obtained and assigned to endX and endY of mousePostion, respectively. At the same time, the selected data also needs to be processed, and all ports (.port-wrapper represents a single port element) in the port panel element are obtained through port panel element querySelectorAll (querySelectorAll returns all elements in the document that match the specified CSS selector, and returns a NodeList object; NodeList object represents a collection of nodes), and then the coordinates of the mask layer are obtained through getBoundingClientRect, including left (left), right (right), top (top), and bottom (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 (port data corresponding to a single port element) is obtained and stored in the selected array, and the port is modified to the selected state.

[0052] When the mouseup event is processed, 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, based on the mousemove event in the selected state to complete the instruction. The mouseup event refers to 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, the mouseup event is processed, and the mouseup event refers to an event triggered when the user releases the mouse button. When the user releases the mouse, it indicates that the user has completed the drag selection operation, and the final selected range needs to be obtained. The final offsetX and offsetY of the mouse are assigned to endX and endY of mousePostion, respectively.

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

[0055] In one embodiment, the leave event is processed, the leave event refers to an event triggered when the mouse leaves the element. When the user leaves the port element, it means that all operations have been completed, at this time, the isDragMouse needs to be modified to the initial value false, indicating that the drag box selection is not performed, and the attributes startX, startY, endX and endY of the mousePostion also need to be reset to 0, and the mask layer is hidden.

[0056] Further, based on the mousedown event completion instruction, the mousemove event completion instruction, the mouseup event completion instruction and the leave event completion instruction, the event processing completion instruction about the mouse operation event is obtained.

[0057] S104, based on the event processing completion instruction, the batch selection of the port panel element is completed.

[0058] By using the mousedown event completion instruction, the mousemove event completion instruction, the mouseup event completion instruction and the leave event completion instruction in the event processing completion instruction, the batch selection of the port panel of the switch can be finally completed, so that the ports can be selected more conveniently and quickly, and the user's interactive experience is improved.

[0059] In addition, the embodiment of the application also provides a switch panel port multi-selection device, as shown in the figure, the switch panel port multi-selection device 300 specifically comprises: Figure 3 The storage 302 stores instructions executable by the at least one processor 301, so that the at least one processor 301 can execute:

[0060] At least one processor 301. And the memory 302 connected with at least one processor 301. Wherein, the memory 302 stores instructions executable 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 element of the switch in the park, a mouse operation event is added; wherein, the mouse operation event includes: mousedown event, mousemove event, mouseup event and leave event;

[0062] The sub-element of the port panel element is configured with operation variables and position variables, and the mask layer of the sub-element is configured;

[0063] Through the mouse position attribute of the mask layer, the mouse operation event is triggered and controlled in the assignment state and the selected state, and the event processing completion instruction is determined;

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

[0065] The embodiments of the present application can enable the user to drag the required port range with the mouse to realize multiple selection, more quickly and conveniently select the port, and improve the user's interactive experience through the batch selection processing of the switch port panel element. The cumbersome process of clicking the port one by one is avoided, and the operation efficiency is improved. The selection intention of the user can be more accurately determined through the triggering control of the mouse position attribute of the mask layer, and the misselection or omission of the port is avoided. It is convenient for the user to select multiple ports at a time, and it is suitable for the scene of simultaneously operating multiple ports. The method reduces the operation steps and cognitive burden of the user, and makes the port selection more simple and easy to understand. At the same time, this efficient multiple selection method can save time and improve work efficiency, especially for large-scale park network management.

[0066] Each of the embodiments in the present application is described in a progressive manner, and the same and similar parts between the embodiments can be referred to each other. Each embodiment mainly explains the difference from other embodiments. Especially, the device and non-volatile computer storage medium embodiments are basically similar to the method embodiments, so the description is relatively simple, and the related parts can be referred to the part of the method embodiment.

[0067] The device and medium provided by the embodiments of the present application are one-to-one corresponding with the method, so the device and medium also have the similar beneficial technical effects as the method. Since the beneficial technical effects of the method have been described in detail above, the beneficial technical effects of the device and medium will not be described here.

[0068] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can adopt a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer usable storage media containing computer usable program code (including but not limited to disk storage, CD-ROM, optical storage, etc.).

[0069] The computer program instructions can also be loaded onto a computer, other programmable data processing apparatus, or other processing devices to cause a series of operational steps to be performed on the computer, other programmable apparatus or other processing devices to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions specified in the flowchart block or blocks. Figure 1 The flowchart and / or block diagram in the Figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments. In this regard, each flowchart block and / or combination of flowchart blocks can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart block or blocks. Figure 1 These computer program instructions can also be stored in a computer- readable medium that can direct a computer, other programmable data processing apparatus, or other devices to function in a particular manner, such that the instructions stored in the computer-readable medium produce an article of manufacture including instructions which implement the function specified in the flowchart block or blocks.

[0070] The memory can include non-persistent memory and / or volatile memory, such as random access memory (RAM) and / or cache memory, and / or non-volatile memory, such as read-only memory (ROM), EPROM, and / or flash memory. The memory can be volatile and / or non-volatile memory. The memory can include one or more memories. The memory can be one or more memories. The memory can be a computer-readable medium. The memory can be a computer-readable storage medium. The memory can be a computer-readable non-transitory storage medium.

[0071] The computer-readable medium includes persistent and non-persistent, removable and non-removable media implemented in any method or technology for storage of information such as 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 disc read-only memory (CD-ROM), digital versatile discs (DVDs) or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transitory medium that can be used to store information accessible to a computing device. According to the definition set forth herein, computer-readable media does not include transitory media, such as modulated data signals and carrier waves.

[0072] The above-described embodiments of the application are presented for purposes of illustration and description. Other embodiments are within the scope of the following claims. In some instances, the acts or steps can be performed in different order than the order in which they are presented herein and still achieve the desired results. Additionally, the processes depicted in the figures do not necessarily require the particular order shown, or sequential order to achieve the desired results. In certain implementations, multitasking and parallel processing can be advantageous.

[0073] The above merely provides an example of the present application, but is not intended to limit the present application. The example of the present application can be variously changed and modified by those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the example of the present application should be included in the scope of claims of the present application.

Claims

1. A method for selecting multiple ports on a switch panel, characterized in that, The method includes: 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; Add and configure relevant operation variables and position variables for the child elements of the port panel element to configure the mask layer of the child elements; By using the mouse position attributes of the mask layer, the triggering of the mouse operation event is controlled according to the assignment state and selection state, and the event processing completion instruction is determined, including: When processing the mousedown event in the mouse operation events, the current mouse coordinates under the mouse position attribute are obtained; wherein, the current mouse coordinates include: offsetX and offsetY; the mousedown event is the event triggered when the user presses the mouse button; Assign the offsetX and offsetY values ​​from the current mouse coordinates to the startX and startY values ​​from the position variables in the mask layer, respectively. Modify the operation variable in the mask layer 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. include: When processing the mousemove event, the offsetX and offsetY values ​​in the current mouse coordinates are assigned to the endX and endY values ​​of the position variables in the mask layer, respectively; wherein, the mousemove event is an event triggered when the user moves the mouse on the page; The global browsing function of the port panel element is used to obtain all individual port elements in the port panel element; The getBoundingClientRect technique is used to obtain the coordinates of the current mask layer within the selected area of ​​the current mask layer; Iterate through all the individual port elements and obtain the port element coordinates of each individual port element using the getBoundingClientRect technique; The coordinates of the port element are compared with the coordinates of the current mask layer to determine the inclusion range of the individual port elements located in the coordinates of the current mask layer. Obtain the port data corresponding to the single port element within the coordinate range, and store the port data in the selected array; Based on the selected array, the selected single port element is determined to be in a selected state, and the mousemove event completion instruction is determined. include: 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 variables in the mask layer, respectively; wherein, the mouseup event is the event triggered when the user releases the mouse button; Based on the final endX and final endY of the position variables, the mouseup event completion instruction is determined; include: When processing the mouseleave event, modify the operation variable in the mask layer to the false attribute; The startX, startY, endX, and endY attributes of the object parameter in the position variable are reset to zero, and the mask layer is processed to hide data. Based on the reset processing of the position variable and the modification of the attribute of the operation variable, the completion instruction of the mouseleave event is determined; Based on the mousedown event completion instruction, mousemove event completion instruction, mouseup event completion instruction, and mouseeleave event completion instruction, the event processing completion instruction for the mouse operation event is obtained; Based on the event processing completion instruction, the batch selection of the port panel elements is completed.

2. The method for multi-selecting ports on a switch panel according to claim 1, characterized in that, Based on the relative positioning of the port panel elements of the switches in the campus, mouse operation events are added, specifically including: Configure the port panel element of each campus network device to the relative positioning; Based on the relative positioning, the mouse operation event is added to the corresponding port panel element.

3. The method for multi-selecting ports on a switch panel according to claim 1, characterized in that, Configure the child elements of the port panel element by adding and setting relevant operation and position variables, and configure the mask layer of the child elements, specifically including: Add an initial mask layer to the child elements of the port panel element; configure the initial mask layer to be absolutely positioned and add 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; Configure the second initial value of the operation variable to the 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 configured to obtain the mask layer of the child element.

4. The method for multi-selecting ports on a switch panel according to claim 3, characterized in that, After configuring the child elements of the port panel element by adding and configuring relevant operation variables and position variables, and configuring the mask layer of the child elements, the method further includes: The position attribute of the mask layer is calculated using the position variable of the mask layer, and the mask layer is displayed based on the position attribute; The positional attributes include: the width, height, left side, and top edge of the mask layer; The width is the object parameter endX minus startX; the height is the object parameter 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 multi-select device, characterized in that, The device includes: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor to enable the at least one processor to perform a switch panel port multi-selection method according to any one of claims 1-4.

6. A non-volatile computer storage medium, characterized in that, The storage medium is a non-volatile computer-readable storage medium that stores at least one program, each program including instructions that, when executed by a terminal, cause the terminal to perform a method for multiple selection of switch panel ports according to any one of claims 1-4.

Images