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

<template>
  <div class="organWrap">
    <div class="top-nav">
      <div class="top-nav-list">
        <div v-for="item in navList" :key="item.key" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']" @click="chooseNav(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- <div style="width: 100%; height: 100%；position: relative;">
      <div style="width: 100px; height: 100px; background-color: aqua; color: #fff;" v-drag>222</div>
    </div> -->
    <!-- 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>
      <!-- <div class="flowLevel-6"></div>
      <div class="flowLevel-7"></div>
      <div class="flowLevel-8"></div>
      <div class="flowLevel-9"></div>
      <div class="flowLevel-10"></div> -->
      <!-- <div class="flowLevel-2"><div>网格党支部</div></div>
      <div class="flowLevel-3"><div>楼院党小组</div></div>
      <div class="flowLevel-4"><div>党员中心户</div></div>
      <div class="flowLevel-5"><div>联系家庭</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">
            <nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { Loading } from "element-ui";
import { relativeTimeThreshold } from "moment";

// import Tree from "./components/tree.vue";
export default {
  name: "organizational",
  // components: {
  //   Tree,
  // },
  data() {
    return {
      loading: false,
      levelArr: [],
      navList: [
        {
          name: "党委组织架构",
          key: "1",
          ifActive: true,
        },
        {
          name: "居委组织架构",
          key: "2",
          ifActive: false,
        },
        {
          name: "网格架构",
          key: "3",
          ifActive: false,
        },
      ],
      cardList: [
        {
          title: "社区党委",
          key: "1",
          name: "南昌路社区党委 （党委书记：解书记）",
          children: [
            {
              title: "网格党支部",
              name: "第一网格党支部(支部书记：王艺发)",
              key: "1",
              children: [
                {
                  title: "楼院党小组",
                  name: "第一楼院党小组 （组长：韩文国）",
                  key: "1",
                },
                {
                  title: "楼院党小组",
                  name: "第二楼院党小组 （组长：褚丽兰）",
                  key: "2",
                },
              ],
            },
            {
              title: "网格党支部",
              name: "第二网格党支部 （支部书记：尤芬紫）",
              key: "2",
              children: [
                {
                  title: "楼院党小组",
                  name: "第一楼院党小组 （组长：韩文国）",
                  key: "1",
                },
                {
                  title: "楼院党小组",
                  name: "第二楼院党小组 （组长：褚丽兰）",
                  key: "2",
                },
              ],
            },
            {
              title: "网格党支部",
              name: "第三网格党支部 （支部书记：凤桥强）",
              key: "3",
              children: [
                {
                  title: "楼院党小组",
                  name: "第一楼院党小组 （组长：韩文国）",
                  key: "1",
                },
                {
                  title: "楼院党小组",
                  name: "第二楼院党小组 （组长：褚丽兰）",
                  key: "2",
                },
                {
                  title: "楼院党小组",
                  name: "第三楼院党小组 （组长：王丽丽）",
                  key: "3",
                },
              ],
            },
          ],
        },
      ],
      nowVal: 100,
      nodeConfig: {
        title: "社区党委",
        name: "南昌路社区党委(党委书记：解书记)",
        key: "1",
        children: [
          {
            title: "网格党支部",
            name: "第一网格党支部 （支部书记：王艺发）",
            type: 2,
            children: [
              {
                title: "楼院党小组",
                type: 3,
                name: "第一楼院党小组 （组长：韩文国）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "杨军",
                  },
                ],
              },
              {
                title: "楼院党小组",
                type: 3,
                name: "第二楼院党小组 （组长：褚丽兰）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "杨军",
                  },
                ],
              },
            ],
          },
          {
            title: "网格党支部",
            name: "第二网格党支部 （支部书记：尤芬紫）",
            type: 3,
            children: [
              {
                title: "楼院党小组",
                type: 3,
                name: "第一楼院党小组 （组长：韩文国）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                    children: [
                      {
                        title: "联系家庭",
                        type: 5,
                        name: "王宇",
                      },
                      {
                        title: "联系家庭",
                        type: 5,
                        name: "刘冰冰",
                      },
                      {
                        title: "联系家庭",
                        type: 5,
                        name: "杨飞宇",
                      },
                      {
                        title: "联系家庭",
                        type: 5,
                        name: "齐天",
                      },
                    ],
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                ],
              },
              {
                title: "楼院党小组",
                type: 3,
                name: "第二楼院党小组 （组长：褚丽兰）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                ],
              },
            ],
          },
          {
            title: "网格党支部",
            name: "第三网格党支部 （支部书记：凤桥强）",
            type: 3,
            children: [
              {
                title: "楼院党小组",
                type: 3,
                name: "第一楼院党小组 （组长：韩文国）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "杨军",
                  },
                ],
              },
              {
                title: "楼院党小组",
                type: 3,
                name: "第二楼院党小组 （组长：褚丽兰）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "杨军",
                  },
                ],
              },
              {
                title: "楼院党小组",
                type: 3,
                name: "第三楼院党小组 （组长：王丽丽）",
                children: [
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "周游",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "王阳明",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "刘艳萍",
                  },
                  {
                    title: "党员中心户",
                    type: 4,
                    name: "谢苗苗",
                  },
                ],
              },
            ],
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {
    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);
    },

    chooseNav(item) {
      this.navList.forEach((d) => {
        if (item.key === d.key) {
          d.ifActive = true;
        } else {
          d.ifActive = false;
        }
      });
    },
    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";
@mixin navListCommon {
  width: 120px;
  height: 36px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  margin-right: 4px;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}

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

.organWrap {
  margin-top: 18px;
  .top-nav {
    .top-nav-list {
      display: flex;
      margin-left: 28px;
      .top-nav-item {
        @include navListCommon;
        background-image: url("~@/assets/images/home/noChooseMain.png");
        color: #96b1ce;
      }
      .top-nav-itemAC {
        @include navListCommon;
        background-image: url("~@/assets/images/home/chooseMain.png");
        color: #fff;
      }
    }
  }
  .content {
    margin-top: 65px;
    padding: 0 17px;
    position: relative;
    transition: transform 0.3s ease-in-out;
    transform-origin: 50% 50%;
    // overflow: scroll;
    .contentList {
      position: relative;
      width: 100%;
      height: 109px;
      // margin-bottom: 45px;
      // background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
    }
    .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,
    .flowLevel-8 {
      @include flowLevwlCommon;
      height: 126px;
      line-height: 126px;
    }
    .flowLevel-2 {
      top: 181px;
      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;
      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;
      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;
      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;
      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;
      div {
        padding-left: 80px;
        &::after {
          @include flowLevelAfter;
          top: 35px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/lxjt.png);
        }
      }
    }
    .flowLevel-8 {
      top: 1070px;
      div {
        padding-left: 80px;
        &::after {
          @include flowLevelAfter;
          top: 35px;
          left: 15px;
          width: 180px;
          height: 60px;
          background-image: url(~@/assets/images/home/lxjt.png);
        }
      }
    }
    .flowLevel-9 {
      @include flowLevwlCommon;
      top: 1220px;
      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: 1380px;
      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>