门禁记录和报警记录滚动

src/views/components/SecurityDoor.vue

@@ -39,18 +39,32 @@ export default {
   data() {
     return {
       tableData: [], // 正在展示的数据
-      time: null
+      scrollTimer: null,
+      showComplete: false, // 是否滚动显示完所有数据
+      getDataTimer: null
+    }
+  },
+  watch: {
+    // 如果 `tableData` 发生改变，这个函数就会运行
+    tableData: function(newData, oldData) {
+      this.tableRefScroll()
     }
   },
   created() {
     this.getSecuritydoor()
-    this.time = setInterval(() => {
-      this.getSecuritydoor()
+    this.getDataTimer = setInterval(() => {
+      console.log('SecurityDoor', this.showComplete)
+      if (this.showComplete) {
+        this.getSecuritydoor()
+        this.showComplete = false
+      }
     }, 1000 * 30)
   },
   destroyed() {
-    clearInterval(this.time)
-    this.time = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
+    clearInterval(this.getDataTimer)
+    this.getDataTimer = null
   },
   methods: {
     // 表格隔行变色
@@ -61,6 +75,42 @@ export default {
         return ''
       }
     },
+    // table滚动
+    tableRefScroll() {
+      clearInterval(this.scrollTimer) // 清除定时器
+      const table = this.$refs.table // 获取DOM元素
+      this.wrapperHeight = table.$el.offsetHeight - 30
+      // 组件一页能完整展示的数据条数
+      this.displayNum = Math.floor(this.wrapperHeight / 40)
+      if (this.tableData.length > this.displayNum) {
+        const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
+        this.addTableRefScroll(bodyWrapper)
+        // 鼠标移入
+        bodyWrapper.onmouseover = () => {
+          clearInterval(this.scrollTimer)
+        }
+        // 鼠标移出
+        bodyWrapper.onmouseout = () => {
+          this.addTableRefScroll(bodyWrapper)
+        }
+      } else {
+        this.showComplete = true
+      }
+    },
+    addTableRefScroll(bodyWrapper) {
+      // let scrollTop = bodyWrapper.scrollTop
+      if (this.displayNum && this.displayNum > 0) {
+        this.scrollTimer = setInterval(() => {
+          // scrollTop = bodyWrapper.scrollTop
+          if (bodyWrapper.scrollTop + this.wrapperHeight >= this.tableData.length * 40) {
+            bodyWrapper.scrollTop = 0
+            this.showComplete = true
+          } else {
+            bodyWrapper.scrollTop += this.displayNum * 40
+          }
+        }, 1000 * 3 * this.displayNum)
+      }
+    },
     getSecuritydoor() {
       securitydoor().then((data) => {
         if (data && data.length > 0) {

src/views/components/WarehouseWarning.vue

@@ -50,6 +50,7 @@ export default {
   created() {
     this.getAlarmInfo()
     this.getDataTimer = setInterval(() => {
+      console.log('WarehouseWarning', this.showComplete)
       if (this.showComplete) {
         this.getAlarmInfo()
         this.showComplete = false
@@ -89,6 +90,8 @@ export default {
         bodyWrapper.onmouseout = () => {
           this.addTableRefScroll(bodyWrapper)
         }
+      } else {
+        this.showComplete = true
       }
     },
     addTableRefScroll(bodyWrapper) {