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 v-if="projectSn == gzProjectSn" style="transform: translateX(0)" :list="stageList3" />
        <Process v-if="projectSn == nowProjectSn" style="transform: translateX(0)" :list="stageList2" />
        <Process v-if="COMPANY == 'zjsj' && projectSn == zhtProjectSn" style="transform: translateX(0)" :list="stageList_zht" />
        <Process v-if="COMPANY == 'zjsj' && projectSn != nowProjectSn && projectSn != gzProjectSn" style="transform: translateX(0)" :list="stageList" />
        <Process v-if="COMPANY == 'pssh'" style="transform: translateX(0)" :listPssh="stageListPssh" />
      </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
        }
      },
      nowProjectSn: '62622728E8EF4F97AA24E43DA97D584A',
      gzProjectSn: '3E4B980B04A9410685EE9E205F356C01',
      projectSn: '',
      zhtProjectSn: 'D5144AFEEA41403D8CE4A00A59905217',
      COMPANY: COMPANY,
      // projectData.constructionStage
      // stageList: this.$t('message.companyDiagram.CONSTRUCTIONSTAGE'),
      constructionStageEnum: {
        1: '地下室结构阶段',
        2: '地上造楼机结构施工',
        3: '幕墙工程',
        4: '电梯工程',
        5: '机电安装工程',
        6: '精装修工程',
        7: '园林市政工程',
        8: '地基基础分部验收',
        9: '主体结构分部验收',
        10: '节能分部验收',
        11: '其他分部验收',
        12: '规划验收',
        13: '消防验收',
        14: '竣工验收完成'
      },
      stageList_zht: [
        {
          id: 1,
          name: '开工',
          Time: '2023-01-06'
        },
        {
          id: 2,
          name: '地下室结构施工',
          Time: '2024-01-20'
        },
        {
          id: 3,
          name: '2#楼地上结构施',
          Time: '2024-07-30'
        },
        {
          id: 4,
          name: '1#楼地上结构施',
          Time: '2024-11-15'
        },
        {
          id: 5,
          name: '幕墙施工',
          Time: '2025-03-18'
        },
        {
          id: 6,
          name: '机电安装施工',
          Time: '2025-04-24'
        },
        {
          id: 7,
          name: '装饰装修工程',
          Time: '2025-08-02'
        }
      ],
      // 2024.3.15由stageList改为stageList_last
      stageList: [
        {
          id: 1,
          name: '开工',
          Time: '2022-04-17'
        },
        {
          id: 2,
          name: '地下室结构施工',
          Time: '2023-03-25'
        },
        {
          id: 3,
          name: '地上结构施工',
          Time: '2023-12-25'
        },
        {
          id: 4,
          name: '幕墙施工',
          Time: '2024-05-23'
        },
        {
          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'
        }
      ],
      stageList2: [
        {
          id: 1,
          name: '开工日期',
          Time: '2023-11-08'
        },
        {
          id: 2,
          name: '地下室结构完成',
          Time: '2025-05-06'
        },
        {
          id: 3,
          name: '塔楼主体结构完成',
          Time: '2026-04-13'
        },
        {
          id: 4,
          name: '砌体结构施工完成',
          Time: '2026-06-06'
        },
        {
          id: 5,
          name: '抹灰工程施工完成',
          Time: '2026-09-11'
        },
        {
          id: 6,
          name: '塔楼幕墙安装完成',
          Time: '2026-10-26'
        },
        {
          id: 7,
          name: '机电设备安装完成',
          Time: '2026-12-23'
        },
        {
          id: 8,
          name: '整体工程竣工',
          Time: '2028-01-16'
        }
      ],
      stageList3: [
        {
          id: 1,
          name: '开工',
          Time: '2023-12-08'
        },
        {
          id: 2,
          name: '正负零',
          Time: '2024-08-25'
        },
        {
          id: 3,
          name: '主体结构封顶',
          Time: '2025-09-14'
        },
        {
          id: 4,
          name: '竣工验收',
          Time: '2026-09-30'
        },
      ],
      // stageListPssh:[
      // {
      //     id: 1,
      //     name: "基坑支护开始施工",
      //     Time: "2022-01-01",
      //   },
      // {
      //     id: 2,
      //     name: "桩基施工开始",
      //     Time: "2022-09-08",
      //   },
      // {
      //     id: 3,
      //     name: "屋面工程",
      //     Time: "2023-01-17",
      //   },
      // {
      //     id: 4,
      //     name: "幕墙工程施工完成",
      //     Time: "2024-05-23",
      //   },
      // {
      //     id: 5,
      //     name: "联合竣工验收完成",
      //     Time: "2024-10-08",
      //   },
      // ],
      stageListPssh: [
        {
          id: 1,
          name: '基坑支护与边坡支护开始时间',
          Time: '2022-08-11'
        },
        {
          id: 2,
          name: '桩基础施工开始',
          Time: '2022-11-07'
        },
        {
          id: 3,
          name: '地下室封顶时间',
          Time: '2023-11-16'
        },
        {
          id: 4,
          name: '主体结构封顶',
          Time: '2024-07-27'
        },
        {
          id: 5,
          name: '屋面工程',
          Time: '2024-09-25'
        },
        {
          id: 6,
          name: '装饰装修工程',
          Time: '2025-05-02'
        },
        {
          id: 7,
          name: '室外工程',
          Time: '2025-04-13'
        },
        {
          id: 8,
          name: '竣工验收及备案',
          Time: '2025-06-22'
        }
      ],
      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
    }
  },
  created() {
    this.projectSn = this.$store.state.projectSn
  },
  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>