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

<template>
  <div class="m-per">
    <div :class="selectIndex === 0 ? 'item xz' : 'item'">
      <div class="item-info" @click="selectIcon(0, 'staffAgency')">
        <div>
          <img src="~@/assets/images/shuju/overview/sqgzz-icon.png" />
          社区工作者
        </div>
        <div>
          <b>{{ numData.staffAgencyNum }}</b>
        </div>
      </div>
    </div>
    <div :class="selectIndex === 1 ? 'item xz' : 'item'">
      <div class="item-info" @click="selectIcon(1, 'staffGrid')">
        <div>
          <img src="~@/assets/images/shuju/overview/wgy-icon.png" />
          网格员
        </div>
        <div>
          <b>{{ numData.staffGridNum }}</b>
        </div>
      </div>
    </div>
    <div :class="selectIndex === 2 ? 'item xz' : 'item'">
      <div class="item-info" @click="selectIcon(2, 'chief')">
        <div>
          <img src="~@/assets/images/shuju/overview/lzz-icon.png" />
          楼组/单元长
        </div>
        <div>
          <b>{{ numData.chiefNum }}</b>
        </div>
      </div>
    </div>
    <div :class="selectIndex === 3 ? 'item xz' : 'item'">
      <div class="item-info" @click="selectIcon(3, 'publicWelfareNum')">
        <div>
          <img src="~@/assets/images/shuju/overview/gyg-icon.png" />
          公益岗
        </div>
        <div>
          <b>{{ numData.publicWelfareNum }}</b>
        </div>
      </div>
    </div>
    <div :class="selectIndex === 4 ? 'item xz' : 'item'">
      <div class="item-info" @click="selectIcon(4, 'staffDepartment')">
        <div>
          <img src="~@/assets/images/shuju/overview/dwzz-icon.png" />单位/组织
        </div>
        <div>
          <b>{{ numData.staffDepartmentNum }}</b>
        </div>
      </div>
    </div>
    <div :class="selectIndex === 5 ? 'item xz' : 'item'">
      <div class="item-info" @click="selectIcon(5, 'volunteer')">
        <div>
          <img src="~@/assets/images/shuju/overview/zyz-icon.png" />
          志愿者
        </div>
        <div>
          <b>{{ numData.volunteerNum }}</b>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "map-top",
  props: {
    currentLevelData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      selectIndex: 0,
      numData: {},
    };
  },
  watch: {
    currentLevelData(val) {
      if (val.orgId) {
        this.getData(val);
      }
    },
  },
  methods: {
    selectIcon(num, type) {
      this.selectIndex = num;
      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>