web-admin/src/views/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="two">
          <el-col :span="24">
            <el-col :span="5">
              <el-card class="box-card">
                <el-col :span="8">
                  <i class="icon_1 el-icon-box"></i>
                </el-col>
                <el-col :span="12" class="title">
                  <p>
                    <span>{{ data.notPay }}</span
                    >（单）
                  </p>
                  <p>未付款数</p>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card class="box-card">
                <el-col :span="8">
                  <i class="icon_2 el-icon-truck"></i>
                </el-col>
                <el-col :span="12" class="title">
                  <p>
                    <span>{{ data.notSend }}</span
                    >（单）
                  </p>
                  <p>未发货数</p>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card class="box-card">
                <el-col :span="8">
                  <i class="icon_3 el-icon-sell"></i>
                </el-col>
                <el-col :span="12" class="title">
                  <p>
                    <span>{{ data.notDealAfterSale }}</span
                    >（单）
                  </p>
                  <p>未处理售后数</p>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card class="box-card">
                <el-col :span="8">
                  <i class="icon_4 el-icon-price-tag"></i>
                </el-col>
                <el-col :span="12" class="title">
                  <p>
                    <span>{{ data.stockWarning }}</span
                    >（单）
                  </p>
                  <p>库存警告</p>
                </el-col>
              </el-card>
            </el-col>
          </el-col>
          <el-col :span="11">
            <el-card class="box-card"><card-1 :list="data.sMarkOrder"></card-1></el-card>
          </el-col>
          <el-col :span="11">
            <el-card class="box-card"><card-2 :list="data.sAfterSale"></card-2></el-card>
          </el-col>
          <el-col :span="11" style="display: none">
            <el-card class="box-card"><card-3></card-3> </el-card>
          </el-col>
          <el-col :span="11" style="display: none">
            <el-card class="box-card"><card-4></card-4></el-card>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapState, 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'),
  },
  data: function () {
    return {
      data: {},
    };
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {},
  async created() {
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    async search({ skip = 0, limit = this.$limit, ...info } = {}) {
      // info.shop = this.user.shop.id;
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) this.$set(this, 'data', res.data);
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.two {
  margin: 5px;
  .title {
    p {
      text-align: center;
      span:first-child {
        color: aquamarine;
        font-size: 24px;
      }
    }
  }
  .data-table {
    margin: 5px 0;
  }
  .el-col-5 {
    width: 22.5%;
  }
  .el-col {
    margin: 0 4px;
  }
  .box-card {
    margin: 5px;
    padding: 5px 0 20px 0;
  }
  .item {
    margin-bottom: 18px;
  }
  .icon {
    font-size: 36px;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
  }
  .icon_1 {
    font-size: 36px;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
    background-color: aquamarine;
  }
  .icon_2 {
    font-size: 36px;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
    background-color: aqua;
  }
  .icon_3 {
    font-size: 36px;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
    background-color: gold;
  }
  .icon_4 {
    font-size: 36px;
    padding: 10px;
    color: #fff;
    border-radius: 50%;
    background-color: coral;
  }
}
</style>