epmet-work-pc-chengyang/src/views/dataBoard/overview/components/map-top.vue

<template>
  <div class="m-per">
    <template v-if="level != 'grid'">
      <div class="item" :class="selectIndex === 'staffAgency' ? 'xz' : ''">
        <div class="item-info" @click="selectIcon('staffAgency')">
          <div>
            <img src="~@/assets/images/shuju/overview/sqgzz-icon.png"/>
            社区工作者
          </div>
          <div>
            <b>{{ numData.staffAgencyNum }}</b>
          </div>
        </div>
      </div>
      <div class="item" :class="selectIndex === 'staffGrid' ? 'xz' : ''">
        <div class="item-info" @click="selectIcon('staffGrid')">
          <div>
            <img src="~@/assets/images/shuju/overview/wgy-icon.png"/>
            网格员
          </div>
          <div>
            <b>{{ numData.staffGridNum }}</b>
          </div>
        </div>
      </div>
      <div class="item" :class="selectIndex === 'chief' ? 'xz' : ''">
        <div class="item-info" @click="selectIcon( 'chief')">
          <div>
            <img src="~@/assets/images/shuju/overview/lzz-icon.png"/>
            楼组/单元长
          </div>
          <div>
            <b>{{ numData.chiefNum }}</b>
          </div>
        </div>
      </div>
      <div class="item" :class="selectIndex === 'publicWelfareNum' ? 'xz' : ''">
        <div class="item-info" @click="selectIcon('publicWelfareNum')">
          <div>
            <img src="~@/assets/images/shuju/overview/gyg-icon.png"/>
            公益岗
          </div>
          <div>
            <b>{{ numData.publicWelfareNum }}</b>
          </div>
        </div>
      </div>
      <div class="item" :class="selectIndex === 'staffDepartment' ? 'xz' : ''">
        <div class="item-info" @click="selectIcon('staffDepartment')">
          <div>
            <img src="~@/assets/images/shuju/overview/dwzz-icon.png"/>单位/组织
          </div>
          <div>
            <b>{{ numData.staffDepartmentNum }}</b>
          </div>
        </div>
      </div>
      <div class="item" :class="selectIndex === 'volunteer'? 'xz':''">
        <div class="item-info" @click="selectIcon('volunteer')">
          <div>
            <img src="~@/assets/images/shuju/overview/zyz-icon.png"/>
            志愿者
          </div>
          <div>
            <b>{{ numData.volunteerNum }}</b>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="item" :class="selectIndex === 'unit' ? 'xz' : ''" @click="selectIcon('unit')">
        <div class="item-info">
          <div>
            <img src="~@/assets/images/overview/icon_wg.png"/>
            微网格
          </div>
          <div>
            <b>{{ numData.unitNum }}</b>
          </div>
        </div>
      </div>
      <div class="item" :class="selectIndex === 'building' ? 'xz' : ''" @click="selectIcon('building')">
        <div class="item-info">
          <div>
            <img src="~@/assets/images/overview/icon_ld.png"/>
            楼栋
          </div>
          <div>
            <b>{{ numData.buldingNum }}</b>
          </div>
        </div>
      </div>
      <div class="item" >
        <div class="item-info">
          <div>
            <img src="~@/assets/images/overview/icon_fw.png"/>
            房屋
          </div>
          <div>
            <b>{{ numData.houseNum }}</b>
          </div>
        </div>
      </div>
      <div class="item" >
        <div class="item-info">
          <div>
            <img src="~@/assets/images/overview/icon_jm.png"/>
            居民
          </div>
          <div>
            <b>{{ numData.residentNum }}</b>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: "map-top",
  props: {
    currentLevelData: {
      type: Object,
      default: {},
    },
    level: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      selectIndex: 0,
      numData: {},
    };
  },
  watch: {
    currentLevelData(val) {
      if (val.orgId) {
        this.getData(val);
      }
    },
  },
  mounted() {
    if (this.currentLevelData.orgId) {
      this.getData(this.currentLevelData);
    }
  },
  methods: {
    selectIcon(type) {
      this.selectIndex = type;
      this.$emit("changeType", type);
    },
    getData(item) {
      this.$http
          .get(
              "/actual/base/streetOverview/mapOrgSum?level=" +
              item.orgLevel +
              "&orgId=" +
              item.orgId
          )
          .then(({data: {data}}) => {
            this.numData = data;
          });
    },
  },
};
</script>

<style
    lang="scss"
    src="@/assets/scss/dataBoard/overview/index.scss"
    scoped
></style>
<style lang="scss" scoped>
.xz {
  background: url("@/assets/images/shuju/overview/top-xz-bg.png") !important;
  height: 90px !important;
  background-size: 140px 90px !important;
}
</style>