Design and Implementation of an Indoor Space Management System Using SVG and Vue

The document introduces a space‑management system that visualizes workplace resources such as desks, meeting rooms, and equipment on an indoor map, allowing users to reserve desks via mobile QR codes and view real‑time resource utilization through reports.

It outlines the main functional modules: map editing, hierarchical desk allocation, full‑resource visual search, permission management, and asset/report platforms (the latter not discussed in detail).

Technical selection is justified by comparing external procurement versus self‑development, SVG versus Canvas, and Vue versus React; the authors chose self‑development, SVG for graphics, and Vue for the JavaScript framework due to its template style and lightweight demo requirements.

Key technical details include defining object coordinates as a quaternion (x, y, w, h) and establishing a custom coordinate system based on the map’s origin (0,0). The system defines concepts such as base map, canvas, building, floor, floor zones, resource objects, resource models, classifications, toolbars, information panels, and permission layers.

Collision detection is implemented to prevent overlapping placement of same‑type objects, using the following conditions: x‑axis intersect: (x2 > x1 && x2 < x1 + w1 && x1 > x2 + w2) y‑axis intersect: (y2 > y1 && y2 < y1 + h1 && y1 > y2 + h2) Both conditions true indicates a collision.

Zoom and drag are handled via an SVG viewBox (x, y, width, height) rather than CSS transforms, ensuring smooth scaling and panning. Object dragging follows a standard mouse‑down/move/up sequence, calculating displacement as Xp = x2 - x1 , Yp = y2 - y1 .

Selection mechanisms include click‑based single selection, rectangle‑based multi‑selection (using the same collision logic), keyboard‑driven batch movement, and alignment utilities for single‑row, double‑row, horizontal, and vertical placements.

Additional features cover automatic avoidance pop‑ups that avoid obscuring selected objects, and a custom right‑click menu that shares SVG coordinates by converting HTML mouse positions to SVG space.

The system can be extended with indoor positioning using Wi‑Fi (low‑cost, low‑accuracy) or Bluetooth (higher‑cost, higher‑accuracy) and integrates with mobile apps or mini‑programs to display real‑time location pins.

Author: Niu Junfu, member of the C‑end and middle‑platform R&D Center at Autohome, responsible for finance/administrative information systems using Java, React, RN, and Vue.