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