witcarbon-app/src/views/home.vue

<template>
  <!-- 开启顶部安全区适配 -->
  <van-nav-bar
    :border="false"
    safe-area-inset-top
    style="background-color: #5c8fff"
  />
  <div class="page_info">
    <div class="info_bg">
      <van-row align="center" class="title">
        <van-col>
          <van-image
            :src="require('@/assets/position.svg')"
            width="16"
            height="16"
            fit="contain"
          />
          <van-col>{{ name }}</van-col>
          <van-image
            :src="require('@/assets/arrow-right.svg')"
            width="24"
            height="24"
            fit="contain"
          />
        </van-col>
        <van-col @click="toPath">
          <van-image
            :src="require('@/assets/user.svg')"
            width="16"
            height="16"
            fit="contain"
          />
        </van-col>
      </van-row>
    </div>
    <!-- 维修工没有此块功能 -->
    <template v-if="role != 3">
      <div class="info_function">
        <div
          class="function_item"
          v-for="(item, index) in functionList"
          :key="index"
          :style="{ display: !item.role.includes(role) ? 'none' : '' }"
        >
          <template v-if="item.role.includes(role)">
            <van-image :src="item.src" width="36" height="36" fit="contain" />
            <van-col>{{ item.label }}</van-col>
          </template>
        </div>
      </div>
    </template>
    <div class="info_list">
      <!-- 实时巡检begin -->
      <van-row align="center" justify="space-between" class="sub_title">
        <van-col class="title">实时巡检</van-col>
        <van-col class="function_btn">
          <van-col>立即巡检</van-col>
          <van-image
            :src="require('@/assets/btn-arrow-right.svg')"
            width="24"
            height="24"
            fit="contain"
          />
        </van-col>
      </van-row>
      <van-row align="center" justify="space-between" class="list_item">
        <van-row
          align="center"
          justify="space-between"
          style="flex-direction: column"
          v-for="(item, index) in checkList"
          :key="item + '_' + index"
        >
          <van-col>{{ item.label }}</van-col>
          <v-count-up
            :end-val="Number(item['count'])"
            class="count_up"
            :options="item['options']"
          />
        </van-row>
      </van-row>
      <!-- 实时巡检end -->

      <!-- 工单待办begin -->
      <van-row align="center" justify="space-between" class="sub_title">
        <van-col class="title">工单待办</van-col>
        <van-col class="function_btn">
          <van-col>立即处理</van-col>
          <van-image
            :src="require('@/assets/btn-arrow-right.svg')"
            width="24"
            height="24"
            fit="contain"
          />
        </van-col>
      </van-row>
      <van-row align="center" justify="space-between" class="list_item">
        <van-row
          align="center"
          justify="space-between"
          style="flex-direction: column"
          v-for="(item, index) in workList"
          :key="item + '_' + index"
        >
          <van-col>{{ item.label }}</van-col>
          <v-count-up
            :end-val="Number(item['count'])"
            class="count_up"
            :options="item['options']"
          />
        </van-row>
      </van-row>
      <!-- 工单待办end -->

      <!-- 设备异常begin -->
      <van-row align="center" justify="space-between" class="sub_title">
        <van-col class="title">设备异常</van-col>
        <van-col class="function_btn">
          <van-col>立即处理</van-col>
          <van-image
            :src="require('@/assets/btn-arrow-right.svg')"
            width="24"
            height="24"
            fit="contain"
          />
        </van-col>
      </van-row>
      <van-row align="center" justify="space-between" class="list_item">
        <van-row
          align="center"
          justify="space-between"
          style="flex-direction: column"
          v-for="(item, index) in deviceErrorList"
          :key="item + '-' + index"
        >
          <van-col>{{ item.label }}</van-col>
          <v-count-up
            :end-val="Number(item['count'])"
            class="count_up"
            :options="item['options']"
            style="color: #fa5555"
          />
        </van-row>
      </van-row>
      <!-- 设备异常end -->

      <!-- 欠费待收begin -->
      <van-row align="center" justify="space-between" class="sub_title">
        <van-col class="title">欠费待收</van-col>
        <van-col class="function_btn">
          <van-col>立即处理</van-col>
          <van-image
            :src="require('@/assets/btn-arrow-right.svg')"
            width="24"
            height="24"
            fit="contain"
          />
        </van-col>
      </van-row>
      <div class="list_item list_table">
        <van-row align="center" justify="space-between" class="table_header">
          <van-col span="8">欠费类型</van-col>
          <van-col span="8">欠费租户数</van-col>
          <van-col span="8">累计欠费</van-col>
        </van-row>
        <van-row
          align="center"
          justify="space-between"
          v-for="item in list"
          :key="item.id"
          class="table_body"
        >
          <van-col span="8" style="color: #999999; font-size: 12px">
            {{ `${feeType_filter(item && item.feeType)}` }}
          </van-col>
          <van-col span="8" style="color: #0c1935; font-size: 16px">
            {{ item.rentNum }}
          </van-col>
          <van-col span="8" style="color: #0c1935; font-size: 16px">
            {{ item.totalFee }}
          </van-col>
        </van-row>
      </div>
      <!-- 欠费待收end -->
    </div>
  </div>

  <!-- 底部tabbar -->
  <van-tabbar
    v-model="activeTabBar"
    active-color="#2E69EB"
    inactive-color="#0c1935"
    safe-area-inset-bottom
  >
    <van-tabbar-item
      name="home"
      :icon="
        activeTabBar == 'home'
          ? require('@/assets/home-active.svg')
          : require('@/assets/home.svg')
      "
      to="/home"
      >首页</van-tabbar-item
    >
    <van-tabbar-item
      name="rentBill"
      :icon="
        activeTabBar == 'rentBill'
          ? require('@/assets/rent-bill-active.svg')
          : require('@/assets/rent-bill.svg')
      "
      to="/rentBill"
      >租户账单</van-tabbar-item
    >
    <van-tabbar-item
      name="remoteControl"
      :icon="
        activeTabBar == 'remoteControl'
          ? require('@/assets/remote-control-active.svg')
          : require('@/assets/remote-control.svg')
      "
      to="/remoteControl"
      >远程管控</van-tabbar-item
    >
  </van-tabbar>
</template>
<script>
import { isEmpty } from "@/utils/index.js";
import VCountUp from "./CountUp";
export default {
  components: {
    "v-count-up": VCountUp,
  },
  data() {
    return {
      role: 1, //1:admin、2:巡检人员、3:维修工、4:租户
      name: "电商园四期-B座",
      activeTabBar: "home",
      functionList: [
        {
          src: require("@/assets/repair-online.svg"),
          label: "线上报修",
          role: [1, 2, 4],
        },
        {
          src: require("@/assets/check-review.svg"),
          label: "巡检记录",
          role: [1, 2],
        },
        {
          src: require("@/assets/reduce-record.svg"),
          label: "扣缴记录",
          role: [1, 4],
        },
      ],
      checkList: [
        {
          label: "今日待巡检",
          count: 88,
          options: {
            separator: ",",
          },
        },
        {
          label: "今日已巡检",
          count: 2,
          options: {
            separator: ",",
          },
        },
      ],
      workList: [
        {
          label: "待指派",
          count: 3,
          options: {
            separator: ",",
          },
        },
        {
          label: "待维修",
          count: 2,
          options: {
            separator: ",",
          },
        },
        {
          label: "已维修",
          count: 1,
          options: {
            separator: ",",
          },
        },
      ],
      deviceErrorList: [
        {
          label: "异常总数",
          count: 7,
          options: {
            separator: ",",
          },
        },
        {
          label: "电表异常",
          count: 5,
          options: {
            separator: ",",
          },
        },
        {
          label: "水表异常",
          count: 2,
          options: {
            separator: ",",
          },
        },
      ],
      list: [
        { feeType: 1, rentNum: 23, totalFee: 12636 },
        { feeType: 2, rentNum: 7, totalFee: 462 },
        { feeType: 3, rentNum: 132, totalFee: 24634 },
        { feeType: 1, rentNum: 23, totalFee: 12636 },
        { feeType: 2, rentNum: 7, totalFee: 462 },
        { feeType: 3, rentNum: 132, totalFee: 24634 },
      ],
    };
  },
  methods: {
    feeType_filter(val) {
      if (isEmpty(val)) {
        return "";
      }
      if (val == 1) {
        return "电费";
      }
      if (val == 2) {
        return "水费";
      }
      if (val == 3) {
        return "物业相关";
      }
    },
    toPath() {
      this.$router.push({
        path: "/userInfo",
        query: {
          title: "账号中心",
          source: "account",
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page_info {
  position: relative;
  height: calc(
    100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 50px -46px
  );
  .info_bg {
    width: 100%;
    height: 102px;
    background: #5c8fff;
    border-radius: 0px 0px 16px 16px;
    padding-top: 12px;
    margin-bottom: 42px;
    box-sizing: border-box;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      .van-col {
        height: 24px;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        line-height: 24px;
        text-indent: 4px;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
        display: flex;
        align-items: center;
        letter-spacing: 2px;
      }
    }
  }
  .info_function {
    position: absolute;
    top: 52px;
    width: calc(100% - 32px);
    margin: 0 16px;
    background: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 16px 0;
    .function_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .van-col {
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        margin-top: 4px;
      }
    }
  }
  .info_list {
    max-height: calc(100% - 102px - 42px - 20px);
    padding: 0 16px;
    overflow-y: auto;
    .sub_title {
      margin: 12px 0 6px 0;
      .title {
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #0c1935;
        line-height: 20px;
      }
      .function_btn {
        display: flex;
        align-items: center;
        .van-col {
          height: 16px;
          font-size: 12px;
          font-weight: 400;
          color: #2e69eb;
          line-height: 16px;
        }
      }
    }
    .list_item {
      background: #ffffff;
      box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.08);
      border-radius: 4px;
      padding: 16px 30px;
      .van-col {
        height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        line-height: 16px;
      }
      .count_up {
        margin-top: 4px;
        height: 22px;
        font-size: 20px;
        font-weight: 500;
        color: #0c1935;
        line-height: 22px;
      }
    }
    .list_table {
      padding: 8px 16px;
      .table_header {
        padding: 8px 0;
        border-bottom: 1px solid #eeeeee;
        .van-col {
          height: 16px;
          font-size: 12px;
          font-weight: 600;
          color: #999999;
          line-height: 16px;
        }
      }
      .table_body {
        padding: 12px 0;
        border-bottom: 1px solid #eeeeee;
      }
    }
  }
}
</style>