<template>
<!-- 新计划预约 -->
<div>
<div class="bdr10 bxs ml10 mr10">
<div class="pt50 mt10 f14 cor3" v-if="stepList && stepList.length">
<div class="step-item" v-for="(item, index) in stepList" :key="index">
<div class="item-left">
<div
class="item-index"
:style="{ backgroundColor: setColor(item.status, index)[0] }"
>
<span v-if="item.status == 4">
<i class="iconfont icon-ticketgou1"></i>
</span>
<span v-if="item.status == 3">
<i class="iconfont icon-ticketshanchu2"></i>
</span>
</div>
<div
:class="{
activeLine: stepList[index + 1].status != 1,
}"
v-if="index != stepList.length - 1"
class="item-line"
></div>
</div>
<div
class="item-right pl10"
:style="{
opacity: item.status == 1 ? 0.7 : 1,
}"
>
<div
class="cor9"
:style="{ color: setColor(item.status, index)[1] }"
>
<div>xxxx</div>
<div class="f12 cor9">xxxx</div>
</div>
<div class="index-btn">
<van-button type="info" class="mr10" size="mini">
<span>去修改</span>
</van-button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
getBeforeWork,
} from "@/api/workRail/workRail";
export default {
name: "endStep",
components: {},
data () {
return {
stepList: [
{ status: 2, },
{ status: 2, },
{ status: 1, },
{ status: 1, }
],
};
},
created () {
// this.getBeforeWork();
},
mounted () { },
methods: {
// 开始接卸
async startWorkSureFn () {
const result = await createWorkFPSOplan(datVal);
if (result.code == 200) {
}
},
setColor (status, index) {
switch (status) {
case 1:
return ["#E0E5F7", "#bfbfbf"];
break;
case 2:
return ["#2e7cf9", "#333"];
break;
case 4:
return ["#4caf5f", "#4caf5f"];
break;
case 3:
return ["#e65b54", "#e65b54"];
break;
default:
return ["#e7e7e7", "#bfbfbf"];
break;
}
},
async getBeforeWork () {
const res = await getBeforeWork({
planId: this.$route.query.planInfoId,
});
if (res.code == 200) {
// this.stepList = res.data.list;
}
},
},
};
</script>
<style lang="scss" scoped>
.activeLine {
background-color: #2e7cf9 !important;
}
.red {
color: #e65b54;
background-color: #e65b54;
}
.green {
color: #4caf5f;
background-color: #4caf5f;
}
.step-item {
display: flex;
justify-content: flex-start;
.item-left {
width: 40px;
.item-index {
margin: -1px auto;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
font-size: 16px;
color: #fff;
background-color: #2e7cf9;
border-radius: 50%;
position: relative;
z-index: 10;
transform: scale(1.2);
}
.item-line {
margin: 0 auto;
width: 8px;
height: 60px;
background-color: #e0e5f7;
// background-color: #eaeaea;
}
}
.item-right {
flex: 1;
display: flex;
justify-content: space-between;
position: relative;
top: -20px;
height: 60px;
background-color: #fff;
padding: 10px;
box-sizing: border-box;
border-radius: 8px;
}
}
.main {
position: relative;
.header {
// height: 50px;
line-height: 50px;
position: fixed;
background: #fff;
top: 0;
left: 0;
z-index: 100;
}
.content {
height: calc(100%);
background: #f5f8f8;
padding-top: 50px;
padding-bottom: 70px;
overflow: auto;
.contentTitle {
background: #fff;
height: 50px;
border-bottom: 1px solid #ddd;
div:nth-child(2) {
line-height: 50px;
}
div:nth-child(3) {
height: 16px;
margin-top: 20px;
}
}
.contentForm {
.formList {
background: #fff;
border-bottom: 1px solid #ddd;
}
}
}
.formList \deep\ .van-field--error .van-field__control,
.van-field--error .van-field__control::placeholder {
color: #c8c9cc;
}
.footer {
// height: 50px;
padding: 5px 0;
position: fixed;
background: #fff;
bottom: 0;
left: 0;
z-index: 100;
display: flex;
align-items: center;
& > span {
display: flex;
flex-direction: column;
justify-content: center;
}
.iconfont {
font-size: 20px;
}
}
}
.index-btn {
.van-button {
width: 70px;
}
}
</style>
