新增工厂看板滚动

src/views/bpm/vis-page/factoryProductionDashboard.vue

@@ -240,7 +240,12 @@
                   </thead>
                 </table>
 
-                <div class="fp-scroll-body">
+                <div
+                  ref="planScrollBody"
+                  class="fp-scroll-body"
+                  @mouseenter="stopPlanAutoScroll"
+                  @mouseleave="startPlanAutoScroll"
+                >
                   <table class="fp-main-table">
                     <colgroup>
                       <col style="width: 11%" />
@@ -511,6 +516,11 @@
       },
       activeInventoryFilter() {
         this.fetchInventoryData();
+      },
+      filteredPlanRows() {
+        this.$nextTick(() => {
+          this.restartPlanAutoScroll();
+        });
       }
     },
     data() {
@@ -520,6 +530,7 @@
         _initLayout: false,
         resizeTimer: null,
         updateTimer: null,
+        planAutoScrollTimer: null,
         date: '',
         time: '',
         week: '',
@@ -602,11 +613,13 @@
       );
       this.$nextTick(() => {
         this.isFlag = true;
+        this.startPlanAutoScroll();
       });
     },
     beforeDestroy() {
       clearInterval(this.updateTimer);
       clearTimeout(this.resizeTimer);
+      this.stopPlanAutoScroll();
       window.removeEventListener('resize', this.handleWindowResize);
       document.removeEventListener(
         'fullscreenchange',
@@ -631,6 +644,34 @@
         const isOverflowing = el.scrollWidth > el.clientWidth;
         el.title = isOverflowing ? text : '';
       },
+      restartPlanAutoScroll() {
+        this.stopPlanAutoScroll();
+        this.startPlanAutoScroll();
+      },
+      startPlanAutoScroll() {
+        this.stopPlanAutoScroll();
+        const scrollBody = this.$refs.planScrollBody;
+        if (!scrollBody) return;
+        if (scrollBody.scrollHeight <= scrollBody.clientHeight + 2) {
+          scrollBody.scrollTop = 0;
+          return;
+        }
+        this.planAutoScrollTimer = setInterval(() => {
+          const maxScrollTop = scrollBody.scrollHeight - scrollBody.clientHeight;
+          if (maxScrollTop <= 0) return;
+          if (scrollBody.scrollTop >= maxScrollTop - 1) {
+            scrollBody.scrollTop = 0;
+            return;
+          }
+          scrollBody.scrollTop += 1;
+        }, 40);
+      },
+      stopPlanAutoScroll() {
+        if (this.planAutoScrollTimer) {
+          clearInterval(this.planAutoScrollTimer);
+          this.planAutoScrollTimer = null;
+        }
+      },
       handleFullscreenChange() {
         this.isFlag = false;
         this.$nextTick(() => {