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

<template>
    <div class="container" ref="Process">
      <Process style="transform: translateX(0)" :list="stageList" />
    </div>
</template>

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


export default {
  components: { Process },
  data() {
    return {
       // 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;
}
</style>