epmet-work-pc-chengyang/src/views/modules/home/index.vue

<template>
  <div class="g-row">
    <div class="g-row-left">
      <div class="m-box m-search">
        <div class="wrap">
          <div class="title">
            <span>社区查询</span>
          </div>

          <div class="tabs">
            <div
              :class="{ 'z-on': searchData.type == 'jumin' }"
              @click="searchData.type = 'jumin'"
            >
              查居民
            </div>
            <div
              :class="{ 'z-on': searchData.type == 'fangwu' }"
              @click="searchData.type = 'fangwu'"
            >
              查房屋
            </div>
          </div>

          <div class="search">
            <div class="search-input">
              <div class="input">
                <input
                  type="text"
                  :placeholder="typePlaceholder[searchData.type]"
                  v-model="searchData.searchKey"
                  @keyup.enter="handleClickSearchBtn"
                />

                <div
                  class="close-btn"
                  v-if="searchData.searchKey != ''"
                  @click="searchData.searchKey = ''"
                >
                  <img src="@/assets/img/shequ/close.png" />
                </div>
              </div>
              <div class="btn" @click="handleClickSearchBtn">查一下</div>
            </div>
            <div class="btn2" @click="handleClickSearchBtn">
              <img src="@/assets/images/index/i-search.png" />
              智能搜索
            </div>
          </div>
        </div>
      </div>

      <div class="m-box m-pan">
        <div class="wrap">
          <div class="header">
            <img src="@/assets/images/index/title-icon-sqzl.png" />
            <span>社区总览</span>
          </div>
          <div class="cnt">
            <div class="cnt-left">
              <div class="subtitle">
                <img src="@/assets/images/index/i-sqjj.png" />
                <span>社区简介</span>
              </div>
              <p>
                {{ deptName }}，<span v-if="pandectData.gridCount"
                  >划分为{{ pandectData.underCount }}个{{
                    pandectData.underName
                  }}，</span
                >现有居民{{ pandectData.homeCount }}户、{{
                  pandectData.resiCount
                }}人，其中常住人口{{
                  pandectData.permanentResiCount
                }}人，流动人口{{
                  pandectData.floatingResiCount
                }}人，各类群体分布如下：
              </p>

              <div class="subtitle">
                <img src="@/assets/images/index/i-fxjg.png" />
                <span>分析结果</span>
              </div>

              <p class="hint" v-if="resiCategory.list.length > 0">
                <i>*</i> 根据数据分析结果，建议重点关注
                <b
                  >{{ resiCategory.list[0].categoryName }}、{{
                    resiCategory.list[1].categoryName
                  }}、{{ resiCategory.list[2].categoryName }}</b
                >
                三类群体，开展相关的社区服务和活动。
              </p>
            </div>
            <div class="cnt-right">
              <div class="list">
                <div
                  class="item"
                  :key="item.code"
                  v-for="(item, index) in resiCategory.list"
                >
                  <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
                  <div class="item-name">{{ item.name }}</div>
                  <div class="item-div"></div>
                  <div class="item-count">{{ item.count }}人</div>
                  <div class="item-progress">
                    <b :style="{ width: item.per + '%' }"></b>
                  </div>
                  <div class="item-per">{{ item.per }} %</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="g-row-right">
      <div class="m-box m-tx">
        <div class="wrap">
          <div class="header">
            <img src="@/assets/images/index/title-icon-zntx.png" />
            <span>智能提醒</span>
          </div>
          <div class="more" @click="toNoticePage">更多></div>
          <div class="cnt">
            <div class="item">
              <div class="item-date">2022-09-12 10:25</div>
              <div class="item-title">
                鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
              </div>
            </div>
            <div class="item">
              <div class="item-date">2022-09-12 10:25</div>
              <div class="item-title">
                鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
              </div>
            </div>
            <div class="item">
              <div class="item-date">2022-09-12 10:25</div>
              <div class="item-title">
                鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
              </div>
            </div>
            <div class="item">
              <div class="item-date">2022-09-12 10:25</div>
              <div class="item-title">
                鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
              </div>
            </div>
            <div class="item">
              <div class="item-date">2022-09-12 10:25</div>
              <div class="item-title">
                鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
              </div>
            </div>
            <div class="item">
              <div class="item-date">2022-09-12 10:25</div>
              <div class="item-title">
                鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="m-box m-tb">
        <div class="wrap">
          <div class="header">
            <img src="@/assets/images/index/i-zntb.png" />
            <span>智能填报</span>
          </div>
        </div>
        <div class="more">更多></div>
        <div class="cnt">
          <div class="item">
            <img class="item-tag" src="@/assets/images/index/i-zntb.png" />
            <div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
            <div class="item-btns">
              <div class="item-btn">
                <img src="@/assets/images/index/i-tx.png" />
                <span>填写</span>
              </div>
              <div class="item-btn">
                <img src="@/assets/images/index/i-xz.png" />
                <span>下载</span>
              </div>
            </div>
          </div>
          <div class="item">
            <img class="item-tag" src="@/assets/images/index/i-zntb.png" />
            <div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
            <div class="item-btns">
              <div class="item-btn">
                <img src="@/assets/images/index/i-tx.png" />
                <span>填写</span>
              </div>
              <div class="item-btn">
                <img src="@/assets/images/index/i-xz.png" />
                <span>下载</span>
              </div>
            </div>
          </div>
          <div class="item">
            <img class="item-tag" src="@/assets/images/index/i-zntb.png" />
            <div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
            <div class="item-btns">
              <div class="item-btn">
                <img src="@/assets/images/index/i-tx.png" />
                <span>填写</span>
              </div>
              <div class="item-btn">
                <img src="@/assets/images/index/i-xz.png" />
                <span>下载</span>
              </div>
            </div>
          </div>
          <div class="item">
            <img class="item-tag" src="@/assets/images/index/i-zntb.png" />
            <div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
            <div class="item-btns">
              <div class="item-btn">
                <img src="@/assets/images/index/i-tx.png" />
                <span>填写</span>
              </div>
              <div class="item-btn">
                <img src="@/assets/images/index/i-xz.png" />
                <span>下载</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";

export default {
  components: {},

  data() {
    return {
      searchStatus: "ini", //ing over
      searchData: {
        type: "jumin",
        searchKey: "",
      },

      typePlaceholder: {
        jumin: "请输入姓名或电话或身份证号",
        fangwu: "请输入“小区名称，楼号”，如：亿联小区，1号楼",
        xuqiu: "请输入需求人或需求内容或服务方",
      },

      resiCategory: {
        loading: false,
        total: "",
        list: [],
      },

      orgData: {
        id: "",
        level: "agency",
      },

      pandectData: {
        communityName: "",
        streetName: "",
        gridCount: "",
        resiCount: "",
        homeCount: "",
        floatingResiCount: "",
        permanentResiCount: "",
      },
    };
  },
  computed: {
    maxTableHeight() {
      // return this.clientHeight - 450;
      return 420;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    "searchData.searchKey": function (val) {
      if (val == "") {
        this.searchStatus = "ini";
      }
    },
  },
  mounted() {
    this.getApiData();
    console.log(
      "dynamicMenuRoutes----------------------------",
      this.$store.state.sidebarMenuList
    );
  },
  methods: {
    toNoticePage() {
      this.$router.push({
        path: "/main/home-notice",
      });
    },

    toSearchPage(type, searchKey) {
      this.$router.push({
        path: "/main/shequ-chaxun",
        query: {
          type,
          searchKey,
        },
      });
    },

    handleClickSearchBtn() {
      const {
        searchData: { type, searchKey },
      } = this;
      if (!searchKey) return this.$message.error("请输入搜索条件");
      this.toSearchPage(type, searchKey);
    },

    async getApiData() {
      await this.getOrgData();
      this.getWarningList();
      this.getPandectData();
    },

    //加载组织数据
    async getOrgData() {
      const url = "/gov/org/agency/maporg";
      let params = {
        orgId: "",
        level: "",
      };

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

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

    //加载组织数据
    async getPandectData() {
      const url = "/actual/base/residentHouseMerge/communityOverview";
      let params = {
        // orgId: "",
        // level: "",
      };

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

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

    //加载组织数据
    async getWarningList() {
      const url = "/actual/base/resiCategory/categoryCountList";
      let params = {
        // id: this.orgData.id,
        // level: "agency",
      };

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

      if (code === 0 && data) {
        this.resiCategory.count = data.resiCount;
        this.resiCategory.list = data.categoryList.map((item) => {
          return {
            code: item.categoryName,
            name: item.categoryName,
            count: item.categoryCount,
            per: parseInt((100 * item.categoryCount) / data.resiCount),
            const: "const",
          };
        });
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

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