FT501-WMS/ruoyi-ui/src/views/index_old.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>{{$t('viewsMain.unfinishedInboundTask')}}</span>
          </div>
          <el-table
            :data="table1Data"
            style="width: 100%"
            :height="tableHeight"
            v-loading="loading1">
            <el-table-column prop="workValue"  :label="$t('viewsMain.taskKey')"  /> <!-- 任务键值 -->
            <el-table-column prop="workName" :label="$t('viewsMain.unfinishedInboundTaskName')"  /><!-- 未完成入库任务 -->
            <el-table-column prop="workNum" :label="$t('viewsMain.totalUnfinishedCount')" ><!-- 全部未完成数量 -->
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.workNum).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column prop="by1" :label="$t('viewsMain.todayUnfinishedCount')"> <!-- 今日未完成数量 -->
<!--              <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>{{$t('viewsMain.finishedInboundTask')}}</span>
          </div>
          <el-table
            :data="table2Data"
            style="width: 100%"
            :height="tableHeight"
            v-loading="loading2">
            <el-table-column prop="workValue" :label="$t('viewsMain.taskKey')" /><!-- 任务键值 -->
            <el-table-column prop="workName" :label="$t('viewsMain.finishedInboundTaskName')"  /><!-- 已完成入库任务 -->
            <el-table-column prop="workNum" :label="$t('viewsMain.totalFinishedCount')" ><!-- 全部已完成数量 -->
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.workNum).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column prop="by1" :label="$t('viewsMain.todayFinishedCount')"> <!-- 今日已完成数量 -->
<!--              <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>{{$t('viewsMain.unfinishedOutboundTask')}}</span>
          </div>
          <el-table
            :data="table3Data"
            style="width: 100%"
            :height="tableHeight"
            v-loading="loading3">
            <el-table-column prop="workValue" :label="$t('viewsMain.taskKey')" /><!-- 任务键值 -->
            <el-table-column prop="workName" :label="$t('viewsMain.unfinishedOutboundTaskName')" /><!-- 未完成出库任务 -->
            <el-table-column prop="workNum" :label="$t('viewsMain.totalUnfinishedCount')"><!-- 全部未完成数量 -->
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.workNum).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column prop="by1" :label="$t('viewsMain.todayUnfinishedCount')"> <!-- 今日未完成数量 -->
<!--              <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>{{$t('viewsMain.finishedOutboundTask')}}</span>
          </div>
          <el-table
            :data="table4Data"
            style="width: 100%"
            :height="tableHeight"
            v-loading="loading4">
            <el-table-column prop="workValue" :label="$t('viewsMain.taskKey')" /><!-- 任务键值 -->
            <el-table-column prop="workName" :label="$t('viewsMain.finishedOutboundTaskName')"  /><!-- 已完成出库任务 -->
            <el-table-column prop="workNum" :label="$t('viewsMain.totalFinishedCount')" ><!-- 全部已完成数量 -->
<!--              <template slot-scope="scope">-->
<!--                {{ Number(scope.row.workNum).toFixed(6) }}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column prop="by1" :label="$t('viewsMain.todayFinishedCount')"> <!-- 今日已完成数量 -->
<!--              <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>