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: "",
    },
    peopleType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selectIndex: "",
      numData: {},
    };
  },
  watch: {
    currentLevelData(val) {
      if (val.orgId) {
        this.getData(val);
      }
    },
    peopleType(val) {
      if (val) {
        this.selectIndex = val;
      }
    },
    level(val) {
      if (val === "grid") {
        this.selectIndex = "unit";
      } else {
        this.selectIndex = "staffAgency";
      }
    },
  },
  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>