vue寫單條橫向時間線
阿新 • • 發佈：2020-12-22
vue單條橫向時間線（css+js）
vue單條橫向時間線（css+js）
我這段時間遇到一個新的需求，在首頁做一個時間線的展示圖，因為其他的圖都是用Echarts寫的，這條時間線我也準備用Echarts，找了半天，沒找到相關圖例，因此，我在這方面糾結了很久，最後沒有辦法，只能自己手寫一個時間線的圖，樣式很醜，這個就不用在意了，主要的是功能。
先上圖吧
圖片上的資料都是假資料，這些內容應該無所謂了吧
程式碼如下：
html程式碼
<div class="chart-content" css程式碼：
.content-left {
.item-flex {
display: flex;
justify-content: center;
align-items: center;
}
}
.btnclass{
background: rgba(248, 192, 66, 0.33);
}
.projectCon {
width: 500px;
height: 160px;
margin: 30px 10px 0 10px;
border: 1px solid #fff;
border-radius: 10px;
overflow-y: auto;
background:rgb(255, 236, 193);
color: rgb(68, 61, 61);
opacity: 1;
.projectCon-left {
min-height:100%;
padding: 20px 10px 10px 10px;
float: left;
width:70%;
border-right:1px solid #ccc;
.pament{
width: 48%;
position: absolute;
top: 31px;
padding: 10px 0 0 0;
background:rgb(255, 236, 193);
color: red;
}
li {
margin:20px 0 5px 0 ;
span {
color: red;
}
}
}
.projectCon-right{
padding: 35px 10px 10px 10px;
float: right;
width:30%;
height:100%;
.pament-con{
width: 20%;
position: absolute;
top: 31px;
padding: 10px 0 0 0;
background:rgb(255, 236, 193);
color: red;
}
.pament-btn {
color: red;
}
}
}
.line-botton {
width: 500px;
height: 20px;
margin: 0 10px 0 10px;
// background: #000;
display: flex;
justify-content: center;
align-items: center;
.line-botton-one {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
.line-left {
width: 48%;
border-bottom: 2px solid rgb(46, 212, 96);
margin-top: 15px;
}
.line-middle {
cursor: pointer;
border: 1px solid rgb(46, 212, 96);
width: 10px;
height: 10px;
margin-top: 15px;
border-radius: 50%;
background: rgb(46, 212, 96);
}
}
}
.data-botton {
width: 500px;
height: 20px;
margin: 15px 20px 0 10px;
display: flex;
justify-content: center;
align-items: center;
div {
width: 110px;
height: 40px;
margin: 0 13px;
width: 12%;
text-align: center;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
}
}
#indexChart3{
display: flex;
}
.con-middle-left {
margin-left: 20px;
width: 85%;
height: 250px;
}
.con-middle-right {
margin: 20px 0 0 0;
width: 15%;
height: 200px;
button {
width: 80px;
// height: 20px;
margin-top: 5px;
padding: 5px 3px 5px 3px ;
// border: rgb(154, 247, 242) 1px solid;
border:#fff;
border-radius: 5px;
background: #3f75d4;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
color: #fff;
}
button:hover{
background:#fc544b;
}
}
js程式碼：
methods: {
loadStoreData() {
var self = this;
var projectDate = {}; //單個專案
var handleResult = function (res) {
var data = [];
var result = 0;
for (let j = 0; j < res.data.length; j++) {
projectDate = res.data[j];
let projectName = projectDate.projectName; //專案名稱
self.exProjectDate.push(projectDate);
self.projectDate = self.exProjectDate.slice(-7);
}
self.progressTimeList = self.projectDate[0].progressList;
self.contractTermList = self.progressTimeList[0].contractTermList;
self.contractPament = self.progressTimeList[0]//第一次進頁面給時間線的預設值
};
var params = {
object: {
projectCode: ***,//請求介面需要的引數
},
};
return new Promise((resolve, reject) => {
api
.***(params)//這是請求的介面
.then((response) => {
if (response.body.code == "0000") {
let result = response.body;
if (result) {
handleResult(result);
}
}
})
.catch((error) => {
reject(error);
});
});
},
// 獲取展示框資料
proConClick(progressTimeList) {
return new Promise((resolve, reject) => {
this.contractPament = progressTimeList
this.contractTermList = progressTimeList.contractTermList;
});
},
// 獲取時間線日期和內容資料
projectClick(project) {
return new Promise((resolve, reject) => {
this.progressTimeList = [];
var self = this;
for (let i = 0; i < project.progressList.length; i++) {
var progressTimeList = project.progressList[i];
self.progressTimeList.push(progressTimeList);
}
self.contractTermList = self.progressTimeList[0].contractTermList;
self.contractPament = self.progressTimeList[0]//點選右側按鈕後展示框顯示的預設值
});
},
},
mounted() {
this.$nextTick(function () {
setTimeout(() => {
this.loadSendData();
}, 1000);
});//進入頁面自動執行
},
因為這是用vue寫的，所以這些程式碼是vue的程式碼，這些樣式都不是難點，主要的是這個資料處理，我這個介面返回的資料嵌套了五層，我用的是傳參的方式，將獲取的資料處理後通過引數傳給proConClick和projectClick這兩個函式，我也是一個前端小白，如果有什麼更好的方法，不管是樣式還是資料處理，都非常歡迎大佬們批評指正。