FT501-WMS/ruoyi-ui/src/views/index.vue

<template>
  <div class="app-container">
    <div class="row">
      <!-- 未完成入库任务概览 -->
      <div class="col-sm-6" style="height: 45vh; padding: 10px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>未完成入库任务概览</span>
          </div>
          <el-table
            :data="table1Data"
            style="width: 100%"
            :height="tableHeight"
            v-loading="loading1">
            <el-table-column prop="workValue" label="任务键值" />
            <el-table-column prop="workName" label="未完成入库任务" />
            <el-table-column prop="workNum" label="全部未完成数量">
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.workNum).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column prop="by1" label="今日未完成数量">
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.by1).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
          </el-table>
        </el-card>
      </div>

      <!-- 已完成入库任务概览 -->
      <div class="col-sm-6" style="height: 45vh; padding: 10px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>已完成入库任务概览</span>
          </div>
          <el-table
            :data="table2Data"
            style="width: 100%"
            :height="tableHeight"
            v-loading="loading2">
            <el-table-column prop="workValue" label="任务键值" />
            <el-table-column prop="workName" label="已完成入库任务" />
            <el-table-column prop="workNum" label="全部已完成数量">
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.workNum).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column prop="by1" label="今日已完成数量">
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.by1).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
          </el-table>
        </el-card>
      </div>

      <!-- 未完成出库任务概览 -->
      <div class="col-sm-6" style="height: 45vh; padding: 10px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>未完成出库任务概览</span>
          </div>
          <el-table
            :data="table3Data"
            style="width: 100%"
            :height="tableHeight"
            v-loading="loading3">
            <el-table-column prop="workValue" label="任务键值" />
            <el-table-column prop="workName" label="未完成出库任务" />
            <el-table-column prop="workNum" label="全部未完成数量">
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.workNum).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column prop="by1" label="今日未完成数量">
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.by1).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
          </el-table>
        </el-card>
      </div>

      <!-- 已完成出库任务概览 -->
      <div class="col-sm-6" style="height: 45vh; padding: 10px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>已完成出库任务概览</span>
          </div>
          <el-table
            :data="table4Data"
            style="width: 100%"
            :height="tableHeight"
            v-loading="loading4">
            <el-table-column prop="workValue" label="任务键值" />
            <el-table-column prop="workName" label="已完成出库任务" />
            <el-table-column prop="workNum" label="全部已完成数量">
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.workNum).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column prop="by1" label="今日已完成数量">
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.by1).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { listWork1, listWork2, listWork3, listWork4 } from '@/api/work'

export default {
  name: 'Index',
  data() {
    return {
      // 表格数据
      table1Data: [],
      table2Data: [],
      table3Data: [],
      table4Data: [],
      // 加载状态
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      // 表格高度
      tableHeight: '35vh',
      // 定时器
      timer: null
    }
  },
  created() {
    this.getList()
    // 开启定时刷新
    this.timer = setInterval(this.getList, 10000)
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    /** 获取数据列表 */
    getList() {
      this.loading1 = true
      this.loading2 = true
      this.loading3 = true
      this.loading4 = true

      // 获取未完成入库任务
      listWork3().then(response => {
        this.table1Data = response.rows
        this.loading1 = false
      })

      // 获取已完成入库任务
      listWork1().then(response => {
        this.table2Data = response.rows
        this.loading2 = false
      })

      // 获取未完成出库任务
      listWork4().then(response => {
        this.table3Data = response.rows
        this.loading3 = false
      })

      // 获取已完成出库任务
      listWork2().then(response => {
        this.table4Data = response.rows
        this.loading4 = false
      })
    }
  }
}
</script>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.col-sm-6 {
  width: 50%;
  box-sizing: border-box;
}
.box-card {
  height: 100%;
}
</style>