mint/dashboard-v4/dashboard/src/components/task/TaskRelation.tsx

import { ITaskData } from "../api/task";

import "../article/article.css";

import Mermaid from "../general/Mermaid";

interface IWidget {
  projectId?: string;
  tasks?: ITaskData[];
}
const TaskRelation = ({ tasks }: IWidget) => {
  let mermaidText = "flowchart LR\n";

  //节点样式
  const color = [
    {
      status: "pending",
      fill: "#fafafa",
      stroke: "#d9d9d9",
      color: "#000000d9",
    },
    {
      status: "published",
      fill: "#fff7e6",
      stroke: "#ffd591",
      color: "#d46b08",
    },
    { status: "running", fill: "#e6f7ff", stroke: "#91d5ff", color: "#1890ff" },
    { status: "done", fill: "#f6ffed", stroke: "#b7eb8f", color: "#52c41a" },
    {
      status: "restarted",
      fill: "r#fff2f0",
      stroke: "#ffccc7",
      color: "#ff4d4f",
    },
    {
      status: "requested_restart",
      fill: "#fffbe6",
      stroke: "#ffe58f",
      color: "#faad14",
    },
    { status: "closed", fill: "yellow", stroke: "#333", color: "#333" },
    { status: "canceled", fill: "gray", stroke: "#333", color: "#333" },
    { status: "expired", fill: "brown", stroke: "#333", color: "#333" },
  ];

  color.forEach((value) => {
    mermaidText += `classDef ${value.status} fill:${value.fill},stroke:${value.stroke},color:${value.color},stroke-width:1px;\n`;
  });

  let relationLine = new Map<string, number>();
  tasks?.forEach((task: ITaskData, index: number, array: ITaskData[]) => {
    //输出节点
    mermaidText += `${task.id}[${task.title}]:::${task.status};\n`;

    //输出带有子任务的节点
    const children = array.filter(
      (value: ITaskData, index: number, array: ITaskData[]) => {
        return value.parent_id === task.id;
      }
    );
    if (children.length > 0) {
      mermaidText += `subgraph ${task.id} ["${task.title}"]\n`;
      mermaidText += `${children.map((task) => task.id).join(`;\n`)}`;
      mermaidText += ";\nend\n";
    }

    //关系线
    task.pre_task?.map((item) =>
      relationLine.set(`${item.id} --> ${task.id};\n`, 0)
    );
    task.next_task?.map((item) =>
      relationLine.set(`${task.id} --> ${item.id};\n`, 0)
    );
  });

  Array.from(relationLine.keys()).forEach((value) => {
    mermaidText += value;
  });

  console.debug(mermaidText);

  return (
    <div>
      <Mermaid text={mermaidText} />
    </div>
  );
};

export default TaskRelation;