image.png
image.png
image.png
image.png
image.png
1、目前仅满足项目需求，比较简单，几乎不用传参数，isShow表示是否显示时间选择控件，接口返回时间（格式统一为： 年-月-日）和时间维度。
selectTimeAndType(params) {
this.listQuery.dateParam = params.time;
this.listQuery.timeDime = params.type;
this.handleFilter();
}
<time-component ref="timeComponent" :isShow="isShow"
@selectTimeAndType="selectTimeAndType"></time-component>
time-component组件代码实现
<template>
<div class="tpl-select-group">
<el-button-group>
<el-button v-for="item in timeDime" :type="item.type" :key="item.id" size="mini"
@click="selectTimeDime(item.id,item.dateType)">{{item.name}}</el-button>
</el-button-group>
<span v-show="isShow">
<span style="margin-left:20px;font-size: 14px">{{lable}}:</span>
<el-date-picker
v-model="dateParam"
:type="dateType"
:format="dateType=='week'?'yyyy 第 WW 周':''"
placeholder="请选择评估时段"
size="mini"
v-if="dateType!=''"
@change="selectDateParam">
</el-date-picker>
<quarter-component ref="quarterComponent" v-if="dateType==''" @selectSeason="selectSeason" style="display: inline-block;position: relative;"></quarter-component>
</span>
</div>
</template>
<script>
import QuarterComponent from '@/views/aiBrain/benchmarking/scoreRanking/quarterComponent.vue'
import { dateRange } from '@/utils/dateRange'
const timeDime = [
{
id: 1,
value: 'YEAR',
name: '年',
type: '',
dateType: 'year'
}, {
id: 2,
value: 'QUARTER',
name: '季',
type: '',
dateType: ''
}, {
id: 3,
value: 'MONTH',
name: '月',
type: '',
dateType: 'month'
}, {
id: 4,
value: 'WEEK',
name: '周',
type: '',
dateType: 'week'
}, {
id: 5,
value: 'DAY',
name: '日',
type: '',
dateType: 'date'
}
]
export default {
components: {
QuarterComponent
},
props: {
lable: {
default: '评估时间',
type: String
},
isShow: {// 是否显示时间选择框
default: true,
type: Boolean
}
},
data() {
return {
dateType: 'week',
dateParam: '',
timeType: '', // 时间维度
timeDime: JSON.parse(JSON.stringify(timeDime)),
evalutionTime: ''
}
},
created() {
this.timeDime.map((item, index) => {
if (this.dateType === item.dateType) {
this.timeDime[index].type = 'primary';
this.timeType = this.timeDime[index].value;
}
})
this.dateParam = dateRange.formatDay(new Date());
this.evalutionTime = this.dateParam;
this.selectTimeAndType()
},
methods: {
// 选择时间
selectDateParam(val) {
this.evalutionTime = dateRange.formatDay(val);
this.selectTimeAndType()
},
// 选择季度
selectSeason(val) {
this.evalutionTime = val;
this.selectTimeAndType()
},
// 选择时间维度
selectTimeDime(id, dateType) {
this.timeDime = JSON.parse(JSON.stringify(timeDime));// 清空
this.dateType = dateType;
this.timeDime.map((item, index) => {
if (id === item.id) {
this.timeDime[index].type = 'primary';
this.timeType = this.timeDime[index].value;
}
})
this.evalutionTime = dateRange.formatDay(new Date());
this.selectTimeAndType()
},
clearSelTime() { // 清空选择
if (this.dateType === '') {
this.$refs.quarterComponent.clearInput();
} else {
this.dateParam = '';
}
},
selectTimeAndType() {
this.$emit('selectTimeAndType', { 'time': this.evalutionTime, 'type': this.timeType })
}
}
}
</script>
其中timeComponent组件中还引入了一个季度选择控件，代码如下：
<template>
<div>
<mark
style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
v-show="showSeason"
@click.stop="showSeason=false"
></mark>
<el-input placeholder="请选择季度" size="mini" v-model="showValue" style="width:138px;" @focus="showSeason=true">
<i slot="prefix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-card
class="box-card"
style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
v-show="showSeason"
>
<div slot="header" class="clearfix" style="text-align:center;padding:0">
<button
type="button"
aria-label="前一年"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
@click="prev"
></button>
<span role="button" class="el-date-picker__header-label">{{year}}年</span>
<button
type="button"
aria-label="后一年"
@click="next"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
></button>
</div>
<div class="text item" style="text-align:center;">
<el-button
type="text"
size="medium"
style="width:40%;color: #606266;float:left;"
@click="selectSeason(0)"
>第一季度</el-button>
<el-button
type="text"
size="medium"
style="float:right;width:40%;color: #606266;"
@click="selectSeason(1)"
>第二季度</el-button>
</div>
<div class="text item" style="text-align:center;">
<el-button
type="text"
size="medium"
style="width:40%;color: #606266;float:left;"
@click="selectSeason(2)"
>第三季度</el-button>
<el-button
type="text"
size="medium"
style="float:right;width:40%;color: #606266;"
@click="selectSeason(3)"
>第四季度</el-button>
</div>
</el-card>
</div>
</template>
<script>
import { dateRange } from '@/utils/dateRange'
const quarterArray = [{
value: 1,
list: ['01', '02', '03']
}, {
value: 2,
list: ['04', '05', '06']
}, {
value: 3,
list: ['07', '08', '09']
}, {
value: 4,
list: ['10', '11', '12']
}]
export default {
props: {
getValue: {
default: () => {},
type: Function
},
defaultValue: {
default: '',
type: String
}
},
data() {
return {
quarterArray: quarterArray,
showSeason: false,
season: '',
year: new Date().getFullYear(),
showValue: ''
}
},
created() {
const value = dateRange.formatDay(new Date());
const arr = value.split('-')
this.year = arr[0];
const month = arr[1];
let quarter = 1;
quarterArray.find((item, index) => {
item.list.find((vo) => {
if (vo === month) {
quarter = item.value;
return;
}
})
})
this.showValue = `${this.year}年 第${quarter}季度`
},
methods: {
one() {
this.showSeason = false
},
prev() {
this.year = this.year * 1 - 1
},
next() {
this.year = this.year * 1 + 1
},
selectSeason(i) {
const that = this
that.season = i + 1
that.showSeason = false
this.showValue = `${this.year}年 第${this.season}季度`
var dateParam = '';
if (this.season === 1) {
dateParam = '-01-01'
} else if (this.season === 2) {
dateParam = '-04-01'
} else if (this.season === 3) {
dateParam = '-07-01'
} else if (this.season === 4) {
dateParam = '-10-01'
}
that.$emit('selectSeason', this.year + dateParam)
},
clearInput() {
this.showValue = '';
}
}
}
</script>
