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">
                <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="房主电话"/>
            <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+'&user_id='+row.resiId+'&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,
      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;
      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.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;

    .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;
            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>