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 => {