jsm-mall-front/src/views/bigViews/dataView1/components/accessoryStatistics.vue

<template>
  <moduleEnclosure title="近30日辅配件统计">
    <div class="all-container">
      <div class="item">
        <div class="title">辅材销售</div>
        <div class="num">{{ statsData.fcxs || 0 }}单</div>
      </div>
      <div class="item">
        <div class="title">辅材退货</div>
        <div class="num">{{ statsData.fcth || 0 }}单</div>
      </div>
      <div class="item">
        <div class="title">配件销售</div>
        <div class="num">{{ statsData.pjxs || 0 }}单</div>
      </div>
      <!-- <div class="item">
        <div class="title">配件退货</div>
        <div class="num">{{ statsData.pjth || 0 }}单</div>
      </div> -->
      <div class="item">
        <div class="title">新件待返还</div>
        <div class="num">{{ statsData.xjdfh || 0 }}件</div>
      </div>
      <div class="item">
        <div class="title">旧件待返还</div>
        <div class="num">{{ statsData.jjdfh || 0 }}件</div>
      </div>
      <!-- <div class="item">
        <div class="title">旧件待返厂</div>
        <div class="num">{{ statsData.jjdfc || 0 }}件</div>
      </div> -->
    </div>
  </moduleEnclosure>
</template>

<script>
import moduleEnclosure from '@/components/moduleEnclosure.vue'
import { getMaterialStats } from '@/api/bigView.js'

export default {
  components: {
    moduleEnclosure
  },

  data() {
    return {
      statsData: {}
    }
  },

  mounted() {
    this.getData()
  },

  beforeUnmount() {},

  methods: {
    getData() {
      getMaterialStats().then(res => {
        this.statsData = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.all-container {
  width: 100%;
  height: 100%;
  padding-top: 12px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 25%;
    height: 50%;
    .title {
      font-size: 12px;
      color: #ffffff;
      margin-bottom: 8px;
    }
    .num {
      color: #33a8c9;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>