1、增加滚动看板

components/CheckData.vue

@@ -17,6 +17,14 @@
           </div>
         </div>
         <div class="table-body">
+
+          <vue-seamless-scroll
+            v-if="dataSource.length"
+            ref="vueSeamless"
+            :data="dataSource"
+            class="seamless-scroll"
+            :class-option="defaultOption"
+          >
             <div class="table-item-body" v-for="item of dataSource">
               <div class="point-name" :style="`width:${tableItemWidthList[0]}%`" :title="item.pointName">{{
                   item.pointName
@@ -71,6 +79,8 @@
                 </div>
               </div>
             </div>
+          </vue-seamless-scroll>
+
         </div>
       </div>
     </div>
@@ -78,8 +88,11 @@
 </template>
 
 <script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+
 export default {
   name: "CheckData",
+  components: {vueSeamlessScroll},
   data() {
     return {
       title: '实时检查数据',
@@ -262,6 +275,20 @@ export default {
       ]
     }
   },
+  computed: {
+    defaultOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+  },
   methods: {
     //判断数值是上升还是下降
     getOddsRatioIcon(val, valType) {
@@ -305,6 +332,7 @@ export default {
     flex: 1;
     padding: 30px 20px 0 20px;
     height: 0;
+
     .table-info {
       width: 100%;
       height: 100%;
@@ -329,7 +357,11 @@ export default {
 
       .table-body {
         height: calc(100% - 77px);
-        overflow-y: auto;
+
+        .seamless-scroll {
+          height: 100%;
+          overflow: hidden;
+        }
 
         .table-item-body {
           height: 77px;
@@ -380,6 +412,7 @@ export default {
     }
   }
 }
+
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
@@ -387,12 +420,12 @@ export default {
 
 ::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   background-color: rgba(21, 77, 160, 0.20);;
 }
 
 ::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   background-color: #d3dce6;
 }