hyyfClient/src/views/PdcData/analysis/InventoryItems.vue

<!--
 * @Author: your name
 * @Date: 2021-10-11 10:10:26
 * @LastEditTime: 2021-12-02 10:21:07
 * @LastEditors: Please set LastEditors
 * @Description: 存栏情况 - 下面 item 的数字
 * @FilePath: \hyyfClient\src\views\PdcData\analysis\InventoryItems.vue
-->
<template>
  <div class="inventory-items">
    <inventory-item>
      <template v-slot:picture>
        <div class="picture01 picture"></div>
      </template>
      <template v-slot:dataName>
        <span>母猪存栏</span>
      </template>
      <template v-slot:dataNum>
        <span>{{ data[0] }}</span>
      </template>
    </inventory-item>
    <inventory-item>
      <template v-slot:picture>
        <div class="picture02 picture"></div>
      </template>
      <template v-slot:dataName>
        <div>
          妊娠猪存栏
        </div>
      </template>
      <template v-slot:dataNum>
        <div>
          {{ data[1] }}
        </div>
      </template>
    </inventory-item>
    <inventory-item>
      <template v-slot:picture>
        <div class="picture03 picture"></div>
      </template>
      <template v-slot:dataName>
        <div>
          哺乳母猪存栏
        </div>
      </template>
      <template v-slot:dataNum>
        <div>
          {{ data[2] }}
        </div>
      </template>
    </inventory-item>
    <inventory-item>
      <template v-slot:picture>
        <div class="parent">
          <div class="picture04 picture"></div>
          <div class="blank"></div>
        </div>
      </template>
      <template v-slot:dataName>
        <div>
          空怀猪存栏
        </div>
      </template>
      <template v-slot:dataNum>
        <div>
          {{ data[3] }}
        </div>
      </template>
    </inventory-item>
    <inventory-item>
      <template v-slot:picture>
        <div class="picture05 picture"></div>
      </template>
      <template v-slot:dataName>
        <div>
          公猪存栏
        </div>
      </template>
      <template v-slot:dataNum>
        <div>
          {{ data[4] }}
        </div>
      </template>
    </inventory-item>
    <inventory-item>
      <template v-slot:picture>
        <div class="parent">
          <div class="picture06 picture"></div>
          <div class="sale"></div>
        </div>
      </template>
      <template v-slot:dataName>
        <div>
          商品猪存栏
        </div>
      </template>
      <template v-slot:dataNum>
        <div>
          {{ data[5] }}
        </div>
      </template>
    </inventory-item>
  </div>
</template>
<script>
import InventoryItem from "components/erp/InventoryItem.vue";

export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      getData: [],
    };
  },
  components: {
    InventoryItem,
  },
  mounted() {
    // console.log("-----------------------");
    // console.log(this.data);
  },
  watch: {
    data: {
      handler(newValue) {
        this.getData = newValue;
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.inventory-items {
  margin: 10px 5px 0px;
  display: flex;
}
/* 图片统一格式 */
.picture {
  width: 150px;
  height: 100px;
}
/* 母猪存栏图片 */
.picture01 {
  background: url("~assets/images/erpAnalysis/u3827.svg") no-repeat 50%;
  background-size: 50%;
}
/* 妊娠 */
.picture02 {
  background: url("~assets/images/erpAnalysis/u3828.svg") no-repeat 50%;
  background-size: 50%;
}
/* 哺乳 */
.picture03 {
  background: url("~assets/images/erpAnalysis/u3829.svg") no-repeat 50%;
  background-size: 50%;
}
/* 空怀 */
.picture04 {
  background: url("~assets/images/erpAnalysis/u3831.svg") no-repeat 50%;
  background-size: 50%;
}
.parent {
  position: relative;
}
.blank {
  background: url("~assets/images/erpAnalysis/u3832.svg") no-repeat 50%;
  position: absolute;
  top: 0;
  left: 5px;
  width: 150px;
  height: 100px;
}
/* 公猪 */
.picture05 {
  background: url("~assets/images/erpAnalysis/u3686.svg") no-repeat 50%;
  background-size: 50%;
}
/* 商品 */
.picture06 {
  background: url("~assets/images/erpAnalysis/u3834.svg") no-repeat 50%;
  background-size: 50%;
}
.sale {
  background: url("~assets/images/erpAnalysis/u3835.svg") no-repeat 50%;
  position: absolute;
  top: 30px;
  right: 53px;
  width: 30px;
  height: 30px;
  background-size: 80%;
}
</style>