清道夫系统 - 系统架构汇报

项目概况

清道夫系统面向环境服务行业，覆盖销售、调度、施工三大角色，实现从项目立项、任务发布、调度派单、SOP 施工到验收结算的全流程数字化管理。

销售端

项目库管理、任务发布、进度跟踪、消息通知、知识库查询，支撑一线销售快速响应客户需求。

调度端

任务审核、排班派车、人员/车辆/班组管理、可视化大屏，实现资源高效调配。

施工端

uni-app 微信小程序，支持每日检查、SOP 施工流程、照片分组上传、电子签名验收。

总体系统架构

基于 Mermaid.js 渲染，支持拖拽与缩放查看

graph LR subgraph 用户层["用户层"] U1[销售人员] U2[调度管理员] U3[施工人员] end WX[微信客户端] MP[清道夫小程序 uni-app + Vue3 + TypeScript] subgraph 后端服务["后端服务"] API[API 网关] Auth[认证中心] BS[业务服务层项目 / 任务 / 排班 / 车辆 / 人员 / 通知 / 统计] end subgraph 数据层["数据层"] DB[(关系型数据库)] OSS[文件存储] Cache[(Redis 缓存)] end subgraph 第三方服务["第三方服务"] MAP[腾讯地图] PUSH[微信推送] end U1 --> WX U2 --> WX U3 --> WX WX --> MP MP --> API API --> Auth API --> BS BS --> DB BS --> OSS BS --> Cache MP --> MAP BS --> PUSH style 用户层 fill:#f1f5f9,stroke:#38bdf8,stroke-width:2px style 后端服务 fill:#f1f5f9,stroke:#a855f7,stroke-width:2px style 数据层 fill:#f1f5f9,stroke:#34d399,stroke-width:2px style 第三方服务 fill:#f1f5f9,stroke:#f472b6,stroke-width:2px

💡 提示：可按住鼠标拖动，使用滚轮缩放，或使用右上角按钮控制

交互说明：鼠标拖拽可平移图表，滚轮可缩放查看细节，点击“重置”恢复初始视图。

架构特点：前后端分离、多角色终端、RESTful 接口、JWT 认证、数据与文件分离存储。

前端页面与分包结构

主包 + 分包策略，实现按需加载与三端隔离

graph TB Root[小程序页面结构主包 + 分包] Root --> Main[主包 pages/] Root --> Sub[分包 subPackages/] Main --> P1[首页 home] Main --> P2[任务 task] Main --> P3[排班 schedule] Main --> P4[我的 my] Main --> P5[登录 login] Sub --> Common[pages-common 通用分包] Sub --> Sales[pages-sales 销售分包] Sub --> Dispatch[pages-dispatch 调度分包] Sub --> Construction[pages-construction 施工分包] Common --> C1[项目库] Common --> C2[任务详情] Common --> C3[通知公告] Common --> C4[帮助中心] Sales --> S1[任务提醒] Sales --> S2[消息通知] Sales --> S3[知识库] Dispatch --> D1[排班管理] Dispatch --> D2[车辆人员] Dispatch --> D3[应急班组] Dispatch --> D4[可视化大屏] Construction --> CO1[每日任务] Construction --> CO2[历史任务] Construction --> CO3[明日任务]

💡 提示：可按住鼠标拖动，使用滚轮缩放，或使用右上角按钮控制

分包说明：主包包含 5 个 Tab/入口页面；subPackages 下按业务维度划分为 pages-common（通用页面）、pages-sales（销售端）、pages-dispatch（调度端）、pages-construction（施工端）四个分包，实现按需加载。

前端技术架构

视图层 → 状态层 → 接口层的分层设计

graph LR subgraph 视图层["视图层"] V1[pages 页面] V2[components 组件] V3[高级组件图片上传 / 地图 / 签名 / 图表] end S1[Pinia Store] subgraph 接口层["接口层"] A1[request.ts 请求封装] A2[业务 API 模块] end B1[后端 RESTful API] V1 --> V2 V2 --> V3 V1 --> S1 V2 --> S1 V3 --> S1 S1 --> A1 A1 --> A2 A2 --> B1 style 视图层 fill:#f1f5f9,stroke:#38bdf8,stroke-width:2px style 接口层 fill:#f1f5f9,stroke:#a855f7,stroke-width:2px

💡 提示：可按住鼠标拖动，使用滚轮缩放，或使用右上角按钮控制

前端说明：视图层由页面和组件构成，通用组件与业务组件分离；状态管理使用 Pinia，按业务领域拆分 Store；API 层统一封装 HTTP 请求并按模块组织接口函数，最终调用后端 RESTful API。

核心业务流程

任务全生命周期数据流转

flowchart TB subgraph 调度阶段["调度阶段"] A[销售端发布任务] --> B[调度端审核任务] B --> C[调度端安排排班] C --> D[分配车辆与人员] D --> E[施工端接收任务] end subgraph 施工阶段["施工阶段"] F[施工端出车] --> G[到达现场签到] G --> H[现场勘验] H --> I[施工作业] I --> J[上传照片电子签名] J --> K[任务完成待验收] end E --> F K --> L[调度端确认验收] style A fill:#dbeafe,stroke:#2563eb,stroke-width:3px style B fill:#fef3c7,stroke:#d97706,stroke-width:3px style E fill:#dcfce7,stroke:#16a34a,stroke-width:3px style K fill:#fce7f3,stroke:#db2777,stroke-width:3px style L fill:#f3e8ff,stroke:#9333ea,stroke-width:3px style 调度阶段 fill:#f8fafc,stroke:#38bdf8,stroke-width:2px style 施工阶段 fill:#f8fafc,stroke:#16a34a,stroke-width:2px

💡 提示：可按住鼠标拖动，使用滚轮缩放，或使用右上角按钮控制

流程说明：销售人员在项目基础上发布服务任务；调度管理员审核任务并安排排班，分配车辆和施工人员；施工人员通过小程序接收任务，按 SOP 流程执行出车、到场、勘验、施工、拍照签字等步骤；最终由调度端确认验收，形成业务闭环。

核心技术栈

uni-app

小程序框架

前端视图层

TypeScript

类型安全开发

Vite

构建工具

Pinia

状态管理

Tailwind CSS

样式方案

RESTful API

后端接口

JWT Token

身份认证

架构分层说明

接入层

面向三类终端用户提供交互界面。销售端、调度端、施工端均为微信小程序，基于 uni-app + Vue3 + TypeScript + Tailwind CSS 开发；统一使用 uni-ui 及自定义组件，适配移动端操作习惯。

网关层

后端通过 RESTful API 提供统一服务入口，Base URL 为 http://localhost:8080/api。前端 request.ts 统一封装 HTTP 请求，自动注入 Bearer Token，处理 401 过期跳转。

服务层

按业务领域划分为认证、项目、任务、排班、车辆、人员、通知、统计等模块。任务服务支持状态流转、催单、取消、日志等核心能力；排班服务支持按日期查询与班组资源分配。

数据层

关系型数据库存储业务数据，Redis 缓存热点数据，对象存储承载施工照片、视频、电子签名等多媒体文件。核心实体包括用户、项目、任务、排班、车辆、人员、通知等。