【智慧数智自习室多端预约与无感门禁联动管理系统】基于 Vue3 + Spring Boot + SVG动态选座沙盘与硬件IoT网关 的设计与实现（含PRD/三端高保真源码/大屏）

【智慧数智自习室多端预约与无感门禁联动管理系统】基于 Vue3 + Spring Boot + SVG动态选座沙盘与硬件IoT网关 的设计与实现（含PRD/三端高保真源码/大屏）

📌 项目摘要：针对现代共享自习室与高校图书馆运营中“人工值守成本高昂无法实现24h无人通行、水杯书包恶意占座与爽约浪费严重、台灯排插常年空载通电能耗高企、静态列表选座体验割裂”四大行业痛点，本项目研发了一套基于 Vue 3.4 + Pinia + Tailwind CSS + ECharts 5 + Spring Boot 3.2 + SVG 动态矢量交互选座沙盘 + MQTT 物联网硬件网关 + 动态加密二维码/人脸识别无感闸机 的一体化【智慧数智自习室多端预约与无感门禁联动管理系统】。深度融合“SVG 矢量空间全景选座 + 落座通电/离座延时断电智控 + 毫米波雷达防恶意占座AI判决 + 分时阶梯计费与信用分熔断 + 专注自习番茄钟与灯光自适应调光”，打造“PC端自习室全景态势指挥大屏 + Admin端无人自习室综合运营总控台 + Mobile端学员随身选座开门端”三位一体闭环生态！

---

一、 系统业务拓扑与物联网数智架构

本系统严格遵从智能楼宇物联网控制规范与公共空间运营标准，构建了**“移动端学员随身端 + PC端自习室全景态势指挥大屏 + Admin端无人综合运营总控台”**三端协同体系：

+-----------------------------------------------------------------------------------+
|               Smart Study Room 数智自习室多端预约与无感门禁物联网联动系统          |
+-----------------------------------------------------------------------------------+
|                                                                                   |
|  [PC自习室态势大屏]              [Admin运营总控台]             [Mobile学员随身端]    |
|  * 自习室全景态势指挥大屏         * 运营综合驾驶舱               * 随身问诊与体质辨识 |
|  * SVG动态交互选座沙盘            * 空间分区与硬件资产台账       * 可视化选座与预约   |
|  * 门禁闸机无感通行中枢           * 预约异常申诉与退款审核       * 专注番茄钟硬件调光 |
|  * 阶梯计费与能耗雷达             * 学员信誉积分与失信黑名单     * 自习卡包与账单历史 |
|  * 备考专注榜与研友圈             * IoT网关遥测与继电器审计      (390x780 无裁剪视口) |
|  (1440x960 极客视口布局)          (经典中后台交互架构)                                |
|                                                                                   |
+-----------------------------------------------------------------------------------+

---

二、 PC 端：自习室全景态势指挥与矢量选座沙盘

PC 客户端专为旗舰自习室大厅中控与管理展示设计，采用科技靛青、暗夜紫蓝与沉浸琥珀金现代视觉配色，实时呈现全店工位运行状态、门禁通行与室内微环境指标：

1. 自习室全景态势指挥大屏

实时接入红外人体传感器与排插继电器，动态监测全店实时在座率（92.4%）、今日预约（1,240人次）、智能节电（34.2 kWh）、平均超低噪音（24.5 dB）；右侧动态提示室内新风恒温微气候与 30min 恶性占座超时熔断预警。

!自习室全景态势大屏

2. SVG动态交互自习室选座沙盘

基于原生矢量 SVG 拓扑渲染沉浸静音舱（20dB超静音）、阳光景观区、考研长租区及双人研讨室。工位在座/临离/空闲颜色实时绑定，支持 300s 分布式预订锁座。

!SVG选座空间沙盘

3. 智能门禁无感通行与闸机联控中心

呈现 24h 动态防截屏二维码与人脸识别过闸流水（平均 0.58s 放行），深度集成红外防尾随光幕、违规闯入蜂鸣报警及火警失电常开逃生机制。

!门禁闸机联控

4. 自习室分时阶梯计费规则与会员储值雷达

支持早鸟次卡 (¥18)、沉浸全天卡 (¥38)、星光夜战卡 (¥29) 及金榜题名月卡，结合空置断电能耗雷达核算，透明公示极速退款规则。

!阶梯计费与能耗雷达

5. 考研考证名校备考社群与打卡排行榜

揭晓今日全店专注时长龙虎榜（榜首 11h 25m），提供 432Hz 深山夜雨白噪音音效切换及研友同频拼座互促功能。

!备考专注排行榜

---

三、 Admin 端：数智自习室综合运营总控台

管理后台面向无人自习室连锁店长、财务与硬件运维人员，提供全生命周期运营掌控：

1. 数智自习室综合运营驾驶舱

月度营收流水 ¥48,290 洞察、工位日均在座 11.4h 坪效分析、24小时客流晚高峰 (18:30-22:30) 走势以及四大功能区收益占比。

!运营综合驾驶舱

2. 空间分区与工位智能硬件资产台账

统一登记 96 个工位继电器 MAC 地址、全光谱护眼台灯 550 Lux 调光状态与毫米波人体微动感应雷达在线监测。

!工位硬件资产台账

3. 预约异常申诉与人工退款工单审核

处理地铁延误迟到自动释放的信誉分申诉复核、考研上岸月卡提前解约退款审批流，保障学员合法权益。

!预约异常审核

4. 学员信誉积分与失信黑名单惩戒看板

实施基准 100 分信誉制度：连续按时自习履约奖励至 120 分，恶意占座扣 15 分，连续爽约 3 次执行 30 天封禁拉黑熔断。

!学员信誉积分

5. IoT网关遥测与继电器审计日志

实时抓取闸机动态二维码解密报文、工位排插 220V 继电器通断电指令、防尾随光幕报警流水，全程安全可审计。

!IoT网关遥测日志

---

四、 Mobile 移动端：学员随身选座开门端 (390x780 规范视口)

学员随身端提供指尖选座、动态二维码开门过闸、工位台灯自适应遥控全流程：

随身端与快速扫码开门	移动端可视化选座预约
!随身开门	!选座预约
专注番茄钟与硬件遥控	我的卡包与账单历史
!专注番茄钟	!我的卡包

• 随身端与快速扫码开门：当前预约工位倒计时卡片、每30秒自动刷新动态防截屏门禁码及自习室环境温湿度噪音指标。
• 移动端可视化选座预约：手势交互选座，快速按沉浸舱/景观区分区筛选空闲座位，一键确认选座锁座并支付。
• 专注自习番茄钟与硬件遥控：沉浸式 25 分钟番茄钟计时，手机端直接无极滑动调节工位护眼台灯亮度 (200~800 Lux) 与排插电源。
• 我的自习卡包与预约历史：尊享月卡剩余 18 天卡包资产展示、近期自习预约打卡明细与 105 分良好信用分徽章。

---

五、 核心后端业务代码实现 (Spring Boot 3.2)

// Spring Boot 3.2 自习室预约订单与智能门禁MQTT下发中枢
@RestController
@RequestMapping("/api/v1/studyroom")
@Tag(name = "StudyRoomIoTController", description = "数智自习室选座预约与硬件网关联动中枢")
public class StudyRoomIoTController {

    @Autowired
    private SeatReservationService reservationService;
    @Autowired
    private MqttGatewayClient mqttClient;
    @Autowired
    private AntiSquattingAiEngine squattingEngine;
    @Autowired
    private CreditScoreRuleService creditService;

    @PostMapping("/booking/lock")
    @Operation(summary = "SVG工位选座并发锁座 (Redis悲观锁 300s 保护)")
    public ResponseEntity<ApiResponse<BookingLockVO>> lockSeatForPayment(
            @Valid @RequestBody SeatLockDTO dto) {
        
        // 1. 分布式锁排他选座，避免同座超卖
        BookingLockVO lock = reservationService.acquireSeatLock(dto.getSeatId(), dto.getUserId());
        return ResponseEntity.ok(ApiResponse.success(lock));
    }

    @PostMapping("/gate/pass")
    @Operation(summary = "门禁动态二维码核验过闸与工位排插台灯联动通电")
    public ResponseEntity<ApiResponse<GatePassVO>> verifyGateAccess(
            @RequestParam String dynamicQrToken,
            @RequestParam String gateId) {
        
        // 1. 解密并核验动态令牌 (30s 有效期，防截屏转发)
        UserBookingInfo booking = reservationService.validateQrToken(dynamicQrToken);
        
        // 2. 下发 MQTT 驱动闸机继电器开门 (放行 3000ms)
        mqttClient.publish(MqttTopics.GATE_COMMAND, new GateOpenCmd(gateId, 3000));
        
        // 3. 联动激活所绑工位 220V 电源继电器并调节护眼台灯至 550 Lux
        mqttClient.publish(MqttTopics.SEAT_POWER, new SeatPowerCmd(booking.getSeatId(), true, 550));
        
        return ResponseEntity.ok(ApiResponse.success(new GatePassVO("SUCCESS_ACCESS", booking.getSeatId())));
    }

    @PostMapping("/leave/temporary")
    @Operation(summary = "学员发起临时离开保护 (开启 30min 倒计时保留)")
    public ResponseEntity<ApiResponse<Void>> triggerTemporaryLeave(
            @RequestParam String reservationId) {
        
        // 1. 开启 30min 离座保护，台灯微暗 50%
        squattingEngine.startTempLeaveTimer(reservationId, 30);
        return ResponseEntity.ok(ApiResponse.success(null));
    }
}

---

六、 总结与源码工程获取

本套【智慧数智自习室多端预约与无感门禁联动管理系统】融合了 SVG 空间矢量选座、MQTT 物联网门禁与工位排插联动、毫米波雷达防恶意占座及分时阶梯计费，兼具计算机毕设/实训示范价值与商业级无人共享自习室落地工程价值。

完整三端高保真前端源码、PRD需求规格说明书及架构设计文档，可访问官方发布页获取：【智慧数智自习室多端预约与无感门禁联动管理系统】基于 Vue3 + Spring Boot + SVG动态选座沙盘与硬件IoT网关 的设计与实现（含PRD/三端高保真源码/大屏）