aiot-app/pages/production/execute/extrusion/components/DetailView.vue

<template>
  <view>
    <view class="tabs-container">
      <view class="tabs">
        <view
          class="tab-item"
          :class="{ active: activeName === 1 }"
          @click="activeName = 1"
          >基本信息</view>
      </view>
    </view>
    <view class="list" 
	>
      <CellInfo  label="生产工单号" :value="baseInfo.code" />
      <CellInfo  label="计划编号"  :value="baseInfo.productionPlanCode" />
      <CellInfo label="生产版本" :value="baseInfo.produceVersionName" />
      <CellInfo label="工艺路线版本" :value="baseInfo.routingVersion" />
      <CellInfo label="产品编码" :value="baseInfo.productCode" />
      <CellInfo label="产品名称" :value="baseInfo.productName" />
      <CellInfo label="牌号" :value="baseInfo.brandNo" />
	  <CellInfo  label="型号" :value="baseInfo.model" />
	  <CellInfo  label="要求成型数量(PCS)"  :value="baseInfo.formingNum" />
	  <CellInfo label="要求成型重量(KG)" :value="baseInfo.formingWeight" />
	  <CellInfo label="已成型数量(PCS)" :value="baseInfo.formedNum" />
	  <CellInfo label="已成型重量(KG)" :value="baseInfo.formedWeight" />
	  <CellInfo label="计划开始时间" :value="baseInfo.planStartTime" />
	  <CellInfo  label="实际开始时间" :value="baseInfo.startTime" />
	  <!-- <CellInfo  label="要求成型完成时间"  :value="baseInfo.dialType" /> -->
	  <CellInfo label="实际成型完成时间" :value="baseInfo.completeTime" />
	  <CellInfo label="已完成生产数量(PCS)" :value="baseInfo.deliveredQuantity" />
	  <CellInfo label="已完成生产重量(KG)" :value="baseInfo.deliveredWeight" />
    </view>
  </view>
</template>

<script>
import CellInfo from '@/components/CellInfo.vue'
export default {
  components: { CellInfo  },
  props: {
    baseInfo: {
      type: Object,
      default: () => ({})
    },
    list: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: ''
    }
  },
  watch:{  
  },
  computed: {
    sum () {
      return this.list.reduce((sum, item) => {
        if (item.takeStockPattern) {
          sum += +item.amount
        } else {
          sum += item.detailReqList?.length || 0
        }

        return sum
      }, 0)
    }
  },
  data () {
    return {
      activeName: 1
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-container {
  height: 80rpx;
  background: #fff;
  border-bottom: 2rpx solid #333333;
}
.tabs {
  position: fixed;
  width: 100vw;
  height: 80rpx;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 20rpx;
  padding-left: 30rpx;
  line-height: 50rpx;
  .tab-item {
    width: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10rpx;
    &.active {
      background: linear-gradient(
        180deg,
        rgba(75, 121, 2, 1) 0%,
        rgba(255, 255, 255, 1) 12%
      );
      border-right: 1rpx solid #ccc;
      border-left: 1rpx solid #ccc;
    }
  }
}
.list {
  overflow-y: auto;
  height: calc(100vh - 420rpx);
  /deep/.list-cell{
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  .label{
		  max-width: 240rpx!important;
		  text-align: left;
	  }
	  .value{
		  text-align: right;
	  }
  }
}
.kd-row {
  font-size: 28rpx;
  padding: 14rpx 12rpx 6rpx;
  border-bottom: 1rpx solid $page-bg;
  .kd-col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #aaaaaa;

    > text {
      flex: 1;
    }
    .label {
      margin-right: 20rpx;
    }
    &.kd-col {
      margin-top: 25rpx;
    }

    .status {
      background-color: $page-bg;
      display: inline-block;
      padding: 4rpx 10rpx;
      border-radius: 18rpx;
    }
  }
  .title {
    font-weight: bold;
    color: #333333;
  }
}
</style>