thoth-frontend-test/src/views/projectManage/components/timeLine.vue

<template>
  <div class="swiper-container">
    <swiper ref="mySwiper" class="swiper-wrapper timeline" :options="options">
      <swiper-slide v-for="(item,index) in steps" :key="index" class="swiper-slide">
        <div class="line" />
        <div
          class="center circle"
          :class="{
            'circle2': item.createTime !== null && item.statusName !== null,
            'circle3': item.createTime === '今天' && item.statusName === null && item.statusName !== 'HOLD' && item.statusName !== '解除HOLD',
            'circle4': item.createTime === null,
            'circle5': item.statusName === 'HOLD' || item.statusName === '解除HOLD'
          }"
        >
          <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.statusName !== null ,
                'circle-is': item.createTime === '今天' && item.statusName === null,
                'circle-iq': item.createTime === null,
                'circle-ia': item.statusName === 'HOLD' || item.statusName === '解除HOLD'
              }"
              class="circle-of center"
            />
          </el-tooltip>
          <div
            v-else
            :class="{
              'circle-in': item.createTime !== null && item.statusName !== null ,
              'circle-is': item.createTime === '今天' && item.statusName === null,
              'circle-iq': item.createTime === null,
              'circle-ia': item.statusName === 'HOLD' || item.statusName === '解除HOLD'
            }"
            class="circle-of center"
          />
        </div>
        <div :class="[index%2==0?'point1':'point2']" />
        <div class="content3" :class="{'start-time': item.timeSpan === '0天'}">
          {{ item.timeSpan }}
        </div>
        <div class="content1">
          {{ item.createTime }}
        </div>
        <div class="content2">
          {{ item.statusName }}
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import { taskGetWorkFlow } from '@/api/taskIndex'
import { requirementGetWorkFlow } from '@/api/requirement.js'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  props: {
    id: { type: [Number, String], default: null },
    name: { type: String, default: null }
  },
  data() {
    return {
      steps: [],
      options: {
        pagination: {
          el: '.swiper-pagination'
        },
        slidesPerView: 5,
        grabCursor: true
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  created() {
    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>

<style scoped lang="scss">
.swiper-container {
  padding-bottom: 20px;
  position: relative;
}
.timeline {
  width: calc(100% - 60px);
  list-style-type: none;
  display: flex;
  padding: 0;
  text-align: center;
}
.swiper-slide {
  height: 150px;
  width: 120px !important;
  display: flex;
  align-items: center;
  font-size: 18px;
  position: relative;
  .line{
    width: 100%;
    height:0px;
    border: 1px solid rgba(217,217,217,1);
  }
  .center {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .circle {
    position: absolute;
  }
  .circle2::after{
    content: '';
    position: absolute;
    height: 50px;
    border: 1px solid rgba(24,144,255,1);
    left: 50%;
    bottom: -16px;
    transform: translate(-50%,33px);
  }
  .circle3::after{
    content: '';
    display:none;
    position: absolute;
    height: 50px;
    border: 1px solid rgba(126,211,33,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(245,108,108,1);
    left: 50%;
    bottom: -16px;
    transform: translate(-50%,33px);
  }

  .circle-of {
    position: absolute;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    z-index: 99;
  }

  .circle-in {
    background: rgba(24,144,255,1);
  }
  .circle-is {
    background:rgba(126,211,33,1);
  }
  .circle-iq {
    background:rgba(153,153,153,1);
  }
  .circle-ia {
    background:rgba(245,108,108,1);
  }

   .content1,.content2 {
    width: 100%;
    font-size: 12px;
    color: rgba(51,51,51,1);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .content3 {
    width: 100%;
    font-size: 10px;
    color: rgba(97,175,255,1);
    position: absolute;
    left: 0%;
    top: 58px;
    transform: translateX(-50%);
  }
  .content2 {
    bottom:5px;
    font-weight:500;
  }
  .content1 {
    top: 45px;
  }
  .start-time {
    color: rgba(153,153,153,1);
  }
}
.swiper-slide {
  margin-top: -30px;
}
.swiper-slide:nth-child(2n) {
  width: 40%;
}
.swiper-slide:nth-child(3n) {
  width: 20%;
}
</style>