epmet-oper-gov/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.keyword"
                  @keyup.enter="handleClickSearchBtn"
                />

                <div
                  class="close-btn"
                  v-if="searchData.keyword != ''"
                  @click="searchData.keyword = ''"
                >
                  <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>
                南宁路社区，归属青岛市市北区阜新路街道，划分为6个网格，现有居民3500户、8000人，其中常住人口7000人，流动人口1000人，各类群体分布如下：
              </p>

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

              <p class="hint">
                <i>*</i> 根据数据分析结果，建议重点关注
                <b>老年人、低保人员、残疾人</b>
                三类群体，开展相关的社区服务和活动。
              </p>
            </div>
            <div class="cnt-right">
              <div class="list">
                <div
                  class="item"
                  :key="item.code"
                  v-for="(item, index) in warningChart.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.count + '%' }"></b>
                  </div>
                  <div>{{ item.count }} %</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",
        keyword: "",
      },

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

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

      orgData: {
        id: "",
        level: "agency",
      },
    };
  },
  computed: {
    maxTableHeight() {
      // return this.clientHeight - 450;
      return 420;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    "searchData.keyword": 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, keyword) {
      this.$router.push({
        path: "/main/shequ-chaxun",
        query: {
          type,
          keyword,
        },
      });
    },

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

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

    //加载组织数据
    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 getWarningList() {
      const url = "/epmetuser/statsresiwarn/list";
      let params = {
        id: this.orgData.id,
        level: "agency",
      };

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

      if (code === 0) {
        this.warningChart.loading = true;
        this.warningChart.total = data.reduce(
          (total, item) => total + item.count,
          0
        );
        this.warningChart.list = data.map((item) => {
          return {
            code: item.columnName,
            name: item.label,
            count: item.count,
            const: "const",
          };
        });
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

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