FlowChart.razor 4.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. 
  2. @if (shapeTrees != null)
  3. {
  4. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="@ChartWidth" height="@ChartHeight">
  5. <defs>
  6. <marker id="idArrow"
  7. viewBox="0 0 20 20" refX="0" refY="10"
  8. markerUnits="strokeWidth" markerWidth="5" markerHeight="10"
  9. orient="auto">
  10. <path d="M 0 0 L 20 10 L 0 20 z" fill="black" stroke="black" />
  11. </marker>
  12. </defs>
  13. <text x="@(ChartWidth/2)" y="@(TitleHeight/2)" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="30" font-weight="800">@workflow.Name</text>
  14. <line x1="@startNode.x" y1="@(startNode.y + startNode.width / 2) " x2="@(InitShape.x)" y2="@(InitShape.y - InitShape.height / 2)" stroke="black" stroke-width="2" marker-end="url(#idArrow)" />
  15. @for (int iLevel = 0; iLevel < LevelNodes.Count; iLevel++)
  16. {
  17. @foreach (var node in LevelNodes[iLevel])
  18. {
  19. if (node.Type == 0)
  20. {
  21. <circle cx="@(node.x)" cy="@node.y" r="@(node.width / 2) " stroke="black" stroke-width="2" fill="white" />
  22. <a @onclick="() => ClickNode(node)">
  23. <text x="@(node.x)" y="@node.y" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="16">
  24. @if (node == startNode)
  25. {
  26. @("开始")
  27. }
  28. else
  29. {
  30. if (node == endNode)
  31. {
  32. @("结束")
  33. }
  34. else
  35. {
  36. if (node.NodeObject is entity.workflowDefine.Step)
  37. {
  38. @(((entity.workflowDefine.Step)node.NodeObject).Name)
  39. }
  40. }
  41. }
  42. </text>
  43. </a>
  44. }
  45. if (node.Type == 1)
  46. {
  47. <rect x="@(node.x - node.width / 2)" y="@(node.y - node.height / 2)" rx="10" ry="10" width="@node.width" height="@node.height" style="fill:green;stroke:black;stroke-width:3;opacity:0.5" />
  48. <a @onclick="() => ClickNode(node)">
  49. <text x="@node.x" y="@node.y" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="@rectFontSize" font-weight="700">
  50. @if (node.NodeObject is entity.workflowDefine.Action)
  51. {
  52. @((workflow.InitAction == null || string.IsNullOrEmpty(workflow.InitAction.Name)) ? $"启动{workflow.Name}" : workflow.InitAction.Name)
  53. }
  54. else
  55. {
  56. @(((entity.workflowDefine.Step)node.NodeObject).Name)
  57. }
  58. </text>
  59. </a>
  60. }
  61. }
  62. }
  63. @foreach (var t in Transfers)
  64. {
  65. dynamic ret = GetLineParater(t);
  66. <line x1="@ret.x1" y1="@ret.y1" x2="@ret.x2" y2="@ret.y2" stroke="black" stroke-width="2" marker-end="url(#idArrow)" />
  67. <circle cx="@((ret.x1 + ret.x2) / 2)" cy="@((ret.y1 + ret.y2) / 2)" r="7" stroke="black" stroke-width="1.5" fill="white" />
  68. <a @onclick="() => ClickTrasfer(t)">
  69. <text x="@((ret.x1 + ret.x2) / 2)" y="@((ret.y1 + ret.y2) / 2)" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="12">c</text>
  70. </a>
  71. }
  72. @{
  73. dynamic endLine = GetEndStepLine();
  74. <line x1="@endLine.x1" y1="@endLine.y1" x2="@endLine.x2" y2="@endLine.y2" stroke="black" stroke-width="2" marker-end="url(#idArrow)"/>
  75. }
  76. @*<circle cx="@(endNode.x)" cy="@endNode.y" r="@(endNode.width/2) " stroke="black" stroke-width="2" fill="gray" />
  77. <a>
  78. <text x="@(endNode.x)" y="@endNode.y" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="5">结束</text>
  79. </a>*@
  80. </svg>
  81. }
  82. else
  83. {
  84. <Spin />
  85. }