tft-fe/src/views/productionScheduling/components/WorkOrderProgressDetails.vue

<template>
  <div class="order-detail">
    <span class="title">生产信息</span>
    <el-row class="detail-box">
      <el-col :span="10">
        <div class="column-box border-right">
          <p class="box">
            <span class="tip-value">{{ planStartTime }}</span>
            <span class="tip">计划开始时间</span>
          </p>
          <p class="box">
            <span class="tip-value">{{ planEndTime }}</span>
            <span class="tip">计划结束时间</span>
          </p>
          <p class="box">
            <span class="tip-value">{{ startTime }}</span>
            <span class="tip">实际开始时间</span>
          </p>
          <p class="box clear-border">
            <span class="tip-value">{{
              detailMsg.sumProcessTime ? detailMsg.sumProcessTime : '-'
            }}</span>
            <span class="tip">累计加工时长</span>
          </p>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="column-box border-right">
          <p class="box">
            <span class="tip-value">{{ detailMsg.code }}</span>
            <span class="tip">工单编号</span>
          </p>
          <p class="box">
            <span class="tip-value">{{ detailMsg.planNum }}</span>
            <span class="tip">计划数量</span>
          </p>
          <p class="box">
            <span class="tip-value">{{ type }}</span>
            <span class="tip">工单类型</span>
          </p>
          <p class="box clear-border">
            <span class="tip-value">{{ process }}</span>
            <span class="tip">工单进度</span>
          </p>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="column-box">
          <p class="box">
            <span class="tip-value">{{ status }}</span>
            <span class="tip">工单状态</span>
          </p>
          <p class="box">
            <span class="tip-value">{{ detailMsg.realProductNum }}</span>
            <span class="tip">完成数量</span>
          </p>
          <p class="box">
            <span class="tip-value">{{ detailMsg.productSpec }}</span>
            <span class="tip">产品型号</span>
          </p>
          <p class="box clear-border">
            <span class="tip-value">{{ yieldNum }}</span>
            <span class="tip">工单良率</span>
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { timeFormatter } from '@/utils/index'
export default {
  name: 'ProgressDetails',
  data() {
    return {
      list: JSON.parse(localStorage.getItem('publicList'))
    }
  },
  props: {
    detailMsg: {
      type: Object,
      default: () => {}
    },
    beilv: {
      type: Number,
      default: 1
    }
  },
  computed: {
    type() {
      let res = ''
      this.list.orderTypeVoList.map((item) => {
        if (item.dataCode === this.detailMsg.type) {
          res = item.dataName
        }
      })
      return res
    },
    status() {
      let res = ''
      this.list.orderStatusVoList.map((item) => {
        if (item.dataCode === this.detailMsg.status) {
          res = item.dataName
        }
      })
      return res
    },
    planStartTime() {
      return timeFormatter(this.detailMsg.planStartTime)
    },
    planEndTime() {
      return timeFormatter(this.detailMsg.planEndTime)
    },
    process() {
      return this.detailMsg.process
        ? (this.detailMsg.process * 100).toFixed(0) + '%'
        : ''
    },
    yieldNum() {
      return this.detailMsg.yield
        ? (this.detailMsg.yield * 100).toFixed(0) + '%'
        : ''
    },
    startTime() {
      return timeFormatter(this.detailMsg.startTime)
    }
  }
}
</script>
<style lang="scss" scoped>
.order-detail {
  .title {
    padding: 24px;
    display: inline-block;
  }
  .title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #0b58ff;
    border-radius: 1px;
    margin-right: 8px;
    vertical-align: middle;
  }
  .detail-box {
    padding: 0 16px;
    .column-box {
      .box {
        height: calc((100vh - 240px) / 4);
        padding-top: calc(((100vh - 240px) / 4) * 0.3);
        padding-left: 30px;
        border-bottom: 1px solid #e8e8e8;
        .tip-value {
          display: block;
          font-size: 22px;
          height: 18px;
          margin-bottom: 12px;
        }
        .tip {
          display: inline-block;
          font-size: 16px;
          background-color: #cae2ff;
          border-radius: 2px;
          color: #288aff;
          padding: 4px;
        }
      }
      .clear-border {
        border: none;
      }
    }
    .border-right {
      border-right: 1px solid #e8e8e8;
    }
  }
}
</style>