energy_app/src/views/energyEfficiency/index2.vue

<template>
  <div class="energyindex">
    <Header :title="title" @onClickLeft="onClickLeft" />
    <div class="all">
      <!-- 顶部统计 -->
      <div class="total-box">
        <div
          class="total-item"
          v-for="(item, index) in total"
          :style="{ background: item.color }"
          :key="index"
        >
          <div>{{ item.name }}</div>
          <div>{{ item.num }}</div>
        </div>
      </div>
      <!-- 任务管理 -->
      <div>
        <van-button size="large" class="manage-btn" @click="taskManage">
          任务管理
        </van-button>
      </div>
      <!-- 卡片列表 -->
      <div class="card-list">
        <div
          class="card-item"
          v-for="item in fomtList"
          :key="item.customerId"
          @click="customerIformation(item)"
        >
          <div class="item-top">
            <div class="item-top-left">
              <div>{{ item.customerName }}</div>
              <p>{{ item.detailAddress }}</p>
            </div>
            <div class="item-top-right">
              <p :class="'right-type ' + 'type' + '-' + item.customerType">
                {{ item.customerTypeName }}
              </p>
            </div>
          </div>
          <div class="item-bot">
            <div class="item-bot-left">
              <div><img src="@/assets/xingxing02.png" alt="" /></div>
              <p>{{ item.customerName }}</p>
            </div>
            <van-icon name="arrow" size="15" color="#000" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/headerNew";
import { getUserInfo } from "@/api/api.js";
import { getCode } from "@/api/common.js";
export default {
  components: {
    Header,
  },
  data() {
    return {
      title: "能效管理",
      total: [
        { name: "客户总数", num: "0", color: "#33cccc" },
        { name: "公共机构", num: "30", color: "#33ffcc" },
        { name: "工业企业", num: "20", color: "#ffcc00" },
      ],
      list: [],
      typeList: [],
    };
  },
  computed: {
    fomtList() {
      this.list.forEach((v) => {
        this.typeList.forEach((ev) => {
          ev.child.forEach((ele) => {
            if (v.customerType == ele.code) {
              v.customerTypeName = ele.name;
            }
          });
        });
      });
      return this.list;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },

    // 任务管理
    taskManage() {
      this.$router.push("/taskmanage");
    },
    // 客户信息详情
    customerIformation(item) {
      this.$router.push("/customeriformation");
      sessionStorage.setItem("currentCustomer", JSON.stringify(item));
    },
    //获取列表数据
    async init() {
      const res = await getUserInfo({ pageNum: 1, pageSize: 10 });
      if (res.code === 0) {
        this.list = res.data.list;
        this.getCustomerType();
        this.total[0].num = res.data.total;
      }
    },
    //查询客户类型
    async getCustomerType() {
      const data = {
        codeSortId: "80000001004",
        codeType: "khlx",
      };
      const res = await getCode(data);
      if (res.code === 0) {
        this.typeList = res.data;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.energyindex {
  .all {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    .total-box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .total-item {
        width: 30%;
        height: 70px;
        color: white;
        border-radius: 5px;
        padding-top: 15px;
        line-height: 20px;
        box-sizing: border-box;
        text-align: center;
      }
    }
    .manage-btn {
      margin-top: 10px;
      padding: 35px;
      border: 0.1px solid #797979;
    }
    .card-list {
      margin-top: 10px;
      .card-item {
        width: 100%;
        background-color: white;
        border-radius: 5px;
        overflow: hidden;
        margin-top: 10px;
        .item-top {
          display: flex;
          justify-content: space-between;
          .item-top-left {
            padding: 15px;
            div {
              color: #666666;
              font-size: 24px;
              font-weight: bold;
            }
            p {
              color: #a1a1a1;
              margin-top: 3px;
              width: 180px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .item-top-right {
            padding: 5px;
            height: 18px;
            border-radius: 0 0 0 5px;
            p {
              font-size: 15px;
              line-height: 18px;
              color: white;
            }
          }
        }
        .item-bot {
          padding: 0 15px 15px;
          display: flex;
          justify-content: space-between;
          .item-bot-left {
            display: flex;
            div {
              width: 14px;
              height: 14px;
              img {
                width: 100%;
                height: 100%;
                background-size: 100% 100%;
              }
            }
            p {
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
  .right-type {
    width: 20vw;
    padding: 1vh 0.5vw;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
  }
  .type-102 {
    background: #ffae00;
  }
  .type-103 {
    background: #ff8208;
  }
  .type-201 {
    background: #0078ff;
  }
  .type-203 {
    background: #14a8e2;
  }
}
</style>