Visual cabinet based on JavaScript and Vue.js and creation method thereof

Abstract

The invention discloses a visual cabinet based on JavaScript and Vue.js. A modularized architecture based on Vue is adopted to split a cabinet, equipment and a U bit into reusable UI components, the UI components comprise a cabinet component, an equipment component and a functional module, and the cabinet component is formed based on Rack.vue; the equipment component is formed based on Server Unit.vue, and is used for rendering different icons and status indicator lamps according to equipment types and supporting dragging to adjust the position of a U bit; the function module comprises a front-end framework, a UI (User Interface) library, a state management sub-module, a dragging library and a rear-end interaction sub-module; the front-end framework is Vue 3 Compression API (Application Program Interface) composite TypeScript, the UI library is composed of an Element Plus basic component and SVG / D3. Js used for customizing graphs, the state management sub-module is Pinia, and the drag library is Vue Dragable or native HTML5 dragmp; and the Drop API and the rear-end interaction sub-module are formed by compounding Axios with a WebSocket used for pushing real-time data. The invention further discloses a creation method. The method comprises the following steps: creating an overall skeleton based on HTML; rendering and beautifying the style based on the CSS; various operations are performed, the remaining capacity is automatically calculated, and machine information is displayed for verification.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of visualization technology, and in particular to a visualization cabinet based on JavaScript and Vue.js. BACKGROUND

[0002] In the operation and maintenance work, since the operation and maintenance personnel cannot know the remaining capacity of the server in the cabinet in real time most of the time, the operation and maintenance personnel need to additionally check the number of the cabinet in the computer room when the server in the cabinet is put up and down, which is very troublesome and brings a lot of meaningless work load to the operation and maintenance work. Frequent opening and closing of the cabinet can also cause unnecessary wear and tear to the equipment, thereby affecting the service life of the equipment. Therefore, it is urgent to find a method to solve this problem to improve the operation and maintenance efficiency and reduce the meaningless work load. SUMMARY

[0003] In order to solve the problems in the prior art, the present application provides a visualization cabinet based on JavaScript and Vue.js and a creating method thereof. CSS+js+vue is used to develop the whole visualization cabinet. The project can manage the capacity of the whole cabinet, facilitate the operation and maintenance personnel to check the capacity, and check the information of the server on the cabinet, so that the cabinet capacity information and the information of the server on the cabinet can be known at a glance, which greatly facilitates the work of the operation and maintenance personnel.

[0004] The present application provides a visualization cabinet based on JavaScript and Vue.js. The cabinet, equipment and U position are split into reusable UI components based on the component-based architecture of Vue, including:

[0005] a cabinet component, an equipment component and a function module, wherein,

[0006] the cabinet component is formed based on Rack.vue;

[0007] the equipment component is formed based on ServerUnit.vue, is used to render different icons and state indicator lights according to the equipment type, and supports drag adjustment of the U position; the equipment type includes one or more of a server, a switch and a storage device;

[0008] The function module comprises: a front-end framework, a UI library, a state management submodule, a drag library and a back-end interaction submodule; wherein the front-end framework is Vue 3Composition API composite TypeScript, the UI library is composed of Element Plus basic components and SVG / D3.js for customizing graphics, the state management submodule is Pinia, the drag library is Vue Draggable or native HTML5 Drag&Drop API, and the back-end interaction submodule is Axios composite WebSocket for real-time data pushing.

[0009] Preferably, the function module further comprises a data flow management submodule, and the data flow management submodule comprises a static configuration unit and a dynamic data unit, wherein the static configuration unit defines the layout and device properties of the visualization cabinet through JSON; and the dynamic data unit is used for receiving real-time state data through WebSocket, and the real-time state data comprises temperature and / or power consumption.

[0010] Preferably, the function module further comprises an interactive function submodule, wherein the interactive function submodule is used for realizing interactive functions, and the interactive functions comprise forming drag adjustment of devices and forming right-click menus for device management.

[0011] Preferably, the function module further comprises a visualization enhancement submodule, wherein the visualization enhancement submodule is used for generating U-bit occupancy heat maps and topological connections; the U-bit occupancy heat map is used for rendering cabinet temperature distribution using ECharts, and the topological connection is used for drawing network connection relationships between devices through D3.js.

[0012] The second aspect of the present application provides a creation method of the visualization cabinet based on JavaScript and Vue.js of the first aspect, comprising:

[0013] S1, creating an overall skeleton of the visualization cabinet based on HTML;

[0014] S2, rendering and beautifying the overall cabinet style of the visualization cabinet based on CSS;

[0015] S3, performing a plurality of operations on the entire cabinet, automatically calculating the remaining capacity, and displaying machine information to verify the created visualization cabinet.

[0016] Preferably, the S1 comprises:

[0017] S11, creating an HTML document and defining a container element in the HTML document, such as using the first sub The label is an integral part of the overall structure of the cabinet.

[0018] S12, using a plurality of first sub Labels to represent different parts of the cabinet, including one or more of a cabinet top, a main body, and a bottom.

[0019] S13, further dividing the main body part of the visualized cabinet into a plurality of rows, each row representing a tier of racks;

[0020] S14, using a second sub The label creates a plurality of cells for representing each server unit in the cabinet.

[0021] Preferably, the S2 comprises:

[0022] S21, defining the overall style of the visualization cabinet, including one or more of width, height and background color;

[0023] S22, setting the style of the top, main body and bottom of the visualization cabinet, including one or more of border, rounded corner and background image;

[0024] S23, setting the style of the rack row in the visualization cabinet, including one or more of row height, border and spacing;

[0025] S24, beautifying the style of the server unit, including one or more of width, height, background color and border;

[0026] S25, adding animation effects.

[0027] Preferably, the automatic calculation of the remaining capacity comprises:

[0028] (1) defining a capacity unit, including: defining a standard unit;

[0029] (2) tracking the used capacity, including: recording the height occupied by each server unit when the server is on;

[0030] (3) tracking the total capacity based on the fact that the total capacity of the cabinet is fixed;

[0031] (4) calculating the remaining capacity, including: calculating the remaining capacity by subtracting the used capacity from the total capacity of the cabinet.

[0032] The third aspect of the present application provides an electronic device, comprising a processor and a memory, the memory stores a plurality of instructions, and the processor is used to read the instructions and execute the method according to the second aspect.

[0033] The fourth aspect of the present application provides a computer readable storage medium, the computer readable storage medium stores a plurality of instructions, and the plurality of instructions can be read and executed by a processor to execute the method according to the third aspect.

[0034] The method, system and electronic device provided by the present application have the following beneficial effects:

[0035] (1) The present application is based on the convenience of the maintenance personnel, and deploys an integrated cabinet capacity management system, which can monitor the server and space usage in the cabinet in real time. The system can automatically update the capacity information of the cabinet, and provide real-time data to the maintenance personnel through the network interface or mobile application.

[0036] (2) When the monitoring system detects a failure event of a specific device, the virtual cabinet view displayed on the front end will activate an alarm mechanism: the CSS background attribute of the server unit corresponding to the failed device will be dynamically updated to red warning color. This visual prompt strategy aims to provide immediate failure indication for the IT maintenance team, clearly identifying the abnormal server node, so that the technician can quickly take troubleshooting and recovery measures. Through this interactive failure feedback, the maintenance personnel can efficiently locate the failure, shorten the MTTR (Mean Time To Repair), ensure the stable operation of the data center infrastructure, and avoid or reduce the negative impact of service interruption on business continuity. BRIEF DESCRIPTION OF DRAWINGS

[0037] Figure 1 Visual cabinet appearance and function schematic diagram based on JavaScript and Vue.js according to an embodiment of the present application.

[0038] Figure 2 Creation method flowchart of the visual cabinet based on JavaScript and Vue.js according to an embodiment of the present application;

[0039] Figure 3 Creation method step S1 flowchart of the visual cabinet based on JavaScript and Vue.js according to an embodiment of the present application

[0040] Figure 4 Creation method step S2 flowchart of the visual cabinet based on JavaScript and Vue.js according to an embodiment of the present application;

[0041] Figure 5 Electronic device structure schematic diagram according to an embodiment of the present application. DETAILED DESCRIPTION

[0042] In order to better understand the above technical solutions, the above technical solutions will be described in detail below in conjunction with the drawings in the specification and specific embodiments.

[0043] Embodiment one

[0044] As Figure 1 As shown, the embodiment provides a JavaScript and Vue.js based visualization cabinet (a visualization cabinet system based on JavaScript (JS) and Vue.js) for data center or IT asset management scenarios, with the following technical features:

[0045] (1) Dynamic rendering: through JSON configuration or API data driving, real-time rendering of cabinet, server, network device, etc. UI components.

[0046] (2) Support for interactive operations such as drag adjustment of device position and zoom view.

[0047] The JavaScript and Vue.js based visualization cabinet of the present application is formed based on the component-based architecture of Vue, thereby splitting the cabinet, device and U position into reusable UI components, including:

[0048] Cabinet components, device components and functional modules, wherein,

[0049] The cabinet component is formed based on Rack.vue;

[0050] The device component is formed based on ServerUnit.vue, for rendering different icons and status indicator lights according to device types (servers / switches / storage), and supporting drag adjustment of U position; the device types include one or more of servers, switches and storage devices;

[0051] The functional modules include: front-end framework, UI library, state management submodule, drag library and back-end interaction submodule; wherein the front-end framework is Vue 3 Composition API composite TypeScript, the UI library is composed of Element Plus basic components and SVG / D3.js for custom graphics, the state management submodule is Pinia, the drag library is Vue Draggable or native HTML5 Drag&Drop API, and the back-end interaction submodule is Axios composite WebSocket for real-time data pushing.

[0052] As a preferred embodiment, the functional module further includes a data flow management submodule, the data flow management submodule includes a static configuration unit and a dynamic data unit, wherein the static configuration unit defines the layout and device properties of the visualization cabinet through JSON; the dynamic data unit is used to receive real-time state data through WebSocket, the real-time state data including temperature and / or power consumption.

[0053] As a preferred implementation, the function module further comprises an interaction function sub-module, wherein the interaction function sub-module is configured to implement an interaction function, and the interaction function comprises forming a drag adjustment for the device and forming a right-click menu for device management.

[0054] As a preferred implementation, the function module further comprises a visualization enhancement sub-module, wherein the visualization enhancement sub-module is configured to generate a U-bit occupancy heat map and a topology connection; the U-bit occupancy heat map is configured to render a cabinet temperature distribution using ECharts, and the topology connection is configured to draw a network connection relationship between devices by D3.js.

[0055] I. Advantages of the cabinet

[0056] 1. Componentized development: based on the componentized architecture of Vue, the cabinet, the device, the U-bit, etc. are split into reusable UI components (such as <rack> 、 <serverslot>).

[0057] 2. Data Binding: Real-time updates of device status (such as power consumption, temperature) using Vue's reactive data (data(), v-model).

[0058] 3. Visual Interaction: Supports device click to view details, right-click menu operations (such as power on / off, alarm management); can integrate D3.js or ECharts to realize advanced visualization such as topology graph and temperature heat map.

[0059] 4. Cross-platform Adaptation: Responsive design, suitable for different screen sizes such as PC and tablet.

[0060] II. Technical Implementation Scheme (Construction Steps)

[0061] 1. Technology Selection

[0062] • Front-end Framework: Vue 3 (Composition API) + TypeScript

[0063] • UI Library: Element Plus (basic components) + SVG / D3.js (custom graphics)

[0064] • State Management: Pinia (alternative to Vuex)

[0065] • Dragging Library: Vue Draggable (or native HTML5 Drag&Drop API)

[0066] • Backend Interaction: Axios + WebSocket (real-time data push)

[0067] 2. Core Component Design

[0068] (1) Rack Component (Rack.vue)

[0069]

[0070]

[0071] (2) Device Component (ServerUnit.vue)

[0072] • Render different icons and status indicator lights according to device type (server / switch / storage).

[0073] • Support drag and drop to adjust U position (use vue-draggable).

[0074] 3. Data Flow Management

[0075] • Static configuration: Define rack layout and device properties through JSON:

[0076]

[0077] • Dynamic data: Receive real-time status (e.g., temperature, power consumption) through WebSocket:

[0078] 4. Interaction Function Implementation

[0079] (1) Device drag adjustment

[0080]

[0081] (2) Right-click menu (device management)

[0082]

[0083] 5. Visualization Enhancement

[0084] • U-occupancy heat map: Use ECharts to render rack temperature distribution.

[0085] • Topology connection: Draw network connection between devices using D3.js.

[0086] Three, Typical Application Scenarios

[0087] 1. Data Center Management

[0088] (1) Visualize rack space utilization and device distribution.

[0089] (2) Real-time monitor server status (CPU, memory, temperature).

[0090] 2. IT Asset Operation and Maintenance

[0091] (1) Drag and adjust device position, automatically generate rack wiring diagram.

[0092] (2) Quickly locate faulty devices and issue commands (e.g., restart).

[0093] Four, Advantage Summary

[0094] 1. Low code: Drive UI through configuration, reduce hard coding.

[0095] 2. High interaction: Support drag, zoom, real-time data update.

[0096] 3. Scalable: Easily access third-party libraries (e.g., use Three.js for 3D rendering).

[0097] Through the above scheme, a complete JS and Vue-based visual cabinet system can be quickly constructed.

[0098] Embodiment Two

[0099] With reference to Figure 2 The embodiment provides a creation method of the visual cabinet based on JavaScript and Vue.js of the first embodiment, and the creation method comprises the following steps:

[0100] S1, creating an overall framework of the visual cabinet based on HTML;

[0101] S2, rendering and beautifying an overall cabinet style of the visual cabinet based on CSS.

[0102] With reference to Figure 3 As a preferred embodiment, the S1 comprises the following steps:

[0103] S11, creating an HTML document and defining a container element in the HTML document, for example, using a first sub The label is an integral part of the overall structure of the cabinet.

[0104] S12, using a plurality of first sub Labels to represent different parts of the cabinet, including one or more of a cabinet top, a main body, and a bottom.

[0105] S13, further dividing the main body part of the visualized cabinet into a plurality of rows, each row representing a tier of racks;

[0106] S14, using a second sub The label creates a plurality of cells for representing each server unit in the cabinet.

[0107] Referring to Figure 4 As a preferred embodiment, the S2 comprises:

[0108] S21, defining the overall style of the visualization cabinet, including one or more of width, height and background color;

[0109] S22, setting the style of the top, main body and bottom of the visualization cabinet, including one or more of border, rounded corner and background picture;

[0110] S23, setting the style of the rack row in the visualization cabinet, including one or more of row height, border and spacing;

[0111] S24, beautifying the style of the server unit, including one or more of width, height, background color and border;

[0112] S25, adding animation effects; for example, changing the background color of the server unit when the mouse hovers over it.

[0113] S3, performing a plurality of operations on the entire cabinet (such as adding and removing servers, which can be done by dragging), automatically calculating the remaining capacity, and displaying machine information for verification of the created visualization cabinet, wherein the automatic calculation of the remaining capacity comprises:

[0114] (1) defining the capacity unit, including: defining a standard unit, for example, how much space each server unit occupies (such as U, 1U is usually equal to 1.75 inches or 44.45 mm);

[0115] (2) tracking the used capacity, including: when a server is added, record the height (in U) occupied by each server unit. For example, if a server occupies 4U, when it is placed into the cabinet, 4U needs to be added to the used capacity;

[0116] (3) tracking the total capacity, including: the total capacity of the cabinet is fixed, for example, a standard 42U cabinet;

[0117] (4) calculating the remaining capacity, including: calculating the remaining capacity by subtracting the used capacity from the total capacity.

[0118] The application also provides a memory storing a plurality of instructions for implementing the method of embodiment one.

[0119] As Figure 5 As shown, the application further provides an electronic device, comprising a processor 301 and a memory 302 connected with the processor 301, the memory 302 storing a plurality of instructions, the instructions being loadable and executable by the processor to enable the processor to perform the method of embodiment one.

[0120] While the preferred embodiments of the application have been described, additional variations and modifications can be made to the embodiments by those skilled in the art once they learn of the basic inventive concepts. Therefore, the appended claims are intended to encompass within their scope all possible variations and modifications of the preferred embodiments. It is apparent that those skilled in the art can, without departing from the spirit or scope of the application, make various changes and modifications of the application. Thus, the application is intended to encompass all such changes and modifications as fall within the scope of the claims, together with all equivalents thereof. < / serverslot> < / rack>

Claims

1. A visual cabinet based on JavaScript and Vue.js, characterized in that: It adopts a component-based architecture based on Vue, which splits cabinets, equipment, and U-positions into reusable UI components, including: Cabinet components, equipment components and functional modules, among which, The cabinet component is formed based on Rack.vue; The device component is formed based on ServerUnit.vue, which is used to render different icons and status indicators according to the device type, and supports dragging and dropping to adjust the U position; the device type includes one or more of servers, switches and storage devices; The functional modules include: a front-end framework, a UI library, a state management sub-module, a drag-and-drop library, and a back-end interaction sub-module; wherein, the front-end framework is Vue 3 Composition API combined with TypeScript, the UI library is composed of Element Plus basic components and SVG / D3.js for custom graphics, the state management sub-module is Pinia, the drag-and-drop library is Vue Draggable or native HTML5 Drag&Drop API, and the back-end interaction sub-module is composed of Axios combined with WebSocket for real-time data push.

2. The visual cabinet based on JavaScript and Vue.js according to claim 1, characterized in that: The functional module also includes a data flow management submodule, which includes a static configuration unit and a dynamic data unit, wherein the static configuration unit defines the layout and device properties of the visualization cabinet through JSON; the dynamic data unit is used to receive real-time status data through WebSocket, and the real-time status data includes temperature and / or power consumption.

3. The visual cabinet based on JavaScript and Vue.js according to claim 2, characterized in that: The functional module further includes an interactive functional submodule, wherein the interactive functional submodule is used to implement interactive functions, including forming a drag adjustment for the device and forming a right-click menu for device management.

4. The visual cabinet based on JavaScript and Vue.js according to claim 3, characterized in that: The functional module also includes a visualization enhancement submodule, which is used to generate a U-position occupancy heat map and topological connections; the U-position occupancy heat map is used to render the cabinet temperature distribution using ECharts, and the topological connections are used to draw the network connection relationship between devices through D3.js.

5. A method for creating a visual cabinet based on JavaScript and Vue.js according to any one of claims 1 to 4, characterized in that: include: S1, creating the overall skeleton of the visual cabinet based on HTML; S2, rendering and beautifying the overall cabinet style of the visual cabinet based on CSS; S3, performing various operations on the entire cabinet, automatically calculating the remaining capacity, and displaying machine information to verify the created visual cabinet.

6. The method for creating a visual cabinet based on JavaScript and Vue.js according to claim 5, characterized in that: Said S1 comprises: S11, create an HTML document and define a container element in it, such as using the first child The label serves as the overall structure of the cabinet; S12, using multiple first sub Labels are used to identify different parts of the cabinet, including one or more of the cabinet top, body, and bottom. S13, further dividing the main body of the visualization cabinet into multiple rows, each row representing a layer of racks; S14, using the second sub The labels create a plurality of cells that are used to represent the individual server units in the cabinet.

7. The method for creating a visual cabinet based on JavaScript and Vue.js according to claim 6, characterized in that: The S2 includes: S21, defining the overall style of the visualization cabinet, including one or more of width, height, and background color; S22, setting the styles of the top, body, and bottom of the visualization cabinet, including one or more of a border, rounded corners, and background image; S23, setting styles for rack rows in the visualization cabinet, including one or more of row height, border, and spacing; S24, beautifying the style of the server unit, including one or more of width, height, background color, and border; S25, add animation effects.

8. The method for creating a visual cabinet based on JavaScript and Vue.js according to claim 7, characterized in that: The automatic calculation of remaining capacity includes: (1) Define a capacity unit, including: defining a standard unit; (2) Tracking used capacity, including: recording the height occupied by each server unit when the server is online; (3) Tracking total capacity based on the fixed total capacity of the cabinet; (4) Calculating the remaining capacity, including: calculating the remaining capacity by subtracting the used capacity from the total capacity of the cabinet.

9. An electronic device, characterized in that: The method comprises a processor and a memory, wherein the memory stores a plurality of instructions, and the processor is configured to read the instructions and execute the method according to any one of claims 5 to 8.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a plurality of instructions, and the plurality of instructions can be read by a processor to execute the method according to any one of claims 5 to 8.

Images