企业官网建设流程全解析

Apache DolphinScheduler 首页详解：任务/工作流状态统计与项目总览

【免费下载链接】dolphinschedulerApache DolphinScheduler is the modern data orchestration platform. Agile to create high performance workflow with low-code项目地址: https://gitcode.com/GitHub_Trending/dol/dolphinscheduler

Apache DolphinScheduler 的首页是登录后默认展示的系统总览页面，它聚合了当前用户可见的所有项目数据，以「任务实例状态统计」「工作流实例状态统计」「工作流定义统计」三大模块，帮助运维与开发人员快速观察整个调度系统的运行状态，并由此深入各个进程、检查任务与任务日志。本文基于本仓库的首页中文文档，并结合dolphinscheduler-api与dolphinscheduler-ui的源码实现，完整解析首页的功能构成、统计口径、时间范围筛选原理，以及如何通过 REST 接口复现首页统计能力。

首页功能概述

根据官方首页文档，首页的核心价值在于：

Apache DolphinScheduler 首页可让您查看用户所有项目的任务实例状态统计、工作流实例状态统计和项目统计。这是观察整个系统状态以及深入各个进程以检查任务和任务日志的每个状态的最佳方式。

需要特别说明的是，这里的统计范围是当前登录用户可见的所有项目（即用户拥有权限的全部项目），而非仅限于某个单一项目。若需查看单个项目内的细化统计，可进入具体项目下的「工作流/概览」页面，其实现复用了与首页相同的数据分析接口（见下文源码分析）。

从dolphinscheduler-ui的前端代码 views/home/index.tsx 可以看到，首页主体由三张卡片构成，呈「上两列 + 下一行」的布局：

对应源码：

• 布局骨架：views/home/index.tsx
• 统计卡片组件：views/home/components/state-card.tsx
• 定义统计卡片组件：views/home/components/definition-card.tsx

任务实例状态统计

展示内容

「任务实例状态统计」卡片以饼图 + 数据表的双栏形式展示（见 state-card.tsx）：

• 左侧：ECharts 饼图（PieChart），按状态展示任务实例数量占比；
• 右侧：Naive UI 数据表（NDataTable），两列为状态（state）与数量（number），表头定义见 use-table.ts。

状态名称取自国际化配置，中文环境（locales/zh_CN/home.ts）下的任务状态标签包括：提交成功、正在运行、准备暂停、暂停、准备停止、停止、失败、成功、需要容错、KILL、等待依赖完成、延时执行、强制成功、串行等待、派发、恢复容错。这些状态与任务执行生命周期一一对应，使饼图与表格能够完整反映任务的调度、执行、等待与终态分布。

数据请求链路

任务状态数据由前端 use-task-state.ts 发起请求：

countTaskState({ startDate: format(date[0], 'yyyy-MM-dd HH:mm:ss'), endDate: format(date[1], 'yyyy-MM-dd HH:mm:ss') })

底层 HTTP 调用定义于 service/modules/projects-analysis/index.ts：

export function countTaskState(params: StateReq): any { return axios({ url: '/projects/analysis/task-state-count', method: 'get', params }) }

即请求GET /projects/analysis/task-state-count，可携带startDate、endDate两个时间参数（均为yyyy-MM-dd HH:mm:ss格式字符串）。

该接口的后端实现位于 DataAnalysisController.java：当不传projectCode时统计当前用户全部可见项目（getAllTaskInstanceStateCount），传入projectCode时则按单个项目统计（getTaskInstanceStateCountByProject）。返回结构体为 TaskInstanceCountVO.java，包含：

• totalCount：任务实例总数；
• taskInstanceStatusCounts：按TaskExecutionStatus分组的计数列表。

值得关注的是 TaskInstanceCountVO.of() 的实现：它会遍历TaskExecutionStatus枚举的全部取值，对查询结果中缺失的状态补零，从而保证饼图与表格中每个状态都有对应的数据项，不会出现状态缺失导致图表错位的问题。总数totalCount则通过对各组计数求和得到。

工作流实例状态统计

「工作流实例状态统计」卡片与任务统计卡片使用同一个StateCard组件，交互与展示形式完全一致，只是数据源不同。

前端请求封装于 use-workflow-state.ts，调用：

countWorkflowInstanceState({ startDate: format(date[0], 'yyyy-MM-dd HH:mm:ss'), endDate: format(date[1], 'yyyy-MM-dd HH:mm:ss') })

对应 HTTP 接口为GET /projects/analysis/workflow-state-count（见 projects-analysis/index.ts），后端控制器实现于 DataAnalysisController.java，同样支持按projectCode精确到单个项目统计。

返回体为 WorkflowInstanceCountVO，其结构与任务统计一致：totalCount表示工作流实例总数，workflowInstanceStatusCounts为按工作流状态（提交成功、正在运行、暂停、停止、成功、失败、KILL 等）分组的计数列表。

工作流定义统计

第三张卡片「工作流定义统计」以柱状图形式展示，横轴为用户名，纵轴为对应的工作流定义数量，用于直观判断各用户对工作流定义（DAG）的创建贡献。其实现见 definition-card.tsx，仅当xAxisData与seriesData均非空时才渲染柱状图，避免空数据时的空白图表。

数据组装逻辑位于 use-workflow-definition.ts：调用countDefinitionByUser({})，将返回的userList拆分为用户名数组xAxisData与数量数组seriesData。

对应接口为GET /projects/analysis/define-user-count（见 projects-analysis/index.ts），后端实现于 DataAnalysisController.java。同样地，不传projectCode时统计当前用户可见的全部项目（getAllWorkflowDefinitionCount），传入时则统计指定项目（getWorkflowDefinitionCountByProject），返回按用户聚合的工作流定义计数列表。

时间范围筛选与数据刷新机制

首页的三张统计卡片中，前两张状态统计卡片支持时间范围筛选。前端实现于 state-card.tsx：卡片头部内置了一个 Naive UI 的NDatePicker，类型为datetimerange（日期时间范围），并支持清空（clearable）。

时间范围的选择逻辑集中在 index.tsx：

• 页面初始化时，默认时间范围为今日零点至当前时刻：[getTime(startOfToday()), Date.now()]（startOfToday与getTime来自date-fns库）；
• 切换时间范围后，通过handleTaskDate/handleWorkflowDate重新调用对应的统计接口；
• 组件挂载（onMounted）以及语言环境切换（watch(() => locale.value)）时都会重新拉取数据，确保统计与国际化标签保持同步。

时间参数在前端统一格式化为yyyy-MM-dd HH:mm:ss字符串后随 GET 请求发送，后端据此进行过滤统计，从而支持查看任意历史时间窗口内的任务与工作流状态分布。

源码级实现小结

从上表可以总结出首页的架构特点：前端三个独立的数据 hook 分别消费后端三个统计分析接口，共用一个通用卡片组件渲染，且三个接口都遵循「不传projectCode统计全部可见项目、传入则按项目统计」的统一设计。这意味着同样的统计能力既服务于首页的全局限览，也被项目级「概览」页面复用，形成了一套可复用的调度系统数据分析 API。

常见问题与使用建议

1. 首页统计的项目范围是什么？首页统计的是当前登录用户拥有权限的全部项目数据，而非整个系统所有用户的数据。若需查看指定项目的统计，可调用对应的分析接口并传入projectCode参数。

2. 为什么首页默认只显示今天的数据？首页初始时间范围为「今日零点 ~ 当前时间」，可通过卡片右上角的时间选择器切换任意时间窗口，查看历史某时段的实例状态分布。

3. 状态统计表为什么会出现计数为 0 的状态行？这是后端 TaskInstanceCountVO 与WorkflowInstanceCountVO对缺失状态补零的结果，目的是保证图表序列完整，避免因某状态无数据导致饼图图例与表格行缺失。

4. 如何深入排查某个状态的实例？首页只提供聚合统计，如需查看具体实例明细与日志，可从首页进入对应的「项目 → 工作流/任务实例」页面，结合状态过滤条件定位问题实例并查看任务日志，这正是首页定位「观察系统状态」、明细页面负责「深入检查」的职责分工。

通过首页，调度系统的整体运行状况可以一目了然：任务与工作流的成功/失败/运行中等状态占比、各用户的工作流定义产出，全部集中在一屏之内。结合本文给出的接口与源码路径，你既可以快速读懂首页的统计逻辑，也可以直接复用这些 REST 接口构建自定义的运维看板。

【免费下载链接】dolphinschedulerApache DolphinScheduler is the modern data orchestration platform. Agile to create high performance workflow with low-code项目地址: https://gitcode.com/GitHub_Trending/dol/dolphinscheduler