axwen-test31 2.0.0

package/src/views/market/market-event-edit/event-canvas.vue

@@ -0,0 +1,1593 @@
+<template>
+    <div class="event-canvas">
+        <div class="menu-bar" v-if="!readonly && !cstonly && !isTestMode">
+            <div v-for="menu in filterMenuList" :key="menu.key" class="menu-bar-item" draggable="true"
+                :title="menu.label" @dragstart="(e) => handleDragStart(e, menu)" :class="'item-' + menu.color">
+                <yt-icon :icon="menu.icon" color="#fff" />
+            </div>
+        </div>
+        <div class="event-container" ref="container" dropable="true" @drop="handleDrop" @dragover.prevent
+            @dragleave.prevent>
+        </div>
+    </div>
+</template>
+
+<script>
+import G6 from '@antv/g6'
+import bus from '@/bus'
+import { getMenuByKey, menuList } from './util'
+import { EVNET_REALTIME, NODE_SAMPLE } from '@/utils/variable'
+import { preventAndStopEvent } from "@/utils/dom";
+
+const borderColor = '#aaa'
+
+const activeColor = '#579ff8'
+
+const isEqual = (itemA, itemB) => {
+    if (!itemA._cfg || !itemB._cfg) return false
+    return itemA._cfg.id === itemB._cfg.id
+}
+
+let snapLines = []
+
+// 移除错误的线条
+const removeErrorEdge = (graph) => {
+    let nodes = graph.getNodes()
+
+    // 递归移除 实时事件 & 行为策略的线
+    const loopRemoveErrorEdge = (node) => {
+        let edges = node.getInEdges()
+        if (!edges || edges.length === 0) {
+            return
+        }
+        for (let i = 0; i < edges.length; i++) {
+            let edge = edges[i]
+            let node = edge.getSource()
+            let model = node.getModel()
+            if (
+                model.menuKey === 'strategyBranch' &&
+                // eslint-disable-next-line
+                model.form.strategyGroup &&
+                // eslint-disable-next-line
+                model.form.strategyGroup.some(item => item.type === 'behaviorStrategy') ||
+                // eslint-disable-next-line
+                model.menuKey === 'event' &&
+                model.form.eventType === EVNET_REALTIME
+            ) {
+                graph.removeItem(edge)
+            }
+            loopRemoveErrorEdge(node)
+        }
+    }
+
+    for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+        let model = node.getModel()
+        if (model.menuKey === 'strategyBranch' && model.form.strategyGroup && model.form.strategyGroup.some(item => item.type === 'behaviorStrategy')) {
+            // 是否是行为策略
+            let strategyEdges = node.getInEdges()[0].getSource().getInEdges()
+            for (let j = 0; j < strategyEdges.length; j++) {
+                let edge = strategyEdges[j]
+                // 行为策略前面必须是渠道
+                if (edge.getSource().getModel().menuKey !== 'channel') {
+                    graph.removeItem(edge)
+                }
+            }
+        } else if (model.menuKey === 'mergeBranch') {
+            // 是否是汇聚分支
+            loopRemoveErrorEdge(node)
+        }
+    }
+}
+
+// 绘制流程节点
+G6.registerNode('flow', {
+    draw(cfg, group) {
+        let isBranch = cfg.menuKey === 'strategyBranch' || cfg.menuKey === 'mergeBranch'
+        let target = null
+        let size = isBranch ? 80 : 64
+        let half = size / 2
+        if (cfg.type === 'point') {
+            target = this.drawPoint(cfg, group, half)
+            this.drawAnchor(cfg, group, size, half)
+        } else {
+            target = this.drawFlow(cfg, group, size, half, isBranch)
+            this.drawImage(cfg, group, size, half, isBranch)
+            this.drawAnchor(cfg, group, size, half, isBranch)
+        }
+        this.drawDeleteBtn(cfg, group, size, half, isBranch)
+        return target
+    },
+    afterDraw(cfg, group) {
+        let size = 52
+        let half = size / 2
+        let isBranch = cfg.menuKey === 'strategyBranch' || cfg.menuKey === 'mergeBranch'
+        this.drawStatus(cfg, group, size, half)
+        this.drawLabel(cfg, group, size, half, isBranch)
+    },
+    // 画起点终点
+    drawPoint(cfg, group, half) {
+        const circle = group.addShape('circle', {
+            attrs: {
+                x: 0,
+                y: 0,
+                r: half,
+                fill: '#f4f4f8',
+                stroke: borderColor
+            },
+            isStartOrEndNode: true
+        })
+        group.addShape('text', {
+            attrs: {
+                x: 0,
+                y: 0,
+                textAlign: 'center',
+                textBaseline: 'middle',
+                text: cfg.label,
+                fill: '#666'
+            }
+        })
+        return circle
+    },
+    // 画流程
+    drawFlow(cfg, group, size, half, isBranch) {
+        let cstonly = cfg.cstonly || false
+        let isTestMode = cfg.isTestMode || false
+        let menu = getMenuByKey(cfg.menuKey) || {}
+        let disabled = false
+        if ((cstonly && cfg.menuKey !== 'cst') || (isTestMode && !['cst', 'strategy'].includes(cfg.menuKey))) {
+            disabled = true
+        }
+        let rect = isBranch
+            ? group.addShape('rect', {
+                attrs: {
+                    x: -size,
+                    y: -half / 2,
+                    width: size * 2,
+                    height: half,
+                    radius: 5,
+                    stroke: borderColor,
+                    fill: '#fff'
+                },
+                isHoverShape: true // 判断该 shape 时候会在 hover 时展示
+            })
+            : group.addShape('rect', {
+                attrs: {
+                    x: -half,
+                    y: -half,
+                    width: size,
+                    height: size,
+                    radius: 5,
+                    stroke: borderColor,
+                    fill: '#fff'
+                },
+                isHoverShape: true // 判断该 shape 时候会在 hover 时展示
+            })
+        // 悬浮会出现的 rect
+        let active = isBranch
+            ? group.addShape('rect', {
+                attrs: {
+                    x: -size,
+                    y: -half / 2,
+                    width: size * 2,
+                    height: half,
+                    radius: 5,
+                    stroke: disabled ? '#409EFF' : menu.activeColor,
+                    fill: disabled ? '#fafafa' : menu.activeBackgroundColor
+                },
+                isActiveShape: true
+            })
+            : group.addShape('rect', {
+                attrs: {
+                    x: -half,
+                    y: -half,
+                    width: size,
+                    height: size,
+                    radius: 5,
+                    stroke: disabled ? '#409EFF' : menu.activeColor,
+                    fill: disabled ? '#fafafa' : menu.activeBackgroundColor
+                },
+                isActiveShape: true
+            })
+        rect.hide()
+        active.hide()
+        return rect
+    },
+    // 画锚点
+    drawAnchor(cfg, group, size, half, isBranch) {
+        let beforeCircle = group.addShape('circle', {
+            attrs: {
+                x: isBranch ? -size : -half,
+                y: 0,
+                r: 5,
+                stroke: borderColor,
+                cursor: 'pointer',
+                fill: '#fff'
+            },
+            isAnchorShape: true, // 判断是否时锚点 shape
+            isHoverShape: true // 判断该 shape 时候会在 hover 时展示
+        })
+        let afterCircle = group.addShape('circle', {
+            attrs: {
+                x: isBranch ? size : half,
+                y: 0,
+                r: 5,
+                stroke: borderColor,
+                cursor: 'pointer',
+                fill: '#fff'
+            },
+            isAnchorShape: true, // 判断是否时锚点 shape
+            isHoverShape: true // 判断该 shape 时候会在 hover 时展示
+        })
+        beforeCircle.hide()
+        afterCircle.hide()
+        if (cfg.menuKey === 'strategy') {
+            afterCircle.remove()
+        }
+        // 策略分支、客户、事件，不允许有左侧锚点
+        if (['strategyBranch', 'cst', 'event'].includes(cfg.menuKey)) {
+            beforeCircle.remove()
+        }
+    },
+    // 绘制中间图片
+    drawImage(cfg, group, size, half, isBranch) {
+        let cstonly = cfg.cstonly || false
+        let menu = getMenuByKey(cfg.menuKey) || {}
+        let { color = 'orange', icon = 'kehu' } = menu
+        if (cstonly && cfg.menuKey !== 'cst' && cfg.menuKey !== 'channel') {
+            color = 'gray'
+        }
+        let html = isBranch
+            ? `<div class="graph-item item-branch item-${color}"><i class="iconfont icon-${icon}"></i></div>`
+            : `<div class="graph-item item-${color}" style="border-radius: 5px;box-sizing: border-box;"><i class="iconfont icon-${icon}"></i></div>`
+        let gap = 6
+        if (isBranch) {
+            group.addShape('dom', {
+                attrs: {
+                    x: -size + gap,
+                    y: -half / 2 + gap,
+                    width: size * 2 - gap * 2,
+                    height: size / 2 - gap * 2,
+                    html
+                }
+            })
+        } else {
+            group.addShape('dom', {
+                attrs: {
+                    x: -half + gap,
+                    y: -half + gap,
+                    width: size - gap * 2,
+                    height: size - gap * 2,
+                    html
+                }
+            })
+        }
+    },
+    // 绘制底部的文字
+    drawLabel(cfg, group, size, half, isBranch) {
+        let label = cfg.label
+        if (!label || cfg.type === 'point') return
+        if (isBranch) {
+            group.addShape('dom', {
+                attrs: {
+                    x: -size + 6,
+                    y: -half + 13,
+                    width: size * 2,
+                    height: half,
+                    html: `<div class="graph-node-label" style="height: 100%;color: #fff;font-size: 12px;display: flex;align-items: center;justify-content: center;">${label}</div>`
+                },
+                isLabel: true
+            })
+        } else {
+            group.addShape('dom', {
+                attrs: {
+                    x: -half,
+                    y: half + 6,
+                    width: size,
+                    height: half,
+                    html: `<div class="graph-node-label" style="color: #777;font-size: 12px;text-align: center;">${label}</div>`
+                },
+                isLabel: true
+            })
+        }
+    },
+    // 绘制删除按钮
+    drawDeleteBtn(cfg, group, size, half, isBranch) {
+        // 开始和结束节点隐藏，以及表单存在 hiddenDelete，会隐藏关闭按钮
+        if (cfg.type === 'point' || cfg.form.hiddenDelete) return
+        let btn = isBranch
+            ? group.addShape('dom', {
+                attrs: {
+                    x: size - 8,
+                    y: -half / 2 - 8,
+                    width: 16,
+                    height: 16,
+                    html: `<i class="el-icon-error event-delete"></i>`,
+                    fill: '#6cf'
+                },
+                isHoverShape: true,
+                isDeleteBtn: true
+            })
+            : group.addShape('dom', {
+                attrs: {
+                    x: half - 8,
+                    y: -half - 8,
+                    width: 16,
+                    height: 16,
+                    html: `<i class="el-icon-error event-delete"></i>`,
+                    fill: '#6cf'
+                },
+                isHoverShape: true,
+                isDeleteBtn: true
+            })
+        btn.hide()
+    },
+    // 绘制脑袋上的状态
+    drawStatus(cfg, group, size, half) {
+        if (!cfg.status || cfg.status === -1 || cfg.type === 'point') return
+        let htmlMap = {
+            '0': `
+                <div class="status-content">
+                    <i class="status-blue status-text iconfont icon-running status-opacity"></i>
+                    <span class="status-text">等待执行</span>
+                </div>
+            `,
+            '1': `
+                <div class="status-content">
+                    <i class="status-blue status-text iconfont icon-running status-opacity"></i>
+                    <span class="status-text">正在执行</span>
+                </div>
+            `,
+            '2': `
+                <div class="status-content">
+                    <i class="status-red status-text iconfont icon-error"></i>
+                    <span class="status-text">执行出错</span>
+                </div>
+            `,
+            '3': `
+                <div class="status-content">
+                    <i class="status-green status-text iconfont icon-success"></i>
+                    <span class="status-text">成功</span>
+                </div>
+            `,
+            '4':`
+                <div class="status-content">
+                    <i class="status-red status-text iconfont icon-error"></i>
+                    <span class="status-text">执行异常</span>
+                </div>
+                `
+        }
+        let html = `
+            <div class="graph-node-status">
+                ${htmlMap[cfg.status]}
+            </div>
+        `
+        let offsetY = 0
+        if (cfg.menuKey === 'strategyBranch') {
+            offsetY = 14
+        }
+        group.addShape('dom', {
+            attrs: {
+                x: -half * 2,
+                y: -30 - half + offsetY,
+                width: size * 2,
+                height: 36,
+                html
+            },
+            isStatus: true
+        })
+        let rectSize = 6
+        group.addShape('rect', {
+            attrs: {
+                x: -half * 2 + (size - rectSize / 3),
+                y: -30 - half + 16 + rectSize / 3 + offsetY,
+                width: rectSize,
+                height: rectSize,
+                rotate: 45,
+                fill: '#fff'
+            }
+        })
+    },
+    setState(name, value, node) {
+        const group = node.getContainer()
+        const shapes = group.get('children')
+        let mode = value ? 'show' : 'hide'
+        switch (name) {
+            // 设置悬浮状态
+            case 'hover':
+                shapes.forEach(shape => {
+                    if (shape._cfg.isHoverShape) {
+                        shape[mode]()
+                    }
+                })
+                break
+            case 'active':
+                shapes.forEach(shape => {
+                    if (shape._cfg.isActiveShape) {
+                        shape[mode]()
+                    }
+                })
+            default:
+                break
+        }
+    },
+    getAnchorPoints(cfg) {
+        return [
+            [0.5, 0.5]
+        ]
+    }
+})
+
+// 绘制线
+G6.registerEdge('flow-line', {
+    draw(cfg, group) {
+        let start = cfg.startPoint
+        let end = cfg.endPoint
+        let sourceOffset = cfg.sourceOffset || { x: 32, y: 0 }
+        let targetOffset = cfg.targetOffset || { x: -32, y: 0 }
+        start = {
+            x: start.x + sourceOffset.x,
+            y: start.y + sourceOffset.y
+        }
+        end = {
+            x: end.x + targetOffset.x,
+            y: end.y + targetOffset.y
+        }
+        let d = 3
+        let hgap = Math.abs(end.x - start.x)
+        let vgap = Math.abs(end.y - start.y)
+        let path = []
+        let color = cfg.color || borderColor
+        let isStrategyLine = ['strategy'].includes(cfg.sourceNode.getModel().menuKey)
+        let isMergeLine = ['mergeBranch'].includes(cfg.sourceNode.getModel().menuKey)
+        let isBranchLine = isStrategyLine || isMergeLine
+        // 不允许删除
+        let undeleteable = cfg.undeleteable || isBranchLine
+
+        // 客户、事件的线不允许删除
+        if (cfg.targetNode && cfg.targetNode.getModel && ['cst', 'event'].includes(cfg.targetNode.getModel().menuKey)) {
+            undeleteable = true
+        }
+
+        if (isStrategyLine) {
+            color = '#AFDAC9'
+        } else if (isMergeLine) {
+            color = '#c5b2fe'
+        }
+
+        if (vgap / hgap > 3 && hgap < 50) {
+            path = [
+                ['M', start.x, start.y],
+                ['L', end.x, end.y]
+            ]
+        } else {
+            if (end.x > start.x) {
+                path = [
+                    ['M', start.x, start.y],
+                    ['C', start.x + hgap / 2, start.y, end.x - hgap / 2, end.y, end.x, end.y]
+                ]
+            } else {
+                path = [
+                    ['M', start.x, start.y],
+                    ['L', start.x + 20, start.y],
+                    ['L', start.x + 20, (start.y + end.y) / 2],
+                    ['L', end.x - 20, (start.y + end.y) / 2],
+                    ['L', end.x - 20, end.y],
+                    ['L', end.x, end.y]
+                ]
+            }
+        }
+        const shape = group.addShape('path', {
+            attrs: {
+                stroke: color,
+                path,
+                cursor: 'pointer',
+                endArrow: {
+                    path: `M ${d},0 L -${d},-${d + 2} L -${d},${d + 2} Z`,
+                    d
+                },
+                lineWidth: 1
+            },
+            color,
+            isHoverShape: true
+        })
+        group.addShape('path', {
+            attrs: {
+                stroke: 'rgba(0, 0, 0, 0)',
+                path,
+                cursor: 'pointer',
+                lineWidth: 10
+            }
+        })
+        group.addShape('circle', {
+            attrs: {
+                x: start.x,
+                y: start.y,
+                r: 4,
+                fill: '#fff',
+                stroke: color
+            },
+            color,
+            isHoverShape: true
+        })
+        if (!undeleteable) {
+            this.drawDeleteBtn(cfg, group, start, end)
+        }
+        cfg.showEdgeLabel && this.drawLabel(cfg, group, start, end)
+        return shape
+    },
+    drawDeleteBtn(cfg, group, start, end) {
+        let btn = group.addShape('dom', {
+            attrs: {
+                x: (end.x + start.x) / 2 - 8,
+                y: (end.y + start.y) / 2 - 8,
+                width: 16,
+                height: 16,
+                html: `<i class="el-icon-error event-delete"></i>`,
+                fill: '#6cf'
+            },
+            isDeleteBtn: true
+        })
+        btn.hide()
+    },
+    drawLabel(cfg, group, start, end) {
+        let label = cfg.label
+        // 策略与策略分支之间不需要数字
+        if (cfg.sourceNode.getModel().menuKey === 'strategy' || cfg.sourceNode.getModel().menuKey === 'start') {
+            return
+        }
+        group.addShape('dom', {
+            attrs: {
+                x: (end.x + start.x) / 2 - 28,
+                y: (end.y + start.y) / 2 - 8,
+                width: 56,
+                height: 16,
+                html: `<span class="graph-edge-label">${label}</span>`,
+                fill: '#6cf'
+            },
+            isLabel: true
+        })
+    },
+    setState(name, value, node) {
+        const group = node.getContainer()
+        const shapes = group.get('children')
+        let mode = value ? 'show' : 'hide'
+        switch (name) {
+            // 设置悬浮状态
+            case 'hover':
+                shapes.forEach(shape => {
+                    if (shape._cfg.isDeleteBtn) {
+                        shape[mode]()
+                    }
+                    if (shape._cfg.isHoverShape) {
+                        shape.attr('stroke', mode === 'show' ? activeColor : shape._cfg.color)
+                    }
+                })
+                break
+            default:
+                break
+        }
+    }
+})
+
+G6.registerBehavior('active', {
+    getEvents() {
+        return {
+            'node:click': 'onClick'
+        }
+    },
+    onClick(e) {
+        let target = e.target
+        const node = e.item
+        const graph = this.graph
+        if (target.get('isStartOrEndNode')) {
+            return false
+        } else if (target.get('isDeleteBtn')) {
+            [...node.getEdges()].forEach(edge => {
+                graph.removeItem(edge)
+            })
+            graph.removeItem(node)
+        } else {
+            let activeNodes = graph.findAllByState('node', 'active')
+            activeNodes.forEach(node => graph.setItemState(node, 'active', false))
+            graph.setItemState(node, 'active', true)
+        }
+    }
+})
+
+// 自定义连线行为
+G6.registerBehavior('anchor-add-edge', {
+    getEvents() {
+        return {
+            mousemove: 'onMove',
+            mouseup: 'onOut',
+            'node:mousedown': 'onStart',
+            'node:mouseup': 'onEnd',
+            'node:mouseenter': 'onEnter',
+            'node:mouseleave': 'onLeave',
+            'node:click': 'onClick',
+            'edge:mouseenter': 'onEdgeEnter',
+            'edge:mouseleave': 'onEdgeLeave',
+            'edge:click': 'onEdgeClick'
+        }
+    },
+    // 开始连线
+    onStart(e) {
+        let target = e.target
+        const node = e.item
+        const graph = this.graph
+        const point = { x: e.x, y: e.y }
+        const model = node.getModel()
+        let isBranch = node._cfg.model.menuKey === 'strategyBranch'
+        // 如果是悬浮到状态文案上，则忽略
+        if (target.get('isStatus')) {
+            return
+        }
+
+        this.startPoint = point
+
+        // 不允许结束节点拉出一条线，开始节点线会自动生成，没有必要连线
+        if (target.get('isAnchorShape') && model.label !== '结束' && model.menuKey !== 'strategy' && model.menuKey !== 'mergeBranch') {
+            // 屏幕中生成可拖拽的线，并标记
+            this.edge = graph.addItem('edge', {
+                source: model.id,
+                target: point,
+                sourceOffset: {
+                    x: isBranch ? 80 : 32,
+                    y: 0
+                },
+                targetOffset: { x: 0, y: 0 },
+                linkType: '0'
+            })
+        } else {
+            // 标记被拖拽的节点
+            this.dragNode = node
+        }
+    },
+    // 连线中
+    onMove(e) {
+        let { edge, dragNode } = this
+        const graph = this.graph
+        const point = { x: e.x, y: e.y }
+        // 移动可拖拽的线
+        if (edge) {
+            graph.updateItem(edge, {
+                target: point
+            })
+        }
+        // 移动可拖拽的节点
+        if (dragNode) {
+            this.clearSnapLine()
+            const dragNodeBox = dragNode.getBBox()
+            graph.getNodes().forEach(node => {
+                if (node !== dragNode) {
+                    let currNodeBox = node.getBBox()
+                    // 查询 y 轴接近的节点
+                    if (Math.abs(point.y - currNodeBox.centerY) < 10) {
+                        point.y = currNodeBox.centerY
+                        const snapLine = graph.addItem('edge', {
+                            shape: 'line',
+                            color: '#f06',
+                            style: {
+                                lineWidth: 1,
+                                opacity: 0.5
+                            },
+                            source: {
+                                x: currNodeBox.centerX,
+                                y: currNodeBox.centerY
+                            },
+                            target: {
+                                x: dragNodeBox.centerX,
+                                y: dragNodeBox.centerY
+                            }
+                        })
+                        snapLines.push(snapLine)
+                    }
+                    if (Math.abs(point.x - currNodeBox.centerX) < 10) {
+                        const snapLine = graph.addItem('edge', {
+                            shape: 'line',
+                            color: '#f06',
+                            attrs: {
+                                lineDash: [5, 15, 25]
+                            },
+                            style: {
+                                lineWidth: 1,
+                                opacity: 0.5
+                            },
+                            source: {
+                                x: currNodeBox.centerX,
+                                y: currNodeBox.centerY
+                            },
+                            target: {
+                                x: dragNodeBox.centerX,
+                                y: dragNodeBox.centerY
+                            }
+                        })
+                        snapLines.push(snapLine)
+                        point.x = currNodeBox.centerX
+                    }
+                }
+            })
+            graph.updateItem(dragNode, point)
+        }
+        this.targetPoint = point
+    },
+    // 线连接到终点
+    onEnd(e) {
+        this.clearSnapLine()
+        let { edge } = this
+        if (!edge) return
+        let target = e.target
+        let targetNode = e.item // 目标节点
+        const graph = this.graph
+        const targetModel = targetNode.getModel() // 目标数据
+        const sourceNode = edge.getSource() // 源节点
+        const sourceModel = sourceNode.getModel() // 源数据
+        const isBranch = targetModel.menuKey === 'strategyBranch' || targetModel.menuKey === 'mergeBranch'
+
+        // 如果是悬浮到状态文案上，则忽略
+        if (target.get('isStatus')) {
+            return
+        }
+        // 查询是否有重复的线
+        let repeat = graph.find('edge', e => {
+            return e !== edge && isEqual(e.getSource(), edge.getSource()) && isEqual(e.getTarget(), targetNode)
+        })
+
+        if (
+            // 不允许是开始节点
+            targetModel.label === '开始' ||
+            // 不允许自己连接自己
+            edge._cfg.source._cfg.id === targetNode._cfg.id ||
+            // 不允许分支策略前面不是策略节点
+            (isBranch && targetModel.menuKey === 'strategy' && sourceModel.menuKey === 'strategyBranch') ||
+            // 不允许链接事件、客户、汇聚
+            ['event', 'cst', 'merge'].includes(targetModel.menuKey) ||
+            // 开始后面只能是事件、客户、渠道
+            (sourceModel.label === '开始' && !['event', 'cst', 'channel'].includes(targetModel.menuKey)) ||
+            // 策略分支&汇聚主节点不能主动连线
+            (['strategyBranch', 'merge'].includes(targetModel.menuKey)) ||
+            // 实时事件不能跟汇聚分支
+            (
+                sourceModel.menuKey === 'event' &&
+                sourceModel.form.eventType === EVNET_REALTIME &&
+                targetModel.menuKey === 'mergeBranch'
+            ) ||
+            // 行为策略不能跟汇聚
+            (
+                sourceModel.menuKey === 'strategyBranch' &&
+                sourceModel.form.strategyGroup.some(item => item.type === 'behaviorStrategy') &&
+                targetModel.menuKey === 'mergeBranch'
+            ) ||
+            // 汇聚后面只能是渠道节点
+            (sourceModel.menuKey === 'merge' && targetModel.menuKey !== 'channel') ||
+            // 渠道前面只能有一个汇聚
+            (targetModel.menuKey === 'channel' && sourceModel.menuKey === 'merge' && targetNode.getInEdges().filter(edge => edge.getSource().getModel().menuKey === 'merge').length > 0) ||
+            !!repeat // 不允许有重复的线
+        ) {
+            // 连线失败, 删除线条
+            this.removeEdge()
+        } else {
+            // 连线成功, 更新线条连接关系
+            graph.updateItem(edge, {
+                target: targetNode._cfg.id,
+                targetOffset: { x: isBranch ? -80 : -32, y: 0 }
+            })
+        }
+        // 移除错误的线条
+        removeErrorEdge(this.graph)
+        this.edge = null
+    },
+    clearSnapLine() {
+        const graph = this.graph
+        snapLines.forEach(edge => {
+            if (edge && edge.getModel().shape === 'line') {
+                graph.removeItem(edge)
+            }
+        })
+        snapLines = []
+    },
+    // 鼠标进入节点，设置高亮
+    onEnter(e) {
+        let target = e.target
+        const node = e.item
+        const model = node.getModel()
+        const graph = this.graph
+        // 结束节点不需要高亮
+        if (model.label === '结束' && !this.edge) {
+            return
+        }
+        if (target.get('isStatus')) {
+            return
+        }
+        graph.setItemState(node, 'hover', true)
+    },
+    // 鼠标离开节点，结束高亮
+    onLeave(e) {
+        const graph = this.graph
+        const node = e.item
+        graph.setItemState(node, 'hover', false)
+    },
+    // 连接到空白地方，视为连接失败
+    onOut() {
+        setTimeout(() => {
+            this.removeEdge()
+        }, 100)
+        this.dragNode = null
+    },
+    // 移除正在连接的线
+    removeEdge() {
+        if (!this.edge) return
+        const graph = this.graph
+        graph.removeItem(this.edge)
+        this.edge = null
+    },
+    // 鼠标点击删除
+    onClick(e) {
+        let target = e.target
+        const node = e.item
+        const graph = this.graph
+        if (target.get('isStartOrEndNode')) {
+            return false
+        } else if (target.get('isDeleteBtn')) {
+            switch (node._cfg.model.menuKey) {
+                // 策略分支节点删除，通知原策略节点表格里面删掉对应行
+                case 'strategyBranch':
+                    graph.onStrategyBranchNodeDelete(node.getModel().form.rowId)
+                    break
+                // 策略节点删除，删除之后的所有策略分支节点
+                case 'strategy':
+                    node.getOutEdges().forEach(edge => {
+                        graph.removeItem(edge.getTarget())
+                        graph.removeItem(edge)
+                    })
+                    break
+                // 汇聚分支节点删除，通知原汇聚节点表格里面删掉对应行
+                case 'mergeBranch':
+                    graph.onMergeBranchNodeDelete(node.getModel().form.rowId)
+                    break
+                // 汇聚节点删除，删除之前的所有汇聚分支节点
+                case 'merge':
+                    node.getInEdges().forEach(edge => {
+                        graph.removeItem(edge.getSource())
+                        graph.removeItem(edge)
+                    })
+                    break
+                default:
+                    break
+            }
+            [...node.getEdges()].forEach(edge => {
+                graph.removeItem(edge)
+            })
+            graph.removeItem(node)
+        } else {
+            let activeNodes = graph.findAllByState('node', 'active')
+            activeNodes.forEach(node => graph.setItemState(node, 'active', false))
+            graph.setItemState(node, 'active', true)
+        }
+    },
+    // 进入线条高亮
+    onEdgeEnter(e) {
+        if (this.edge) return
+        const node = e.item
+        const graph = this.graph
+        graph.setItemState(node, 'hover', true)
+    },
+    // 移出线条高亮
+    onEdgeLeave(e) {
+        const node = e.item
+        const graph = this.graph
+        graph.setItemState(node, 'hover', false)
+    },
+    // 线条删除按钮事件
+    onEdgeClick(e) {
+        let target = e.target
+        const node = e.item
+        const graph = this.graph
+        if (target.get('isDeleteBtn')) {
+            graph.removeItem(node)
+        }
+    }
+})
+
+export default {
+    props: {
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        // 是否是只有客户节点能编辑，暂时没有作用
+        cstonly: {
+            type: Boolean,
+            default: false
+        },
+        // 是否是节点计数模式（测试模式），此处尚未完成...
+        isTestMode: {
+            type: Boolean,
+            default: false
+        },
+        // 是否是 AI 活动
+        isAIMode: {
+            type: Boolean,
+            default: false
+        },
+        data: {
+            type: Object,
+            default: () => ({})
+        },
+        zoom: {
+            type: Boolean,
+            default: true
+        },
+        // 是否展示线上面的数字
+        showEdgeLabel: {
+            type: Boolean,
+            default: false
+        },
+        // 禁用的节点，不会在页面上显示出来
+        diabledKey: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            menuList
+        }
+    },
+    mounted() {
+        this.init()
+    },
+    computed: {
+        filterMenuList() {
+            return this.menuList.filter(item => item.show !== false && item.key !== this.diabledKey)
+        }
+    },
+    watch: {
+        cstonly() {
+            this.refresh()
+        }
+    },
+    methods: {
+        init() {
+            let el = this.$refs.container
+            let viewConfig = [
+                'active',
+                'drag-canvas'
+            ]
+            if (this.zoom) {
+                viewConfig.push({
+                    type: 'zoom-canvas',
+                    sensitivity: 0.5
+                })
+            }
+            let modes = {
+                default: [
+                    'drag-canvas',
+                    {
+                        type: 'zoom-canvas',
+                        sensitivity: 0.5
+                    },
+                    'anchor-add-edge'
+                ],
+                view: viewConfig,
+                cstonly: [
+                    'drag-canvas',
+                    {
+                        type: 'zoom-canvas',
+                        sensitivity: 0.5
+                    }
+                ],
+                isTestMode: [
+                    'drag-canvas',
+                    'active',
+                    {
+                        type: 'zoom-canvas',
+                        sensitivity: 0.5
+                    }
+                ]
+            }
+
+            let graph = new G6.Graph({
+                container: el,
+                // plugins: [ grid ],
+                renderer: 'svg',
+                modes,
+                width: el.offsetWidth,
+                height: el.offsetHeight,
+                defaultNode: {
+                    shape: 'flow'
+                },
+                defaultEdge: {
+                    shape: 'flow-line',
+                    cstonly: this.cstonly,
+                    isTestMode: this.isTestMode,
+                    showEdgeLabel: this.showEdgeLabel
+                }
+            })
+            graph.data(this.data)
+            graph.render()
+            this.$nextTick(() => {
+                graph.fitView([20, 20, 20, 20])
+                if (this.readonly) {
+                    graph.setMode('view')
+                } else if (this.cstonly) {
+                    graph.setMode('cstonly')
+                } else if (this.isTestMode) {
+                    graph.setMode('isTestMode')
+                }
+            })
+            graph.on('node:click', this.handleNodeClick)
+            graph.on('canvas:click', this.handleCanvasClick)
+            graph.on('edge:click', this.handleEdgeClick)
+            graph.onStrategyBranchNodeDelete = this.handleStrategyBranchNodeDelete
+            graph.onMergeBranchNodeDelete = this.handleMergeBranchNodeDelete
+            this.graph = graph
+        },
+        // 拖拽开始外部模板
+        handleDragStart(e, menu) {
+            if (this.isAIMode && menu.key === 'cst') {
+                const { graph } = this
+                // 获取所有事件节点
+                const nodes = graph.getNodes().filter(node => {
+                    let model = node.getModel()
+                    return model.menuKey === 'cst'
+                })
+                if (nodes.length >= 1) {
+                    this.$info('AI 活动只能选择一个客户节点')
+                    e.preventDefault()
+                    return
+                }
+            }
+            e.dataTransfer.setData('text/plain', menu.key)
+        },
+        // 被拖拽到画布上
+        handleDrop(e) {
+            preventAndStopEvent(e)
+            let graph = this.graph
+            let key = e.dataTransfer.getData('text/plain')
+            let position = graph.getPointByClient(e.clientX, e.clientY)
+            let menu = menuList.find(item => item.key === key) || {}
+            if (!menu.label) {
+                return
+            }
+            const id = 'node' + Date.now()
+            // 向画布添加节点
+            const node = graph.addItem('node', {
+                x: position.x,
+                y: position.y,
+                id,
+                menuKey: key,
+                label: menu.label,
+                cstonly: this.cstonly,
+                isTestMode: this.isTestMode,
+                form: this.$parent.getDefaultFormValue(key)
+            })
+            // 客户事件节点额外携带开始的连接线
+            if (menu.key === 'cst' || menu.key === 'event') {
+                let nodes = graph.getNodes()
+                let startNodeId = 'start'
+                nodes.forEach(node => {
+                    let model = node.getModel()
+                    if (model.menuKey === 'start') {
+                        startNodeId = model.id
+                    }
+                })
+                if (startNodeId) {
+                    graph.addItem('edge', {
+                        source: startNodeId,
+                        target: id,
+                        undeleteable: true
+                    })
+                }
+            }
+            this.$nextTick(() => {
+                bus.$emit('graph-node:add', { menu, node })
+            })
+        },
+        // 节点点击事件监听
+        handleNodeClick(e) {
+            let target = e.target
+            const node = e.item
+            if (target.get('isStartOrEndNode') || node.destroyed || target.get('isDeleteBtn')) {
+                this.$emit('canvasClick')
+            } else {
+                this.$emit('nodeClick', node)
+            }
+        },
+        // 画布点击事件
+        handleCanvasClick() {
+            this.$emit('canvasClick')
+        },
+        // 连线数字点击事件
+        handleEdgeClick(e) {
+            let target = e.target
+            if (target.get('isLabel')) {
+                this.$emit('numClick', e, target)
+            }
+        },
+        // 设置画布 label
+        setNodeLabel(nodeId, label) {
+            let graph = this.graph
+            let node = graph?.findById(nodeId)
+            if (node) {
+                let model = node.getModel()
+                model.label = label
+                graph.updateItem(node, model)
+            }
+        },
+        // 设置画布表单
+        setNodeForm(nodeId, form) {
+            let graph = this.graph
+            let node = graph?.findById(nodeId)
+            if (node) {
+                let model = node.getModel()
+                model.form = form
+                graph.updateItem(node, model)
+            }
+        },
+        // 检测行为策略连线正确性
+        checkNodeEdge(node, form) {
+            removeErrorEdge(this.graph)
+        },
+        // 获取页面画布信息
+        getNodeList() {
+            let graph = this.graph
+            return graph.save()
+        },
+        // 设置画布数据
+        setData(data) {
+            let graph = this.graph
+            let cavans = {
+                edges: data.edges || [],
+                nodes: data.nodes.map(node => {
+                    return {
+                        ...node,
+                        cstonly: this.cstonly,
+                        isTestMode: this.isTestMode
+                    }
+                }) || []
+            }
+            if (!cavans.nodes.length) {
+                cavans = this.data
+            }
+            graph.data(cavans)
+            graph.render()
+            this.$nextTick(() => {
+                graph.fitView([20, 20, 20, 20])
+                if (this.readonly) {
+                    graph.setMode('view')
+                } else if (this.cstonly) {
+                    graph.setMode('cstonly')
+                } else if (this.isTestMode) {
+                    graph.setMode('isTestMode')
+                } else {
+                    graph.setMode('default')
+                }
+            })
+        },
+        // 刷新画布
+        refresh() {
+            let graph = this.graph
+            let data = graph.save()
+            let cavans = {
+                edges: data.edges,
+                nodes: data.nodes.map(node => {
+                    return {
+                        ...node,
+                        cstonly: this.cstonly,
+                        isTestMode: this.isTestMode
+                    }
+                })
+            }
+            graph.data(cavans)
+            graph.render()
+            this.$nextTick(() => {
+                graph.fitView([20, 20, 20, 20])
+                if (this.readonly) {
+                    graph.setMode('view')
+                } else if (this.cstonly) {
+                    graph.setMode('cstonly')
+                } else if (this.isTestMode) {
+                    graph.setMode('isTestMode')
+                } else {
+                    graph.setMode('default')
+                }
+            })
+        },
+        /**
+         * 新增策略分支
+         * @param {Node} node 原策略节点
+         * @param {String} label 策略分支名字
+         * @param {String} id 策略分支 id
+         * @param {Number} order 排列第几个
+         * @param {Boolean} isBranchOther 是否是策略其它节点
+        */
+        addNewBranchNode(node, { name, id, order, strategyType, sampleType, hiddenDelete = false }) {
+            let graph = this.graph
+            let form = this.$parent.getDefaultFormValue('strategyBranch')
+            form.strategyType = strategyType
+            form.sampleType = sampleType
+            form.name = name
+            if (hiddenDelete) {
+                form.hiddenDelete = true
+            }
+
+            form.rowId = id
+
+            // 向画布添加节点
+            graph.addItem('node', {
+                x: node.getBBox().x + 200,
+                y: node.getBBox().y + (order - 1) * 50,
+                id,
+                menuKey: 'strategyBranch',
+                label: name,
+                cstonly: this.cstonly,
+                form
+            })
+
+            // 策略分支与源策略添加一条线
+            graph.addItem('edge', {
+                source: node._cfg.id,
+                target: id,
+                undeleteable: true,
+                sourceOffset: { x: 32, y: 0 },
+                targetOffset: { x: -80, y: 0 }
+            })
+        },
+        /**
+         * 新增汇聚分支
+         * @param {Node} node 原汇聚节点
+         * @param {String} label 汇聚分支名字
+         * @param {String} id 汇聚分支 id
+        */
+        addNewMergeBranchNode(node, { name, id, order, mergeType }) {
+            let graph = this.graph
+            let form = this.$parent.getDefaultFormValue('mergeBranch')
+            form.mergeType = mergeType
+            form.name = name
+            form.rowId = id
+
+            // 向画布添加节点
+            graph.addItem('node', {
+                x: node.getBBox().x - 200 + 74,
+                y: node.getBBox().y + (order - 1) * 50,
+                id,
+                menuKey: 'mergeBranch',
+                label: name,
+                cstonly: this.cstonly,
+                form
+            })
+
+            // 汇聚分支与源汇聚添加一条线
+            graph.addItem('edge', {
+                source: id,
+                undeleteable: true,
+                target: node._cfg.id,
+                sourceOffset: { x: 80, y: 0 },
+                targetOffset: { x: -32, y: 0 }
+            })
+        },
+        /**
+         * 修改分支节点类型
+         * @param {Node} node 父节点
+         * @param {String} sampleType 分支节点类型
+         */
+        updateTypeBranchNode(node, strategyType, id) {
+            let graph = this.graph
+            // 修改分支清空策略分支节点
+            node.getOutEdges().forEach(edge => {
+                graph.removeItem(edge.getTarget())
+                graph.removeItem(edge)
+            })
+            // 切换到样本策略是，默认多一个其它分支
+            if (strategyType === NODE_SAMPLE) {
+                let params = {
+                    name: '其他',
+                    id,
+                    order: 4,
+                    strategyType: 3,
+                    sampleType: null,
+                    hiddenDelete: true
+                }
+                this.addNewBranchNode(node, params)
+            }
+        },
+        /**
+         * 修改分支节点样本类型
+         * @param {Node} node 父节点
+         * @param {String} sampleType 样本单位
+         */
+        updateSampleBranchNode(node, sampleType) {
+            let childrens = node.getOutEdges().map(edge => {
+                return edge.getTarget()
+            })
+            childrens.forEach(node => {
+                let model = node.getModel()
+                model.form.sampleType = sampleType
+                model.form.sampleValue = 0
+            })
+        },
+        /**
+         * 修改汇聚节点的分支节点汇聚类型
+         * @param {Node} node 父节点
+         * @param {String} mergeType 汇聚类型
+         */
+        updateMergeBranchNode(node, mergeType) {
+            let childrens = node.getInEdges().map(edge => {
+                return edge.getSource()
+            })
+            childrens.forEach(node => {
+                let model = node.getModel()
+                model.form.mergeType = mergeType
+                model.form.marketingAdvice = ''
+            })
+        },
+        // 删除分支节点
+        deleteBranchNode(id) {
+            this.graph.getNodes().filter(node => {
+                let model = node.getModel()
+                if (model.form && model.form.rowId === id) {
+                    this.graph.removeItem(node)
+                }
+            })
+        },
+        // 删除分支策略节点时，联动删除父级策略节点的数据
+        handleStrategyBranchNodeDelete(id) {
+            // 筛选出所有策略节点
+            let nodes = this.graph.getNodes().filter(node => {
+                let model = node.getModel()
+                return model.menuKey === 'strategy'
+            })
+            // 找到策略分支对应的父级策略节点
+            nodes.forEach(node => {
+                let model = node.getModel()
+                let targetLineIndex = model.form.data.findIndex(row => row.id === id)
+                if (targetLineIndex >= 0) {
+                    // 如果父节点只有这么一个节点，那么就删掉这个父节点
+                    if (model.form.data.length === 1) {
+                        this.graph.removeItem(node)
+                    } else {
+                        // 如果有多条数据，那么就删掉那一行数据
+                        model.form.data.splice(targetLineIndex, 1)
+                    }
+                }
+            })
+        },
+        // 删除分支汇聚节点时，联动删除父级汇聚节点的数据
+        handleMergeBranchNodeDelete(id) {
+            // 筛选出所有汇聚节点
+            let nodes = this.graph.getNodes().filter(node => {
+                let model = node.getModel()
+                return model.menuKey === 'merge'
+            })
+            // 找到汇聚分支对应的父级汇聚节点
+            nodes.forEach(node => {
+                let model = node.getModel()
+                let targetLineIndex = model.form.data.findIndex(row => row.id === id)
+                if (targetLineIndex >= 0) {
+                    // 如果父节点只有这么一个节点，那么就删掉这个父节点
+                    if (model.form.data.length === 1) {
+                        this.graph.removeItem(node)
+                    } else {
+                        // 如果有多条数据，那么就删掉那一行数据
+                        model.form.data.splice(targetLineIndex, 1)
+                    }
+                }
+            })
+        },
+        // 删除页面上所有事件节点
+        removeEventNode() {
+            const { graph } = this
+            // 获取所有事件节点
+            const nodes = graph.getNodes().filter(node => {
+                let model = node.getModel()
+                return model.menuKey === 'event'
+            })
+            nodes.forEach(node => {
+                // 删除所有关联边
+                [...node.getEdges()].forEach(edge => {
+                    graph.removeItem(edge)
+                })
+                // 删除节点
+                graph.removeItem(node)
+            })
+        },
+        // 清空客户节点数据
+        removeCustomerNode() {
+            const { graph } = this
+            // 获取所有事件节点
+            const nodes = graph.getNodes().filter(node => {
+                let model = node.getModel()
+                return model.menuKey === 'cst'
+            })
+            nodes.forEach(node => {
+                // 删除所有关联边
+                [...node.getEdges()].forEach(edge => {
+                    graph.removeItem(edge)
+                })
+                // 删除节点
+                graph.removeItem(node)
+            })
+        },
+        // 清空渠道营销建议
+        clearChannelTags() {
+            const { graph } = this
+            // 获取所有事件节点
+            graph.getNodes().forEach(node => {
+                let model = node.getModel()
+                if (model.menuKey === 'channel') {
+                    model.form.marketingAdvice = []
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+::v-deep.event-canvas {
+    height: 100%;
+    position: relative;
+
+    .event-container {
+        height: 100%;
+        min-height: 500px;
+        z-index: 10;
+        background-color: #f4f5f6;
+        user-select: none;
+    }
+
+    .menu-bar {
+        top: @space2;
+        left: 86px;
+        padding: 0 @space;
+        .border();
+        border-radius: (@space / 2);
+        box-shadow: 0px 2px 6px 0px rgba(99, 114, 145, 0.31);
+        background-color: #fff;
+        z-index: 11;
+        position: absolute;
+        display: flex;
+    }
+
+    .menu-bar-item {
+        width: 36px;
+        height: 36px;
+        margin: @space @space / 1.5;
+        border-radius: (@space / 2);
+        cursor: pointer;
+        .flex();
+
+        .iconfont {
+            font-size: @space3;
+        }
+    }
+
+    .graph-item {
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+        user-select: none;
+        color: #fff;
+        .flex();
+
+        .iconfont {
+            font-size: @space4;
+        }
+    }
+
+    .item-branch {
+        background-color: #39C58C;
+        justify-content: flex-start;
+
+        .iconfont {
+            margin: 0 @space;
+            font-size: @space * 2.5;
+        }
+    }
+
+    .item-orange {
+        background-image: linear-gradient(135deg, #FFCF28, #FF9B2F);
+    }
+
+    .item-red {
+        background-image: linear-gradient(135deg, #ffb07c, #ff4c2f);
+    }
+
+    .item-sky {
+        background-image: linear-gradient(135deg, #32ECDC, #0EB4D0);
+    }
+
+    .item-blue {
+        background-image: linear-gradient(135deg, #91B0FA, #234BD2);
+    }
+
+    .item-green {
+        background-image: linear-gradient(135deg, #5DE8A8, #16A370);
+    }
+
+    .item-purple {
+        background-image: linear-gradient(135deg, #997eec, #581d8e);
+    }
+
+    .item-gray {
+        background-image: linear-gradient(135deg, #ddd, #bbb);
+    }
+
+    .graph-node-label {
+        color: #777;
+        font-size: 12px;
+        text-align: center;
+        pointer-events: none;
+    }
+
+    .graph-edge-label {
+        line-height: 1;
+        border-radius: (@space / 2);
+        font-size: 10px;
+        color: @primary;
+        .flex();
+        cursor: pointer;
+    }
+
+    .event-delete {
+        font-size: 16px;
+        border-radius: 50%;
+        color: #9FABC2;
+        background-color: #fff;
+        cursor: pointer;
+    }
+
+    .graph-node-status {
+        width: 100%;
+        height: 100%;
+        // .border(#f06);
+        text-align: center;
+    }
+
+    .status-content {
+        border-radius: (@space / 2);
+        padding: (@space / 2) @space;
+        background-color: #fff;
+        display: inline-block;
+        // position: relative;
+        font-size: 12px;
+        color: rgba(0, 0, 0, .65);
+        box-shadow: 0px 2px 6px 0px rgba(175, 175, 175, 1);
+    }
+
+    .status-text {
+        // z-index: 2;
+        // position: relative;
+        vertical-align: middle;
+        font-size: 12px;
+        display: inline-block;
+    }
+
+    .status-red {
+        color: #FF1A2E;
+    }
+
+    .status-green {
+        color: #5CB85C;
+    }
+
+    .status-blue {
+        color: #4A7FF6;
+    }
+
+    // .status-opacity {
+    //     // animation: status-opacity 2s linear infinite;
+    // }
+    @keyframes status-opacity {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}
+</style>