流程图查看，容缺、跳过显示

xiangpei

2025-03-17 e5fdf8249f325594579224d48477d0ab849e7d88

流程图查看，容缺、跳过显示

 src/components/Process/style/flow-viewer.scss

@@ -99,7 +99,7 @@
    right: 10px;
  }

  // 完成流程线
  /* ---------完成颜色---------- */
  .highlight.djs-shape .djs-visual > :nth-child(1) {
    fill: #56bb56 !important;
    stroke: #56bb56 !important;
@@ -120,7 +120,7 @@
    stroke: #56bb56 !important;
  }

  // 代办流程线
  /* ----------代办颜色---------- */
  .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
    fill: #559db0 !important;
    stroke: #559db0 !important;
@@ -141,29 +141,51 @@
    stroke: #559db0 !important;
  }

  // 已超时流程线
  /* --------容缺颜色-------- */
  //方块内部颜色
  .highlight-overtime.djs-shape .djs-visual > :nth-child(1) {
    fill: #ff5353 !important;
    stroke: #ff5353 !important;
  .highlight-wait.djs-shape .djs-visual > :nth-child(1) {
    fill: #F56C6C !important;
    stroke: #F56C6C !important;
    fill-opacity: 0.2 !important;
  }
  //文字颜色
  .highlight-overtime.djs-shape .djs-visual > :nth-child(2) {
    fill: #ff5353 !important;
  .highlight-wait.djs-shape .djs-visual > :nth-child(2) {
    fill: #F56C6C !important;
  }
  //人物ui颜色
  .highlight-overtime.djs-shape .djs-visual > path {
    fill: #ff5353 !important;
  .highlight-wait.djs-shape .djs-visual > path {
    fill: #F56C6C !important;
    fill-opacity: 0.2 !important;
    stroke: #ff5353 !important;
    stroke: #F56C6C !important;
  }
  //前面那条线的颜色
  .highlight-overtime.djs-connection > .djs-visual > path {
    stroke: #ff5353 !important;
  .highlight-wait.djs-connection > .djs-visual > path {
    stroke: #F56C6C !important;
}

  // 即将超时流程线
  /* --------跳过颜色--------- */
  .highlight-jump.djs-shape .djs-visual > :nth-child(1) {
    fill: #909399 !important;
    stroke: #909399 !important;
    fill-opacity: 0.2 !important;
  }
  //文字颜色
  .highlight-jump.djs-shape .djs-visual > :nth-child(2) {
    fill: #909399 !important;
  }
  //人物ui颜色
  .highlight-jump.djs-shape .djs-visual > path {
    fill: #909399 !important;
    fill-opacity: 0.2 !important;
    stroke: #909399 !important;
  }
  //前面那条线的颜色
  .highlight-jump.djs-connection > .djs-visual > path {
    stroke: #909399 !important;
  }


  /* --------超时颜色 */
  .highlight-willOvertime.djs-shape .djs-visual > :nth-child(1) {
    fill: #eab24a !important;
    stroke: #eab24a !important;
@@ -234,12 +256,21 @@
      margin-right: 8px;
    }

    .todo {
    .jump {
      padding: 4px;
      background: #ECEDEE;
      background: #909399;
      border: 1px solid rgba(204, 204, 204, 0.1);
      border-radius: 3px;
      color: #666666;
      color: #4f4f4f;
      margin-right: 5px;
    }

    .wait {
      padding: 4px;
      background: #F56C6C;
      border: 1px solid rgba(204, 204, 204, 0.1);
      border-radius: 3px;
      color: #eae9e9;
      margin-right: 5px;
    }


 src/components/Process/viewer/index.vue

@@ -6,9 +6,9 @@
          <span class="intro">状态：</span>
          <div class="finish">已办理</div>
          <div class="processing">处理中</div>
          <div class="todo">未进行</div>
          <div class="overtime">已超时</div>
<!--          <div class="overtime">已超时</div>-->
          <div class="jump">跳 过</div>
          <div class="wait">容 缺</div>
        </div>
        <!-- 流程图显示 -->
        <div v-loading="loading" class="canvas" ref="flowCanvas"></div>
@@ -110,25 +110,34 @@
        const endTask = nodeData[nodeData.length - 1]
        if (n.$type === 'bpmn:UserTask') {
          if (completeTask) {
            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
            if(completeTask.overtime && completeTask.overtime==='red'){
              canvas.addMarker(n.id,  'highlight-willOvertime')
            }
          // else if(completeTask.overtime && completeTask.overtime==='yellow'){
          //     canvas.addMarker(n.id,  'highlight-willOvertime')
          //   }
            n.outgoing?.forEach(nn => {
              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
              if (targetTask) {
                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
                  canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                } else {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }

            if (completeTask.hasJump) {
              canvas.addMarker(n.id,  'highlight-jump')
            } else if (completeTask.hasWait) {
              canvas.addMarker(n.id,  'highlight-wait')
            } else {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
              if(completeTask.overtime && completeTask.overtime==='red' || completeTask.overtime==='yellow'){
                canvas.addMarker(n.id,  'highlight-willOvertime')
              }
            }
            n.outgoing?.forEach(nn => {
              if (completeTask.hasJump) {
                canvas.addMarker(nn.id,  'highlight-jump')
              } else if (completeTask.hasWait) {
                canvas.addMarker(nn.id,  'highlight-wait')
              } else {
                const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
                if (targetTask) {
                  if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
                    canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                    canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
                  } else {
                    canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                    canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  }
                }
              }

            })
          }
        }
@@ -139,9 +148,14 @@
            n.outgoing?.forEach(nn => {
              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
              if (targetTask) {

                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                if (targetTask.hasJump) {
                  canvas.addMarker(nn.id,  'highlight-jump')
                } else if (targetTask.hasWait) {
                  canvas.addMarker(nn.id,  'highlight-wait')
                } else {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }
              }
            })
          }
@@ -153,8 +167,14 @@
            n.outgoing?.forEach(nn => {
              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
              if (targetTask) {
                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                if (targetTask.hasJump) {
                  canvas.addMarker(nn.id,  'highlight-jump')
                } else if (targetTask.hasWait) {
                  canvas.addMarker(nn.id,  'highlight-wait')
                }  else {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
                }
              }
            })
          }
@@ -162,8 +182,14 @@
          n.outgoing.forEach(nn => {
            const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
            if (completeTask) {
              canvas.addMarker(nn.id, 'highlight')
              canvas.addMarker(n.id, 'highlight')
              if (completeTask.hasJump) {
                canvas.addMarker(nn.id,  'highlight-jump')
              } else if (completeTask.hasWait) {
                canvas.addMarker(nn.id,  'highlight-wait')
              } else {
                canvas.addMarker(nn.id, 'highlight')
                canvas.addMarker(n.id, 'highlight')
              }
              return;
            }
          })