yxk-storeroom-system/src/views/components/SecurityDoor.vue

<template>
  <div class="container-wrap">
    <span class="right-top-line" />
    <span class="left-bottom-line" />
    <h3 class="table-title">
      <p class="title-arrow">
        <svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录
      </p>
    </h3>
    <el-table ref="table" style="min-width: 100%;" :height="height" :data="tableData" class="warehose-el-table" stripe>
      <el-table-column prop="update_time" label="时间" align="center" min-width="60">
        <template slot-scope="scope">
          <div>{{ scope.row.update_time | parseTime }}</div>
        </template>
      </el-table-column>
      <el-table-column label="库房" align="center" min-width="30">
        <template>
          档案库
        </template>
      </el-table-column>
      <el-table-column prop="alarmMsg" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
    </el-table>
  </div>
</template>
<script>
import { securitydoor } from '@/api/home/securityDoor/securityDoor'
export default {
  name: 'SecurityDoor',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      tableData: [], // 正在展示的数据
      scrollTimer: null,
      getDataTimer: null
    }
  },
  watch: {
    // 如果 `tableData` 发生改变，这个函数就会运行
    tableData: function(newData, oldData) {
      this.tableRefScroll()
    }
  },
  created() {
    this.getSecuritydoor()
  },
  destroyed() {
    clearInterval(this.scrollTimer)
    this.scrollTimer = null
  },
  methods: {
    // 表格隔行变色
    rowBgColor({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light-blue'
      } else {
        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.scrollTimer = setInterval(() => {
          this.getSecuritydoor()
        }, 1000 * 3 * this.tableData.length)
      }
    },
    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) {
            this.getSecuritydoor()
          } else {
            bodyWrapper.scrollTop += this.displayNum * 40
          }
        }, 1000 * 3 * this.displayNum)
      }
    },
    getSecuritydoor() {
      securitydoor().then((data) => {
        if (data && data.length > 0) {
          this.tableData.splice(0, data.length, ...data)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/lend-manage.scss";
.warehouse-left {
  position: relative;
  h2 {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
  }
}
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #02255f;
}
</style>