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;
}
总结：哎，还是让美工画个图简单。。。嘤嘤嘤.
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)