hp-storeroom-system/src/views/components/AccessDoor.vue

<template>
  <div class="container-wrap">
    <span class="right-top-line" />
    <span class="left-bottom-line" />
    <h3 class="table-title" @click="toPage">
      <p class="title-arrow" style="cursor: pointer;">
        <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 @row-click="toPage">
      <el-table-column prop="time" align="center" label="时间" min-width="80">
        <template slot-scope="scope">
          <div>{{ scope.row.time | parseTime }}</div>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" :show-overflow-tooltip="true" width="50">
        <template slot-scope="scope">
          <div>{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="minorName" label="说明" align="center" :show-overflow-tooltip="true" min-width="80" />
    </el-table>
  </div>
</template>
<script>
// import { accessDoor } from '@/api/home/accessDoor/accessDoor'
import { FetchInitHikDoorLog } from '@/api/system/zkt'
import { mapGetters } from 'vuex'
export default {
  name: 'AccessDoor',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    size: {
      type: String,
      default: '30'
    }
  },
  data() {
    return {
      tableData: [], // 正在展示的数据
      scrollTimer: null,
      getDataTimer: null
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  watch: {
    // 如果 `tableData` 发生改变，这个函数就会运行
    tableData: function(newData, oldData) {
      this.tableRefScroll()
    }
  },
  created() {
    this.getAccessdoor()
  },
  destroyed() {
    clearInterval(this.scrollTimer)
    this.scrollTimer = null
  },
  methods: {
    toPage() {
      if (this.roles.includes('admin') || this.roles.includes('logManage:list')) {
        this.$router.push({
          name: 'LogManage',
          params: {
            locationIndex: 3
          }
        })
      } else {
        this.$message({
          message: '当前账号没有权限',
          type: 'warning'
        })
      }
    },
    // 表格隔行变色
    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.getAccessdoor()
        }, 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) {
            bodyWrapper.scrollTop = 0
            this.getAccessdoor()
          } else {
            bodyWrapper.scrollTop += this.displayNum * 40
          }
        }, 1000 * 3 * this.displayNum)
      }
    },
    getAccessdoor() {
      FetchInitHikDoorLog({ page: 0, size: this.size }).then((data) => {
        if (data.content && data.content.length > 0) {
          this.tableData.splice(0, data.content.length, ...data.content)
        }
      })
    }
  }
}
</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>