zhgdyun/src/views/projectAdmin/fourEngin/progress/index.vue

<template>
  <div class="progress">
    <div class="top">
      <div class="left">
        <div class="left1">
          <el-select v-model="firstValue" placeholder="请选择" style="transform: translate(10px, 10px);width: 100px;height: 30px;position: absolute;border-radius: 4px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <img src="../assets/images/common/triangle.png" style="transform: translate(20px, 18px);" >
        </div>
        
        <div class="left2">
          <el-select v-model="secondValue" placeholder="请选择" style="transform: translate(10px, 10px);width: 100px;height: 30px;position: absolute;border-radius: 4px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <img src="../assets/images/common/triangle.png" style="transform: translate(20px, 18px);" >
        </div>
      </div>
      <div class="right">
        <TopRight />
      </div>
    </div>
    <div class="bottom">
      <div class="progress-item" :class="{ success: i + 1 < numberOfCompleted }" v-for="(v, i) in progress" :key="i">
        <div class="date">{{ v.date }}</div>
        <div class="name">{{ v.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
import TopRight from './topRight.vue'
import { mapState } from 'vuex'

export default {
  components: { TopRight },
  data() {
    return {
      // 完工的数量
      numberOfCompleted: 2,
      // 步骤条
      progress: [],
      // 设备列表
      options: [],
      firstValue: undefined,
      secondValue: undefined,
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapState(['projectSn'])
  },
  methods: {
    getList() {
      listProgressOfTheTask({ projectSn: this.projectSn, isNoStart: false }).then(res => {
        console.log('查询步骤条列表: ', res);
        // state 0未开始, 1进行中, 2已完成
        const progress = this.progress;
        res.result.forEach(item => {
          
          if (item.state == 2) {
            progress.push({
              name: item.subitemProjectName,
              date: item.actualEndTime
            })
            this.numberOfCompleted++
            console.log('this.numberOfCompleted: ', this.numberOfCompleted);
          } else {
            progress.push({
              name: item.subitemProjectName,
              date: item.startTime
            })
          }
        });
        console.log(this.progress);
      })
    },
  },
}
</script>

<style lang="less" scoped>
.progress {
  width: 100%;
  height: 100%;
  // background: url(../assets/temp/4.png) no-repeat;
  // background-size: 100% 100%;
  .top {
    height: 74%;
    display: flex;
    justify-content: space-between;
    .left {
      width: 76%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .left1,
      .left2 {
        width: 50%;
        height: 100%;
        background-image: url(../assets/temp/bgc_video2.png);
        background-repeat: no-repeat;
        background-size: 100%;
        color: #fafbfa;
      }
      .left2 {
        background-image: url(../assets/temp/bgc_video1.png);
      }
    }
    .right {
      width: calc(24% - 20px);
      height: 100%;
    }
  }
  .bottom {
    height: 26%;
    color: #fff;
    display: flex;
    align-items: center;
    .progress-item {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      &::before {
        content: '';
        position: relative;
        z-index: 9;
        width: 8px;
        height: 8px;
        background-color: #fff;
        border: 1px solid #2de1fa;
        border-radius: 50%;
      }
      &:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 5px;
        left: 50%;
        bottom: calc(100% - 5px);
        width: 100%;
        height: 1px;
        background-color: #ccc;
      }
      &.success::after {
        background-color: #2de1fa;
      }
      .date {
        margin: 4px 0;
        font-size: 12px;
        color: #ddd;
      }
    }
  }
}

::v-deep .el-input__suffix {
  display: none;
  height: 30px;
}

::v-deep .el-input--suffix .el-input__inner {
  border: 0;
  border-radius: 4px;
  height: 30px;
  padding-left: 30px;
  padding-right: 0px;
  color: #fff;
  background: #506173;
  // background-image: url('../assets/images/common/triangle.png');
}
</style>