【众创空间智能共享工位与会议室静音舱分时预约系统】基于 Vue3 + Spring Boot 的设计与实现（含PRD/三端高保真源码/大屏）

在创新创业与敏捷办公成为主流工作方式的背景下，众创空间、孵化器与共享办公园区普遍面临“工位占座不来空置率高、开放区视频通话干扰吵杂、多人会议室频繁串场拖堂、空调照明能耗空跑浪费严重”等痛点。

本课题基于 Vue3 + Spring Boot + Tailwind CSS + Pinia + IoT 空间物联中控 架构，严格遵循现代化经典政企科技蓝与极简数据治理设计规范（Enterprise Clean Blue，纯色科技蓝 #1976d2、纯白卡片 #ffffff、浅冰蓝灰底色 #f0f4f8 与 #e2e8f0 细边框，彻底杜绝深黑背景 AI Slop），倾力研发并实现了集 “楼栋楼层工位可视化沙盘、单双人静音舱分时秒级预约、电子磁力锁扫码放行、桌面插座人走断电与微环境感知联动” 为一体的三端协同众创空间数字化中枢。

一、系统总体业务架构与技术栈选型

系统围绕共享办公核心业务链条，构建了三端协同支撑体系：

• PC 客户端与大屏调度态势舱 (PC Client)：众创空间综合态势数字孪生座舱、楼层工位可视化选位沙盘、会议室静音舱分时排期中枢、企业入驻孵化资产台账、绿色低碳用电与微环境感知。
• Admin 后台运营管理中台 (Admin Portal)：空间经营收益与坪效分析大盘、工位与静音舱物理资产网格化台账、分时预约履约审计与占座违规仲裁、智能门禁与物联传感设备治理网关、创客路演沙龙与社区生态排期。
• Mobile 微信小程序移动创客端 (Mobile WeChat)：创客移动工作台首页、空间工位与静音舱在线秒订、动态电子通行码与蓝牙近场开门终端、创客专属档案与企业低碳节能账单。

二、PC 客户端与调度态势大屏实机展现 (5大核心视图)

经典科技蓝白高端配色大屏中枢。实时汇聚在席创客总数 (168人)、工位综合利用率 (91.5%)、静音舱日均周转率 (8.4次/舱)、当日综合流水 (¥22,480) 与 3F/4F 微动在席热力沙盘，彰显现代化科技园区数字化治理质感。

网格化呈现极客研发区、开放创客岛、景观临窗区与沉浸专注区四大分区工位。直观展示人体工学椅型号、PIR 红外微动感应在席状态、桌面插座即时功耗与分时锁定操作。

全天分时排期泳道与卡片展陈。覆盖单人静音电话亭、双人洽谈舱与6/12人研讨会议室，清晰呈现航天级隔音降噪等级 (STC 35~45dB)、正压新风循环状态与剩余分钟数。

全面管辖入驻初创公司档案，呈现团队规模、承租工位与独立办公间、合同到期日与创新信誉点卡配额，支持一键发起合同续签与工位调拨。

实时监测空间总电耗与“人离断电”累计节约电量 (42.8 kWh)；监控室内二氧化碳浓度 (485 ppm) 与噪音分贝；内置15分钟无人休眠断电与紫外线自动消杀调控策略。

三、Admin 运营管理中台：资产、履约与物联网网关治理 (5大核心视图)

深度分析空间坪效比 (¥128/㎡·月)、工位日均翻台率 (2.4人次/位·日)、静音舱履约率 (98.6%) 与实时工位用电流水；内置占座与能效实时事件流。

物理点位全生命周期建档管理，查看各舱体门锁状态与当前使用者，支持远程开锁与消杀维保标记。

超时15分钟未到场自动释放工位并扣除信誉积分，针对超时滞留智能微调提示并自动补扣时长点卡，保障公共资源高效公平流转。

管控 MQTT 网关通信心跳、18 处在线智能磁力门锁、48 处 PIR 人体在席感应探头与超负荷 (500W) 自脱扣分路五孔插座。

发布 AIGC 独立开发者出海路演、敏捷开发工作坊等社群活动，统计报名人次与容量进度，赋能园区创新生态孵化。

四、Mobile 微信小程序：创客移动端极速预约与开门终端 (4大核心视图)

专为手机端量身打造的清新界面。展示当前在席工位卡片、电源插座通断状态、静音舱即时可用雷达与今日社群活动推荐。

支持工位分时预约与静音舱秒订双通道无缝切换，清晰展示单价与剩余空位，一键扫码锁定。

生成 30 秒自动刷新的动态加密防截屏二维码，支持近场蓝牙碰一碰开门与在用设施电源/新风便捷控制。

展现会员信用履约 100 分徽章、月度“人离断电”个人低碳节电贡献 (14.8 kWh) 与时长点卡钱包。

全系统在超清大屏视口下的协同联动全景，生动展现从创客手机订座开锁、工位插座智能合闸到管理中台坪效核算的完整数字化生态。

五、核心源码实现精选

1. 后端 Spring Boot 3.2 智能工位在席感知与静音舱分时 MQTT 调度中枢

// Spring Boot 3.2 众创空间智能工位在席感知与静音舱分时 MQTT 调度中枢
@RestController
@RequestMapping("/api/v1/coworking")
@Tag(name = "CoworkingSpaceController", description = "共享工位分时预约、PIR在席感应与静音舱MQTT物联中枢")
public class CoworkingSpaceController {

    @Autowired
    private DeskBookingService deskBookingService;
    @Autowired
    private SoundproofPodService podService;
    @Autowired
    private MqttGatewayService mqttGateway;
    @Autowired
    private RedisTemplate<String, Object> redisTemplate;

    @PostMapping("/desks/{deskId}/book-slot")
    @Operation(summary = "工位分时锁定与桌面独立插座通电联动")
    public ResponseEntity<ApiResponse> bookDeskSlot(
            @PathVariable String deskId,
            @RequestParam String userId,
            @RequestParam Integer startHour,
            @RequestParam Integer durationHours) {
        
        // 1. 分布式并发锁防止一人多占
        String lockKey = "desk:lock:" + deskId + ":" + startHour;
        Boolean acquired = redisTemplate.opsForValue().setIfAbsent(lockKey, userId, Duration.ofMinutes(15));
        if (Boolean.FALSE.equals(acquired)) {
            return ResponseEntity.status(HttpStatus.CONFLICT).body(ApiResponse.fail("该时段工位刚被其他创客锁定！"));
        }

        // 2. 调度 MQTT 下发桌面智能插座通电合闸指令
        mqttGateway.publish("coworking/power/" + deskId, "POWER_ON");

        return ResponseEntity.ok(ApiResponse.success(true));
    }

    @PostMapping("/pods/{podId}/unlock")
    @Operation(summary = "静音舱门禁扫码近场开锁与正压新风自适应启动")
    public ResponseEntity<ApiResponse> unlockSoundproofPod(
            @PathVariable String podId,
            @RequestParam String userDynamicToken) {
        
        boolean valid = podService.validateDynamicToken(podId, userDynamicToken);
        if (!valid) {
            return ResponseEntity.badRequest().body(ApiResponse.fail("动态通行码已过期或无权使用该静音舱！"));
        }

        // 联动磁力门锁释放 + 开启换气新风
        mqttGateway.publish("coworking/pod/" + podId + "/lock", "RELEASE");
        mqttGateway.publish("coworking/pod/" + podId + "/fan", "AUTO_AIR_FLOW");

        return ResponseEntity.ok(ApiResponse.success("门锁已释放，正压新风与柔光照明已开启！"));
    }
}

2. 前端 Vue 3.4 + Pinia 众创空间工位与静音舱响应式状态机

// Vue 3.4 + Pinia 众创空间工位与静音舱响应式状态机
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCoworkingStore = defineStore('coworking', () => {
  const desks = ref([
    { id: 'D01', code: 'A-101', zone: 'A区 极客研发区', floor: '3F', status: '使用中', occupant: '李工 (智联AI)', pirStatus: '有人在席', powerStatus: '正常供电', priceHourly: 8, powerWatt: 65 },
    { id: 'D02', code: 'B-201', zone: 'B区 开放创客岛', floor: '3F', status: '空闲可约', occupant: '', pirStatus: '空闲待命', powerStatus: '断电待命', priceHourly: 5, powerWatt: 0 },
    { id: 'D03', code: 'C-301', zone: 'C区 景观临窗区', floor: '4F', status: '空闲可约', occupant: '', pirStatus: '空闲待命', powerStatus: '断电待命', priceHourly: 10, powerWatt: 0 },
  ])

  const pods = ref([
    { id: 'P01', code: 'POD-S01', name: '星空极客·单人静音电话亭', capacity: 1, stcLevel: '35dB 航天级隔音', hourlyRate: 20, status: '使用中', remainingMinutes: 28 },
    { id: 'P02', code: 'POD-D01', name: '灵感碰撞·双人深度洽谈舱', capacity: 2, stcLevel: '38dB 声学阻尼棉', hourlyRate: 35, status: '空闲可约', remainingMinutes: 0 },
    { id: 'P03', code: 'MR-01', name: '前沿探索·6人敏捷研讨室', capacity: 6, stcLevel: '42dB 建筑声学隔音', hourlyRate: 68, status: '使用中', remainingMinutes: 42 }
  ])

  const bookDesk = (desk) => {
    desk.status = '使用中'
    desk.powerStatus = '正常供电'
    desk.pirStatus = '有人在席'
  }

  return { desks, pods, bookDesk }
})

六、源码与工程交付物下载说明

本项目提供整套完整前后端高保真工程源码包、三端一体化高保真原型、超百页 Enterprise 级 PRD 需求规格说明书与实机截图高清图集，开箱即用，支持一键 npm run dev 启动本地服务与生产编译构建。