能效诊断

src/views/energyEfficiency/progressTracking.vue

@@ -0,0 +1,212 @@
+<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>