add 添加节点悬浮信息

src/api/workflow/processInstance/index.ts

@@ -6,7 +6,7 @@ import { getToken } from '@/utils/auth';
  * 通过流程实例id获取历史流程图
  */
 export const getHistoryProcessImage = (processInstanceId: string) => {
-  return baseUrl + `/workflow/processInstance/getHistoryProcessImage/${processInstanceId}` + '?Authorization=Bearer ' + getToken();
+  return baseUrl + `/workflow/processInstance/getHistoryProcessImage/${processInstanceId}` + '?Authorization=Bearer ' + getToken()+'&t'+ Math.random()
 };
 
 /**

src/components/Process/approvalRecord.vue

@@ -1,7 +1,42 @@
 <template>
   <el-dialog v-model="visible" title="审批记录" :width="width" :height="height" append-to-body :close-on-click-modal="false">
     <div v-loading="loading">
-      <div style="width: 100%;height: 300px;overflow-y: auto;">
+      <div style="width: 100%;height: 300px;overflow-y: auto;position: relative;">
+        <div
+          v-for="(graphic, index) in graphicInfoVos"
+          :key="index"
+          :style="{ 
+           position: 'absolute',
+           left: `${graphic.x}px`,
+           top: `${graphic.y}px`,
+           width: `${graphic.width}px`,
+           height: `${graphic.height}px`,
+           color: 'red',
+           cursor: 'pointer',
+           zIndex: 99
+         }"
+          @mouseover="handleMouseOver(graphic)"
+          @mouseleave="handleMouseLeave()"
+        ></div>
+        <!-- 弹出的 div 元素 -->
+        <div
+          v-show="popupVisible"
+          :style="{ 
+              position: 'absolute',
+              left: `${graphicX}px`,
+              top: `${graphicY}px`,
+              backgroundColor: '#fff',
+              border: '1px solid #ccc',
+              padding: '10px',
+              zIndex: 100
+            }"
+        >
+          <p>审批人员: {{ nodeInfo.nickName }}</p>
+          <p>节点状态：{{ nodeInfo.status }}</p>
+          <p>开始时间：{{ nodeInfo.startTime }}</p>
+          <p>结束时间：{{ nodeInfo.endTime }}</p>
+          <p>审批耗时：{{ nodeInfo.runDuration }}</p>
+        </div>
         <el-image :src="src" />
       </div>
       <div>
@@ -22,37 +57,66 @@
   </el-dialog>
 </template>
 <script>
-import { getHistoryProcessImage,getHistoryRecord } from '@/api/workflow/processInstance';
+import { getHistoryProcessImage, getHistoryRecord } from '@/api/workflow/processInstance';
 export default {
   props: {
     width: {
-        type:String,
-        default:"70%"
+      type: String,
+      default: '70%'
     },
     height: {
-        type:String,
-        default:"100%"
+      type: String,
+      default: '100%'
     }
   },
   data() {
     return {
-      loading:false,
-      src:"",
-      visible:false,
-      historyList:[],
-      graphicInfoVos:[]
+      loading: false,
+      src: '',
+      visible: false,
+      historyList: [],
+      graphicInfoVos: [],
+      nodeListInfo: [],
+      popupVisible: false,
+      nodeInfo: {},
+      graphicX:'',
+      graphicY:''
     };
   },
   methods: {
     init(processInstanceId) {
-      this.visible = true
-      this.loading = true
-      this.src = getHistoryProcessImage(processInstanceId)
-      getHistoryRecord(processInstanceId).then(response => {
-          this.historyList = response.data.historyRecordList
-          this.graphicInfoVos = response.data.graphicInfoVos
-          this.loading = false
-      })
+      this.visible = true;
+      this.loading = true;
+      this.historyList = [];
+      this.graphicInfoVos = [];
+      this.src = getHistoryProcessImage(processInstanceId);
+      getHistoryRecord(processInstanceId).then((response) => {
+        this.historyList = response.data.historyRecordList;
+        this.graphicInfoVos = response.data.graphicInfoVos;
+        this.nodeListInfo = response.data.nodeListInfo;
+        this.loading = false;
+      });
+    },
+    handleMouseOver(graphic) {
+      this.graphicX = graphic.x+graphic.width
+      this.graphicY = graphic.y-graphic.height
+      this.nodeInfo = {};
+      if (this.nodeListInfo && this.nodeListInfo.length > 0) {
+        let info = this.nodeListInfo.find((e) => (e.taskDefinitionKey == graphic.nodeId));
+        if (info) {
+          this.nodeInfo = {
+            nickName: info.nickName,
+            status: info.status,
+            startTime: info.startTime,
+            endTime: info.endTime,
+            runDuration: info.runDuration
+          };
+        }
+      }
+      this.popupVisible = true;
+    },
+    handleMouseLeave() {
+      this.popupVisible = false;
     }
   }
 };