Vue 实现的时间轴 时间进度条

项目需要按天播放地图等值线图功能，所以需要一个时间进度条，网上找了一下发现没有自己需要的样子，于是只能简单的写一个。

1、封装时间尺度组件

1.  
   <!-- 时间尺度 -->
2.  
   <template>
3.  
   <div class="time">
4.  
   <div class="time_menu" v-show="timeList.length != 0">
5.  
   <template v-if="playState">
6.  
   <el-tooltip class="item" effect="dark" content="暂停" placement="top-end">
7.  
   <img src="../assets/timescale/zt.png" @click="playState = false,stopInterval()" />
8.  
   </el-tooltip>
9.  
   </template>
10.  
    <template v-if="!playState">
11.  
    <el-tooltip class="item" effect="dark" content="播放" placement="top-end">
12.  
    <img src="../assets/timescale/bf.png" @click="playState = true,startInterval()" />
13.  
    </el-tooltip>
14.  
    </template>
15.  
    <el-tooltip class="item" effect="dark" content="上一天" placement="top-end">
16.  
    <img src="../assets/timescale/icons_next.png" @click="upTime()" style="transform: rotate(180deg);" />
17.  
    </el-tooltip>
18.  
    <el-tooltip class="item" effect="dark" content="下一天" placement="top-end">
19.  
    <img src="../assets/timescale/icons_next.png" @click="nextTime()" />
20.  
    </el-tooltip>
21.  
    </div>
22.  
    <div style="width: 80%;height: 100%;position: relative;display: flex;align-items: flex-end;overflow: auto;">
23.  
    <div style="height: 40%;display: flex;flex-shrink: 0;flex-flow: row nowrap;align-items: flex-end;">
24.  
    <template v-for="(item,index) in timeList">
25.  
    <el-tooltip class="item" effect="dark" :content="item" placement="top-end">
26.  
    <div class="keDuXian" :style="index%5 == 0 ? 'height:100%;':'height:60%;'" :id="item"
27.  
    @click="timeClick(item)">
28.  
    <template v-if="index > 0">
29.  
    <div v-if="index%5 == 0" style="position: relative;top: -20px;left:-30px;color: #FFF;width: 70px;font-size: 0.75rem;">
30.  
    {{item}}
31.  
    </div>
32.  
    </template>
33.  
    </div>
34.  
    </el-tooltip>
35.  
    </template>
36.  
    </div>
37.  
    <div v-show="timeList.length != 0" class="progress" :style="'width:' progresswidth 'px;'">
38.  
    <div style="width: 100%;height: 40%;background-color: rgb(20,170,255);">
39.  
    </div>
40.  
    </div>
41.  
    <img v-show="timeList.length != 0" src="../assets/timescale/xsjx.png" class="progressImg" :style="'left:' (progresswidth == 0 ? -7 : (progresswidth-8)) 'px;'" />
42.  
    </div>
43.  
    </div>
44.  
    </template>
45.  
     
46.  
    <script>
47.  
    import {getScopeTime} from "../utils/regular.js"
48.  
    export default {
49.  
    data() {
50.  
    return {
51.  
    timeList:[],
52.  
    thisTime: '',
53.  
    progresswidth: 0,
54.  
    playState: false,
55.  
    Interval:'',
56.  
    }
57.  
    },
58.  
    beforeDestroy(){
59.  
    clearInterval(this.Interval)
60.  
    },
61.  
    methods: {
62.  
    startInterval(){
63.  
    this.Interval = setInterval(() => {
64.  
    if(this.timeList.indexOf(this.thisTime) 1 == this.timeList.length){
65.  
    this.playState = false
66.  
    this.stopInterval()
67.  
    }else{
68.  
    this.thisTime = this.timeList[this.timeList.indexOf(this.thisTime) 1]
69.  
    }
70.  
    this.setProgressWidth()
71.  
    }, 4000)
72.  
    },
73.  
    stopInterval(){
74.  
    clearInterval(this.Interval)
75.  
    },
76.  
    init(time,start,end) {
77.  
    this.timeList = getScopeTime(start,end,2)
78.  
    this.thisTime = time
79.  
    this.$nextTick(()=>{
80.  
    this.setProgressWidth()
81.  
    })
82.  
    },
83.  
    timeClick(time) {
84.  
    this.thisTime = time
85.  
    this.setProgressWidth()
86.  
    },
87.  
    setProgressWidth(){
88.  
    this.progresswidth = document.getElementById(this.thisTime).offsetLeft
89.  
    this.$emit('schedule',this.thisTime)
90.  
    },
91.  
    upTime(){
92.  
    if(this.thisTime == this.timeList[0]){
93.  
    this.$message({
94.  
    message: '已经是第一天了',
95.  
    type: 'warning'
96.  
    });
97.  
    }else{
98.  
    this.thisTime = this.timeList[this.timeList.indexOf(this.thisTime)-1]
99.  
    this.setProgressWidth()
100.  
     }
101.  
     },
102.  
     nextTime(){
103.  
     if(this.thisTime == this.timeList[this.timeList.length-1]){
104.  
     this.$message({
105.  
     message: '已经是最后一天了',
106.  
     type: 'warning'
107.  
     });
108.  
     }else{
109.  
     this.thisTime = this.timeList[this.timeList.indexOf(this.thisTime) 1]
110.  
     this.setProgressWidth()
111.  
     }
112.  
     }
113.  
     }
114.  
     }
115.  
     </script>
116.  
      
117.  
     <style lang="less" scoped>
118.  
     .time {
119.  
     width: 100%;
120.  
     height: 100%;
121.  
     background: rgba(10, 34, 66, 0.65);
122.  
     box-shadow: inset 0px 1px 12px 0px rgba(75, 137, 255, 0.5);
123.  
     border-radius: 4px;
124.  
     border: 1px solid #57C8EE;
125.  
     display: flex;
126.  
     align-items: flex-end;
127.  
     position: relative;
128.  
     }
129.  
      
130.  
     .time_menu {
131.  
     width: 20%;
132.  
     height: 100%;
133.  
     display: flex;
134.  
     align-items: center;
135.  
     justify-content: space-evenly;
136.  
     padding: 0 3%;
137.  
     box-sizing: border-box;
138.  
      
139.  
     img {
140.  
     width: 20px;
141.  
     height: 20px;
142.  
     cursor: pointer;
143.  
     transition-duration: 0.5s;
144.  
     }
145.  
     }
146.  
      
147.  
     .progress {
148.  
     height:100%;
149.  
     position: absolute;
150.  
     display: flex;
151.  
     align-items: flex-end;
152.  
     z-index: -1;
153.  
     transition-duration: 0.5s;
154.  
     }
155.  
      
156.  
     .triangle {
157.  
     width: 0px;
158.  
     height: 0px;
159.  
     border: 20px solid transparent;
160.  
     border-top-color: #00FFFF;
161.  
     // opacity: 1;
162.  
     position: absolute;
163.  
     left: -20px;
164.  
     top: 20px;
165.  
     }
166.  
     .keDuXian{
167.  
     width: 2px;
168.  
     background-color: #FFF;
169.  
     cursor: pointer;
170.  
     margin-right:25px;
171.  
     }
172.  
     .progressImg{
173.  
     width: 1.125rem;
174.  
     height: 1.125rem;
175.  
     position: absolute;
176.  
     z-index:9;
177.  
     }
178.  
     </style>

2、在vue页面使用时间尺度 

首先引入组件 然后给组件外部包一层div  组件的大小是根据父级来的

初始化：在methods方法里调用组件内部的init方法初始化 传入三个参数

schedule事件是每当尺度变化会返回变化后的时间，可以根据时间做对应逻辑处理

1.  
   <!-- 进度条-->
2.  
   <div style="width: 50%;height: 4%;position: absolute;z-index: 999;bottom: 20%;left: 25%;">
3.  
   <timescale ref="timescale" @schedule="schedule"></timescale>
4.  
   </div>
5.  
    
6.  
   <!-- 引入组件-->
7.  
   import timescale from "../../components/timeScale.vue"
8.  
    
9.  
    
10.  
     
11.  
    <!-- 调用组件内部方法 初始化时间尺度 传入选中时间 起时间 止时间-->
12.  
    this.$refs.timescale.init(this.isOlineTime,this.selectSectionTime[0],getTomorrow(this.selectSectionTime[1]))

3、组件init方法内 通过起止时间算出中间的所有时间尺度 

startTime：开始时间

endTime：结束时间

type：1按日返回小时 2按月返回每天 

1.  
   export const getScopeTime = (startTime, endTime, type) => {
2.  
   let start = new Date(startTime).getTime()
3.  
   let end = new Date(endTime).getTime()
4.  
   let time = []
5.  
   if (type == 2) {
6.  
   for (var i = 0; i < 1; i--) {
7.  
   start = 86400000
8.  
   if (start == end) {
9.  
   time.unshift(startTime.split(' ')[0])
10.  
    break
11.  
    } else {
12.  
    time.push(unixTimeToDateTime(start).split(' ')[0])
13.  
    }
14.  
    }
15.  
    } else if (type == 1) {
16.  
    for (var i = 0; i < 1; i--) {
17.  
    start = 3600000
18.  
    if (start == end) {
19.  
    time.unshift(startTime.split(' ')[0])
20.  
    break
21.  
    } else {
22.  
    time.push(unixTimeToDateTime(start))
23.  
    }
24.  
    }
25.  
    }
26.  
     
27.  
    return time
28.  
    }

附上效果图

目前没有实现拖拽功能，只能通过点击刻度更换时间，或者自动播放。

有不懂的可以留言，看见了会解答，时间仓促，有bug请见谅。

时间尺度 https://www.aliyundrive.com/s/CCnhMFwbdEZ 提取码: 53mp 

这篇好文章是转载于：编程之路