# 全量任务进度可视化方案 > **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. 交互流程示例 1. 用户进入页面，定位在“全量模式”，看到 KPI、银河图。 2. 通过顶部筛选器选择“品牌视觉部 + 本周”。 3. 框选银河图左下角一片积压任务 → 时间线立刻只展示这些任务，风险雷达同步列出责任人。 4. 点击风险卡片“即将超时” → 右侧 Drawer 打开，可直接指派增援或发送钉钉催办。 5. 全局面包屑支持“复制分享链接”到协作群。 --- ## 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 轮快照后灰度开放前端入口；若需停用可仅关闭配置并保留前端入口提示。