zhgdyun/src/views/projectAdmin/fourEngin/command/leftThree/index.vue

<template>
  <div class="container" ref="Process">
    <div class="process">
      <vue-scroll :ops="ops" ref="stageScroll">
        <Process style="transform: translateX(0)" :list="stageList" />
      </vue-scroll>
    </div>
  </div>
</template>

<script>
import Process from "./Process";
import { listProgressOfTheTask } from "@/assets/js/api/zhongjianFourth";

export default {
  components: { Process },
  data() {
    return {
      ops: {
        vuescroll: {
          // wheelScrollDuration: 0,
          wheelDirectionReverse: true,
        },
      },
      // projectData.constructionStage
      // stageList: this.$t('message.companyDiagram.CONSTRUCTIONSTAGE'),
      constructionStageEnum: {
        1: "地下室结构阶段",
        2: "地上造楼机结构施工",
        3: "幕墙工程",
        4: "电梯工程",
        5: "机电安装工程",
        6: "精装修工程",
        7: "园林市政工程",
        8: "地基基础分部验收",
        9: "主体结构分部验收",
        10: "节能分部验收",
        11: "其他分部验收",
        12: "规划验收",
        13: "消防验收",
        14: "竣工验收完成",
      },
      stageList: [
        {
          id: 1,
          name: "开工",
          Time: "2022-04-17",
        },
        {
          id: 2,
          name: "地下室结构施工",
          Time: "2023-03-25",
        },
        {
          id: 3,
          name: " 核心筒结构施工",
          Time: "2023-10-31",
        },
        {
          id: 4,
          name: "幕墙施工",
          Time: "2024-03-29",
        },
        {
          id: 5,
          name: "机电安装施工",
          Time: "2024-06-30",
        },
        {
          id: 6,
          name: "精装修施工",
          Time: "2024-08-21",
        },
        {
          id: 7,
          name: "园林市政施工",
          Time: "2024-06-08",
        },
        {
          id: 8,
          name: "竣工验收",
          Time: "2024-08-18",
        },
      ],
      list: [
        {
          img: require("@/assets/images/zjsj/doing.png"),
          name: "基坑支护开始施工",
          time: "2022-01-01",
        },
        {
          img: require("@/assets/images/zjsj/noBegin.png"),
          name: "桩基施工开始",
          time: "2022-09-08",
        },
        {
          img: require("@/assets/images/zjsj/noBegin.png"),
          name: "屋面工程",
          time: "2023-01-17",
        },
        {
          img: require("@/assets/images/zjsj/noBegin.png"),
          name: "幕墙工程施工完成",
          time: "2024-05-23",
        },
        {
          img: require("@/assets/images/zjsj/noBegin.png"),
          name: "联合竣工验收完成",
          time: "2024-10-08",
        },
      ],
      index: 0,
    };
  },
  mounted() {
    const progress = this.$refs.Process;
    progress.scrollLeft = 48;
    this.getData();
  },
  methods: {
    getData() {
      // listProgressOfTheTask({
      //   projectSn: this.$store.state.projectSn,
      //   isNoStart: false,
      // }).then((res) => {
      //   // state 0未开始, 1进行中, 2已完成
      //   res.result.forEach((item) => {
      //     if (item.state == 2) {
      //       item.state = true;
      //     }
      //   });
      //   console.log("进度条的返回值", res);
      //   this.list = res.result;
      // });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  // overflow: auto;
  .process {
    margin-top: 5%;
    width: 95%;
    height: 85%;
    overflow: hidden;
  }
  .process:hover {
    overflow-x: auto;
  }
}
</style>