|
|
@ -1,12 +1,12 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="title1"> |
|
|
|
<span class="title-bor"></span> |
|
|
|
{{ title }} |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<!-- <el-radio-group |
|
|
|
<div class="app-container"> |
|
|
|
<div class="title1"> |
|
|
|
<span class="title-bor"></span> |
|
|
|
{{ title }} |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<!-- <el-radio-group |
|
|
|
v-model="radioValue" |
|
|
|
size="small" |
|
|
|
style="height: 36px" |
|
|
@ -17,163 +17,158 @@ |
|
|
|
<el-radio label="2" border style="margin: 0 20px 0 0">季</el-radio> |
|
|
|
<el-radio label="3" border style="margin: 0 20px 0 0">年</el-radio> |
|
|
|
</el-radio-group> --> |
|
|
|
<el-date-picker |
|
|
|
v-model="pickerValue" |
|
|
|
type="daterange" |
|
|
|
align="right" |
|
|
|
unlink-panels |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
@change="pickerChage" |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-date-picker v-model="pickerValue" type="daterange" align="right" unlink-panels range-separator="至" |
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="pickerChage"> |
|
|
|
</el-date-picker> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
// import { deviceType } from "./index.js"; |
|
|
|
// this.$store.commit('headerFun', data) |
|
|
|
export default { |
|
|
|
name: "Post", |
|
|
|
props: ["title", "type"], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
radioValue: "1", |
|
|
|
radioTime: [], |
|
|
|
pickerValue: null, |
|
|
|
pickerOptions: { |
|
|
|
shortcuts: [ |
|
|
|
{ |
|
|
|
text: "最近一周", |
|
|
|
onClick(picker) { |
|
|
|
const end = new Date(); |
|
|
|
const start = new Date(); |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|
|
|
picker.$emit("pick", [start, end]); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "最近一个月", |
|
|
|
onClick(picker) { |
|
|
|
const end = new Date(); |
|
|
|
const start = new Date(); |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|
|
|
picker.$emit("pick", [start, end]); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "最近三个月", |
|
|
|
onClick(picker) { |
|
|
|
const end = new Date(); |
|
|
|
const start = new Date(); |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|
|
|
picker.$emit("pick", [start, end]); |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
console.log(this.pickerValue, 222); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
radioChange() { |
|
|
|
const start = new Date(); |
|
|
|
const end = new Date(); |
|
|
|
this.timeType = 4; |
|
|
|
if (this.radioValue == 0) { |
|
|
|
this.timeType = 4; |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|
|
|
this.radioTime = [start, end]; |
|
|
|
} |
|
|
|
if (this.radioValue == 1) { |
|
|
|
this.timeType = 4; |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|
|
|
this.radioTime = [start, end]; |
|
|
|
} |
|
|
|
if (this.radioValue == 2) { |
|
|
|
this.timeType = 1; |
|
|
|
const now = new Date(); // 当前日期 |
|
|
|
const nowYear = now.getFullYear(); //当前年 |
|
|
|
const nowMonth = now.getMonth(); //当前月 |
|
|
|
const nowDay = now.getDate(); // 当前日 |
|
|
|
const nowDayOfWeek = now.getDay(); // 周几 |
|
|
|
const jd = Math.ceil((nowMonth + 1) / 3); // 当前季度 |
|
|
|
const startDate = new Date(nowYear, (jd - 1) * 3, 1); |
|
|
|
const endDate = new Date(nowYear, jd * 3, 0); |
|
|
|
this.radioTime = [startDate, endDate]; |
|
|
|
} |
|
|
|
if (this.radioValue == 3) { |
|
|
|
this.timeType = 1; |
|
|
|
end.setTime(start.getTime()); |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365); |
|
|
|
this.radioTime = [start, end]; |
|
|
|
} |
|
|
|
this.$emit( |
|
|
|
"radio-change", |
|
|
|
this.pickerValue || this.radioTime, |
|
|
|
this.type, |
|
|
|
this.timeType |
|
|
|
); |
|
|
|
}, |
|
|
|
pickerChage() { |
|
|
|
if (!this.pickerValue) { |
|
|
|
this.radioChange(); |
|
|
|
} |
|
|
|
console.log(this.pickerValue, 111); |
|
|
|
this.radioTime = []; |
|
|
|
this.timeType = 4; |
|
|
|
if (this.radioValue == 0) { |
|
|
|
this.timeType = 4; |
|
|
|
} |
|
|
|
if (this.radioValue == 1) { |
|
|
|
this.timeType = 4; |
|
|
|
} |
|
|
|
if (this.radioValue == 2) { |
|
|
|
this.timeType = 1; |
|
|
|
} |
|
|
|
if (this.radioValue == 3) { |
|
|
|
this.timeType = 1; |
|
|
|
} |
|
|
|
this.$emit("picker-change", this.pickerValue, this.type, this.timeType); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
// import { deviceType } from "./index.js"; |
|
|
|
// this.$store.commit('headerFun', data) |
|
|
|
export default { |
|
|
|
name: "Post", |
|
|
|
props: ["title", "type"], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
radioValue: "1", |
|
|
|
radioTime: [], |
|
|
|
pickerValue: null, |
|
|
|
pickerOptions: { |
|
|
|
shortcuts: [{ |
|
|
|
text: "最近一周", |
|
|
|
onClick(picker) { |
|
|
|
const end = new Date(); |
|
|
|
const start = new Date(); |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|
|
|
picker.$emit("pick", [start, end]); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "最近一个月", |
|
|
|
onClick(picker) { |
|
|
|
const end = new Date(); |
|
|
|
const start = new Date(); |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|
|
|
picker.$emit("pick", [start, end]); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "最近三个月", |
|
|
|
onClick(picker) { |
|
|
|
const end = new Date(); |
|
|
|
const start = new Date(); |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
|
|
|
picker.$emit("pick", [start, end]); |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
console.log(this.pickerValue, 222); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
radioChange() { |
|
|
|
const start = new Date(); |
|
|
|
const end = new Date(); |
|
|
|
this.timeType = 4; |
|
|
|
if (this.radioValue == 0) { |
|
|
|
this.timeType = 4; |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
|
|
|
this.radioTime = [start, end]; |
|
|
|
} |
|
|
|
if (this.radioValue == 1) { |
|
|
|
this.timeType = 4; |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
|
|
|
this.radioTime = [start, end]; |
|
|
|
} |
|
|
|
if (this.radioValue == 2) { |
|
|
|
this.timeType = 1; |
|
|
|
const now = new Date(); // 当前日期 |
|
|
|
const nowYear = now.getFullYear(); //当前年 |
|
|
|
const nowMonth = now.getMonth(); //当前月 |
|
|
|
const nowDay = now.getDate(); // 当前日 |
|
|
|
const nowDayOfWeek = now.getDay(); // 周几 |
|
|
|
const jd = Math.ceil((nowMonth + 1) / 3); // 当前季度 |
|
|
|
const startDate = new Date(nowYear, (jd - 1) * 3, 1); |
|
|
|
const endDate = new Date(nowYear, jd * 3, 0); |
|
|
|
this.radioTime = [startDate, endDate]; |
|
|
|
} |
|
|
|
if (this.radioValue == 3) { |
|
|
|
this.timeType = 1; |
|
|
|
end.setTime(start.getTime()); |
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365); |
|
|
|
this.radioTime = [start, end]; |
|
|
|
} |
|
|
|
this.$emit( |
|
|
|
"radio-change", |
|
|
|
this.pickerValue || this.radioTime, |
|
|
|
this.type, |
|
|
|
this.timeType |
|
|
|
); |
|
|
|
}, |
|
|
|
pickerChage() { |
|
|
|
if (!this.pickerValue) { |
|
|
|
this.radioChange(); |
|
|
|
} |
|
|
|
console.log(this.pickerValue, 111); |
|
|
|
this.radioTime = []; |
|
|
|
this.timeType = 4; |
|
|
|
if (this.radioValue == 0) { |
|
|
|
this.timeType = 4; |
|
|
|
} |
|
|
|
if (this.radioValue == 1) { |
|
|
|
this.timeType = 4; |
|
|
|
} |
|
|
|
if (this.radioValue == 2) { |
|
|
|
this.timeType = 1; |
|
|
|
} |
|
|
|
if (this.radioValue == 3) { |
|
|
|
this.timeType = 1; |
|
|
|
} |
|
|
|
this.$emit("picker-change", this.pickerValue, this.type, this.timeType); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped src="@/assets/styles/common.css"></style> |
|
|
|
<style scoped> |
|
|
|
. >>> .el-radio--small.is-bordered { |
|
|
|
margin-right: 20px !important; |
|
|
|
margin-left: 0 !important; |
|
|
|
} |
|
|
|
>>> .el-radio__input { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
>>> .el-radio__label { |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
.app-container { |
|
|
|
padding: 0; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
.title1 { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
.title-bor { |
|
|
|
display: inline-block; |
|
|
|
height: 20px; |
|
|
|
width: 6px; |
|
|
|
background: #4f8bff; |
|
|
|
margin-right: 10px; |
|
|
|
border-radius: 8px; |
|
|
|
} |
|
|
|
.>>>.el-radio--small.is-bordered { |
|
|
|
margin-right: 20px !important; |
|
|
|
margin-left: 0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
>>>.el-radio__input { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
>>>.el-radio__label { |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.app-container { |
|
|
|
padding: 0; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.title1 { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.title-bor { |
|
|
|
display: inline-block; |
|
|
|
height: 20px; |
|
|
|
width: 6px; |
|
|
|
background: #4f8bff; |
|
|
|
margin-right: 10px; |
|
|
|
border-radius: 8px; |
|
|
|
} |
|
|
|
</style> |