mt-qj-wms-ui/src/views/common/home.vue

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card :style="{height: boxHeight + 'px'}" class="box-card box-card-jg" shadow="hover" @click.native="$router.push({ name: 'orderProcess' })">
          <p class="box-card-header">
            <icon-svg class="iconClass" name="进工业炉加工"></icon-svg>
            进工业炉加工
          </p>
          <p class="box-card-footer">Processing</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card :style="{height: boxHeight + 'px'}" class="box-card box-card-ck" shadow="hover" @click.native="$router.push({ name: 'exWarehouse' })">
          <p class="box-card-header">
            <icon-svg class="iconClass" name="出库"></icon-svg>
            出库
          </p>
          <p class="box-card-footer">Warehouse</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card :style="{height: boxHeight + 'px'}" class="box-card box-card-zj" shadow="hover" @click.native="$router.push({ name: 'addProcess' })">
          <p class="box-card-header">
            <icon-svg class="iconClass" name="追加加工"></icon-svg>
            追加加工
          </p>
          <p class="box-card-footer">Append</p>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="mod-log">
      <h3>当前任务列表</h3>
      <el-table
        :data="dataList"
        :stripe="true"
        :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
        v-loading="dataListLoading"
        style="width: 100%; min-height: 500px"
      >
        <el-table-column
          type="index"
          label="序号"
          header-align="center"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="taskCode"
          label="任务编号"
        >
        </el-table-column>
        <el-table-column
          prop="idens"
          label="标识卡"
        >
        <template slot-scope="scope">
          <span>{{
            scope.row.idens.join("|")
          }}</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="materials"
          label="物料名"
        >
        <template slot-scope="scope">
          <span>{{
            scope.row.materials.join("|")
          }}</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="customers"
          label="客户"
        >
        <template slot-scope="scope">
          <span>{{
            scope.row.customers.join("|")
          }}</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="kilnName"
          label="窑炉"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="当前状态"
        >
          <template slot-scope="scope">
            {{ scope.row.status >= 0 ? statusList[scope.row.status] : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="taskType"
          label="任务类型"
        >
        <template slot-scope="scope">
          <span>{{
            scope.row.taskType === 0
              ? "缓存到窑炉加工"
              : scope.row.taskType === 1
              ? "出炉到缓存"
              : scope.row.taskType === 2
              ? "缓存出库"
              : "入库缓存"
          }}</span>
        </template>
        </el-table-column>
        <el-table-column
          prop="startPosition"
          label="开始位置"
        >
        </el-table-column>
        <el-table-column
          prop="targetPosition"
          label="目标位置"
        >
        </el-table-column>
        <el-table-column
          prop="locationName"
          label="库位"
        >
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
// 任务状态列表
const statusList = {
  0: '等待执行',
  1: '执行中',
  2: '执行完成',
  3: '追加后完成'
}

export default {
  data () {
    return {
      dataList: [],
      pageIndex: 1,
      pageSize: 500,
      dataListLoading: false,
      statusList,
      boxHeight: 0
    }
  },
  created () {
    this.getDataList()
    if (document.body.offsetWidth > 1180) {
      this.boxHeight = (document.body.offsetWidth - 330) * 40 / 183
      // * 320 / (3 * 488)
    } else {
      this.boxHeight = 186
    }
    window.addEventListener('resize', () => {
      if (document.body.offsetWidth > 1180) {
        this.boxHeight = (document.body.offsetWidth - 330) * 40 / 183
      } else {
        this.boxHeight = 186
      }
    })
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/currTask/mainCurrentTaskNow'),
        method: 'post',
        data: this.$http.adornData({
          current: this.pageIndex,
          size: this.pageSize
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data.records
        } else {
          this.dataList = []
        }
        this.dataListLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mod-log {
  margin-top: 20px;
  border-radius: 15px;
}
.box-card{
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
  border-radius: 25px;
  padding-left: 20px;
  padding-top: 40px;
  .box-card-header{
    font-size: 18px;
    letter-spacing: 3px;
  }
  .box-card-footer{
    font-size: 24px;
  }
  p {
    margin: 10px 0;
  }
}
.box-card-jg{
  background-image: url('../../assets/img/进工业炉加工.png');
}
.box-card-ck{
  background-image: url('../../assets/img/出库.png');
}
.box-card-zj{
  background-image: url('../../assets/img/追加加工.png');
}
.iconClass{
  /* width: 20px;
  height: 20px; */
  position: relative;
  top: 2px;
}
</style>