流程图用红码判断超时，且显示黄色

xiangpei

2025-03-02 897d9dce07aa716151b53b3204a81df63c8031e6

流程图用红码判断超时，且显示黄色

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

@@ -216,7 +216,7 @@
      margin-right: 8px;
    }

    .willOvertime {
    .overtime {
      background-color: #fcf5ea;
      padding: 4px;
      border: 1px solid #fce9c7;
@@ -243,13 +243,13 @@
      margin-right: 5px;
    }

    .overtime {
      padding: 4px;
      background: #ffd1d1;
      border: 1px solid rgba(246, 181, 181, 0.1);
      border-radius: 3px;
      color: #ff5353;
      margin-right: 5px;
    }
    //.overtime {
    //  padding: 4px;
    //  background: #ffd1d1;
    //  border: 1px solid rgba(246, 181, 181, 0.1);
    //  border-radius: 3px;
    //  color: #ff5353;
    //  margin-right: 5px;
    //}
  }
}

 src/components/Process/viewer/index.vue

@@ -7,8 +7,8 @@
          <div class="finish">已办理</div>
          <div class="processing">处理中</div>
          <div class="todo">未进行</div>
          <div class="willOvertime">即将超时</div>
          <div class="overtime">已超时</div>
<!--          <div class="overtime">已超时</div>-->
        </div>
        <!-- 流程图显示 -->
        <div v-loading="loading" class="canvas" ref="flowCanvas"></div>
@@ -112,10 +112,11 @@
          if (completeTask) {
            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
            if(completeTask.overtime && completeTask.overtime==='red'){
              canvas.addMarker(n.id,  'highlight-overtime')
            }else if(completeTask.overtime && completeTask.overtime==='yellow'){
              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) {