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

<template>
  <div class="wrap">
    <!--  -->
    <div class="content" v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'">
      <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)">
            <nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "DangTree",
  data() {
    return {
      loading: false,
      levelArr: [],
      navList: [
        {
          name: "党委组织架构",
          key: "1",
          ifActive: true,
        },
        {
          name: "居委组织架构",
          key: "2",
          ifActive: false,
        },
        {
          name: "网格架构",
          key: "3",
          ifActive: false,
        },
      ],
      nowVal: 100,

      nodeConfig: {},
    };
  },
  watch: {
    "$store.state.chooseArea.chooseName"(n, v) {
      console.log(n);
    },
  },
  computed: {},
  mounted() {
    console.log(this.$store.state.chooseArea.chooseName);
    this.getTreeData();
  },
  methods: {
    //获取背景层级
    getDataPLevel(item) {
      let arr = [...this.levelArr];
      arr.push(item.partyOrgLevel);
      this.levelArr = [...arr];
      if (item.children) {
        this.getDataPLevel(item.children[0]);
      }
    },
    //获取树状结构
    getTreeData() {
      this.loading = true;
      this.$http
        .get("/actual/base/organizational/structure/partyCommitteeOrg")
        .then((res) => {
          const {
            data: { code, data },
          } = res;
          if (code === 0) {
            this.nodeConfig = data[0];
            this.getDataPLevel(data[0]);
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    getTitleNameMapFun(i) {
      let titleNameMap = new Map([
        [1, "省委"],
        [2, "市委"],
        [3, "区委"],
        [4, "党工委"],
        [5, "党委"],
        [6, "党总支"],
        [7, "党支部"],
        [8, "楼院党小组"],
        [9, "党员中心户"],
        [10, "联系家庭"],
      ]);
      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>