axwen-test31 2.0.0

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

@@ -0,0 +1,1434 @@
+<template>
+    <div class="event-canvas-pro">
+        <div class="menu-bar" :class="{ 'folding': folding }" v-if="!readonly && !cstonly && !isTestMode">
+            <div class="menu-bar-title">
+                组件
+                <yt-icon-svg icon="zujianshouqi" class="toggle" :size="18" @click="toggleFold" />
+            </div>
+            <div class="menu-bar-content">
+                <div class="menu-bar-type" v-for="menutType in menuTree" :key="menutType.key">
+                    <div class="menu-type-title flex items-center">
+                        <span>{{ menutType.label }}</span>
+                        <p class="line"></p>
+                    </div>
+                    <div class="menu-type-content">
+                        <div class="menu-type-item flex flex-column items-center" :style="`width:${isControlCol}`" v-for="menu in menutType.children"
+                            :key="menu.key">
+                            <div class="menu-type-icon" :class="'item-' + menu.color" draggable="true"
+                                :title="menu.label" @dragstart="(e) => handleDragStart(e, menu)">
+                                <img v-if="menu.parentKey==='channelGroup1'" width="18px" height="18px" draggable="false" :src="require(`@/assets/images/channel-icon/${menu.icon}.png`)">
+                                <img v-else draggable="false" width="18px" height="18px"  :src="require(`@/assets/images/canvas-icon/${menu.icon}.png`)" alt="">
+                            </div>
+                            <div class="menu-type-name w-3/4">{{ menu.label }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="event-container" ref="container" dropable="true" @drop="handleDrop" @dragover.prevent
+            @dragleave.prevent></div>
+    </div>
+</template>
+
+<script>
+
+import G6Pro from '@g6-pro'
+import { getCmpItems } from '@/api/market'
+import bus from '@/bus'
+import { throttle } from '@antv/util'
+import { mapState } from 'vuex'
+import { reDefineG6 } from './g6-config'
+import { DefaultToolBar, Grid, MenuToolBar, Minimap, SearchToolBar, ZoomToolBar, AlignToolBar, FullScreenToolBar } from './g6-config/plugins'
+import { getBackGroundColor, getImage, listToTree, tryToFitview } from './util'
+import { genDeferred } from '@/utils/index'
+import { genCancasAndSize, toDataURL } from './util'
+import { preventAndStopEvent } from "@/utils/dom";
+import { NODE_SAMPLE_TYPE_NUMBER } from '@/utils/variable'
+import { getChannelCompAllList } from '@/api/channel-comp'
+
+export default {
+    props: {
+        // mode: {
+        //     type: String,
+        //     default: ''
+        // },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        // 是否是只有客户节点能编辑，暂时没有作用
+        cstonly: {
+            type: Boolean,
+            default: false
+        },
+        // 是否是节点计数模式（测试模式），此处尚未完成...
+        isTestMode: {
+            type: Boolean,
+            default: false
+        },
+        // 是否是 AI 活动
+        isAIMode: {
+            type: Boolean,
+            default: false
+        },
+        isSceneDetail: {
+            type: Boolean,
+            default: false
+        },
+        data: {
+            type: Object,
+            default: () => ({})
+        },
+        zoom: {
+            type: Boolean,
+            default: true
+        },
+        isImgMode: {
+            type: Boolean,
+            default: false
+        },
+        // 是否展示线上面的数字
+        showEdgeLabel: {
+            type: Boolean,
+            default: false
+        },
+        // 禁用的节点，不会在页面上显示出来
+        diabledKey: {
+            type: String,
+            default: ''
+        },
+        detailFold: {
+            type: Boolean,
+            default: false
+        },
+        isShowComponentSide: {
+            type: Boolean,
+            default: false
+        },
+        // 是否是分析页面调用
+        isAnalysis: {
+            type: Boolean,
+            default: false
+        }
+    },
+    created() {
+        this.inited = genDeferred()
+    },
+    data() {
+        return {
+            folding: false,
+            menuTree: [],
+            deactivated: false
+        }
+    },
+    activated() {
+        if (this.deactivated) {
+            this.activatedGraph()
+            this.bindResize()
+            this.deactivated = false
+        }
+    },
+    deactivated() {
+        this.deactivated = true
+        this.deActivatedGraph()
+        this.unbindResize()
+    },
+    async mounted() {
+        await this.getChannelCompAllList()
+        this.getDragMenu().then(res => this.init())
+        this.bindResize()
+    },
+    destroyed() {
+        this.unbindResize()
+    },
+    computed: {
+        ...mapState(['layoutSideShow']),
+        isControlCol() {
+            return process.env.VUE_APP_DEPLOY === 'HZBANK' ? '48%' : '33%'
+        },
+    },
+    watch: {
+        cstonly() {
+            this.refresh()
+        },
+        layoutSideShow(newData, oldData) {
+            this.graphChangeSize()
+        },
+        detailFold(newVal) {
+            const x = newVal ? -12 : -320
+            this.graph?.getPluginByName('minimap')?.changePosition({ x })
+            this.graph?.getPluginByName('zoomToolBar')?.changePosition({ x })
+            this.changeDetailBtnDisabled()
+        },
+        isShowComponentSide(newVal) {
+            if(this.detailFold) {
+                const x = !newVal ? -12 : -320
+                this.graph?.getPluginByName('minimap')?.changePosition({ x })
+                this.graph?.getPluginByName('zoomToolBar')?.changePosition({ x })
+            }
+            this.changeDetailBtnDisabled()
+        },
+        folding (newVal) {
+            const x = newVal ? 80 : 236
+            this.graph?.getPluginByName('fullScreenToolBar')?.changePosition({ x })
+            this.changeCanvasView()
+        }
+    },
+    methods: {
+        resizeCallback: throttle(function (e) {
+            let container = this.$refs.container
+            if (container) {
+                let width = container.offsetWidth
+                let height = container.offsetHeight
+                let graph = this.graph
+                graph && graph.changeSize(width, height)
+            }
+        }, 300),
+        graphChangeSize() {
+            let container = this.$refs.container
+            if (container) {
+                let width = container.offsetWidth
+                let height = container.offsetHeight
+                let graph = this.graph
+                graph && graph.changeSize(width, height)
+            }
+        },
+        activatedGraph() {
+            const graph = this.graph
+            if (!graph) {
+                return
+            }
+            const currentBehaves = graph.get('modeController')?.currentBehaves || []
+            currentBehaves.forEach(behavior => {
+                behavior.bind(graph)
+            })
+            const plugins = graph.get('plugins') || []
+            plugins.forEach(plugin => {
+                plugin.bind(graph)
+            })
+        },
+        deActivatedGraph() {
+            const graph = this.graph
+            if (!graph) {
+                return
+            }
+            const currentBehaves = graph.get('modeController')?.currentBehaves || []
+            currentBehaves.forEach(behavior => {
+                behavior.unbind(graph)
+            })
+            const plugins = graph.get('plugins') || []
+            plugins.forEach(plugin => {
+                plugin.unbind(graph)
+            })
+        },
+        bindResize() {
+            window.addEventListener('resize', this.resizeCallback)
+        },
+        unbindResize() {
+            window.removeEventListener('resize', this.resizeCallback)
+        },
+        miniMapRender(group, nodeCount, node) {
+            const model = node.getModel()
+            if (!model) {
+                return
+            }
+            const bbox = node.getBBox()
+            if (model.type === 'point') {
+                group.addShape('circle', {
+                    attrs: {
+                        x: bbox.centerX,
+                        y: bbox.centerY,
+                        r: 22,
+                        fill: '#f4f4f8',
+                        stroke: '#aaa'
+                    },
+                    isStartOrEndNode: true
+                })
+                group.addShape('text', {
+                    attrs: {
+                        x: bbox.centerX,
+                        y: bbox.centerY,
+                        textAlign: 'center',
+                        textBaseline: 'middle',
+                        text: model.label,
+                        fill: '#666'
+                    }
+                })
+            } else {
+                const { cstonly, uniqueKey, channelGroup, menuKey, label } = model
+                const menu = this.getMenuByKey(uniqueKey || channelGroup || menuKey)
+                group.addShape('rect', {
+                    attrs: {
+                        fill: getBackGroundColor(cstonly, menu),
+                        x: bbox.minX,
+                        y: bbox.minY,
+                        width: bbox.width - 12,
+                        height: bbox.height - 12,
+                        radius: 5,
+                    },
+                })
+                if (nodeCount < 20) {
+                    const width = bbox.width > 65 ? 16 : bbox.width - 32
+                    const height = bbox.width > 65 ? 16 : bbox.height - 32
+                    group.addShape('image', {
+                        attrs: {
+                            x: bbox.minX + 10,
+                            y: bbox.minY + (width === 16 ? 6 : 10),
+                            width: width,
+                            height: height,
+                            img: getImage(model)
+                        },
+                    })
+                }
+
+            }
+        },
+        initPlugins({
+            graphWidth,
+            graphHeight
+        }) {
+            const grid = new Grid()
+            const miniMap = new Minimap({
+                type: 'delegate',
+                padding: 200,
+                position: {
+                    x: this.isSceneDetail ? -5 : -12,
+                    y: this.isAnalysis ? -62 : (this.isSceneDetail ? -50 : -118)
+                },
+                // container: minimapContainer,
+                // 通过zoomToolBar的长度计算
+                size: this.readonly ? [220, Math.round(220 / graphWidth * graphHeight)] : [254, Math.round(254 / graphWidth * graphHeight)],
+                render: this.miniMapRender
+            })
+            const zoomToolBar = new ZoomToolBar({
+                originData: this.data,
+                position: {
+                    x: this.isSceneDetail ? -5 : -12,
+                    y: this.isAnalysis ? - 12 : (this.isSceneDetail ? -5 : -68)
+                },
+                hideClearBtn: this.readonly ? true : false
+            })
+            const { mode } = this.$route.query
+            const defaultToolBar = new DefaultToolBar({
+                position: {
+                    x: -12,
+                    y: 12
+                },
+                vm: this.$parent,
+                // 如需隐藏部分按钮，需设置hideBtnList，空数组默认展示全部按钮
+                hideBtnList: this.isImgMode ? ['template','link','beautify'] : (this.readonly ? ['template','link','beautify','download'] : []),
+                // 节点计数页面隐藏该工具栏
+                className: mode === 'calc' ? 'hide-defalut-toolbar' : ''
+            })
+            const alignToolBar = new AlignToolBar({
+                position: {
+                    x: -12,
+                    y: 12
+                },
+                vm: this.$parent,
+                className: this.readonly ? 'hide-align-toolbar' : ''
+            })
+            const searchToolBar = new SearchToolBar({
+                position: {
+                    x: 720,
+                    y: 12
+                },
+            })
+
+            const menuToolBar = new MenuToolBar({
+                position: {
+                    x: 300,
+                    y: 300
+                },
+                className: this.readonly ? 'hide-g6-component-menu-toolbar' : ''
+                
+            })
+            const fullScreenToolBar = new FullScreenToolBar ({
+                position: {
+                    x: 236,
+                    y: 12
+                },
+                // 只读状态下隐藏全屏按钮
+                className: this.readonly ? 'hide-fullscreen-toolbar' : ''
+            })
+            return [
+                grid,
+                miniMap,
+                defaultToolBar,
+                alignToolBar,
+                searchToolBar,
+                menuToolBar,
+                zoomToolBar,
+                fullScreenToolBar
+            ]
+        },
+        init() {
+            const el = this.$refs.container
+            if (!el) return
+            const mainBody = document.getElementById('EventMain')
+            const elWidth = el.offsetWidth || mainBody.offsetWidth
+            const elHeight = el.offsetHeight || 500
+            reDefineG6(this)
+            let viewConfig = [
+                'active',
+                'custom-drag-canvas'
+            ]
+            if (this.zoom) {
+                viewConfig.push({
+                    type: 'custom-zoom-canvas',
+                    sensitivity: 0.5
+                })
+            }
+            let modes = {
+                default: [
+                    {
+                        type: 'custom-zoom-canvas',
+                        sensitivity: 0.5
+                    },
+                    'custom-brush-select',
+                    'custom-drag-canvas',
+                    'custom-drag-node',
+                    'custom-click-select',
+                    'custom-select-all',
+                    'custom-search-node',
+                    'custom-key-delete',
+                    'anchor-add-edge',
+                    'copy-paste',
+                ],
+                view: viewConfig,
+                cstonly: [
+                    'custom-drag-canvas',
+                    {
+                        type: 'custom-zoom-canvas',
+                        sensitivity: 0.5
+                    },
+                ],
+                isTestMode: [
+                    'custom-drag-canvas',
+                    'active',
+                    {
+                        type: 'custom-zoom-canvas',
+                        sensitivity: 0.5
+                    },
+                ]
+            }
+
+            const plugins = this.initPlugins({
+                graphWidth: elWidth,
+                graphHeight: elHeight,
+            });
+            let graph = window.graph = new G6Pro.Graph({
+                container: el,
+                plugins: plugins,
+                renderer: 'svg',
+                modes,
+                groupByTypes: false,
+                width: elWidth,
+                height: elHeight,
+                fitView: true,
+                fitViewPadding: this.readonly ? [80, 20, 80, 20] : [80, 20, 80, 244],
+                defaultNode: {
+                    shape: 'flow'
+                },
+                defaultEdge: {
+                    shape: 'flow-line',
+                    cstonly: this.cstonly,
+                    isTestMode: this.isTestMode,
+                    showEdgeLabel: this.showEdgeLabel
+                },
+                minZoom: 0.001,
+                // 粘贴板
+                shearPlate: {
+                    nodes: [],
+                    edges: [],
+                    models: []
+                },
+                shearPlateStack: {
+                    undoStack: [],
+                    redoStack: []
+                }
+            })
+            // 当前实例挂载在graph 的canvas上 自定义节点和自定义连线会使用当前组件实例内的方法
+            graph.get('canvas').set('_vm',this)
+            graph._cfg.canvasNodeCntCtrl = {}
+            graph.changeData(this.data)
+            graph.on('node:click', this.handleNodeClick)
+            graph.on('canvas:click', this.handleCanvasClick)
+            graph.on('edge:click', this.handleEdgeClick)
+            graph.onFlowBranchNodeDelete = this.handleFlowBranchNodeDelete
+            this.graph = graph
+            this.$nextTick(() => {
+                graph.zoomTo(1, { x: el.offsetWidth / 2 - 200, y: el.offsetHeight / 2 })
+                if (this.readonly) {
+                    graph.setMode('view')
+                } else if (this.cstonly) {
+                    graph.setMode('cstonly')
+                } else if (this.isTestMode) {
+                    graph.setMode('isTestMode')
+                }
+            })
+            bus.$on('downloadFullImage', (option) => {
+                let { canvas, width, height } = genCancasAndSize(this.graph, [100, 100, 100, 100])
+                let imageFile = toDataURL(canvas, width, height)
+                sessionStorage.setItem('imageFile', imageFile)
+            })
+            this.inited.resolve()
+        },
+
+        // 获取画布左侧组件
+        getDragMenu() {
+            return getCmpItems().then(res => {
+                const tData = listToTree({ data: res.data, valueKey: 'cmpType', rootValue: 'root', parentKey: 'parentCmpType' })
+                let menuArr = []
+                tData.sort((a, b) => a.nodeOrder - b.nodeOrder)
+                const colorMap = {
+                    custGroup: {
+                        color: 'sky',
+                        activeColor: '#08B1CF',
+                        activeBackgroundColor: '#d0f8ff',
+                    },
+                    reorgGroup: {
+                        color: 'lightblue',
+                        activeColor: '#2782E6',
+                        activeBackgroundColor: '#c7e0fb',
+                    },
+                    channelGroup1: {
+                        color: 'orange',
+                        activeColor: '#FF832F',
+                        activeBackgroundColor: '#ffe1cc',
+                    },
+                    timerEventGroup: {
+                        color: 'green',
+                        activeColor: '#00B893',
+                        activeBackgroundColor: '#cafff4',
+                    },
+                    resGroup: {
+                        color: 'orangered',
+                        activeColor: '#E6320B',
+                        activeBackgroundColor: '#fdd4cb',
+                    }
+                }
+                const channelComp = JSON.parse(sessionStorage.getItem('channelComp'))
+                tData.forEach(v1 => {
+                    let parentInfo = {}
+                    parentInfo.label = v1.cmpName
+                    parentInfo.key = v1.cmpType
+                    parentInfo.children = []
+                    parentInfo.order = v1.nodeOrder
+                    if(v1.cmpType === 'channelGroup1'){
+                        if(!Array.isArray(channelComp)) return;
+                        const {
+                            color,
+                            activeColor,
+                            activeBackgroundColor
+                        } = colorMap[v1.cmpType] || {}
+                        channelComp.forEach((channel,index) => {
+                            const { componentCode, componentIcon, componentName,componentChannel,componentPassage, models, businessType } = channel
+                            parentInfo.children.push({
+                                label:componentName,
+                                key:componentCode,
+                                icon:componentIcon,
+                                order:index,
+                                color,
+                                activeColor,
+                                activeBackgroundColor,
+                                parentKey:v1.cmpType,
+                                models,
+                                componentChannel,
+                                componentPassage,
+                                businessType
+                            })
+                        })
+                    }
+                    else if (v1.children && v1.children.length > 0) {
+                        v1.children.forEach(v2 => {
+                            const {
+                                color,
+                                activeColor,
+                                activeBackgroundColor
+                            } = colorMap[v2.parentCmpType] || {}
+                            parentInfo.children.push({
+                                label: v2.cmpName,
+                                key: v2.cmpType,
+                                icon: v2.cmpType.includes('Beta') ? v2.cmpType.replace('Beta', '') : v2.cmpType,
+                                order: v2.nodeOrder,
+                                color,
+                                activeColor,
+                                activeBackgroundColor
+                            })
+                        })
+                        parentInfo.children.sort((a, b) => a.order - b.order)
+                    }
+                    menuArr.push(parentInfo)
+                })
+                this.menuTree = Object.freeze(menuArr)
+                this.menuData = this.formatMenuData(menuArr)
+            })
+        },
+        
+        async getChannelCompAllList(){
+            try {
+                const { data } = await getChannelCompAllList()
+                if(!Array.isArray(data)) return;
+                sessionStorage.setItem('channelComp', JSON.stringify(data))
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        formatMenuData(menuArr) {
+            const allMenuList = menuArr.flatMap(e => e.children)
+            const menuMap = {}
+            allMenuList.forEach(item => {
+                menuMap[item.key] = item
+            })
+            return Object.freeze({
+                menuMap: menuMap,
+                menuList: allMenuList
+            })
+        },
+        // 根据code值menu信息
+        getMenuByKey(key) { 
+            const { menuMap, menuList } = this.menuData
+            return menuMap[key] || menuList.find(menu => key.includes(menu.key)) || {}
+        },
+        // 切换菜单收起/展开
+        toggleFold() {
+            this.folding = !this.folding
+            this.$emit('menuFold', this.folding)
+        },
+        // 拖拽开始外部模板
+        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)
+            const graph = this.graph
+            const menuKey = e.dataTransfer.getData('text/plain')
+            const position = graph.getPointByClient(e.clientX, e.clientY)
+            const menu = this.getMenuByKey(menuKey)
+            const { label, key, parentKey } = menu
+            if (!label) {
+                return
+            }
+            const canvasNodeCntCtrlValue = graph._cfg.canvasNodeCntCtrl[key]
+            graph._cfg.canvasNodeCntCtrl[key] = canvasNodeCntCtrlValue ? canvasNodeCntCtrlValue + 1 : 1
+            const id = 'node' + Date.now()
+            const otherId = 'node' + (Date.now() + 1)
+            let nodeForm = this.$parent.getDefaultFormValue(key)
+            if (['randomFlow', 'custFlow', 'labelFlow'].includes(key)) {
+                nodeForm.data[0] = {
+                    id: otherId,
+                    name: '其他',
+                    isOther: true
+                }
+            }
+            const keyMap={
+                channelGroup1:'channel'
+            }
+            if(keyMap[parentKey]) {
+                nodeForm.actReachChannelId = menu.componentChannel
+                nodeForm.actReachPassageId=menu.componentPassage
+                nodeForm.businessType = menu.businessType
+            }
+            // 向画布添加节点
+            const node = graph.addItem('node', {
+                x: position.x,
+                y: position.y,
+                id,
+                menuKey: keyMap[parentKey] || key,
+                // uniqueKey is the real key
+                uniqueKey: key,
+                label: menu ? menu.label : '',
+                cstonly: this.cstonly,
+                isTestMode: this.isTestMode,
+                form: nodeForm,
+                models:menu.models,
+                icon:menu.icon
+            })
+            graph.collectOperatedItems('node', {
+                ...node.getModel()
+            })
+            switch (key) {
+                // 客户节点额外携带开始的连接线
+                case 'cst':
+                case 'flowCst':
+                    const startNode = graph.find('node', (node) => node.getModel().menuKey === 'start');
+                    const startNodeId = startNode ? startNode.getModel().id : 'start'
+                    const edge = graph.addItem('edge', {
+                        source: startNodeId,
+                        target: id,
+                        undeleteable: true
+                    })
+                    graph.collectOperatedItems('edge', {
+                        ...edge.getModel()
+                    })
+                    break
+                case 'custFlow':
+                case 'labelFlow':
+                case 'randomFlow':
+                    this.updateTypeBranchNode(node, 'randomFlow', otherId, false)
+                    break
+                case 'evtRespFlow':
+                    this.updateTypeBranchNode(node, 'evtRespFlow', otherId, false)    
+                    break
+                default:
+                    break
+            }
+            this.$nextTick(() => {
+                bus.$emit('graph-node:add', { menu, node })
+            })
+            graph.pushStack('add', {
+                before: {},
+                after: graph.operatedItems
+            })
+        },
+        // 节点点击事件监听
+        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)
+            }
+
+            /* 触发是否再画布内的标记方法 */
+            this.handleOutSide(true)
+
+            this.graph.getPluginByName('menuToolBar')?.run('handleClose')
+        },
+        // 画布点击事件
+        handleCanvasClick() {
+            this.$emit('canvasClick')
+            /* 触发是否再画布内的标记方法 */
+            this.handleOutSide(true)
+        },
+        handleOutSide(flag) {
+            this.graph.set('inCanvas', flag)
+        },
+        // 连线数字点击事件
+        handleEdgeClick(e) {
+            let target = e.target
+            if ((target.get('isLabel') || target.get('clickLineShowDialog'))) {
+                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()
+                if (form.samplePriority) {
+                    model.form = { ...model.form, ...form }
+                } else {
+                    model.form = form
+                }
+                graph.updateItem(node, model)
+            }
+        },
+        // 获取页面画布信息
+        getNodeList() {
+            let graph = this.graph
+            return graph.save()
+        },
+        // 设置画布数据
+        setData(data) {
+            let el = this.$refs.container
+            let graph = this.graph
+            if (!graph) {
+                this.inited.then(() => this.setData(data))
+                return
+            }
+            let cavans = {
+                edges: data.edges.map(x=>({...x,label:x.label? x.label: ''})) || [],
+                // 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(() => {
+                tryToFitview(graph,graph.get('fitViewPadding'))
+                graph.zoomTo(1, { x: el.offsetWidth / 2 - 300, y: el.offsetHeight / 2 })
+                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(() => {
+                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, sampleType, hiddenDelete = false }, isPushStack = true) {
+            let graph = this.graph
+            let form = this.$parent.getDefaultFormValue(node._cfg.model.menuKey + 'Branch')
+            let isEvtFlow = node._cfg.model.menuKey === 'evtRespFlow'
+            let isRandomFlow = node._cfg.model.menuKey === 'randomFlow'
+            form.name = name
+            if (sampleType) form.sampleType = sampleType
+            // 随机分流组件的分支，当样本类型为“样本数”时，需要增加 samplePriority 优先级字段
+            // 优先级 1 最高，依次递减
+            if (sampleType === NODE_SAMPLE_TYPE_NUMBER) {
+                form.samplePriority = (order + 1).toString()
+                form.sampleValue = 1 // 样本数默认设置1
+            }
+            form.hiddenDelete = hiddenDelete
+            form.rowId = id
+            let addedNodeY = isEvtFlow ? node.getBBox().y + (order - 1) * 100 : node.getBBox().y + (order - 1) * 50
+            // 避免随机分流分支与自动生成的【其他】分支重合
+            if(isRandomFlow) {
+                const outEdges = node.getOutEdges()
+                const targetYList = outEdges.map(edge => edge.getTarget()?.getBBox().centerY)
+                if(targetYList.includes(addedNodeY)) addedNodeY  += 50
+            }
+            // 向画布添加节点
+            const addedNode = graph.addItem('node', {
+                x: node.getBBox().x + 200,
+                y: addedNodeY,
+                id,
+                menuKey: node._cfg.model.menuKey + 'Branch',
+                label: name,
+                cstonly: this.cstonly,
+                parentNodeId: node._cfg.id,
+                form
+            })
+
+            // 分支与源分流添加一条线
+            const addedEdge = graph.addItem('edge', {
+                source: node._cfg.id,
+                target: id,
+                undeleteable: true,
+                sourceOffset: { x: 32, y: 0 },
+                targetOffset: { x: -80, y: 0 }
+            })
+            graph.collectOperatedItems('node', {
+                ...addedNode.getModel()
+            })
+            graph.collectOperatedItems('edge', {
+                ...addedEdge.getModel()
+            })
+            // if (node._cfg.model.menuKey === 'evtRespFlow') {
+            //     let evtRespFlowBranchNode = graph._cfg.nodes[graph._cfg.nodes.length - 1]
+            //     this.addNewRespNode(evtRespFlowBranchNode, 'Resp')
+            //     // setTimeout(() => {
+            //     // 防止非响应分支与响应分支id重复
+            //     this.addNewRespNode(evtRespFlowBranchNode, 'NoResp')
+            //     // }, 100)
+            // }
+            if (isPushStack) {
+                graph.pushStack('add', {
+                    before: {},
+                    after: graph.operatedItems
+                })
+            }
+        },
+        /**
+         * 新增响应未响应分支
+         * @param {Node} node 原分流节点
+         * @param {String} label 分支名字
+         * @param {String} id 分支 id
+        */
+        addNewRespNode(node, type, isEvt = false) {
+            let graph = this.graph
+            let id = 'node' + new Date().getTime()
+            let form = this.$parent.getDefaultFormValue(node._cfg.model.menuKey + 'Resp')
+            form.rowId = id
+            // 向画布添加节点
+            // 向画布添加节点
+            const addedNode = graph.addItem('node', {
+                x: node.getBBox().x + 250,
+                y: type === 'Resp' ? node.getBBox().y + -10 : node.getBBox().y + 50,
+                id,
+                parentNodeId: node._cfg.id,
+                menuKey: node._cfg.model.menuKey + type,
+                label: type === 'Resp' ? '响应' : '未响应',
+                cstonly: this.cstonly,
+                form
+            })
+
+            // 响应分支与源分支添加一条线
+            const addedEdge = graph.addItem('edge', {
+                source: node._cfg.id,
+                undeleteable: true,
+                target: id,
+                sourceOffset: { x: isEvt ? 40 : 80, y: 0 },
+                targetOffset: { x: -40, y: 0 }
+            })
+            graph.collectOperatedItems('node', {
+                ...addedNode.getModel()
+            })
+            graph.collectOperatedItems('edge', {
+                ...addedEdge.getModel()
+            })
+        },
+        /**
+         * 修改分支节点类型
+         * @param {Node} node 父节点
+         * @param {String} sampleType 分支节点类型
+         */
+        updateTypeBranchNode(node, flowType, id, isPushStack = false) {
+            // 随机默认多一个其它分支
+            if (flowType === 'randomFlow') {
+                let params = {
+                    name: '其他',
+                    id,
+                    order: 3,
+                    sampleType: null,
+                    hiddenDelete: true,
+                    samplePriority: '0' // "其他"分支优先级默认为0,表示最低,后端会单独判断
+                }
+                this.addNewBranchNode(node, params, isPushStack)
+            }
+            // 按事件分流默认
+            if (flowType === 'evtRespFlow') {
+                let params = {
+                    name: '响应',
+                    id,
+                    order: 3,
+                    sampleType: null,
+                    hiddenDelete: true
+                }
+                this.addNewBranchNode(node, params, isPushStack)
+                const otherId = 'node' + (new Date().getTime() + 1)
+                let params2 = {
+                    name: '未响应',
+                    id:otherId,
+                    order: 4,
+                    sampleType: null,
+                    hiddenDelete: true
+                }
+                this.addNewBranchNode(node, params2, isPushStack)
+            }
+        },
+        /**
+         * 修改分支节点样本类型
+         * @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) {
+            const graph = this.graph
+            const node = graph.findById(id)
+            if (!node) {
+                return
+            }
+            const { menuKey } = node.getModel() || {}
+            if (menuKey === "evtRespFlowBranch") {
+                // 删除三级响应分支
+                node.getOutEdges().forEach(edge => {
+                    let edgeTargetNode = edge.getTarget()
+                    graph.collectOperatedItems('node', {
+                        ...edgeTargetNode.getModel()
+                    })
+                    graph.collectOperatedItems('edge', {
+                        ...edge.getModel()
+                    })
+                    this.graph.removeItem(edgeTargetNode)
+                    this.graph.removeItem(edge)
+                })
+            }
+            node.getInEdges().forEach(edge => {
+                graph.collectOperatedItems('edge', {
+                    ...edge.getModel()
+                })
+                this.graph.removeItem(edge)
+            })
+            graph.collectOperatedItems('node', {
+                ...node.getModel()
+            })
+            graph.removeItem(node)
+            graph.pushStack('delete', {
+                before: graph.operatedItems,
+                after: {}
+            })
+        },
+        // 删除分流分支节点时，联动删除父级分流节点的数据
+        handleFlowBranchNodeDelete(id, menuKey) {
+            // 筛选出所有策略节点
+            let nodes = this.graph.getNodes().filter(node => {
+                let model = node.getModel()
+                let flow = menuKey.slice(0, -6)
+                return model.menuKey === flow
+            })
+            // 找到分流分支对应的父级分流节点
+            nodes.forEach(node => {
+                let model = node.getModel()
+                let targetLineIndex = model.form.data.findIndex(row => row.id === id)
+                if (targetLineIndex >= 0) {
+                    // 如果有数据，那么就删掉那一行数据
+                    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 = []
+                }
+            })
+        },
+        // 改变活动详情按钮的禁用状态
+        changeDetailBtnDisabled () {
+            const { detailFold, isShowComponentSide} = this
+            // 折叠
+            if(detailFold) {
+                if(isShowComponentSide) {
+                    this.graph?.getPluginByName('defaultToolBar')?.changeDeatilBtnDiabled(true)
+                }else {
+                    this.graph?.getPluginByName('defaultToolBar')?.changeDeatilBtnDiabled(false)
+                }
+            } else {
+                this.graph?.getPluginByName('defaultToolBar')?.changeDeatilBtnDiabled(true)
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+.icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+}
+
+::v-deep.event-canvas-pro {
+    height: 100%;
+    position: relative;
+    // background-image: url("~@/assets/images/canvas-icon/canvas-bg.png");
+
+    .event-container {
+        height: 100%;
+        min-height: 500px;
+        z-index: 10;
+        background-color: #f4f5f6;
+        user-select: none;
+    }
+
+    .menu-bar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 224px;
+        height: 100%;
+        border-radius: (@space / 2);
+        box-shadow: 0px 2px 6px 0px rgba(99, 114, 145, 0.31);
+        background-color: #fff;
+        z-index: 11;
+        flex-shrink: 0;
+        transition: 0.3s;
+
+        .menu-bar-title {
+            width: 100%;
+            height: 38px;
+            border-bottom: 1px solid #ebeef5;
+            padding: 0 8px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .toggle {
+                cursor: pointer;
+                transition: 0.3s;
+            }
+        }
+
+        .menu-bar-content {
+            padding: 0 @space 80px;
+            overflow-y: auto;
+            height: calc(100% - 115px);
+            transition: 0.3s;
+
+            .menu-bar-type {
+                .menu-type-title {
+                    height: 32px;
+                    line-height: 32px;
+                    margin-top: 16px;
+                    color: #999999;
+                    .line{
+                        flex: 1;
+                        height: 1px;
+                        background-color: #F3F5F7;
+                        margin-left: 4px;
+                    }
+                }
+
+                .menu-type-content {
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .menu-type-item {
+                        width: @icon-col-3;
+                        margin: @space 0;
+
+                        .menu-type-icon {
+                            width: 32px;
+                            height: 32px;
+                            margin: @space auto;
+                            border-radius: @radius;
+                            cursor: pointer;
+                            .flex();
+
+                            .iconfont {
+                                font-size: @space3;
+                            }
+                        }
+
+                        .menu-type-name {
+                            text-align: center;
+                            color: #666;
+                            font-size: 12px;
+                            word-break: break-all;
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+
+    .folding {
+        width: 70px;
+        height: min-content;
+        margin-top: 12px;
+        border-top-right-radius: 8px;
+        border-bottom-right-radius: 8px;
+
+        .toggle {
+            transform: rotateY(180deg);
+        }
+
+        .menu-bar-title {
+            height: 38px;
+            border-bottom: none;
+        }
+
+        .menu-bar-content {
+            display: none;
+        }
+    }
+
+    .graph-item {
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+        user-select: none;
+        color: #fff;
+        padding: 7px;
+        .flex();
+
+        .iconfont {
+            font-size: @space3;
+            pointer-events: none;
+        }
+    }
+
+    .item-branch {
+        justify-content: flex-start;
+        padding: 0;
+
+        .iconfont {
+            width: 30%;
+            height: 100%;
+            margin: 0;
+            padding: 2px;
+        }
+    }
+
+    .item-branch2 {
+        justify-content: flex-start;
+        padding: 0;
+
+        .iconfont {
+            width: 35%;
+            height: 100%;
+            margin: 0;
+            padding: 2px;
+        }
+    }
+
+    .item-orange {
+        background-color: #F5B609;
+    }
+
+    .item-red {
+        background-image: linear-gradient(135deg, #ffb07c, #ff4c2f);
+    }
+
+    .item-sky {
+        background-color: #2AD1F5;
+    }
+
+    .item-blue {
+        background-image: linear-gradient(135deg, #7698F5, #1B4BE2);
+    }
+
+    .item-green {
+        background-color: #4DCE97;
+    }
+
+    .item-lightblue {
+        background-color: #4A85FE;
+    }
+
+    .item-orangered {
+        background-color: #F77151;
+    }
+
+    .item-purple {
+        background-image: linear-gradient(135deg, #997eec, #581d8e);
+    }
+
+    .item-gray {
+        background-image: linear-gradient(135deg, #ddd, #bbb);
+    }
+
+    .icon-merge {
+        width: 24px;
+        height: 24px;
+        background-image: url('../../../assets/images/icon-svg/biaoqian.svg')
+    }
+
+    .icon-maincontent {
+
+        width: 24px;
+        height: 24px;
+        background-image: url('../../../assets/images/icon-svg/biaoqian.svg')
+    }
+
+    .graph-node-label {
+        color: #fff;
+        font-size: 12px;
+        pointer-events: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+        line-height: 1;  
+    }
+
+    .node-main {
+        text-align: center;
+        color: #777;
+    }
+
+    .node-branch,
+    .node-branch2 {
+        -webkit-line-clamp: 1;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 2;
+    }
+
+    .node-branch2 {
+        padding-left: 20px;
+    }
+
+    .graph-edge-label {
+        line-height: 1;
+        border-radius: @radius;
+        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: @radius;
+        padding: (@space / 2) @space;
+        background-color: #fff;
+        display: inline-block;
+        // position: relative;
+        font-size: 8px;
+        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: inherit;
+        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>