效果:
cpp
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="周期性巡视" name="zqxxs" key="zqxxs" class="scrollable-tab-pane">
<div v-if="timelineList == ''"
style="margin: auto;display: flex; align-items: center;justify-content: center;height: 200px;">
<p style="color: #32bfb0;">
当前没有周期性巡视数据
</p>
</div>
<div class="timelineProcessBox" v-for="(item, index) in timelineList" :key="index">
<div style="margin-right: 20px;color: #797979;">{{ index + 1 }}</div>
<div class="button1" @click="handleItemClick(activities[0])">{{ activities[0].lineName }}</div>
<el-timeline class="timeline">
<el-timeline-item class="lineitem" placement="top"
:class="activity.done && item[activityIndex + 1].done ? 'el-timeline-item-active' : 'inactive'"
v-for="(activity, activityIndex) in item" :key="activityIndex" :hide-timestamp="true"
:timestamp="activity.time">
<el-tooltip slot="dot" class="item" effect="dark" :disabled="!activity.done"
:content="activity.time" placement="top-start">
<div class="dot"></div>
</el-tooltip>
<span style="display: flex; flex-direction: column">
<span style="margin: 5px 0; font-size: 15px;margin-left: 1rem;">
{{ activity.content }}
</span>
</span>
</el-timeline-item>
</el-timeline>
</div>
</el-tab-pane>
<el-tab-pane label="临时性巡视" name="second" key="second" class="scrollable-tab-pane">
<div v-if="timelineList1 == ''"
style="margin: auto;display: flex; align-items: center;justify-content: center;height: 200px;">
<p style="color: #32bfb0;">
当前没有临时性巡视数据
</p>
</div>
<div class="timelineProcessBox" v-for="(item, index) in timelineList1" :key="index">
<div style="margin-right: 20px;color: #797979;">{{ index + 1 }}</div>
<div class="button1" @click="handleItemClick(activities[0])">{{ activities[0].lineName }}</div>
<el-timeline class="timeline">
<el-timeline-item class="lineitem" placement="top"
:class="activity.done && item[activityIndex + 1].done ? 'el-timeline-item-active' : 'inactive'"
v-for="(activity, activityIndex) in item" :key="activityIndex" :hide-timestamp="true"
:timestamp="activity.time">
<el-tooltip slot="dot" class="item" effect="dark" :disabled="!activity.done"
:content="activity.time" placement="top-start">
<div class="dot"></div>
</el-tooltip>
<span style="display: flex; flex-direction: column">
<span style="margin: 5px 0; font-size: 15px;margin-left: 1rem;">
{{ activity.content }}
</span>
</span>
</el-timeline-item>
</el-timeline>
</div>
</el-tab-pane>
</el-tabs>
data:
bash
const activities = [
{
content: '',
time: '',
done: false,
id: '',
lineId: '',
lineName: '',
planId: '',
},
{
content: '计划开始时间',
time: '',
done: false,
},
{
content: '结果编制时间',
time: '',
done: false,
},
{
content: '结果编制时间',
time: '',
done: false,
},
]
methods
css
async handleClick(tab, event) {
if (tab.label == '周期性巡视') {
this.timelineList = [];
const { data: gmData } = await xsjcgz({ tourType: "周期性巡视" });
this.zqxxsList = gmData.data;
this.zqxxsList.forEach(item => {
let list = this.activities
const { resultRedactTime, planEndTime, planStartTime, planPublishTime } = item.plan;
list[0].id = item.id;
list[0].lineId = item.lineId;
list[0].lineName = item.lineName;
list[0].planId = item.planId;
if (planPublishTime) {
list[0].time = planPublishTime;
list[0].done = true;
}
if (planStartTime) {
list[1].time = planStartTime
list[1].done = true
}
if (planEndTime) {
list[2].time = planEndTime
list[2].done = true
}
if (resultRedactTime) {
// console.log(resultRedactTime, "resultRedactTime")
list[3].time = resultRedactTime
list[3].done = true
}
this.timelineList.push(list)
});
}
else if (tab.label == '临时性巡视') {
this.timelineList1 = [];
const { data: gmData } = await xsjcgz({ tourType: "临时性巡视" });
this.zqxxsList = gmData.data;
this.zqxxsList.forEach(item => {
let list = this.activities
const { resultRedactTime, planEndTime, planStartTime, planPublishTime } = item.plan;
list[0].id = item.id;
list[0].lineId = item.lineId;
list[0].lineName = item.lineName;
list[0].planId = item.planId;
if (planPublishTime) {
list[0].time = planPublishTime;
list[0].done = true;
}
if (planStartTime) {
list[1].time = planStartTime
list[1].done = true
}
if (planEndTime) {
list[2].time = planEndTime
list[2].done = true
}
if (resultRedactTime) {
console.log(resultRedactTime, "resultRedactTime")
list[3].time = resultRedactTime
list[3].done = true
}
this.timelineList1.push(list)
});
// console.log(this.timelineList, " this.timelineList")
}
},
style
vbnet
<style lang="scss" scoped>
.scrollable-tab-pane {
height: 300px;
/* 设置固定高度 */
overflow-y: auto;
/* 垂直滚动条 */
}
.timelineProcessBox {
width: 64rem;
height: 50px;
border: 1px solid #60d6cd;
// background: rgba($color: #3bcdc2, $alpha: 0.3);
background: #eff8f8;
border-radius: 6px;
margin-bottom: 20px;
padding: 20px;
box-sizing: content-box;
display: flex;
align-items: center;
.button1 {
display: flex;
align-items: center;
justify-content: center;
color: #0e8ca1;
font-weight: bold;
font-size: 18px;
border: 1px solid #666;
width: 120px;
height: 40px;
border-radius: 5px;
}
.timeline {
display: flex;
flex: 1;
margin: 40px auto;
.lineitem {
transform: translateX(50%);
width: 22%;
}
}
}
//圆点样式
.dot {
border-bottom: 4px solid #3bcdc2 !important;
background: #fff;
width: 11px;
height: 11px;
border-radius: 50%;
border: 4px solid #3bcdc2;
}
// 流程线条样式
::v-deep .el-timeline-item__tail {
border-left: none !important;
border-top: 4px solid #e4e7ed !important;
width: 100% !important;
position: absolute !important;
top: 0px;
}
::v-deep .el-timeline-item__wrapper {
padding-left: 0;
position: absolute !important;
top: 20px !important;
transform: translateX(-50%) !important;
text-align: center !important;
}
::v-deep .el-timeline-item__timestamp {
font-size: 14px;
}
::v-deep .el-timeline-item__dot {
margin-top: -10px;
}
.el-timeline-item-active {
::v-deep .el-timeline-item__node {
background-color: #06b6a9 !important;
}
::v-deep .el-timeline-item__tail {
border-color: #06b6a9 !important;
}
// &:last-child {
// ::v-deep .el-timeline-item__tail {
// border-color: #e4e7ed !important;
// }
// }
}
//选项卡右侧
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
float: right;
}
// 有active样式的下一个li
.el-timeline-item-active+li {
::v-deep .el-timeline-item__node {
background-color: "#000";
}
}
</style>
<style lang="scss" scoped>
.el-dialog3 .el-dialog__header {
/* display: none; */
pointer-events: fill;
}
.el-dialog3 .el-dialog {
height: 80% !important;
overflow: auto;
}
.tubiao {
overflow-y: auto;
width: 1820px;
height: 61rem;
/* 设置一个固定的高度 */
margin: auto;
}
.list-title {
padding: 20px 0 20px 0;
}
.el-col1 {
margin-left: 50px;
}
.left_div2 {
height: 28rem;
}
.timeaxis {
width: 800px;
height: 200px;
margin-top: 30px;
}
.box {
float: left;
width: 180px;
}
.circular {
border: 2px solid #67c23a;
width: 10px;
height: 10px;
border-radius: 10px;
background: white;
margin: auto;
margin-bottom: -4px;
position: relative;
top: -8px;
left: 85px;
}
.item {
border-bottom: 1px solid #409eff;
position: relative;
.left {
position: absolute;
left: 55px;
top: -25px;
}
.center {
position: absolute;
left: 165px;
top: -26px;
}
}
.item2 {
position: relative;
.bottom {
position: absolute;
left: 75px;
top: 0px;
}
}
</style>