起始时间 time1 结束时间 time2 输入时间类型: yyyy-MM-dd HH:mm:ss
<div>
<div class="timeline">
<!-- 时间 -->
<div class="pie_engine_earth_time_line">
<!-- 按钮 -->
<div class="control">
<div class="play" @click="control">
<i class="iconfont" v-show="status"></i>
<i class="iconfont" v-show="!status"></i>
</div>
</div>
<div class="line_box">
<div class="line">
<div class="cover" ref="DivWidth" @mousemove="MouseDate" @click="ClickDate"></div>
<div class="progerss_line">
<div class="palyed" :style="LeftWidth"></div>
<div class="bg" ></div>
</div>
<div class="time_code" :class="{ hide: codeIsOnLine }" :style="timeOffsetX">
<div class="box">{{ timeCode }}</div>
</div>
<div class="pointer_code" :style="mouseOffsetX">
<div class="box">{{ datatime }}</div>
</div>
<div class="calendar">
<div
class="calendar_lab"
:style='WX'
v-for="(item, index) in Datalist"
:key="index"
>{{ item }}</div>
</div>
<div class="calendars">
<div
class="calendar_lab"
:style='WXs'
v-for="(item, index) in list"
:key="index"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import "@/assets/iconfont/iconfont.css";
export default {
name: 'timeline',
data() {
return {
codeIsOnLine: true,
PickerOne:'',
PickerTwo:'',
time1: '2021-11-28 00:00:00',
time2: '2021-12-10 00:00:00',
status: true, // 控制按钮图标
value1: '',
value2:'',
newtime:'', // 默认当前起始时间
v1:'', // 起始时间
v2:'', // 结束时间
duration:'', // 时间差-天数
codeX:'', // 时间轴与背景轴的百分比
X: '', // 鼠标在轴上移动的距离
WidthX: '', // 当前背景轴宽度
iHours: '', // 小时
iSecond: '', // 起始与结束时间戳之差
StartTime:'', // 起始时间戳
EndTime: '', // 结束时间
datatime:'', // 鼠标提示框
timeCode: '', // 点击提示框
MouseX:'', // 鼠标移动提示框距离
timeX:'', // 鼠标点击提示框距离
Datalist: [], // 总天数
list:[], // 刻度
WX:'', //宽度
WXs:'', // 刻度宽度
};
},
created(){
this.PickerOne = this.time1
this.PickerTwo = this.time2
},
mounted() {
// 当前背景轴宽度
this.WidthX = this.$refs.DivWidth.clientWidth
// 时间为空
this.TimeEmpty()
},
computed: {
LeftWidth(){
return {
width: this.codeX ,
}
},
// 鼠标移动提示框距离
mouseOffsetX() {
return {
left: this.MouseX + "px",
};
},
// 鼠标点击移动距离
timeOffsetX(){
return {
left: this.timeX + "px",
};
}
},
methods: {
Click(){
this.time1 =this.PickerOne
this.time2 = this.PickerTwo
this.TimeEmpty()
},
// 起始结束时间为0
TimeEmpty(){
// 没有输入起始时间则默认起始为当前时间
if(this.time1 == '' && this.time2 == ''){
this.time1 = this.NewFormatDate(new Date())
this.newtime = new Date(this.time1).getTime() //当前时间时间戳
var num = new Date(this.time1).getTime() + 518400000 // 结束时间为一周后
this.time2 = this.formatDateTime(num)
if(this.time1.trim().split(" ")[1] !== '00:00:00'){
this.time1 = this.time1.trim().split(" ")[0] + ' ' + '00:00:00'
}
if(this.time2.trim().split(" ")[1] !== '00:00:00'){
this.time2 = this.time2.trim().split(" ")[0] + ' ' + '23:59:59'
}
// 起始时间减一天
this.StartTime = new Date(this.time1).getTime()
// 结束时间加一天
this.EndTime = new Date(this.time2).getTime()
this.DefaultTime(this.StartTime,this.EndTime)
var gap = (this.EndTime - this.StartTime) / 86400000
this.WX = 'width:' + 100/ gap + '%'
for(var i = 0;i< gap; i++){
var date = this.formatDate(this.StartTime + (86400000 * i))
this.Datalist.push(date)
}
} else if(this.time1 !== '' && this.time2 !== '') {
// 起始与结束时间不为空
this.newtime = new Date(this.NewFormatDate(new Date())).getTime()
// 计算时间差
this.Daytime()
}else if(this.time1 == '' || this.time2 == ''){
alert('请填写完整起始时间、结束时间')
}
},
// 时间戳转化成日期
formatDateTime(inputTime) {
var date = new Date(inputTime);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
},
// 时间戳转化成日期(不包含时分秒)
formatDate(inputTime) {
var date = new Date(inputTime);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + '-' + m + '-' + d
},
// 时间戳转化成日期(只包含年月)
formatYear(inputTime) {
var date = new Date(inputTime);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + '-' + m
},
// 标准时间转化为yyyy-MM
NewFormatDate(date) {
let formatDate;
formatDate = new Date(date);
formatDate =
formatDate.getFullYear() +
"-" +
(formatDate.getMonth() + 1 > 9
? formatDate.getMonth() + 1
: "0" + (formatDate.getMonth() + 1)) +
"-" +
(formatDate.getDate() > 9
? formatDate.getDate()
: "0" + formatDate.getDate()) +
" " +
(formatDate.getHours() > 9
? formatDate.getHours()
: "0" + formatDate.getHours()) +
":" +
(formatDate.getMinutes() > 9
? formatDate.getMinutes()
: "0" + formatDate.getMinutes()) +
":" +
(formatDate.getSeconds() > 9
? formatDate.getSeconds()
: "0" + formatDate.getSeconds());
return formatDate;
},
// 鼠标在轴上的距离
MouseDate(event){
this.X = event.offsetX
this.MouseX = event.offsetX
this.iSecond = this.EndTime - this.StartTime // 起始与结束时间戳之差
// 当前所点击位置的时间戳
var time = this.iSecond * (this.X / this.WidthX) + this.StartTime
this.datatime = this.formatDateTime(time)
},
// 点击移动轴
ClickDate(event){
this.codeIsOnLine = false // 点击后显示提示框
this.timeX = event.offsetX // 点击后获取鼠标位置赋给提示框
this.codeX = (this.X / this.WidthX) * 100 + '%' //时间轴与背景轴的百分比
this.iSecond = this.EndTime - this.StartTime // 起始与结束时间戳之差
// 当前所点击位置的时间戳
var time = this.iSecond * (this.X / this.WidthX) + this.StartTime
this.timeCode = this.formatDateTime(time)
console.log(this.timeCode);
},
// 计算时间差
Daytime(){
this.v1 = new Date(this.time1).getTime()
this.v2 = new Date(this.time2).getTime()
var iDays =((this.v2 - this.v1) / 1000 / 60 / 60 /24) // 天数
this.duration = Math.ceil(iDays) // 天数向上取整
this.Timetreat()
},
// 默认起始时间位置
DefaultTime(StartTime,EndTime){
if(EndTime < this.newtime ){
this.codeIsOnLine = true // 点击后显示提示框
this.codeX = 0 //当前时间在时间轴上所占百分比
this.timeX = 0 // 获取默认时间位置赋给提示框
}else {
this.codeIsOnLine = false // 点击后显示提示框
var NewPercentage = (this.newtime - StartTime) /(EndTime - StartTime) // 当前时间在时间轴上所占比列
this.codeX = NewPercentage * 100 + '%' //当前时间在时间轴上所占百分比
this.timeX = NewPercentage * this.WidthX // 获取默认时间位置赋给提示框
this.timeCode = this.NewFormatDate(new Date()) //默认提示框内容
}
},
// 判断比例尺范围
Timetreat(){
var T1 = '00:00:00' // 时间
var T2 = '23:59:59'
var month1 = this.time1.trim().split(" ")[0].split("-")[1] // 获取起始对应几月
var month2 = this.time2.trim().split(" ")[0].split("-")[1] // 获取结束对应几月
var year1 = this.time1.trim().split(" ")[0].split("-")[0] // 获取起始对应年份
var year2 = this.time2.trim().split(" ")[0].split("-")[0] // 获取结束对应年份
// 天
if(Number(this.duration) <= 7){
// 默认为0点
if(this.time1.trim().split(" ")[1] !== '00:00:00'){
this.time1 = this.time1.trim().split(" ")[0] + ' ' + T1
}
if(this.time2.trim().split(" ")[1] !== '00:00:00'){
this.time2 = this.time2.trim().split(" ")[0] + ' ' + T2
}
// 起始时间减一天
this.StartTime = new Date(this.time1).getTime()
// 结束时间为起始时间+7天
this.EndTime = new Date(this.time1).getTime() + 604800000
this.DefaultTime(this.StartTime,this.EndTime)
var gap = (this.EndTime - this.StartTime) / 86400000
var gaps = (this.EndTime - this.StartTime) / 3600000
this.WXs = 'width:' + 100/ gaps + '%'
for(var i = 0;i< gaps; i++){
var dates = this.formatDateTime(this.StartTime + (3600000 * i))
this.list.push(dates)
}
this.WX = 'width:' + 100/ gap + '%'
for(var i = 0;i< gap; i++){
var date = this.formatDate(this.StartTime + (86400000 * i))
this.Datalist.push(date)
}
}
// 月
else if( Number(this.duration) > 7 && Number(this.duration) < 31) {
this.Datalist = []
this.list = []
var day1 = '01'
// 判断几月
if(month2 == '01'){
let day2 = 31
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '02'){
let day2 = 28
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '03'){
let day2 = 31
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '04'){
let day2 = 30
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '05'){
let day2 = 31
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '06'){
let day2 = 30
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '07'){
let day2 = 31
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '08'){
let day2 = 31
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '09'){
let day2 = 30
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '10'){
let day2 = 31
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '11'){
let day2 = 30
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}else if(month2 == '12'){
let day2 = 31
this.time1 = year1 + '-' + month1 + '-' + day1 + ' ' + T1
this.time2 = year2 + '-' + month2 + '-' + day2 + ' ' + T2
}
// 起始时间时间戳
this.StartTime = new Date(this.time1).getTime()
// 结束时间时间戳
this.EndTime = new Date(this.time2).getTime()
this.DefaultTime(this.StartTime,this.EndTime)
if(month1 == month2){
this.WX = 'width:' + 100/ 1 + '%'
this.Datalist.push(this.formatYear(this.EndTime))
}else if(month1 !== month2){
}
}
// 年
else if( Number(this.duration) >= 31) {
this.list = []
this.Datalist = []
this.time1 = year1 + '-' + '01' + '-' + '01' + ' ' + T1
this.time2 = year2 + '-' + '12' + '-' + '31' + ' ' + T2
// 起始时间时间戳
this.StartTime = new Date(this.time1).getTime()
// 结束时间时间戳
this.EndTime = new Date(this.time2).getTime()
this.DefaultTime(this.StartTime,this.EndTime)
this.WX = 'width:' + 100/ 12 + '%'
for(var i = 1; i<=12; i++){
var date = year1 + '-' + i
this.Datalist.push(date)
}
}
},
// 播放控制
control() {
if(this.status == true){
this.status = false
console.log('播放');
}else {
this.status = true
console.log('暂停');
}
},
},
}
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.pie_engine_earth_time_line {
width: 1330px;
display: flex;
.hide {
display: none;
}
.control {
.play {
width: 50px;
height: 50px;
border-radius: 50px;
line-height: 51px;
box-shadow: 0 0 4px 0 black;
background-color: #fff;
color: #fff;
text-align: center;
cursor: pointer;
.iconplay {
font-size: 20px;
color: #fff;
margin-left: 4px;
}
.iconpause {
font-size: 20px;
color: #fff;
margin-left: 1px;
}
}
}
.line_box {
position: relative;
width: 100%;
padding: 0 15px;
.line {
position: relative;
top: 50%;
width: 100%;
height: 1.5625rem;
border: 0.625rem solid transparent;
border-left: none;
border-right: none;
margin-top: -0.75rem;
.cover {
width: 100%;
height: 100%;
margin-top: -10px;
position: absolute;
top: 0;
left: 0;
z-index: 999;
cursor: pointer;
}
.progerss_line{
width: 100%;
position: absolute;
top: 0;
left: 0px;
right: 0px;
transition: width ease-in-out 0.3s;
.palyed {
background-color: #fff;
height: 6px;
float: left;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
width: 0%;
transition: width ease-in-out 0.3s;
}
.bg {
height: 6px;
background-color: rgba(68, 65, 65, 0.8);
width: 100%;
border-radius: 6px;
}
}
.calendar {
position: absolute;
left: 0;
right: 0;
top: 5px;
white-space: nowrap;
.calendar_lab {
display: inline-block;
box-sizing: border-box;
text-align: center;
padding-top: 8px;
font-size: 12px;
line-height: 1;
height: 22px;
white-space: nowrap;
overflow: hidden;
text-shadow: 0 0 4px black;
color: #fff3e1;
position: relative;
}
.calendar_lab:not(:first-child)::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 5px;
border-left: 1px solid #fff3e1;
border-top: none;
}
}
.calendars {
position: absolute;
left: 0;
right: 0;
top: 0;
white-space: nowrap;
.calendar_lab {
display: inline-block;
box-sizing: border-box;
text-align: center;
padding-top: 8px;
font-size: 12px;
line-height: 1;
height: 22px;
white-space: nowrap;
overflow: hidden;
text-shadow: 0 0 4px black;
color: #fff3e1;
position: relative;
}
.calendar_lab:not(:first-child)::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 5px;
border-left: 1px solid #fff3e1;
border-top: none;
}
}
.time_code {
font-size: 13px;
position: absolute;
left: 0px;
top: -34px;
pointer-events: none;
box-sizing: border-box;
transition: left ease-in-out 0.3s;
transform: translateX(-50%);
.box {
box-shadow: none;
cursor: pointer;
color: white;
text-shadow: 0 0 4px #2ac5a9;
background-color: #2ac5a9;
box-shadow: 0 0 4px 0 black;
white-space: nowrap;
text-align: center;
border-radius: 2px;
padding: 2px 8px;
&::before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-top-color: #2ac5a9;
border-width: 6px;
margin-left: -5px;
}
}
}
&:hover .pointer_code {
opacity: 1;
}
.pointer_code {
opacity: 0;
font-size: 13px;
position: absolute;
left: 0px;
top: -34px;
pointer-events: none;
box-sizing: border-box;
transition: 0.3s opacity 0s;
transform: translateX(-50%);
.box {
box-shadow: none;
cursor: pointer;
color: white;
text-shadow: 0 0 4px #000000;
background-color: rgba(78, 78, 78, 0.84);
box-shadow: 0 0 4px 0 black;
white-space: nowrap;
text-align: center;
border-radius: 2px;
padding: 2px 8px;
&::before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-top-color: rgba(78, 78, 78, 0.84);
border-width: 6px;
margin-left: -5px;
}
}
}
}
}
}
</style>
