diff --git a/src/components/MindMap.vue b/src/components/MindMap.vue index 22f3f7ba..abe42bbf 100644 --- a/src/components/MindMap.vue +++ b/src/components/MindMap.vue @@ -127,13 +127,24 @@ export default { attrs: { x: this.nodeHeight / 2, y: this.nodeHeight / 2, + width: this.nodeWidth + NODE_ICON_MARGIN + this.expendCollapseIconR, + height: this.nodeHeight + }, + name: 'rect-shape' + }) + + // 有边框和背景色的box + group.addShape('rect', { + attrs: { + x: 0, + y: 0, width: this.nodeWidth, height: this.nodeHeight, radius: this.nodeHeight / 2, fill: nodeStyle.bg, stroke: nodeStyle.stroke }, - name: 'rect-shape' + name: 'rect-content' }) // 文本的部分 @@ -151,23 +162,27 @@ export default { textAlign: 'center', textBaseline: 'middle', fill: nodeStyle.color - } + }, + name: 'rect-text' }) + + // 处理展开收起图标 const hasChildren = cfg.children && cfg.children.length > 0 if (hasChildren) { - // 展开收起 group.addShape('marker', { attrs: { - x: this.nodeWidth + NODE_ICON_MARGIN + this.expendCollapseIconR, + x: this.nodeWidth + NODE_ICON_MARGIN, y: this.nodeHeight / 2, r: this.expendCollapseIconR, symbol: COLLAPSE_ICON, stroke: '#666', lineWidth: 2 }, + name: 'expend-collapse', className: 'collapse-icon' }) } + nodeContainer.attr({ x: 0, y: 0, @@ -175,6 +190,26 @@ export default { height: this.nodeHeight }) return nodeContainer + }, + setState (name, value, item) { + console.log(item) + const group = item.getContainer() + const nodeDom = group.get('children') + const nodeBox = nodeDom[1] + const nodeText = nodeDom[2] + if (name === 'selected') { + if (value) { + nodeBox.attr('fill', '#D52C26') + nodeBox.attr('stroke', '#D52C26') + nodeText.attr('fill', '#FFFFFF') + } else { + const nodeColorIndex = item._cfg.model.depth % NODE_COLOR.length + const nodeStyle = NODE_COLOR[nodeColorIndex] + nodeBox.attr('fill', nodeStyle.bg) + nodeBox.attr('stroke', nodeStyle.stroke) + nodeText.attr('fill', nodeStyle.color) + } + } } }, 'single-shape') this.graph = new G6.TreeGraph({ @@ -182,20 +217,7 @@ export default { width: document.getElementById(this.domId).clientWidth, height: document.getElementById(this.domId).clientHeight, modes: { - default: [{ - type: 'collapse-expand', - onChange: function onChange (item, collapsed) { - const data = item.get('model') - const icon = item.get('group').findByClassName('collapse-icon') - if (collapsed) { - icon.attr('symbol', EXPAND_ICON) - } else { - icon.attr('symbol', COLLAPSE_ICON) - } - data.collapsed = collapsed - return true - } - }, 'drag-canvas', 'zoom-canvas'] + default: ['drag-canvas', 'zoom-canvas'] }, defaultNode: { type: 'tree-node', @@ -204,7 +226,12 @@ export default { defaultEdge: { type: 'cubic-horizontal', style: { - stroke: '#A3B1BF' + stroke: '#A3B1BF', + endArrow: { + path: G6.Arrow.circle(2), + d: 0, + fill: '#A3B1BF' + } } }, layout: { @@ -227,6 +254,28 @@ export default { this.graph.data(this.data) this.graph.render() this.graph.fitView() + // 展开收起事件 + this.graph.on('expend-collapse:click', (event) => { + const { item } = event + item.getModel().collapsed = !item.getModel().collapsed + // this.graph.setItemState(item, 'collapsed', item.getModel().collapsed) + this.graph.refreshItem(item) + this.graph.layout() + }) + // 点击选中 + this.graph.on('rect-content:click', (event) => { + this.handleSelectedNode(event) + }) + this.graph.on('rect-text:click', (event) => { + this.handleSelectedNode(event) + }) + }, + handleSelectedNode (event) { + const { item } = event + item.getModel().selected = !item.getModel().selected + this.graph.setItemState(item, 'selected', item.getModel().selected) + this.graph.refreshItem(item) + this.graph.layout() }, searchNode (nodeId) { const item = this.graph.findById(nodeId) diff --git a/src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue b/src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue index 5a88a1e0..ccd1391c 100644 --- a/src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue +++ b/src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue @@ -16,8 +16,7 @@ :filter-option="false" :not-found-content="null" @search="handleSearch" - @change="handleChange" - > + @change="handleChange"> {{ d.name }}