123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634 |
- <template>
- <!-- 开启顶部安全区适配 -->
- <van-nav-bar
- :border="false"
- safe-area-inset-top
- style="background-color: #5c8fff"
- />
- <div class="page_info">
- <div
- class="info_title"
- :style="{
- 'margin-bottom': role != 'Maintenance' ? '54px' : '12px',
- 'padding-bottom': role != 'Maintenance' ? '58px' : '',
- }"
- >
- <van-row align="center" class="position_pannel">
- <template v-if="role == 'Tenant'">
- <van-row justify="center" style="flex: 1">
- <van-col>首页</van-col>
- </van-row>
- </template>
- <template v-else>
- <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>
- </template>
- <van-col
- @click="
- () => {
- $router.push({ path: '/userInfo', query: { type: 'password' } });
- }
- "
- >
- <van-image
- :src="require('@/assets/user.svg')"
- width="16"
- height="16"
- fit="contain"
- />
- </van-col>
- </van-row>
- </div>
- <!-- 维修工没有此块功能 -->
- <template v-if="role && role != 'Maintenance'">
- <div class="info_function">
- <div
- class="function_item"
- v-for="(item, index) in functionList"
- :key="index"
- :style="{ display: !item.role.includes(role) ? 'none' : '' }"
- @click="toPath(item.path, item.activeTab)"
- >
- <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 -->
- <template v-if="role == 'Inspection'">
- <van-row align="center" justify="space-between" class="sub_title">
- <van-col class="title">实时巡检</van-col>
- <van-col
- class="function_btn"
- @click="
- () => {
- $router.push({ path: '/review/clock' });
- }
- "
- >
- <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-around" class="list_item">
- <van-row
- align="center"
- justify="center"
- style="flex-direction: column"
- v-for="(item, index) in reviewList"
- :key="item + '_' + index"
- >
- <van-col>{{ item.dictLabel }}</van-col>
- <v-count-up
- :end-val="Number(item['count'])"
- class="count_up"
- :options="item['options']"
- />
- </van-row>
- </van-row>
- </template>
- <!-- 实时巡检end -->
- <!-- 工单待办begin -->
- <template v-if="role && role != 'Inspection'">
- <van-row align="center" justify="space-between" class="sub_title">
- <van-col class="title">{{
- role == "admin" ? "工单待办" : "实时报修"
- }}</van-col>
- <van-col
- class="function_btn"
- @click="
- () => {
- $router.push({ path: '/repair/list' });
- }
- "
- >
- <van-col>{{ role == "admin" ? "立即处理" : "立即查看" }}</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-around" class="list_item">
- <van-row
- align="center"
- justify="center"
- style="flex-direction: column"
- v-for="(item, index) in workList"
- :key="item + '_' + index"
- :style="{ display: !item.role.includes(role) ? 'none' : '' }"
- >
- <van-col>{{ item.label }}</van-col>
- <v-count-up
- :end-val="Number(item['count'])"
- class="count_up"
- :options="item['options']"
- />
- </van-row>
- </van-row>
- </template>
- <!-- 工单待办end -->
- <!-- 设备异常begin -->
- <template v-if="role && role != 'Tenant'">
- <van-row align="center" justify="space-between" class="sub_title">
- <van-col class="title">设备异常</van-col>
- <van-col
- class="function_btn"
- @click="
- () => {
- $router.push({ path: '/device/list' });
- }
- "
- >
- <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-around" class="list_item">
- <van-row
- align="center"
- justify="space-between"
- style="flex-direction: column"
- v-for="(item, index) in deviceAlarmList"
- :key="item + '_' + index"
- >
- <van-col>{{ item.dictLabel }}</van-col>
- <v-count-up :end-val="Number(item['count'])" class="count_up" />
- </van-row>
- </van-row>
- </template>
- <!-- 设备异常end -->
- <!-- 欠费待收begin -->
- <template v-if="role == 'admin'">
- <van-row align="center" justify="space-between" class="sub_title">
- <van-col class="title">欠费待收</van-col>
- <van-col
- class="function_btn"
- @click="
- () => {
- $router.push({ path: '/pay/fee' });
- }
- "
- >
- <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 class="table_header">
- <van-col span="8">欠费类型</van-col>
- <van-col span="8">欠费租户数</van-col>
- <van-col span="8">累计欠费(元)</van-col>
- </van-row>
- <div class="table_body" :class="{ loading_info: loading }">
- <template v-if="!loading">
- <template v-if="billPaymentList.length > 0">
- <van-row v-for="(item, index) in billPaymentList" :key="index">
- <van-col span="8" style="color: #999999; font-size: 12px">{{
- `${dict_filter(item.payType, "payTypeList")["dictLabel"]}`
- }}</van-col>
- <van-col span="8">{{
- (parseInt(item.arrearageNum * 100) / 100).toFixed(2)
- }}</van-col>
- <van-col span="8">{{
- (parseInt(item.arrearageAmount * 100) / 100).toFixed(2)
- }}</van-col>
- </van-row>
- </template>
- <template v-else>
- <van-empty image-size="60" description="暂无数据" />
- </template>
- </template>
- <template v-if="loading">
- <van-loading size="24px">加载中...</van-loading>
- </template>
- </div>
- </div>
- </template>
- <!-- 欠费待收end -->
- <!-- 账单待缴begin -->
- <template v-if="role == 'Tenant'">
- <van-row align="center" justify="space-between" class="sub_title">
- <van-col class="title">账单待缴</van-col>
- <van-col
- class="function_btn"
- @click="
- () => {
- $router.push({
- path: '/bill/detail',
- query: {
- activeTab: 'bill',
- },
- });
- }
- "
- >
- <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 class="table_header">
- <van-col span="8">缴费类型</van-col>
- <van-col span="8">本期待缴金额(元)</van-col>
- <van-col span="8">累计待缴金额(元)</van-col>
- </van-row>
- <div class="table_body" :class="{ loading_info: loading }">
- <template v-if="!loading">
- <template v-if="billPaymentList.length > 0">
- <van-row v-for="(item, index) in billPaymentList" :key="index">
- <van-col span="8" style="color: #999999; font-size: 12px">{{
- `${dict_filter(item.payType, "payTypeList")["dictLabel"]}`
- }}</van-col>
- <van-col span="8">{{
- (parseInt(item.currentAmount * 100) / 100).toFixed(2)
- }}</van-col>
- <van-col span="8">{{
- (parseInt(item.cumulativeAmount * 100) / 100).toFixed(2)
- }}</van-col>
- </van-row>
- </template>
- <template v-else>
- <van-empty image-size="60" description="暂无数据" />
- </template>
- </template>
- <template v-if="loading">
- <van-loading size="24px">加载中...</van-loading>
- </template>
- </div>
- </div>
- </template>
- <!-- 账单待缴end -->
- </div>
- </div>
- <!-- 底部tabbar -->
- <template v-if="role == 'admin'">
- <van-tabbar
- v-model="activeTabBar"
- active-color="#2E69EB"
- inactive-color="#0c1935"
- >
- <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 == 'bill'
- ? require('@/assets/rent-bill-active.svg')
- : require('@/assets/rent-bill.svg')
- "
- to="/bill/list"
- >租户账单</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>
- </template>
- <script>
- import { isEmpty, getDictDataList } from "@/utils/index.js";
- import api from "../utils/api";
- import VCountUp from "./CountUp";
- export default {
- components: {
- "v-count-up": VCountUp,
- },
- data() {
- return {
- role: "",
- tenantInfo: {}, //角色为Tenant时有值
- name: "电商园四期-B座",
- activeTabBar: "home",
- functionList: [
- {
- path: "/repair/create",
- src: require("@/assets/repair-online.svg"),
- label: "线上报修",
- role: ["admin", "Inspection", "Tenant"],
- },
- {
- path: "/review/list",
- src: require("@/assets/check-review.svg"),
- label: "巡检记录",
- role: ["admin", "Inspection"],
- },
- {
- path: "/pay/record",
- src: require("@/assets/reduce-record.svg"),
- label: "扣缴记录",
- role: ["admin", "Tenant"],
- activeTab: "record",
- },
- ],
- workList: [
- {
- label: "待指派",
- count: 0,
- role: ["admin"],
- },
- {
- label: "待维修",
- count: 0,
- role: ["admin", "Maintenance", "Tenant"],
- },
- {
- label: "已维修",
- count: 0,
- role: ["admin", "Maintenance", "Tenant"],
- },
- ],
- reviewList: [],
- deviceAlarmList: [],
- payTypeList: [],
- billPaymentList: [],
- loading: true,
- };
- },
- async mounted() {
- this.role = localStorage.getItem("role");
- await this.getPayTypeList();
- await this.getDeviceAlarmList();
- await this.getReviewList();
- this.getHomeData();
- if (this.role == "Tenant") {
- this.tenantInfo = JSON.parse(localStorage.getItem("tenantInfo"));
- } else {
- this.tenantInfo = {};
- }
- },
- methods: {
- getPayTypeList() {
- this.payTypeList = getDictDataList("PayType");
- },
- getDeviceAlarmList() {
- this.deviceAlarmList = getDictDataList("DeviceAlarm");
- },
- getReviewList() {
- this.reviewList = getDictDataList("Review");
- },
- dict_filter(val, list) {
- if (isEmpty(val)) {
- return {};
- }
- return this[list].find((item) => item.dictValue == val);
- },
- getHomeData() {
- api.homedata().then((res) => {
- if (res.code == 0) {
- //工单代办数据
- for (let k in res.data.workOrder) {
- this.workList[k - 1].count = res.data.workOrder[k];
- }
- //设备异常数据
- let deviceArr = [];
- for (let key in res.data.equip.maps) {
- if (key != "Relay") {
- deviceArr.push({
- dictValue: key,
- count: res.data.equip.maps[key],
- });
- }
- }
- //赋值异常总数
- deviceArr.unshift({
- dictValue: "abnormalNum",
- count: res.data.equip.abnormalNum,
- });
- this.deviceAlarmList.forEach((item) => {
- item.count = deviceArr.find(
- (ele) => ele.dictValue == item.dictValue
- ).count;
- });
- //实时巡检数据
- let reviewArr = [];
- for (let key in res.data.inspectionInfo) {
- reviewArr.push({
- dictValue: key,
- count: res.data.inspectionInfo[key],
- });
- }
- this.reviewList.forEach((item) => {
- item.count = reviewArr.find(
- (ele) => ele.dictValue == item.dictValue
- ).count;
- });
- //欠费待收数据
- this.billPaymentList = res.data.billPaymentList;
- }
- this.loading = false;
- });
- },
- toPath(path, val) {
- let params = {};
- if (this.role == "Tenant") {
- params = {
- tenantId: this.tenantInfo.tenantId,
- tenantName: this.tenantInfo.tenantName,
- activeTab: val,
- };
- path = "/bill/detail";
- }
- this.$router.push({
- path: path,
- query: params,
- });
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .page_info {
- position: relative;
- .info_title {
- width: 100%;
- background: #5c8fff;
- border-radius: 0px 0px 16px 16px;
- box-sizing: border-box;
- .position_pannel {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0 16px;
- .van-col {
- height: 44px;
- font-weight: 600;
- font-size: 16px;
- 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;
- box-sizing: border-box;
- .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 {
- padding: 0 16px;
- .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 0;
- height: 32px;
- .van-col {
- height: 16px;
- font-size: 12px;
- font-weight: 400;
- color: #666666;
- line-height: 16px;
- }
- .count_up {
- margin-top: 4px;
- height: 22px;
- font-size: 16px;
- color: #0c1935;
- line-height: 22px;
- }
- }
- .list_table {
- padding: 8px 16px 4px 16px;
- min-height: 156px;
- .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 {
- height: calc(100% - 33px);
- .van-row {
- padding: 12px 0;
- border-bottom: 1px solid #eeeeee;
- }
- .van-col {
- height: 16px;
- font-size: 16px;
- color: #0c1935;
- line-height: 16px;
- }
- }
- .loading_info {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- }
- }
- </style>
|