From 6b988bd582bfcd17fee48c476a5a6e5cc172b0d5 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期三, 12 三月 2025 10:08:33 +0800
Subject: [PATCH] dev-2
---
src/components/BpmnView/index.vue | 70 ++++++++++++++++++++++++++++------
1 files changed, 57 insertions(+), 13 deletions(-)
diff --git a/src/components/BpmnView/index.vue b/src/components/BpmnView/index.vue
index d0e6826..c5e0c7b 100644
--- a/src/components/BpmnView/index.vue
+++ b/src/components/BpmnView/index.vue
@@ -37,7 +37,7 @@
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import { ModuleDeclaration } from 'didi';
-import { Canvas, ModdleElement } from 'bpmn';
+import type { Canvas, ModdleElement } from 'bpmn';
import EventBus from 'diagram-js/lib/core/EventBus';
import Overlays from 'diagram-js/lib/features/overlays/Overlays';
import processApi from '@/api/workflow/processInstance/index';
@@ -51,7 +51,7 @@
const bpmnVisible = ref(true);
const historyList = ref([]);
-const init = (instanceId) => {
+const init = (businessKey) => {
loading.value = true;
bpmnVisible.value = true;
nextTick(async () => {
@@ -67,10 +67,32 @@
MoveCanvasModule
] as ModuleDeclaration[]
});
- const resp = await processApi.getHistoryList(instanceId);
+ const resp = await processApi.getHistoryList(businessKey);
xml.value = resp.data.xml;
taskList.value = resp.data.taskList;
historyList.value = resp.data.historyList;
+ await createDiagram(xml.value);
+ loading.value = false;
+ });
+};
+
+const initXml = (xmlStr: string) => {
+ loading.value = true;
+ bpmnVisible.value = true;
+ nextTick(async () => {
+ if (modeler.value) modeler.value.destroy();
+ modeler.value = new BpmnViewer({
+ container: canvas.value,
+ additionalModules: [
+ {
+ //绂佹婊氳疆婊氬姩
+ zoomScroll: ['value', '']
+ },
+ ZoomScrollModule,
+ MoveCanvasModule
+ ] as ModuleDeclaration[]
+ });
+ xml.value = xmlStr;
await createDiagram(xml.value);
loading.value = false;
});
@@ -111,6 +133,7 @@
<p>寮�濮嬫椂闂达細${data.startTime || ''}</p>
<p>缁撴潫鏃堕棿锛�${data.endTime || ''}</p>
<p>瀹℃壒鑰楁椂锛�${data.runDuration || ''}</p>
+ <p>娴佺▼鐗堟湰锛歷${data.version || ''}</p>
</div>`
});
};
@@ -238,7 +261,8 @@
}
};
defineExpose({
- init
+ init,
+ initXml
});
</script>
@@ -289,7 +313,7 @@
}
}
.bpmn-el-container {
- height: 500px;
+ height: calc(100vh - 350px);
}
.flow-containers {
width: 100%;
@@ -338,16 +362,35 @@
:deep(.highlight.djs-connection > .djs-visual > path) {
stroke: green !important;
}
- :deep(.highlight-todo.djs-connection > .djs-visual > path) {
- stroke: orange !important;
- stroke-dasharray: 4px !important;
- fill-opacity: 0.2 !important;
- marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
+
+ // 杈规婊氬姩鍔ㄧ敾
+ @keyframes path-animation {
+ from {
+ stroke-dashoffset: 100%;
+ }
+
+ to {
+ stroke-dashoffset: 0%;
+ }
}
- :deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
- fill: orange !important;
- stroke: orange !important;
+
+ :deep(.highlight-todo.djs-connection > .djs-visual > path) {
+ animation: path-animation 60s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
stroke-dasharray: 4px !important;
+ stroke: orange !important;
+ fill-opacity: 0.2 !important;
+ marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr');
+ }
+
+ :deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
+ animation: path-animation 60s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+ stroke-dasharray: 4px !important;
+ stroke: orange !important;
+ fill: orange !important;
fill-opacity: 0.2 !important;
}
}
@@ -363,5 +406,6 @@
margin: 0;
padding: 0;
}
+ cursor: pointer;
}
</style>
--
Gitblit v1.9.3