epmet-work-pc/src/views/dataBoard/cpts/homeDetails/index.vue

<template>
  <div class="homeWrap">
    <div class="bread">
      <bread-crumb
        :list="[
          {
            path: '/dataBoard/overview/index',
            name: '概览',
          },
          {
            name: homeText ? homeText : '',
          },
        ]" />
    </div>
    <el-row :gutter="48">
      <el-col :span="8">
        <div class="bg">
          <Title :text="homeText ? homeText : ''">
            <span v-if="homeMsg && homeMsg.type" :class="[homeMsg.type === 'red' ? 'miniGrid_red' : homeMsg.type === 'yellow' ? 'miniGrid_yellow' : 'miniGrid_green']">{{ homeMsg.type === "red" ? "红" : homeMsg.type === "yellow" ? "黄" : "绿" }}色微网格</span>
          </Title>
        </div>
        <div class="apartment">
          <div class="apar_comtent">
            <div class="apar_top">
              <img src="@/assets/images/home/homeTop.png" alt="/" />
            </div>
            <div class="apar_center">
              <div class="apar_center_flex" :style="{ width: flexWidth + 'px' }">
                <div v-for="(item, index) in houseMountArr" :key="index" class="floor">
                  <div class="households" v-for="itm in item" :key="itm.id">{{ itm.doorName }}</div>
                </div>
              </div>
            </div>
            <!-- <div class="apar_bottom">
              <img src="@/assets/images/home/homeBottom.png" alt="/" />
            </div> -->
          </div>
          <div class="apar_right">
            <img src="@/assets/images/home/homeRight.png" alt="" />
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="table">
          <el-table :data="list" v-loading="loading" height="500" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)">
            <el-table-column label="序号" type="index" width="80" />
            <el-table-column prop="doorName" label="门牌号" />
            <el-table-column prop="fullName" label="所属小区" />
            <el-table-column prop="buildingId" label="所属楼栋" />
            <el-table-column prop="houseName" label="所属单元" />
            <el-table-column prop="houseCode" label="房屋编码" />
            <el-table-column prop="rentFlag" label="房屋状态">
              <template slot-scope="scope">
                <!-- 1：出租 0：自住 2：闲置 3：未售出 -->
                <span>{{ getRentFlag(scope.row.rentFlag) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="houseType" label="房屋类型">
              <template slot-scope="scope">
                <!-- 1楼房，2平房，3别墅 -->
                <span>{{ getHouseType(scope.row.houseType) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="ownerName" label="房主姓名" />
            <el-table-column prop="ownerPhone" label="房主电话">
              <template slot-scope="scope">
                {{ $sensitive(scope.row.ownerPhone, 3, 7) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="90" align="center">
              <template slot-scope="{ row }">
                <el-button type="text" @click="$router.push('/dataBoard/overview/familyPortrait/?name=' + row.doorName + '&houseId=' + row.id + '&id=' + $route.query.id + '&name2=' + (homeText ? homeText : ''))">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <div>
          <Pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
import Title from "./Title/index.vue";
import BreadCrumb from "@/views/dataBoard/cpts/personnel/components/Breadcrumb/index.vue";

export default {
  name: "homeDetails",
  components: {
    Pagination,
    Title,
    BreadCrumb,
  },
  data() {
    return {
      //   total: 0,
      //   pageNum: 1,
      //   pageSize: 10,
      flexWidth: 0,
      loading: false,
      homeMsg: {},
      list: [],
      homeText: "",
      houseMountArr: [],
    };
  },
  watch: {
    "$route.query.id"() {
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    getDoorNameList(list) {
      const doorNameList = [];
      const doorNameArr = [];
      list.forEach((item) => {
        const doorName = item.doorName;
        if (doorName.length === 4) {
          doorNameArr.push(doorName.slice(0, 2));
        } else if (doorName.length === 3) {
          doorNameArr.push(doorName.slice(0, 1));
        }
      });
      const doorNameSet = new Set(doorNameArr);
      doorNameSet.forEach((item) => {
        const arr = [];
        list.forEach((item2) => {
          const doorName = item2.doorName;
          if (doorName.length === 4) {
            if (doorName.slice(0, 2) === item) {
              arr.push(item2);
            }
          } else if (doorName.length === 3) {
            if (doorName.slice(0, 1) === item) {
              arr.push(item2);
            }
          }
        });
        doorNameList.push(arr);
      });
      return doorNameList;
    },

    getList() {
      this.loading = true;
      const homeType = this.$route.query.type;
      // if (homeType === "building") {
      //   this.$http.get(`/actual/base/streetOverview/getUnitHouseOverviewList?unitId=` + this.$route.query.id).then((res) => {
      //     console.log(res);
      //   });
      // } else {
      this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + this.$route.query.id).then((res) => {
        const {
          code,
          data: { houseList, unitInfo },
        } = res.data;
        if (code === 0) {
          let unitInfos = unitInfo || {};
          this.list = houseList;
          this.homeMsg = unitInfos;
          this.homeText = (unitInfos.quartersName ? unitInfos.quartersName : "") + (unitInfos.buildingName ? unitInfos.buildingName : "") + (unitInfos.unitNum ? unitInfos.unitNum + "单元" : "");
          console.log(this.homeText, " this.homeText");
          this.houseMountArr = this.getDoorNameList(this.list);
          // this.houseMountArr = [
          //   [{ doorName: 101 }, { doorName: 102 }, { doorName: 103 }, { doorName: 104 }, { doorName: 105 }, { doorName: 106 }, { doorName: 107 }, { doorName: 108 }, { doorName: 109 }],
          //   [{ doorName: 201 }, { doorName: 202 }, { doorName: 203 }, { doorName: 204 }, { doorName: 205 }, { doorName: 206 }, { doorName: 207 }, { doorName: 208 }, { doorName: 209 }],
          // ];
          if (this.houseMountArr.length > 0) {
            this.flexWidth = this.houseMountArr[0].length * 58;
          }
          this.loading = false;
        } else {
          this.loading = false;
        }
      });
      // }
    },

    getRentFlag(type) {
      const rentFlag = new Map([
        ["0", "出租"],
        ["1", "自住"],
        ["2", "闲置"],
        ["3", "未售出"],
      ]);
      return rentFlag.get(type);
    },

    getHouseType(type) {
      const houseTypeMap = new Map([
        ["1", "楼房"],
        ["2", "平房"],
        ["3", "别墅"],
      ]);
      return houseTypeMap.get(type);
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/dataBoard/table.scss";

@mixin radio {
  display: inline-block;
  width: 90px;
  height: 24px;
  opacity: 0.8;
  border-radius: 11px;
  text-align: center;
  line-height: 22px;
  margin-left: 15px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
}

.homeWrap {
  .bread {
    margin-bottom: 25px;
  }

  .apar_top {
    width: 100%;

    img {
      width: 100%;
    }
  }

  .apartment {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 100px;

    .apar_comtent {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .apar_center {
        min-width: 244px;
        max-width: 488px;
        height: 584px;
        overflow: auto;
        background: url("@/assets/images/home/homeCenter.png") no-repeat;
        background-size: 100% 100%;
        padding: 30px 30px 10px 30px;
        display: flex;
        // align-items: flex-end;
        flex-direction: column-reverse;

        .apar_center_flex {
          // width: 100%;
          display: flex;
          flex-wrap: wrap-reverse;
          justify-content: center;
        }

        .floor {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;

          .households {
            height: 58px;
            background: url("@/assets/images/home/hasPeople.png") no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex: 0 0 48px;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #7fceff;
            &:not(:last-child) {
              margin-right: 10px;
            }
          }
        }
      }

      .apar_bottom {
        width: 244px;
        margin-top: -1px;

        img {
          width: 100%;
        }
      }
    }

    .apar_right {
      margin-left: -3px;
    }
  }

  .more {
    font-size: 14px;
    font-weight: 400;
    color: #a0cdff;
    cursor: pointer;
  }

  .bg {
    margin-bottom: 0px;
    background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%);

    .miniGrid_red {
      @include radio;
      background: rgba(249, 86, 25, 0.2);
      border: 1px solid #f95619;
      color: #f95619;
    }

    .miniGrid_green {
      @include radio;
      background: rgba(249, 86, 25, 0.2);
      border: 1px solid green;
      color: green;
    }

    .miniGrid_yellow {
      @include radio;
      background: rgba(249, 86, 25, 0.2);
      border: 1px solid yellow;
      color: yellow;
    }
  }
}
</style>