vuetify——根据时间范围下拉选检索数据

最新推荐文章于 2024-09-09 08:32:03 发布

贝塔贝卡贝

最新推荐文章于 2024-09-09 08:32:03 发布

阅读量546

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/Kiruthika/article/details/124439497

版权

在这里插入图片描述

<span class="pr-4 text-h6">时间范围</span>
<v-select
  :items="dateRanges"
  v-model="dateRange"
  item-text="name"
  item-value="time"
  style="flex: none; background: none"
  @change="dateRangechange(dateRange)"
></v-select>

<script>
import { dateRanges, time_val } from "./util/dateRange";
export default {
	data(){
		return{
			dateRange:24,
			dateRanges
		}
	},
	methods:{
		dateRangechange(dateRange) {
	      let { start_time, end_time } = starttime_val(dateRange);
	      this.dashboardData(start_time, end_time);
	    },
	    dashboardData(start_time, end_time){
			//检索数据处理
		}
	}
}
</script>

util/dataRange.js

import { format } from "date-fns";

const dateRanges = [
  {
    name: "最近1小时",
    time: 1
  },
  {
    name: "最近6小时",
    time: 6
  },
  {
    name: "最近12小时",
    time: 12
  },
  {
    name: "最近24小时",
    time: 24
  },
  {
    name: "今天",
    time: format(new Date(), "HH")
  },
  {
    name: "昨天",
    time: 0
  },
  {
    name: "最近7天",
    time: 7 * 24
  },
  {
    name: "最近30天",
    time: 30 * 24
  },
  {
    name: "最近3个月",
    time: 90 * 24
  },
  {
    name: "最近6个月",
    time: 180 * 24
  }
];

function time_val(h) {
  const d = new Date();
  d.setMinutes(0);
  d.setSeconds(0);

  let hours = d.getHours();
  const timestring = d.getTime();
  let start_time, end_time;
  if (h !== 0) {
    start_time = new Date(timestring - h * 3600 * 1000);
    end_time = new Date(timestring - 3600 * 1000);
  } else {
    start_time = new Date(timestring - 24 * 3600 * 1000 - hours * 3600 * 1000);
    end_time = new Date(timestring - hours * 3600 * 1000);
  }

  return {
    start_time: format(start_time,"yyyy-MM-dd HH:mm-ss"),
    end_time: format(end_time,"yyyy-MM-dd HH:mm-ss")
  };
}


export { dateRanges, time_val };