ShibeiWorkPlatform_Frontend/src/views/modules/visual/basicinfo/people.vue

<template>
  <div class="g-cpt">
    <div class="g-l">
      <div class="m-people">
        <cpt-card>
          <div class="title">
            <img src="@/assets/img/shuju/title-tip.png" />
            <span>人员情况</span>
          </div>
          <div class="more" @click="showedMoreInfo = true">查看更多</div>
          <div class="ren">
            <img class="pic-ren" src="@/assets/img/shuju/people/ren.png" />
            <div class="ren-name">
              <span>{{ info.name }}</span>
              <img src="@/assets/img/shuju/people/arrow.png" />
            </div>
            <div class="ren-prop z-1">
              <img src="@/assets/img/shuju/people/ren-prop-1.png" />
              <span>所属网格</span>

              <div class="ren-cnt">
                <h5>所属网格：</h5>
                <p>
                  {{ info.gridName }}
                </p>
              </div>
            </div>

            <div class="ren-prop z-2">
              <img src="@/assets/img/shuju/people/ren-prop-2.png" />
              <span>人员类别</span>

              <div class="ren-cnt">
                <h5>人员类别：</h5>
                <p>
                  {{ info.personCategory.join("、") }}
                </p>
              </div>
            </div>

            <div class="ren-prop z-3">
              <img src="@/assets/img/shuju/people/ren-prop-3.png" />
              <span>工作单位</span>

              <div class="ren-cnt">
                <h5>工作单位：</h5>
                <p>
                  {{ info.workUnit }}
                </p>
              </div>
            </div>

            <div class="ren-prop z-4">
              <img src="@/assets/img/shuju/people/ren-prop-4.png" />
              <span>志愿者类别</span>

              <div class="ren-cnt">
                <h5>志愿者类别：</h5>
                <p>
                  {{ info.volunteerCategory.join("、") }}
                </p>
              </div>
            </div>

            <div class="ren-prop z-5">
              <img src="@/assets/img/shuju/people/ren-prop-5.png" />
              <span>房屋信息</span>

              <div class="ren-cnt">
                <h5>房屋信息：</h5>
                <p>
                  {{ info.houseInfo.join("、") }}
                </p>
              </div>
            </div>

            <div class="ren-prop z-6">
              <img src="@/assets/img/shuju/people/ren-prop-6.png" />
              <span>经济状况</span>

              <div class="ren-cnt">
                <h5>经济状况：</h5>
                <p>月薪{{ info.financialSituation.monthlyIncome }}</p>
              </div>
            </div>
          </div>
        </cpt-card>
      </div>

      <div class="m-pop" v-if="showedMoreInfo">
        <div class="wrap">
          <cpt-card>
            <div class="title">
              <img src="@/assets/img/shuju/title-tip.png" />
              <span>更多信息</span>
            </div>

            <div class="btn-close" @click="showedMoreInfo = false">
              <img src="@/assets/img/shuju/people/close.png" />
            </div>

            <div class="list">
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
            </div>

            <div class="line"></div>

            <div class="list">
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
            </div>

            <div class="line"></div>

            <div class="list">
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
            </div>

            <div class="line"></div>

            <div class="list">
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
            </div>
          </cpt-card>
        </div>
      </div>

      <div class="m-relation">
        <cpt-card>
          <div class="title">
            <img src="@/assets/img/shuju/title-tip.png" />
            <span>家庭关系</span>
          </div>
          <div class="info">
            <div class="huzhu">
              <img class="huzhu-bg" src="@/assets/img/shuju/people/huzhu.png" />
              <img
                class="huzhu-ico"
                src="@/assets/img/shuju/people/huzhu-home.png"
              />
              <div class="huzhu-name">{{ houseInfo.ownerName }}</div>
              <p>（户主）</p>
            </div>
            <div class="rel z-zuo-2" v-if="houseInfo.list[0]">
              <img
                class="rel-bg"
                src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
              />
              <img
                class="rel-line"
                src="@/assets/img/shuju/people/huzhu-line/zuo2.png"
              />
              <div class="rel-text">
                <span class="rel-call">{{ houseInfo.list[0].relation }}</span>
                <span class="rel-name"
                  >（{{ houseInfo.list[0].userName }}）</span
                >
              </div>
            </div>

            <div class="rel z-you-2" v-if="houseInfo.list[1]">
              <img
                class="rel-bg"
                src="@/assets/img/shuju/people/huzhu-kuang-you.png"
              />
              <img
                class="rel-line"
                src="@/assets/img/shuju/people/huzhu-line/you2.png"
              />
              <div class="rel-text">
                <span class="rel-call">{{ houseInfo.list[1].relation }}</span>
                <span class="rel-name"
                  >（{{ houseInfo.list[1].userName }}）</span
                >
              </div>
            </div>

            <div class="rel z-zuo-1" v-if="houseInfo.list[2]">
              <img
                class="rel-bg"
                src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
              />
              <img
                class="rel-line"
                src="@/assets/img/shuju/people/huzhu-line/zuo1.png"
              />
              <div class="rel-text">
                <span class="rel-call">{{ houseInfo.list[2].relation }}</span>
                <span class="rel-name"
                  >（{{ houseInfo.list[2].userName }}）</span
                >
              </div>
            </div>

            <div class="rel z-you-1" v-if="houseInfo.list[3]">
              <img
                class="rel-bg"
                src="@/assets/img/shuju/people/huzhu-kuang-you.png"
              />
              <img
                class="rel-line"
                src="@/assets/img/shuju/people/huzhu-line/you1.png"
              />
              <div class="rel-text">
                <span class="rel-call">{{ houseInfo.list[3].relation }}</span>
                <span class="rel-name"
                  >（{{ houseInfo.list[3].userName }}）</span
                >
              </div>
            </div>

            <div class="rel z-zuo-3" v-if="houseInfo.list[4]">
              <img
                class="rel-bg"
                src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
              />
              <img
                class="rel-line"
                src="@/assets/img/shuju/people/huzhu-line/zuo3.png"
              />
              <div class="rel-text">
                <span class="rel-call">{{ houseInfo.list[4].relation }}</span>
                <span class="rel-name"
                  >（{{ houseInfo.list[4].userName }}）</span
                >
              </div>
            </div>

            <div class="rel z-you-3" v-if="houseInfo.list[5]">
              <img
                class="rel-bg"
                src="@/assets/img/shuju/people/huzhu-kuang-you.png"
              />
              <img
                class="rel-line"
                src="@/assets/img/shuju/people/huzhu-line/you3.png"
              />
              <div class="rel-text">
                <span class="rel-call">{{ houseInfo.list[5].relation }}</span>
                <span class="rel-name"
                  >（{{ houseInfo.list[5].userName }}）</span
                >
              </div>
            </div>
          </div>
        </cpt-card>
      </div>
    </div>
    <div class="g-r"></div>
  </div>
</template>

<script>
import { Loading } from "element-ui"; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";

export default {
  name: "HomeMap",
  data() {
    return {
      showedMoreInfo: false,
      info: {
        financialSituation: { monthlyIncome: "", retirementAmount: "" },
        gridName: "",
        houseInfo: [],
        name: "",
        personCategory: [],
        volunteerCategory: [],
        workUnit: "",
      },

      houseInfo: {
        ownerName: "",
        list: [
          {
            userId: "",
            userName: "",
            isSelf: "",
            relation: "",
          },
        ],
      },
    };
  },

  props: {
    userId: {
      type: String,
      default: "",
    },
  },

  computed: {},

  components: {
    cptCard,
  },

  watch: {
    userId() {
      this.getApiData();
    },
  },

  async mounted() {
    this.getApiData();
  },

  methods: {
    handleSearch() {},

    getApiData() {
      this.getInfo();
      this.getHouseInfo();
    },

    //加载组织数据
    async getInfo() {
      const url = "/epmetuser/icresiuser/persondata";
      let params = {
        userId: this.userId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.info = { ...this.info, ...data };
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getHouseInfo() {
      const url = "/epmetuser/icresiuser/ownerrelation";
      let params = {
        userId: this.userId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.houseInfo = { ...this.houseInfo, ...data };
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/people.scss" scoped></style>