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.length == 0
                      ? "--"
                      : 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.length == 0
                      ? "--"
                      : 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.length == 0
                      ? "--"
                      : 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 || "--"
                  }}，退休金：{{
                    info.financialSituation.retirementAmount || "--"
                  }}
                </p>
              </div>
            </div>
          </div>
        </cpt-card>
      </div>

      <people-more v-show="showedMoreInfo"
                   v-if="userId"
                   :userId="userId"
                   :gridName="info.gridName"
                   @close="showedMoreInfo = false" />

      <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&&houseInfo.ownerName?houseInfo.ownerName:'暂不清楚' }}</div>
              <p>（户主）</p>
            </div>

            <div class="rel z-zuo-2"
                 @click="toUserInfo(houseInfo.userList[0].userId)"
                 v-if="houseInfo.userList[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"
                   :class="houseInfo.userList[0].isSelf == '1' ? 'z-on' : ''">
                <!-- <div class="rel-call">岳父母或公婆</div>
                <div class="rel-name">吉克隽逸</div> -->
                <span class="rel-call">{{
                  houseInfo.userList[0].relation
                }}</span>
                <span class="rel-name">（{{ houseInfo.userList[0].userName }}）</span>
              </div>
            </div>

            <div class="rel z-you-2"
                 @click="toUserInfo(houseInfo.userList[1].userId)"
                 v-if="houseInfo.userList[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"
                   :class="houseInfo.userList[1].isSelf == '1' ? 'z-on' : ''">
                <div class="rel-call">{{ houseInfo.userList[1].relation }}</div>
                <div class="rel-name">{{ houseInfo.userList[1].userName }}</div>
              </div>
            </div>

            <div class="rel z-zuo-1"
                 @click="toUserInfo(houseInfo.userList[2].userId)"
                 v-if="houseInfo.userList[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"
                   :class="houseInfo.userList[2].isSelf == '1' ? 'z-on' : ''">
                <div class="rel-call">{{ houseInfo.userList[2].relation  }}</div>
                <div class="rel-name">{{ houseInfo.userList[2].userName }}</div>
              </div>
            </div>

            <div class="rel z-you-1"
                 @click="toUserInfo(houseInfo.userList[3].userId)"
                 v-if="houseInfo.userList[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"
                   :class="houseInfo.userList[3].isSelf == '1' ? 'z-on' : ''">
                <div class="rel-call">{{   houseInfo.userList[3].relation   }}</div>
                <span class="rel-name">{{ houseInfo.userList[3].userName }}</span>
              </div>
            </div>

            <div class="rel z-zuo-3"
                 @click="toUserInfo(houseInfo.userList[4].userId)"
                 v-if="houseInfo.userList[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"
                   :class="houseInfo.userList[4].isSelf == '1' ? 'z-on' : ''">
                <div class="rel-call">{{      houseInfo.userList[4].relation         }}</div>
                <div class="rel-name">{{ houseInfo.userList[4].userName }}</div>
              </div>
            </div>

            <div class="rel z-you-3"
                 @click="toUserInfo(houseInfo.userList[5].userId)"
                 v-if="houseInfo.userList[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"
                   :class="houseInfo.userList[5].isSelf == '1' ? 'z-on' : ''">
                <div class="rel-call">{{     houseInfo.userList[5].relation      }}</div>
                <div class="rel-name">{{ houseInfo.userList[5].userName }}</div>
              </div>
            </div>
          </div>
        </cpt-card>
      </div>
    </div>
    <div class="g-r">
      <div class="m-tb">
        <cpt-card>
          <div class="title">
            <img src="@/assets/img/shuju/title-tip.png" />
            <span>居民需求</span>
          </div>

          <div class="tb">
            <cpt-tb :col-list="demand.colList"
                    :loading="demand.loading"
                    :header="demand.header"
                    :list="demand.list"
                    @operate="handleOperateDemandList"></cpt-tb>

            <div class="m-pagination"
                 v-if="demand.total > demand.pageSize">
              <el-pagination :current-page="demand.pageNo"
                             :page-size="demand.pageSize"
                             :total="demand.total"
                             background
                             layout="prev, pager, next"
                             @current-change="handlePageNoChangeDemand">
              </el-pagination>
            </div>
          </div>
        </cpt-card>
      </div>

      <div class="m-row">
        <div class="m-list">
          <cpt-card>
            <div class="title">
              <img src="@/assets/img/shuju/title-tip.png" />
              <a :class="{ 'z-on': showedIncidentOrTopic == 'incident' }"
                 @click="showedIncidentOrTopic = 'incident'">上报事件</a>
              <a :class="{ 'z-on': showedIncidentOrTopic == 'topic' }"
                 @click="showedIncidentOrTopic = 'topic'">发布话题</a>
            </div>
            <div class="list-wrap"
                 v-show="showedIncidentOrTopic == 'incident'">
              <div class="list">
                <div class="item"
                     :key="'incident' + index"
                     v-for="(item, index) in incident.list"
                     @click="handleClickIncident(index)">
                  <div class="item-title">{{ item.eventContent }}</div>
                  <div class="item-date">{{ item.reportTime }}</div>
                </div>
              </div>

              <div class="m-pagination"
                   v-if="incident.total > incident.pageSize">
                <el-pagination :current-page="incident.pageNo"
                               :page-size="incident.pageSize"
                               :total="incident.total"
                               background
                               layout="prev, pager, next"
                               @current-change="handlePageNoChangeIncident">
                </el-pagination>
              </div>

              <div v-if="incident.list.length == 0"
                   class="m-hint">
                <img src="@/assets/img/modules/visual/noData.png"
                     class="no-data-img" />
              </div>
            </div>

            <div class="list-wrap"
                 v-show="showedIncidentOrTopic == 'topic'">
              <div class="list">
                <div class="item"
                     :key="'topic' + index"
                     v-for="(item, index) in topic.list"
                     @click="handleClickTopic(index)">
                  <div class="item-title">{{ item.topicContent }}</div>
                  <div class="item-date">{{ item.releaseTime }}</div>
                </div>
              </div>

              <div class="m-pagination"
                   v-if="topic.total > topic.pageSize">
                <el-pagination :current-page="topic.pageNo"
                               :page-size="topic.pageSize"
                               :total="topic.total"
                               background
                               layout="prev, pager, next"
                               @current-change="handlePageNoChangeTopic">
                </el-pagination>
              </div>

              <div v-if="topic.list.length == 0"
                   class="m-hint">
                <img src="@/assets/img/modules/visual/noData.png"
                     class="no-data-img" />
              </div>
            </div>
          </cpt-card>
        </div>

        <div class="m-list">
          <cpt-card>
            <div class="title">
              <img src="@/assets/img/shuju/title-tip.png" />
              <span>积分记录</span>
            </div>

            <div class="list-wrap">
              <div class="list">
                <div class="item"
                     :key="'point' + index"
                     v-for="(item, index) in point.list"
                     @click="handleClickPoint(index)">
                  <div class="item-row">
                    <div class="item-l">
                      <div class="item-point">{{ item.point }}</div>
                    </div>
                    <div class="item-r">
                      <div class="item-title">{{ item.title }}</div>
                      <div class="item-date">{{ item.dateTime }}</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="m-pagination"
                   v-if="point.total > point.pageSize">
                <el-pagination :current-page="point.pageNo"
                               :page-size="point.pageSize"
                               :total="point.total"
                               background
                               layout="prev, pager, next"
                               @current-change="handlePageNoChangePoint">
                </el-pagination>
              </div>

              <div v-if="point.list.length == 0"
                   class="m-hint">
                <img src="@/assets/img/modules/visual/noData.png"
                     class="no-data-img" />
              </div>
            </div>
          </cpt-card>
        </div>
      </div>
    </div>

    <demand-info v-if="demand.list.length > 0 && showedDemandInfo"
                 :userId="userId"
                 queryOrigin="personal-data"
                 :demandId="demand.srcList[demand.currentIndex].demandRecId"
                 @close="showedDemandInfo = false" />

    <incident-info v-if="incident.list.length > 0 && incident.showedInfo"
                   :resiEventId="incident.list[incident.currentIndex].resiEventId"
                   :epmetUserIdList="info.epmetUserIdList"
                   :icResiUserId="userId"
                   @close="incident.showedInfo = false" />

    <topic-info v-if="topic.list.length > 0 && topic.showedInfo"
                :topicId="topic.list[topic.currentIndex].topicId"
                :epmetUserIdList="info.epmetUserIdList"
                :icResiUserId="userId"
                @close="topic.showedInfo = false" />
  </div>
</template>

<script>
import { Loading } from "element-ui"; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
import demandInfo from "@/views/modules/visual/measure/dialogInfo";
import incidentInfo from "@/views/modules/visual/basicinfo/cpts/incident-info";
import topicInfo from "@/views/modules/visual/basicinfo/cpts/topic-info";
import cptTb from "@/views/modules/visual/cpts/tb";

export default {
  name: "HomeMap",
  data () {
    return {
      showedMoreInfo: false,
      showedDemandInfo: false,

      userId: "",

      info: {
        epmetUserIdList: [],
        financialSituation: { monthlyIncome: "", retirementAmount: "" },
        gridName: "",
        houseInfo: [],
        name: "",
        personCategory: [],
        volunteerCategory: [],
        workUnit: "",
      },

      houseInfo: {
        ownerName: "",
        userList: [
          // {
          //   userId: "",
          //   userName: "",
          //   isSelf: "",
          //   relation: "",
          // },
        ],
      },

      demand: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "40%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "10%",
          },
        ],
        header: ["序号", "服务时间", "需求类型", "需求内容", "状态", "操作"],
        list: [],
        srcList: [],
        currentIndex: 0,
        pageSize: 5,
        pageNo: 1,
        total: 0,
      },

      showedIncidentOrTopic: "incident",

      incident: {
        loading: false,
        list: [],
        pageSize: 10,
        pageNo: 1,
        total: 0,
        showedInfo: false,
        currentIndex: 0,
      },

      topic: {
        loading: false,
        list: [],
        pageSize: 10,
        pageNo: 1,
        total: 0,
        showedInfo: false,
        currentIndex: 0,
      },

      point: {
        loading: false,
        list: [],
        pageSize: 10,
        pageNo: 1,
        total: 0,
        showedInfo: false,
        currentIndex: 0,
      },
    };
  },

  props: {
    uid: {
      type: String,
      default: "",
      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
    },
  },

  computed: {},

  components: {
    cptCard,
    peopleMore,
    cptTb,
    demandInfo,
    incidentInfo,
    topicInfo,
  },

  watch: {
    uid (id) {
      this.userId = id;
    },
    userId () {
      this.getApiData();
      window.scrollTo(0, 0);
    },
  },

  async mounted () {
    this.userId = this.uid;
    this.getApiData();
  },

  methods: {
    handleSearch () { },

    async getApiData () {
      await this.getInfo();
      this.getHouseInfo();
      this.getDemandData();
      this.getIncidentData();
      this.getTopicData();
      this.getPointData();
    },

    toUserInfo (uid) {
      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
    },

    //加载组织数据
    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);
      }
    },

    handlePageNoChangeDemand (val) {
      this.demand.pageNo = val;
      this.getDemandData();
    },

    handleOperateDemandList (index, type) {
      if (type == "查看") {
        this.showedDemandInfo = true;
        this.demand.currentIndex = index;
      }
    },

    //加载组织数据
    async getDemandData () {
      const url = "/heart/userdemand/mydemand";
      let params = {
        epmetUserIdList: this.info.epmetUserIdList,
        icResiUserId: this.userId,
        pageNo: this.demand.pageNo,
        pageSize: this.demand.pageSize,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.demand.loading = false;

      if (code === 0) {
        this.demand.total = data.total;
        this.demand.list = data.list.map((item) => {
          return [
            { type: "index" },
            item.wantServiceTime,
            item.categoryName,
            item.content,
            item.statusName,
            { type: "operate", list: ["查看"] },
          ];
        });
        this.demand.srcList = data.list;
      } else {
        this.$message.error(msg);
      }
    },

    handlePageNoChangeIncident (val) {
      this.incident.pageNo = val;
      this.getIncidentData();
    },

    handleClickIncident (index) {
      this.incident.showedInfo = true;
      this.incident.currentIndex = index;
    },

    //加载组织数据
    async getIncidentData () {
      const url = "/gov/project/resievent/pageuserreported";
      let params = {
        epmetUserIdList: this.info.epmetUserIdList,
        userId: this.userId,
        pageNo: this.incident.pageNo,
        pageSize: this.incident.pageSize,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.incident.loading = false;

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

    handlePageNoChangeTopic (val) {
      this.topic.pageNo = val;
      this.getTopicData();
    },

    handleClickTopic (index) {
      this.topic.showedInfo = true;
      this.topic.currentIndex = index;
    },

    //加载组织数据
    async getTopicData () {
      const url = "/data/aggregator/resigroup/pageusertopic";
      let params = {
        epmetUserIdList: this.info.epmetUserIdList,
        userId: this.userId,
        pageNo: this.topic.pageNo,
        pageSize: this.topic.pageSize,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.topic.loading = false;

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

    handlePageNoChangePoint (val) {
      this.point.pageNo = val;
      this.getPointData();
    },

    handleClickPoint (index) {
      this.point.showedInfo = true;
      this.point.currentIndex = index;
    },

    //加载组织数据
    async getPointData () {
      const url = "/point/resi/point/pageuserpoint";
      let params = {
        epmetUserIdList: this.info.epmetUserIdList,
        userId: this.userId,
        pageNo: this.point.pageNo,
        pageSize: this.point.pageSize,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.point.loading = false;

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

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