image.png
image.png
image.png
image.png
image.png
1、目前僅滿足項(xiàng)目需求嘲恍，比較簡(jiǎn)單足画，幾乎不用傳參數(shù)，isShow表示是否顯示時(shí)間選擇控件佃牛，接口返回時(shí)間（格式統(tǒng)一為： 年-月-日）和時(shí)間維度淹辞。
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組件代碼實(shí)現(xiàn)
<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="請(qǐng)選擇評(píng)估時(shí)段"
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: '評(píng)估時(shí)間',
type: String
},
isShow: {// 是否顯示時(shí)間選擇框
default: true,
type: Boolean
}
},
data() {
return {
dateType: 'week',
dateParam: '',
timeType: '', // 時(shí)間維度
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: {
// 選擇時(shí)間
selectDateParam(val) {
this.evalutionTime = dateRange.formatDay(val);
this.selectTimeAndType()
},
// 選擇季度
selectSeason(val) {
this.evalutionTime = val;
this.selectTimeAndType()
},
// 選擇時(shí)間維度
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組件中還引入了一個(gè)季度選擇控件，代碼如下：
<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="請(qǐng)選擇季度" 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>
