1

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

@@ -2,7 +2,27 @@
   <div id="card-1">
     <el-row>
       <el-col :span="24" class="main">
-        <div id="card_six" style="width: 70vw; height: 30vw"></div>
+        <el-col :span="24" class="one">
+          <el-button type="primary" size="mini" @click="toSelect('day')">今日</el-button>
+          <el-button type="primary" size="mini" @click="toSelect('week')">本周</el-button>
+          <el-button type="primary" size="mini" @click="toSelect('month')">本月</el-button>
+          <el-button type="primary" size="mini" @click="toSelect('year')">年度</el-button>
+          <el-button type="primary" size="mini" @click="toSelect('custom')">自定义</el-button>
+          <el-date-picker
+            @blur="onchang"
+            v-if="show == '1'"
+            v-model="time"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+        </el-col>
+        <el-col :span="24" class="two">
+          <div id="card_six" style="width: 70vw; height: 30vw"></div>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -10,6 +30,7 @@
 
 <script>
 import * as echarts from 'echarts';
+const moment = require('moment');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('todo');
 export default {
@@ -20,21 +41,33 @@ export default {
     return {
       xAxisList: [],
       seriesList: [],
+      // 时间
+      time: [],
+      // 是否显示自定义
+      show: '0',
+      // 查询类型
+      type: '',
     };
   },
   computed: {
     ...mapState(['user']),
   },
-  mounted() {},
+  mounted() { },
   async created() {
     await this.search();
   },
   methods: {
     ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
     async search({ skip = 0, limit = 10, ...info } = {}) {
+      info.status = '3';
+      info.type = this.type;
+      if (this.type == 'custom' && this.time.length > 0) {
+        info.start = this.time[0];
+        info.end = this.time[1]
+      }
       let res = await this.query({ skip, limit, ...info });
       if (this.$checkRes(res)) {
-        let list = res.data.sMarkOrder;
+        let list = res.data.sAfterSale;
         let xAxisList = [];
         let seriesList = [];
         for (const p1 of list) {
@@ -80,6 +113,19 @@ export default {
       };
       myChart.setOption(option);
     },
+    toSelect(type) {
+      this.$set(this, `type`, type);
+      if (type == 'custom') {
+        this.$set(this, `show`, '1');
+      } else {
+        this.$set(this, `show`, '0');
+      }
+      this.search();
+    },
+    // 时间选择
+    onchang() {
+      this.search();
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -87,7 +133,7 @@ export default {
   watch: {
     list: {
       deep: true,
-      handler(val) {},
+      handler(val) { },
     },
   },
 };
@@ -95,6 +141,20 @@ export default {
 
 <style lang="less" scoped>
 .main {
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .one {
+    margin: 1vw 0;
+    text-align: center;
+    span {
+      margin: 0 1vw;
+    }
+  }
+  .two {
+    width: 100%;
+  }
+}
+.el-range-editor--small.el-input__inner {
+  margin: 0 0 0 1vw;
 }
 </style>