📖 项目概述与核心方案导读 (Direct Answer)
针对现代共享自习室与图书馆运营中“人工值守成本高昂无法实现24h无人通行、水杯书包恶意占座与爽约浪费严重、台灯排插常年空载通电能耗高企、静态列表选座体验割裂”四大行业痛点，本项目研发了一套基于 Vue 3.4 + Pinia + Tailwind CSS + ECharts 5 + Spring Boot 3.2 + SVG 动态矢量交互选座沙盘 + MQTT 物联网硬件网关 + 动态加密二维码/人脸识别无感闸机 的一体化【智慧数智自习室多端预约与无感门禁联动管理系统】。深度融合“SVG 矢量空间全景选座 + 落座通电/离座延时断电智控 + 毫米波雷达防恶意占座AI判决 + 分时阶梯计费与信用分熔断 + 专注自习番茄钟与灯光自适应调光”，打造“PC端自习室全景态势指挥大屏 + Admin端无人自习室综合运营总控台 + Mobile端学员随身选座开门端”三位一体闭环生态！
一、 传统自习室 vs 智慧数智自习室物联网系统效能对比
二、 PC 客户端：智慧自习室运营全景态势门户 (1440×960 极客视口)
PC 客户端专为旗舰自习室中控台与大厅运营设计，采用科技靛青、暗夜紫蓝与沉浸琥珀金 (`#1e1b4b`, `#4338ca`, `#0ea5e9`, `#f59e0b`)现代视觉体系：
三、 Admin 管理端：数智自习室综合运营总控台
管理后台面向自习室连锁店长、财务与硬件运维人员，提供全生命周期运营掌控：
四、 Mobile 移动端：学员随身选座开门端 (390×780 规范视口)
学员随身端提供指尖选座、动态二维码开门过闸、工位台灯自适应遥控全流程：
五、 核心业务工程架构与高价值技术代码实现
// 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> 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> 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> triggerTemporaryLeave(
@RequestParam String reservationId) {
// 1. 开启 30min 离座保护，台灯微暗 50%
squattingEngine.startTempLeaveTimer(reservationId, 30);
return ResponseEntity.ok(ApiResponse.success(null));
}
}
// Pinia 状态管理：自习室工位状态机与SVG选座互斥联动
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useStudyRoomStore = defineStore('studyRoom', () => {
const selectedSeat = ref(null)
const isLocked = ref(false)
// 选座互斥锁定与硬件遥测同步
function selectSeat(seat) {
if (seat.status !== 'AVAILABLE') return false
selectedSeat.value = seat
isLocked.value = true
// 启动 5 分钟倒计时保护锁
return true
}
// 手机端一键调节工位台灯亮度
function adjustLampLux(seatId, lux) {
// 毫秒级通过 WebSocket / REST API 同步至硬件网关
console.log(`下发工位 ${seatId} 调光至 ${lux} Lux`)
}
return { selectedSeat, isLocked, selectSeat, adjustLampLux }
})
六、 高频业务与技术答疑 (Direct FAQ)
Q1: 学员使用动态二维码过闸时，如何防止微信截图转发给非会员进门？
A: 系统生成的门禁二维码内置 TOTP 时间戳加密哈希算法，每 30 秒自动刷新失效；同时前端 Canvas 界面加入了动态扫描光栅水印防截屏，闸机红外光幕实时感知通行人数，一旦发现尾随立即锁定常闭并触发警报。
Q2: 学员中途外出就餐或休息，如何保障座位不被系统误判定为恶意霸座而释放？
A: 学员在手机端点击“临时离开”按钮即可开启 30 分钟专属保留保护倒计时，此时工位台灯自动微暗降至 50% 节能并保留插座电源；只有当离座超过 30 分钟且毫米波雷达未检测到人体复归时，系统才会自动结账并释放座位进入公共可用池。
Q3: SVG 选座沙盘如何处理高峰期多端并发抢同一座位的问题？
A: 后端基于 Redis 分布式悲观锁实现了毫秒级原子锁座。学员在 SVG 界面点击空闲工位后，系统立即在 Redis 中建立 300 秒独占锁并广播 WebSocket 消息将该工位标记为“锁定中”，其他学员无法重复选定，支付成功后正式转为“已占用”。
