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

<template>
  <div>
    <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="searchDataTab('jumin')">查居民</div>
              <div :class="{ 'z-on': searchData.type == 'fangwu' }" @click="searchDataTab('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>
          </div>
        </div>
        <div class="m-pan m-box">
          <div class="header">
            <img src="@/assets/images/index/title-icon-sqzl.png" />
            <span>组织总览</span>
          </div>
          <div class="flex_box">
            <div class="cnt">
              <div class="cnt-left">
                <div class="subtitle">
                  <img src="@/assets/images/index/i-sqjj.png"/>
                  <span>{{agencyLevel!='district'?agencyLevel=='street'?'街道':agencyLevel=='community'?'社区':agencyLevel=='grid'?'网格':'组织':'组织'}}简介 </span>
                </div>
                <p>
                 {{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为 <b>{{
                    pandectData.underCount
                  }}</b> 个 <b>{{
                    pandectData.underName
                  }}，</b> </span> 现有房屋 <b>{{ pandectData.homeCount }}</b> 间，自住房屋 <b>{{
                    pandectData.selfStay
                  }}</b> 间、出租房屋 <b>{{
                    pandectData.rentOut
                  }}</b> 间、闲置房屋 <b>{{
                    pandectData.vacantHouse
                  }}</b> 间，现有居民 <b>{{ pandectData.resiCount }}</b> 户、 <b>{{
                    pandectData.totalResidents
                  }}</b> 人，其中常住人口 <b>{{ pandectData.permanentResiCount }}</b> 人，流动人口 <b>{{
                    pandectData.floatingResiCount
                  }}</b> 人，各类群体分布如下：
                </p>

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

                <p class="hint" v-if="resiCategory.list.length > 0">
                  根据数据分析结果，建议重点关注
                  <b>{{ resiCategory.list[0].name }}、{{ resiCategory.list[1].name }}、{{ resiCategory.list[2].name }}</b>
                  三类群体，开展相关的社区服务和活动。
                </p>
              </div>
              <el-tabs v-model="activeName" style="width: calc(100% - 240px - 40px); margin-left: auto">
                <el-tab-pane label="居民分类统计" name="resi">
                  <div class="cnt-right">
                    <div class="list">
                      <div class="item" @click="handleClickCategory(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>
                </el-tab-pane>
                <!-- <el-tab-pane label="智能预测"
                             name="zhineng">
                  <div class="cnt-right">
                    <div class="list">
                      <div class="item" :key="item.code" v-for="(item, index) in znycCategory.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>
                </el-tab-pane> -->
              </el-tabs>
            </div>
          </div>
        </div>
      </div>
      <div class="g-row-right">
        <div class="m-box m-tx">
          <div class="header">
            <img src="@/assets/images/index/title-icon-zntx.png" />
            <span>智能提醒</span>
          </div>
          <div class="more" @click="toNoticePage">更多></div>
          <div class="cnt" v-if="noticeData.length > 0">
            <div @click="handleClickNotice(item)" class="item" :key="'notice' + item.targetId + index" v-for="(item, index) in noticeData">
              <div class="item_left">
                <i class="i-tag" v-if="item.readFlag == 1">已读</i>
                <i class="i-tag" v-else>未读</i>
              </div>
              <div class="item_right">
                <div class="item-date">
                  {{ item.createdTime }}
                </div>
                <div class="item-title">
                  {{ item.content }}
                </div>
              </div>
            </div>
          </div>

          <div class="cnt" v-else>
            <div class="empty">
              <img src="~@/assets/images/shuju/renfang/index/empty.png" />
              <span>暂无提醒～</span>
            </div>
          </div>
        </div>
        <div class="m-box m-tb">
          <div class="wrap">
            <div class="header">
              <img src="@/assets/images/index/title-icon-zntb.png" />
              <span>不满意事项月度趋势分析</span>
            </div>
          </div>
          <!-- <div class="more">更多></div> -->
          <div class="cnt">
            <div id="my_chart" style="width: 100%; height: 230px; position: relative; top: -10px"></div>
          </div>
        </div>
      </div>
    </div>
    <fastcall ref="fastcall" />
  </div>
</template>
<script>
import { requestPost, requestGet } from "@/js/dai/request";
import resiCategoryMap from "@/views/business/resi-category-map.js";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import fastcall from "@/views/modules/cpts/fastcall";
import * as echarts from "echarts";

export default {
  components: { fastcall },

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

      typePlaceholder: {
        jumin: "请输入姓名或联系电话或证件号",
        fangwu: "请输入小区名称或楼栋名称",
        xuqiu: "请输入需求人或需求内容或服务方",
      },

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

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

      pandectData: {
        communityName: "",
        streetName: "",
        gridCount: "",
        resiCount: "",
        homeCount: "",
        floatingResiCount: "",
        permanentResiCount: "",
      },

      noticeData: [],

      activeName: "resi",

      myChart: {},
      agencyLevel:'',
    }
  },
  computed: {
    maxTableHeight() {
      // return this.clientHeight - 450;
      return 420;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    "searchData.searchKey": function (val) {
      if (val == "") {
        this.searchStatus = "ini";
      }
    },
    $route: {
      handler: function (newVal, oldVal) {
        if (newVal.name == "home") {
          this.getApiData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getApiData();
    this.$nextTick(() => {
      this.initChart()
    })
    this.agencyLevel = localStorage.getItem("level", data.level);
    console.log(
        "dynamicMenuRoutes----------------------------",
        this.$store.state.sidebarMenuList
    );
  },
  methods: {
    initChart() {
      this.$http.get("/governance/satisfactionOverview/notSatisfactionTrend").then(({ data: { data } }) => {
        this.myChart = echarts.init(document.getElementById("my_chart"));
        let series = data.series.map((item, index) => {
          return {
            ...item,
            type: "line",
          };
        });
        let option = {
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: data.series.map((item) => item.name),
            bottom: "5%",
            icon: "rect",
            itemWidth: 20,
            itemHeight: 5,
            itemGap: 20,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "30%",
            containLabel: true,
          },
          toolbox: {
            // feature: {
            // 	saveAsImage: {}
            // }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: data.monthTimes.map((item) => this.$moment(item).format("M") + "月"),
          },
          yAxis: {
            type: "value",
          },
          series,
        };
        this.myChart.setOption(option, true);
        window.addEventListener("resize", this.handleWindowResize);
      });
    },
    handleWindowResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    searchDataTab(str) {
      this.searchData.type = str;
    },
    handleClickCategory(item) {
      this.$router.push({
        name: "base-resi",
        params: {
          category: item.code,
        },
      });
    },
    async readClearOne(item) {
      console.log("item", item);
      const url = `/message/intelligentMessage/msg/clearOne/?msgId=${item.id}`;
      const { data, code, msg } = await requestPost(url);
      if (code == 0) {
        this.getNoticeData();
      } else if (code >= 8000) {
        this.$message.error(msg);
      }
    },
    handleClickNotice(item) {
      const { msgType, targetId } = item;
      this.readClearOne(item);
      if (msgType == "community_house") {
        this.$refs.fastcall.showHouseInfo(targetId);
      } else if (msgType == "resident_base_info") {
        this.$refs.fastcall.showResiInfo(targetId);
      }
    },

    toNoticePage() {
      this.$router.push({
        path: "/main/home-notice",
      });
    },

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

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

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

    //加载组织数据
    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 requestGet(url, params);

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

    //加载组织数据
    async getNoticeData() {
      const url = "/message/intelligentMessage/list";
      let params = {
        last: "10",
      };

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

      if (code === 0) {
        if (data) {
          this.noticeData = 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 requestGet(url, params);
      this.resiCategory.loading = false;

      if (code === 0) {
        if (data) {
          this.resiCategory.count = data.resiCount;
          this.resiCategory.list = data.categoryList.map((item) => {
            return {
              code: item.categoryName,
              name: resiCategoryMap[item.categoryName] || "",
              count: item.categoryCount,
              per: ((100 * item.categoryCount) / data.resiCount).toFixed(0),
              const: "const",
            };
          });
        }
      } else {
        this.$message.error(msg);
      }
    },
    //加载智能预测数据
    async getZnycList() {
      const url = "/actual/base/resiCategory/intelligentPredictioncategoryCountList";
      // const url = "/actual/base/resiCategory/categoryCountList";
      let params = {
        // id: this.orgData.id,
        // level: "agency",
      };

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

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

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