kd-aiot-frontend-mes/src/views/produce/components/feeding/details.vue

<template>
  <div>
    <div class="feed_box">
      <div v-for="(item, index) in dataList" :key="index" class="card_box">
        <div class="rx-bc">
          <div class="item_box rx-bc">
            <div class="round">{{ index + 1 }}</div>
            <div class="time">投料时间:{{ item.createTime }} </div>
          </div>

          <div class="item_box rx-bc">
            <div class="time">工序名称： {{ item.taskName }}</div>
          </div>
        </div>

        <div v-for="(it, idx) in item.orderInfoList" :key="idx">
          <workOrderBom :item="it" :isDetails="true"></workOrderBom>

          <deviceBom
            v-if="it.equipmentList.length != 0"
            :list="it.equipmentList"
          ></deviceBom>

          <productsBom
            v-if="
              Object.prototype.hasOwnProperty.call(it, 'inProductList') &&
              it.inProductList[0]
            "
            :productsObj="it.inProductList[0]"
          ></productsBom>

          <modelBom v-if="it.modelList.length != 0" :list="it.modelList">
          </modelBom>

          <instanceBom
            v-if="it.instanceList.length != 0"
            :isDetails="true"
            :list="it.instanceList"
            :currentTaskDiagram="currentTaskDiagram"
            :equipmentList="it.equipmentList"
          ></instanceBom>

          <semiProductBom
            v-if="it.semiProductList.length != 0"
            :isDetails="true"
            :list="it.semiProductList"
            :currentTaskDiagram="currentTaskDiagram"
            :equipmentList="it.equipmentList"
          ></semiProductBom>

          <turnoverBom
            v-if="it.turnover.length != 0"
            :list="it.turnover"
            :isDetails="true"
            :wordItem="it"
            pattern="feed"
          ></turnoverBom>

          <packingBom
            v-if="it.packingList.length != 0"
            :list="it.packingList"
          ></packingBom>

          <palletBom
            v-if="
              Object.prototype.hasOwnProperty.call(it, 'palletList') &&
              it.palletList.length != 0
            "
            :palletList="it.palletList"
          ></palletBom>

          <revolvingDiskBom
            v-if="
              Object.prototype.hasOwnProperty.call(it, 'revolvingDiskList') &&
              it.revolvingDiskList.length != 0
            "
            :revolvingDiskList="it.revolvingDiskList"
          ></revolvingDiskBom>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { feedByOrderIds } from '@/api/produce/feeding';
  import workOrderBom from './components/workOrderBom.vue';
  import deviceBom from './components/deviceBom.vue';
  import modelBom from './components/modelBom.vue';
  import instanceBom from './components/instanceBom.vue';
  import semiProductBom from './components/semiProductBom';
  import packingBom from './components/packingBom.vue';
  import palletBom from './components/palletBom';
  import revolvingDiskBom from './components/revolvingDiskBom';
  import productsBom from './components/productsBom.vue';
  import turnoverBom from './components/turnoverBom.vue';
  export default {
    components: {
      workOrderBom,
      deviceBom,
      modelBom,
      instanceBom,
      packingBom,
      palletBom,
      revolvingDiskBom,
      semiProductBom,
      productsBom,
      turnoverBom
    },

    props: {
      routeObj: {
        type: Object,
        default() {
          return {};
        }
      },

      curTaskObj: {
        type: Object,
        default() {
          return () => {};
        }
      }
    },

    watch: {
      curTaskObj: {
        handler(obj) {
          if (obj) {
            this.getList(obj.taskId);
          }
        },
        deep: true,
        immediate: true
      }
    },

    data() {
      return {
        ids: [],
        taskId: null,
        dataList: [],

        currentTaskDiagram: {
          isFirstTask: 0
        },

        isLoad: false
      };
    },

    created() {
      //   this.getList();
    },

    methods: {
      async getList(taskId) {
        let param = {
          ids: [this.routeObj.id],
          taskId: taskId
        };
        const res = await feedByOrderIds(param);
        console.log(res);
        this.dataList = JSON.parse(JSON.stringify(res));
      }
    }
  };
</script>

<style scoped lang="scss">
  .rx-bc {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .item_box {
    margin-top: 5px;
    margin-bottom: 6px;
    padding: 0 10px;

    .round {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      background: #157a2c;
      color: #fff;
      text-align: center;
      font-size: 12px;
    }

    .time {
      color: #157a2c;
      font-family: PingFang HK;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      margin-left: 8px;
    }
  }
</style>