今日、昨日、近7天、近30天、自定义
进入页面默认选择今日
自定义:时间选择跨度最多31天,只能选择当前日期之前的半年时间(前端限制)
<template>
<div class="select-box">
<div class="flex">
<template v-if="dateString.length <= 1">
<span>统计时间:</span>
<div class="flex-item">
{{ date | formatDateTime }}
</div>
</template>
<template v-else>
<span>统计时间:</span>
<div v-for="item in dateString" :key="item" class="flex-item">
{{ item | parseTime("{y}-{m}-{d}") }}
</div>
</template>
</div>
<div class="select-type">
<div class="time-type" v-for="item of timeType" @click="changeTimeType(item)" :key="item.id"
:class="item.id == selectTimeType ? 'time-type-active' : ''">
<div>
{{ item.name }}
</div>
</div>
<div class="time-type1" :class="selectTimeType == 0 ? 'active' : ''">
<a-range-picker v-model="searchInfo.date" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
:placeholder="['Start Time', 'End Time']" :disabled-date="disbaledDate"
@calendarChange="calendarPriceRangeChange" @ok="onOk">
<div :class="selectTimeType == 0 ? 'active' : ''">自定义</div>
</a-range-picker>
</div>
<div class="self-icon">
<a-tooltip placement="topRight">
<template slot="title">
<span>自定义支持在可选时间范围内,对任意连续31天的数据进行分析。
<p>
自定义周期查询下,默认将所选时间段与上一个时间段进行对比,例如,若查询时间选择10.11-10.20,则对比的时间段为10.01-10.10
</p>
</span>
</template>
<a-icon type="question-circle" style="cursor: pointer" />
</a-tooltip>
</div>
</div>
</div>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
timeType: [{ name: '今日', id: 1 }, { name: '昨日', id: 2 }, { name: '近七天', id: 3 }, { name: '近30天', id: 4 }],
date: new Date(),
dateString: [],
selectTimeType: 1, //默认选中今日
selectPriceDate: "",
offsetDays: 31 * 60 * 60 * 24 * 1000, //最多选择范围31天ms
searchInfo: {
date: [
moment(new Date().toLocaleDateString()),
moment(new Date().toLocaleDateString()),
],
}, //查询的参数
};
},
filters: {
formatDateTime(value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? "0" + MM : MM;
let d = date.getDate();
d = d < 10 ? "0" + d : d;
let h = date.getHours();
h = h < 10 ? "0" + h : h;
let m = date.getMinutes();
m = m < 10 ? "0" + m : m;
let s = date.getSeconds();
s = s < 10 ? "0" + s : s;
return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
},
},
created() {
this.$nextTick(function () {
});
},
mounted() {
this.timer = setInterval(() => {
if (this.dateString.length <= 1) {
this.date = new Date(); //修改数据date
}
}, 1000);
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前,清除我们的定时器
}
},
methods: {
// 切换时间类型选择--今日--昨日
changeTimeType(item) {
let newDays = [];
let toDate = new Date(new Date().toLocaleDateString()).getTime();
switch (item.id) {
case 8:
newDays = [toDate, toDate + (24 * 60 * 60 * 1000 - 1)] //结束时间];
break;
case 1:
newDays = [
toDate - 1 * 24 * 3600 * 1000,
toDate + (24 * 60 * 60 * 1000 - 1),
];
break;
case 2:
newDays = [
toDate - 7 * 24 * 3600 * 1000,
toDate + (24 * 60 * 60 * 1000 - 1),
];
break;
case 4:
newDays = [
toDate - 30 * 24 * 3600 * 1000,
toDate + (24 * 60 * 60 * 1000 - 1),
];
break;
default:
}
this.dateString = newDays;
this.selectTimeType = item.id;
this.$emit('timeChild', this.dateString)
},
// 选择开始时间/结束时间
calendarPriceRangeChange(date) {
this.selectPriceDate = date[0];
},
//根据选择的开始时间/结束时间,动态渲染要禁用的日期
disbaledDate(current) {
if (this.selectPriceDate) {
let selectV = moment(this.selectPriceDate, "x").valueOf();
let beforeSelectMax = moment().subtract(180, "day");//最大查询天
return (
current <= beforeSelectMax||
current >=moment(new Date(selectV + this.offsetDays).getTime(), "x") ||
current <=moment(new Date(selectV - this.offsetDays).getTime(), "x") ||
current >= moment().endOf("day")
);
} else {
const maxRange = 180; //最大查询天
let beforeSelectMax = moment().subtract(maxRange, "day");
let afterSelectMin = moment().subtract("day");
return (
current && (current >= afterSelectMin || current <= beforeSelectMax)
);
}
},
onChange(value, dateString) {
this.selectPriceDate = "";
},
// 确定的时间
onOk(value) {
console.log("onOk: ", value);
let { date } = this.searchInfo;
this.dateString = [
date[0] && new Date(date[0]).getTime(),
date[1] && new Date(date[1]).getTime(),
];
this.$emit('timeChild', this.dateString)
this.selectTimeType = 0;
return {
beginTime: date[0] && new Date(date[0]).getTime(),
endTime: date[1] && new Date(date[1]).getTime(),
};
},
},
};
</script>
<style lang="less" scoped>
.select-box {
padding: 20px;
width: 100%;
height: 86px;
background: #ffffff !important;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.flex {
display: flex;
justify-content: flex-start;
}
.flex-item:first-child {
margin-right: 10px;
}
.flex-item:last-child {
margin-left: 10px;
}
.select-type {
display: flex;
align-items: center;
.time-type {
height: 36px;
background: #f1f1f1;
border-radius: 4px;
padding: 11px 20px;
display: flex;
align-content: center;
margin-right: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 14px;
}
.time-type:first-child {
margin-left: 0px;
}
.time-type-active {
color: #ffffff;
background: #568bff;
}
.self-icon {
display: flex;
justify-content: center;
align-items: center;
margin-left: 8px;
}
.search-item {
margin: 0 10px;
}
}
.time-type-active {
color: #ffffff;
background: #568bff;
}
.time-type1 {
width: 82px;
height: 36px;
background: #f1f1f1;
border-radius: 4px;
padding: 11px 20px;
display: flex;
align-content: center;
align-items: center;
// margin-right: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 14px;
}
.active {
color: #fff !important;
background: #568bff;
}
</style>