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="list progress">
        <div
          :ops="ops"
          class="list-item progress-item"
          v-for="(item, index) in stageList"
          :key="index"
        >
          <div
            :class="[
              'progress-item-dot',
              { active: projectData.constructionStage - 1 >= index },
            ]"
          ></div>
          <div class="info">
            <span class="label">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { listProgressOfTheTask } from "@/assets/js/api/zhongjianFourth";
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
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 {
      projectData: {
        constructionStage: 10,
      },
      ops: {
        vuescroll: {
          wheelDirectionReverse: true,
        },
      },
      // 完工的数量
      numberOfCompleted: 2,
      stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
      // 设备列表
      options: [],
      firstValue: undefined,
      secondValue: undefined,
      currentIndex: 0,
      tabList: [
        { name: "进度管理" },
        { name: "无人机巡检" },
        { name: "全景成像测距" },
      ],
    };
  },
  created() {
    this.getDataDateils();
  },
  computed: {
    ...mapState(["projectSn"]),
  },
  methods: {
    change(val) {
      // console.log("点击的", val);
      this.currentIndex = val;
    },
    getDataDateils() {
      let data = { projectSn: this.$store.state.projectSn };
      getProjectDetail(data).then((res) => {
        if (res.code == 200) {
          console.log("查询进度", res);
          this.projectData = res.result;
        }
      });
    },
    // 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;
    cursor: pointer;
  }
  .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%;
    }
  }

}
.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');
}
.bottom {
    height: 26%;
    width: 100%;
    color: #fff;
    display: grid;
    place-items: center;
    // overflow: scroll;

    
    // display: flex;
    // align-items: center;
    // position: relative;
    .progress {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;

      .progress-item {
        position: relative;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        align-items: center;
        width: 125px;
        color: #fff;
        .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: 125px;
            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;
            }
          }
        }
      }
      .progress-item:nth-child(7){
         width: 135px;
      }
    }
  }
</style>