image.png
<template>
<div class="timeSliderBox">
<div class="playType" @click="changePlayType">
<span :class="playType ? 'stopIcon' : 'playIcon'"></span>
</div>
<div class="slider">
<vue-slider :marks="marksFun" :tooltip-formatter="formatter2" ref="slider" v-model="sliderValue" :data="sliderData" :tooltip="'always'">
<template v-slot:dot>
<i class="custom-dot"></i>
</template>
</vue-slider>
</div>
</div>
</template>
<script>
import dayjs from 'dayjs'
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'
import Bus from "@/Common/Commonjs/bus.js";
import { removeNCPrimitives } from '@/Common/Tools/DrawPloyglonNC'
export default {
name: 'TimeSlider',
components: {
VueSlider
},
data () {
return {
marksFun: v => this.showMarkStyle(v),
playType: false,
sliderData: [],
sliderValue: '',
sliderNumber: 0,
formatter2: v => (dayjs(v, 'YYYY-MM-DD 00:00').format('D日 HH:00')),
timeInterval: 2 * 1000,
timer: null,
}
},
created () {
//取预报两天历史一天 就当天数据
this.sliderValue = dayjs().format('YYYY-MM-DD HH:00');
let startTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD 00:00');
for (let i = 0; i < 24 * 4 + 1; i++) {
let time = dayjs(startTime, 'YYYY-MM-DD HH:00').add(i, 'hour').format('YYYY-MM-DD HH:00')
this.sliderData.push(time)
if (time == this.sliderValue) {
this.sliderNumber = i
}
}
},
mounted(){
console.log(this.$refs.slider )
},
methods: {
showMarkStyle (v) {
if ((dayjs(v, 'YYYY-MM-DD 00:00').format('H')) % 3 == 0) {
if (dayjs(v, 'YYYY-MM-DD 00:00').format('HH') == '00') {
if (v == this.sliderData[this.sliderData.length - 1]) {
return {
label: dayjs(v, 'YYYY-MM-DD 00:00').format('D日'),
labelStyle: {
display: 'none'
},
style: {
height: '60px',
position: 'relative',
top: '-30px',
}
}
} else {
return {
label: dayjs(v, 'YYYY-MM-DD 00:00').format('D日'),
labelStyle: {
//display: 'none'
position: 'relative',
top: '-95px',
left: '10px',
color: '#E9E9E9',
fontSize: '14px',
fontWeight: 'bold'
},
style: {
height: '60px',
position: 'relative',
top: '-30px',
}
}
}
} else {
return {
label: dayjs(v, 'YYYY-MM-DD 00:00').format('HH'),
style: {
height: '12px',
position: 'relative',
top: '100%',
},
labelActiveStyle: {
color: '#8D8D8D'
}
}
}
} else {
return {
style: {
height: '8px',
position: 'relative',
top: '100%',
},
labelStyle: {
display: 'none'
},
}
}
},
changePlayType () {
console.log(this.playType)
this.playType = !this.playType;
if (this.playType) {
this.play()
} else {
if (this.timer != null) {
clearInterval(this.timer)
this.timer = null
}
}
},
play () {
this.sliderValue = this.sliderData[++this.sliderNumber]
this.timer = setInterval(() => {
this.sliderValue = this.sliderData[++this.sliderNumber]
if(this.sliderNumber == this.sliderData.length){
this.sliderValue = this.sliderData[0]
clearInterval(this.timer)
}
}, this.timeInterval)
},
},
watch:{
//监听时间变化
sliderValue(val){
let index = this.sliderData.findIndex(item =>{
return val == item
})
console.log(index)
this.sliderNumber = index!=-1?index:0
if(this.sliderNumber >= 96){
this.playType = false
}
// this.sliderNumber >= 96 ? this.playType = false:this.playType = true
Bus.$emit("sentChangeTime", dayjs(val).format('HH'));
},
sliderNumber(val){
console.log(val);
}
}
}
</script>
<style lang='scss' scoped>
.timeSliderBox {
user-select: none;
width: 100vw;
height: 60px;
position: absolute;
bottom: 0px;
left: 0px;
display: flex;
background: rgba(0, 0, 0, 0.75);
align-items: center;
.playType {
height: 60px;
width: 56px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-right: 1px solid #8e8e8e;
.playIcon {
width: 17px;
height: 22px;
background-image: url('~@/assets/images/bottom/play.png');
background-size: 100% 100%;
}
.stopIcon {
width: 17px;
height: 22px;
background-image: url('~@/assets/images/bottom/stop.png');
background-size: 100% 100%;
}
}
.slider {
display: flex;
align-items: center;
box-sizing: border-box;
height: 60px;
width: calc(100vw - 56px);
padding: 0 20px;
::v-deep.vue-slider-rail {
height: 8px;
background: #383838;
opacity: 0.9;
border-radius: 0px;
}
::v-deep.vue-slider-process {
background: #359ffc;
border-radius: 0px;
}
::v-deep.vue-slider {
width: 100% !important;
}
::v-deep.custom-dot {
position: relative;
top: -3px;
left: -1px;
display: inline-block;
width: 16px;
height: 16px;
border: 3px solid #fff;
background: #3498db;
border-radius: 20px;
}
::v-deep.vue-slider-dot-tooltip-inner {
border-color: rgba(53, 159, 252, 0.75);
background-color: rgba(53, 159, 252, 0.75);
box-shadow: 0 2px 8px rgb(53 159 252 / 15%);
border-radius: 2px;
}
::v-deep.vue-slider-mark {
width: 1px !important;
height: 8px !important;
}
::v-deep.vue-slider-mark-step {
box-shadow: none;
border-radius: 0px;
background: #8e8e8e;
}
::v-deep.vue-slider-mark-label {
color: #8e8e8e;
}
::v-deep.vue-slider-dot-tooltip-inner,
::v-deep.vue-slider-dot,
::v-deep.vue-slider-process {
transition-duration: 2s !important;
transition-property: all !important;
transition-timing-function: linear !important;
}
}
}
</style>
