|
@@ -3,16 +3,46 @@
|
|
<swiper ref="mySwiper" class="swiper-wrapper timeline" :options="options">
|
|
<swiper ref="mySwiper" class="swiper-wrapper timeline" :options="options">
|
|
<swiper-slide v-for="(item,index) in steps" :key="index" class="swiper-slide">
|
|
<swiper-slide v-for="(item,index) in steps" :key="index" class="swiper-slide">
|
|
<div class="line" />
|
|
<div class="line" />
|
|
- <div class="center circle2"><div class="circle-in center" /></div>
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="center circle"
|
|
|
|
+ :class="{
|
|
|
|
+ 'circle2': item.createTime !== null && item.createTime !== '今天',
|
|
|
|
+ 'circle3': item.createTime === '今天' && item.statusName !== 'HOLD' && item.statusName !== 'UNHOLD',
|
|
|
|
+ 'circle4': item.createTime === null,
|
|
|
|
+ 'circle5': item.statusName === 'HOLD' || item.statusName === 'UNHOLD'
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <el-tooltip v-if="item.id === -2 " class="item" effect="dark" :content="'Hold原因:' + item.remark" placement="top">
|
|
|
|
+ <div
|
|
|
|
+ :class="{
|
|
|
|
+ 'circle-in': item.createTime !== null && item.createTime !== '今天',
|
|
|
|
+ 'circle-is': item.createTime === '今天',
|
|
|
|
+ 'circle-iq': item.createTime === null,
|
|
|
|
+ 'circle-ia': item.statusName === 'HOLD' || item.statusName === 'UNHOLD'
|
|
|
|
+ }"
|
|
|
|
+ class="circle-of center"
|
|
|
|
+ />
|
|
|
|
+ </el-tooltip>
|
|
|
|
+ <div
|
|
|
|
+ v-else
|
|
|
|
+ :class="{
|
|
|
|
+ 'circle-in': item.createTime !== null && item.createTime !== '今天',
|
|
|
|
+ 'circle-is': item.createTime === '今天',
|
|
|
|
+ 'circle-iq': item.createTime === null,
|
|
|
|
+ 'circle-ia': item.statusName === 'HOLD' || item.statusName === 'UNHOLD'
|
|
|
|
+ }"
|
|
|
|
+ class="circle-of center"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
<div :class="[index%2==0?'point1':'point2']" />
|
|
<div :class="[index%2==0?'point1':'point2']" />
|
|
<div class="content3">
|
|
<div class="content3">
|
|
- {{ '3天' }}
|
|
|
|
|
|
+ {{ item.timeSpan }}
|
|
</div>
|
|
</div>
|
|
<div class="content1">
|
|
<div class="content1">
|
|
- {{ item.dateLabel }}
|
|
|
|
|
|
+ {{ item.createTime }}
|
|
</div>
|
|
</div>
|
|
<div class="content2">
|
|
<div class="content2">
|
|
- {{ item.title }}
|
|
|
|
|
|
+ {{ item.statusName }}
|
|
</div>
|
|
</div>
|
|
</swiper-slide>
|
|
</swiper-slide>
|
|
</swiper>
|
|
</swiper>
|
|
@@ -22,7 +52,8 @@
|
|
<script>
|
|
<script>
|
|
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
|
|
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
|
|
import 'swiper/css/swiper.css'
|
|
import 'swiper/css/swiper.css'
|
|
-
|
|
|
|
|
|
+import { taskGetWorkFlow } from '@/api/taskIndex'
|
|
|
|
+import { requirementGetWorkFlow } from '@/api/requirement.js'
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
Swiper,
|
|
Swiper,
|
|
@@ -32,23 +63,12 @@ export default {
|
|
swiper: directive
|
|
swiper: directive
|
|
},
|
|
},
|
|
props: {
|
|
props: {
|
|
- steps: {
|
|
|
|
- type: Array,
|
|
|
|
- default() {
|
|
|
|
- return [
|
|
|
|
- { dateLabel: '2020.01.20', title: '技术准入' },
|
|
|
|
- { dateLabel: '2020.01.24', title: '技术评审' },
|
|
|
|
- { dateLabel: '2020.01.30', title: '已排期' },
|
|
|
|
- { dateLabel: '2020.02.2', title: '开发中' },
|
|
|
|
- { dateLabel: '2020.02.20', title: 'Hold' },
|
|
|
|
- { dateLabel: '2020.02.25', title: '解除Hold' },
|
|
|
|
- { dateLabel: '2020.02.31', title: '已提测' }
|
|
|
|
- ]
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ id: { type: [Number, String], default: null },
|
|
|
|
+ name: { type: String, default: null }
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ steps: [],
|
|
options: {
|
|
options: {
|
|
pagination: {
|
|
pagination: {
|
|
el: '.swiper-pagination'
|
|
el: '.swiper-pagination'
|
|
@@ -64,10 +84,19 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
- this.steps.forEach(item => {
|
|
|
|
- const list = item.dateLabel.split(' ')
|
|
|
|
- item.dateLabel = list[0]
|
|
|
|
- })
|
|
|
|
|
|
+ this.taskGetWorkFlow()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ async taskGetWorkFlow() {
|
|
|
|
+ if (this.name === '任务') {
|
|
|
|
+ const res = await taskGetWorkFlow(this.id)
|
|
|
|
+ this.steps = res.data.workFlowNodeList
|
|
|
|
+ }
|
|
|
|
+ if (this.name === '需求') {
|
|
|
|
+ const res = await requirementGetWorkFlow(this.id)
|
|
|
|
+ this.steps = res.data.workFlowNodeList
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -101,7 +130,7 @@ export default {
|
|
top: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
}
|
|
- .circle2 {
|
|
|
|
|
|
+ .circle {
|
|
position: absolute;
|
|
position: absolute;
|
|
}
|
|
}
|
|
.circle2::after{
|
|
.circle2::after{
|
|
@@ -113,15 +142,60 @@ export default {
|
|
bottom: -16px;
|
|
bottom: -16px;
|
|
transform: translate(-50%,33px);
|
|
transform: translate(-50%,33px);
|
|
}
|
|
}
|
|
- .circle-in {
|
|
|
|
|
|
+ .circle3::after{
|
|
|
|
+ content: '';
|
|
|
|
+ display:none;
|
|
|
|
+ position: absolute;
|
|
|
|
+ height: 50px;
|
|
|
|
+ border: 1px solid rgba(1,86,165,1);
|
|
|
|
+ left: 50%;
|
|
|
|
+ bottom: -16px;
|
|
|
|
+ transform: translate(-50%,33px);
|
|
|
|
+ }
|
|
|
|
+ .circle4::after{
|
|
|
|
+ content: '';
|
|
|
|
+ position: absolute;
|
|
|
|
+ height: 50px;
|
|
|
|
+ border:1px solid rgba(153,153,153,1);
|
|
|
|
+ left: 50%;
|
|
|
|
+ bottom: -16px;
|
|
|
|
+ transform: translate(-50%,33px);
|
|
|
|
+ }
|
|
|
|
+ .circle5::after{
|
|
|
|
+ content: '';
|
|
|
|
+ position: absolute;
|
|
|
|
+ height: 50px;
|
|
|
|
+ border:1px solid rgba(214,0,0,1);
|
|
|
|
+ left: 50%;
|
|
|
|
+ bottom: -16px;
|
|
|
|
+ transform: translate(-50%,33px);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .circle-of {
|
|
position: absolute;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
width: 12px;
|
|
width: 12px;
|
|
height: 12px;
|
|
height: 12px;
|
|
|
|
+ z-index: 99;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .circle-in {
|
|
background: rgba(24,144,255,1);
|
|
background: rgba(24,144,255,1);
|
|
border: 1px solid rgba(1,86,165,1);
|
|
border: 1px solid rgba(1,86,165,1);
|
|
- z-index: 99;
|
|
|
|
}
|
|
}
|
|
|
|
+ .circle-is {
|
|
|
|
+ background:rgba(126,211,33,1);
|
|
|
|
+ border:1px solid rgba(85,163,0,1);
|
|
|
|
+ }
|
|
|
|
+ .circle-iq {
|
|
|
|
+ background:rgba(153,153,153,1);
|
|
|
|
+ border:1px solid rgba(153,153,153,1);
|
|
|
|
+ }
|
|
|
|
+ .circle-ia {
|
|
|
|
+ background:rgba(245,108,108,1);
|
|
|
|
+ border:1px solid rgba(214,0,0,1);
|
|
|
|
+ }
|
|
|
|
+
|
|
.content1,.content2 {
|
|
.content1,.content2 {
|
|
width: 100%;
|
|
width: 100%;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
@@ -135,7 +209,7 @@ export default {
|
|
font-size: 10px;
|
|
font-size: 10px;
|
|
color: rgba(97,175,255,1);
|
|
color: rgba(97,175,255,1);
|
|
position: absolute;
|
|
position: absolute;
|
|
- left: 100%;
|
|
|
|
|
|
+ left: 0%;
|
|
top: 58px;
|
|
top: 58px;
|
|
transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|