web-admin/src/views/system/statistics/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="one"> <span>统计</span> </el-col>
        <el-col :span="24">
          <el-tabs type="border-card">
            <el-tab-pane label="年度销售额"><card-1></card-1> </el-tab-pane>
            <el-tab-pane label="年度下单数"><card-2></card-2></el-tab-pane>
            <el-tab-pane label="年度付款数"><card-3></card-3></el-tab-pane>
            <el-tab-pane label="年度退货数"><card-4></card-4></el-tab-pane>
            <el-tab-pane label="年度退款数"><card-5></card-5></el-tab-pane>
            <el-tab-pane label="年度换货数"><card-6></card-6></el-tab-pane>
          </el-tabs>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('todo');
export default {
  name: 'index',
  props: {},
  components: {
    card1: () => import('./parts/card-1.vue'),
    card2: () => import('./parts/card-2.vue'),
    card3: () => import('./parts/card-3.vue'),
    card4: () => import('./parts/card-4.vue'),
    card5: () => import('./parts/card-5.vue'),
    card6: () => import('./parts/card-6.vue'),
  },
  data: function () {
    return {
      data: {},
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, 'data', res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    margin: 0 0 10px 0;

    span:nth-child(1) {
      font-size: 20px;
      font-weight: 700;
      margin-right: 10px;
    }
  }
  .two {
    margin: 0 0 10px 0;
  }
  .thr {
    margin: 0 0 10px 0;
  }
}
</style>