//时间控件
<el-col class="bts">
<template>
下单开始时间:
<el-date-picker
v-model="orderTimeBegin"
class="timePicker"
type="month"
placeholder="开始日期"
value-format="yyyy-MM"
:picker-options="pickerOptionsStart"
>
</el-date-picker>
下单结束时间:
<el-date-picker
v-model="orderTimeEnd"
class="timePicker"
type="month"
placeholder="结束日期"
value-format="yyyy-MM"
:picker-options="pickerOptionsEnd"
>
</el-date-picker>
<el-button
@click="query()"
type="primary"
icon="el-icon-search"
v-loading.fullscreen.lock="fullscreenLoading"
class="top-button"
>搜索</el-button
>
</template>
</el-col>
//
export default {
data() {
pickerOptionsStart: {
disabledDate: time => {
if (this.orderTimeEnd) {
return (
time.getTime() > Date.now() - 8.64e6 ||
time.getTime() > new Date(this.orderTimeEnd).getTime()
);
}
return time.getTime() > Date.now() - 8.64e6;
}
},
pickerOptionsEnd: {
disabledDate: time => {
if (this.orderTimeBegin) {
return (
time.getTime() > Date.now() ||
time.getTime() < new Date(this.orderTimeBegin).getTime()
);
}
return time.getTime() > Date.now() - 8.64e6;
}
},
orderTimeBegin: "",
orderTimeEnd: "",
}
},
methods: {
dataTime() {
this.orderTimeEnd = new Date();
this.orderTimeBegin=new Date();
this.orderTimeBegin.setMonth(new Date().getMonth() - 3);
this.orderTimeBegin =this.orderTimeBegin.getFullYear() + "-" + (this.orderTimeBegin.getMonth() + 1);
this.orderTimeEnd =this.orderTimeEnd.getFullYear() + "-" + (this.orderTimeEnd.getMonth() + 1)
},
getYearMonthList() {
let dataArr = [];
let date1 = this.orderTimeEnd.split("-");
date1 = parseInt(date1[0]) * 12 + parseInt(date1[1]);
let date2 = this.orderTimeBegin.split("-");
date2 = parseInt(date2[0]) * 12 + parseInt(date2[1]);
let diff = date1 - date2;
let data = new Date(this.orderTimeEnd);
console.log("data", data);
data.setMonth(data.getMonth() + 1); //获取到当前月份,设置月份
for (let i = 0; i < diff+1; i++) {
data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
let m = data.getMonth()+1;
dataArr.push(data.getFullYear() + "." + m);
}
console.log("dataArr", dataArr);
return _.sortBy(dataArr, data => data);
},
//查询按钮
query() {
if(this.orderTimeEnd == null || this.orderTimeEnd == '') {
this.$message({
message: '请输入下单结束时间',
type: "error"
})
return false
}
if(this.orderTimeBegin == null || this.orderTimeBegin == '') {
this.$message({
message: '请输入下单开始时间',
type: "error"
})
return false
}
const categories = this.getYearMonthList();
axiosUtil
.post("dashboard/query", {
orderTimeBegin: this.orderTimeBegin,
orderTimeEnd: this.orderTimeEnd
})
.then(res => {
.......
//折线图X轴数据为时间月份
this.chartone.xAxis[0].setCategories(categories);
})
},
//近页面调用时间控件默认时间,默认查询
mounted() {
this.dataTime();
this.query();
}
vue获取月份差,及月份差list,时间控件默认值
最新推荐文章于 2024-09-10 11:07:36 发布