diff --git a/src/components/MindMap.vue b/src/components/MindMap.vue index cdbaf567..d0f2907d 100644 --- a/src/components/MindMap.vue +++ b/src/components/MindMap.vue @@ -89,7 +89,8 @@ export default { }, data () { return { - data: {} + data: {}, + graph: null } }, watch: { @@ -186,12 +187,12 @@ export default { x: 0, y: 0, width: this.nodeWidth + this.expendCollapseIconR + NODE_ICON_MARGIN, - height: this.nodeHeight, + height: this.nodeHeight }) return nodeContainer } }, 'single-shape') - const graph = new G6.TreeGraph({ + this.graph = new G6.TreeGraph({ container: this.domId, modes: { default: [{ @@ -236,9 +237,43 @@ export default { G6.Util.traverseTree(this.data, (item) => { item.id = item[this.mapDataKeyField] }) - graph.data(this.data) - graph.render() - graph.fitView() + this.graph.data(this.data) + this.graph.render() + this.graph.fitView() + }, + searchNode (nodeId) { + const item = this.graph.findById(nodeId) + const matrix = item.get('group').getMatrix() + const point = { + x: matrix[6], + y: matrix[7] + } + const width = this.graph.get('width') + const height = this.graph.get('height') + // 找到视口中心 + var viewCenter = { + x: width / 2, + y: height / 2 + } + var modelCenter = this.graph.getPointByCanvas(viewCenter.x, viewCenter.y) + var viewportMatrix = this.graph.get('group').getMatrix() + // 画布平移的目标位置,最终目标是graph.translate(dx, dy); + var dx = (modelCenter.x - point.x) * viewportMatrix[0] + var dy = (modelCenter.y - point.y) * viewportMatrix[4] + var lastX = 0 + var lastY = 0 + var newX = void 0 + var newY = void 0 + // 动画每次平移一点,直到目标位置 + this.graph.get('canvas').animate({ + onFrame: (ratio) => { + newX = dx * ratio + newY = dy * ratio + this.graph.translate(newX - lastX, newY - lastY) + lastX = newX + lastY = newY + } + }, 300, 'easeCubic') } } } diff --git a/src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue b/src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue index da5a2e86..08a543e0 100644 --- a/src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue +++ b/src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue @@ -4,7 +4,7 @@ - + - + @@ -54,6 +54,7 @@ export default { }, queryParam: {}, nodeNameList: [], // 查询的下拉数据 + defaultNodeNameList: [], // 查询的下拉数据 data: { name: '五十个字啊五十个字啊五十个字啊五十个字啊五十个字啊', children: [ @@ -164,12 +165,11 @@ export default { } }, created () { - this.treeToArr([this.data], null, this.nodeNameList) - console.log(this.nodeNameList) + this.treeToArr([this.data], null, this.defaultNodeNameList) }, methods: { - handleSearch () { - + handleSearch (value) { + this.nodeNameList = this.defaultNodeNameList.filter(tt => tt.name.indexOf(value) !== -1) }, handleChange () { @@ -178,7 +178,7 @@ export default { }, searchQuery () { - + this.$refs.mindMap.searchNode(this.queryParam.nodeName) }, treeToArr (data, pid = null, res) { data.forEach(item => {