epmet-work-pc-chengyang/src/views/dataBoard/cpts/family/modules/Family.vue

<template>
  <div class="family">
    <div
      class="tag"
      @click="cheackCrrent(item)"
      v-for="item in data"
      :key="item.id"
    >
      <div>
        {{ item.name }}
      </div>
      <div v-if="item.houseHolderRel">
        关系：{{
          item.houseHolderRel == "本人" ? "户主" : item.houseHolderRel
        }}
      </div>
    </div>
    <div style="padding-top: 220px; margin-left: 148px">
      <div class="user-name">{{ hzData.name }}</div>
      <div class="user-gx">（户主）</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Family",
  data() {
    return {
      data: [],
      info: {},
    };
  },
  computed: {},
  watch: {
    "$route.query"(newVal, oldVal) {
      this.getDatas();
    },
  },
  created() {
    this.getDatas();
  },
  methods: {
    getParams(params) {
      let paramStr = "";
      Object.keys(params).forEach((item) => {
        if (paramStr === "") {
          paramStr = `${item}=${params[item]}`;
        } else {
          paramStr = `${paramStr}&${item}=${params[item]}`;
        }
      });
      return paramStr;
    },
    cheackCrrent(item) {
      const params = { ...this.$route.query, houseId: item.homeId };
      this.$router.push(this.$route.path + "?" + this.getParams(params));
    },
    getDatas() {
      this.data = [];
      this.info = {};
      const query = this.$route.query;
      this.$http
        .post(
          "/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=1&resid=" +
            query.houseId
        )
        .then(({ data: res }) => {
          const data = res.data;
          this.data = data;
          const arr = data.filter((item) => item.houseHolderRel == "本人");
          this.hzData = arr.length > 0 ? arr[0] : {};
          this.$emit("setJuminData", data);
        });
    },
    getType(arr) {
      if (arr.length > 0) {
        let txt = "";
        arr.forEach((item, index) => {
          if (arr.length == index + 1) {
            txt = txt + item;
          } else {
            txt = txt + item + ",";
          }
        });
        return txt;
      } else {
        return "暂无";
      }
    },
    // getUserInfo() {
    //   this.$http
    //     .post(
    //       "/actual/base/peopleRoomOverview/getPersonalFile?resid=" +
    //         this.queryParam.resid,
    //       this.queryParam
    //     )
    //     .then(({ data: res }) => {
    //       this.info = res.data;
    //     });
    // },
  },
};
</script>

<style scoped lang="scss">
.family {
  width: 464px;
  height: 340px;
  background: url("@/assets/images/manyidu/gx_bg.png") no-repeat center;
  position: relative;
  margin: 40px auto;
}
.tag {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  padding: 18px 24px;
  box-sizing: border-box;
  position: absolute;
  background: url("@/assets/images/manyidu/gx_big.png") no-repeat center;
  background-size: 100% 100%;
  width: 180px;
  min-height: 80px;
  &:nth-of-type(1) {
    left: -14px;
    top: -24px;
  }
  &:nth-of-type(2) {
    right: -14px;
    top: -24px;
  }
  &:nth-of-type(3) {
    left: -24px;
    bottom: -40px;
  }
  &:nth-of-type(4) {
    right: -24px;
    top: 294px;
  }
  &:nth-of-type(5) {
    left: -94px;
    top: 58px;
  }
  &:nth-of-type(6) {
    right: -94px;
    top: 58px;
  }
  &:nth-of-type(7) {
    left: -124px;
    top: 134px;
  }
  &:nth-of-type(8) {
    right: -124px;
    top: 134px;
  }
  &:nth-of-type(9) {
    left: -104px;
    top: 214px;
  }
  &:nth-of-type(10) {
    right: -104px;
    top: 214px;
  }
  &:nth-of-type(11) {
    right: 144px;
    bottom: -60px;
  }
  &:nth-of-type(12) {
    right: 144px;
    top: -44px;
  }
}
.tag:hover {
  cursor: pointer;
}
.user-name {
  width: 174px;
  text-align: center;
  height: 17px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 22px;
  margin-top: -12px;
}
.user-gx {
  width: 174px;
  text-align: center;
  height: 17px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 32px;
}
</style>