!526 Traceability page, full data and sort button violent click event code processing optimization

Merge pull request !526 from 秦君艳/databutton

mindinsight/ui/src/views/train-manage/data-traceback.vue

@@ -338,6 +338,9 @@ import Echarts from 'echarts';
 export default {
   data() {
     return {
+      tableSortTimer: null,
+      showAllTimer: null,
+      unhideTimer: null,
       loading: true,
       errorData: true,
       tagDialogShow: false,
@@ -363,6 +366,7 @@ export default {
       recordsNumber: 0,
       // Number of displayed records.
       showNumber: 0,
+      delayTime: 500,
       selectArrayValue: [],
       customizedColumnOptions: [],
       // Set the type of customized
@@ -852,6 +856,11 @@ export default {
      * Unhide
      */
     unhideRecords() {
+      if (this.unhideTimer) {
+        clearTimeout(this.unhideTimer);
+        this.unhideTimer = null;
+      }
+      this.unhideTimer = setTimeout(() => {
         this.showEchartPic = true;
         this.$refs.table.clearSelection();
         if (this.parallelEchart) {
@@ -883,6 +892,7 @@ export default {
             this.tableFilter,
         );
         this.queryLineagesData(params);
+      }, this.delayTime);
     },
     /**
      * Input search filtering in the select module
@@ -1579,6 +1589,11 @@ export default {
      */
     echartShowAllData() {
       // The first page is displayed.
+      if (this.showAllTimer) {
+        clearTimeout(this.showAllTimer);
+        this.showAllTimer = null;
+      }
+      this.showAllTimer = setTimeout(() => {
         this.initOver = false;
         this.echartNoData = false;
         this.showEchartPic = true;
@@ -1595,6 +1610,7 @@ export default {
         }
         this.$refs.table.clearSelection();
         this.init();
+      }, this.delayTime);
     },
 
     /**
@@ -1649,6 +1665,11 @@ export default {
      * @param {Object} data
      */
     tableSortChange(data) {
+      if (this.tableSortTimer) {
+        clearTimeout(this.tableSortTimer);
+        this.tableSortTimer = null;
+      }
+      this.tableSortTimer = setTimeout(() => {
         this.sortInfo.sorted_name = data.prop;
         this.sortInfo.sorted_type = data.order;
         const params = {};
@@ -1668,6 +1689,7 @@ export default {
         }
         params.body = Object.assign({}, tempParam, this.tableFilter);
         this.queryLineagesData(params);
+      }, this.delayTime);
     },
 
     /**
@@ -1946,6 +1968,9 @@ export default {
    * Destroy the page
    */
   destroyed() {
+    this.tableSortTimer = null;
+    this.showAllTimer = null;
+    this.unhideTimer = null;
     if (this.dataCheckedSummary && this.dataCheckedSummary.length) {
       const summaryDirList = [];
       this.dataCheckedSummary.forEach((item) => {

mindinsight/ui/src/views/train-manage/model-traceback.vue

@@ -365,6 +365,8 @@ export default {
   watch: {},
   data() {
     return {
+      sortChangeTimer: null,
+      unhideRecordsTimer: null,
       tagDialogShow: false,
       errorData: true,
       tagScope: {},
@@ -375,6 +377,7 @@ export default {
       // Number of data records returned by the interface.
       recordsNumber: 0,
       showNumber: 0,
+      delayTime: 500,
       showEchartPic: true,
       hideRecord: false,
       hidenDirChecked: [],
@@ -1430,6 +1433,11 @@ export default {
      * Unhide
      */
     unhideRecords() {
+      if (this.unhideRecordsTimer) {
+        clearTimeout(this.unhideRecordsTimer);
+        this.unhideRecordsTimer = null;
+      }
+      this.unhideRecordsTimer = setTimeout(() => {
         this.showEchartPic = true;
         this.$refs.table.clearSelection();
         this.$store.commit('setHidenDirChecked', []);
@@ -1482,6 +1490,7 @@ export default {
               this.errorData = true;
             },
         );
+      }, this.delayTime);
     },
 
     /**
@@ -1489,6 +1498,11 @@ export default {
      * @param {Object} column current column
      */
     sortChange(column) {
+      if (this.sortChangeTimer) {
+        clearTimeout(this.sortChangeTimer);
+        this.sortChangeTimer = null;
+      }
+      this.sortChangeTimer = setTimeout(() => {
         this.sortInfo.sorted_name = column.prop;
         this.sortInfo.sorted_type = column.order;
         this.recordsNumber = 0;
@@ -1539,6 +1553,7 @@ export default {
             .catch(() => {
               this.errorData = true;
             });
+      }, this.delayTime);
     },
 
     /**
@@ -1986,6 +2001,8 @@ export default {
    * Destroy the page
    */
   destroyed() {
+    this.sortChangeTimer = null;
+    this.unhideRecordsTimer = null;
     if (this.checkedSummary.length) {
       const tempList = [];
       this.checkedSummary.forEach((item) => {