Vue时间轴

上面是时间轴的呈现效果。

有两种思路进行设计，第一种是时间线的长短跟时间点的位置跟数量都是动态生成的，但是我考虑到时间线的长短动态生成的话，时间点的位置可能不太好控制，尤其是最最后一个时间点跟时间线终点能否连接，加上屏幕大小的变化，还得控制整个时间轴的位置不动，着实有些头疼。然后采取了另外一种，将时间线的长度固定，时间点的数量动态生成，时间点的位置动态控制，这样还是蛮靠谱的，因为最后一个时间点是向右浮动的原因，最后的两个时间点的li层就不允许重合了，不然样式会错乱。

三种时间点的图片名称：

html代码：

<div class="timeLineDiv" v-if="timeLineDataList.length>0">		
	<hr id="timeLineHr">							
	<ul class="timeLineUl">		
		<li class="timeLineli" v-for="(item,index) in timeLineDataList">
			<div class="liTop"></div>
			<div class="liMid"><div><img :src="contextPath+'images/timeLine'+item.color+'.png'"></div></div>
			<div class="liBottom"></div>
		</li>								
	</ul>							
</div>	

css代码：

<style type="text/css">
	.timeLineDiv{
		margin-left:1%;
		margin-top:10px;
		overflow:hidden;
	}
	
	#timeLineHr{
		/*控制时间轴的长度*/			
		width:900px;
		float:left;
		margin-left:90px;
		margin-top:98px;
	}
	
	.timeLineUl{		
		float:left;
		margin-top:-105px;
		list-style:none;
		padding-left:20px;
	}
	.timeLineUl li{
		float:left;
		width:100px;
		text-align:center;
		font-weight:bold; 
	}
	
	li:first-child{
		margin-left:0px;
	}		
	
	.liTop{			
		height:80px;
		overflow:hidden;
	}
			
	.liMid{
		height:34px;
	}
		
	.timeLineUl li .liMid>div{
		background-color:white;
	    width:24px;
	    height:24px;
	    border-radius:12px;
	    float:left;
	    margin-left:38px;
	    margin-top:5px;
	}
	
	.timeLineUl li .liMid>div>img{
		width:28px;
		float:left;
		margin-left:-2px;
		margin-top:-2px;
	}
	
	li>div>p{						
		width:100px;
		float:left;
	}		
</style>

data代码：

data: {	
	timeLineDataList: [],//时间轴展示数据           
    reTime:false,//控制锁。加这个锁是因为选择日期的时候会弹出时间选择的组件，这样会使页面的DOM发生变化，会走Vue的updated方法。updated方法中存在着时间轴样式的控制，所以防止选择日期的时候时间轴样式控制代码的执行，加这个锁。
},

methods中调用加载时间轴代码：

load: function(){	
	//开锁
	vm.reTime = true;
	vm.initTimeLine();
},

加载时间轴：

//加载时间轴--A比今天小：蓝，B等于今天：绿，C大于今天：黄
initTimeLine: function(){				
	//清空时间数据数组
	if(vm.timeLineDataList.length>0){						
		vm.timeLineDataList.splice(0,vm.timeLineDataList.length);						
	}					
	var timeLineData = [];
	//获取今天日期的时间戳
	var todayTime = new Date(new Date().toLocaleDateString('zh-CN')).getTime();
	var record = form.getRecord();					
	if(null!=record.get("bmks")){
		var obj = {};						
		obj.label = "报名开始时间";
		obj.time = record.get("bmks").substring(0,10);
		if(todayTime>vm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTime<vm.formatDate(obj.time)){
			obj.color = "C";
		}else{
			obj.color = "B";
		}
		timeLineData.push(obj);
	}
	if(null!=record.get("bmjs")){
		var obj = {};						
		obj.label = "报名结束时间";
		obj.time = record.get("bmjs").substring(0,10);
		if(todayTime>vm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTime<vm.formatDate(obj.time)){
			obj.color = "C";
		}else{
			obj.color = "B";
		}
		timeLineData.push(obj);
	}
	if(null!=record.get("wjxzks")){
		var obj = {};						
		obj.label = "文件下载开始时间";
		obj.time = record.get("wjxzks").substring(0,10);
		if(todayTime>vm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTime<vm.formatDate(obj.time)){
			obj.color = "C";
		}else{
			obj.color = "B";
		}
		timeLineData.push(obj);
	}
	if(null!=record.get("wjxzjs")){
		var obj = {};						
		obj.label = "文件下载截止时间";
		obj.time = record.get("wjxzjs").substring(0,10);
		if(todayTime>vm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTime<vm.formatDate(obj.time)){
			obj.color = "C";
		}else{
			obj.color = "B";
		}
		timeLineData.push(obj);
	}
	if(null!=record.get("tbks")){
		var obj = {};						
		obj.label = "投标开始时间";
		obj.time = record.get("tbks").substring(0,10);
		if(todayTime>vm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTime<vm.formatDate(obj.time)){
			obj.color = "C";
		}else{
			obj.color = "B";
		}
		timeLineData.push(obj);
	}
	if(null!=record.get("tbjs")){
		var obj = {};						
		obj.label = "投标截止时间";
		obj.time = record.get("tbjs").substring(0,10);
		if(todayTime>vm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTime<vm.formatDate(obj.time)){
			obj.color = "C";
		}else{
			obj.color = "B";
		}
		timeLineData.push(obj);
	}
	if(null!=record.get("kbsj")){
		var obj = {};						
		obj.label = "开标时间";
		obj.time = record.get("kbsj").substring(0,10);
		if(todayTime>vm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTime<vm.formatDate(obj.time)){
			obj.color = "C";
		}else{
			obj.color = "B";
		}
		timeLineData.push(obj);
	}
	if(null!=record.get("pssj")){
		var obj = {};						
		obj.label = "评审时间";
		obj.time = record.get("pssj").substring(0,10);
		if(todayTime>vm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTime<vm.formatDate(obj.time)){
			obj.color = "C";
		}else{
			obj.color = "B";
		}
		timeLineData.push(obj);
	}
	if(null!=record.get("dbsj")){
		var obj = {};						
		obj.label = "定标时间";
		obj.time = record.get("dbsj").substring(0,10);
		if(todayTime>vm.formatDate(obj.time)){
			obj.color = "A";
		}else if(todayTime<vm.formatDate(obj.time)){
			obj.color = "C";
		}else{
			obj.color = "B";
		}
		timeLineData.push(obj);
	}					
	if(timeLineData.length>0){
		//时间排序
		timeLineData.sort(vm.compareTime("time"));
		//时间去重
		var index = 0;
		var firstTime = {};
		firstTime.label = [];
		firstTime.label.push(timeLineData[0].label);
		firstTime.time = timeLineData[0].time;
		firstTime.color = timeLineData[0].color;
		vm.timeLineDataList.push(firstTime);
	 	for(var i=1;i<timeLineData.length;i++){
			if(vm.formatDate(vm.timeLineDataList[index].time)==vm.formatDate(timeLineData[i].time)){
				vm.timeLineDataList[index].label.push(timeLineData[i].label);
			}else{
				var t = {};
				t.label = [];
				t.label.push(timeLineData[i].label);
				t.time = timeLineData[i].time;
				t.color = timeLineData[i].color;
				vm.timeLineDataList.push(t);								
				index++;
			}
		}					 	
	}
},

时间比较方法：

//时间比较方法
compareTime: function(time){
	return function(a,b){
		var time1 = vm.formatDate(a.time);
		var time2 = vm.formatDate(b.time);
		return time1-time2;
	}					
},

日期类型字符串转时间戳：

//将日期类型字符串 转为1970毫秒
formatDate: function(str){
	return new Date(str.replace(/-/g,'/')).getTime();
},

updated方法中时间轴样式的控制代码：

if(vm.reTime){
	if(vm.timeLineDataList.length>0){	
		//处理li的间距
		var timeLineLi = document.getElementsByClassName("timeLineli");						
		var days = parseInt((vm.formatDate(vm.timeLineDataList[vm.timeLineDataList.length-1].time)-vm.formatDate(vm.timeLineDataList[0].time))/(1000*60*60*24));
		var m = parseInt(900/days);	
		//控制位置																	
		for(var i=1;i<timeLineLi.length;i++){
			var day = parseInt((vm.formatDate(vm.timeLineDataList[i].time)-vm.formatDate(vm.timeLineDataList[i-1].time))/(1000*60*60*24));
			var mm = m*day;
			var realw = 0;
			//时间比较
			var f = mm-100;
			var xf = -50-f;
		 	if(xf>0){
				realw = -50;
			}else{
				realw = f;
			}						
			timeLineLi[i].style.marginLeft = realw+"px";
		}						
		var hrlW = timeLineLi[timeLineLi.length-1].offsetLeft-timeLineLi[0].offsetLeft;
		var hr = document.getElementById("timeLineHr");
		hr.style.width = hrlW+"px";		
		//控制内容
		for(var i=0;i<timeLineLi.length;i++){							
			if(i%2==0){
				//清除垃圾数据，防止每次时间轴加载，之前的p元素节点还存在，导致数据不对
				if(timeLineLi[i].children[2].children.length>0){								
					for(var l=timeLineLi[i].children[2].children.length-1;l>=0;l--){
						timeLineLi[i].children[2].children[l].remove();
					}
				}
				var pTime = document.createElement("p");
				pTime.append(vm.timeLineDataList[i].time);
				pTime.style.marginTop = "0px";
				pTime.style.marginBottom = "0px";								
				timeLineLi[i].children[2].append(pTime);
				for(var j=0;j<vm.timeLineDataList[i].label.length;j++){
					var pLabel = document.createElement("p");
					pLabel.append(vm.timeLineDataList[i].label[j]);
					pLabel.style.marginTop = "0px";
					pLabel.style.marginBottom = "0px";								
					timeLineLi[i].children[2].append(pLabel);
				}
			}else{								
				//清除垃圾数据，防止每次时间轴加载，之前的p元素节点还存在，导致数据不对
				if(timeLineLi[i].children[0].children.length>0){								
					for(var l=timeLineLi[i].children[0].children.length-1;l>=0;l--){
						timeLineLi[i].children[0].children[l].remove();
					}
				}								
				for(var j=0;j<vm.timeLineDataList[i].label.length;j++){
					var pLabel = document.createElement("p");
					pLabel.append(vm.timeLineDataList[i].label[j]);
					if(j==0){
						var labelLength = vm.timeLineDataList[i].label.length;
						if(labelLength==1){
							pLabel.style.marginTop = "48px";
						}else if(labelLength==2){
							pLabel.style.marginTop = "32px";
						}else if(labelLength==3){
							pLabel.style.marginTop = "16px";
						}else{
							pLabel.style.marginTop = "0px";
						}
					}else{
						pLabel.style.marginTop = "0px";
					}																											
					pLabel.style.marginBottom = "0px";								
					timeLineLi[i].children[0].append(pLabel);
				}
				var pTime = document.createElement("p");
				pTime.append(vm.timeLineDataList[i].time);
				pTime.style.marginTop = "0px";
				pTime.style.marginBottom = "0px";								
				timeLineLi[i].children[0].append(pTime);
			}
		}
	}
	//关锁
	vm.reTime = false;
}				

总结：哎，还是让美工画个图简单。。。嘤嘤嘤.