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

<template>
    <div>
      <cpt-bread
          v-if="breadList.length > 1"
          :bread-list="breadList"
          @tap="clickBreadItem"
      />
      <div class="g-row">
        <div class="g-left">
          <div class="bgImg">
            <Title text="宣传介绍"/>
          </div>
          <div class="bgImg">
            <Title text="党建引领"/>
            <djyl/>
          </div>
          <div class="bgImg">
            <Title text="人房总览"/>
            <rfzl/>
          </div>
        </div>
  
        <div class="g-center">
          <div class="m-map">
            <grid-map
                ref="map"
                :srcGridData="orgData"
                @clickAgency="clickAgencyItem"
                @clickDotBtn="handleClickDotBtn"
            />
            <!-- <mapRight :orgData="orgData" @clickAgency="clickAgencyItem"/> -->
          </div>
  
          <div class=" m-box m-cate map-bottom">
          </div>
        </div>
  
        <div class="g-right">
          <div class="bgImg">
            <Title text="物联感知"></Title>
          </div>
          <div class="bgImg">
            <Title text="基层治理"></Title>
          </div>
          <div class="bgImg">
            <Title text="社区服务"></Title>
          </div>
        </div>
      </div>
  
    </div>
  </template>
  
  <script>
  import gridMap from "@/views/dataBoard/cpts/map/index";

  import mapRight from "@/views/dataBoard/renfang/cpts/map-right.vue";
  import cptBread from "@/views/dataBoard/renfang/cpts/bread";
  import cptLoading from "@/views/dataBoard/cpts/loading";
  import {requestPost} from "@/js/dai/request";
  import getQueryPara from "dai-js/modules/getQueryPara";
  import {requestGet} from "@/js/dai/request";
  import resiCategoryMap from "@/views/business/resi-category-map.js";
  import Title from "@/views/dataBoard/satisfactionEval/components/Title/index.vue";
  import djyl from "@/views/dataBoard/home/cpts/djyl";
  import rfzl from "@/views/dataBoard/home/cpts/rfzl"
  export default {//
    name: "renfang",
  
    components: {
      Title,
      gridMap,
      cptLoading,
      cptBread,
      mapRight,
      djyl,
      rfzl
    },
  
    data() {
      return {
        loading: false,
        orgData: {
          children: [],
        }, //当前组织对象
        orgId: "",
        orgLevel: "",
  
        breadList: [],
  
        displayedResiId: "",
        displayedHouseId: "",
  
        pandectData: {},
  
        popupShow: false
      };
    },
  
    mounted() {
      const queryOrgId = getQueryPara("orgId");
      const queryOrgLevel = getQueryPara("orgLevel");
      this.init(queryOrgId, queryOrgLevel);
    },
  
    watch: {
     
    },
  
    methods: {
      async init(queryOrgId, queryOrgLevel) {
        if (queryOrgId) {
          this.orgId = queryOrgId;
          this.orgLevel = queryOrgLevel || "agency";
        } else {
          this.orgId = this.$store.state.user.agencyId;
          this.orgLevel = "agency";
        }
  
        //加载组织数据
        this.loading = false;
        await this.getMapData();
        this.loading = true;
      },
      //加载组织数据
      
     
      handleClickDotBtn(type, info) {
        if (type == "watch-resi") {
          this.$router.push({
            path: "/dataBoard/renfang/resident",
            query: {
              user_id:info.search_id,
            },
          });
          // this.displayedResiId = info.user_id;
          // this.popupShow = true
        } else if (type == "watch-house") {
          this.displayedHouseId = info.house_id;
        }
      },
  
      clickBreadItem({item}) {
        this.toBread(item);
      },
  
      clickAgencyItem(item) {
        if (item.level === 'neighborHood') {
          this.$router.push('/homeDetails/index?id=' + item.id + '&breadList='+JSON.stringify(this.breadList))
        } else {
          this.toBread({
            orgId: item.id,
            orgLevel: item.level,
            meta: {title: item.name},
          });
        }
      },
  
      toBread(item) {
        const {orgId} = item;
        const {breadList} = this;
        let index = breadList.findIndex((val) => val.orgId === orgId);
        if (index >= 0) {
          this.breadList = breadList.slice(0, index + 1);
        } else {
          breadList.push(item);
          this.breadList = breadList;
        }
        this.init(item.orgId, item.orgLevel);
      },
  
      //获取地图上显示的组织数据
      async getMapData() {
  
        const url = "/gov/org/agency/maporg";
        let params = {
          orgId: this.orgId,
          level: this.orgLevel,
        };
  
        const {data, code, msg} = await requestPost(url, params);
  
        if (code === 0) {
          this.orgData = data;
          this.orgId = this.orgId;
          // this.orgLevel = this.orgData.level;
        } else {
          this.$message.error(msg);
        }
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  @import "@/assets/scss/dataBoard/renfang/index.scss";
  .bgImg {
    margin-bottom: 7px;
    background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
    background-size: 100% 100%;
  }
  
  .m-box {
    height: 323px;
  }
  
  .map-bottom {
    margin: 0 17px;
  }
  .m-map {
    height: 970px;
  }
  @keyframes autobiography {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
 .g-row{
    position: relative;
    .g-left{
        position: absolute;
        left: 10px;
        top: 0;
        z-index: 2;
    }
    .g-center{
        width: 100%;
        z-index: 1;
    }
    .g-right{
        position: absolute;
        right: 10px;
        top: 0;
        z-index: 2;
    }
 }
  </style>