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

<template>
  <view class="marginTop">
    <view
      v-for="(item, index) in list"
      class="kd-row"
      :key="item.id"
      v-show="list.length !== 0"
      @click="goDetail(item)"
    >
      <view class="kd-col">
        <text class="title">生产工单号：{{ item.code }}</text>
        <text
          class="status"
          :class="statusList[item.status] && statusList[item.status].class"
          >{{ statusList[item.status] && statusList[item.status].label }}</text
        >
      </view>
      <view class="kd-col">
        <text class="warehouse"> 生产版本：{{ item.produceVersionName }}</text>
        <text>产品名称：{{ item.productName }}</text>
      </view>
      <view class="kd-col">
        <text class="warehouse">
          牌号|型号：{{ item.brandNo }}|{{ item.model }}</text
        >
        <text>要求成型数量：{{ item.formingNum }}PCS</text>
      </view>
      <view class="kd-col">
        <text class="warehouse"> 要求成型重量：{{ item.formingWeight }}KG</text>
        <!-- <text>要求成型日期：2023/6/20</text> -->
      </view>
      <view class="kd-col">
        <text class="warehouse"> 工单发布时间：{{ item.createTime }}</text>
      </view>
      <view class="kd-col">
        <text class="warehouse"> 计划开始时间：{{ item.planStartTime }}</text>
      </view>
    </view>
    <view v-show="list.length === 0" class="no_data">
      <u-empty mode="data" textSize="22"></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      statusList: {
        4: { class: "", label: "待生产" },
        6: { class: "text-primary", label: "已完成" },
        5: { class: "text-primary", label: "生产中" },
      },
    };
  },
  methods: {
    goDetail({ id, code }) {
      uni.navigateTo({
        url: `/pages/production/execute/extrusion/detail?&id=${id}&code=${code}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.marginTop {
  border-top: 20rpx solid $page-bg;

  .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;
      padding: 2rpx;
      color: #aaaaaa;

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

  .center {
    text-align: center;
    margin-bottom: 10rpx;
    color: #999;
  }
  .no_data {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 28rpx;
  }
}

.warehouse {
  display: flex;
  align-items: center;
}

.arrow {
  display: inline-block;
  position: relative;
  width: 50rpx;
  height: 10rpx;
  margin: 0 20rpx;
  &::after,
  &::before {
    content: "";
    position: absolute;
  }
  &::after {
    border-top: 4rpx solid #aaaaaa;
    border-right: 4rpx solid #aaaaaa;
    width: 12rpx;
    height: 12rpx;
    right: 0rpx;
    top: -6rpx;
    transform: rotate(45deg);
  }
  &::before {
    height: 4rpx;
    background-color: #aaaaaa;
    width: 50rpx;
  }
}
</style>