epmet-work-pc/src/views/dataBoard/organizational/dangTree/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="[item > 9 ? 'lastLevel1' : '', item === 9 ? 'lastLevel' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 8 ? '90px' : '', lineHeight: item === 8 ? '90px' : '' }">
        <div :class="[item === 8 ? 'otherTop' : '']">{{ 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: [],
      nowVal: 100,
      nodeConfig: {},
    };
  },
  watch: {
    "$store.state.chooseArea.chooseName"(n, v) {
      console.log(n);
    },
  },
  computed: {},
  mounted() {
    this.getTreeData();
  },
  methods: {
    getLevelArrNum(myArray) {
      const arr = [...myArray];
      while (arr.length > 1) {
        let lastItem = arr[arr.length - 1];
        let secondLastItem = arr[arr.length - 2];
        if (lastItem < secondLastItem) {
          arr.pop();
        } else {
          break;
        }
      }
      return arr;
    },

    //获取背景层级
    getDataPLevel(data) {
      data.forEach((item) => {
        this.levelArr.push(item.partyOrgLevel);
        if (item.children) {
          this.getDataPLevel(item.children);
        }
      });
      const myArray = [...new Set(this.levelArr)];
      this.levelArr = this.getLevelArrNum(myArray);
    },
    //获取树状结构
    getTreeData() {
      this.loading = true;
      this.$http
        .get(`/actual/base/organizational/structure/partyCommitteeOrg?agencyId=${this.$store.state.chooseArea.chooseName.orgId}`)
        .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([
        [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">
@mixin flowLevwlCommon {
  position: absolute;
  width: 100%;
  margin-bottom: 45px;
  background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
  color: #fff;
  font-size: 16px;
}

@mixin flowLevelAfter {
  position: absolute;
  content: "";
  display: block;
  background-size: 100%;
}
.wrap {
  .content {
    margin-top: 65px;
    padding: 0 17px;
    position: relative;
    transition: transform 0.3s ease-in-out;
    transform-origin: 50% 50%;

    .contentList {
      position: relative;
      width: 100%;
      height: 109px;
    }

    .lastLevel {
      height: 145px !important;
      margin-top: -45px !important;
    }
    .lastLevel1 {
      height: 145px !important;
      margin-top: -37px !important;
    }

    .flowLevel-1 {
      @include flowLevwlCommon;
      top: -10px;
      height: 164px;
      line-height: 164px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 51px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/dwbg.png);
        }
      }
    }

    .flowLevel-2,
    .flowLevel-3,
    .flowLevel-4,
    .flowLevel-5,
    .flowLevel-6,
    .flowLevel-7 {
      @include flowLevwlCommon;
      height: 126px;
    }

    .flowLevel-2 {
      top: 181px;
      line-height: 110px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 26px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/dzb.png);
        }
      }
    }

    .flowLevel-3 {
      top: 329px;
      line-height: 120px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 31px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/lydxz.png);
        }
      }
    }

    .flowLevel-4 {
      top: 475px;
      line-height: 128px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 35px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/dyzxh.png);
        }
      }
    }

    .flowLevel-5 {
      top: 623px;
      line-height: 130px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 35px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/lxjt.png);
        }
      }
    }

    .flowLevel-6 {
      top: 771px;
      line-height: 130px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 35px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/lxjt.png);
        }
      }
    }

    .flowLevel-7 {
      top: 922px;
      line-height: 130px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 35px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/lxjt.png);
        }
      }
    }

    .otherTop {
      &::after {
        top: 15px !important;
      }
    }

    .flowLevel-8 {
      @include flowLevwlCommon;
      top: 1070px;
      height: 90px;
      line-height: 90px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 14px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/lxjt.png);
        }
      }
    }

    .flowLevel-9 {
      @include flowLevwlCommon;
      top: 1179px;
      height: 135px;
      line-height: 135px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 35px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/dyzxh.png);
        }
      }
    }

    .flowLevel-10 {
      @include flowLevwlCommon;
      top: 1338px;
      height: 135px;
      line-height: 135px;

      div {
        padding-left: 80px;

        &::after {
          @include flowLevelAfter;
          top: 35px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/lxjt.png);
        }
      }
    }
  }
}
</style>