energy_app/src/views/energyEfficiency/progressTracking.vue

<template>
  <div>
    <!-- <Header :title="title" @onClickLeft="onClickLeft" /> -->
    <div v-if="isloading" class="isloading">
      <van-loading color="#0094ff" size="100" vertical>加载中...</van-loading>
    </div>
    <div v-else class="container">
      <!-- 头部 -->
      <div class="list">
        <div class="list-item">
          <div class="list-top">
            <img src="@/assets/architecture.png" alt="" />
            <div style="width: 45px;">客户:</div>
          </div>
          <div class="list-mid">{{ query.consName }}</div>
        </div>

        <div class="steps">
          <van-steps
            :active="active"
            direction="vertical"
            active-color="#2c938b"
          >
            <van-step v-for="(item, index) in taskType" :key="index">
              <p class="steps-time">
                {{ item.changeTime === "" ? "" : timeDate(item.changeTime) }}
              </p>
              <p class="steps-index">{{ item.name }}</p>
              <p class="steps-name">{{ item.changeUser }}</p>
            </van-step>
          </van-steps>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { taskRecord, taskType } from "@/api/api.js";

import { getCode } from '@/api/common.js'
// import Header from "@/components/headerNew";
export default {
  name: "burstingList",
  components: {
    // Header
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.title = to.meta.title;
    });
  },

  data() {
    return {
      title: "进度跟踪",
      active: -1,
      // 状态
      taskType: [],
      isloading: false //加载中
    };
  },
  created() {
    // this.getTaskType();
    this.getTaskRecord();
    console.log('active ',this.active)
  },
  computed: {
    // 获取上一页传过来的参数
    query() {
      return this.$route.query;
    }
  },
  methods: {
    onClickLeft() {
      this.active = -1;
      this.$router.go(-1);
    },
    // 获取客户任务进度跟踪
    async getTaskRecord() {
      this.isloading = true;
      // const res1 = await taskType();
      // this.taskType = res1.data.records;
      const info = {
        codeSortId: 80000001031,
        codeType: 'sbwxlx',
      }
      await getCode(info).then((rew) => {
        if (rew.code == 0) {
          this.taskType = rew.data;
        }
      })
      const res = await taskRecord(this.query.customerId);
      if (res.code == 0) {
        this.taskType.forEach(v1 => {
          let isflay = res.data.find(v2 => v2.taskType === v1.value);
          v1.changeUser = isflay ? isflay.changeUser : "";
          v1.changeTime = isflay ? isflay.changeTime : "";
          if (isflay) {
            this.active++;
          }
        });
      }
      this.isloading = false;
      // console.log(this.list);
      // console.log(this.taskType);
      // console.log(this.active);
    },
    // 获取状态下拉
    // getTaskType() {
    //   taskType()
    //     .then(res => {
    //       if (res.code == 0) {
    //         this.taskType = res.data.records;
    //         // this.taskType = res.data.records.reverse();
    //       }
    //     })
    //     .catch(error => {
    //       this.$toast("失败");
    //     });
    // },
    // 处理时间格式年月日
    timeDate(val) {
      var date = new Date(val); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate();
      return Y + M + D;
    }
  }
};
</script>

<style lang="less" scoped>
.isloading {
  text-align: center;
  margin: auto;
}
.container {
  height: calc(100vh - 50px);
  overflow-y: auto;
}

.list {
  padding: 0 10px;

  .list-item {
    width: 100%;
    margin-top: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    display: flex;

    .list-top {
      display: flex;
      justify-content: space-between;
      img {
        width: 18px;
        height: 18px;
        margin-right: 15px;
        margin-top: 5px;
      }
      div {
        color: #000;
        opacity: 0.8;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .list-mid {
      color: #a1a1a1;
      font-size: 18px;
      margin-left: 18px;
    }
  }
}

.steps {
  width: 100%;
  padding: 50px 25px;
  background: #fff;
  border-radius: 5px;
  margin-top: 15px;
  box-sizing: border-box;
  .steps-time {
    flex: 0.35;
  }
  .steps-index {
    flex: 0.4;
  }
  .steps-name {
    flex: 0.25;
  }
}

::v-deep .van-step__title {
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  display: flex;
  justify-content: space-between;
}

.padding {
  padding-left: 20px;
}
</style>