党组织接口对接

src/assets/css/workflow.scss

@@ -962,7 +962,7 @@ html {
     position: absolute;
     height: 5px;
     width: 50%;
-    background-color: #00143C;
+    background-color: #00023a;
     top: -4px
 }
 
@@ -1168,8 +1168,8 @@ html {
 
 .dingflow-design .condition-node-box {
     padding-top: 35px;
-    padding-right: 20px;
+    padding-right: 5px;
-    padding-left: 20px;
+    padding-left: 5px;
     -webkit-box-pack: center;
     justify-content: center;
     -webkit-box-align: center;

src/assets/scss/dataBoardMain.scss

@@ -7,7 +7,8 @@
 
 .g-pg {
     position: relative;
-    background-image: url(../images/home/bg.png);
+    // background-image: url(../images/home/bg.png);
+    background-color: #00023a;
     background-repeat: no-repeat;
     background-size: 100% 100%;
 }

src/components/Tree/nodeWrap.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="node-wrap" v-if="nodeConfig.key === '1'">
+    <div class="node-wrap" v-if="nodeConfig.laneLevel === 1">
       <div class="node-wrap-box">
         <div class="node-box-after">
-          <span>{{ nodeConfig.name }}</span>
+          <div class="nodeBoxTop">{{ spliceNameFun(nodeConfig, 18) }}</div>
         </div>
       </div>
     </div>
@@ -14,24 +14,21 @@
             <div class="condition-node">
               <div class="condition-node-box">
                 <div class="auto-judge">
-                  <div v-if="item.title === '网格党支部'">
+                  <div v-if="item.laneLevel >= 2 && item.laneLevel <= 7 && item.partyOrgLevel < 8">
-                    <span class="wgdzb">
+                    <div class="wgdzb" :title="getAllName(item)">{{ spliceNameFun(item, 18) }}</div>
-                      {{ item.name }}
-                    </span>
                   </div>
-                  <div v-if="item.title === '楼院党小组'">
+                  <div v-if="item.partyOrgLevel === 8">
-                    <span class="lydxz">
+                    <div class="lydxz" :title="getAllName(item)">
-                      {{ item.name }}
+                      {{ spliceNameFun(item, 18) }}
-                    </span>
+                    </div>
                   </div>
-                  <div v-if="item.title === '党员中心户'">
+                  <div v-if="item.partyOrgLevel === 9">
-                    <span class="dyzxh">
+                    <div class="dyzxh" :title="item.principalName">
-                      {{ item.name }}
+                      {{ spliceNameFun(item, 3) }}
-                    </span>
+                    </div>
                   </div>
-                  <div class="lxjtWrap" v-if="item.title === '联系家庭'">
+                  <div class="lxjtWrap" v-if="item.partyOrgLevel === 10">
                     <el-popover popper-class="popperClass" placement="right" trigger="click">
-                      <!-- <el-button>click 激活</el-button> -->
                       <div class="popperList">
                         <div style="margin-bottom: 13px">家庭类别</div>
                         <div class="listMsg">
@@ -47,10 +44,10 @@
                           <span>空巢老人</span>
                         </div>
                       </div>
-                      <span slot="reference" class="lxjt">
+                      <div slot="reference" class="lxjt" :title="item.principalName">
-                        {{ item.name }}
+                        {{ spliceNameFun(item, 3) }}
                         <img src="@/assets/images/home/cjr.png" alt="" />
-                      </span>
+                      </div>
                     </el-popover>
                   </div>
                 </div>
@@ -84,113 +81,147 @@ export default {
   computed: {},
   watch: {},
   methods: {
-    
+    getIncludes(name) {
+      if (name.includes("街道党工委") || name.includes("街道党总支")) {
+        return true;
+      }
+    },
+
+    getAllName(item) {
+      return item.partyOrgName + item.principalName;
+    },
+
+    spliceNameFun(row, num) {
+      let allName = row.principalName;
+      if (num === 18) {
+        allName = row.partyOrgName + row.principalName;
+      }
+      if (allName.length > num) {
+        return allName.substring(0, num) + "...";
+      }
+      return allName;
+    },
   },
 };
 </script>
 <style scoped lang="scss">
+@mixin spanLevel {
+  font-size: 14px;
+  color: #fff;
+  word-break: break-all;
+}
+@mixin normalLevel {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
 .node-box-after {
-  span {
+  .nodeBoxTop {
     font-size: 14px;
     position: relative;
     color: #fff;
     display: inline-block;
     width: 168px;
     height: 164px;
-    &::after {
+    padding-top: 10px;
-      position: absolute;
+    text-align: center;
-      content: "";
+    background-image: url(~@/assets/images/home/firstLevel.png);
-      display: block;
+    background-size: 100%;
-      top: -7px;
+    // &::after {
-      left: -16px;
+    //   position: absolute;
-      width: 168px;
+    //   content: "";
-      height: 164px;
+    //   display: block;
-      background-image: url(~@/assets/images/home/firstLevel.png);
+    //   top: -7px;
-      background-size: 100%;
+    //   left: -16px;
-    }
+    //   width: 168px;
+    //   height: 164px;
+    //   background-image: url(~@/assets/images/home/firstLevel.png);
+    //   background-size: 100%;
+    // }
   }
 }
 .auto-judge {
   .wgdzb {
-    font-size: 14px;
+    @include spanLevel;
-    position: relative;
-    color: #fff;
-    display: inline-block;
     width: 132px;
     height: 96px;
-    &::after {
+    text-align: center;
-      position: absolute;
+    padding-top: 5px;
-      content: "";
+    background-image: url(~@/assets/images/home/zbbg.png);
-      display: block;
+    background-size: 100%;
-      top: -7px;
+    // &::after {
-      left: 0;
+    //   position: absolute;
-      width: 132px;
+    //   content: "";
-      height: 96px;
+    //   display: block;
-      background-image: url(~@/assets/images/home/zbbg.png);
+    //   top: -7px;
-      background-size: 100%;
+    //   left: 0;
-    }
+    //   width: 132px;
+    //   height: 96px;
+    //   background-image: url(~@/assets/images/home/zbbg.png);
+    //   background-size: 100%;
+    // }
   }
   .lydxz {
-    font-size: 14px;
+    @include spanLevel;
-    position: relative;
+    @include normalLevel;
-    color: #fff;
+    width: 216px;
-    display: inline-block;
-    width: 132px;
     height: 50px;
-    &::after {
+    padding-top: 5px;
-      position: absolute;
+    background-image: url(~@/assets/images/home/lydxzTree.png);
-      content: "";
+    background-size: 100%;
-      display: block;
+    // &::after {
-      top: -2px;
+    //   position: absolute;
-      left: -40px;
+    //   content: "";
-      width: 216px;
+    //   display: block;
-      height: 50px;
+    //   top: -2px;
-      background-image: url(~@/assets/images/home/lydxzTree.png);
+    //   left: -40px;
-      background-size: 100%;
+    //   width: 216px;
-    }
+    //   height: 50px;
+    //   background-image: url(~@/assets/images/home/lydxzTree.png);
+    //   background-size: 100%;
+    // }
   }
   .dyzxh {
-    font-size: 14px;
+    @include spanLevel;
-    position: relative;
+    @include normalLevel;
-    color: #fff;
-    display: inline-block;
     height: 118px;
-    width: 5px;
+    width: 30px;
-    &::after {
+    writing-mode: tb-rl;
-      position: absolute;
+    margin-top: -12px;
-      content: "";
+    background-image: url(~@/assets/images/home/dyzxhTree.png);
-      display: block;
+    background-size: 100%;
-      top: -19px;
+    // &::after {
-      left: -8px;
+    //   position: absolute;
-      width: 30px;
+    //   content: "";
-      height: 118px;
+    //   display: block;
-      background-image: url(~@/assets/images/home/dyzxhTree.png);
+    //   top: -19px;
-      background-size: 100%;
+    //   left: -8px;
-    }
+    //   width: 30px;
+    //   height: 118px;
+    //   background-image: url(~@/assets/images/home/dyzxhTree.png);
+    //   background-size: 100%;
+    // }
   }
   .lxjt {
-    font-size: 14px;
+    @include spanLevel;
-    cursor: pointer;
+    display: flex;
-    position: relative;
+    align-items: center;
-    color: #fff;
+    justify-content: space-around;
-    display: inline-block;
     height: 118px;
-    img {
+    width: 30px;
-      position: absolute;
+    writing-mode: tb-rl;
-      bottom: 26px;
+    margin-top: -12px;
-      left: -2px;
+    background-image: url(~@/assets/images/home/dyzxhTree.png);
-    }
+    background-size: 100%;
-    &::after {
+    // &::after {
-      position: absolute;
+    //   position: absolute;
-      content: "";
+    //   content: "";
-      display: block;
+    //   display: block;
-      top: -19px;
+    //   top: -19px;
-      left: -8px;
+    //   left: -8px;
-      width: 30px;
+    //   width: 30px;
-      height: 118px;
+    //   height: 118px;
-      background-image: url(~@/assets/images/home/dyzxhTree.png);
+    // }
-      background-size: 100%;
-    }
   }
 }
 </style>

src/main.js

@@ -64,6 +64,7 @@ Vue.use(Element, {
 });
 
 Vue.prototype.$message = message;
+Vue.prototype.$moment = Moment;
 // 弹窗底部滚动问题 弹窗需配合v-if使用
 Vue.directive("fixed", {
   inserted() {

src/views/dataBoard/organizational/index.vue

@@ -2,26 +2,34 @@
   <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 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> -->
-    <div class="content" v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'">
+    <!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" -->
-      <div class="flowLevel">
+    <div class="content">
-        <div>社区党委</div>
+      <div v-for="(item, index) in levelArr" :key="item" :class="[`flowLevel-${index + 1}`]">
+        <div>{{ getTitleNameMapFun(item) }}</div>
       </div>
-      <div class="flowLevel-2"><div>网格党支部</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>
+      <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">
+          <div class="dingflow-design" v-loading="loading">
             <nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap>
           </div>
         </el-col>
@@ -31,6 +39,9 @@
 </template>
 
 <script>
+import { Loading } from "element-ui";
+import { relativeTimeThreshold } from "moment";
+
 // import Tree from "./components/tree.vue";
 export default {
   name: "organizational",
@@ -39,6 +50,8 @@ export default {
   // },
   data() {
     return {
+      loading: false,
+      levelArr: [],
       navList: [
         {
           name: "党委组织架构",
@@ -384,7 +397,55 @@ export default {
     };
   },
   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) {
@@ -462,6 +523,7 @@ export default {
     position: relative;
     transition: transform 0.3s ease-in-out;
     transform-origin: 50% 50%;
+    // overflow: scroll;
     .contentList {
       position: relative;
       width: 100%;
@@ -469,7 +531,7 @@ export default {
       // margin-bottom: 45px;
       // background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
     }
-    .flowLevel {
+    .flowLevel-1 {
       @include flowLevwlCommon;
       top: -10px;
       height: 164px;
@@ -486,11 +548,19 @@ export default {
         }
       }
     }
-    .flowLevel-2 {
+    .flowLevel-2,
+    .flowLevel-3,
+    .flowLevel-4,
+    .flowLevel-5,
+    .flowLevel-6,
+    .flowLevel-7,
+    .flowLevel-8 {
       @include flowLevwlCommon;
-      top: 184px;
+      height: 126px;
-      height: 119px;
+      line-height: 126px;
-      line-height: 119px;
+    }
+    .flowLevel-2 {
+      top: 181px;
       div {
         padding-left: 80px;
         &::after {
@@ -504,15 +574,12 @@ export default {
       }
     }
     .flowLevel-3 {
-      @include flowLevwlCommon;
+      top: 329px;
-      top: 328px;
-      height: 85px;
-      line-height: 85px;
       div {
         padding-left: 80px;
         &::after {
           @include flowLevelAfter;
-          top: 10px;
+          top: 31px;
           left: 15px;
           width: 180px;
           height: 60px;
@@ -521,8 +588,78 @@ export default {
       }
     }
     .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: 429px;
+      top: 1220px;
       height: 135px;
       line-height: 135px;
       div {
@@ -537,9 +674,9 @@ export default {
         }
       }
     }
-    .flowLevel-5 {
+    .flowLevel-10 {
       @include flowLevwlCommon;
-      top: 598px;
+      top: 1380px;
       height: 135px;
       line-height: 135px;
       div {