kd-aiot-frontend-aps/src/views/materialPlan/components/detail/plan.vue

<template>
  <div class="pane-box">
    <HeaderTitle title="生产信息"> </HeaderTitle>
    <el-descriptions :column="5" border>
      <el-descriptions-item label="计划编号">{{
        productionPlan.code
      }}</el-descriptions-item>
      <el-descriptions-item label="物料名称">{{
        productionPlan.materialName
      }}</el-descriptions-item>
      <el-descriptions-item label="物料编码">{{
        productionPlan.materialCode
      }}</el-descriptions-item>
      <el-descriptions-item label="牌号">{{
        productionPlan.brandNo
      }}</el-descriptions-item>
      <el-descriptions-item label="型号">{{
        productionPlan.model
      }}</el-descriptions-item>
      <el-descriptions-item label="生产版本">{{
        productionPlan.produceVersionName
      }}</el-descriptions-item>
      <el-descriptions-item label="产线">{{
        productionPlan.lineName
      }}</el-descriptions-item>
      <el-descriptions-item label="工艺路线名称">{{
        productionPlan.routingName
      }}</el-descriptions-item>
      <el-descriptions-item label="工艺路线版本">{{
        productionPlan.routingVersion
      }}</el-descriptions-item>
      <el-descriptions-item label="生产重量">{{
        productionPlan.num
      }}</el-descriptions-item>
      <el-descriptions-item label="要求交付日期">{{
        productionPlan.deliveryTime
      }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        productionPlan.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="计划备注" :span="2">{{
        productionPlan.notes
      }}</el-descriptions-item>
    </el-descriptions>
    <div class="progress-wrapper">
      <div class="progress-item">
        <div class="label"> 已生产重量 </div>
        <div class="item-percent">
			<el-progress
			  :percentage="(infoData.completeWeightRatio || 0) * 100"
			  color="rgba(0, 191, 191, 1)"
			  :text-inside="true"
			  :stroke-width="16"
			></el-progress>
			<div class="percent-num">
				{{productionPlan.completeNum?productionPlan.completeNum:0}}/{{productionPlan.num}}
			</div>
		</div>	
      </div>
      <div class="progress-item">
        <div class="label"> 已完成工单 </div>
		<div class="item-percent">
			<el-progress
			  :percentage="(infoData.completeOrderRatio || 0) * 100"
			  color="rgba(2, 125, 180, 1)"
			  :text-inside="true"
			  :stroke-width="16"
			></el-progress>
			<div class="percent-num">
				{{infoData.completeOrder}}/{{infoData.orderNum?infoData.orderNum:0}}
			</div>
		</div>
      </div>
    </div>

    <ele-pro-table ref="table" :columns="columns" :datasource="workOrderList">
    </ele-pro-table>
  </div>
</template>
<script>
  export default {
    props: {
      infoData: {
        type: Object,
        default: () => ({})
      }
    },
    data () {
      return {
        columns: [
          {
            type: 'index',
            label: '序号',
            align: 'center',
            width: '80'
          },
          {
            prop: 'code',
            label: '工单号'
          },
          {
            prop: 'productNum',
            label: '生产重量'
          },
          {
            prop: 'deviceCode',
            label: '设备编码'
          },
          {
            prop: 'deviceName',
            label: '设备名称'
          },
          {
            prop: 'planStartTime',
            label: '计划开始时间'
          },
          {
            prop: 'startTime',
            label: '实际开始时间'
          },
          {
            prop: 'executorName',
            label: '执行人'
          },
          {
            prop: 'reportWorkTime',
            label: '报工时间'
          },
          {
            prop: 'produceCycle',
            label: '生产周期'
          },
          {
            prop: 'name4',
            label: '状态'
          }
        ]
      };
    },
    computed: {
      productionPlan () {
        return this.infoData.productionPlan || {};
      },
      workOrderList () {
        return this.infoData.workOrderList || [];
      }
    }
  };
</script>

<style lang="scss" scoped>
  .progress-wrapper {
    padding: 10px 0;
    .progress-item {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      .label {
        width: 180px;
      }
      .el-progress {
        flex: 1;
      }
	  .item-percent{
		  flex: 1;
		  display: flex;
		  justify-content: space-between;
		  .percent-num{
			  margin-left: 20px;
			  width: 120px;
			  text-align: left;
		  }
	  }
    }
  }
</style>