# 清道夫 App 角色功能差异分析文档

> 对比基准：当前代码（`src/` 目录） vs 原型文件 `D:\work\绿水青山\清道夫系统原型_完整版_V21_SOP.html`
> 生成时间：2026-06-23

---

## 一、总体结论

当前项目已实现**登录角色切换 + 首页组件级切换**的框架，但各角色的**页面内容、功能入口、展示字段、操作流程**与原型相比仍有明显差距。主要表现为：

1. **首页信息结构不完整**：销售端缺「客户管理/合同管理」入口、缺「行业知识」模块；调度端缺「待审核任务列表」、统计项与原型不符。
2. **任务列表字段单一**：当前统一使用 `TaskCard`，只有项目名、地址、时间、车辆、人员；原型中三端展示字段差异很大（销售端看进度/班组/验收，调度端看申请人/施工类型，施工端看 8 步 SOP 流程）。
3. **任务详情操作未按角色拆分**：当前 `pages-common/taskDetail.vue` 是通用版，字段固定；调度端/施工端已有独立分包详情页，但与原型比字段和流程仍不完整。
4. **我的页面角色字段未细化**：当前统一显示「用户名/昵称/角色/手机号」，原型中销售/调度显示「部门/职位/电话/工号/邮箱/入职日期」，施工端显示「班组/职位/电话/工号」。
5. **部分原型页面尚未实现**：如销售端「项目库→新增项目」的完整字段、调度端「可视化/在岗人员/可用车辆/应急待命」、施工端「历史任务/明日任务」的列表字段等。

---

## 二、通用差异

| 差异点 | 当前实现 | 原型要求 | 影响范围 |
|--------|----------|----------|----------|
| 角色切换后首页 | 已按角色渲染 `SalesHome/DispatchHome/ConstructionHome` | 同上，但内容与原型差距大 | 全部 |
| tabBar | 已接入原生 tabBar（首页/任务/我的） | 一致 | 全部 |
| 页面跳转路径 | 已统一为分包路径 | 基本一致 | 全部 |
| 状态色 | 已按原型统一语义色 | 一致 | 全部 |
| 任务数据模型 | `Task` 字段较少，缺 `address/serviceType/team/vehicleNo/staffName/faultLocation` 等 | 字段更丰富 | 全部 |
| 底部导航 | 原生 tabBar 已实现 | 一致 | 全部 |

---

## 三、销售端差异

### 3.1 首页（`src/components/home/SalesHome.vue`）

| 模块 | 当前实现 | 原型要求 | 差异等级 |
|------|----------|----------|----------|
| 顶部欢迎语 | 「下午好 / 张销售」 | 「您好，欢迎回来 / 张销售」 | 低 |
| 快捷入口 | 项目库、任务、提醒、公告（4 个） | 项目库、客户管理（禁用）、合同管理（禁用）（3 个） | **中** |
| 数据统计 | 本月项目、待确认、进行中 | 与原型一致，但缺「任务提醒」入口按钮 | **中** |
| 任务提醒 | 入口在快捷入口里 | 应在统计卡片下方单独按钮「任务提醒 (2)」 | 低 |
| 通知公告 | 已实现 | 一致 | 无 |
| 行业知识 | **未实现** | 原型有「行业知识」模块，展示文章列表 | **高** |
| 跳转路径 | 项目库→`/pages-common/projectList` | 一致 | 无 |

### 3.2 任务列表（`src/components/task/TaskListView.vue`，role=sales）

| 字段/功能 | 当前实现 | 原型要求 | 差异等级 |
|-----------|----------|----------|----------|
| 筛选标签 | 全部/待确认/待排班/待出车/施工中/已完成 | 原型为：全部/调度中/施工中/已完成/应急 | **中** |
| 列表形式 | uni-list + 侧滑（催办/取消） | 卡片式，展示状态标签 + 紧急程度 + 时间 | **中** |
| 卡片字段 | 项目名、地址、状态 | 项目名、紧急程度、施工班组、位置、验收方式、底部进度条 | **高** |
| 发布按钮 | 销售端任务页**无发布按钮** | 原型任务页右上角有「发布」按钮 | **高** |
| 空状态 | 已实现 | 一致 | 无 |

### 3.3 任务详情（`src/subPackages/pages-common/taskDetail.vue`）

| 字段/功能 | 当前实现 | 原型要求 | 差异等级 |
|-----------|----------|----------|----------|
| 展示字段 | 地址、客户、电话、时间、车辆、人员 | 项目信息、施工信息、故障信息、施工要求、甲方确认人等 | **高** |
| 操作按钮 | 确认出车/到达现场/开始施工/完成任务/催单/取消 | 销售端原型：取消任务 + 催单；完成态可查看验收单/再次预约 | **高** |
| 进度展示 | 时间轴 7 步 | 原型为 4 步进度条（发布/调度确认/施工中/完成） | **中** |
| 地图 | 已集成 | 一致 | 无 |
| 签名 | 已集成 | 一致 | 无 |

### 3.4 我的页面（`src/components/my/ProfileView.vue`）

| 字段/功能 | 当前实现 | 原型要求 | 差异等级 |
|-----------|----------|----------|----------|
| 信息卡 | 用户名/昵称/角色/手机号 | 部门、职位、电话 | **中** |
| 基本信息页 | 当前为通用 `pages-common/basicInfo.vue` | 销售端原型：姓名/部门/职位/工号/电话/邮箱/入职日期 | **高** |
| 消息通知 | 入口统一走公告 | 原型有独立「消息通知」页，分全部/任务通知/系统消息 | **高** |
| 任务提醒 | 已有 `pages-sales/taskReminder.vue` | 一致 | 无 |

### 3.5 项目库（`src/subPackages/pages-common/projectList.vue`）

| 字段/功能 | 当前实现 | 原型要求 | 差异等级 |
|-----------|----------|----------|----------|
| 筛选标签 | 需确认 | 全部/包年/单次/季度/月付 | **中** |
| 项目卡片字段 | 需确认 | 项目名称、合作类型、设施类型、地址、服务点数、联系人 | **中** |
| 新增项目 | 已有 `addProject.vue` | 原型字段更完整（省市区、联系人、服务点、合同金额等） | **中** |
| 项目详情 | 已有 `projectDetail.vue` | 原型有地图定位、项目介绍、位置联系人、费用信息、服务点与服务项 | **中** |

---

## 四、调度端差异

### 4.1 首页（`src/components/home/DispatchHome.vue`）

| 模块 | 当前实现 | 原型要求 | 差异等级 |
|------|----------|----------|----------|
| 顶部欢迎语 | 「调度中心 / 控制台」 | 「您好，欢迎回来 / 调度中心」 | 低 |
| 统计卡片标题 | 「今日概览」 | 「今日任务统计」 | 低 |
| 统计项 | 今日任务、待排班、应急中 | 与原型一致 | 无 |
| 快捷操作 | 排班、任务、车辆、数据（4 个） | 排班管理、任务列表、车辆管理、可视化（4 个） | 低 |
| 待审核任务列表 | **未实现** | 原型首页下方有「待审核任务」模块，展示 2 条待审核任务卡片 | **高** |
| 通知公告 | 已实现 | 一致 | 无 |
| 跳转路径 | 排班→`/pages-dispatch/schedule` 等 | 一致 | 无 |

### 4.2 任务列表（`src/components/task/TaskListView.vue`，role=dispatch）

| 字段/功能 | 当前实现 | 原型要求 | 差异等级 |
|-----------|----------|----------|----------|
| 筛选标签 | 全部/待确认/待排班/待出车/施工中/已完成 | 原型：全部/待审核/待排班/进行中/已完成/已驳回 | **中** |
| 列表形式 | 统一 `TaskCard` | 卡片式，左侧带状态色条 | **中** |
| 卡片字段 | 项目名、地址、时间、车辆、人员 | 任务名称、位置、施工类型、时间、申请人、状态备注 | **高** |
| 新增任务 | tabBar 页无入口，但调度端有 `publishTask.vue` | 任务页右上角有「新增」按钮 | **高** |
| 操作 | 点击跳转详情 | 点击跳转详情 | 无 |

### 4.3 任务详情（`src/subPackages/pages-dispatch/taskDetail.vue`）

| 字段/功能 | 当前实现 | 原型要求 | 差异等级 |
|-----------|----------|----------|----------|
| 基本信息 | 任务名称、项目、类型、创建时间、负责人、车辆、班组、排班日期 | 任务名称、故障位置、施工类型、服务时间、申请人、项目信息、故障详情、施工信息 | **高** |
| 审核操作 | 待审核状态：确认/驳回；确认后显示安排班组车辆 | 与原型基本一致 | 无 |
| 已驳回状态 | 显示固定文案 | 原型显示具体驳回原因 | **中** |
| 排班操作 | 已实现班组+车辆选择 | 一致 | 无 |

### 4.4 我的页面（`src/components/my/ProfileView.vue`）

| 字段/功能 | 当前实现 | 原型要求 | 差异等级 |
|-----------|----------|----------|----------|
| 信息卡 | 用户名/昵称/角色/手机号 | 部门、职位、电话 | **中** |
| 基本信息页 | 通用版 | 调度端原型：姓名/部门/职位/工号/电话/邮箱/入职日期 | **高** |
| 帮助中心 | 通用 `pages-common/helpCenter.vue` | 调度端帮助中心问题应围绕审核/排班/资源状态 | **中** |
| 消息通知 | 入口统一走公告 | 原型有独立通知页 | **高** |

### 4.5 排班与资源页面

| 页面 | 当前实现 | 原型要求 | 差异等级 |
|------|----------|----------|----------|
| 排班管理 (`schedule.vue`) | 已有基础页面 | 原型有日历、资源状态卡片（在岗人员/可用车辆/应急待命）、当日排班列表 | **中** |
| 在岗人员 (`onDutyStaff.vue`) | 已有 | 原型展示人员、班组、技能等级、资质标签 | **中** |
| 可用车辆 (`availableVehicles.vue`) | 已有 | 原型展示车辆类型、尺寸、载重、驾驶员 | **中** |
| 应急待命 (`emergencyStandby.vue`) | 已有 | 原型展示应急热线、待命班组、车辆、联系按钮 | **中** |
| 可视化 (`visualization.vue`) | 已有 | 原型为数据可视化大屏，需确认当前实现程度 | **中** |
| 车辆列表 (`vehicleList.vue`) | 已有 | 原型有车俩管理列表 | 低 |

---

## 五、施工端差异

### 5.1 首页（`src/components/home/ConstructionHome.vue`）

| 模块 | 当前实现 | 原型要求 | 差异等级 |
|------|----------|----------|----------|
| 顶部信息 | 「工程一班 / 张师傅」 | 一致 | 无 |
| 统计卡片 | 已完成、进行中、明日任务 | 历史完成、当前任务、明日任务（语义一致） | 低 |
| 每日任务入口 | 已实现 | 一致 | 无 |
| 快捷功能 | 我的任务、车辆检查、历史任务、帮助中心 | 原型：我的任务、车辆检查、帮助中心（3 个） | 低 |
| 通知公告 | 已实现 | 一致 | 无 |
| 当前任务预览 | **未实现** | 原型首页下方有「当前任务」预览卡片 | **中** |

### 5.2 任务列表（`src/components/task/TaskListView.vue`，role=construction）

| 字段/功能 | 当前实现 | 原型要求 | 差异等级 |
|-----------|----------|----------|----------|
| 筛选标签 | 全部/待出车/已出车/施工中/已完成 | 原型：全部/待确认/待出车/已出车/施工中/待验收 | **中** |
| 列表形式 | 统一 `TaskCard` | 卡片式，展示项目名、加急/包年标签、服务类型、服务时间、地址、当前步骤流程 | **高** |
| 流程展示 | **未实现** | 原型每个卡片下方有 7 步流程（确认/出车/到达/施工/完成/清洗/验收） | **高** |
| 操作 | 点击跳转详情 | 点击跳转详情 | 无 |

### 5.3 任务详情（`src/subPackages/pages-construction/taskDetail.vue`）

| 字段/功能 | 当前实现 | 原型要求 | 差异等级 |
|-----------|----------|----------|----------|
| 施工流程 | 顶部 5 步流程 | 原型为 8 步（确认/出车/到达/勘验/施工/完成/清洗/验收） | **高** |
| 操作按钮 | 待确认时确认/反馈/拒绝；待出车时出发；已出车到达现场；已到达开始施工；施工中完成施工 | 与原型基本一致，但缺「勘验」步骤和「清洗」步骤 | **高** |
| 任务信息 | 任务类型、紧急程度、负责人、车辆、班组、计划日期、创建时间 | 原型有项目信息、施工信息、故障信息、施工要求、甲方确认人等大量字段 | **高** |
| 出车准备/现场踏勘/施工流程记录 | **未实现** | 原型 SOP 新增：车辆点检、出发时间、到达时间、踏勘一致性、客户同意、7 步上传记录 | **高** |
| 任务日志 | 当前为简单时间轴 | 原型有时间、操作人、动作 | 低 |

### 5.4 我的页面（`src/components/my/ProfileView.vue`）

| 字段/功能 | 当前实现 | 原型要求 | 差异等级 |
|-----------|----------|----------|----------|
| 信息卡 | 用户名/昵称/角色/手机号 | 班组、职位、电话 | **中** |
| 基本信息页 | 通用版 | 施工端原型：姓名/工号/班组/联系电话（可编辑保存） | **高** |
| 帮助中心 | 通用版 | 施工端帮助中心问题应围绕确认任务/每日检查/施工流程/联系调度 | **中** |
| 消息通知 | 入口统一走公告 | 原型有独立通知页，分全部/任务/系统 | **高** |

### 5.5 每日任务与其他页面

| 页面 | 当前实现 | 原型要求 | 差异等级 |
|------|----------|----------|----------|
| 每日任务 (`dailyTask.vue`) | 已实现车辆检查 + 今日任务列表 | 原型有车辆检查、设备检查、三大系统检查、备注、提交按钮 | **中** |
| 历史任务 (`historyTask.vue`) | 已有 | 原型展示项目名-服务类型、状态、地址、完成时间 | 低 |
| 明日任务 (`tomorrowTask.vue`) | 已有 | 原型展示项目名-服务类型、状态、地址、计划时间 | 低 |

---

## 六、数据模型差异

当前 `src/types/index.ts` 中 `Task` 接口字段不足，导致三端任务卡片和详情无法展示原型要求的字段。需要扩展的字段：

| 字段 | 用途 | 涉及端 |
|------|------|--------|
| `address` | 任务地址 | 全部 |
| `serviceType` | 施工类型（疏通/清淤/排查） | 全部 |
| `facilityType` | 施工设施（PVC/油污管/化粪池等） | 全部 |
| `serviceMode` | 服务方式（应急/月计划） | 销售/调度 |
| `faultLocation` | 故障位置 | 全部 |
| `faultDesc` | 故障描述 | 全部 |
| `vehicleNo` / `vehicle` | 车牌号/建议出车 | 全部 |
| `staffName` / `team` | 负责人/班组 | 全部 |
| `assignee` | 负责人 | 全部 |
| `coopType` | 合作类型（包年/单次等） | 销售/调度 |
| `acceptType` | 验收方式 | 销售/调度 |
| `urgent` | 紧急程度 | 全部 |
| `applicant` / `applicantName` | 申请人 | 调度 |
| `applyTime` | 申请时间 | 调度 |
| `rejectReason` | 驳回原因 | 调度 |
| `serviceTime` / `scheduleTime` | 服务时间 | 全部 |
| `serviceDate` / `scheduledDate` | 服务日期 | 全部 |
| `customerName` / `customerPhone` | 客户信息 | 全部 |
| `partyAContacts` | 甲方联系人 | 调度/施工 |
| `location` | 经纬度 | 全部 |

---

## 七、实施优先级建议

### P0（核心差异，优先完成）

1. **按角色改造首页内容**：补齐销售端「行业知识」、调度端「待审核任务」、施工端「当前任务预览」。
2. **按角色改造任务列表字段**：销售端展示进度条/班组/验收；调度端展示申请人/施工类型；施工端展示 7 步 SOP 流程。
3. **按角色改造我的页面**：销售/调度显示部门/职位/工号/邮箱/入职日期；施工端显示班组/职位/工号。
4. **扩展 Task 数据模型**：补充 `address/serviceType/facilityType/acceptType/applicant` 等字段。

### P1（重要差异，次之）

5. **按角色改造任务详情与操作**：销售端只看信息+催单/取消；调度端审核+排班；施工端 8 步 SOP 流程。
6. **调整筛选标签**：销售端用「调度中/施工中/已完成/应急」；调度端用「待审核/待排班/进行中/已完成/已驳回」；施工端用「待确认/待出车/已出车/施工中/待验收」。
7. **销售端任务页增加「发布」按钮**，调度端任务页增加「新增」按钮。

### P2（体验优化，可后续）

8. 完善项目库新增项目字段、项目详情字段。
9. 完善施工端每日任务（设备检查、三大系统检查、提交）。
10. 完善各端帮助中心文案和消息通知页。
11. 增加车辆/人员/应急待命详情字段。

---

## 八、关键文件清单

| 文件路径 | 改造内容 |
|----------|----------|
| `src/components/home/SalesHome.vue` | 首页内容 |
| `src/components/home/DispatchHome.vue` | 首页内容 |
| `src/components/home/ConstructionHome.vue` | 首页内容 |
| `src/components/task/TaskListView.vue` | 任务列表筛选与展示 |
| `src/components/task/TaskCard.vue` / 新增角色卡片 | 任务卡片字段 |
| `src/components/my/ProfileView.vue` | 我的页面角色字段 |
| `src/types/index.ts` | 扩展 Task/User 类型 |
| `src/stores/task.ts` | 补充统计 getter |
| `src/subPackages/pages-common/taskDetail.vue` | 销售端任务详情 |
| `src/subPackages/pages-dispatch/taskDetail.vue` | 调度端任务详情 |
| `src/subPackages/pages-construction/taskDetail.vue` | 施工端任务详情 |
| `src/subPackages/pages-construction/dailyTask.vue` | 每日任务检查项 |

---

*文档生成完毕，后续改造将按此文档逐项执行。*