diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-cell-update.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-cell-update.ts index 63e6927474..b4f87a76e6 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-cell-update.ts +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-cell-update.ts @@ -51,6 +51,19 @@ export function useCellUpdate(options: Options) { } } + /** + * Set the node's fill color by id + * @param {string} id + * @param {string} color + */ + function setNodeFillColor(id: string, color: string) { + const node = graph.value?.getCellById(id) + if (!node) { + return false + } + node.attr('rect/fill', color) + } + /** * Add a node to the graph * @param {string} id @@ -124,6 +137,7 @@ export function useCellUpdate(options: Options) { return { setNodeName, + setNodeFillColor, setNodeEdge, addNode, removeNode, diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-task-edit.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-task-edit.ts index 9056d94e48..4590490eb3 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-task-edit.ts +++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-task-edit.ts @@ -47,6 +47,7 @@ export function useTaskEdit(options: Options) { getSources, getTargets, setNodeName, + setNodeFillColor, setNodeEdge } = useCellUpdate({ graph @@ -167,6 +168,11 @@ export function useTaskEdit(options: Options) { processDefinition.value.taskDefinitionList.map((task) => { if (task.code === currTask.value?.code) { setNodeName(task.code + '', taskDef.name) + let fillColor = '#f3f3f5' + if (task.flag === 'NO') { + fillColor = '#ffffff' + } + setNodeFillColor(task.code + '', fillColor) setNodeEdge(String(task.code), data.preTasks) updatePreTasks(data.preTasks, task.code)