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

<template>
  <div class="progress">
    <div
      class="changeTab"
      :class="[currentIndex == index ? `show${index}` :`changeTab${index}`]"
      v-for="(item, index) in tabList"
      :key="index"
      @click="change(index)"
    >
      {{ item.name }}
    </div>
    <!-- 进度管理 -->
    <div class="top" v-show="currentIndex == 0">
      <div class="left1"></div>
      <div class="right">
        <TopRight />
      </div>
    </div>
    <!-- 无人机 -->
    <div class="left2" v-if="currentIndex == 1"></div>
    <!-- 全景成像 -->
    <div class="views" v-if="currentIndex == 2">
      <div class="left">
        <div class="leftone">
          <LeftOne />
        </div>
        <div class="lefttwo">
          <LeftTwo />
        </div>
        <div class="leftthree">
          <LeftThree />
        </div>
      </div>
      <div class="right">
      </div>
    </div>
    <div class="bottom" v-if="currentIndex == 0">
      <div
        class="progress-item"
        :class="{ success: i + 1 < numberOfCompleted }"
        v-for="(v, i) in progress"
        :key="i"
      >
      <div :class="['progress-item-dot', { active: v.state }]"></div>
        <div class="info">
          <div class="label">{{ v.date }}</div>
          <div class="value">{{ v.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listProgressOfTheTask } from "@/assets/js/api/zhongjianFourth";
import TopRight from "./topRight.vue";
import LeftOne from "./leftOne.vue"
import LeftTwo from "./leftTwo.vue"
import LeftThree from "./leftThree.vue"
import { mapState } from "vuex";

export default {
  components: { TopRight,LeftOne, LeftTwo,LeftThree},
  data() {
    return {
      // 完工的数量
      numberOfCompleted: 2,
      // 步骤条
      progress: [
        { date: '2022-01-01', name: '基础工程', state: true ,},
        { date: '2022-02-14', name: '主题结构施工', state: true, },
        { date: '2022-03-25', name: '屋面工程', state: true, },
        { date: '2022-07-31', name: '机械设备安拆工程', state: true, },
        { date: '2022-08-31', name: '室内装饰装修工程', state: true,},
        { date: '2022-09-01', name: '基础工程', state: true ,},
        { date: '2022-10-14', name: '主题结构施工', state: true, },
        { date: '2022-11-25', name: '屋面工程', state: true,},
        { date: '2022-12-31', name: '机械设备安拆工程'},
      ],
      // 设备列表
      options: [],
      firstValue: undefined,
      secondValue: undefined,
      currentIndex: 0,
      tabList: [
        { name: "进度管理" },
        { name: "无人机巡检" },
        { name: "全景成像测距" },
      ],
    };
  },
  created() {
    // this.getList();
  },
  computed: {
    ...mapState(["projectSn"]),
  },
  methods: {
    change(val) {
      // console.log("点击的", val);
      this.currentIndex = val;
    },
    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%;
  margin-top: 20px;
  position: relative;
  // background: url(../assets/temp/4.png) no-repeat;
  // background-size: 100% 100%;
  .changeTab {
    line-height: 38px;
    text-align: center;
    z-index: 99;
  }
  .changeTab0 {
    position: absolute;
    top: 5%;
    left: 30%;
    width: 212px;
    height: 38px;
    background-image: url(../assets/temp/tab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .changeTab1 {
    position: absolute;
    top: 5%;
    left: 40%;
    width: 212px;
    height: 38px;
    background-image: url(../assets/temp/tab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .changeTab2 {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 212px;
    height: 38px;
    background-image: url(../assets/temp/tab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .show0 {
    position: absolute;
    top: 5%;
    left: 30%;
    width: 212px;
    height: 38px;
    z-index: 98;
    background-image: url(../assets/temp/untab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .show1 {
    position: absolute;
    top: 5%;
    left: 40%;
    width: 212px;
    z-index: 98;
    height: 38px;
    background-image: url(../assets/temp/untab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .show2 {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 212px;
    z-index: 98;
    height: 38px;
    background-image: url(../assets/temp/untab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .left2 {
    width: 100%;
    height: 100%;
    background-image: url(../assets/temp/tab2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    color: #fafbfa;
  }

  .top {
    height: 74%;
    display: flex;
    justify-content: space-between;
    .left1 {
      width: 80%;
      height: 100%;
      background-image: url(../assets/temp/progress.png);
      background-repeat: no-repeat;
      background-size: 100%;
      color: #fafbfa;
    }
    .right {
      width: calc(20% - 25px);
      height: 100%;
    }
  }

  .bottom {
    height: 26%;
    color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    .progress-item {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .progress-item-dot {
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 50%;

      &::after {
        content: '';
        position: absolute;
        top: 4px;
        transform: translateX(-99%);
        display: block;
        width: 200px;
        height: 2px;
        background: #fff;
      }

      &.active {
        &::after {
          background: #6dc6d8;
        }
      }

      &::before {
        content: '';
        position: relative;
        z-index: 9;
        display: block;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 50%;
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
      height: 60px;
      .label {
        margin-bottom: 20px;
      }
    }

    &:first-child {
      .progress-item-dot {
        &::after {
          display: none;
        }
      }
    }
  }
  }
  .views{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .left{
      width: 22%;
      margin-right: 1%;
      height: 100%;
      .leftone{
        height: 40%;
      }
      .lefttwo{
        height: 30%;
      }
      .leftthree{
        height: 30%;
      }
    }
    .right{
      width: 78%;
      height: 100%;
      background-image: url(../assets/temp/tab3.png);
      background-repeat: no-repeat;
      background-size: 100%;
      color: #fafbfa;
    }
  }
}

::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>