After the data traceability switches the page number, the sorting parameter is incorrect.

mindinsight/ui/src/assets/images/icon-down.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>10备份</title>
+    <desc>Created with Sketch.</desc>
+    <g id="10备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M12.6700332,9.66417786 L14,10.9951335 L10.0080998,15 L6.0161996,11.0051332 L7.34616635,9.67417753 L10.0030999,12.3330889 L12.6700332,9.66417786 Z M12.6508337,6 L13.9818005,7.32995567 L9.99290018,11.3248225 L9.99090023,11.3238225 L9.98990025,11.3248225 L6,7.32995567 L7.32996675,6 L9.99090023,8.66191127 L12.6508337,6 Z" id="合并形状备份-3" fill="#00A5A7"></path>
+        <rect id="矩形" stroke="#CCCCCC" x="0.5" y="0.5" width="19" height="19" rx="2"></rect>
+    </g>
+</svg>
\ No newline at end of file

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

@@ -195,14 +195,12 @@ limitations under the License.
             <template slot-scope="scope">
               <div @click="showAllIcon(scope.row,scope)"
                    class="tag-icon-container">
-                <i v-if="!scope.row.tag"
-                   class="el-icon-arrow-down"></i>
-                <img :id="scope.row.summary_dir"
-                     v-if="scope.row.tag"
+                <img v-if="scope.row.tag"
+                     :class="'img' + scope.$index"
                      :src="require('@/assets/images/icon' + scope.row.tag + '.svg')">
                 <img v-else
-                     :id="scope.row.summary_dir"
-                     :src="''">
+                     :class="'img' + scope.$index"
+                     :src="require('@/assets/images/icon-down.svg')">
               </div>
             </template>
           </el-table-column>
@@ -289,14 +287,14 @@ limitations under the License.
           <el-button type="primary"
                      size="mini"
                      class="custom-btn"
-                     @click="iconChangeSave(tagScope.row)"
+                     @click="iconChangeSave(tagScope)"
                      plain>
             {{ $t('public.sure')}}
           </el-button>
           <el-button type="primary"
                      size="mini"
                      class="custom-btn"
-                     @click="clearIcon(tagScope.row)"
+                     @click="clearIcon(tagScope)"
                      plain>
             {{ $t('public.clear')}}
           </el-button>
@@ -587,20 +585,21 @@ export default {
 
     /**
      * Save the modification of the icon
-     * @param {Object} row
+     * @param {Object} scope
      */
-    iconChangeSave(row) {
+    iconChangeSave(scope) {
       this.tagDialogShow = false;
-      if (row.tag === this.iconValue || this.iconValue === 0) {
+      if (scope.row.tag === this.iconValue || this.iconValue === 0) {
         return;
       }
       this.tagScope.row.tag = this.iconValue;
-      const id = row.summary_dir;
-      const img = document.getElementById(id);
-      img.src = require('@/assets/images/icon' + this.iconValue + '.svg');
-
+      const imgDom = document.querySelectorAll('.img' + scope.$index);
+      imgDom.forEach((item) => {
+        item.src = require('@/assets/images/icon' + this.iconValue + '.svg');
+      });
+      this.$forceUpdate();
       const params = {
-        train_id: row.summary_dir,
+        train_id: scope.row.summary_dir,
         body: {
           tag: this.tagScope.row.tag,
         },
@@ -610,9 +609,9 @@ export default {
 
     /**
      * clear icon
-     * @param {Object} row
+     * @param {Object} scope
      */
-    clearIcon(row) {
+    clearIcon(scope) {
       const classWrap = event.path.find((item) => {
         return item.className === 'icon-dialog';
       });
@@ -623,10 +622,12 @@ export default {
       this.tagDialogShow = false;
       this.iconValue = 0;
       this.tagScope.row.tag = 0;
-      const img = document.getElementById(row.summary_dir);
-      img.src = '';
+      const imgDom = document.querySelectorAll('.img' + scope.$index);
+      imgDom.forEach((item) => {
+        item.src = require('@/assets/images/icon-down.svg');
+      });
       const params = {
-        train_id: row.summary_dir,
+        train_id: scope.row.summary_dir,
         body: {
           tag: 0,
         },
@@ -1588,6 +1589,12 @@ export default {
       this.selectArrayValue = [];
       this.basearr = [];
       this.pagination.currentPage = 1;
+      this.summaryDirList = this.$store.state.summaryDirList;
+      if (this.summaryDirList) {
+        this.tableFilter.summary_dir = {in: this.summaryDirList};
+      } else {
+        this.tableFilter.summary_dir = undefined;
+      }
       params.body = Object.assign({}, tempParam, this.tableFilter);
       this.queryLineagesData(params);
     },
@@ -1992,10 +1999,9 @@ export default {
     margin: 16px 10px 18px;
   }
   .tag-icon-container {
-    width: 22px;
-    height: 22px;
+    width: 21px;
+    height: 21px;
     border: 1px solid #e6e6e6;
-    background-color: white;
     cursor: pointer;
     border-radius: 2px;
   }

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

@@ -254,14 +254,12 @@ limitations under the License.
             <template slot-scope="scope">
               <div @click="showAllIcon(scope.row,scope)"
                    class="tag-icon-container">
-                <i v-if="!scope.row.tag"
-                   class="el-icon-arrow-down"></i>
-                <img :id="scope.row.summary_dir"
-                     v-if="scope.row.tag"
+                <img v-if="scope.row.tag"
+                     :class="'img' + scope.$index"
                      :src="require('@/assets/images/icon' + scope.row.tag + '.svg')">
-                <img :id="scope.row.summary_dir"
-                     v-else
-                     :src="''">
+                <img v-else
+                     :class="'img' + scope.$index"
+                     :src="require('@/assets/images/icon-down.svg')">
               </div>
             </template>
           </el-table-column>
@@ -318,14 +316,14 @@ limitations under the License.
           <el-button type="primary"
                      size="mini"
                      class="custom-btn"
-                     @click="iconChangeSave(tagScope.row)"
+                     @click="iconChangeSave(tagScope)"
                      plain>
             {{$t('public.sure')}}
           </el-button>
           <el-button type="primary"
                      size="mini"
                      class="custom-btn"
-                     @click="clearIcon(tagScope.row)"
+                     @click="clearIcon(tagScope)"
                      plain>
             {{$t('public.clear')}}
           </el-button>
@@ -526,19 +524,21 @@ export default {
     },
     /**
      * Save the modification of the icon.
-     * @param {Object} row
+     * @param {Object} scope
      */
-    iconChangeSave(row) {
+    iconChangeSave(scope) {
       this.tagDialogShow = false;
-      if (row.tag === this.iconValue || this.iconValue === 0) {
+      if (scope.row.tag === this.iconValue || this.iconValue === 0) {
         return;
       }
       this.tagScope.row.tag = this.iconValue;
-      const id = row.summary_dir;
-      const img = document.getElementById(id);
-      img.src = require('@/assets/images/icon' + this.iconValue + '.svg');
+      const imgDom = document.querySelectorAll('.img' + scope.$index);
+      imgDom.forEach((item) => {
+        item.src = require('@/assets/images/icon' + this.iconValue + '.svg');
+      });
+      this.$forceUpdate();
       const params = {
-        train_id: row.summary_dir,
+        train_id: scope.row.summary_dir,
         body: {
           tag: this.tagScope.row.tag,
         },
@@ -548,9 +548,9 @@ export default {
 
     /**
      * clear icon
-     * @param {Object} row
+     * @param {Object} scope
      */
-    clearIcon(row) {
+    clearIcon(scope) {
       const classWrap = event.path.find((item) => {
         return item.className === 'icon-dialog';
       });
@@ -561,10 +561,12 @@ export default {
       this.tagDialogShow = false;
       this.iconValue = 0;
       this.tagScope.row.tag = 0;
-      const img = document.getElementById(row.summary_dir);
-      img.src = '';
+      const imgDom = document.querySelectorAll('.img' + scope.$index);
+      imgDom.forEach((item) => {
+        item.src = require('@/assets/images/icon-down.svg');
+      });
       const params = {
-        train_id: row.summary_dir,
+        train_id: scope.row.summary_dir,
         body: {
           tag: 0,
         },
@@ -2058,10 +2060,9 @@ export default {
     width: 140px;
   }
   .tag-icon-container {
-    width: 22px;
-    height: 22px;
+    width: 21px;
+    height: 21px;
     border: 1px solid #e6e6e6;
-    background-color: white;
     cursor: pointer;
     border-radius: 2px;
   }