patrol-wzgl-web/src/views/jsc/components/WarehouseTable.vue

<template>
  <div class="warehouse-table">
    <!-- Element-UI 表格 -->
    <el-table :data="currentPageData" style="width: 100%" height="200" :row-class-name="getRowClass"
      :cell-style="{background: 'transparent', border: 'none'}" :header-cell-class-name="'headerRow'">
      <el-table-column show-overflow-tooltip prop="suozaicangku_text"  width="100" label="仓库" align="left" />
      <el-table-column show-overflow-tooltip prop="type" width="80" label="出入库" align="center" />
      <el-table-column show-overflow-tooltip prop="total" width="80" label="数量" align="center" />
      <el-table-column show-overflow-tooltip prop="fenlei_text" width="120" label="种类" align="left" />
      <el-table-column show-overflow-tooltip prop="riqi" label="时间" width="100" align="left" />
    </el-table>

    <!-- 四个角的三角形 -->
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>

  </div>
</template>

<script>
  import {
    soCharts
  } from '@/api/charts.js'
  export default {
    name: 'WarehouseTable',
    data() {
      return {
        // 模拟数据源，可根据实际接口返回调整结构
        tableData: [],
        pageSize: 3, // 每页显示 3 条数据
        currentPage: 1, // 当前页码
        timer: null // 定时器标识
      }
    },
    computed: {
      // 计算当前页数据
      currentPageData() {
        const start = (this.currentPage - 1) * this.pageSize
        const end = start + this.pageSize
        return this.tableData.slice(start, end)
      },
      // 计算总页数
      totalPages() {
        return Math.ceil(this.tableData.length / this.pageSize)
      }
    },
    mounted() {
      // 初始化定时器，3 秒切换一次
      this.getChartData()
      // this.startTimer()
    },
    beforeDestroy() {
      // 组件销毁前清除定时器，避免内存泄漏
      this.clearTimer()
    },
    methods: {
      async getChartData() {
        const so = await soCharts()
        // 出入库
        let arr = []
        so.map(item=>{
          arr.push({
            suozaicangku_text:item.suozaicangku_text,
            type:item.jieyongshuliang?'出库':'入库',
            total:item.jieyongshuliang?item.jieyongshuliang:item.rukushuliang,
            fenlei_text:item.fenlei_text,
            riqi:item.riqi?item.riqi:item.created_at.substring(0,10)
          })
        })
        this.tableData = arr
        if(this.tableData.length>0){
          this.startTimer()
        }
      },
      // 切换到下一页
      nextPage() {
        this.currentPage = this.currentPage % this.totalPages + 1
      },
      // 启动定时器
      startTimer() {
        this.timer = setInterval(() => {
          this.nextPage()
        }, 3000)
      },
      // 清除定时器
      clearTimer() {
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
      },
      // 根据行数据返回对应的类名
      getRowClass({
        row
      }) {
        if (row.type === '出库') {
          return 'outbound-row';
        } else if (row.type === '入库') {
          return 'inbound-row';
        }
        return '';
      }
    }
  }
</script>

<style scoped lang="scss">
  .warehouse-table {
    width: 100%;

    position: relative;
    /* 可根据实际调整宽度 */
    margin: 0 auto;
    border: 1px solid #6dcde6;
    box-shadow: inset 0 0 10px 2px #6dcde6;
    padding: 20px;
    margin-bottom:20px;
  }

  /* 四角三角形基础样式 */
  .corner {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    /* 确保显示在表格内容上方 */
  }

  /* 左上角 */
  .top-left {
    top: 3px;
    left: 3px;
    border-width: 10px 10px 0 0;
    border-color: #6dcde6 transparent transparent transparent;
  }

  /* 右上角 */
  .top-right {
    top: 3px;
    right: 3px;
    border-width: 0 10px 10px 0;
    border-color: transparent #6dcde6 transparent transparent;
  }

  /* 左下角 */
  .bottom-left {
    bottom: 3px;
    left: 3px;
    border-width: 10px 0 0 10px;
    border-color: transparent transparent transparent #6dcde6;
  }

  /* 右下角 */
  .bottom-right {
    bottom: 3px;
    right: 3px;
    border-width: 0 0 10px 10px;
    border-color: transparent transparent #6dcde6 transparent;
  }

  ::v-deep .el-table{
    background: transparent !important;
  }
  ::v-deep .el-table tr {
    background: transparent !important;
  }

  ::v-deep .headerRow {
    background: transparent !important;
    color: #fff;
    border: none!important;
  }

  /* 出库行样式 */
  ::v-deep .el-table .outbound-row {
    background-color: #084d82 !important;
    /* 浅红色背景 */
    color: #2fb9d6 !important;
    /* 红色文字 */
  }

  /* 入库行样式 */
  ::v-deep .el-table .inbound-row {
    background-color: #37548c !important;
    /* 浅绿色背景 */
    color: #ef830f !important;
    /* 绿色文字 */
  }
  ::v-deep .el-table .el-table__cell{
    padding:10px 0;
  }
  ::v-deep .el-table__body {
      border-collapse: separate !important;
      border-spacing: 0 5px !important;
      table-layout: auto !important;
    }
  ::v-deep .el-table,.el-table__expanded-cell {
      background-color: transparent !important;
  }
  ::v-deep .el-table--enable-row-transition .el-table__body td,.el-table .cell {
    background-color: transparent;
  }
  /* 移除表格边框 */
  // ::v-deep .el-table, .el-table__header-wrapper, .el-table__body-wrapper {
  //   border: none !important;
  // }

  // ::v-deep .el-table__header th {
  //   border-bottom: none !important;
  // }

  // ::v-deep .el-table__body td {
  //   border-bottom: none !important;
  // }
</style>