From 69e6a1f93f3b47a510ea0f9670c6b4690ae87835 Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Thu, 9 Jul 2026 14:41:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessViewer.vue        |    3 +-
 .../penal/listeners/ElementListeners.vue      |  922 +++++++-------
 .../online/shishishuju/index.vue              |   23 +-
 .../task/myTask/components/ProcessViewer.vue  | 1066 ++++++++---------
 4 files changed, 1001 insertions(+), 1013 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index c5295e0a..0beba774 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -103,7 +103,7 @@ const highlightDiagram = async () => {
   let findProcessTask = false //是否已经高亮了进行中的任务
   //进行中高亮之后的任务 key 集合，用于过滤掉 taskList 进行中后面的任务，避免进行中后面的数据 Hover 还有数据
   let removeTaskDefinitionKeyList = []
-  // debugger
+  // 
     //芋道这里取值是rootElements[0].flowElements
     bpmnModeler.getDefinitions().rootElements[1].flowElements?.forEach((n: any) => {
     let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
@@ -135,7 +135,6 @@ const highlightDiagram = async () => {
       // 处理 outgoing 出线
       const outgoing = getActivityOutgoing(activity)
       outgoing?.forEach((nn: any) => {
-        // debugger
         let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
         // 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
         if (targetActivity) {
diff --git a/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index 2d129673..0a0c6416 100644
--- a/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -1,463 +1,459 @@
-<template>
-  <div class='panel-tab__content'>
-    <el-table :data='elementListenersList' size='small' border>
-      <el-table-column label='序号' width='80px' type='index' />
-      <el-table-column label='事件类型' min-width='100px' prop='event' />
-      <el-table-column
-          label='监听器类型'
-          min-width='100px'
-          show-overflow-tooltip
-          :formatter='(row) => listenerTypeObject[row.listenerType]'
-      />
-      <el-table-column label='操作' width='100px'>
-        <template #default='scope'>
-          <el-button size='small' link @click='openListenerForm(scope.row, scope.$index)'
-          >编辑
-          </el-button
-          >
-          <el-divider direction='vertical' />
-          <el-button size='small' link style='color: #ff4d4f' @click='removeListener(scope.$index)'
-          >移除
-          </el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class='element-drawer__button'>
-            <XButton
-              type="primary"
-              preIcon="ep:plus"
-              title="添加监听器"
-              size="small"
-              @click="openListenerForm(null)"
-            />
-<!--      <Plus type='primary'-->
-<!--            title='添加监听器'-->
-<!--            size='small'-->
-<!--            @click='openListenerForm(null)' />-->
-            <XButton
-              type="success"
-              preIcon="ep:select"
-              title="选择监听器"
-              size="small"
-              @click="openProcessListenerDialog"
-            />
-<!--      <Select-->
-<!--          type='success'-->
-<!--          title='选择监听器'-->
-<!--          size='small'-->
-<!--          @click='openProcessListenerDialog'-->
-<!--      />-->
-    </div>
-
-    <!-- 监听器 编辑/创建 部分 -->
-    <el-drawer
-        v-model='listenerFormModelVisible'
-        title='执行监听器'
-        :size='`${width}px`'
-        append-to-body
-        destroy-on-close
-    >
-      <el-form :model='listenerForm' label-width='96px' ref='listenerFormRef'>
-        <el-form-item
-            label='事件类型'
-            prop='event'
-            :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-select v-model='listenerForm.event'>
-            <el-option label='start' value='start' />
-            <el-option label='end' value='end' />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-            label='监听器类型'
-            prop='listenerType'
-            :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-select v-model='listenerForm.listenerType'>
-            <el-option
-                v-for='i in Object.keys(listenerTypeObject)'
-                :key='i'
-                :label='listenerTypeObject[i]'
-                :value='i'
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-            v-if="listenerForm.listenerType === 'classListener'"
-            label='Java类'
-            prop='class'
-            key='listener-class'
-            :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model='listenerForm.class' clearable />
-        </el-form-item>
-        <el-form-item
-            v-if="listenerForm.listenerType === 'expressionListener'"
-            label='表达式'
-            prop='expression'
-            key='listener-expression'
-            :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model='listenerForm.expression' clearable />
-        </el-form-item>
-        <el-form-item
-            v-if="listenerForm.listenerType === 'delegateExpressionListener'"
-            label='代理表达式'
-            prop='delegateExpression'
-            key='listener-delegate'
-            :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model='listenerForm.delegateExpression' clearable />
-        </el-form-item>
-        <template v-if="listenerForm.listenerType === 'scriptListener'">
-          <el-form-item
-              label='脚本格式'
-              prop='scriptFormat'
-              key='listener-script-format'
-              :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
-          >
-            <el-input v-model='listenerForm.scriptFormat' clearable />
-          </el-form-item>
-          <el-form-item
-              label='脚本类型'
-              prop='scriptType'
-              key='listener-script-type'
-              :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
-          >
-            <el-select v-model='listenerForm.scriptType'>
-              <el-option label='内联脚本' value='inlineScript' />
-              <el-option label='外部脚本' value='externalScript' />
-            </el-select>
-          </el-form-item>
-          <el-form-item
-              v-if="listenerForm.scriptType === 'inlineScript'"
-              label='脚本内容'
-              prop='value'
-              key='listener-script'
-              :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
-          >
-            <el-input v-model='listenerForm.value' clearable />
-          </el-form-item>
-          <el-form-item
-              v-if="listenerForm.scriptType === 'externalScript'"
-              label='资源地址'
-              prop='resource'
-              key='listener-resource'
-              :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
-          >
-            <el-input v-model='listenerForm.resource' clearable />
-          </el-form-item>
-        </template>
-      </el-form>
-      <el-divider />
-      <p class='listener-filed__title'>
-        <span><Menu />注入字段：</span>
-        <XButton type='primary' @click='openListenerFieldForm(null)' title='添加字段' />
-      </p>
-      <el-table
-          :data='fieldsListOfListener'
-          size='small'
-          max-height='240'
-          fit
-          border
-          style='flex: none'
-      >
-        <el-table-column label='序号' width='80px' type='index' />
-        <el-table-column label='字段名称' min-width='100px' prop='name' />
-        <el-table-column
-            label='字段类型'
-            min-width='80px'
-            show-overflow-tooltip
-            :formatter='(row) => fieldTypeObject[row.fieldType]'
-        />
-        <el-table-column
-            label='字段值/表达式'
-            min-width='100px'
-            show-overflow-tooltip
-            :formatter='(row) => row.string || row.expression'
-        />
-        <el-table-column label='操作' width='130px'>
-          <template #default='scope'>
-            <el-button size='small' link @click='openListenerFieldForm(scope.row, scope.$index)'
-            >编辑
-            </el-button
-            >
-            <el-divider direction='vertical' />
-            <el-button
-                size='small'
-                link
-                style='color: #ff4d4f'
-                @click='removeListenerField(scope.$index)'
-            >移除
-            </el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <div class='element-drawer__button'>
-        <el-button @click='listenerFormModelVisible = false'>取 消</el-button>
-        <el-button type='primary' @click='saveListenerConfig'>保 存</el-button>
-      </div>
-    </el-drawer>
-
-    <!-- 注入西段 编辑/创建 部分 -->
-    <el-dialog
-        title='字段配置'
-        v-model='listenerFieldFormModelVisible'
-        width='600px'
-        append-to-body
-        destroy-on-close
-    >
-      <el-form
-          :model='listenerFieldForm'
-          label-width='96spx'
-          ref='listenerFieldFormRef'
-          style='height: 136px'
-      >
-        <el-form-item
-            label='字段名称：'
-            prop='name'
-            :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model='listenerFieldForm.name' clearable />
-        </el-form-item>
-        <el-form-item
-            label='字段类型：'
-            prop='fieldType'
-            :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-select v-model='listenerFieldForm.fieldType'>
-            <el-option
-                v-for='i in Object.keys(fieldTypeObject)'
-                :key='i'
-                :label='fieldTypeObject[i]'
-                :value='i'
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-            v-if="listenerFieldForm.fieldType === 'string'"
-            label='字段值：'
-            prop='string'
-            key='field-string'
-            :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model='listenerFieldForm.string' clearable />
-        </el-form-item>
-        <el-form-item
-            v-if="listenerFieldForm.fieldType === 'expression'"
-            label='表达式：'
-            prop='expression'
-            key='field-expression'
-            :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model='listenerFieldForm.expression' clearable />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button size='small' @click='listenerFieldFormModelVisible = false'>取 消</el-button>
-        <el-button size='small' type='primary' @click='saveListenerFiled'>确 定</el-button>
-      </template>
-    </el-dialog>
-  </div>
-
-  <!-- 选择弹窗 -->
-  <ProcessListenerDialog ref='processListenerDialogRef' @select='selectProcessListener' />
-</template>
-<script lang='ts' setup>
-import { ElMessageBox } from 'element-plus'
-import XButton from '@/components/XButton/src/XButton.vue'
-import { Plus, Select, Menu } from '@element-plus/icons-vue'
-import { createListenerObject, updateElementExtensions } from '../../utils'
-import {
-  initListenerType,
-  initListenerForm,
-  listenerType,
-  fieldType,
-  initListenerForm2
-} from './utilSelf'
-import ProcessListenerDialog from './ProcessListenerDialog.vue'
-
-defineOptions({ name: 'ElementListeners' })
-
-const props = defineProps({
-  id: String,
-  type: String
-})
-const prefix = inject('prefix')
-const width = inject('width')
-const elementListenersList = ref<any[]>([]) // 监听器列表
-const listenerForm = ref<any>({}) // 监听器详情表单
-const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
-const fieldsListOfListener = ref<any[]>([])
-const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
-const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
-const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
-const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
-const listenerTypeObject = ref(listenerType)
-const fieldTypeObject = ref(fieldType)
-const bpmnElement = ref()
-const otherExtensionList = ref()
-const bpmnElementListeners = ref()
-const listenerFormRef = ref()
-const listenerFieldFormRef = ref()
-const bpmnInstances = () => (window as any)?.bpmnInstances
-
-const resetListenersList = () => {
-  bpmnElement.value = bpmnInstances().bpmnElement
-  otherExtensionList.value = []
-  bpmnElementListeners.value =
-      bpmnElement.value.businessObject?.extensionElements?.values?.filter(
-          (ex) => ex.$type === `${prefix}:ExecutionListener`
-      ) ?? []
-  elementListenersList.value = bpmnElementListeners.value.map((listener) =>
-      initListenerType(listener)
-  )
-}
-// 打开 监听器详情 侧边栏
-const openListenerForm = (listener, index?) => {
-  // debugger
-  if (listener) {
-    listenerForm.value = initListenerForm(listener)
-    editingListenerIndex.value = index
-  } else {
-    listenerForm.value = {}
-    editingListenerIndex.value = -1 // 标记为新增
-  }
-  if (listener && listener.fields) {
-    fieldsListOfListener.value = listener.fields.map((field) => ({
-      ...field,
-      fieldType: field.string ? 'string' : 'expression'
-    }))
-  } else {
-    fieldsListOfListener.value = []
-    listenerForm.value['fields'] = []
-  }
-  // 打开侧边栏并清楚验证状态
-  listenerFormModelVisible.value = true
-  nextTick(() => {
-    if (listenerFormRef.value) {
-      listenerFormRef.value.clearValidate()
-    }
-  })
-}
-// 打开监听器字段编辑弹窗
-const openListenerFieldForm = (field, index?) => {
-  listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
-  editingListenerFieldIndex.value = field ? index : -1
-  listenerFieldFormModelVisible.value = true
-  nextTick(() => {
-    if (listenerFieldFormRef.value) {
-      listenerFieldFormRef.value.clearValidate()
-    }
-  })
-}
-// 保存监听器注入字段
-const saveListenerFiled = async () => {
-  // debugger
-  let validateStatus = await listenerFieldFormRef.value.validate()
-  if (!validateStatus) return // 验证不通过直接返回
-  if (editingListenerFieldIndex.value === -1) {
-    fieldsListOfListener.value.push(listenerFieldForm.value)
-    listenerForm.value.fields.push(listenerFieldForm.value)
-  } else {
-    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
-    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
-  }
-  listenerFieldFormModelVisible.value = false
-  nextTick(() => {
-    listenerFieldForm.value = {}
-  })
-}
-// 移除监听器字段
-const removeListenerField = (index) => {
-  // debugger
-  ElMessageBox.confirm('确认移除该字段吗？', '提示', {
-    confirmButtonText: '确 认',
-    cancelButtonText: '取 消'
-  })
-      .then(() => {
-        fieldsListOfListener.value.splice(index, 1)
-        listenerForm.value.fields.splice(index, 1)
-      })
-      .catch(() => console.info('操作取消'))
-}
-// 移除监听器
-const removeListener = (index) => {
-  ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
-    confirmButtonText: '确 认',
-    cancelButtonText: '取 消'
-  })
-      .then(() => {
-        bpmnElementListeners.value.splice(index, 1)
-        elementListenersList.value.splice(index, 1)
-        updateElementExtensions(
-            bpmnElement.value,
-            otherExtensionList.value.concat(bpmnElementListeners.value)
-        )
-      })
-      .catch(() => console.info('操作取消'))
-}
-// 保存监听器配置
-const saveListenerConfig = async () => {
-  // debugger
-  let validateStatus = await listenerFormRef.value.validate()
-  if (!validateStatus) return // 验证不通过直接返回
-  const listenerObject = createListenerObject(listenerForm.value, false, prefix)
-  if (editingListenerIndex.value === -1) {
-    bpmnElementListeners.value.push(listenerObject)
-    elementListenersList.value.push(listenerForm.value)
-  } else {
-    bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
-    elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
-  }
-  // 保存其他配置
-  otherExtensionList.value =
-      bpmnElement.value.businessObject?.extensionElements?.values?.filter(
-          (ex) => ex.$type !== `${prefix}:ExecutionListener`
-      ) ?? []
-  updateElementExtensions(
-      bpmnElement.value,
-      otherExtensionList.value.concat(bpmnElementListeners.value)
-  )
-  // 4. 隐藏侧边栏
-  listenerFormModelVisible.value = false
-  listenerForm.value = {}
-}
-
-// 打开监听器弹窗
-const processListenerDialogRef = ref()
-const openProcessListenerDialog = async () => {
-  processListenerDialogRef.value.open('execution')
-}
-const selectProcessListener = (listener) => {
-  const listenerForm = initListenerForm2(listener)
-  const listenerObject = createListenerObject(listenerForm, false, prefix)
-  bpmnElementListeners.value.push(listenerObject)
-  elementListenersList.value.push(listenerForm)
-
-  // 保存其他配置
-  otherExtensionList.value =
-      bpmnElement.value.businessObject?.extensionElements?.values?.filter(
-          (ex) => ex.$type !== `${prefix}:ExecutionListener`
-      ) ?? []
-  updateElementExtensions(
-      bpmnElement.value,
-      otherExtensionList.value.concat(bpmnElementListeners.value)
-  )
-}
-
-watch(
-    () => props.id,
-    (val) => {
-      val &&
-      val.length &&
-      nextTick(() => {
-        resetListenersList()
-      })
-    },
-    { immediate: true }
-)
-</script>
+<template>
+  <div class='panel-tab__content'>
+    <el-table :data='elementListenersList' size='small' border>
+      <el-table-column label='序号' width='80px' type='index' />
+      <el-table-column label='事件类型' min-width='100px' prop='event' />
+      <el-table-column
+          label='监听器类型'
+          min-width='100px'
+          show-overflow-tooltip
+          :formatter='(row) => listenerTypeObject[row.listenerType]'
+      />
+      <el-table-column label='操作' width='100px'>
+        <template #default='scope'>
+          <el-button size='small' link @click='openListenerForm(scope.row, scope.$index)'
+          >编辑
+          </el-button
+          >
+          <el-divider direction='vertical' />
+          <el-button size='small' link style='color: #ff4d4f' @click='removeListener(scope.$index)'
+          >移除
+          </el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class='element-drawer__button'>
+            <XButton
+              type="primary"
+              preIcon="ep:plus"
+              title="添加监听器"
+              size="small"
+              @click="openListenerForm(null)"
+            />
+<!--      <Plus type='primary'-->
+<!--            title='添加监听器'-->
+<!--            size='small'-->
+<!--            @click='openListenerForm(null)' />-->
+            <XButton
+              type="success"
+              preIcon="ep:select"
+              title="选择监听器"
+              size="small"
+              @click="openProcessListenerDialog"
+            />
+<!--      <Select-->
+<!--          type='success'-->
+<!--          title='选择监听器'-->
+<!--          size='small'-->
+<!--          @click='openProcessListenerDialog'-->
+<!--      />-->
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer
+        v-model='listenerFormModelVisible'
+        title='执行监听器'
+        :size='`${width}px`'
+        append-to-body
+        destroy-on-close
+    >
+      <el-form :model='listenerForm' label-width='96px' ref='listenerFormRef'>
+        <el-form-item
+            label='事件类型'
+            prop='event'
+            :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model='listenerForm.event'>
+            <el-option label='start' value='start' />
+            <el-option label='end' value='end' />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+            label='监听器类型'
+            prop='listenerType'
+            :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model='listenerForm.listenerType'>
+            <el-option
+                v-for='i in Object.keys(listenerTypeObject)'
+                :key='i'
+                :label='listenerTypeObject[i]'
+                :value='i'
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+            v-if="listenerForm.listenerType === 'classListener'"
+            label='Java类'
+            prop='class'
+            key='listener-class'
+            :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model='listenerForm.class' clearable />
+        </el-form-item>
+        <el-form-item
+            v-if="listenerForm.listenerType === 'expressionListener'"
+            label='表达式'
+            prop='expression'
+            key='listener-expression'
+            :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model='listenerForm.expression' clearable />
+        </el-form-item>
+        <el-form-item
+            v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+            label='代理表达式'
+            prop='delegateExpression'
+            key='listener-delegate'
+            :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model='listenerForm.delegateExpression' clearable />
+        </el-form-item>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <el-form-item
+              label='脚本格式'
+              prop='scriptFormat'
+              key='listener-script-format'
+              :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+          >
+            <el-input v-model='listenerForm.scriptFormat' clearable />
+          </el-form-item>
+          <el-form-item
+              label='脚本类型'
+              prop='scriptType'
+              key='listener-script-type'
+              :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+          >
+            <el-select v-model='listenerForm.scriptType'>
+              <el-option label='内联脚本' value='inlineScript' />
+              <el-option label='外部脚本' value='externalScript' />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+              v-if="listenerForm.scriptType === 'inlineScript'"
+              label='脚本内容'
+              prop='value'
+              key='listener-script'
+              :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+          >
+            <el-input v-model='listenerForm.value' clearable />
+          </el-form-item>
+          <el-form-item
+              v-if="listenerForm.scriptType === 'externalScript'"
+              label='资源地址'
+              prop='resource'
+              key='listener-resource'
+              :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+          >
+            <el-input v-model='listenerForm.resource' clearable />
+          </el-form-item>
+        </template>
+      </el-form>
+      <el-divider />
+      <p class='listener-filed__title'>
+        <span><Menu />注入字段：</span>
+        <XButton type='primary' @click='openListenerFieldForm(null)' title='添加字段' />
+      </p>
+      <el-table
+          :data='fieldsListOfListener'
+          size='small'
+          max-height='240'
+          fit
+          border
+          style='flex: none'
+      >
+        <el-table-column label='序号' width='80px' type='index' />
+        <el-table-column label='字段名称' min-width='100px' prop='name' />
+        <el-table-column
+            label='字段类型'
+            min-width='80px'
+            show-overflow-tooltip
+            :formatter='(row) => fieldTypeObject[row.fieldType]'
+        />
+        <el-table-column
+            label='字段值/表达式'
+            min-width='100px'
+            show-overflow-tooltip
+            :formatter='(row) => row.string || row.expression'
+        />
+        <el-table-column label='操作' width='130px'>
+          <template #default='scope'>
+            <el-button size='small' link @click='openListenerFieldForm(scope.row, scope.$index)'
+            >编辑
+            </el-button
+            >
+            <el-divider direction='vertical' />
+            <el-button
+                size='small'
+                link
+                style='color: #ff4d4f'
+                @click='removeListenerField(scope.$index)'
+            >移除
+            </el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class='element-drawer__button'>
+        <el-button @click='listenerFormModelVisible = false'>取 消</el-button>
+        <el-button type='primary' @click='saveListenerConfig'>保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 注入西段 编辑/创建 部分 -->
+    <el-dialog
+        title='字段配置'
+        v-model='listenerFieldFormModelVisible'
+        width='600px'
+        append-to-body
+        destroy-on-close
+    >
+      <el-form
+          :model='listenerFieldForm'
+          label-width='96spx'
+          ref='listenerFieldFormRef'
+          style='height: 136px'
+      >
+        <el-form-item
+            label='字段名称：'
+            prop='name'
+            :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model='listenerFieldForm.name' clearable />
+        </el-form-item>
+        <el-form-item
+            label='字段类型：'
+            prop='fieldType'
+            :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model='listenerFieldForm.fieldType'>
+            <el-option
+                v-for='i in Object.keys(fieldTypeObject)'
+                :key='i'
+                :label='fieldTypeObject[i]'
+                :value='i'
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+            v-if="listenerFieldForm.fieldType === 'string'"
+            label='字段值：'
+            prop='string'
+            key='field-string'
+            :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model='listenerFieldForm.string' clearable />
+        </el-form-item>
+        <el-form-item
+            v-if="listenerFieldForm.fieldType === 'expression'"
+            label='表达式：'
+            prop='expression'
+            key='field-expression'
+            :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model='listenerFieldForm.expression' clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button size='small' @click='listenerFieldFormModelVisible = false'>取 消</el-button>
+        <el-button size='small' type='primary' @click='saveListenerFiled'>确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+
+  <!-- 选择弹窗 -->
+  <ProcessListenerDialog ref='processListenerDialogRef' @select='selectProcessListener' />
+</template>
+<script lang='ts' setup>
+import { ElMessageBox } from 'element-plus'
+import XButton from '@/components/XButton/src/XButton.vue'
+import { Plus, Select, Menu } from '@element-plus/icons-vue'
+import { createListenerObject, updateElementExtensions } from '../../utils'
+import {
+  initListenerType,
+  initListenerForm,
+  listenerType,
+  fieldType,
+  initListenerForm2
+} from './utilSelf'
+import ProcessListenerDialog from './ProcessListenerDialog.vue'
+
+defineOptions({ name: 'ElementListeners' })
+
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+const elementListenersList = ref<any[]>([]) // 监听器列表
+const listenerForm = ref<any>({}) // 监听器详情表单
+const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
+const fieldsListOfListener = ref<any[]>([])
+const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
+const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
+const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
+const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
+const listenerTypeObject = ref(listenerType)
+const fieldTypeObject = ref(fieldType)
+const bpmnElement = ref()
+const otherExtensionList = ref()
+const bpmnElementListeners = ref()
+const listenerFormRef = ref()
+const listenerFieldFormRef = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetListenersList = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement
+  otherExtensionList.value = []
+  bpmnElementListeners.value =
+      bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+          (ex) => ex.$type === `${prefix}:ExecutionListener`
+      ) ?? []
+  elementListenersList.value = bpmnElementListeners.value.map((listener) =>
+      initListenerType(listener)
+  )
+}
+// 打开 监听器详情 侧边栏
+const openListenerForm = (listener, index?) => {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener)
+    editingListenerIndex.value = index
+  } else {
+    listenerForm.value = {}
+    editingListenerIndex.value = -1 // 标记为新增
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression'
+    }))
+  } else {
+    fieldsListOfListener.value = []
+    listenerForm.value['fields'] = []
+  }
+  // 打开侧边栏并清楚验证状态
+  listenerFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFormRef.value) {
+      listenerFormRef.value.clearValidate()
+    }
+  })
+}
+// 打开监听器字段编辑弹窗
+const openListenerFieldForm = (field, index?) => {
+  listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
+  editingListenerFieldIndex.value = field ? index : -1
+  listenerFieldFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFieldFormRef.value) {
+      listenerFieldFormRef.value.clearValidate()
+    }
+  })
+}
+// 保存监听器注入字段
+const saveListenerFiled = async () => {
+  let validateStatus = await listenerFieldFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(listenerFieldForm.value)
+    listenerForm.value.fields.push(listenerFieldForm.value)
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+  }
+  listenerFieldFormModelVisible.value = false
+  nextTick(() => {
+    listenerFieldForm.value = {}
+  })
+}
+// 移除监听器字段
+const removeListenerField = (index) => {
+  ElMessageBox.confirm('确认移除该字段吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+      .then(() => {
+        fieldsListOfListener.value.splice(index, 1)
+        listenerForm.value.fields.splice(index, 1)
+      })
+      .catch(() => console.info('操作取消'))
+}
+// 移除监听器
+const removeListener = (index) => {
+  ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+      .then(() => {
+        bpmnElementListeners.value.splice(index, 1)
+        elementListenersList.value.splice(index, 1)
+        updateElementExtensions(
+            bpmnElement.value,
+            otherExtensionList.value.concat(bpmnElementListeners.value)
+        )
+      })
+      .catch(() => console.info('操作取消'))
+}
+// 保存监听器配置
+const saveListenerConfig = async () => {
+  let validateStatus = await listenerFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  const listenerObject = createListenerObject(listenerForm.value, false, prefix)
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.value.push(listenerObject)
+    elementListenersList.value.push(listenerForm.value)
+  } else {
+    bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
+    elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
+  }
+  // 保存其他配置
+  otherExtensionList.value =
+      bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+          (ex) => ex.$type !== `${prefix}:ExecutionListener`
+      ) ?? []
+  updateElementExtensions(
+      bpmnElement.value,
+      otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+  // 4. 隐藏侧边栏
+  listenerFormModelVisible.value = false
+  listenerForm.value = {}
+}
+
+// 打开监听器弹窗
+const processListenerDialogRef = ref()
+const openProcessListenerDialog = async () => {
+  processListenerDialogRef.value.open('execution')
+}
+const selectProcessListener = (listener) => {
+  const listenerForm = initListenerForm2(listener)
+  const listenerObject = createListenerObject(listenerForm, false, prefix)
+  bpmnElementListeners.value.push(listenerObject)
+  elementListenersList.value.push(listenerForm)
+
+  // 保存其他配置
+  otherExtensionList.value =
+      bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+          (ex) => ex.$type !== `${prefix}:ExecutionListener`
+      ) ?? []
+  updateElementExtensions(
+      bpmnElement.value,
+      otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+}
+
+watch(
+    () => props.id,
+    (val) => {
+      val &&
+      val.length &&
+      nextTick(() => {
+        resetListenersList()
+      })
+    },
+    { immediate: true }
+)
+</script>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
index 4ae5256f..69f27108 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
@@ -748,6 +748,13 @@ const init = () => {
         console.error('WebSocket 客户端实例不存在')
         return
     }
+    echartsDataV1.value = initEcharts('#DAA520', 0, 'A相')
+    echartsDataV2.value = initEcharts('#2E8B57', 0, 'B相')
+    echartsDataV3.value = initEcharts('#A52a2a', 0, 'C相')
+
+    echartsDataA1.value = initEcharts('#DAA520', 1, 'A相')
+    echartsDataA2.value = initEcharts('#2E8B57', 1, 'B相')
+    echartsDataA3.value = initEcharts('#A52a2a', 1, 'C相')
     if (monitoringPoint.state.comFlag == 0) {
         loading.value = false
         return ElMessage({
@@ -757,13 +764,7 @@ const init = () => {
     }
     loading.value = true
     const url = localStorage.getItem('WebSocketUrl') || 'null' //'ws://192.168.1.68:10407/api/pushMessage/'
-    echartsDataV1.value = initEcharts('#DAA520', 0, 'A相')
-    echartsDataV2.value = initEcharts('#2E8B57', 0, 'B相')
-    echartsDataV3.value = initEcharts('#A52a2a', 0, 'C相')
 
-    echartsDataA1.value = initEcharts('#DAA520', 1, 'A相')
-    echartsDataA2.value = initEcharts('#2E8B57', 1, 'B相')
-    echartsDataA3.value = initEcharts('#A52a2a', 1, 'C相')
 
     let pids = monitoringPoint.state.pid.split(',')
     dataSocket.socketServe.connect(`${url}${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`)
@@ -1176,16 +1177,10 @@ onBeforeUnmount(() => {
     }
 }
 
-:deep(.view_bot) {
-    .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
-    .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
-    .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
-        padding: 5px !important;
-    }
+:deep(.vxe-cell) {
+  
 
-    .vxe-table--body-wrapper {
         min-height: 32px !important;
-    }
 }
 
 ::v-deep .el-collapse-item__header {
diff --git a/src/views/pqs/task/myTask/components/ProcessViewer.vue b/src/views/pqs/task/myTask/components/ProcessViewer.vue
index 6ef6422e..0af3a836 100644
--- a/src/views/pqs/task/myTask/components/ProcessViewer.vue
+++ b/src/views/pqs/task/myTask/components/ProcessViewer.vue
@@ -1,534 +1,532 @@
-<template>
-    <div class="my-process-designer">
-        <div class="my-process-designer__container">
-            <div class="my-process-designer__canvas" style="height: 760px" ref="bpmnCanvas"></div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
-import BpmnViewer from 'bpmn-js/lib/Viewer'
-import 'bpmn-js/dist/assets/diagram-js.css'
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
-import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
-
-defineOptions({ name: 'MyProcessViewer' })
-
-const props = defineProps({
-    value: {
-        // BPMN XML 字符串
-        type: String,
-        default: ''
-    },
-    prefix: {
-        // 使用哪个引擎
-        type: String,
-        default: 'camunda'
-    },
-    activityData: {
-        // 活动的数据。传递时，可高亮流程
-        type: Array,
-        default: () => []
-    }
-})
-
-const emit = defineEmits(['destroy'])
-
-let bpmnModeler: any
-
-const xml = ref('')
-const activityLists = ref<any[]>([])
-const processInstance = ref<any>(undefined)
-const taskList = ref<any[]>([])
-const bpmnCanvas = ref()
-
-const initBpmnModeler = () => {
-    if (bpmnModeler) return
-    bpmnModeler = new BpmnViewer({
-        container: bpmnCanvas.value,
-        bpmnRenderer: {}
-    })
-}
-
-/* 创建新的流程图 */
-const createNewDiagram = async (xml: any) => {
-    // 将字符串转换成图显示出来
-
-    let xmlString = xml
-
-    try {
-        let { warnings } = await bpmnModeler.importXML(xmlString)
-        if (warnings && warnings.length) {
-            // warnings.forEach(warn => console.warn(warn))
-        }
-        // 高亮流程图
-        await highlightDiagram()
-
-        const canvas = bpmnModeler.get('canvas')
-
-        canvas.zoom('fit-viewport', 'auto')
-    } catch (e) {
-        console.error(e)
-        // console.error(`[Process Designer Warn]: ${e?.message || e}`);
-    }
-}
-
-/* 高亮流程图 */
-// TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
-const highlightDiagram = async () => {
-    const activityList = activityLists.value
-    if (activityList.length === 0) {
-        return
-    }
-    // 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
-    // 再次基础上，增加不同审批结果的颜色等等
-    let canvas = bpmnModeler.get('canvas')
-    let todoActivity: any = activityList.find((m: any) => !m.endTime) // 找到待办的任务
-    let endActivity: any = activityList[activityList.length - 1] // 获得最后一个任务
-    let findProcessTask = false //是否已经高亮了进行中的任务
-    //进行中高亮之后的任务 key 集合，用于过滤掉 taskList 进行中后面的任务，避免进行中后面的数据 Hover 还有数据
-    let removeTaskDefinitionKeyList: any = []
-    // debugger
-    bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n: any) => {
-        let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
-        if (!activity) {
-            return
-        }
-        if (n.$type === 'bpmn:UserTask') {
-            // 用户任务
-            // 处理用户任务的高亮
-            const task: any = taskList.value.find((m: any) => m.id === activity.taskId) // 找到活动对应的 taskId
-            if (!task) {
-                return
-            }
-            // 进行中的任务已经高亮过了，则不高亮后面的任务了
-            if (findProcessTask) {
-                removeTaskDefinitionKeyList.push(n.id)
-                return
-            }
-            // 高亮任务
-            canvas.addMarker(n.id, getResultCss(task.status))
-            //标记是否高亮了进行中任务
-            if (task.status === 1) {
-                findProcessTask = true
-            }
-            // 如果非通过，就不走后面的线条了
-            if (task.status !== 2) {
-                return
-            }
-            // 处理 outgoing 出线
-            const outgoing = getActivityOutgoing(activity)
-            outgoing?.forEach((nn: any) => {
-                // debugger
-                let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
-                // 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
-                if (targetActivity) {
-                    canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo')
-                } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
-                    // TODO 芋艿：这个流程，暂时没走到过
-                    canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo')
-                    canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo')
-                } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
-                    // TODO 芋艿：这个流程，暂时没走到过
-                    if (!todoActivity && endActivity.key === n.id) {
-                        canvas.addMarker(nn.id, 'highlight')
-                        canvas.addMarker(nn.targetRef.id, 'highlight')
-                    }
-                    if (!activity.endTime) {
-                        canvas.addMarker(nn.id, 'highlight-todo')
-                        canvas.addMarker(nn.targetRef.id, 'highlight-todo')
-                    }
-                }
-            })
-        } else if (n.$type === 'bpmn:ExclusiveGateway') {
-            // 排它网关
-            // 设置【bpmn:ExclusiveGateway】排它网关的高亮
-            canvas.addMarker(n.id, getActivityHighlightCss(activity))
-            // 查找需要高亮的连线
-            let matchNN: any = undefined
-            let matchActivity: any = undefined
-            n.outgoing?.forEach((nn: any) => {
-                let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
-                if (!targetActivity) {
-                    return
-                }
-                // 特殊判断 endEvent 类型的原因，ExclusiveGateway 可能后续连有 2 个路径：
-                //  1. 一个是 UserTask => EndEvent
-                //  2. 一个是 EndEvent
-                // 在选择路径 1 时，其实 EndEvent 可能也存在，导致 1 和 2 都高亮，显然是不正确的。
-                // 所以，在 matchActivity 为 EndEvent 时，需要进行覆盖~~
-                if (!matchActivity || matchActivity.type === 'endEvent') {
-                    matchNN = nn
-                    matchActivity = targetActivity
-                }
-            })
-            if (matchNN && matchActivity) {
-                canvas.addMarker(matchNN.id, getActivityHighlightCss(matchActivity))
-            }
-        } else if (n.$type === 'bpmn:ParallelGateway') {
-            // 并行网关
-            // 设置【bpmn:ParallelGateway】并行网关的高亮
-            canvas.addMarker(n.id, getActivityHighlightCss(activity))
-            n.outgoing?.forEach((nn: any) => {
-                // 获得连线是否有指向目标。如果有，则进行高亮
-                const targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
-                if (targetActivity) {
-                    canvas.addMarker(nn.id, getActivityHighlightCss(targetActivity)) // 高亮【bpmn:SequenceFlow】连线
-                    // 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然，如果是 bpm:UserTask 的话，其实不做高亮也没问题，因为上面有逻辑做了这块。
-                    canvas.addMarker(nn.targetRef.id, getActivityHighlightCss(targetActivity))
-                }
-            })
-        } else if (n.$type === 'bpmn:StartEvent') {
-            // 开始节点
-            canvas.addMarker(n.id, 'highlight')
-            n.outgoing?.forEach(nn => {
-                // outgoing 例如说【bpmn:SequenceFlow】连线
-                // 获得连线是否有指向目标。如果有，则进行高亮
-                let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
-                if (targetActivity) {
-                    canvas.addMarker(nn.id, 'highlight') // 高亮【bpmn:SequenceFlow】连线
-                    canvas.addMarker(n.id, 'highlight') // 高亮【bpmn:StartEvent】开始节点（自己）
-                }
-            })
-        } 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') {
-            //服务任务
-            if (activity.startTime > 0 && activity.endTime === 0) {
-                //进入执行，标识进行色
-                canvas.addMarker(n.id, getResultCss(1))
-            }
-            if (activity.endTime > 0) {
-                // 执行完成，节点标识完成色, 所有outgoing标识完成色。
-                canvas.addMarker(n.id, getResultCss(2))
-                const outgoing = getActivityOutgoing(activity)
-                outgoing?.forEach((out: any) => {
-                    canvas.addMarker(out.id, getResultCss(2))
-                })
-            }
-        } 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))
-            }
-        }
-    })
-    if (!(removeTaskDefinitionKeyList == null)) {
-        taskList.value = taskList.value.filter(item => !removeTaskDefinitionKeyList.includes(item.taskDefinitionKey))
-    }
-}
-
-const getActivityHighlightCss = (activity: any) => {
-    return activity.endTime ? 'highlight' : 'highlight-todo'
-}
-
-const getResultCss = (status: any) => {
-    if (status === 1) {
-        // 审批中
-        return 'highlight-todo'
-    } else if (status === 2) {
-        // 已通过
-        return 'highlight'
-    } else if (status === 3) {
-        // 不通过
-        return 'highlight-reject'
-    } else if (status === 4) {
-        // 已取消
-        return 'highlight-cancel'
-    } else if (status === 5) {
-        // 退回
-        return 'highlight-return'
-    } else if (status === 6) {
-        // 委派
-        return 'highlight-todo'
-    } else if (status === 7) {
-        // 审批通过中
-        return 'highlight-todo'
-    } else if (status === 0) {
-        // 待审批
-        return 'highlight-todo'
-    }
-    return ''
-}
-
-const getActivityOutgoing = (activity: any) => {
-    // 如果有 outgoing，则直接使用它
-    if (activity.outgoing && activity.outgoing.length > 0) {
-        return activity.outgoing
-    }
-    // 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
-    const flowElements = bpmnModeler.getDefinitions().rootElements[0].flowElements
-    const outgoing: any[] = []
-    flowElements.forEach((item: any) => {
-        if (item.$type !== 'bpmn:SequenceFlow') {
-            return
-        }
-        if (item.sourceRef.id === activity.key) {
-            outgoing.push(item)
-        }
-    })
-    return outgoing
-}
-
-onMounted(() => {
-    xml.value = props.value
-    activityLists.value = props.activityData
-    // 初始化
-    initBpmnModeler()
-
-    createNewDiagram(xml.value)
-})
-
-onBeforeUnmount(() => {
-    // this.$once('hook:beforeDestroy', () => {
-    // })
-    if (bpmnModeler) bpmnModeler.destroy()
-    emit('destroy', bpmnModeler)
-    bpmnModeler = null
-})
-
-watch(
-    () => props.value,
-    newValue => {
-        xml.value = newValue
-        createNewDiagram(xml.value)
-    }
-)
-watch(
-    () => props.activityData,
-    newActivityData => {
-        activityLists.value = newActivityData
-        createNewDiagram(xml.value)
-    }
-)
-</script>
-
-<style lang="scss">
-/** 处理中 */
-.highlight-todo.djs-connection > .djs-visual > path {
-    stroke: #1890ff !important;
-    stroke-dasharray: 4px !important;
-    fill-opacity: 0.2 !important;
-}
-
-.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
-    fill: #1890ff !important;
-    stroke: #1890ff !important;
-    stroke-dasharray: 4px !important;
-    fill-opacity: 0.2 !important;
-}
-
-:deep(.highlight-todo.djs-connection > .djs-visual > path) {
-    stroke: #1890ff !important;
-    stroke-dasharray: 4px !important;
-    fill-opacity: 0.2 !important;
-    marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr');
-}
-
-:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
-    fill: #1890ff !important;
-    stroke: #1890ff !important;
-    stroke-dasharray: 4px !important;
-    fill-opacity: 0.2 !important;
-}
-
-/** 通过 */
-.highlight.djs-shape .djs-visual > :nth-child(1) {
-    fill: green !important;
-    stroke: green !important;
-    fill-opacity: 0.2 !important;
-}
-
-.highlight.djs-shape .djs-visual > :nth-child(2) {
-    fill: green !important;
-}
-
-.highlight.djs-shape .djs-visual > path {
-    fill: green !important;
-    fill-opacity: 0.2 !important;
-    stroke: green !important;
-}
-
-.highlight.djs-connection > .djs-visual > path {
-    stroke: green !important;
-}
-
-.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
-    fill: green !important; /* color elements as green */
-}
-
-:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
-    fill: green !important;
-    stroke: green !important;
-    fill-opacity: 0.2 !important;
-}
-
-:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
-    fill: green !important;
-}
-
-:deep(.highlight.djs-shape .djs-visual > path) {
-    fill: green !important;
-    fill-opacity: 0.2 !important;
-    stroke: green !important;
-}
-
-:deep(.highlight.djs-connection > .djs-visual > path) {
-    stroke: green !important;
-}
-
-.djs-element.highlight > .djs-visual > path {
-    stroke: green !important;
-}
-
-/** 不通过 */
-.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
-    fill: red !important;
-    stroke: red !important;
-    fill-opacity: 0.2 !important;
-}
-
-.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
-    fill: red !important;
-}
-
-.highlight-reject.djs-shape .djs-visual > path {
-    fill: red !important;
-    fill-opacity: 0.2 !important;
-    stroke: red !important;
-}
-
-.highlight-reject.djs-connection > .djs-visual > path {
-    stroke: red !important;
-    marker-end: url(#sequenceflow-end-white-success) !important;
-}
-
-.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
-    fill: red !important; /* color elements as green */
-}
-
-:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
-    fill: red !important;
-    stroke: red !important;
-    fill-opacity: 0.2 !important;
-}
-
-:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
-    fill: red !important;
-}
-
-:deep(.highlight-reject.djs-shape .djs-visual > path) {
-    fill: red !important;
-    fill-opacity: 0.2 !important;
-    stroke: red !important;
-}
-
-:deep(.highlight-reject.djs-connection > .djs-visual > path) {
-    stroke: red !important;
-}
-
-/** 已取消 */
-.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
-    fill: grey !important;
-    stroke: grey !important;
-    fill-opacity: 0.2 !important;
-}
-
-.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
-    fill: grey !important;
-}
-
-.highlight-cancel.djs-shape .djs-visual > path {
-    fill: grey !important;
-    fill-opacity: 0.2 !important;
-    stroke: grey !important;
-}
-
-.highlight-cancel.djs-connection > .djs-visual > path {
-    stroke: grey !important;
-}
-
-.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
-    fill: grey !important; /* color elements as green */
-}
-
-:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
-    fill: grey !important;
-    stroke: grey !important;
-    fill-opacity: 0.2 !important;
-}
-
-:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
-    fill: grey !important;
-}
-
-:deep(.highlight-cancel.djs-shape .djs-visual > path) {
-    fill: grey !important;
-    fill-opacity: 0.2 !important;
-    stroke: grey !important;
-}
-
-:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
-    stroke: grey !important;
-}
-
-/** 回退 */
-.highlight-return.djs-shape .djs-visual > :nth-child(1) {
-    fill: #e6a23c !important;
-    stroke: #e6a23c !important;
-    fill-opacity: 0.2 !important;
-}
-
-.highlight-return.djs-shape .djs-visual > :nth-child(2) {
-    fill: #e6a23c !important;
-}
-
-.highlight-return.djs-shape .djs-visual > path {
-    fill: #e6a23c !important;
-    fill-opacity: 0.2 !important;
-    stroke: #e6a23c !important;
-}
-
-.highlight-return.djs-connection > .djs-visual > path {
-    stroke: #e6a23c !important;
-}
-
-.highlight-return:not(.djs-connection) .djs-visual > :nth-child(1) {
-    fill: #e6a23c !important; /* color elements as green */
-}
-
-:deep(.highlight-return.djs-shape .djs-visual > :nth-child(1)) {
-    fill: #e6a23c !important;
-    stroke: #e6a23c !important;
-    fill-opacity: 0.2 !important;
-}
-
-:deep(.highlight-return.djs-shape .djs-visual > :nth-child(2)) {
-    fill: #e6a23c !important;
-}
-
-:deep(.highlight-return.djs-shape .djs-visual > path) {
-    fill: #e6a23c !important;
-    fill-opacity: 0.2 !important;
-    stroke: #e6a23c !important;
-}
-
-:deep(.highlight-return.djs-connection > .djs-visual > path) {
-    stroke: #e6a23c !important;
-}
-
-.element-overlays {
-    width: 200px;
-    padding: 8px;
-    color: #fafafa;
-    background: rgb(0 0 0 / 60%);
-    border-radius: 4px;
-    box-sizing: border-box;
-}
-</style>
+<template>
+    <div class="my-process-designer">
+        <div class="my-process-designer__container">
+            <div class="my-process-designer__canvas" style="height: 760px" ref="bpmnCanvas"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
+import BpmnViewer from 'bpmn-js/lib/Viewer'
+import 'bpmn-js/dist/assets/diagram-js.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+
+defineOptions({ name: 'MyProcessViewer' })
+
+const props = defineProps({
+    value: {
+        // BPMN XML 字符串
+        type: String,
+        default: ''
+    },
+    prefix: {
+        // 使用哪个引擎
+        type: String,
+        default: 'camunda'
+    },
+    activityData: {
+        // 活动的数据。传递时，可高亮流程
+        type: Array,
+        default: () => []
+    }
+})
+
+const emit = defineEmits(['destroy'])
+
+let bpmnModeler: any
+
+const xml = ref('')
+const activityLists = ref<any[]>([])
+const processInstance = ref<any>(undefined)
+const taskList = ref<any[]>([])
+const bpmnCanvas = ref()
+
+const initBpmnModeler = () => {
+    if (bpmnModeler) return
+    bpmnModeler = new BpmnViewer({
+        container: bpmnCanvas.value,
+        bpmnRenderer: {}
+    })
+}
+
+/* 创建新的流程图 */
+const createNewDiagram = async (xml: any) => {
+    // 将字符串转换成图显示出来
+
+    let xmlString = xml
+
+    try {
+        let { warnings } = await bpmnModeler.importXML(xmlString)
+        if (warnings && warnings.length) {
+            // warnings.forEach(warn => console.warn(warn))
+        }
+        // 高亮流程图
+        await highlightDiagram()
+
+        const canvas = bpmnModeler.get('canvas')
+
+        canvas.zoom('fit-viewport', 'auto')
+    } catch (e) {
+        console.error(e)
+        // console.error(`[Process Designer Warn]: ${e?.message || e}`);
+    }
+}
+
+/* 高亮流程图 */
+// TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
+const highlightDiagram = async () => {
+    const activityList = activityLists.value
+    if (activityList.length === 0) {
+        return
+    }
+    // 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
+    // 再次基础上，增加不同审批结果的颜色等等
+    let canvas = bpmnModeler.get('canvas')
+    let todoActivity: any = activityList.find((m: any) => !m.endTime) // 找到待办的任务
+    let endActivity: any = activityList[activityList.length - 1] // 获得最后一个任务
+    let findProcessTask = false //是否已经高亮了进行中的任务
+    //进行中高亮之后的任务 key 集合，用于过滤掉 taskList 进行中后面的任务，避免进行中后面的数据 Hover 还有数据
+    let removeTaskDefinitionKeyList: any = []
+    bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n: any) => {
+        let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
+        if (!activity) {
+            return
+        }
+        if (n.$type === 'bpmn:UserTask') {
+            // 用户任务
+            // 处理用户任务的高亮
+            const task: any = taskList.value.find((m: any) => m.id === activity.taskId) // 找到活动对应的 taskId
+            if (!task) {
+                return
+            }
+            // 进行中的任务已经高亮过了，则不高亮后面的任务了
+            if (findProcessTask) {
+                removeTaskDefinitionKeyList.push(n.id)
+                return
+            }
+            // 高亮任务
+            canvas.addMarker(n.id, getResultCss(task.status))
+            //标记是否高亮了进行中任务
+            if (task.status === 1) {
+                findProcessTask = true
+            }
+            // 如果非通过，就不走后面的线条了
+            if (task.status !== 2) {
+                return
+            }
+            // 处理 outgoing 出线
+            const outgoing = getActivityOutgoing(activity)
+            outgoing?.forEach((nn: any) => {
+                let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
+                // 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
+                if (targetActivity) {
+                    canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo')
+                } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
+                    // TODO 芋艿：这个流程，暂时没走到过
+                    canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo')
+                    canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo')
+                } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
+                    // TODO 芋艿：这个流程，暂时没走到过
+                    if (!todoActivity && endActivity.key === n.id) {
+                        canvas.addMarker(nn.id, 'highlight')
+                        canvas.addMarker(nn.targetRef.id, 'highlight')
+                    }
+                    if (!activity.endTime) {
+                        canvas.addMarker(nn.id, 'highlight-todo')
+                        canvas.addMarker(nn.targetRef.id, 'highlight-todo')
+                    }
+                }
+            })
+        } else if (n.$type === 'bpmn:ExclusiveGateway') {
+            // 排它网关
+            // 设置【bpmn:ExclusiveGateway】排它网关的高亮
+            canvas.addMarker(n.id, getActivityHighlightCss(activity))
+            // 查找需要高亮的连线
+            let matchNN: any = undefined
+            let matchActivity: any = undefined
+            n.outgoing?.forEach((nn: any) => {
+                let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
+                if (!targetActivity) {
+                    return
+                }
+                // 特殊判断 endEvent 类型的原因，ExclusiveGateway 可能后续连有 2 个路径：
+                //  1. 一个是 UserTask => EndEvent
+                //  2. 一个是 EndEvent
+                // 在选择路径 1 时，其实 EndEvent 可能也存在，导致 1 和 2 都高亮，显然是不正确的。
+                // 所以，在 matchActivity 为 EndEvent 时，需要进行覆盖~~
+                if (!matchActivity || matchActivity.type === 'endEvent') {
+                    matchNN = nn
+                    matchActivity = targetActivity
+                }
+            })
+            if (matchNN && matchActivity) {
+                canvas.addMarker(matchNN.id, getActivityHighlightCss(matchActivity))
+            }
+        } else if (n.$type === 'bpmn:ParallelGateway') {
+            // 并行网关
+            // 设置【bpmn:ParallelGateway】并行网关的高亮
+            canvas.addMarker(n.id, getActivityHighlightCss(activity))
+            n.outgoing?.forEach((nn: any) => {
+                // 获得连线是否有指向目标。如果有，则进行高亮
+                const targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
+                if (targetActivity) {
+                    canvas.addMarker(nn.id, getActivityHighlightCss(targetActivity)) // 高亮【bpmn:SequenceFlow】连线
+                    // 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然，如果是 bpm:UserTask 的话，其实不做高亮也没问题，因为上面有逻辑做了这块。
+                    canvas.addMarker(nn.targetRef.id, getActivityHighlightCss(targetActivity))
+                }
+            })
+        } else if (n.$type === 'bpmn:StartEvent') {
+            // 开始节点
+            canvas.addMarker(n.id, 'highlight')
+            n.outgoing?.forEach(nn => {
+                // outgoing 例如说【bpmn:SequenceFlow】连线
+                // 获得连线是否有指向目标。如果有，则进行高亮
+                let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
+                if (targetActivity) {
+                    canvas.addMarker(nn.id, 'highlight') // 高亮【bpmn:SequenceFlow】连线
+                    canvas.addMarker(n.id, 'highlight') // 高亮【bpmn:StartEvent】开始节点（自己）
+                }
+            })
+        } 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') {
+            //服务任务
+            if (activity.startTime > 0 && activity.endTime === 0) {
+                //进入执行，标识进行色
+                canvas.addMarker(n.id, getResultCss(1))
+            }
+            if (activity.endTime > 0) {
+                // 执行完成，节点标识完成色, 所有outgoing标识完成色。
+                canvas.addMarker(n.id, getResultCss(2))
+                const outgoing = getActivityOutgoing(activity)
+                outgoing?.forEach((out: any) => {
+                    canvas.addMarker(out.id, getResultCss(2))
+                })
+            }
+        } 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))
+            }
+        }
+    })
+    if (!(removeTaskDefinitionKeyList == null)) {
+        taskList.value = taskList.value.filter(item => !removeTaskDefinitionKeyList.includes(item.taskDefinitionKey))
+    }
+}
+
+const getActivityHighlightCss = (activity: any) => {
+    return activity.endTime ? 'highlight' : 'highlight-todo'
+}
+
+const getResultCss = (status: any) => {
+    if (status === 1) {
+        // 审批中
+        return 'highlight-todo'
+    } else if (status === 2) {
+        // 已通过
+        return 'highlight'
+    } else if (status === 3) {
+        // 不通过
+        return 'highlight-reject'
+    } else if (status === 4) {
+        // 已取消
+        return 'highlight-cancel'
+    } else if (status === 5) {
+        // 退回
+        return 'highlight-return'
+    } else if (status === 6) {
+        // 委派
+        return 'highlight-todo'
+    } else if (status === 7) {
+        // 审批通过中
+        return 'highlight-todo'
+    } else if (status === 0) {
+        // 待审批
+        return 'highlight-todo'
+    }
+    return ''
+}
+
+const getActivityOutgoing = (activity: any) => {
+    // 如果有 outgoing，则直接使用它
+    if (activity.outgoing && activity.outgoing.length > 0) {
+        return activity.outgoing
+    }
+    // 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
+    const flowElements = bpmnModeler.getDefinitions().rootElements[0].flowElements
+    const outgoing: any[] = []
+    flowElements.forEach((item: any) => {
+        if (item.$type !== 'bpmn:SequenceFlow') {
+            return
+        }
+        if (item.sourceRef.id === activity.key) {
+            outgoing.push(item)
+        }
+    })
+    return outgoing
+}
+
+onMounted(() => {
+    xml.value = props.value
+    activityLists.value = props.activityData
+    // 初始化
+    initBpmnModeler()
+
+    createNewDiagram(xml.value)
+})
+
+onBeforeUnmount(() => {
+    // this.$once('hook:beforeDestroy', () => {
+    // })
+    if (bpmnModeler) bpmnModeler.destroy()
+    emit('destroy', bpmnModeler)
+    bpmnModeler = null
+})
+
+watch(
+    () => props.value,
+    newValue => {
+        xml.value = newValue
+        createNewDiagram(xml.value)
+    }
+)
+watch(
+    () => props.activityData,
+    newActivityData => {
+        activityLists.value = newActivityData
+        createNewDiagram(xml.value)
+    }
+)
+</script>
+
+<style lang="scss">
+/** 处理中 */
+.highlight-todo.djs-connection > .djs-visual > path {
+    stroke: #1890ff !important;
+    stroke-dasharray: 4px !important;
+    fill-opacity: 0.2 !important;
+}
+
+.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
+    fill: #1890ff !important;
+    stroke: #1890ff !important;
+    stroke-dasharray: 4px !important;
+    fill-opacity: 0.2 !important;
+}
+
+:deep(.highlight-todo.djs-connection > .djs-visual > path) {
+    stroke: #1890ff !important;
+    stroke-dasharray: 4px !important;
+    fill-opacity: 0.2 !important;
+    marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr');
+}
+
+:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
+    fill: #1890ff !important;
+    stroke: #1890ff !important;
+    stroke-dasharray: 4px !important;
+    fill-opacity: 0.2 !important;
+}
+
+/** 通过 */
+.highlight.djs-shape .djs-visual > :nth-child(1) {
+    fill: green !important;
+    stroke: green !important;
+    fill-opacity: 0.2 !important;
+}
+
+.highlight.djs-shape .djs-visual > :nth-child(2) {
+    fill: green !important;
+}
+
+.highlight.djs-shape .djs-visual > path {
+    fill: green !important;
+    fill-opacity: 0.2 !important;
+    stroke: green !important;
+}
+
+.highlight.djs-connection > .djs-visual > path {
+    stroke: green !important;
+}
+
+.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
+    fill: green !important; /* color elements as green */
+}
+
+:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
+    fill: green !important;
+    stroke: green !important;
+    fill-opacity: 0.2 !important;
+}
+
+:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
+    fill: green !important;
+}
+
+:deep(.highlight.djs-shape .djs-visual > path) {
+    fill: green !important;
+    fill-opacity: 0.2 !important;
+    stroke: green !important;
+}
+
+:deep(.highlight.djs-connection > .djs-visual > path) {
+    stroke: green !important;
+}
+
+.djs-element.highlight > .djs-visual > path {
+    stroke: green !important;
+}
+
+/** 不通过 */
+.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
+    fill: red !important;
+    stroke: red !important;
+    fill-opacity: 0.2 !important;
+}
+
+.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
+    fill: red !important;
+}
+
+.highlight-reject.djs-shape .djs-visual > path {
+    fill: red !important;
+    fill-opacity: 0.2 !important;
+    stroke: red !important;
+}
+
+.highlight-reject.djs-connection > .djs-visual > path {
+    stroke: red !important;
+    marker-end: url(#sequenceflow-end-white-success) !important;
+}
+
+.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
+    fill: red !important; /* color elements as green */
+}
+
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
+    fill: red !important;
+    stroke: red !important;
+    fill-opacity: 0.2 !important;
+}
+
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
+    fill: red !important;
+}
+
+:deep(.highlight-reject.djs-shape .djs-visual > path) {
+    fill: red !important;
+    fill-opacity: 0.2 !important;
+    stroke: red !important;
+}
+
+:deep(.highlight-reject.djs-connection > .djs-visual > path) {
+    stroke: red !important;
+}
+
+/** 已取消 */
+.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
+    fill: grey !important;
+    stroke: grey !important;
+    fill-opacity: 0.2 !important;
+}
+
+.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
+    fill: grey !important;
+}
+
+.highlight-cancel.djs-shape .djs-visual > path {
+    fill: grey !important;
+    fill-opacity: 0.2 !important;
+    stroke: grey !important;
+}
+
+.highlight-cancel.djs-connection > .djs-visual > path {
+    stroke: grey !important;
+}
+
+.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
+    fill: grey !important; /* color elements as green */
+}
+
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
+    fill: grey !important;
+    stroke: grey !important;
+    fill-opacity: 0.2 !important;
+}
+
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
+    fill: grey !important;
+}
+
+:deep(.highlight-cancel.djs-shape .djs-visual > path) {
+    fill: grey !important;
+    fill-opacity: 0.2 !important;
+    stroke: grey !important;
+}
+
+:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
+    stroke: grey !important;
+}
+
+/** 回退 */
+.highlight-return.djs-shape .djs-visual > :nth-child(1) {
+    fill: #e6a23c !important;
+    stroke: #e6a23c !important;
+    fill-opacity: 0.2 !important;
+}
+
+.highlight-return.djs-shape .djs-visual > :nth-child(2) {
+    fill: #e6a23c !important;
+}
+
+.highlight-return.djs-shape .djs-visual > path {
+    fill: #e6a23c !important;
+    fill-opacity: 0.2 !important;
+    stroke: #e6a23c !important;
+}
+
+.highlight-return.djs-connection > .djs-visual > path {
+    stroke: #e6a23c !important;
+}
+
+.highlight-return:not(.djs-connection) .djs-visual > :nth-child(1) {
+    fill: #e6a23c !important; /* color elements as green */
+}
+
+:deep(.highlight-return.djs-shape .djs-visual > :nth-child(1)) {
+    fill: #e6a23c !important;
+    stroke: #e6a23c !important;
+    fill-opacity: 0.2 !important;
+}
+
+:deep(.highlight-return.djs-shape .djs-visual > :nth-child(2)) {
+    fill: #e6a23c !important;
+}
+
+:deep(.highlight-return.djs-shape .djs-visual > path) {
+    fill: #e6a23c !important;
+    fill-opacity: 0.2 !important;
+    stroke: #e6a23c !important;
+}
+
+:deep(.highlight-return.djs-connection > .djs-visual > path) {
+    stroke: #e6a23c !important;
+}
+
+.element-overlays {
+    width: 200px;
+    padding: 8px;
+    color: #fafafa;
+    background: rgb(0 0 0 / 60%);
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+</style>