| | |
| | | <div class="pro-step" v-for="(item,index) in list" :key="item.name"> |
| | | <div class="pro-step-top"> |
| | | <div |
| | | :class="['circle',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]"> |
| | | :class="['circle',active === index ? 'in-process__circle' : active > index ? 'finish' : 'wait' ]"> |
| | | </div> |
| | | <div :class="['line',active > index ? 'finish-line' :'']" |
| | | <div :class="['line',active> index ? 'finish-line' :'']" |
| | | v-if="index<list.length-1 ? true:false"></div> |
| | | </div> |
| | | <div |
| | | :class="['pro-step-name',active === index+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]"> |
| | | :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+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]"> |
| | | :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+1 ? 'in-process' : active > index ? 'finish' : 'wait' ]"> |
| | | :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"> |
| | | <div class="desc-title">环节用时:{{item.disposeRecords[0].linkTime}}</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[0].endTime}}</div> |
| | | <div class="desc-content-endtime">{{item.disposeRecords.length !==0 ? item.disposeRecords[0].endTime:''}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | title: '结案', |
| | | status: 'process', |
| | | } |
| | | ] |
| | | ], |
| | | } |
| | | }, |
| | | props:['handlePassVo'], |
| | |
| | | console.log('process'); |
| | | const {handlePassVo:{workflowConfigSteps:mylist}} = this; |
| | | // console.log(this.handlePassVo.workflowConfigSteps[0].name); |
| | | console.log(mylist); |
| | | // console.log(mylist); |
| | | mylist.forEach(item=>{ |
| | | if(item.disposeRecords[0].endTime != null){ |
| | | if(item.disposeRecords.length!==0){ |
| | | this.active ++; |
| | | } |
| | | }) |
| | | console.log(this.active); |
| | | this.list = mylist; |
| | | } |
| | | }, |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | |
| | | flex: 1; |
| | | line-height: 24px; |
| | | margin-left: 10px; |
| | | // color: #4b9bb7; |
| | | .desc-content-endtime{ |
| | | display: flex; |
| | | justify-content: flex-end; |
| | |
| | | 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: #4b9bb7; |
| | | background-color: #0079fe; |
| | | } |
| | | .finish{ |
| | | border: 2px solid #4b9bb7; |
| | | } |
| | | .finish-name{ |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | </style> |