统计

src/layout/data/menu.js

@@ -50,6 +50,12 @@ export const adminMenu = [
         name: '客服管理',
         index: '2-6',
       },
+      {
+        icon: 'icon-rencai',
+        path: '/system/statistics',
+        name: '统计',
+        index: '2-6',
+      },
     ],
   },
   {

src/router/module/system.js

@@ -65,4 +65,10 @@ export default [
     meta: { title: '平台管理-客服管理' },
     component: () => import(/* webpackChunkName: "system_service" */ '@/views/system/service/index.vue'),
   },
+  {
+    path: '/system/statistics',
+    name: 'system_statistics',
+    meta: { title: '平台管理-统计' },
+    component: () => import(/* webpackChunkName: "system_statistics" */ '@/views/system/statistics/index.vue'),
+  },
 ];

src/store/index.js

@@ -4,6 +4,9 @@ import * as ustate from './module/user/state';
 import * as umutations from './module/user/mutations';
 import admin from './module/user/action';
 
+import todo from './module/static/todo';
+import sellTotal from './module/static/sellTotal';
+
 import dictIndex from './module/dev/dictIndex';
 import dictData from './module/dev/dictData';
 
@@ -21,6 +24,7 @@ import order from './module/trade/order';
 import orderDetail from './module/trade/orderDetail';
 import sot from './module/trade/sot';
 import coupon from './module/trade/coupon';
+
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -44,5 +48,7 @@ export default new Vuex.Store({
     afterSale,
     serviceContact,
     sot,
+    todo,
+    sellTotal,
   },
 });

src/store/module/static/sellTotal.js

@@ -0,0 +1,44 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+const _ = require('lodash');
+Vue.use(Vuex);
+const api = {
+  url: '/point/v1/api/statistics/admin/sellTotal',
+};
+
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.url}`, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.url}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.url}/${payload}`);
+    return res;
+  },
+  async update({ commit }, payload) {
+    const id = _.get(payload, 'id', _.get(payload, '_id'));
+    const res = await this.$axios.$post(`${api.url}/${id}`, payload);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.url}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/module/static/todo.js

@@ -0,0 +1,44 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+const _ = require('lodash');
+Vue.use(Vuex);
+const api = {
+  url: '/point/v1/api/statistics/admin/todo',
+};
+
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.url}`, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.url}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.url}/${payload}`);
+    return res;
+  },
+  async update({ commit }, payload) {
+    const id = _.get(payload, 'id', _.get(payload, '_id'));
+    const res = await this.$axios.$post(`${api.url}/${id}`, payload);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.url}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/index.vue

@@ -10,7 +10,10 @@
                   <i class="icon_1 el-icon-box"></i>
                 </el-col>
                 <el-col :span="12" class="title">
-                  <p><span>24</span>（单）</p>
+                  <p>
+                    <span>{{ data.notPay }}</span
+                    >（单）
+                  </p>
                   <p>未付款数</p>
                 </el-col>
               </el-card>
@@ -21,7 +24,10 @@
                   <i class="icon_2 el-icon-truck"></i>
                 </el-col>
                 <el-col :span="12" class="title">
-                  <p><span>24</span>（单）</p>
+                  <p>
+                    <span>{{ data.notSend }}</span
+                    >（单）
+                  </p>
                   <p>未发货数</p>
                 </el-col>
               </el-card>
@@ -32,7 +38,10 @@
                   <i class="icon_3 el-icon-sell"></i>
                 </el-col>
                 <el-col :span="12" class="title">
-                  <p><span>24</span>（单）</p>
+                  <p>
+                    <span>{{ data.notDealAfterSale }}</span
+                    >（单）
+                  </p>
                   <p>未处理售后数</p>
                 </el-col>
               </el-card>
@@ -43,17 +52,20 @@
                   <i class="icon_4 el-icon-price-tag"></i>
                 </el-col>
                 <el-col :span="12" class="title">
-                  <p><span>24</span>（单）</p>
+                  <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></card-1></el-card>
+            <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></card-2></el-card>
+            <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>
@@ -70,6 +82,8 @@
 <script>
 import * as echarts from 'echarts';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('todo');
+
 export default {
   name: 'index',
   props: {},
@@ -80,14 +94,26 @@ export default {
     card4: () => import('./parts/card-4.vue'),
   },
   data: function () {
-    return {};
+    return {
+      data: {},
+    };
   },
   computed: {
     ...mapState(['user']),
   },
   mounted() {},
-  created() {},
-  methods: {},
+  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);
+      }
+    },
+  },
   metaInfo() {
     return { title: this.$route.meta.title };
   },

src/views/parts/card-1.vue

@@ -2,7 +2,7 @@
   <div id="card-1">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="card_one" style="width: 100%; height: 17vw"></div>
+        <div id="card_one" style="width: 37vw; height: 17vw"></div>
       </el-col>
     </el-row>
   </div>
@@ -13,16 +13,19 @@ import * as echarts from 'echarts';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
-  props: {},
+  props: { list: { type: Array } },
   components: {},
   data: function () {
-    return {};
+    return {
+      xAxisList: [],
+      seriesList: [],
+    };
   },
   computed: {
     ...mapState(['user']),
   },
   mounted() {
-    this.getEchartData();
+    // this.getEchartData();
   },
   created() {},
   methods: {
@@ -40,14 +43,24 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: this.xAxisList,
+          // 设置x轴线的属性
+          //使x轴文字显示全
+          axisLabel: {
+            show: true,
+            rotate: 50,
+            // interval: 0,
+            // formatter: function (value) {
+            //   return value.split('').join(' ');
+            // },
+          },
         },
         yAxis: {
           type: 'value',
         },
         series: [
           {
-            data: [150, 230, 224, 218, 135, 147, 260],
+            data: this.seriesList,
             type: 'line',
           },
         ],
@@ -59,10 +72,19 @@ export default {
     return { title: this.$route.meta.title };
   },
   watch: {
-    test: {
+    list: {
       deep: true,
-      immediate: true,
-      handler(val) {},
+      handler(val) {
+        let xAxisList = [];
+        let seriesList = [];
+        for (const p1 of val) {
+          xAxisList.push(p1.date);
+          seriesList.push(p1.num);
+        }
+        this.$set(this, 'xAxisList', xAxisList);
+        this.$set(this, 'seriesList', seriesList);
+        this.getEchartData();
+      },
     },
   },
 };

src/views/parts/card-2.vue

@@ -2,7 +2,7 @@
   <div id="card-2">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="card_two" style="width: 100%; height: 17vw"></div>
+        <div id="card_two" style="width: 37vw; height: 17vw"></div>
       </el-col>
     </el-row>
   </div>
@@ -13,16 +13,19 @@ import * as echarts from 'echarts';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
-  props: {},
+  props: { list: { type: Array } },
   components: {},
   data: function () {
-    return {};
+    return {
+      xAxisList: [],
+      seriesList: [],
+    };
   },
   computed: {
     ...mapState(['user']),
   },
   mounted() {
-    this.getEchartData();
+    // this.getEchartData();
   },
   created() {},
   methods: {
@@ -41,19 +44,22 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: this.xAxisList,
+          axisLabel: {
+            show: true,
+            rotate: 50,
+          },
         },
         yAxis: {
           type: 'value',
         },
         series: [
           {
-            data: [120, 200, 150, 80, 70, 110, 130],
+            data: this.seriesList,
             type: 'bar',
           },
         ],
       };
-
       option && myChart.setOption(option);
     },
   },
@@ -61,10 +67,19 @@ export default {
     return { title: this.$route.meta.title };
   },
   watch: {
-    test: {
+    list: {
       deep: true,
-      immediate: true,
-      handler(val) {},
+      handler(val) {
+        let xAxisList = [];
+        let seriesList = [];
+        for (const p1 of val) {
+          xAxisList.push(p1.date);
+          seriesList.push(p1.num);
+        }
+        this.$set(this, 'xAxisList', xAxisList);
+        this.$set(this, 'seriesList', seriesList);
+        this.getEchartData();
+      },
     },
   },
 };

src/views/parts/card-3.vue

@@ -2,7 +2,7 @@
   <div id="card-3">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="card_thr" style="width: 100%; height: 17vw"></div>
+        <div id="card_thr" style="width: 100vw; height: 17vw"></div>
       </el-col>
     </el-row>
   </div>

src/views/parts/card-4.vue

@@ -2,7 +2,7 @@
   <div id="card-4">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="card_fou" style="width: 100%; height: 17vw"></div>
+        <div id="card_fou" style="width: 100vw; height: 17vw"></div>
       </el-col>
     </el-row>
   </div>

src/views/system/statistics/index.vue

@@ -0,0 +1,87 @@
+<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>

src/views/system/statistics/parts/card-1.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="card_one" style="width: 70vw; height: 30vw"></div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('sellTotal');
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      xAxisList: [],
+      seriesList: [],
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {},
+  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)) {
+        let list = res.data;
+        let xAxisList = [];
+        let seriesList = [];
+        for (const p1 of list) {
+          xAxisList.push(p1.date);
+          seriesList.push(p1.money);
+        }
+        this.$set(this, 'xAxisList', xAxisList);
+        this.$set(this, 'seriesList', seriesList);
+        this.getEchartData();
+      }
+    },
+    getEchartData(data) {
+      var chartDom = document.getElementById('card_one');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          text: '年度销售额',
+        },
+        color: '#FFD700',
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          data: this.xAxisList,
+          // 设置x轴线的属性
+          //使x轴文字显示全
+          axisLabel: {
+            show: true,
+            rotate: 50,
+          },
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: this.seriesList,
+            type: 'bar',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    list: {
+      deep: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/system/statistics/parts/card-2.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="card_two" style="width: 70vw; height: 30vw"></div>
+      </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: {},
+  data: function () {
+    return {
+      xAxisList: [],
+      seriesList: [],
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {},
+  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)) {
+        let list = res.data.sMarkOrder;
+        let xAxisList = [];
+        let seriesList = [];
+        for (const p1 of list) {
+          xAxisList.push(p1.date);
+          seriesList.push(p1.num);
+        }
+        this.$set(this, 'xAxisList', xAxisList);
+        this.$set(this, 'seriesList', seriesList);
+        this.getEchartData();
+      }
+    },
+    getEchartData(data) {
+      var chartDom = document.getElementById('card_two');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          text: '年度下单数',
+        },
+        color: '#FFD700',
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          data: this.xAxisList,
+          // 设置x轴线的属性
+          //使x轴文字显示全
+          axisLabel: {
+            show: true,
+            rotate: 50,
+          },
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: this.seriesList,
+            type: 'line',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    list: {
+      deep: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/system/statistics/parts/card-3.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="card_thr" style="width: 70vw; height: 30vw"></div>
+      </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: {},
+  data: function () {
+    return {
+      xAxisList: [],
+      seriesList: [],
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {},
+  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)) {
+        let list = res.data.sMarkOrder;
+        let xAxisList = [];
+        let seriesList = [];
+        for (const p1 of list) {
+          xAxisList.push(p1.date);
+          seriesList.push(p1.num);
+        }
+        this.$set(this, 'xAxisList', xAxisList);
+        this.$set(this, 'seriesList', seriesList);
+        this.getEchartData();
+      }
+    },
+    getEchartData(data) {
+      var chartDom = document.getElementById('card_thr');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          text: '年度付款数',
+        },
+        color: '#FFD700',
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          data: this.xAxisList,
+          // 设置x轴线的属性
+          //使x轴文字显示全
+          axisLabel: {
+            show: true,
+            rotate: 50,
+          },
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: this.seriesList,
+            type: 'bar',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    list: {
+      deep: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/system/statistics/parts/card-4.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="card_fou" style="width: 70vw; height: 30vw"></div>
+      </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: {},
+  data: function () {
+    return {
+      xAxisList: [],
+      seriesList: [],
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {},
+  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)) {
+        let list = res.data.sMarkOrder;
+        let xAxisList = [];
+        let seriesList = [];
+        for (const p1 of list) {
+          xAxisList.push(p1.date);
+          seriesList.push(p1.num);
+        }
+        this.$set(this, 'xAxisList', xAxisList);
+        this.$set(this, 'seriesList', seriesList);
+        this.getEchartData();
+      }
+    },
+    getEchartData(data) {
+      var chartDom = document.getElementById('card_fou');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          text: '年度退货数',
+        },
+        color: '#FFD700',
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          data: this.xAxisList,
+          // 设置x轴线的属性
+          //使x轴文字显示全
+          axisLabel: {
+            show: true,
+            rotate: 50,
+          },
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: this.seriesList,
+            type: 'line',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    list: {
+      deep: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/system/statistics/parts/card-5.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="card_fiv" style="width: 70vw; height: 30vw"></div>
+      </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: {},
+  data: function () {
+    return {
+      xAxisList: [],
+      seriesList: [],
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {},
+  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)) {
+        let list = res.data.sMarkOrder;
+        let xAxisList = [];
+        let seriesList = [];
+        for (const p1 of list) {
+          xAxisList.push(p1.date);
+          seriesList.push(p1.num);
+        }
+        this.$set(this, 'xAxisList', xAxisList);
+        this.$set(this, 'seriesList', seriesList);
+        this.getEchartData();
+      }
+    },
+    getEchartData(data) {
+      var chartDom = document.getElementById('card_fiv');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          text: '年度退款数',
+        },
+        color: '#FFD700',
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          data: this.xAxisList,
+          // 设置x轴线的属性
+          //使x轴文字显示全
+          axisLabel: {
+            show: true,
+            rotate: 50,
+          },
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: this.seriesList,
+            type: 'bar',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    list: {
+      deep: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/system/statistics/parts/card-6.vue

@@ -0,0 +1,100 @@
+<template>
+  <div id="card-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div id="card_six" style="width: 70vw; height: 30vw"></div>
+      </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: {},
+  data: function () {
+    return {
+      xAxisList: [],
+      seriesList: [],
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {},
+  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)) {
+        let list = res.data.sMarkOrder;
+        let xAxisList = [];
+        let seriesList = [];
+        for (const p1 of list) {
+          xAxisList.push(p1.date);
+          seriesList.push(p1.num);
+        }
+        this.$set(this, 'xAxisList', xAxisList);
+        this.$set(this, 'seriesList', seriesList);
+        this.getEchartData();
+      }
+    },
+    getEchartData(data) {
+      var chartDom = document.getElementById('card_six');
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          text: '年度换货数',
+        },
+        color: '#FFD700',
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          data: this.xAxisList,
+          // 设置x轴线的属性
+          //使x轴文字显示全
+          axisLabel: {
+            show: true,
+            rotate: 50,
+          },
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: this.seriesList,
+            type: 'line',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    list: {
+      deep: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+}
+</style>