9.6 KiB
9.6 KiB
全量任务进度可视化方案
Objective：在“数据分析”模块新增一个“全量任务进度”页面，打造全角色可感知的进度指挥舱，实时洞察任务流转健康度，推动跨部门协作效率。
1. 背景与成功指标
1.1 现状痛点
- 任务状态分散在大厅、看板、审批列表，缺乏“一眼就懂”的整体态势。
- 不同角色（需求方、接单部门、管理层）关注点不一致，难以共享同一数据语境。
- 目前图表偏重统计分析，缺少“即时、故事化”的进度故事线，看不到卡点与追溯链路。
1.2 目标
| 维度 | 目标 | 衡量指标 |
|---|---|---|
| 透明度 | 任何人都能 5 秒内定位关键任务状态 | 页面跳出率 < 20%，核心指标点击率 > 60% |
| 预警力 | 自动暴露卡点、积压、超时 | 每日自动推送 ≥ 1 条有效预警，超时识别准确率 > 90% |
| 决策效率 | 管理层能够据此分配资源 | 需求到指派均值缩短 15%，跨部门协调反馈时间 < 30 min |
2. 用户场景 & 信息需求
| 角色 | 关键问题 | 页面映射区 |
|---|---|---|
| 运营主管 | “本周有哪些风险任务？瓶颈在哪？” | 顶部 Executive Overview + 风险流视图 |
| 需求方 | “我发起的需求走到哪一步了？” | 我的任务筛选 + 全流程时间线 |
| 接单部门负责人 | “团队负载如何？谁需要支援？” | 部门热力矩阵 + 设计师负载面板 |
| 设计师 | “我手上的任务优先级？” | 个人进度雀巢卡片 + 待办序列 |
3. 页面信息架构（Single Page / 4 Panels）
┌──────────────────────────────────────────────────────────────────────────┐
│ HERO: 全局状态光幕 │
│ • 4 颗氛围化 KPI（完成率、准时率、风险任务、平均周期） │
│ • 实时流光进度条 + 时间刻度 │
├─────────────────────────────┬──────────────────────────────────────────┤
│ Left Column │ Right Column │
│ 1. “任务银河图” (Galaxy Scatter) │ 3. “部门热力矩阵” (Treemap + Sortable) │
│ - 每个节点 = 任务，颜色 = 状态，亮度 = 优先级 │ - 行: 接单部门；列: 状态（待审/处理中/已完结） │
│ - 支持框选筛选、磁悬浮显示详情 │ - 点击可 Drill 到设计师列表 │
│ 2. “流程轨迹时间线” (Segmented Timeline) │ 4. “风险雷达墙” (Stacked Cards) │
│ - 展示草稿→审批→接单→生产→交付→完结多段耗时 │ - 模块含“即将超时”“积压”“阻塞审批”“过载设计师” │
│ - 节点颜色对应 SLA，长段高亮 │ - 每张卡片可展开处理建议、责任人、快捷操作 │
└─────────────────────────────┴──────────────────────────────────────────┘
Interaction DNA：所有模块共享统一筛选（时间、部门、任务类型、优先级）。跨模块联动——例如在银河图框选结果，时间线与热力矩阵同步聚焦，只看选中集群的数据。
4. 数据指标体系
4.1 全局 KPI
| 指标 | 计算逻辑 | 刷新策略 |
|---|---|---|
| 完成率 | completed_tasks / total_tasks |
每 5 分钟刷新（Redis 缓存 30s） |
| 准时率 | on_time_completed / completed_tasks |
同上 |
| 风险任务数 | status in (pending,pending_approval,in_progress) AND risk_flag = 1 |
实时（WebSocket Push） |
| 平均任务周期 | AVG(completed_at - created_at) |
ETL 批量 + 增量修正 |
4.2 模块指标
- 任务银河图：X 轴=任务创建时间，Y 轴=当前阶段进度百分比，点大小=任务积分，点轮廓=任务类型。
- 流程轨迹时间线：拆分 6 个里程碑节点，记录耗时、责任角色、最近操作人；支持查看历史版本（驳回重开）。
- 部门热力矩阵：使用
task_status_aggregate物化视图，提供pending_count、in_progress_count、overdue_count、avg_cycle。 - 风险雷达墙：统一
risk_center表，写入风险类型、触发条件、建议动作、过期时间，提供“标记已处理”动作回写。
5. 视觉与交互设计语言
- 风格定位：Futuristic Command Center（深色渐变基底 + 霓虹强调色 + 玻璃拟态面板），与现有抢单系统蓝绿主色保持一致。
- 色板：
- 背景：
#050B16→#0F1A2A垂直渐变。 - 主按钮 / 高亮：蓝 (
#3C7EFF)、青 (#24D1C4)。 - 风险态：预警琥珀 (
#F6A623)、超时红 (#FF5F6D)。
- 背景：
- 组件特性：
- KPI 光幕采用“数字雨”动画轻量循环。
- 图表 hover 触发“光晕扩散”与磁性对齐，增强科技感。
- 交互手势：框选、拖拽、命中列表项后右侧弹出“Action Drawer”（指派、催办、备注）。
6. 技术实现方案
6.1 数据层
- 实时数据：借助 RocketMQ / Redis Stream 推送任务状态流，写入
task_progress_stream缓存表；WebSocket 服务向前端推送。 - 离线指标：用现有 ETL（Spark / Flink）产出
task_daily_metrics、dept_load_snapshot，每小时重算。 - API 设计：
GET /api/analytics/task-progress/overview→ 全局 KPI + 过滤条件。GET /api/analytics/task-progress/galaxy→ 支持聚合/分页。GET /api/analytics/task-progress/timeline/{taskId}→ 单任务轨迹。GET /api/analytics/task-progress/risks→ 风险列表，支持 POST 标记处理。
6.2 前端
- 基于现有前端栈（React + AntV/G2 + GPU Shader）。
- Galaxy 图建议用
three.js + instanced mesh渲染，带深度模糊和 Bloom 效果。 - Timeline 使用
AntV S2 + 自定义节点，支持展开子任务。 - 状态同步：利用 Zustand/Redux store 管理筛选器，所有模块订阅同一 slice。
6.3 性能与稳定性
- 页面首屏加载目标 < 2.5s（拆分 Graph 组件延迟加载）。
- WebSocket 消息控制在 1s 频率，过多聚合进入节流缓冲。
- 错误兜底：当 3D 模块渲染失败，自动回退为二维气泡图。
7. 交互流程示例
- 用户进入页面，定位在“全量模式”，看到 KPI、银河图。
- 通过顶部筛选器选择“品牌视觉部 + 本周”。
- 框选银河图左下角一片积压任务 → 时间线立刻只展示这些任务，风险雷达同步列出责任人。
- 点击风险卡片“即将超时” → 右侧 Drawer 打开，可直接指派增援或发送钉钉催办。
- 全局面包屑支持“复制分享链接”到协作群。
8. 迭代节奏
| Sprint | 目标 | 可交付 |
|---|---|---|
| Sprint 1 | 数据接口梳理、Galaxy 原型（静态数据） | Mock API、Figma 高保真、接口契约文档 |
| Sprint 2 | 指标计算、风险中心、WebSocket | 数据服务上线、风险推送、后端压测报告 |
| Sprint 3 | 交互细节、性能优化、可用性测试 | 3D/2D 回退策略、动效资产、用户访谈报告 |
9. 验收标准
- 指标计算与任务列表结果一致，误差 < 1%。
- 关键图表响应时间 < 400ms（筛选后首帧）。
- 风险卡片点击后 3 秒内同步任务详情。
- 用户可一键导出选中任务（CSV）且维持筛选条件。
- 通过 5 位核心角色可用性测试（SUS ≥ 80）。
下一步：确认视觉走查与数据接口排期，敲定 Galaxy/Timeline 组件技术选型，然后可进入 UI 高保真与前后端并行开发阶段。
10. 实施落地记录（2026-02-06）
- 数据层：新增
task_progress_snapshot结构（V16 migration + schema.sql），由TaskProgressSnapshotService以 10 分钟定时快照方式物化 KPI、趋势、银河节点数据，默认可通过analytics.task-progress.snapshot.enabled开启/关闭；快照写入使用 JSON Blob，避免在线表扫描。 - 服务层：
TaskProgressOverviewVO增补snapshotTime、deptId字段，支持部门过滤后返回一致的风险计数。TaskProgressSnapshotService提供getOverview(dateRange, month, deptId)，并在AnalyticsService#getTaskProgressOverview暴露 REST API/api/analytics/task-progress/overview。
- 定时与配置：
@Scheduled表达式0 0/10 * * * ?，可通过application-*.yml中analytics.task-progress.snapshot.enabled配置热切换，便于压测或紧急关闭。 - 前端指挥舱：
- 新增路由
#/analytics/task-progress，页面TaskProgressOverview.vue使用 ECharts + 玻璃拟态布局，包含 KPI 光幕、任务银河图、阶段时间线、部门热力矩阵与风险雷达墙。 Analytics.vue增设 CTA（“全量任务进度指挥舱”）引导用户进入新页面，视觉语言与方案一致。
- 新增路由
- 上线建议：先执行数据库迁移 → 开启定时快照并观察负载 → 预热至少 2 轮快照后灰度开放前端入口；若需停用可仅关闭配置并保留前端入口提示。