流程详情修改以及流程图高亮显示

src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue

@@ -1,3 +1,4 @@
+<!-- 高亮流程图页面以及流程节点颜色配置页面 -->
 <template>
   <div class="my-process-designer">
     <div class="my-process-designer__container">
@@ -91,6 +92,7 @@ const createNewDiagram = async (xml) => {
 // TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
 const highlightDiagram = async () => {
   const activityList = activityLists.value
+  console.log(activityLists.value,"高亮数据444455666");
   if (activityList.length === 0) {
     return
   }
@@ -103,7 +105,10 @@ const highlightDiagram = async () => {
   //进行中高亮之后的任务 key 集合，用于过滤掉 taskList 进行中后面的任务，避免进行中后面的数据 Hover 还有数据
   let removeTaskDefinitionKeyList = []
   // debugger
-  bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n: any) => {
+    console.log(bpmnModeler.getDefinitions().rootElements,"打印bpmnModeler.getDefinitions().rootElements[0]");
+    //芋道这里取值是rootElements[0].flowElements
+    bpmnModeler.getDefinitions().rootElements[1].flowElements?.forEach((n: any) => {
+    console.log(n,"打印nnnnnnnnnnnnnnnnn");
     let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
     if (!activity) {
       return
@@ -154,7 +159,8 @@ const highlightDiagram = async () => {
           }
         }
       })
-    } else if (n.$type === 'bpmn:ExclusiveGateway') {
+    } 
+    else if (n.$type === 'bpmn:ExclusiveGateway') {
       // 排它网关
       // 设置【bpmn:ExclusiveGateway】排它网关的高亮
       canvas.addMarker(n.id, getActivityHighlightCss(activity))
@@ -179,7 +185,8 @@ const highlightDiagram = async () => {
       if (matchNN && matchActivity) {
         canvas.addMarker(matchNN.id, getActivityHighlightCss(matchActivity))
       }
-    } else if (n.$type === 'bpmn:ParallelGateway') {
+    } 
+    else if (n.$type === 'bpmn:ParallelGateway') {
       // 并行网关
       // 设置【bpmn:ParallelGateway】并行网关的高亮
       canvas.addMarker(n.id, getActivityHighlightCss(activity))
@@ -192,7 +199,8 @@ const highlightDiagram = async () => {
           canvas.addMarker(nn.targetRef.id, getActivityHighlightCss(targetActivity))
         }
       })
-    } else if (n.$type === 'bpmn:StartEvent') {
+    } 
+    else if (n.$type === 'bpmn:StartEvent') {
       // 开始节点
       canvas.addMarker(n.id, 'highlight')
       n.outgoing?.forEach((nn) => {
@@ -204,13 +212,15 @@ const highlightDiagram = async () => {
           canvas.addMarker(n.id, 'highlight') // 高亮【bpmn:StartEvent】开始节点（自己）
         }
       })
-    } else if (n.$type === 'bpmn:EndEvent') {
+    } 
+    else if (n.$type === 'bpmn:EndEvent') {
       // 结束节点
       if (!processInstance.value || processInstance.value.status === 1) {
         return
       }
       canvas.addMarker(n.id, getResultCss(processInstance.value.status))
-    } else if (n.$type === 'bpmn:ServiceTask') {
+    } 
+    else if (n.$type === 'bpmn:ServiceTask') {
       //服务任务
       if (activity.startTime > 0 && activity.endTime === 0) {
         //进入执行，标识进行色
@@ -224,7 +234,8 @@ const highlightDiagram = async () => {
           canvas.addMarker(out.id, getResultCss(2))
         })
       }
-    } else if (n.$type === 'bpmn:SequenceFlow') {
+    } 
+    else if (n.$type === 'bpmn:SequenceFlow') {
       let targetActivity = activityList.find((m: any) => m.key === n.targetRef.id)
       if (targetActivity) {
         canvas.addMarker(n.id, getActivityHighlightCss(targetActivity))
@@ -279,7 +290,7 @@ const getActivityOutgoing = (activity) => {
   // 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
   const flowElements = bpmnModeler.getDefinitions().rootElements[0].flowElements
   const outgoing: any[] = []
-  flowElements.forEach((item: any) => {
+  flowElements?.forEach((item: any) => {
     if (item.$type !== 'bpmn:SequenceFlow') {
       return
     }