统计

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

@@ -2,7 +2,24 @@
   <div id="card-1">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="card_one" style="width: 70vw; height: 30vw"></div>
+        <el-col :span="24">
+          <el-button type="primary" size="mini" @click="totime('day')">本日</el-button>
+          <el-button type="primary" size="mini" @click="totime('week')">本周</el-button>
+          <el-button type="primary" size="mini" @click="totime('monthDay')">本月</el-button>
+          <el-button type="primary" size="mini" @click="totime('yearMonth')">本年</el-button>
+          <el-date-picker
+            v-model="time"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            style="margin: 0 12px"
+          >
+          </el-date-picker>
+          <el-button type="primary" size="mini" @click="totime(time, 1)">查询</el-button>
+        </el-col>
+        <div id="card_one" style="width: 70vw; height: 30vw; margin: 40px 0 0 0"></div>
       </el-col>
     </el-row>
   </div>
@@ -10,6 +27,7 @@
 
 <script>
 import * as echarts from 'echarts';
+var myChart;
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('sellTotal');
 export default {
@@ -20,35 +38,49 @@ export default {
     return {
       xAxisList: [],
       seriesList: [],
+      time: '',
     };
   },
   computed: {
     ...mapState(['user']),
   },
-  mounted() {},
-  async created() {
+  async mounted() {
     await this.search();
   },
+  async created() {},
   methods: {
     ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
     async search({ skip = 0, limit = 10, ...info } = {}) {
-      let res = await this.query({ skip, limit, ...info });
+      let res = await this.query({ skip, limit, type: info.time, start: info.start, end: info.end });
       if (this.$checkRes(res)) {
         let list = res.data;
         let xAxisList = [];
         let seriesList = [];
         for (const p1 of list) {
+          if (info.time == 'yearMonth') {
+            console.log(p1.date);
+          }
           xAxisList.push(p1.date);
           seriesList.push(p1.money);
         }
         this.$set(this, 'xAxisList', xAxisList);
         this.$set(this, 'seriesList', seriesList);
-        this.getEchartData();
+      }
+    },
+    totime(time, e) {
+      if (e == '1') {
+        let start = time[0];
+        let end = time[1];
+        this.search({ start, end, time: 'custom' });
+      } else {
+        this.search({ time });
       }
     },
     getEchartData(data) {
-      var chartDom = document.getElementById('card_one');
-      var myChart = echarts.init(chartDom);
+      if (myChart != null && myChart != '' && myChart != undefined) {
+        myChart.dispose(); //销毁
+      }
+      myChart = echarts.init(document.getElementById('card_one'));
       var option;
       option = {
         title: {
@@ -85,9 +117,11 @@ export default {
     return { title: this.$route.meta.title };
   },
   watch: {
-    list: {
+    seriesList: {
       deep: true,
-      handler(val) {},
+      handler(val) {
+        this.getEchartData();
+      },
     },
   },
 };

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

@@ -2,7 +2,24 @@
   <div id="card-1">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="card_two" style="width: 70vw; height: 30vw"></div>
+        <el-col :span="24">
+          <el-button type="primary" size="mini" @click="totime('day')">本日</el-button>
+          <el-button type="primary" size="mini" @click="totime('week')">本周</el-button>
+          <el-button type="primary" size="mini" @click="totime('monthDay')">本月</el-button>
+          <el-button type="primary" size="mini" @click="totime('yearMonth')">本年</el-button>
+          <el-date-picker
+            v-model="time"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            style="margin: 0 12px"
+          >
+          </el-date-picker>
+          <el-button type="primary" size="mini" @click="totime(time, 1)">查询</el-button>
+        </el-col>
+        <div id="card_one" style="width: 70vw; height: 30vw; margin: 40px 0 0 0"></div>
       </el-col>
     </el-row>
   </div>
@@ -10,6 +27,7 @@
 
 <script>
 import * as echarts from 'echarts';
+var myChart;
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('todo');
 export default {
@@ -20,19 +38,20 @@ export default {
     return {
       xAxisList: [],
       seriesList: [],
+      time: '',
     };
   },
   computed: {
     ...mapState(['user']),
   },
-  mounted() {},
-  async created() {
+  async mounted() {
     await this.search();
   },
+  async created() {},
   methods: {
     ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
     async search({ skip = 0, limit = 10, ...info } = {}) {
-      let res = await this.query({ skip, limit, ...info });
+      let res = await this.query({ skip, limit,type: info.time, start: info.start, end: info.end });
       if (this.$checkRes(res)) {
         let list = res.data.sMarkOrder;
         let xAxisList = [];
@@ -43,12 +62,22 @@ export default {
         }
         this.$set(this, 'xAxisList', xAxisList);
         this.$set(this, 'seriesList', seriesList);
-        this.getEchartData();
+      }
+    },
+    totime(time, e) {
+      if (e == '1') {
+        let start = time[0];
+        let end = time[1];
+        this.search({ start, end, time: 'custom' });
+      } else {
+        this.search({ time });
       }
     },
     getEchartData(data) {
-      var chartDom = document.getElementById('card_two');
-      var myChart = echarts.init(chartDom);
+      if (myChart != null && myChart != '' && myChart != undefined) {
+        myChart.dispose(); //销毁
+      }
+      myChart = echarts.init(document.getElementById('card_two'));
       var option;
       option = {
         title: {
@@ -85,9 +114,11 @@ export default {
     return { title: this.$route.meta.title };
   },
   watch: {
-    list: {
+    seriesList: {
       deep: true,
-      handler(val) {},
+      handler(val) {
+        this.getEchartData();
+      },
     },
   },
 };

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

@@ -2,13 +2,31 @@
   <div id="card-1">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="card_thr" style="width: 70vw; height: 30vw"></div>
+        <el-col :span="24">
+          <el-button type="primary" size="mini" @click="totime('day')">本日</el-button>
+          <el-button type="primary" size="mini" @click="totime('week')">本周</el-button>
+          <el-button type="primary" size="mini" @click="totime('monthDay')">本月</el-button>
+          <el-button type="primary" size="mini" @click="totime('yearMonth')">本年</el-button>
+          <el-date-picker
+            v-model="time"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            style="margin: 0 12px"
+          >
+          </el-date-picker>
+          <el-button type="primary" size="mini" @click="totime(time, 1)">查询</el-button>
+        </el-col>
+        <div id="card_one" style="width: 70vw; height: 30vw; margin: 40px 0 0 0"></div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+var myChart;
 import * as echarts from 'echarts';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('todo');
@@ -20,22 +38,21 @@ export default {
     return {
       xAxisList: [],
       seriesList: [],
+      time: '',
     };
   },
   computed: {
     ...mapState(['user']),
   },
-  mounted() {},
-  async created() {
+  async mounted() {
     await this.search();
   },
+  async created() {},
   methods: {
     ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
-    async search({ skip = 0, limit = 10, ...info } = {}) {
-      info.status == '1';
-      let res = await this.query({ skip, limit, ...info });
+    async search({ skip = 0, limit = 10 } = {}) {
+      let res = await this.query({ skip, limit, status: '1' });
       if (this.$checkRes(res)) {
-        console.log(res.data);
         let list = res.data.sMarkOrder;
         let xAxisList = [];
         let seriesList = [];
@@ -45,12 +62,22 @@ export default {
         }
         this.$set(this, 'xAxisList', xAxisList);
         this.$set(this, 'seriesList', seriesList);
-        this.getEchartData();
+      }
+    },
+    totime(time, e) {
+      if (e == '1') {
+        let start = time[0];
+        let end = time[1];
+        this.search({ start, end, time: 'custom' });
+      } else {
+        this.search({ time });
       }
     },
     getEchartData(data) {
-      var chartDom = document.getElementById('card_thr');
-      var myChart = echarts.init(chartDom);
+      if (myChart != null && myChart != '' && myChart != undefined) {
+        myChart.dispose(); //销毁
+      }
+      myChart = echarts.init(document.getElementById('card_thr'));
       var option;
       option = {
         title: {
@@ -87,9 +114,11 @@ export default {
     return { title: this.$route.meta.title };
   },
   watch: {
-    list: {
+    seriesList: {
       deep: true,
-      handler(val) {},
+      handler(val) {
+        this.getEchartData();
+      },
     },
   },
 };

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

@@ -2,13 +2,31 @@
   <div id="card-1">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="card_fou" style="width: 70vw; height: 30vw"></div>
+        <el-col :span="24">
+          <el-button type="primary" size="mini" @click="totime('day')">本日</el-button>
+          <el-button type="primary" size="mini" @click="totime('week')">本周</el-button>
+          <el-button type="primary" size="mini" @click="totime('monthDay')">本月</el-button>
+          <el-button type="primary" size="mini" @click="totime('yearMonth')">本年</el-button>
+          <el-date-picker
+            v-model="time"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            style="margin: 0 12px"
+          >
+          </el-date-picker>
+          <el-button type="primary" size="mini" @click="totime(time, 1)">查询</el-button>
+        </el-col>
+        <div id="card_one" style="width: 70vw; height: 30vw; margin: 40px 0 0 0"></div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+var myChart;
 import * as echarts from 'echarts';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('todo');
@@ -20,21 +38,22 @@ export default {
     return {
       xAxisList: [],
       seriesList: [],
+      time: '',
     };
   },
   computed: {
     ...mapState(['user']),
   },
-  mounted() {},
-  async created() {
+  async mounted() {
     await this.search();
   },
+  async created() {},
   methods: {
     ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
-    async search({ skip = 0, limit = 10, ...info } = {}) {
-      let res = await this.query({ skip, limit, ...info });
+    async search({ skip = 0, limit = 10 } = {}) {
+      let res = await this.query({ skip, limit, status: '2', type: info.time, start: info.start, end: info.end });
       if (this.$checkRes(res)) {
-        let list = res.data.sMarkOrder;
+        let list = res.data.sAfterSale;
         let xAxisList = [];
         let seriesList = [];
         for (const p1 of list) {
@@ -43,12 +62,22 @@ export default {
         }
         this.$set(this, 'xAxisList', xAxisList);
         this.$set(this, 'seriesList', seriesList);
-        this.getEchartData();
+      }
+    },
+    totime(time, e) {
+      if (e == '1') {
+        let start = time[0];
+        let end = time[1];
+        this.search({ start, end, time: 'custom' });
+      } else {
+        this.search({ time });
       }
     },
     getEchartData(data) {
-      var chartDom = document.getElementById('card_fou');
-      var myChart = echarts.init(chartDom);
+      if (myChart != null && myChart != '' && myChart != undefined) {
+        myChart.dispose(); //销毁
+      }
+      myChart = echarts.init(document.getElementById('card_fou'));
       var option;
       option = {
         title: {
@@ -85,9 +114,11 @@ export default {
     return { title: this.$route.meta.title };
   },
   watch: {
-    list: {
+    seriesList: {
       deep: true,
-      handler(val) {},
+      handler(val) {
+        this.getEchartData();
+      },
     },
   },
 };

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

@@ -2,13 +2,31 @@
   <div id="card-1">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="card_fiv" style="width: 70vw; height: 30vw"></div>
+        <el-col :span="24">
+          <el-button type="primary" size="mini" @click="totime('day')">本日</el-button>
+          <el-button type="primary" size="mini" @click="totime('week')">本周</el-button>
+          <el-button type="primary" size="mini" @click="totime('monthDay')">本月</el-button>
+          <el-button type="primary" size="mini" @click="totime('yearMonth')">本年</el-button>
+          <el-date-picker
+            v-model="time"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            style="margin: 0 12px"
+          >
+          </el-date-picker>
+          <el-button type="primary" size="mini" @click="totime(time, 1)">查询</el-button>
+        </el-col>
+        <div id="card_one" style="width: 70vw; height: 30vw; margin: 40px 0 0 0"></div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+var myChart;
 import * as echarts from 'echarts';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('todo');
@@ -20,21 +38,22 @@ export default {
     return {
       xAxisList: [],
       seriesList: [],
+      time: '',
     };
   },
   computed: {
     ...mapState(['user']),
   },
-  mounted() {},
-  async created() {
+  async mounted() {
     await this.search();
   },
+  async created() {},
   methods: {
     ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
-    async search({ skip = 0, limit = 10, ...info } = {}) {
-      let res = await this.query({ skip, limit, ...info });
+    async search({ skip = 0, limit = 10 } = {}) {
+      let res = await this.query({ skip, limit, status: '1', type: info.time, start: info.start, end: info.end });
       if (this.$checkRes(res)) {
-        let list = res.data.sMarkOrder;
+        let list = res.data.sAfterSale;
         let xAxisList = [];
         let seriesList = [];
         for (const p1 of list) {
@@ -43,12 +62,22 @@ export default {
         }
         this.$set(this, 'xAxisList', xAxisList);
         this.$set(this, 'seriesList', seriesList);
-        this.getEchartData();
+      }
+    },
+    totime(time, e) {
+      if (e == '1') {
+        let start = time[0];
+        let end = time[1];
+        this.search({ start, end, time: 'custom' });
+      } else {
+        this.search({ time });
       }
     },
     getEchartData(data) {
-      var chartDom = document.getElementById('card_fiv');
-      var myChart = echarts.init(chartDom);
+      if (myChart != null && myChart != '' && myChart != undefined) {
+        myChart.dispose(); //销毁
+      }
+      myChart = echarts.init(document.getElementById('card_fiv'));
       var option;
       option = {
         title: {
@@ -85,9 +114,11 @@ export default {
     return { title: this.$route.meta.title };
   },
   watch: {
-    list: {
+    seriesList: {
       deep: true,
-      handler(val) {},
+      handler(val) {
+        this.getEchartData();
+      },
     },
   },
 };

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

@@ -29,6 +29,7 @@
 </template>
 
 <script>
+var myChart;
 import * as echarts from 'echarts';
 const moment = require('moment');
 import { mapState, createNamespacedHelpers } from 'vuex';
@@ -52,10 +53,10 @@ export default {
   computed: {
     ...mapState(['user']),
   },
-  mounted() { },
-  async created() {
+  async mounted() {
     await this.search();
   },
+  async created() {},
   methods: {
     ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
     async search({ skip = 0, limit = 10, ...info } = {}) {
@@ -63,7 +64,7 @@ export default {
       info.type = this.type;
       if (this.type == 'custom' && this.time.length > 0) {
         info.start = this.time[0];
-        info.end = this.time[1]
+        info.end = this.time[1];
       }
       let res = await this.query({ skip, limit, ...info });
       if (this.$checkRes(res)) {
@@ -76,12 +77,13 @@ export default {
         }
         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);
+      if (myChart != null && myChart != '' && myChart != undefined) {
+        myChart.dispose(); //销毁
+      }
+      myChart = echarts.init(document.getElementById('card_six'));
       var option;
       option = {
         title: {
@@ -131,9 +133,11 @@ export default {
     return { title: this.$route.meta.title };
   },
   watch: {
-    list: {
+    seriesList: {
       deep: true,
-      handler(val) { },
+      handler(val) {
+        this.getEchartData();
+      },
     },
   },
 };