CN-1571 feat: 轨迹地图底部时间轴功能开发
This commit is contained in:
刘洪洪
212
src/components/common/TimeLine.vue
Normal file
212
src/components/common/TimeLine.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="time-line">
|
||||
<div class="time-line-slider">
|
||||
<el-slider v-model="currentTime" @change="onChange" :show-tooltip="false" />
|
||||
</div>
|
||||
<div style="height: 10px"></div>
|
||||
<div class="time-line-container">
|
||||
<div v-for="(item, index) in timeLine" :key="index">
|
||||
<div v-if="item.showFlag">{{ item.date }}</div>
|
||||
</div>
|
||||
<div class="test-line" id="myLine" :style="`position: absolute;top: 9px;left: calc(${currentTime}% + 5.5px);`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--------------调用-------start-------------->
|
||||
<!--<time-line :timeFilter="timeFilter" @change="onChange"></time-line>-->
|
||||
<!--------------调用-------end-------------->
|
||||
|
||||
<script>
|
||||
import { changeTimestampToTime } from '../../utils/tools'
|
||||
|
||||
export default {
|
||||
name: 'TimeLine',
|
||||
props: {
|
||||
timeFilter: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentTime: 99,
|
||||
timeLine: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeFilter (n) {
|
||||
if (n) {
|
||||
this.getDate()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDate()
|
||||
},
|
||||
methods: {
|
||||
getDate () {
|
||||
const diff = (this.timeFilter.endTime - this.timeFilter.startTime) / 100
|
||||
const timeStep = (this.timeFilter.endTime - this.timeFilter.startTime) / 1000
|
||||
// const timeStep1 = (this.timeFilter.endTime - this.timeFilter.startTime) / (1000 * 60)
|
||||
|
||||
const timeList = []
|
||||
let startTime = this.timeFilter.startTime
|
||||
for (let i = 0; i < 100; i++) {
|
||||
let time1 = changeTimestampToTime(startTime)
|
||||
time1 = time1.substring(0, time1.length - 3)
|
||||
const obj = { date: time1, timeStamp: new Date(time1).getTime(), showFlag: false }
|
||||
if (i > 0) {
|
||||
this.getTimeTamp(obj, timeList[timeList.length - 1], timeStep)
|
||||
}
|
||||
timeList.push(obj)
|
||||
startTime += diff
|
||||
}
|
||||
this.timeLine = timeList
|
||||
|
||||
// const timeRange = []
|
||||
// for (let i = this.timeFilter.startTime; i <= this.timeFilter.endTime; i += 5 * 60 * 1000) {
|
||||
// const time = this.formatTime(i)
|
||||
// timeRange.push({ date: time, stamp: this.timeFilter.startTime + i, showFlag: true })
|
||||
// }
|
||||
//
|
||||
// this.timeLine = timeRange
|
||||
},
|
||||
formatTime (timestamp) {
|
||||
const date = new Date(timestamp)
|
||||
const minute = date.getMinutes()
|
||||
const remainder = minute % 5
|
||||
if (remainder === 0) {
|
||||
return `${date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()}:${minute < 10 ? ('0' + minute) : minute}`
|
||||
} else {
|
||||
let roundedMinute = minute - remainder + 5
|
||||
let roundedHour = date.getHours()
|
||||
if (roundedMinute === 60) {
|
||||
roundedMinute = 0
|
||||
roundedHour = roundedHour + 1
|
||||
}
|
||||
return `${roundedHour < 10 ? ('0' + roundedHour) : roundedHour}:${roundedMinute < 10 ? ('0' + roundedMinute) : roundedMinute}`
|
||||
}
|
||||
},
|
||||
getTimeTamp (obj, obj1, step) {
|
||||
// 时间间隔（基本保证时间轴上显示12个间隔）：
|
||||
// 15分钟以下1分钟，30分钟--2分钟，1小时--5分钟，3小时--20分钟，6小时--30分钟，1天--1小时，2天--4小时
|
||||
// 一周--12小时，一月--2天，三月--6天，一年--1个月
|
||||
const date = new Date(obj.timeStamp)
|
||||
const minute = date.getMinutes()
|
||||
switch (true) {
|
||||
case step < 1800: {
|
||||
if (obj.timeStamp !== obj1.timeStamp) {
|
||||
obj.showFlag = true
|
||||
obj.date = this.substringShowTime(obj.date)
|
||||
}
|
||||
break
|
||||
}
|
||||
case (step >= 1800 && step < 3600): {
|
||||
if (obj.timeStamp !== obj1.timeStamp && minute % 2 === 0) {
|
||||
obj.showFlag = true
|
||||
obj.date = this.substringShowTime(obj.date)
|
||||
}
|
||||
break
|
||||
}
|
||||
case (step === 3600): {
|
||||
if (obj.timeStamp !== obj1.timeStamp && minute % 5 === 0) {
|
||||
obj.showFlag = true
|
||||
obj.date = this.substringShowTime(obj.date)
|
||||
}
|
||||
// if((parameter.endTime.asLong() - parameter.startTime.asLong())<=3600){1小时
|
||||
// parameter.step = 60;1分钟
|
||||
// }else if((parameter.endTime.asLong() - parameter.startTime.asLong())<=3*3600){3小时
|
||||
// parameter.step = 120;2分钟
|
||||
// }else if((parameter.endTime.asLong() - parameter.startTime.asLong())<=6*3600){6小时
|
||||
// parameter.step = 300;5分钟
|
||||
// }else if((parameter.endTime.asLong() - parameter.startTime.asLong())<=24*3600){1天
|
||||
// parameter.step = 600;1小时
|
||||
// }else if((parameter.endTime.asLong() - parameter.startTime.asLong())<=48*3600){2天
|
||||
// parameter.step = 1200;2小时
|
||||
// }else if((parameter.endTime.asLong() - parameter.startTime.asLong())<=168*3600){一周
|
||||
// parameter.step = 3600;6小时
|
||||
// }else if((parameter.endTime.asLong() - parameter.startTime.asLong())<=720*3600){一个月
|
||||
// parameter.step = 3600*6;6小时
|
||||
// }else if((parameter.endTime.asLong() - parameter.startTime.asLong())<=2160*3600){三个月
|
||||
// parameter.step = 3600*12;12小时
|
||||
// }else if((parameter.endTime.asLong() - parameter.startTime.asLong())<=12*30*24*3600){一年
|
||||
// parameter.step = 3600*24;1天
|
||||
// }
|
||||
break
|
||||
}
|
||||
case step <= 3 * 3600: {
|
||||
if (obj.timeStamp !== obj1.timeStamp && minute % 20 === 0) {
|
||||
obj.showFlag = true
|
||||
obj.date = this.substringShowTime(obj.date)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
substringShowTime (time) {
|
||||
if (time.slice(-5) === '00:00') {
|
||||
time = time.substring(0, time.length - 6)
|
||||
} else {
|
||||
time = time.slice(-5)
|
||||
}
|
||||
return time
|
||||
},
|
||||
onChange (e) {
|
||||
const dom = document.getElementById('myLine')
|
||||
if (dom) {
|
||||
dom.style.cssText += `left: calc(${e}% + 5.5px)`
|
||||
}
|
||||
this.$emit('change', this.timeLine[e].timeStamp)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.time-line {
|
||||
width: 100%;
|
||||
height: 50px !important;
|
||||
padding: 0 6px;
|
||||
position: relative;
|
||||
|
||||
.time-line-slider {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: -14px;
|
||||
|
||||
:deep .el-slider__runway {
|
||||
height: 40px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
|
||||
.el-slider__bar {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.el-slider__button {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: #000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
|
||||
border-style: solid;
|
||||
border-width: 10px 10px 0 10px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-line-container {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: rgba(255,255,255,0.60);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 6px;
|
||||
|
||||
.test-line {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user