From 96e599a3b89776b622ab09b9ea79690a19459354 Mon Sep 17 00:00:00 2001
From: v_xugzhou <941071842@qq.com>
Date: Fri, 27 Oct 2023 18:52:59 +0800
Subject: [PATCH] =?UTF-8?q?optimization:=20=E5=88=A0=E9=99=A4=E6=9A=82?=
=?UTF-8?q?=E5=81=9C=E6=A0=87=E7=AD=BE=E9=80=BB=E8=BE=91=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../pages/task/TaskExecute/TaskOperation.vue | 33 +++++++++----------
1 file changed, 15 insertions(+), 18 deletions(-)
diff --git a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
index 518bd09bea..4fd6a185f9 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
@@ -2494,13 +2494,11 @@
const line = this.canvasData.lines.find(item => item.id === lineId)
// 分支添加暂停icon
if (isExecuted) {
- // 如果当前连线存在暂停icon，则删除旧的连线再生成新的
- const pauseDoms = document.querySelectorAll(`.suspend-${lineId}`)
- if (pauseDoms.length) {
+ // 删除label
+ const pauseDom = document.querySelector(`.suspend-${lineId}`)
+ if (pauseDom) {
tplInstance.setPaintStyle(lineId, '#a9adb6')
- pauseDoms.forEach(dom => {
- dom.style.display = 'none'
- })
+ tplInstance.$refs.jsFlow.removeLineOverlay(line, `suspend-${lineId}`)
}
} else if (location > 0) {
// 设置连线颜色
@@ -2509,31 +2507,28 @@
type: 'Label',
location,
name: ``,
- cls: `suspend-line suspend-${lineId}`
+ cls: `suspend-line suspend-${lineId}`,
+ id: `suspend-${lineId}`
}
tplInstance.$refs.jsFlow.addLineOverlay(line, labelData)
// 根据暂停icon所在线段的方向设置平移
this.$nextTick(() => {
- const pauseDoms = document.querySelectorAll(`.suspend-${lineId}`)
- const pauseDom = Array.from(pauseDoms).filter(dom => dom.style.display !== 'none')[0]
- const direction = this.judgeIntersectSegmentDirection(tplInstance, line, nodeId, pauseDom)
- if (!pauseDom) return
+ const direction = this.judgeIntersectSegmentDirection(tplInstance, line, nodeId)
if (direction === 'vertical') { // 垂直
- const pauseIconDom = pauseDom.querySelector('i')
- pauseIconDom.style.display = 'inline-block'
- pauseIconDom.style.transform = 'rotate(90deg)'
+ const pauseDom = document.querySelector(`.suspend-${lineId}`)
+ pauseDom.style.transform = 'rotate(90deg)'
} else if (!direction) { // icon正在停在弯曲线段上
- pauseDom.style.display = 'none'
// 给曲线上的icon添加偏移计算量太大，改为删除旧的label生成一条偏移量location - 0.1的label
+ tplInstance.$refs.jsFlow.removeLineOverlay(line, `suspend-${lineId}`)
this.setLineSuspendState(nodeId, lineId, isExecuted, location - 0.1)
}
})
}
},
// 计算与暂停图标相交的线段方向
- judgeIntersectSegmentDirection (tplInstance, line, nodeId, pauseDom) {
+ judgeIntersectSegmentDirection (tplInstance, line, nodeId) {
// 节点尺寸坐标
- if (!pauseDom) return
+ const pauseDom = document.querySelector(`.suspend-${line.id}`)
const iconPos = this.getDomPos(pauseDom)
const { width: iWidth, height: iHeight } = pauseDom.getBoundingClientRect()
// 存在偏移，所以真实坐标需要减去高/宽的一半
@@ -2738,9 +2733,11 @@
}
}
/deep/.suspend-line {
+ display: flex;
font-size: 12px;
color: #ffb946;
- margin-top: -1px;
+ background: #f5f7fa;
+ transform-origin: top;
}