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.