From e5fdf8249f325594579224d48477d0ab849e7d88 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期一, 17 三月 2025 11:50:47 +0800
Subject: [PATCH] 流程图查看，容缺、跳过显示
---
src/components/Process/style/flow-viewer.scss | 65 ++++++++++++++++-----
src/components/Process/viewer/index.vue | 80 +++++++++++++++++---------
2 files changed, 101 insertions(+), 44 deletions(-)
diff --git a/src/components/Process/style/flow-viewer.scss b/src/components/Process/style/flow-viewer.scss
index 76fb85c..15c6b67 100644
--- a/src/components/Process/style/flow-viewer.scss
+++ b/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;
}
diff --git a/src/components/Process/viewer/index.vue b/src/components/Process/viewer/index.vue
index ed21bd3..5558f6b 100644
--- a/src/components/Process/viewer/index.vue
+++ b/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;
}
})
--
Gitblit v1.8.0