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; }