update 思维导图

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')
     }
   }
 }

src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue

@@ -4,7 +4,7 @@
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
           <a-col :md="6" :sm="8">
-            <!--编号-->
+            <!--            节点名称-->
             <a-form-item :label="$t('businessSupport.standardizationActivity.nodeName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-select
                 show-search
@@ -33,7 +33,7 @@
         </a-row>
       </a-form>
     </div>
-    <mind-map dom-id="mountNode" :map-data="data" map-data-key-field="name" />
+    <mind-map ref="mindMap" dom-id="mountNode" :map-data="data" map-data-key-field="name" />
   </a-card>
 </template>
 
@@ -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 => {