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 style="padding:16px;box-sizing: border-box;"> <img src="@/assets/images/shuju/home/linshi.png" style="width: 100%;height: 100%;" alt=""></div>
          </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"
            />
          </div>
          <div class=" m-box m-cate map-bottom" style="display:none;">
            <div
            class="item"
            v-for="(item, index) in typeList"
            :key="item.type + index"
            @click="handelClickNavigator(item.navigator)"
          >
            <div class="imgBox">
              <img :src="require(`@/assets/images/shuju/home/map/${item.label}.png`)" alt="" />
            </div>
            <div class="label">{{item.label}}</div>
            <div class="bubbles">
              <span
                class="bubble"
                v-for="(item, index) in bubbleList"
                :key="index"
                :style="{
                  '--w': item.w,
                  '--c': item.c,
                  '--x': item.x,
                  '--d':
                    parseInt(bubbleList.length / 2) +
                    1 -
                    Math.abs(index - parseInt(bubbleList.length / 2)),
                }"
              ></span>
            </div>
          </div>
          </div>
        </div>
  
        <div class="g-right">
          <div class="bgImg">
            <Title text="物联感知"></Title>
            <wlgz/>
          </div>
          <div class="bgImg">
            <Title text="基层治理"></Title>
            <jczl/>
          </div>
          <div class="bgImg">
            <Title text="社区服务"></Title>
            <sqfw/>
          </div>
        </div>
      </div>
      <more-dialog :showDialog="showDialog" @handelClickNavigator="handelClickNavigator"  @close="close"></more-dialog>
    </div>
  </template>
  
  <script>
  import gridMap from "@/views/dataBoard/cpts/map/index";
  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"
  import jczl from "@/views/dataBoard/home/cpts/jczl"
  import sqfw from "@/views/dataBoard/home/cpts/sqfw"
  import wlgz from "@/views/dataBoard/home/cpts/wlgz"
  import moreDialog from "@/views/dataBoard/home/cpts/moreDialog"


  export default {//
    name: "renfang",
  
    components: {
      Title,
      gridMap,
      cptLoading,
      cptBread,
      djyl,
      rfzl,
      jczl,
      sqfw,
      wlgz,
      moreDialog
    },
  
    data() {
      return {
        
        loading: false,
        orgData: {
          children: [],
        }, //当前组织对象
        orgId: "",
        orgLevel: "",
  
        breadList: [],
  
        displayedResiId: "",
        displayedHouseId: "",
  
        pandectData: {},
  
        popupShow: false,

        bubbleList: [
        {
          w: 8,
          x: 10
        },
        {
          w: 9,
          x: 50
        },
        {
          w: 4,
          x: 30
        },
        {
          w: 5,
          x: 80
        },
        {
          w: 4,
          x: 30
        },
        {
          w: 4,
          x: 70
        },
        {
          w: 6,
          x: 20
        },
        {
          w: 8,
          x: 50
        },
        {
          w: 4,
          x: 60
        },
        {
          w: 6,
          x: 65
        }
        ],
        typeList:[
            {
                label:'居民信息',
                navigator:'base-resi'
            },{
                label:'居民选举',
                navigator:''
            },{
                label:'派件管理',
                navigator:'shequzhili-Delivery-index'
            },{
                label:'社区宣传',
                navigator:'communityParty-comPromotion-index'
            },{
                label:'社区活动',
                navigator:'volunteer-activityArchive-index'
            },{
                label:'更多',
                navigator:'more'
            }
        ],
        showDialog:false
      };
    },
    created(){
        this.bubbleList.forEach((i, index) => {
        this.$set(
            i,
            'c',
            this.forArrayValue(
            [
                'rgba(255,255,255,0.2)',
                'rgba(255,255,255,0.4)',
                'rgba(255,255,255,0.6)'
            ],
            index
            )
        )
        })
    },
   
    mounted() {
      const queryOrgId = getQueryPara("orgId");
      const queryOrgLevel = getQueryPara("orgLevel");
      this.init(queryOrgId, queryOrgLevel);
    },
  
    watch: {
     
    },
  
    methods: {
        close(){
            this.showDialog = false
        },
        handelClickNavigator(navigator){
            if(navigator && navigator!='more'){
                let routeData = this.$router.resolve({
                name: navigator
                });
                window.open(routeData.href, '_blank');
            }else if(navigator == 'more'){
                this.showDialog = true;
            }
        },
        forArrayValue (array, sort) {
            return array[sort % array.length]
        },
      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%;
  }
  .map-bottom {
    margin: 0 17px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-400px);
    width: 800px;
    display: flex;
    justify-content: space-between;
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .imgBox {
          cursor: pointer;
          width: 90px;
          height: 73px;
          background: url("@/assets/images/shuju/home/map/1.png") no-repeat !important;
          background-size: 100% !important;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 36px;
            height: 36px;
            animation: moveUpDown 3s infinite linear;
          }
        }
        .label {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #B3E7FF;
            line-height: 60px;
        }

        .bubbles {
          position: absolute;
          width: 100%;
          height: 45%;
          top: -15px;
          left: 0;
          z-index: -1;
          overflow: hidden;
        }

        .bubble {
          position: absolute;
          width: calc(1px * var(--w));
          height: calc(1px * var(--w));
          background: var(--c);
          border-radius: 50%;
          left: calc(50% - calc(1px * calc(var(--w) / 2)));
          opacity: 0;
          bottom: 10%;
          animation: rise 3s infinite linear;
          animation-delay: calc(600ms * var(--d));
        }

        @keyframes rise {
          0% {
            left: calc(50% - calc(1px * calc(var(--w) / 2)));
            opacity: 0;
            bottom: 10%;
          }

          50% {
            opacity: 0.8;
          }

          100% {
            left: calc(1% * var(--x));
            bottom: 90%;
            opacity: 0;
          }
        }

        @keyframes moveUpDown {
          0% {
            transform: translateY(0);
          }

          50% {
            transform: translateY(-15px);
          }

          100% {
            transform: translateY(0);
          }
        }
      }
  }
  .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: 20px;
        z-index: 2;
    }
    .g-center{
        width: 100%;
        z-index: 1;
    }
    .g-right{
        position: absolute;
        right: 10px;
        top: 20px;
        z-index: 2;
    }
 }
  </style>