kd-aiot-frontend-aps/src/views/productionPlan/components/detail/prod.vue

<template>
  <div class="pane-box">
    <HeaderTitle title="生产信息"> </HeaderTitle>
    <el-descriptions :column="5" border>
      <el-descriptions-item label="生产版本">生产版本</el-descriptions-item>
      <el-descriptions-item label="工单总数量">工单总数量</el-descriptions-item>
      <el-descriptions-item label="生产工单数量"
        >生产工单数量</el-descriptions-item
      >
      <el-descriptions-item label="改型工单数量"
        >改型工单数量</el-descriptions-item
      >
      <el-descriptions-item label="改型生产数量"
        >改型生产数量</el-descriptions-item
      >
      <el-descriptions-item label="已成型工单数量"
        >已成型工单数量</el-descriptions-item
      >
      <el-descriptions-item label="产线">产线</el-descriptions-item>
      <el-descriptions-item label="未开工数">未开工数</el-descriptions-item>
      <el-descriptions-item label="首工序完成数量"
        >首工序完成数量</el-descriptions-item
      >
      <el-descriptions-item label="首工序完成重量"
        >首工序完成重量</el-descriptions-item
      >
      <el-descriptions-item label="首工序欠生产"
        >首工序欠生产</el-descriptions-item
      >
      <el-descriptions-item label="首工序欠产重量"
        >首工序欠产重量</el-descriptions-item
      >
      <el-descriptions-item label="工艺路线版本"
        >工艺路线版本</el-descriptions-item
      >
      <el-descriptions-item label="完成工单数量"
        >完成工单数量</el-descriptions-item
      >
      <el-descriptions-item label="首工序开始时间"
        >首工序开始时间</el-descriptions-item
      >
      <el-descriptions-item label="预计交付时间"
        >预计交付时间</el-descriptions-item
      >
      <el-descriptions-item label="成型完成时间"
        >成型完成时间</el-descriptions-item
      >
      <el-descriptions-item label="生产完成时间"
        >生产完成时间</el-descriptions-item
      >
    </el-descriptions>
    <div class="progress-wrapper">
      <div class="progress-item">
        <div class="label"> 首工序完成数量 </div>
        <el-progress
          :percentage="20"
          color="rgba(0, 191, 191, 1)"
          :text-inside="true"
          :stroke-width="16"
        ></el-progress>
      </div>
      <div class="progress-item">
        <div class="label"> 已成型数量 </div>
        <el-progress
          :percentage="20"
          color="rgba(0, 191, 191, 1)"
          :text-inside="true"
          :stroke-width="16"
        ></el-progress>
      </div>
      <div class="progress-item">
        <div class="label"> 已交付数量 </div>
        <el-progress
          :percentage="20"
          color="rgba(0, 191, 191, 1)"
          :text-inside="true"
          :stroke-width="16"
        ></el-progress>
      </div>
      <div class="progress-item">
        <div class="label"> 已完成工单 </div>
        <el-progress
          :percentage="20"
          color="rgba(2, 125, 180, 1)"
          :text-inside="true"
          :stroke-width="16"
        ></el-progress>
      </div>
    </div>

    <ele-pro-table ref="table" :columns="columns" :datasource="[{}]">
    </ele-pro-table>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        columns: [
          {
            type: 'index',
            label: '序号',
            align: 'center',
            width: '80'
          },
          {
            prop: 'name',
            label: '工单号'
          },
          {
            prop: 'name',
            label: '计划开始时间'
          },
          {
            prop: 'name',
            label: '要求成型数量'
          },
          {
            prop: 'name',
            label: '首工序开始时间'
          },
          {
            prop: 'name',
            label: '已成型数量'
          },
          {
            prop: 'name',
            label: '已成型重量'
          },
          {
            prop: 'name',
            label: '成型完成时间'
          },
          {
            prop: 'name',
            label: '已交付数量'
          },
          {
            prop: 'name',
            label: '已交付重量'
          },
          {
            prop: 'name',
            label: '完成交付时间'
          },
          {
            prop: 'name',
            label: '生产周期'
          },
          {
            prop: 'name',
            label: '状态'
          }
        ]
      };
    }
  };
</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;
      }
    }
  }
</style>