<template>
<el-popoverplacement="left"trigger="click"v-model="timePopvisible">
<divstyle="500px"class="new_time">
<divv-show="!checkout"class="slider_box">
<el-sliderv-model="show_time1":min='1':max='10':step="1":show-tooltip="false"></el-slider>
<divclass="boxlist">
<spanv-for="(item,index)intimeList":key="index">{{item.text}}</span>
</div>
</div>
<divv-show="checkout">
<divstyle="height:20px"></div>
<el-date-pickerv-show="checkout"type="datetimerange"v-model="show_time2"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"style="100%"></el-date-picker>
<divstyle="height:20px"></div>
</div>
<el-checkboxv-model="checkout">切换模式</el-checkbox>
<divclass="btn_box">
<el-buttontype="primary"@click="sureTime(true)">确认</el-button>
<el-button@click="sureTime(false)">取消</el-button>
<el-button@click="clearTime()">清除时间</el-button>
</div>
</div>
<el-tagslot="reference"size="medium"class="tag">{{show_time_text}}</el-tag>
</el-popover>
</template>
<script>
importmomentfrom"moment";
exportdefault{
name:'TimeGroup',
data(){
return{
timePopvisible:false,
checkout:false,
timeList:[
{
type:'MINUTE',
text:'1时',
duration:60
},
{
type:'HOUR',
text:'4时',
duration:4
},
{
type:'HOUR',
text:'12时',
duration:12
},
{
type:'HOUR',
text:'1天',
duration:24
},
{
type:'DAY',
text:'3天',
duration:3
},
{
type:'DAY',
text:'5天',
duration:5
},
{
type:'DAY',
text:'1周',
duration:7
},
{
type:'DAY',
text:'2周',
duration:14
},
{
type:'DAY',
text:'1月',
duration:30
},
{
type:'MONTH',
text:'3月',
duration:3
}
],
show_time2:1,
show_time1:1,
show_time_text:'请选择时间'
}
},
props:["inforNum"],
methods:{
//得到显示的时间和数据
sureTime(data){
this.timePopvisible=false
if(data){
lettime;
lettype=""
letduration=''
if(this.checkout==false){
time=this.show_time1
if(typeoftime==='number'){
//从滑动条中得到的数据
lettemp=this.timeList[time-1]
this.timeParam=this.getNewFormatTime(temp.type,temp.duration)
}else{
time=1
//从滑动条中得到的数据
lettemp=this.timeList[time-1]
this.timeParam=this.getNewFormatTime(temp.type,temp.duration)
}
}else{
time=this.show_time2
//从时间选择器中得到的数据
letpreTime=time[0]
letabTime=time[1]
letminutes=moment(abTime).diff(preTime,"minutes")
letHours,Days,f,Month;
if(minutes>60){
Hours=minutes/60
}
if(Hours>24){
Days=Hours/24
}
if(Days>60){
Month=moment(abTime).diff(preTime,"month")
}
if(Month){
type="MONTH"
duration=Month
f="YYYY-MM";
}elseif(Days){
type="DAY"
duration=Days
f="YYYY-MM-DD";
}elseif(Hours){
type="HOUR"
f="YYYY-MM-DDHH";
duration=Hours
}else{
type="MINUTE"
duration=minutes
f="YYYY-MM-DDHHmm";
}
letendTime=moment(abTime).format(f);
letstartTime=moment(preTime).format(f);
letshowTime=moment(preTime).format('YYYY-MM-DDHH:mm')+'-'+moment(abTime).format("YYYY-MM-DDHH:mm");
letstartTimeData=moment(preTime).format('YYYY-MM-DDHH:mm');
letendTimeData=moment(abTime).format('YYYY-MM-DDHH:mm');
letmillisecondStart=moment(preTime).format('x');
letmillisecondEnd=moment(abTime).format('x');
this.timeParam={
step:type,
showTime,
start:startTime,
end:endTime,
duration,
startTimeData,
endTimeData,
millisecondStart,
millisecondEnd
}
}
this.show_time_text=this.timeParam.showTime
this.$emit("callBack",this.timeParam);
}
//else{
//this.$emit("callBack");
//}
},
getNewFormatTime(step,duration){
/*根据时间设置startTime和endTime:获取当前时间，往前推一个时间段*/
/*传入开始时间和step，得到特定格式的开始和结束时间*/
constnow=newDate();
letstartTime="";
letend=moment(now);
letendTime="";
letshowTime="";
letstartTimeData="";
letendTimeData="";
letf="";
letmillisecondStart='';
letmillisecondEnd='';
if(step==="DAY"){
f="YYYY-MM-DD";
endTime=moment(now).format(f);
startTime=moment(now.setDate(now.getDate()-duration)).format(f);
showTime=startTime+'-'+endTime;
startTimeData=startTime;
endTimeData=endTime
millisecondStart=moment(now.setDate(now.getDate()-duration)).format('x');
millisecondEnd=moment(now).format('x');
}elseif(step==="HOUR"){
f="YYYY-MM-DDHH";
endTime=moment(now).format(f);
startTime=moment(now.setHours(now.getHours()-duration)).format(f);
showTime=startTime+':00-'+endTime+':00';
startTimeData=startTime+':00';
endTimeData=endTime+':00'
millisecondStart=moment(now.setHours(now.getHours()-duration)).format('x');
millisecondEnd=moment(now).format('x');
}elseif(step==="MINUTE"){
f="YYYY-MM-DDHHmm";
endTime=moment(now).format(f);
letstart=""
if(duration===60){
leta=moment(now.setHours(now.getHours()-1))
startTime=a.format(f);
start=a.format('YYYY-MM-DDHH:mm');
}else{
startTime=moment(
now.setMinutes(now.getMinutes()-duration)
).format(f);
start=moment(now.setMinutes(now.getMinutes()-duration)).format('YYYY-MM-DDHH:mm');
}
showTime=start+'-'+end.format('YYYY-MM-DDHH:mm');
startTimeData=start;
endTimeData=end.format('YYYY-MM-DDHH:mm')
}elseif(step==="MONTH"){
f="YYYY-MM";
endTime=moment().format(f);
startTime=moment().subtract(duration,'month').format(f);
showTime=startTime+'-'+endTime;
startTimeData=startTime;
endTimeData=endTime
millisecondStart=moment().subtract(duration,'month').format('x');
millisecondEnd=moment().format('x');
}
return{
step,
start:startTime,
end:endTime,
duration,
showTime,
startTimeData,
endTimeData,
millisecondStart,//毫秒
millisecondEnd////毫秒
};
},
clearTime(){
if(this.inforNum){
lettime=this.$timeGroup.methods.getNewFormatTime("MINUTE",this.inforNum);
this.show_time_text="请选择时间"
this.show_time1=1
this.$emit("callBack",time);
alert(time);
this.timePopvisible=false
}else{
lettime=this.$timeGroup.methods.getNewFormatTime("MINUTE",60);
this.show_time_text="请选择时间"
this.show_time1=1
this.$emit("callBack",time);
this.timePopvisible=false
}
}
}
}
</script>
<stylescoped>
.tag{
cursor:pointer;
line-height:32px;
height:32px;
padding:020px;
}
.new_time.boxlist{
margin:-5px030px0;
position:relative;
}
.new_time.boxlistspan{
display:inline-block;
55px;
font-size:10px;
}
.new_time.boxlistspan:nth-child(1){
margin-left:-8px;
}
.new_time.boxlistspan:nth-child(10){
display:inline;
position:absolute;
right:-47px;
top:2px;
}
.new_time.btn_box{
text-align:center;
margin:20pxauto0;
}
.new_time.slider_box{
padding:06px;
}
</style>