aiot-app/pages/production/execute/components/ProcessOperate.vue

<!-- 工序操作 -->

<template>
  <view class="process-wrapper">
    <view class="process-item" v-if="type==0">
      <image src="@/static/mes/u56.png" mode="aspectFit" 
	    @click="$emit('handlePreparation')"
	  ></image>
      准备
    </view>
    <view class="process-item" v-if="type==1">
      <image
        src="@/static/mes/u59.png"
        mode="aspectFit"
        @click="$emit('handlePicking')"
      ></image>
      投料
    </view>
    <view class="process-item">
      <image
        src="@/static/mes/u60.png"
        mode="aspectFit"
        @click="$emit('handleReport')"
      ></image>
      报工
    </view>
  </view>
</template>

<script>
export default {
	props: {
	  type: {
		type: Number,
		default: 1
	  }
	},
  data() {
    return {};
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.process-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;

  .process-item {
    width: 212rpx;
    height: 144rpx;
    border: 1rpx solid $j-primary-green;
    color: $j-primary-green;
    border-radius: $uni-border-radius-lg;
    text-align: center;
    padding-top: 10rpx;
    image {
      display: block;
      margin: 0 auto;
      width: 68rpx;
      height: 80rpx;
    }
  }
}
</style>