javascript
复制代码
<template>
<div class="time-picker">
<el-radio-group size="small" v-model="timeType" @change="changePickerType">
<el-radio-button label="hour" v-if="isShow">时</el-radio-button>
<el-radio-button label="day">日</el-radio-button>
<el-radio-button label="month">月</el-radio-button>
<el-radio-button label="quarter">季</el-radio-button>
<el-radio-button label="year">年</el-radio-button>
</el-radio-group>
<el-date-picker v-if="timeType != 'year' && timeType != 'quarter'" v-model="timeList" :type="pickerType[timeType].type" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 300px" value-format="timestamp" :clearable="false" :format="pickerType[timeType].format" @change="changeDatePicker" class="select-time" popper-class="time-popper" :default-time="['00:00:00', '23:00:00']">
</el-date-picker>
<YearYear1 v-if="timeType == 'year'" style="width:300px" :initYear="dateValue2" @updateTimeRange="updateStatisticYear" />
<QuarterTime v-if="timeType == 'quarter'" @getQuarter="getQuarter"></QuarterTime>
</div>
</template>
<script>
import YearYear1 from "@/components/YearYear1";
import QuarterTime from "@/components/QuarterTime";
export default {
model: {
prop: "times",
event: "updatetimes",
},
props: {
times: {
type: Array,
},
isShow: {
type: Boolean,
default: true,
},
},
components: {
YearYear1,
QuarterTime,
},
data() {
return {
timeType: "hour",
timeList: [],
yearTime: [],
dateValue2: [],
pickerType: {
hour: {
type: "datetimerange",
format: "yyyy-MM-dd HH时",
},
day: {
type: "daterange",
},
month: {
type: "monthrange",
},
quarter: {
type: "quarter",
},
year: {
type: "year",
},
},
};
},
methods: {
changePickerType(type) {
let dayType = {
month: {
type: "years",
count: 1,
},
day: {
type: "days",
count: 3,
},
hour: {
type: "days",
count: 3,
},
quarter: {
type: "quarter",
count: 1,
},
year: {
type: "years",
count: 2,
},
};
// var moment = require("moment");
// const startDay = moment()
// .subtract(dayType[type].count, dayType[type].type)
// .format("YYYY-MM-DD HH:00:00");
// const endDay = moment().format("YYYY-MM-DD HH:00:00");
// this.timeList = [
// new Date(startDay).getTime(),
// new Date(endDay).getTime(),
// ];
this.timeList = [];
this.yearTime = this.timeList;
// this.$emit("updatetimes", this.timeList);
},
isNull(value) {
if (value) {
return false;
}
return true;
},
//获取季度子组件传回的数据
getQuarter(val) {
console.log("季节:", val);
},
// 选择年
updateStatisticYear(val) {
console.log("年", val);
},
changeDatePicker(e) {
console.log("选择:", e);
this.$emit("updatetimes", e);
},
},
};
</script>
<style lang="scss" scoped>
.time-picker {
display: flex;
}
.time-popper {
.el-time-spinner {
display: flex;
justify-content: center;
& > :nth-child(2) {
display: none;
}
}
.el-picker-panel__footer {
& > :first-child {
display: none;
}
}
}
.el-radio-group {
margin-right: 10px;
}
.year-picker {
line-height: 28px;
}
::v-deep .el-radio-button--small .el-radio-button__inner {
height: 36px;
line-height: 18px;
}
::v-deep .el-range-editor--small.el-input__inner {
height: 36px;
line-height: 18px;
}
::v-deep .el-range-editor--small .el-range__icon {
line-height: 30px;
}
</style>