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

<template>
  <div class="wrap">
    <!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" -->
    <div class="content">
      <div v-for="(item, index) in levelArr" :key="item" :class="[`flowLevel-${index + 1}`]">
        <div>{{ getTitleNameMapFun(item) }}</div>
      </div>
      <el-row>
        <el-col :span="4">
          <div class="contentList"></div>
        </el-col>
        <el-col :span="20">
          <div class="dingflow-design" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)">
            <nodeWrapGrid :nodeConfig.sync="nodeConfig"></nodeWrapGrid>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "GridTree",
  data() {
    return {
      loading: false,
      levelArr: [],
      nowVal: 100,
      nodeConfig: {},
    };
  },
  computed: {},
  mounted() {
    this.getTreeData();
  },
  methods: {
    //获取背景层级
    getDataPLevel(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children) {
          this.levelArr.push(data[i].level);
          this.getDataPLevel(data[i].children);
        } else {
          this.levelArr.push(data[i].level);
        }
      }
      this.levelArr = new Set(this.levelArr);
    },
    //获取树状结构
    getTreeData() {
      this.loading = true;
      this.$http
        .get(`/gov/org/organizational/neighborhood/getGridCommitteeOrgTreeList?agencyId=${this.$store.state.chooseArea.chooseName}`)
        .then((res) => {
          const {
            data: { code, data },
          } = res;
          if (code === 0) {
            this.nodeConfig = data[0];
            this.getDataPLevel(data);
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    getTitleNameMapFun(i) {
      let titleNameMap = new Map([
        ["province", "省委"],
        ["city", "市委"],
        ["district", "区委"],
        ["street", "乡(镇、街道)"],
        ["community", "社区"],
        ["grid_manager", "网格"],
        ["building_chief", "楼院"],
        ["unit_chief", "微网格"],
      ]);
      return titleNameMap.get(i);
    },

    zoomSize(e) {
      e.preventDefault();
      if (e.deltaY > 0) {
        if (this.nowVal == 50) return;
        this.nowVal -= 0.5;
      } else if (e.deltaY < 0) {
        if (this.nowVal == 300) return;
        this.nowVal += 0.5;
      }
    },
  },
};
</script>

<style lang="scss">
@import "~@/assets/css/workflow.scss";
</style>