aquagreen_wechat_app/docs/role-prototype-diff.md

清道夫 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（重要差异，次之）

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

P2（体验优化，可后续）

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

---

八、关键文件清单

文件路径	改造内容
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	每日任务检查项

---

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