<template>
|
<div class="my-process">
|
<div class="my-pro-header">
|
<div class="pro-step" v-for="(item,index) in list" :key="item.name">
|
<div class="pro-step-top">
|
<div
|
:class="['circle',active === index ? 'in-process__circle' : active > index ? 'finish' : 'wait' ]">
|
</div>
|
<div :class="['line',active> index ? 'finish-line' :'']"
|
v-if="index<list.length-1 ? true:false"></div>
|
</div>
|
<div
|
:class="['pro-step-name',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
|
{{item.name}}</div>
|
</div>
|
</div>
|
<div class="my-pro-main">
|
<div class="pro-step-ver" v-for="(item,index) in list" :key="item.title">
|
<div
|
:class="['pro-step-name',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
|
{{item.name}}</div>
|
<div class="pro-step-top">
|
<div
|
:class="['circle',active === index ? 'in-process__circle' : active > index ? 'finish' : 'wait' ]">
|
</div>
|
<div :class="['line',active > index ? 'finish-line' :'']"
|
v-if="index<list.length-1 ? true:false"></div>
|
</div>
|
<div :class="['desc',active === index ? 'in-process' : active > index ? 'finish-name' : 'wait' ]">
|
<div class="desc-title">环节用时:{{item.disposeRecords.length !==0 ? item.disposeRecords[0].linkTime : ''}}</div>
|
<div class="desc-content" v-if="active > index">
|
<div class="desc-content-message">1111111</div>
|
<div class="desc-content-endtime">{{item.disposeRecords.length !==0 ? filterTime(item.disposeRecords[0].endTime):''}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import helper from '@/utils/mydate'
|
export default {
|
data() {
|
return {
|
active: 0,
|
list: [
|
],
|
}
|
},
|
props:['handlePassVo','baseCase'],
|
created(){
|
const {handlePassVo:{workflowConfigSteps:mylist},baseCase:{state:mystate}} = this;
|
// console.log(this.handlePassVo.workflowConfigSteps[0].name);
|
// console.log(mylist);
|
console.log(mystate);
|
if(mystate ===6){
|
this.active = 1;
|
}else if(mystate===7){
|
this.active = 2;
|
}else if(mystate ===8){
|
this.active = 3;
|
}else if(mystate ===9){
|
this.active = 4;
|
}else{
|
this.active = -1;
|
}
|
this.list = mylist;
|
},
|
methods:{
|
filterTime(time){
|
if(time){
|
return helper(time)
|
}
|
return;
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.my-process {
|
padding-top: 50px;
|
.my-pro-header {
|
display: flex;
|
|
.pro-step {
|
flex: 1;
|
|
.pro-step-top {
|
display: flex;
|
align-items: center;
|
|
.line {
|
flex: 1;
|
height: 2px;
|
}
|
}
|
|
.pro-step-name {
|
line-height: 20px;
|
}
|
}
|
}
|
|
.my-pro-main {
|
margin-top: 30px;
|
margin-left: -50px;
|
.pro-step-ver {
|
display: flex;
|
align-items: flex-start;
|
.line {
|
width: 2px;
|
height: 100px;
|
}
|
}
|
.pro-step-top{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
.pro-step-name {
|
width: 120px;
|
line-height: 24px;
|
margin-right: 10px;
|
text-align: right;
|
}
|
.desc{
|
flex: 1;
|
line-height: 24px;
|
margin-left: 10px;
|
// color: #4b9bb7;
|
.desc-content-endtime{
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
}
|
|
.circle {
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
background-color: #fff;
|
border: 2px solid #808080;
|
}
|
|
.line {
|
background-color: #c0c4cc;
|
}
|
.in-process{
|
color: #0079fe;
|
}
|
.in-process__circle{
|
border: 2px solid #0079fe;
|
}
|
.finish-line {
|
background-color: #0079fe;
|
}
|
.finish{
|
border: 2px solid #4b9bb7;
|
}
|
.finish-name{
|
color: #4b9bb7;
|
}
|
}
|
</style>
|
