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"),
      list: [
        // { endTime: '2022-01-01', subitemProjectName: '基础工程', state: true ,},
        // { endTime: '2022-02-14', subitemProjectName: '主题结构施工', state: true, },
        // { endTime: '2022-03-25', subitemProjectName: '屋面工程', state: true, },
        // { endTime: '2022-07-31', subitemProjectName: '机械设备安拆工程', state: true, },
        // { endTime: '2022-21-31', subitemProjectName: '室内装饰装修工程' }
      ],
      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>