从 Excel 到云端:我们如何用 Spring Boot + Vue3 打造设备管理 + 工资绩效 + 考勤一体化平台

发布时间:2026/7/29 16:20:37
从 Excel 到云端:我们如何用 Spring Boot + Vue3 打造设备管理 + 工资绩效 + 考勤一体化平台 源于工程机械现场——设备管理、工资绩效是核心考勤是底座。覆盖工地、环卫、物业等多行业托管/私有化可选附在线 Demo。写在前面做 B 端行业软件的朋友大概都遇到过这种尴尬客户 A 要数据放自己机房客户 B 想省心托管结果维护了两套代码移动端、管理后台、运维后台三套系统登录方式、权限、续费逻辑各写各的联调排到下辈子功能堆了不少现场工人还是不愿意用。我们团队服务的对象是工地、环卫、物业、仓储、安装维修、市政等「人员分散、现场作业、考勤难核实、多项目并行」的行业。在单企业版本跑通业务后我们把整套系统升级成了「晋辉机联云」——现场劳务与外勤智慧管理平台一套代码支持两种交付方式托管部署系统部署在晋辉服务器企业开通即用免运维私有化部署系统部署在客户自有服务器数据完全自主可控。这篇文章从技术选型、数据隔离实现、三端协同、工程化交付几个维度把架构讲清楚也给正在做垂直行业管理系统的开发者一些可复用的思路。在线体验可直接访问企业管理后台https://jinhuitech.top/seahouseAdminMore/#/loginAPI 文档入口https://jinhuitech.top/seaHouseApiMore/一、我们解决的不是「做个 App」而是外勤现场的系统性问题一线员工、班组长分散在工地、环卫片区、物业项目、仓库现场过去常见做法是Excel 记工时月底对不上微信群发定位无法留痕审计总部想看报表各现场数据孤岛激励靠口头表扬外勤人员参与度低。晋辉机联云现场劳务与外勤智慧管理平台——从工程机械场景演进客户最看重的不是「能不能打卡」而是设备管得住、工资绩效算得明考勤是绩效核算的数据底座。四大能力按价值排序优先级板块你能得到什么★★★设备管理台账、保养计划、机手绑定、巡检审核——人、机、现场一条线★★★工资绩效考勤汇总、工资条、OT/中直、积分抽奖——算得清、奖得明★★考勤GPS 打卡、异常申诉、班长审核——工程机械到岗留痕为绩效提供依据★员工培养技能提升、现场任务、积分激励——在干活中培养行业覆盖工地/工程机械、环卫、物业、仓储、安装维修、市政等。交付托管 / 私有化可选。一句话设备与绩效是核心考勤是底座。二、两种交付方式一套代码客户选购时只有两种模式没有第三种交付方式适合谁特点托管部署希望快速上线、不想自建机房的企业系统运行在晋辉服务器开通账号即可使用运维与升级由我方负责私有化部署对数据合规、内网隔离有要求的企业系统部署在客户自有服务器数据库、文件存储均在客户环境内同一套代码库通过部署配置切换运行模式不需要维护两个项目——这对交付团队和客户的长期成本都是利好。三、技术架构一览为什么是这套栈我们刻意选择了成熟、可私有化交付、团队好招人的技术组合而不是追新。3.1 总体分层用户层 ├── 移动端 Appuni-app → 一线外勤 / 班组长现场使用 ├── 企业管理后台Vue3 → HR / 管理员 └── 运维管理后台Vue3 → 托管服务的开通与运维私有化客户无需使用 接入层 └── Nginx 反向代理 /seaHouseApiMore/ 服务层 └── Spring Boot 2.6 MyBatis JWT 数据层 └── MySQL 8 阿里云 OSS图片/附件私有化可替换为本地存储3.2 技术栈明细层级选型为什么选它后端Java 8 Spring Boot 2.6 MyBatis政企/工地客户接受度高私有化交付友好数据隔离MyBatis 拦截器 JSqlParser托管模式下多企业共享基础设施自动注入tenant_id行级隔离鉴权JWT X-Tenant-Id双通道无状态、前后端分离场景成熟方案管理端Vue 3 Element Plus Pinia组件生态完善后台复杂表单开发效率高移动端uni-app vue-i18n一套代码多端发布简繁英国际化成本低文档Knife4j / Swagger 3交付给客户/集成商时可自助调试部署Nginx Spring Profilelocal/prod 环境隔离上线路径清晰关键词标签便于技术读者检索Spring Boot·外勤管理·Vue3 管理后台·uni-app·现场劳务·私有化部署·智慧管理平台四、数据隔离怎么做的—— 这篇最值得收藏的部分托管部署时多家企业的数据运行在同一套基础设施上必须在数据库层做好隔离不能靠「菜单权限」糊弄。4.1 两种运行模式部署配置切换模式对应交付方式行为shared托管部署MyBatis 拦截器对业务 SQL 自动追加tenant_id实现行级隔离standalone私有化部署关闭 SQL 改写单企业独立库数据完全在客户环境内这意味着托管客户享受免运维便利私有化客户享受数据自主——同一套代码两种交付不需要 fork 两个仓库。4.2 登录与租户识别用户侧流程设计得很「工地友好」——记住一个企业码租户码即可输入企业码如test2调用GET /Tenants/resolve?codexxx获取企业 ID、品牌信息登录携带企业上下文后续业务请求自动隔离不同企业的数据互不可见角色权限边界清晰一线员工 / 班组长系统内机手/队长roleId1 / 2App 端操作企业管理员roleId99企业管理后台运维管理员roleId100仅用于托管服务的开通与续期管理4.3 开发新功能时如何保持隔离业务表注册进TenantTableRegistry拦截器统一改写 SQL。新同事接入时的口诀「新表登记、带 tenant_id、别手写绕过拦截器」。托管模式下新增一家企业只需开通账号、分配企业码无需重新部署一套系统——这是托管交付能规模化、成本可控的技术基础。五、三端产品设计技术为业务服务5.1 企业管理后台Vue3面向 HR 和管理员核心模块考勤全链路打卡记录、OT/中直、汇总、工资条、异常申诉、年假规则按企业可配置入职工龄—天数设备与保养模板、台账、计划、审核任务体系特殊任务、技能提升、提交与审核积分运营规则配置、记录查询、抽奖活动奖品池、概率校验、中奖记录品牌定制登录后顶栏系统名、Logo、主题色可配登录页保持平台统一形象进入系统后展示企业品牌工程化细节utils/apiBase.js统一 API 与 Excel 导出地址登录态兼容多种结构减少联调踩坑。5.2 移动端uni-app现场场景优先——大按钮、GPS 打卡、拍照留痕、户外可读性。首页九宫格覆盖开工考勤、设备/巡检保养、特殊任务未读角标、技能提升、反馈建议、我的积分、薪资单、考勤记录等。国际化内置简繁英大湾区及多片区项目同一 App 覆盖多语言环境降低跨区域推广成本。体验策略登录前固定展示平台 Logo 与名称登录后才展示企业品牌——界面更友好也避免未授权信息外露。5.3 托管服务的运维能力选择托管部署的客户由晋辉侧负责企业开通、管理员账号分配服务续期支持按月或按年开通记录全程审计到期前 30 天移动端弹窗 后台黄条双提醒到期后引导续费私有化客户自行运维不受上述续期策略约束数据与进程完全自主。六、六个真实落地场景跨行业场景 1工程机械 / 租赁 —— 设备 工资绩效设备台账 保养计划 → 机手打卡绑定设备 → 考勤汇总 → 工资条。设备与绩效是核心考勤是底座。场景 2环卫 / 市政 —— 片区巡检GPS 打卡 设备/车辆台账 巡检计划 任务审核。多片区一张报表。场景 3物业 / 保洁 —— 多小区巡更现场打卡 任务留痕 异常申诉。分散人员到岗可审计。场景 4安装维修 —— 工单验收任务作工单、上门打卡、拍照审核。任务可追踪投诉有据。场景 5仓储劳务 —— 班次工时移动端打卡 汇总 工资条。绩效可量化月底对账更快。场景 6私有化 —— 国企内网 统一 App客户机房部署 API晋辉超管登记独立部署地址工人仍用统一 App。托管省心私有化安心。七、给开发者的部署速查私有化客户可直接抄作业环境要求JDK 1.8 · MySQL 5.7/8.0 · Node 16 · Maven 3.6 · Nginx 1.18后端mysql -u root -p sea_house_more sea_house_more.sql cd move-apiMorePub mvn spring-boot:run # 本地 11070 mvn clean package -DskipTests java -jar target/xlhMoreApi.jar --spring.profiles.activeprod管理后台cd move-adminMorePub npm install npm run build # dist/ 部署至 Nginx.env.production 配置 VUE_APP_BASE_URLNginx 关键片段location /seaHouseApiMore/ { rewrite ^/seaHouseApiMore/(.*) /$1 break; proxy_pass http://127.0.0.1:11070; proxy_set_header X-Forwarded-Prefix /seaHouseApiMore; }项目结构xlhMoreApp/ ├── move-apiMorePub/ # Spring Boot API ├── move-adminMorePub/ # Vue3 管理后台 ├── moveAppMorePub/ # uni-app 移动端 ├── sea_house_more.sql └── nginx.conf八、我们总结的几条交付经验1. 数据隔离要从数据库层做起而不是从菜单层做起拦截器 表注册机制比每个 Service 手写where tenant_id ?可靠一个数量级。2. 一套代码、两种交付方式托管与私有化通过配置切换比维护两个 Git 仓库省下的成本半年就能体现出来。3. 客户为「设备 绩效」付费不是为打卡付费台账、保养、工资条、积分——考勤提供可信工时才是工程机械与外勤客户愿意买单的原因。4. 工程化细节决定交付周期统一 API 根地址、登录态结构兼容、图片 URL 多格式归一化——这些「小事」决定了你能不能days 级交付而不是 weeks。5. 品牌策略要克制登录前统一平台形象登录后展示企业品牌——体验友好也便于托管场景下的统一运维。九、适合谁欢迎对接晋辉机联云面向你是谁你能得到什么工程机械 / 工地 / 环卫 / 物业等企业设备管理 工资绩效为核心考勤为底座托管或私有化企业 IT 负责人成熟三端 文档 Demo托管免运维、私有化可内网部署软件集成商完整源码级交付能力缩短项目周期对数据合规有要求的集团私有化部署数据不出内网我们已经打通从数据隔离 → API 鉴权 → 三端 UI → Nginx 部署 → 服务续期的完整链路。结语外勤与机械现场不缺打卡 App缺的是设备、绩效、考勤、培养能串成一条链的系统。我们用Spring Boot Vue3 uni-app做成了可演示、可交付的真系统——设备管得住、绩效算得明考勤作底座。托管省心私有化安心。你们公司更倾向托管部署还是私有化评论区聊聊。需要演示账号、部署文档或商务合作请私信回复「机联云」。觉得有用点赞 在看 转发给正在做 B 端行业系统的同事。