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="[item === 'unit_chief' ? 'lastLevel' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 'building_chief' ? '90px' : '', lineHeight: item === 'building_chief' ? '90px' : '' }">
        <div :class="[item === 'building_chief' ? '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)">
            <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: {},
  watch: {
    "$store.state.chooseArea.chooseName"(n, v) {
      if (n.orgId) {
        this.levelArr = [];
        this.nodeConfig = {};
        this.getTreeData();
      }
    },
  },
  mounted() {
    const orgId = this.$store.state.chooseArea.chooseName.orgId;
    if (orgId) {
      this.getTreeData();
    }
  },
  methods: {
    getLevelArrNum(myArray) {
      const arr = [...myArray];
      let titleNameMap = new Map([
        ["province", 1],
        ["city", 2],
        ["district", 3],
        ["street", 4],
        ["community", 5],
        ["grid_manager", 6],
        ["building_chief", 7],
        ["unit_chief", 8],
      ]);
      while (arr.length > 1) {
        let lastItem = titleNameMap.get(arr[arr.length - 1]);
        let secondLastItem = titleNameMap.get(arr[arr.length - 2]);
        if (lastItem < secondLastItem) {
          arr.pop();
        } else {
          break;
        }
      }
      return arr;
    },
    // 获取data以及子节点的level
    getDataPLevel(data) {
      data.forEach((item) => {
        this.levelArr.push(item.level);
        if (item.children && item.children.length > 0) {
          this.getDataPLevel(item.children);
        }
      });
      const myArray = [...new Set(this.levelArr)];
      this.levelArr = this.getLevelArrNum(myArray);
    },
    //获取树状结构
    getTreeData() {
      this.loading = true;
      this.$http.get(`/gov/org/organizational/neighborhood/getGridCommitteeOrgTreeList?agencyId=${this.$store.state.chooseArea.chooseName.orgId}`).then((res) => {
        const {
          data: { code, msg, data },
        } = res;
        if (code === 0) {
          if (data.length === 0) {
            this.loading = false;
            this.$message.error("暂无数据");
            return;
          }
          this.nodeConfig = data[0];
          this.getDataPLevel(data);
          this.loading = false;
        } else {
          this.loading = false;
          this.$message.error(msg);
        }
      });
    },

    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">
@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;
    }

    .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>