lcw

src/views/home/model/mesgSwitch/timeData.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+ <el-date-picker v-model="listQuery" :type="type" :shortcuts="shortcuts" range-separator="至" start-placeholder="开始时间"
+    :value-format="valueFrmat" :format="valueFrmat" end-placeholder="结束时间" @change="changeTime" />
+  </div>
+
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+const props = defineProps({
+ type: {
+    type: String,
+    default: "datetimerange"
+  },
+  valueFrmat: {
+    type: String,
+    default: "YYYY-MM-DD HH:mm:ss"
+  }
+
+})
+const listQuery = ref([])
+const emit = defineEmits(['changeTime'])
+
+// 日期变化时发出事件
+const changeTime = (val) => {
+  const promes = {
+    startTime:val?.[0] || '',
+    endTime: val?.[1] || ''
+  }
+  emit('changeTime', promes);
+};
+
+const shortcuts = [
+  {
+    text: '近3天',
+    value: () => {
+      // 结束时间：当前日期的23:59:59
+      const end = new Date()
+      end.setHours(23, 59, 59, 999)
+      // 开始时间：3天前的00:00:00
+      const start = new Date()
+      start.setDate(start.getDate() - 3)
+      start.setHours(0, 0, 0, 0)
+      return [start, end]
+    },
+  },
+  {
+    text: '近7天',
+    value: () => {
+      // 结束时间：当前日期的23:59:59
+      const end = new Date()
+      end.setHours(23, 59, 59, 999)
+      // 开始时间：3天前的00:00:00
+      const start = new Date()
+      start.setDate(start.getDate() - 7)
+      start.setHours(0, 0, 0, 0)
+      return [start, end]
+    },
+  },
+  {
+    text: '近30天',
+    value: () => {
+      const end = new Date()
+      end.setHours(23, 59, 59, 999)
+      const start = new Date()
+      start.setMonth(start.getMonth() - 1)
+      start.setHours(0, 0, 0, 0)
+      return [start, end]
+    },
+  },
+]
+
+</script>
+
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+</style>