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: [], // 正在展示的数据
      time: null
    }
  },
  created() {
    this.getSecuritydoor()
    this.time = setInterval(() => {
      this.getSecuritydoor()
    }, 1000 * 30)
  },
  destroyed() {
    clearInterval(this.time)
    this.time = null
  },
  methods: {
    // 表格隔行变色
    rowBgColor({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light-blue'
      } else {
        return ''
      }
    },
    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>