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

<template>
  <el-row class="detail-box" :style="{ paddingTop: 16 * beilv + 'px' }">
    <el-col :span="8">
      <div
        class="column-box border-right"
        :style="{ paddingLeft: 60 * beilv + 'px' }"
      >
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ detailMsg.code }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >工单编号</span
          >
        </p>
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ detailMsg.planNum }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >计划数量</span
          >
        </p>
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ type }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >工单类型</span
          >
        </p>
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ detailMsg.productSpec }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >产品型号</span
          >
        </p>
      </div>
    </el-col>
    <el-col :span="8">
      <div
        class="column-box border-right"
        :style="{ paddingLeft: 60 * beilv + 'px' }"
      >
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ status }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >工单状态</span
          >
        </p>
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ detailMsg.finishNum }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >完成数量</span
          >
        </p>
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ planStartTime }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >计划开始时间</span
          >
        </p>
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ planEndTime }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >计划结束时间</span
          >
        </p>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="column-box" :style="{ paddingLeft: 60 * beilv + 'px' }">
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ process }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >工单进度</span
          >
        </p>
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ yieldNum }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >工单良率</span
          >
        </p>
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{
              detailMsg.sumProcessTime ? detailMsg.sumProcessTime : '-'
            }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >累计加工时长</span
          >
        </p>
        <p class="box" :style="{ marginTop: 27 * beilv + 'px' }">
          <span
            class="tip-value"
            :style="{
              fontSize: 27 * beilv + 'px',
              marginBottom: 6 * beilv + 'px'
            }"
            >{{ startTime }}</span
          >
          <span class="tip" :style="{ fontSize: 16 * beilv + 'px' }"
            >实际开始时间</span
          >
        </p>
      </div>
    </el-col>
  </el-row>
</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.type) {
          res = item.dataName
        }
      })
      return res
    },
    planStartTime() {
      return timeFormatter(this.detailMsg.planStartTime)
    },
    planEndTime() {
      return timeFormatter(this.detailMsg.planEndTime)
    },
    process() {
      return this.detailMsg.process * 100 + '%'
    },
    yieldNum() {
      return this.detailMsg.yield * 100 + '%'
    },
    startTime() {
      return timeFormatter(this.detailMsg.startTime)
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-box {
  .column-box {
    .box {
      .tip-value {
        display: block;
      }
      .tip {
        display: inline-block;
        background-color: #cae2ff;
        border-radius: 2px;
        color: #288aff;
        padding: 4px;
      }
    }
  }
  .border-right {
    border-right: 1px solid #e8e8e8;
  }
}
</style>