<template>
<div>
<div class="group">
<el-select v-model="histype" placeholder="按日期查看" @change="histypeChanged">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<el-form :model="params" ref="params" :inline="true">
<div class="group">
<el-form-item>
<el-date-picker v-model="params.date" type="datetimerange" range-separator="~" start-placeholder="开始日期"
end-placeholder="结束日期" v-show="dateType=='day'" value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']" @input="immediUpdate">
</el-date-picker>
<el-date-picker v-model="params.date" type="monthrange" range-separator="至" start-placeholder="开始月份"
end-placeholder="结束月份" v-show="dateType=='month'" value-format="yyyy-MM-dd" @input="immediUpdate">
</el-date-picker>
<el-date-picker v-model="params.date" type="monthrange" range-separator="至" start-placeholder="开始年月"
end-placeholder="结束年月" v-show="dateType=='year'" value-format="yyyy-MM-dd" @input="immediUpdate">
</el-date-picker>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
data() {
return {
params: {
date: "",
},
options: [{
value: 'day',
label: '按日期查看'
}, {
value: 'month',
label: '按月份查看'
}, {
value: 'year',
label: '按年份查看'
}],
}
}
method:{
histypeChanged(value) {
console.log(value);
this.dateType = value;
if (this.dateType == 'day') {
this.timeType = 1
} else if (this.dateType == 'month') {
this.timeType = 2
} else if (this.dateType == 'year') {
this.timeType = 3
}
this.params.date = '';
this.startTime = '';
this.endTime = '';
this.getNowTime();
},
getNowTime() {
console.log(this.dateType)
if (this.dateType == 'day') {
let curDate = (new Date()).getTime();
let dayNum = 3 * 24 * 3600 * 1000;
let threeDays = curDate - dayNum;
// console.log(this.getLocalTime(curDate), this.getLocalTime(threeDays))
let sDay = this.getLocalTime(threeDays)
let end = this.getLocalTime(curDate)
this.params.date = [sDay, end]
} else if (this.dateType == 'month') {
var date = new Date()
var befdate = date.setMonth(date.getMonth() - 3)
var bb = new Date(befdate);
var bDate = this.formatDate(bb); // 时间戳转日期格式
let curDate = (new Date()).getTime();
var nDate = this.getLocalTime(curDate);
nDate = nDate.substring(0, nDate.length - 9)
// console.log('MMMMMMMMMMM', bDate, nDate)
this.params.date = [bDate, nDate]
} else if (this.dateType == 'year') {
var date = new Date()
var befdate = date.setMonth(date.getMonth() - 12)
var bb = new Date(befdate);
var bDate = this.formatDate(bb); // 时间戳转日期格式
let curDate = (new Date()).getTime();
var nDate = this.getLocalTime(curDate);
nDate = nDate.substring(0, nDate.length - 9)
// console.log('MMMMMMMMMMM', bDate, nDate)
this.params.date = [bDate, nDate]
}
},
// 时间戳转日期格式 (精确到 秒)
add0(m) { return m < 10 ? '0' + m : m },
getLocalTime(nS) {
// return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ');
// return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ');
//shijianchuo是整数,否则要parseInt转换
var time = new Date(nS);
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
},
// 时间戳转日期格式 (精确到 天)
formatDate(now) {
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
};
if (date >= 0 && date <= 9) {
date = "0" + date;
};
return year + "-" + month + "-" + date;
},
// 日期格式转时间戳
dateToMs(date) {
return new Date(date).getTime()
}
}
</script>