feat: 获取时间筛选的值

src/views/page3/index.vue

@@ -5,11 +5,12 @@
         <div class="query">
           <img src="@/assets/img2/种植分析详情/编组 8.png" alt="" />
           <el-radio-group v-model="query.radio" class="radio-group">
-            <el-radio class="date" :label="1">近一周</el-radio>
-            <el-radio class="date" :label="2">近30天</el-radio>
-            <el-radio class="date" :label="3">近90天</el-radio>
+            <el-radio class="date" :label="6">近一周</el-radio>
+            <el-radio class="date" :label="30">近30天</el-radio>
+            <el-radio class="date" :label="90">近90天</el-radio>
           </el-radio-group>
           <el-date-picker
+            :pickerOptions="pickerOptions0"
             v-model="query.date[0]"
             type="date"
             placeholder="开始日期"
@@ -18,6 +19,7 @@
           </el-date-picker>
           <el-date-picker
             class="date"
+            :pickerOptions="pickerOptions1"
             v-model="query.date[1]"
             type="date"
             placeholder="结束日期"
@@ -44,6 +46,18 @@ import leftBox from './leftBox.vue'
 import leftBox2 from './leftBox2.vue'
 import { Button, DatePicker, RadioGroup, Radio } from 'element-ui'
 import Vue from 'vue'
+import dayjs from 'dayjs'
+
+// 获取近一周的日期范围
+function getLastDay(day) {
+  const end = dayjs() // 当前日期
+  const start = end.subtract(day, `day`) // 前六天
+  return { start: start.format(`YYYY-MM-DD`), end: end.format(`YYYY-MM-DD`) }
+}
+
+window.getLastDay = getLastDay
+window.dayjs = dayjs
+
 Vue.use(Button)
 Vue.use(RadioGroup)
 Vue.use(Radio)
@@ -56,17 +70,59 @@ export default {
     bgBox,
   },
   data() {
+    const vm = this
     return {
+      pickerOptions0: {
+        disabledDate(time) {
+          return time.getTime() > Date.now()
+        },
+      },
+      pickerOptions1: {
+        disabledDate(time) {
+          if (vm.query.date[0]) {
+            return (
+              time.getTime() < vm.query.date[0] || time.getTime() > Date.now()
+            )
+          } else {
+            return time.getTime() > Date.now()
+          }
+        },
+      },
       query: {
-        radio: 1,
+        radio: 6,
         date: [],
       },
     }
   },
   computed: {},
   async created() {},
+  watch: {
+    'query.radio': {
+      handler(val) {
+        if (this.query.radio) {
+          this.query.date = []
+          const { start, end } = getLastDay(this.query.radio)
+          this.getEchartData(start, end)
+        }
+      },
+      immediate: true,
+    },
+    'query.date'([a, b] = []) {
+      if (a && b) {
+        this.query.radio = 0
+        const start = dayjs(a || Date.now()).format(`YYYY-MM-DD`)
+        const end = dayjs(b || Date.now()).format(`YYYY-MM-DD`)
+        this.getEchartData(start, end)
+      } else if (!a && !b && !this.query.radio) {
+        this.query.radio = 6
+      }
+    },
+  },
   mounted() {},
   methods: {
+    getEchartData(start, end) {
+      console.log(`start, end`, start, end)
+    },
     backFn() {
       console.log(`backFn`)
     },
@@ -161,6 +217,9 @@ export default {
     .top {
       display: none;
     }
+    *[aria-hidden='true'] {
+      display: none;
+    }
   }
 }
 </style>