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

<template>
  <div>
    <div class="title">最新入库</div>
    <div class="warehouse-table">
      <!-- <div class="warehouse-table-title">年度物资动态</div> -->
      <!-- 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="type" width="80" label="出入库" align="center" /> -->
        <el-table-column
          show-overflow-tooltip
          prop="zichanmingcheng"
          width="120"
          label="物资名称"
          align="left"
        />
        <el-table-column
          show-overflow-tooltip
          prop="total"
          width="80"
          label="数量"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="suozaicangku_text"
          width="100"
          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>

    <div class="title">最新出库</div>
    <div class="warehouse-table">
      <!-- <div class="warehouse-table-title">年度物资动态</div> -->
      <!-- Element-UI 表格 -->

      <el-table
        :data="currentPageData2"
        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="type" width="80" label="出入库" align="center" /> -->
        <el-table-column
          show-overflow-tooltip
          prop="zichanmingcheng"
          width="120"
          label="物资名称"
          align="left"
        />
        <el-table-column
          show-overflow-tooltip
          prop="total"
          width="80"
          label="数量"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="suozaicangku_text"
          width="100"
          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>
  </div>
</template>

<script>
import { soCharts } from '@/api/charts.js'
export default {
  name: 'WarehouseTable',
  data() {
    return {
      // 模拟数据源，可根据实际接口返回调整结构
      tableData: [], //入库
      tableData2: [], //出库
      pageSize: 3, // 每页显示 3 条数据
      currentPage: 1, // 当前页码
      timer: null, // 定时器标识
      currentPage2: 1, // 当前页码
      timer2: 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)
    },
    currentPageData2() {
      const start = (this.currentPage2 - 1) * this.pageSize
      const end = start + this.pageSize
      return this.tableData2.slice(start, end)
    },
    totalPages2() {
      return Math.ceil(this.tableData2.length / this.pageSize)
    }

  },
  mounted() {
    // 初始化定时器，3 秒切换一次
    this.getChartData()
    // this.startTimer()
  },
  beforeDestroy() {
    // 组件销毁前清除定时器，避免内存泄漏
    this.clearTimer()
    this.clearTimer2()
  },
  methods: {
    async getChartData() {
      const so = await soCharts()
      // 出入库
      const arr = [] // ruku
      const arr2 = [] //chuku
      so.map(item => {
        if (item.jieyongshuliang) {
          arr2.push({
            suozaicangku_text: item.suozaicangku_text,
            type: item.jieyongshuliang ? '出库' : '入库',
            total: item.jieyongshuliang ? item.jieyongshuliang : item.rukushuliang,
            zichanmingcheng: item.zichanmingcheng,
            fenlei_text: item.fenlei_text,
            riqi: item.riqi ? item.riqi : item.created_at.substring(0, 10)
          })
        } else {
          arr.push({
            suozaicangku_text: item.suozaicangku_text,
            type: item.jieyongshuliang ? '出库' : '入库',
            total: item.jieyongshuliang ? item.jieyongshuliang : item.rukushuliang,
            zichanmingcheng: item.zichanmingcheng,
            fenlei_text: item.fenlei_text,
            riqi: item.riqi ? item.riqi : item.created_at.substring(0, 10)
          })
        }
      })
      this.tableData = arr
      this.tableData2 = arr2
      if (this.tableData.length > 0) {
        this.startTimer()
      }
      if (this.tableData2.length > 0) {
        this.startTimer2()
      }
    },
    // 切换到下一页
    nextPage() {
      this.currentPage = (this.currentPage % this.totalPages) + 1
    },
    nextPage2() {
      this.currentPage2 = (this.currentPage2 % this.totalPages2) + 1
    },
    // 启动定时器
    startTimer() {
      this.timer = setInterval(() => {
        this.nextPage()
      }, 3000)
    },
    startTimer2() {
      this.timer2 = setInterval(() => {
        this.nextPage2()
      }, 3000)
    },
    // 清除定时器
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    clearTimer2() {
      if (this.timer2) {
        clearInterval(this.timer2)
        this.timer2 = null
      }
    },
    // 根据行数据返回对应的类名
    getRowClass({ row }) {
      if (row.type === '出库') {
        return 'outbound-row'
      } else if (row.type === '入库') {
        return 'inbound-row'
      }
      return ''
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  color: #6dcde6;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.warehouse-table {
  width: 100%;

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

/* 四角三角形基础样式 */
.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>