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 ? '180px' : '', lineHeight: item === 8 ? '180px' : '' }">
        <div :class="[item === 8 ? 'otherTop' : '']">{{ getTitleNameMapFun(item) }}</div>
      </div>
      <el-row>
        <el-col :span="3">
          <div class="contentList"></div>
        </el-col>
        <el-col :span="21">
          <div class="dingflow-design" :style="{ height: treeHeight + 'px' }" 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: {},
      zoom: 0,
      treeHeight: 300,
    };
  },
  watch: {
    "$store.state.chooseArea.chooseName"(n, v) {
      if (n.orgId) {
        // this.levelArr = [];
        // this.nodeConfig = {};
        // this.getTreeData();
      }
    },
  },
  computed: {},
  mounted() {
    // const orgId = this.$store.state.chooseArea.chooseName.orgId;
    // if (orgId) {
    //   this.getTreeData();
    // }
    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 && item.children.length > 0) {
          this.getDataPLevel(item.children);
        }
      });
      const myArray = [...new Set(this.levelArr)];
      this.treeHeight = myArray.length * 180 + 220;
      this.levelArr = this.getLevelArrNum(myArray);
    },

    hideChildrenData(data) {
      const newData = [...data];
      newData.forEach((item) => {
        if (item.laneLevel === 1) {
          this.hideChildrenData(item.children);
        }
        if (item.children && item.children.length > 0 && item.laneLevel >= 2) {
          item._children = item.children;
          item.children = null;
          this.hideChildrenData(item._children);
        }
      });
      this.nodeConfig = newData[0];
    },

    //获取树状结构
    getTreeData() {
      this.loading = true;
      this.$http.get(`/actual/base/organizational/structure/partyCommitteeOrg?agencyId=`).then((res) => {
        const {
          data: { code, msg, data },
        } = res;
        if (code === 0) {
          if (data.length === 0) {
            this.loading = false;
            this.$message.error("暂无数据");
            return;
          }
          this.getDataPLevel(data);
          this.hideChildrenData(data);
          this.loading = false;
        } else {
          this.loading = false;
          this.$message.error(msg);
        }
      });
    },

    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" scoped>
@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: 180px !important;
      // margin-top: -45px !important;
    }
    .lastLevel1 {
      height: 180px !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: 180px;
    }

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

      div {
        padding-left: 80px;

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

    .flowLevel-3 {
      top: 379px;
      line-height: 180px;

      div {
        padding-left: 80px;

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

    .flowLevel-4 {
      top: 578px;
      line-height: 180px;

      div {
        padding-left: 80px;

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

    .flowLevel-5 {
      top: 776px;
      line-height: 180px;

      div {
        padding-left: 80px;

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

    .flowLevel-6 {
      top: 974px;
      line-height: 180px;
      div {
        padding-left: 80px;

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

    .flowLevel-7 {
      top: 1172px;
      line-height: 180px;

      div {
        padding-left: 80px;

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

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

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

      div {
        padding-left: 80px;

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

    .flowLevel-9 {
      @include flowLevwlCommon;
      top: 1569px;
      height: 160px;
      line-height: 180px;

      div {
        padding-left: 80px;

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

    .flowLevel-10 {
      @include flowLevwlCommon;
      top: 1766px;
      height: 180px;
      line-height: 180px;

      div {
        padding-left: 80px;

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