diff --git a/.env.development b/.env.development
index 03346099c..316568064 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,6 @@
 NODE_ENV=development
 
-VUE_APP_API_SERVER =  http://192.168.1.144/api
+VUE_APP_API_SERVER =  http://localhost:9001/api
 # VUE_APP_API_SERVER =  http://219.146.91.110:30801/api
 # VUE_APP_API_SERVER =  https://epmet-yantai.elinkservice.cn/api
 # VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
diff --git a/src/App.vue b/src/App.vue
index fa8c1ec7e..60eaf8b2e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,11 +13,11 @@ export default {
   watch: {
     "$i18n.locale": "i18nHandle",
   },
-  created () {
+  created() {
     this.i18nHandle(this.$i18n.locale);
   },
   methods: {
-    i18nHandle (val, oldVal) {
+    i18nHandle(val, oldVal) {
       localStorage.setItem("language", val);
       document.querySelector("html").setAttribute("lang", val);
       document.title = messages[val].brand.lg;
@@ -26,7 +26,7 @@ export default {
         window.location.reload();
       }
     },
-    refreshView () {
+    refreshView() {
       // In order to make the cached page re-rendered
       this.$store.dispatch("delAllCachedViews", this.$route);
 
@@ -41,7 +41,7 @@ export default {
     ...mapActions(["setClientHeight", "setSize", "setResolution", "setEnv"]),
   },
   computed: {},
-  mounted () {
+  mounted() {
     console.log("开始：：：：" + localStorage.getItem("userType"));
     if (!localStorage.getItem("userType")) {
       localStorage.setItem("userType", "oper");
@@ -155,7 +155,7 @@ export default {
     position: relative;
     max-height: 83vh;
     box-sizing: border-box;
-    padding: 0 0 16px ;
+    padding: 0 0 16px;
     .dialog-h-content {
       max-height: calc(83vh - 80px);
       box-sizing: border-box;
@@ -226,4 +226,22 @@ export default {
 * {
   @include scrollBar;
 }
+.selectPopClass {
+  border: none !important;
+  background: linear-gradient(180deg, #05326e 0%, #032a5d 100%) !important;
+  .el-select-dropdown__item {
+    color: #fff !important;
+    background: #05326e !important;
+  }
+  dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background: #032a5d !important;
+  }
+  .popper__arrow {
+    border: none !important;
+    &::after {
+      border-bottom-color: #05326e !important;
+    }
+  }
+}
 </style>
diff --git a/src/assets/css/workflow.scss b/src/assets/css/workflow.scss
index dc9467a73..c86784239 100644
--- a/src/assets/css/workflow.scss
+++ b/src/assets/css/workflow.scss
@@ -1,3 +1,31 @@
+@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%;
+}
+
 .ant-btn {
     line-height: 1.5;
     display: inline-block;
@@ -1124,7 +1152,7 @@ html {
 
 .popperClass {
     width: 130px !important;
-    height: 136px !important;
+    min-height: 136px !important;
     background: #0E3164;
     border: 1px solid #4883CD;
     border-radius: 4px;
@@ -1153,7 +1181,7 @@ html {
 }
 
 .dingflow-design .condition-node {
-
+    cursor: pointer;
     // min-height: 220px
 }
 
@@ -1168,8 +1196,8 @@ html {
 
 .dingflow-design .condition-node-box {
     padding-top: 35px;
-    padding-right: 20px;
-    padding-left: 20px;
+    padding-right: 5px;
+    padding-left: 5px;
     -webkit-box-pack: center;
     justify-content: center;
     -webkit-box-align: center;
@@ -1351,4 +1379,213 @@ html {
 
 .ant-btn {
     position: relative
+}
+
+.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;
+        }
+
+        .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;
+            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 {
+            @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);
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/assets/images/home/bzfry.png b/src/assets/images/home/bzfry.png
new file mode 100644
index 000000000..5a35143a7
Binary files /dev/null and b/src/assets/images/home/bzfry.png differ
diff --git a/src/assets/images/home/cjry.png b/src/assets/images/home/cjry.png
new file mode 100644
index 000000000..37c598632
Binary files /dev/null and b/src/assets/images/home/cjry.png differ
diff --git a/src/assets/images/home/dbry.png b/src/assets/images/home/dbry.png
new file mode 100644
index 000000000..5632df4cd
Binary files /dev/null and b/src/assets/images/home/dbry.png differ
diff --git a/src/assets/images/home/dy.png b/src/assets/images/home/dy.png
new file mode 100644
index 000000000..ae6a61994
Binary files /dev/null and b/src/assets/images/home/dy.png differ
diff --git a/src/assets/images/home/gyg.png b/src/assets/images/home/gyg.png
new file mode 100644
index 000000000..377fb70f9
Binary files /dev/null and b/src/assets/images/home/gyg.png differ
diff --git a/src/assets/images/home/ldry.png b/src/assets/images/home/ldry.png
new file mode 100644
index 000000000..41a2d28a2
Binary files /dev/null and b/src/assets/images/home/ldry.png differ
diff --git a/src/assets/images/home/lnr.png b/src/assets/images/home/lnr.png
new file mode 100644
index 000000000..430cfb25e
Binary files /dev/null and b/src/assets/images/home/lnr.png differ
diff --git a/src/assets/images/home/lzdyz.png b/src/assets/images/home/lzdyz.png
new file mode 100644
index 000000000..b98a7c8b0
Binary files /dev/null and b/src/assets/images/home/lzdyz.png differ
diff --git a/src/assets/images/home/mxbry.png b/src/assets/images/home/mxbry.png
new file mode 100644
index 000000000..c0541544e
Binary files /dev/null and b/src/assets/images/home/mxbry.png differ
diff --git a/src/assets/images/home/snry.png b/src/assets/images/home/snry.png
new file mode 100644
index 000000000..5b0bc57fb
Binary files /dev/null and b/src/assets/images/home/snry.png differ
diff --git a/src/assets/images/home/syry.png b/src/assets/images/home/syry.png
new file mode 100644
index 000000000..e8a243d21
Binary files /dev/null and b/src/assets/images/home/syry.png differ
diff --git a/src/assets/images/home/szry.png b/src/assets/images/home/szry.png
new file mode 100644
index 000000000..7ce4487e2
Binary files /dev/null and b/src/assets/images/home/szry.png differ
diff --git a/src/assets/images/home/tdry.png b/src/assets/images/home/tdry.png
new file mode 100644
index 000000000..d1e4b83bd
Binary files /dev/null and b/src/assets/images/home/tdry.png differ
diff --git a/src/assets/images/home/tsry.png b/src/assets/images/home/tsry.png
new file mode 100644
index 000000000..d8d7436be
Binary files /dev/null and b/src/assets/images/home/tsry.png differ
diff --git a/src/assets/images/home/tyjr.png b/src/assets/images/home/tyjr.png
new file mode 100644
index 000000000..e5c202e86
Binary files /dev/null and b/src/assets/images/home/tyjr.png differ
diff --git a/src/assets/images/home/tzry.png b/src/assets/images/home/tzry.png
new file mode 100644
index 000000000..b58e237b9
Binary files /dev/null and b/src/assets/images/home/tzry.png differ
diff --git a/src/assets/images/home/xfry.png b/src/assets/images/home/xfry.png
new file mode 100644
index 000000000..a30c2ceff
Binary files /dev/null and b/src/assets/images/home/xfry.png differ
diff --git a/src/assets/images/home/ylfn.png b/src/assets/images/home/ylfn.png
new file mode 100644
index 000000000..8a40ebd39
Binary files /dev/null and b/src/assets/images/home/ylfn.png differ
diff --git a/src/assets/images/home/zh.png b/src/assets/images/home/zh.png
new file mode 100644
index 000000000..277a4f00b
Binary files /dev/null and b/src/assets/images/home/zh.png differ
diff --git a/src/assets/images/home/zyz.png b/src/assets/images/home/zyz.png
new file mode 100644
index 000000000..e20a4674e
Binary files /dev/null and b/src/assets/images/home/zyz.png differ
diff --git a/src/assets/scss/dataBoardMain.scss b/src/assets/scss/dataBoardMain.scss
index aae08b89d..87919319e 100644
--- a/src/assets/scss/dataBoardMain.scss
+++ b/src/assets/scss/dataBoardMain.scss
@@ -8,6 +8,7 @@
 .g-pg {
     position: relative;
     background-image: url(../images/home/bg.png);
+    // background-color: #00023a;
     background-repeat: no-repeat;
     background-size: 100% 100%;
 }
@@ -78,6 +79,22 @@
         -webkit-text-fill-color: transparent;
     }
 
+    .selectArea {
+        position: absolute;
+        left: 480px;
+        width: 120px;
+        right: 0;
+        top: 20px;
+
+        ::v-deep .el-input__inner {
+            height: 32px !important;
+            border-radius: 16px !important;
+            border: none !important;
+            color: #fff !important;
+            background: linear-gradient(180deg, #05326E 0%, #032A5D 100%) !important;
+        }
+    }
+
     .btn-back {
         position: absolute;
         top: 52px;
diff --git a/src/components/Tree/nodeWrap.vue b/src/components/Tree/nodeWrap.vue
index 33fd304be..9f56afa5e 100644
--- a/src/components/Tree/nodeWrap.vue
+++ b/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" @click="gotoPersonnel">{{ spliceNameFun(nodeConfig, 18) }}</div>
         </div>
       </div>
     </div>
@@ -14,43 +14,40 @@
             <div class="condition-node">
               <div class="condition-node-box">
                 <div class="auto-judge">
-                  <div v-if="item.title === '网格党支部'">
-                    <span class="wgdzb">
-                      {{ item.name }}
-                    </span>
+                  <div v-if="item.laneLevel >= 2 && item.laneLevel <= 7 && item.partyOrgLevel < 8">
+                    <div @click="gotoPersonnel" class="wgdzb" :title="getAllName(item)">{{ spliceNameFun(item, 18) }}</div>
                   </div>
-                  <div v-if="item.title === '楼院党小组'">
-                    <span class="lydxz">
-                      {{ item.name }}
-                    </span>
+                  <div v-if="item.partyOrgLevel === 8">
+                    <div @click="gotoPersonnel" class="lydxz" :title="getAllName(item)">
+                      {{ spliceNameFun(item, 18) }}
+                    </div>
                   </div>
-                  <div v-if="item.title === '党员中心户'">
-                    <span class="dyzxh">
-                      {{ item.name }}
-                    </span>
+                  <div v-if="item.partyOrgLevel === 9">
+                    <div @click="gotoPersonnel" class="dyzxh" :title="item.principalName">
+                      {{ spliceNameFun(item, 3) }}
+                    </div>
                   </div>
-                  <div class="lxjtWrap" v-if="item.title === '联系家庭'">
-                    <el-popover popper-class="popperClass" placement="right" trigger="click">
-                      <!-- <el-button>click 激活</el-button> -->
+                  <div class="lxjtWrap" v-if="item.partyOrgLevel === 10">
+                    <el-popover popper-class="popperClass" placement="right" trigger="hover">
                       <div class="popperList">
                         <div style="margin-bottom: 13px">家庭类别</div>
-                        <div class="listMsg">
-                          <img src="@/assets/images/home/jr.png" alt="" />
-                          <span>退役军人</span>
+                        <div class="listMsg" v-for="item in homeTypeArr" :key="item">
+                          <img :src="require(`@/assets/images/home/${getHomeTypesMap(item)[1]}.png`)" alt="" />
+                          <span style="margin-left: 3px">{{ getHomeTypesMap(item)[0] }}</span>
                         </div>
-                        <div class="listMsg">
+                        <!-- <div class="listMsg">
                           <img src="@/assets/images/home/cjr.png" alt="" />
                           <span>残疾人</span>
                         </div>
                         <div class="listMsg">
                           <img src="@/assets/images/home/kclr.png" alt="" />
                           <span>空巢老人</span>
-                        </div>
+                        </div> -->
                       </div>
-                      <span slot="reference" class="lxjt">
-                        {{ item.name }}
+                      <div @click="gotoPersonnel" @mouseover="getHomeTypes(item.id)" slot="reference" class="lxjt" :title="item.principalName">
+                        {{ spliceNameFun(item, 3) }}
                         <img src="@/assets/images/home/cjr.png" alt="" />
-                      </span>
+                      </div>
                     </el-popover>
                   </div>
                 </div>
@@ -78,119 +75,200 @@
 export default {
   props: ["nodeConfig"],
   data() {
-    return {};
+    return {
+      homeTypeArr: [],
+    };
   },
   mounted() {},
   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;
+    },
+
+    // 家庭类别Map
+    getHomeTypesMap(item) {
+      const homeTypeMap = new Map([
+        ["partyFlag", { name: "党员", icon: "dy" }],
+        ["subsistenceAllowanceFlag", { name: "低保人员", icon: "dbry" }],
+        ["ensureHouseFlag", { name: "保障房人员", icon: "bzfry" }],
+        ["unemployedFlag", { name: "失业人员", icon: "syry" }],
+        ["fertileWomanFlag", { name: "育龄妇女", icon: "ylfn" }],
+        ["veteranFlag", { name: "退役军人", icon: "tyjr" }],
+        ["unitedFrontFlag", { name: "统战人员", icon: "tzry" }],
+        ["petitionOfficerFlag", { name: "信访人员", icon: "xfry" }],
+        ["volunteerFlag", { name: "志愿者", icon: "zyz" }],
+        ["oldPeopleFlag", { name: "老年人", icon: "lnr" }],
+        ["emptyNesterFlag", { name: "空巢老人", icon: "kclr" }],
+        ["specialSupportFlag", { name: "特扶人员", icon: "tfry" }],
+        ["disabledFlag", { name: "失能人员", icon: "snry" }],
+        ["dementedFlag", { name: "失智人员", icon: "szry" }],
+        ["disabilityFlag", { name: "残疾人", icon: "cjr" }],
+        ["seriousIllnessFlag", { name: "大病人员", icon: "dbry" }],
+        ["chronicDiseaseFlag", { name: "慢性病人员", icon: "mxbry" }],
+        ["specialCrowdFlag", { name: "特殊人群", icon: "tsry" }],
+        ["tenantFlag", { name: "租户", icon: "zh" }],
+        ["floatingFlag", { name: "流动人员", icon: "ldry" }],
+        ["liveAloneFlag", { name: "独居老人", icon: "kclr" }],
+        ["publicWelfareFlag", { name: "公益岗人员", icon: "gyg" }],
+      ]);
+      return [homeTypeMap.get(item).name, homeTypeMap.get(item).icon];
+    },
+
+    getHomeTypes(id) {
+      this.$http.get(`/actual/base/organizational/structure/getResidentCategoryByHouseId?houseId=${"1495582904602800129"}`).then((res) => {
+        const { code, data } = res.data;
+        if (code === 0) {
+          const newItem = data[0];
+          const itemNumOne = Object.keys(newItem).filter((key) => newItem[key] === 1);
+          this.homeTypeArr = itemNumOne;
+        }
+      });
+    },
+
+    gotoPersonnel() {
+      this.$router.push("/organizational/orgPersonnel");
+    },
   },
 };
 </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;
+    cursor: pointer;
     position: relative;
     color: #fff;
     display: inline-block;
     width: 168px;
     height: 164px;
-    &::after {
-      position: absolute;
-      content: "";
-      display: block;
-      top: -7px;
-      left: -16px;
-      width: 168px;
-      height: 164px;
-      background-image: url(~@/assets/images/home/firstLevel.png);
-      background-size: 100%;
-    }
+    padding-top: 10px;
+    text-align: center;
+    background-image: url(~@/assets/images/home/firstLevel.png);
+    background-size: 100%;
+    // &::after {
+    //   position: absolute;
+    //   content: "";
+    //   display: block;
+    //   top: -7px;
+    //   left: -16px;
+    //   width: 168px;
+    //   height: 164px;
+    //   background-image: url(~@/assets/images/home/firstLevel.png);
+    //   background-size: 100%;
+    // }
   }
 }
 .auto-judge {
   .wgdzb {
-    font-size: 14px;
-    position: relative;
-    color: #fff;
-    display: inline-block;
+    @include spanLevel;
     width: 132px;
     height: 96px;
-    &::after {
-      position: absolute;
-      content: "";
-      display: block;
-      top: -7px;
-      left: 0;
-      width: 132px;
-      height: 96px;
-      background-image: url(~@/assets/images/home/zbbg.png);
-      background-size: 100%;
-    }
+    text-align: center;
+    padding-top: 5px;
+    background-image: url(~@/assets/images/home/zbbg.png);
+    background-size: 100%;
+    // &::after {
+    //   position: absolute;
+    //   content: "";
+    //   display: block;
+    //   top: -7px;
+    //   left: 0;
+    //   width: 132px;
+    //   height: 96px;
+    //   background-image: url(~@/assets/images/home/zbbg.png);
+    //   background-size: 100%;
+    // }
   }
   .lydxz {
-    font-size: 14px;
-    position: relative;
-    color: #fff;
-    display: inline-block;
-    width: 132px;
+    @include spanLevel;
+    @include normalLevel;
+    width: 216px;
     height: 50px;
-    &::after {
-      position: absolute;
-      content: "";
-      display: block;
-      top: -2px;
-      left: -40px;
-      width: 216px;
-      height: 50px;
-      background-image: url(~@/assets/images/home/lydxzTree.png);
-      background-size: 100%;
-    }
+    padding-top: 5px;
+    background-image: url(~@/assets/images/home/lydxzTree.png);
+    background-size: 100%;
+    // &::after {
+    //   position: absolute;
+    //   content: "";
+    //   display: block;
+    //   top: -2px;
+    //   left: -40px;
+    //   width: 216px;
+    //   height: 50px;
+    //   background-image: url(~@/assets/images/home/lydxzTree.png);
+    //   background-size: 100%;
+    // }
   }
   .dyzxh {
-    font-size: 14px;
-    position: relative;
-    color: #fff;
-    display: inline-block;
+    @include spanLevel;
+    @include normalLevel;
     height: 118px;
-    width: 5px;
-    &::after {
-      position: absolute;
-      content: "";
-      display: block;
-      top: -19px;
-      left: -8px;
-      width: 30px;
-      height: 118px;
-      background-image: url(~@/assets/images/home/dyzxhTree.png);
-      background-size: 100%;
-    }
+    width: 30px;
+    writing-mode: tb-rl;
+    margin-top: -12px;
+    background-image: url(~@/assets/images/home/dyzxhTree.png);
+    background-size: 100%;
+    // &::after {
+    //   position: absolute;
+    //   content: "";
+    //   display: block;
+    //   top: -19px;
+    //   left: -8px;
+    //   width: 30px;
+    //   height: 118px;
+    //   background-image: url(~@/assets/images/home/dyzxhTree.png);
+    //   background-size: 100%;
+    // }
   }
   .lxjt {
-    font-size: 14px;
-    cursor: pointer;
-    position: relative;
-    color: #fff;
-    display: inline-block;
+    @include spanLevel;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
     height: 118px;
-    img {
-      position: absolute;
-      bottom: 26px;
-      left: -2px;
-    }
-    &::after {
-      position: absolute;
-      content: "";
-      display: block;
-      top: -19px;
-      left: -8px;
-      width: 30px;
-      height: 118px;
-      background-image: url(~@/assets/images/home/dyzxhTree.png);
-      background-size: 100%;
-    }
+    width: 30px;
+    writing-mode: tb-rl;
+    margin-top: -12px;
+    background-image: url(~@/assets/images/home/dyzxhTree.png);
+    background-size: 100%;
+    // &::after {
+    //   position: absolute;
+    //   content: "";
+    //   display: block;
+    //   top: -19px;
+    //   left: -8px;
+    //   width: 30px;
+    //   height: 118px;
+    // }
   }
 }
 </style>
diff --git a/src/js/store/index.js b/src/js/store/index.js
index 8ade517b2..b873782ca 100644
--- a/src/js/store/index.js
+++ b/src/js/store/index.js
@@ -4,6 +4,7 @@ import cloneDeep from "lodash/cloneDeep";
 import user from "./modules/user";
 import app from "./modules/app";
 import tagsView from "./modules/tagsView";
+import chooseArea from "./modules/chooseArea";
 import categoryStr from "./modules/categoryStr";
 import { requestPost } from "@/js/dai/request";
 import { dateFormats } from "@/utils/index";
@@ -23,12 +24,12 @@ export default new Vuex.Store({
     sidebarMenuList: [],
     sidebarMenuActiveName: "",
     LevelOneMenuActiveName: "",
-    LevelTowMenuActiveName:"",
+    LevelTowMenuActiveName: "",
     sidebarActiveSubMenuList: [],
     // 内容, 是否需要刷新
     contentIsNeedRefresh: false,
     // 内容, 标签页(默认添加首页)
-    contentTabs: [{name:"home",title:"首页"}],
+    contentTabs: [{ name: "home", title: "首页" }],
     contentTabsActiveName: "",
 
     mainShuju: {
@@ -47,6 +48,7 @@ export default new Vuex.Store({
     app,
     tagsView,
     categoryStr,
+    chooseArea,
   },
   mutations: {
     // 重置vuex本地储存状态
@@ -70,10 +72,7 @@ export default new Vuex.Store({
     },
     setInterval({ commit, dispatch, state }) {
       interTimer = setInterval(() => {
-        const _t = dateFormats(
-          "YYYY-mm-dd HH:MM",
-          new Date(new Date().toLocaleDateString()).getTime()
-        );
+        const _t = dateFormats("YYYY-mm-dd HH:MM", new Date(new Date().toLocaleDateString()).getTime());
         const _tt = new Date(_t).getTime();
         console.log("230000---", _t);
         const t = dateFormats("YYYY-mm-dd HH:MM", new Date().getTime());
diff --git a/src/js/store/modules/chooseArea.js b/src/js/store/modules/chooseArea.js
new file mode 100644
index 000000000..471c3069b
--- /dev/null
+++ b/src/js/store/modules/chooseArea.js
@@ -0,0 +1,22 @@
+const state = {
+  chooseName: "金湖路社区",
+};
+
+const mutations = {
+  CHOOSE_NAME: (state, name) => {
+    state.chooseName = name;
+  },
+};
+
+const actions = {
+  chooseName({ commit }, name) {
+    commit("CHOOSE_NAME", name);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};
diff --git a/src/main.js b/src/main.js
index c1cbc89f0..d69976dca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -64,6 +64,7 @@ Vue.use(Element, {
 });
 
 Vue.prototype.$message = message;
+Vue.prototype.$moment = Moment;
 // 弹窗底部滚动问题 弹窗需配合v-if使用
 Vue.directive("fixed", {
   inserted() {
diff --git a/src/router/index.js b/src/router/index.js
index 9ac8ccb87..30ee021ec 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -359,14 +359,56 @@ export const dataBoardRoutes = {
       },
     },
     {
-      path: "organizational/index",
+      path: "/organizational",
       props: true,
       component: () => import("@/views/dataBoard/organizational/index"),
-      name: "dataBoard-organizational-index",
+      name: "Organizational",
       meta: {
         title: "组织架构",
         isTab: false,
       },
+      children: [
+        {
+          path: "/organizational/dangTree",
+          props: true,
+          component: () => import("@/views/dataBoard/organizational/dangTree/index"),
+          name: "DangTree",
+          meta: {
+            title: "党组织架构",
+            isTab: false,
+          },
+        },
+        {
+          path: "/organizational/jwTree",
+          props: true,
+          component: () => import("@/views/dataBoard/organizational/jwTree/index"),
+          name: "JwTree",
+          meta: {
+            title: "居委组织架构",
+            isTab: false,
+          },
+        },
+        {
+          path: "/organizational/gridTree",
+          props: true,
+          component: () => import("@/views/dataBoard/organizational/gridTree/index"),
+          name: "GridTree",
+          meta: {
+            title: "网格架构",
+            isTab: false,
+          },
+        },
+      ],
+    },
+    {
+      path: "/organizational/orgPersonnel",
+      props: true,
+      component: () => import("@/views/dataBoard/organizational/personnel/index"),
+      name: "OrgPersonnel",
+      meta: {
+        title: "居民画像",
+        isTab: false,
+      },
     },
     {
       path: "humanData/index",
diff --git a/src/views/dataBoard/organizational/dangTree/index.vue b/src/views/dataBoard/organizational/dangTree/index.vue
new file mode 100644
index 000000000..2fb677319
--- /dev/null
+++ b/src/views/dataBoard/organizational/dangTree/index.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="wrap">
+    <!--  -->
+    <div class="content" v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'">
+      <div v-for="(item, index) in levelArr" :key="item" :class="[`flowLevel-${index + 1}`]">
+        <div>{{ 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: [],
+      navList: [
+        {
+          name: "党委组织架构",
+          key: "1",
+          ifActive: true,
+        },
+        {
+          name: "居委组织架构",
+          key: "2",
+          ifActive: false,
+        },
+        {
+          name: "网格架构",
+          key: "3",
+          ifActive: false,
+        },
+      ],
+      nowVal: 100,
+
+      nodeConfig: {},
+    };
+  },
+  watch: {
+    "$store.state.chooseArea.chooseName"(n, v) {
+      console.log(n);
+    },
+  },
+  computed: {},
+  mounted() {
+    console.log(this.$store.state.chooseArea.chooseName);
+    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);
+    },
+
+    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";
+</style>
diff --git a/src/views/dataBoard/organizational/gridTree/index.vue b/src/views/dataBoard/organizational/gridTree/index.vue
new file mode 100644
index 000000000..8b73c4d67
--- /dev/null
+++ b/src/views/dataBoard/organizational/gridTree/index.vue
@@ -0,0 +1,527 @@
+<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="[`flowLevel-${index + 1}`]">
+        <div>{{ 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: "GridTree",
+  data() {
+    return {
+      loading: false,
+      levelArr: [1, 2, 3],
+      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: {
+        partyOrgName: "市北区委",
+        partyOrgLevel: 1,
+        partyOrgPid: "0",
+        principalName: "栾秀杰",
+        laneLevel: 1,
+        children: [
+          {
+            partyOrgName: "市北区委",
+            partyOrgLevel: 2,
+            partyOrgPid: "0",
+            principalName: "栾秀杰",
+            laneLevel: 2,
+            children: [
+              {
+                partyOrgName: "市北区委",
+                partyOrgLevel: 3,
+                partyOrgPid: "0",
+                principalName: "栾秀杰",
+                laneLevel: 3,
+                // children: [
+                //   {
+                //     partyOrgName: "市北区委",
+                //     partyOrgLevel: 4,
+                //     partyOrgPid: "0",
+                //     principalName: "栾秀杰",
+                //     laneLevel: 4,
+                //     children: [
+                //       {
+                //         partyOrgName: "市北区委",
+                //         partyOrgLevel: 5,
+                //         partyOrgPid: "0",
+                //         principalName: "栾秀杰",
+                //         laneLevel: 5,
+                //         children: [
+                //           {
+                //             partyOrgName: "市北区委",
+                //             partyOrgLevel: 6,
+                //             partyOrgPid: "0",
+                //             principalName: "栾秀杰",
+                //             laneLevel: 6,
+                //             children: [
+                //               {
+                //                 partyOrgName: "市北区委",
+                //                 partyOrgLevel: 7,
+                //                 partyOrgPid: "0",
+                //                 principalName: "栾秀杰",
+                //                 laneLevel: 7,
+                //                 // children: [
+                //                 //   {
+                //                 //     partyOrgName: "市北区委",
+                //                 //     partyOrgLevel: 8,
+                //                 //     partyOrgPid: "0",
+                //                 //     principalName: "栾秀杰",
+                //                 //     laneLevel: 8,
+                //                 //     children: [
+                //                 //       {
+                //                 //         partyOrgName: "市北区委",
+                //                 //         partyOrgLevel: 9,
+                //                 //         partyOrgPid: "0",
+                //                 //         principalName: "栾秀杰",
+                //                 //         laneLevel: 9,
+                //                 //         children: [
+                //                 //           {
+                //                 //             partyOrgName: "市北区委",
+                //                 //             partyOrgLevel: 10,
+                //                 //             partyOrgPid: "0",
+                //                 //             principalName: "栾秀杰",
+                //                 //             laneLevel: 10,
+                //                 //           },
+                //                 //         ],
+                //                 //       },
+                //                 //     ],
+                //                 //   },
+                //                 // ],
+                //               },
+                //             ],
+                //           },
+                //         ],
+                //       },
+                //     ],
+                //   },
+                // ],
+              },
+            ],
+          },
+        ],
+
+        // 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);
+    },
+
+    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";
+</style>
diff --git a/src/views/dataBoard/organizational/index.vue b/src/views/dataBoard/organizational/index.vue
index 3413b09dd..036874b40 100644
--- a/src/views/dataBoard/organizational/index.vue
+++ b/src/views/dataBoard/organizational/index.vue
@@ -2,58 +2,48 @@
   <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="[$route.path == item.path ? '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 + ');'">
-      <div class="flowLevel">
-        <div>社区党委</div>
-      </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">
-            <nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
+    <!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" -->
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
+import { Loading } from "element-ui";
+import { relativeTimeThreshold } from "moment";
+
 // import Tree from "./components/tree.vue";
 export default {
-  name: "organizational",
+  name: "Organizational",
   // components: {
   //   Tree,
   // },
   data() {
     return {
+      loading: false,
+      levelArr: [1, 2, 3, 4],
       navList: [
         {
           name: "党委组织架构",
           key: "1",
-          ifActive: true,
+          path: "/organizational/dangTree",
         },
         {
           name: "居委组织架构",
           key: "2",
-          ifActive: false,
+          path: "/organizational/jwTree",
         },
         {
           name: "网格架构",
           key: "3",
-          ifActive: false,
+          path: "/organizational/gridTree",
         },
       ],
       cardList: [
@@ -122,268 +112,357 @@ export default {
         },
       ],
       nowVal: 100,
+
       nodeConfig: {
-        title: "社区党委",
-        name: "南昌路社区党委(党委书记：解书记)",
-        key: "1",
+        partyOrgName: "市北区委",
+        partyOrgLevel: 1,
+        partyOrgPid: "0",
+        principalName: "栾秀杰",
+        laneLevel: 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,
+            partyOrgName: "市北区委",
+            partyOrgLevel: 2,
+            partyOrgPid: "0",
+            principalName: "栾秀杰",
+            laneLevel: 2,
             children: [
               {
-                title: "楼院党小组",
-                type: 3,
-                name: "第一楼院党小组 （组长：韩文国）",
+                partyOrgName: "市北区委",
+                partyOrgLevel: 3,
+                partyOrgPid: "0",
+                principalName: "栾秀杰",
+                laneLevel: 3,
                 children: [
                   {
-                    title: "党员中心户",
-                    type: 4,
-                    name: "周游",
-                  },
-                  {
-                    title: "党员中心户",
-                    type: 4,
-                    name: "王阳明",
+                    partyOrgName: "市北区委",
+                    partyOrgLevel: 4,
+                    partyOrgPid: "0",
+                    principalName: "栾秀杰",
+                    laneLevel: 4,
                     children: [
                       {
-                        title: "联系家庭",
-                        type: 5,
-                        name: "王宇",
-                      },
-                      {
-                        title: "联系家庭",
-                        type: 5,
-                        name: "刘冰冰",
-                      },
-                      {
-                        title: "联系家庭",
-                        type: 5,
-                        name: "杨飞宇",
-                      },
-                      {
-                        title: "联系家庭",
-                        type: 5,
-                        name: "齐天",
+                        partyOrgName: "市北区委",
+                        partyOrgLevel: 5,
+                        partyOrgPid: "0",
+                        principalName: "栾秀杰",
+                        laneLevel: 5,
+                        children: [
+                          {
+                            partyOrgName: "市北区委",
+                            partyOrgLevel: 6,
+                            partyOrgPid: "0",
+                            principalName: "栾秀杰",
+                            laneLevel: 6,
+                            children: [
+                              {
+                                partyOrgName: "市北区委",
+                                partyOrgLevel: 7,
+                                partyOrgPid: "0",
+                                principalName: "栾秀杰",
+                                laneLevel: 7,
+                                children: [
+                                  {
+                                    partyOrgName: "市北区委",
+                                    partyOrgLevel: 8,
+                                    partyOrgPid: "0",
+                                    principalName: "栾秀杰",
+                                    laneLevel: 8,
+                                    children: [
+                                      {
+                                        partyOrgName: "市北区委",
+                                        partyOrgLevel: 9,
+                                        partyOrgPid: "0",
+                                        principalName: "栾秀杰",
+                                        laneLevel: 9,
+                                        children: [
+                                          {
+                                            partyOrgName: "市北区委",
+                                            partyOrgLevel: 10,
+                                            partyOrgPid: "0",
+                                            principalName: "栾秀杰",
+                                            laneLevel: 10,
+                                          },
+                                        ],
+                                      },
+                                    ],
+                                  },
+                                ],
+                              },
+                            ],
+                          },
+                        ],
                       },
                     ],
                   },
-                  {
-                    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: "谢苗苗",
-                  },
                 ],
               },
             ],
           },
         ],
+
+        // 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() {},
   methods: {
     chooseNav(item) {
       this.navList.forEach((d) => {
@@ -393,16 +472,7 @@ export default {
           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;
-      }
+      this.$router.push(item.path);
     },
   },
 };
@@ -422,22 +492,6 @@ export default {
   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 {
@@ -456,104 +510,5 @@ export default {
       }
     }
   }
-  .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;
-      // margin-bottom: 45px;
-      // background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
-    }
-    .flowLevel {
-      @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 {
-      @include flowLevwlCommon;
-      top: 184px;
-      height: 119px;
-      line-height: 119px;
-      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 {
-      @include flowLevwlCommon;
-      top: 328px;
-      height: 85px;
-      line-height: 85px;
-      div {
-        padding-left: 80px;
-        &::after {
-          @include flowLevelAfter;
-          top: 10px;
-          left: 15px;
-          width: 180px;
-          height: 60px;
-          background-image: url(~@/assets/images/home/lydxz.png);
-        }
-      }
-    }
-    .flowLevel-4 {
-      @include flowLevwlCommon;
-      top: 429px;
-      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-5 {
-      @include flowLevwlCommon;
-      top: 598px;
-      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>
diff --git a/src/views/dataBoard/organizational/jwTree/index.vue b/src/views/dataBoard/organizational/jwTree/index.vue
new file mode 100644
index 000000000..b44d7267a
--- /dev/null
+++ b/src/views/dataBoard/organizational/jwTree/index.vue
@@ -0,0 +1,527 @@
+<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="[`flowLevel-${index + 1}`]">
+        <div>{{ 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: "JwTree",
+  data() {
+    return {
+      loading: false,
+      levelArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      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: {
+        partyOrgName: "市北区委",
+        partyOrgLevel: 1,
+        partyOrgPid: "0",
+        principalName: "栾秀杰",
+        laneLevel: 1,
+        children: [
+          {
+            partyOrgName: "市北区委",
+            partyOrgLevel: 2,
+            partyOrgPid: "0",
+            principalName: "栾秀杰",
+            laneLevel: 2,
+            children: [
+              {
+                partyOrgName: "市北区委",
+                partyOrgLevel: 3,
+                partyOrgPid: "0",
+                principalName: "栾秀杰",
+                laneLevel: 3,
+                children: [
+                  {
+                    partyOrgName: "市北区委",
+                    partyOrgLevel: 4,
+                    partyOrgPid: "0",
+                    principalName: "栾秀杰",
+                    laneLevel: 4,
+                    children: [
+                      // {
+                      //   partyOrgName: "市北区委",
+                      //   partyOrgLevel: 5,
+                      //   partyOrgPid: "0",
+                      //   principalName: "栾秀杰",
+                      //   laneLevel: 5,
+                      //   children: [
+                      //     {
+                      //       partyOrgName: "市北区委",
+                      //       partyOrgLevel: 6,
+                      //       partyOrgPid: "0",
+                      //       principalName: "栾秀杰",
+                      //       laneLevel: 6,
+                      //       children: [
+                      //         {
+                      //           partyOrgName: "市北区委",
+                      //           partyOrgLevel: 7,
+                      //           partyOrgPid: "0",
+                      //           principalName: "栾秀杰",
+                      //           laneLevel: 7,
+                      //           children: [
+                      //             {
+                      //               partyOrgName: "市北区委",
+                      //               partyOrgLevel: 8,
+                      //               partyOrgPid: "0",
+                      //               principalName: "栾秀杰",
+                      //               laneLevel: 8,
+                      //               children: [
+                      //                 {
+                      //                   partyOrgName: "市北区委",
+                      //                   partyOrgLevel: 9,
+                      //                   partyOrgPid: "0",
+                      //                   principalName: "栾秀杰",
+                      //                   laneLevel: 9,
+                      //                   children: [
+                      //                     {
+                      //                       partyOrgName: "市北区委",
+                      //                       partyOrgLevel: 10,
+                      //                       partyOrgPid: "0",
+                      //                       principalName: "栾秀杰",
+                      //                       laneLevel: 10,
+                      //                     },
+                      //                   ],
+                      //                 },
+                      //               ],
+                      //             },
+                      //           ],
+                      //         },
+                      //       ],
+                      //     },
+                      //   ],
+                      // },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+
+        // 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);
+    },
+
+    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";
+</style>
diff --git a/src/views/dataBoard/organizational/personnel/components/Breadcrumb/index.vue b/src/views/dataBoard/organizational/personnel/components/Breadcrumb/index.vue
new file mode 100644
index 000000000..426e82bc2
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/components/Breadcrumb/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div class="breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item v-for="(item,index) in list" :to="item.path" :key="index">{{ item.name }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Breadcrumb",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.breadcrumb {
+  background: url("@/assets/images/manyidu/breadcrumb_bg.png") no-repeat left top;
+  height: 50px;
+  color: #fff;
+  padding-left: 20px;
+  display: flex;
+  align-items: center;
+
+  /deep/ .el-breadcrumb__inner {
+    color: #fff!important;
+
+    &.is-link {
+      color: #A3B9DA!important;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/organizational/personnel/components/Pagination/index.vue b/src/views/dataBoard/organizational/personnel/components/Pagination/index.vue
new file mode 100644
index 000000000..9722ee858
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/components/Pagination/index.vue
@@ -0,0 +1,138 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+        :background="background"
+        :current-page.sync="currentPage"
+        :page-size.sync="pageSize"
+        :layout="layout"
+        :page-sizes="pageSizes"
+        :pager-count="pagerCount"
+        :total="total"
+        v-bind="$attrs"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'total, prev, pager, next, jumper, sizes'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.pagination-container {
+  padding: 32px 16px;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+
+  /deep/ .el-pagination__total {
+    position: absolute;
+    left: 16px;
+    top: 32px;
+    color: #A3B9DA;
+  }
+  /deep/ .el-pagination__jump {
+    color: #A3B9DA;
+  }
+  /deep/ .el-pagination.is-background .btn-next,
+  /deep/ .el-pagination.is-background .btn-prev,
+  /deep/ .el-pagination.is-background .el-pager li {
+    background: rgba(0,23,66,0.3);
+    border: 1px solid #126AC5;
+    border-radius: 2px;
+    color: #A3B9DA;
+  }
+  /deep/ .el-input__inner {
+    background: rgba(0,23,66,0.3);
+    border: 1px solid #126AC5;
+    border-radius: 2px;
+    color: #A3B9DA;
+  }
+  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background: #1A95FF;
+    border-radius: 2px;
+    color: #FFFFFF!important;
+  }
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>
diff --git a/src/views/dataBoard/organizational/personnel/components/Tabs/index.vue b/src/views/dataBoard/organizational/personnel/components/Tabs/index.vue
new file mode 100644
index 000000000..70597d2a8
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/components/Tabs/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="tabs">
+    <div class="tab" :class="value2 === item.value?'cur':''" v-for="(item,index) in list" @click="tabClick(index)" :key="index">
+      {{item.label}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Tabs",
+  props: {
+    list:{
+      type: Array,
+      default: () => []
+    },
+    value:{
+      type: [String,Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      value2: this.value,
+    }
+  },
+  mounted() {
+    this.value2 = this.value
+  },
+  methods: {
+    tabClick(index) {
+      this.value2 = this.list[index].value
+      this.$emit('changeVal',this.value)
+      this.$emit('changeLabel',this.list[index].label)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.tabs {
+  display: flex;
+  .tab {
+    cursor: pointer;
+    padding: 10px 11px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #96B1CE;
+    min-width: 120px;
+    background: url("@/assets/images/manyidu/tab.png") repeat-x top left;
+    margin-right: 4px;
+    text-align: center;
+    &.cur {
+      color: #FFFFFF;
+      background: url("@/assets/images/manyidu/tab_cur.png") repeat-x top left;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/organizational/personnel/components/Title/index.vue b/src/views/dataBoard/organizational/personnel/components/Title/index.vue
new file mode 100644
index 000000000..6faadb2bc
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/components/Title/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="title" :class="noBg?'no-bg':''">
+    <span class="text">
+      <span class="txt">{{ text }}</span>
+      <span class="text-shadow">{{ text }}</span>
+    </span>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Title",
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    noBg: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.title {
+  background: url(../../../../../assets/images/shuju/overview/title-bg.png)
+    no-repeat 0 0 fixed;
+  padding: 8px 16px 8px 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .text {
+    position: relative;
+    font-size: 22px;
+    font-family: HYShuYuanHeiJ;
+    font-weight: 400;
+
+    .txt {
+      color: #1f79ff;
+      background: linear-gradient(0deg, #2dc1ff 0%, #ffffff 58.5205078125%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      position: relative;
+      z-index: 2;
+    }
+
+    .text-shadow {
+      top: 4px;
+      left: 3px;
+      position: absolute;
+      color: #020f21;
+      white-space: nowrap;
+    }
+  }
+}
+.no-bg {
+  background: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/organizational/personnel/index.vue b/src/views/dataBoard/organizational/personnel/index.vue
new file mode 100644
index 000000000..faba037cd
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <div class="breadcrumb">
+      <Breadcrumb :list="breadcrumbList" />
+    </div>
+    <el-row>
+      <el-col :span="10">
+        <div class="sub-title">事项详情</div>
+        <MatterDetails />
+
+        <div class="sub-title">家庭关系</div>
+        <Family />
+      </el-col>
+      <el-col :span="13" :offset="1">
+        <div class="sub-title">居民各项业务记录</div>
+        <BusinessRecords />
+        <el-row>
+          <el-col :span="12">
+            <div class="sub-title">享受服务次数统计</div>
+            <EnjoyService />
+          </el-col>
+          <el-col :span="11" :offset="1">
+            <div class="sub-title">积分记录</div>
+            <PointsRecord />
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from "./components/Breadcrumb/index.vue";
+import MatterDetails from "./modules/MatterDetails";
+import Family from "./modules/Family";
+import BusinessRecords from "./modules/BusinessRecords";
+import EnjoyService from "./modules/EnjoyService";
+import PointsRecord from "./modules/PointsRecord";
+
+export default {
+  name: "OrgPersonnel",
+  components: {
+    Breadcrumb,
+    MatterDetails,
+    Family,
+    BusinessRecords,
+    EnjoyService,
+    PointsRecord,
+  },
+  data() {
+    return {
+      breadcrumbList: [
+        {
+          path: "/organizational/dangTree",
+          name: "党组织架构",
+        },
+        {
+          path: "",
+          name: "居民画像",
+        },
+      ],
+    };
+  },
+  mounted() {
+    console.log(this.breadcrumbList, this.$route);
+
+    this.$set(this.breadcrumbList[2], "name", this.$route.query.name);
+    this.breadcrumbList[2].name = this.$route.query.name;
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.sub-title {
+  background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center;
+  font-size: 18px;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 22px;
+  padding-left: 26px;
+  margin-bottom: 20px;
+}
+.breadcrumb {
+  margin-bottom: 25px;
+}
+</style>
diff --git a/src/views/dataBoard/organizational/personnel/modules/BusinessRecords.vue b/src/views/dataBoard/organizational/personnel/modules/BusinessRecords.vue
new file mode 100644
index 000000000..69441dc63
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/modules/BusinessRecords.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="business-records">
+    <Tabs v-model="type" :list="typeList" @changeVal="typeChange" />
+    <div class="table">
+      <el-table :data="list">
+        <el-table-column label="序号" type="index" width="80" />
+        <el-table-column label="评价周期" prop="key" width="" />
+        <el-table-column label="姓名" prop="key" width="" />
+        <el-table-column label="电话" prop="key" width="" />
+        <el-table-column label="不满意类型" prop="key" width="" />
+        <el-table-column label="不满意原因" prop="key" width="" />
+        <el-table-column label="操作" width="90" align="center">
+          <template slot-scope="data">
+            <el-button type="text" @click="handleView">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
+
+export default {
+  name: "BusinessRecords",
+  components: { Tabs },
+  data() {
+    return {
+      total: 10,
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10,
+      },
+      type: 1,
+      typeList: [
+        {
+          label: " 满意度",
+          value: 1,
+        },
+        {
+          label: "居民需求",
+          value: 2,
+        },
+        {
+          label: "上报事件",
+          value: 3,
+        },
+        // {
+        //   label: '事件',
+        //   value: 4
+        // }, {
+        //   label: '需求',
+        //   value: 5
+        // }, {
+        //   label: '服务',
+        //   value: 6
+        // }, {
+        //   label: '回访记录',
+        //   value: 7
+        // }
+      ],
+      list: [{}, {}, {}, {}, {}],
+    };
+  },
+  methods: {
+    typeChange() {},
+    getList() {},
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td,
+  /deep/ .el-table th,
+  /deep/ .el-table tr {
+    padding: 14px !important;
+    border: none !important;
+    min-height: 52px;
+  }
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+    background: rgba(14, 56, 115, 0.4);
+  }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #a3b9da !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none !important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none !important;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/organizational/personnel/modules/EnjoyService.vue b/src/views/dataBoard/organizational/personnel/modules/EnjoyService.vue
new file mode 100644
index 000000000..0e8ecee58
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/modules/EnjoyService.vue
@@ -0,0 +1,188 @@
+<template>
+  <div className="event-statistics">
+    <div id="enjoyServiceChart" style="height: 360px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "EnjoyService",
+  data() {
+    return {}
+  },
+  mounted() {
+    this.initCharts()
+  },
+  methods: {
+    initCharts() {
+      let div = document.getElementById('enjoyServiceChart');
+      this.myChart = echarts.init(div);
+
+      let xData = ['岗位找人', '技能找人', '温暖找人', '服务找人'];
+      let tq = [300, 90, 48, 39];
+      const max = Math.max(...tq)
+
+      let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
+      var option = {
+        title: {
+          show: false,
+          text: '',
+          x: 'center',
+          top: '15px',
+          textStyle: {
+            color: '#333333',
+            fontWeight: 500,
+            fontSize: 18,
+          },
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(13, 64, 71, 0.50)',
+          borderColor: 'rgba(143, 225, 252, 0.60)',
+          padding: 8,
+          textStyle: {
+            color: '#fff',
+          },
+          formatter: function (params) {
+            console.log(params)
+            var res = ''
+            for (var i = 0; i < params.length; i++) {
+              if (params[i].seriesName != "") {
+                res += '<p>' + params[0].name + ':' + params[i].data + '</p>'
+              }
+            }
+            return res;
+          },
+        },
+        grid: {
+          top: '0',
+          left: '1%',
+          right: '2%',
+          bottom: '0',
+          containLabel: true
+        },
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#323c41'
+              }
+            },
+            axisLabel: {
+              align: 'right',
+              textStyle: {
+                fontSize: 12,
+                color: '#A3B9DA'
+              }
+            },
+            boundaryGap: true,
+            data: xData,
+          }, {
+            type: 'category',
+            data: xData,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {show: false},
+            axisLabel: {
+              show: false,
+            },
+            boundaryGap: true,
+
+          }
+        ],
+
+        xAxis: [
+          {
+            type: 'value',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(4,187,255,0.18)',
+                type: 'dashed'
+              },
+            },
+            nameTextStyle: {
+              color: '#A3B9DA',
+              textStyle: {
+                fontSize: 12
+              },
+              align: 'center'
+            },
+            axisLabel: {
+              show: true,
+              color: '#A3B9DA',
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: 16,
+            itemStyle: {
+              // lenged文本
+              opacity: 1, // 这个是 透明度
+              color: new echarts.graphic.LinearGradient(
+                  1,
+                  0,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: '#6EDDFE' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#0B1F57' // 100% 处的颜色
+                    }
+                  ],
+                  false
+              )
+            },
+            data: tq, //data.values
+          },
+          {
+            name: '',
+            type: 'bar',
+
+            barWidth: 66,
+            barGap: '-60%',
+            data: barArray,
+            itemStyle: {
+              normal: {
+                color: 'rgba(89,130,194,0.12)'
+              }
+            },
+            zlevel: -1,
+            yAxisIndex: 1,
+          }
+        ],
+      };
+      this.myChart.setOption(option);
+      window.addEventListener("resize", () => this.myChart.resize());
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.event-statistics {
+  padding: 16px 16px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/organizational/personnel/modules/Family.vue b/src/views/dataBoard/organizational/personnel/modules/Family.vue
new file mode 100644
index 000000000..52af91e1a
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/modules/Family.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="family">
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+      <div>居民分类：老年人</div>
+    </div>
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+      <div>居民分类：老年人</div>
+    </div>
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+    </div>
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Family"
+}
+</script>
+
+<style scoped lang="scss">
+.family {
+  width: 464px;
+  height: 340px;
+  background: url('@/assets/images/manyidu/gx_bg.png') no-repeat center;
+  position: relative;
+  margin: 40px auto;
+}
+.tag {
+  font-size: 14px;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 22px;
+  padding: 18px 24px;
+  box-sizing: border-box;
+  position: absolute;
+  &:nth-of-type(1),
+  &:nth-of-type(2) {
+    background: url("@/assets/images/manyidu/gx_big.png") no-repeat center;
+    width: 180px;
+    height: 100px;
+  }
+  &:nth-of-type(3),
+  &:nth-of-type(4) {
+    background: url("@/assets/images/manyidu/gx_small.png") no-repeat center;
+    width: 180px;
+    height: 70px;
+    padding: 15px 24px;
+  }
+  &:nth-of-type(1) {
+    left: -98px;
+    top: 34px;
+  }
+  &:nth-of-type(2) {
+    right: -68px;
+    top: 34px;
+  }
+  &:nth-of-type(3) {
+    left: -91px;
+    bottom: 41px;
+  }
+  &:nth-of-type(4) {
+    right: -44px;
+    bottom: 41px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/organizational/personnel/modules/MatterDetails.vue b/src/views/dataBoard/organizational/personnel/modules/MatterDetails.vue
new file mode 100644
index 000000000..b965bc1e4
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/modules/MatterDetails.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="matter-details">
+    <div class="user-img">
+      <img src="@/assets/images/manyidu/dn_bg1.png" alt="">
+    </div>
+    <div class="tags">
+      <div class="tag red">满意度风险人员</div>
+      <div class="tag small">与子女同住</div>
+      <div class="tag">第三网格</div>
+      <div class="tag small">入户一致</div>
+      <div class="tag">13343999999</div>
+      <div class="tag">四季景园1号楼1单元101</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MatterDetails"
+}
+</script>
+
+<style scoped lang="scss">
+.matter-details {
+  width: 607px;
+  height: 372px;
+  background: url("@/assets/images/manyidu/dn_bg2.png") no-repeat center bottom;
+  position: relative;
+  margin: 12px auto 60px;
+}
+.user-img {
+  position: absolute;
+  left: calc(50% - 87px);
+  top: calc(50% - 37px);
+}
+.tag {
+  position: absolute;
+  background: url("@/assets/images/manyidu/dn_big.png") center no-repeat;
+  width: 108px;
+  height: 107px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 16px;
+  box-sizing: border-box;
+  padding: 24px;
+  text-align: center;
+  word-break: break-all;
+  &.small {
+    width: 89px;
+    height: 89px;
+    background: url("@/assets/images/manyidu/dn_small.png") center no-repeat;
+    padding: 16px;
+  }
+  &.red {
+    background: url("@/assets/images/manyidu/dn_red.png") center no-repeat;
+    color: #FE0000;
+  }
+  &:nth-of-type(1) {
+    left: 0;
+    bottom: 15px;
+  }
+
+  &:nth-of-type(2) {
+    left: 42px;
+    bottom: 185px;
+  }
+
+  &:nth-of-type(3) {
+    left: 194px;
+    bottom: 245px;
+  }
+
+  &:nth-of-type(4) {
+    left: 384px;
+    bottom: 240px;
+  }
+
+  &:nth-of-type(5) {
+    left: 499px;
+    bottom: 157px;
+  }
+
+  &:nth-of-type(6) {
+    left: 453px;
+    bottom: 10px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/organizational/personnel/modules/PointsRecord.vue b/src/views/dataBoard/organizational/personnel/modules/PointsRecord.vue
new file mode 100644
index 000000000..75f41e47a
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/modules/PointsRecord.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="enjoy-service">
+      <div class="enjoy-service-item" v-for="(item,index) in 5">
+        <div class="num">+10</div>
+        <div class="info">
+          <div class="title">便民服务-配餐服务</div>
+          <div class="time">2023-07-15 15:30:30</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PointsRecord"
+}
+</script>
+
+<style scoped lang="scss">
+
+.enjoy-service {
+  padding-left: 26px;
+}
+.enjoy-service-item {
+  color: #FFFFFF;
+  display: flex;
+  padding: 14px 16px 14px;
+  margin-bottom: 8px;
+  background: #07266B;
+  .num {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 22px;
+  }
+  .info {
+    font-size: 14px;
+    margin-left: 40px;
+    .title {
+      font-weight: 500;
+      margin-bottom: 10px;
+    }
+    .time {
+      font-weight: 400;
+      color: #A3B9DA;
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoardMain/main-content.vue b/src/views/dataBoardMain/main-content.vue
index bed215ca7..9724dbc5e 100644
--- a/src/views/dataBoardMain/main-content.vue
+++ b/src/views/dataBoardMain/main-content.vue
@@ -1,118 +1,107 @@
 <template>
-	<main class="g-main">
-		<!-- tab展示内容 -->
-		<template>
-			<template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)">
-				<iframe :src="
-            $router.currentRoute.meta.iframeURL +
-            '?token=' +
-            token +
-            '&customerId=' +
-            customerId
-          " ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes"
-					:style="{ height: $store.state.fixed1920.height - 100 + 'px' }" />
-			</template>
-			<keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)">
-				<router-view @changeCustomerName="changeCustomerName" />
-			</keep-alive>
-		</template>
-	</main>
+  <main class="g-main">
+    <!-- tab展示内容 -->
+    <template>
+      <template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)">
+        <iframe :src="$router.currentRoute.meta.iframeURL + '?token=' + token + '&customerId=' + customerId" ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes" :style="{ height: $store.state.fixed1920.height - 100 + 'px' }" />
+      </template>
+      <keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)">
+        <router-view ref="reloadPage" @changeCustomerName="changeCustomerName" />
+      </keep-alive>
+    </template>
+  </main>
 </template>
 <script>
-	import {
-		isURL
-	} from "@/utils/validate";
-	import Cookie from "js-cookie";
-	export default {
-		data() {
-			return {
-				iframeUrl: "",
-				token: "",
-				customerId: "",
-			};
-		},
-		watch: {
-			// "$router.currentRoute.name": function () {
-			//   console.log($router.currentRoute);
-			// },
-		},
-		created() {
-			this.token = localStorage.getItem("token");
-			this.customerId = localStorage.getItem("customerId");
-		},
-		methods: {
-			changeCustomerName(customerName) {
-				this.$emit("changeCustomerName", customerName);
-			},
-			// tabs, 是否通过iframe展示
-			tabIsIframe(url) {
-				// this.appendIframe(url)
-				// this.iframeUrl =
-				//   url +
-				//   "?token=" +
-				//   localStorage.getItem("token") +
-				//   "&customerId=" +
-				//   localStorage.getItem("customerId");
-				// return /^http[s]?:\/\/.*/.test(url);
-				return isURL(url);
-			},
-			// tabs, 选中tab
-			tabSelectedHandle(tab) {
-				tab = this.$store.state.contentTabs.filter(
-					(item) => item.name === tab.name)[0];
-				if (tab) {
-					this.$router.push({
-						name: tab.name,
-						params: {
-							...tab.params
-						},
-						query: {
-							...tab.query
-						},
-					});
-				}
-			},
-			// tabs, 删除tab
-			tabRemoveHandle(tabName) {
-				if (tabName === "home") {
-					return false;
-				}
-				this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-					(item) => item.name !== tabName);
-				if (this.$store.state.contentTabs.length <= 0) {
-					this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = "home";
-					return false;
-				}
-				// 当前选中tab被删除
-				if (tabName === this.$store.state.contentTabsActiveName) {
-					let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1];
-					this.$router.push({
-						name: tab.name,
-						params: {
-							...tab.params
-						},
-						query: {
-							...tab.query
-						},
-					});
-				}
-			},
-			// tabs, 关闭其它
-			tabsCloseOtherHandle() {
-				this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-					(item) => {
-						return (item.name === "home" || item.name === this.$store.state.contentTabsActiveName);
-					});
-			},
-			// tabs, 关闭全部
-			tabsCloseAllHandle() {
-				this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-					(item) => item.name === "home");
-				this.$router.push({
-					name: "home"
-				});
-			},
-		},
-	};
+import { isURL } from "@/utils/validate";
+import Cookie from "js-cookie";
+export default {
+  props: ["name"],
+  data() {
+    return {
+      iframeUrl: "",
+      token: "",
+      customerId: "",
+    };
+  },
+  watch: {
+    // "$router.currentRoute.name": function () {
+    //   console.log($router.currentRoute);
+    // },
+  },
+  created() {
+    // console.log("name", this.name);
+    this.token = localStorage.getItem("token");
+    this.customerId = localStorage.getItem("customerId");
+  },
+  methods: {
+    changeCustomerName(customerName) {
+      this.$emit("changeCustomerName", customerName);
+    },
+    // tabs, 是否通过iframe展示
+    tabIsIframe(url) {
+      // this.appendIframe(url)
+      // this.iframeUrl =
+      //   url +
+      //   "?token=" +
+      //   localStorage.getItem("token") +
+      //   "&customerId=" +
+      //   localStorage.getItem("customerId");
+      // return /^http[s]?:\/\/.*/.test(url);
+      return isURL(url);
+    },
+    // tabs, 选中tab
+    tabSelectedHandle(tab) {
+      tab = this.$store.state.contentTabs.filter((item) => item.name === tab.name)[0];
+      if (tab) {
+        this.$router.push({
+          name: tab.name,
+          params: {
+            ...tab.params,
+          },
+          query: {
+            ...tab.query,
+          },
+        });
+      }
+    },
+    // tabs, 删除tab
+    tabRemoveHandle(tabName) {
+      if (tabName === "home") {
+        return false;
+      }
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter((item) => item.name !== tabName);
+      if (this.$store.state.contentTabs.length <= 0) {
+        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = "home";
+        return false;
+      }
+      // 当前选中tab被删除
+      if (tabName === this.$store.state.contentTabsActiveName) {
+        let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1];
+        this.$router.push({
+          name: tab.name,
+          params: {
+            ...tab.params,
+          },
+          query: {
+            ...tab.query,
+          },
+        });
+      }
+    },
+    // tabs, 关闭其它
+    tabsCloseOtherHandle() {
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter((item) => {
+        return item.name === "home" || item.name === this.$store.state.contentTabsActiveName;
+      });
+    },
+    // tabs, 关闭全部
+    tabsCloseAllHandle() {
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter((item) => item.name === "home");
+      this.$router.push({
+        name: "home",
+      });
+    },
+  },
+};
 </script>
 <style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style>
diff --git a/src/views/dataBoardMain/main-navbar.vue b/src/views/dataBoardMain/main-navbar.vue
index 27acda906..10463e085 100644
--- a/src/views/dataBoardMain/main-navbar.vue
+++ b/src/views/dataBoardMain/main-navbar.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="m-topnav">
-    <div class="back">
+    <div class="back" style="cursor: pointer" @click="goBack()">
       <img src="~@/assets/images/shuju/main/back.png" alt="/" />
     </div>
     <div class="title">{{ customerName }}数据智能分析平台</div>
+    <div class="selectArea">
+      <el-select @change="setSelectName" v-model="value" popper-class="selectPopClass">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+      </el-select>
+    </div>
     <!-- <div class="btn-back" @click="toPage('/')">
 			<img class="z-default" src="~@/assets/images/shuju/main/back.png" />
 			<img class="z-on" src="~@/assets/images/shuju/main/back-on.png" />
@@ -24,7 +29,7 @@
       <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/overview/index' }" @click="toPage('/dataBoard/overview/index')">
         <span>概览</span>
       </div>
-      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/organizational/index' }" @click="toPage('/dataBoard/organizational/index')">
+      <div class="nav-item" :class="{ 'z-on': $route.path.includes('/organizational') }" @click="toPage('/organizational/dangTree')">
         <span>组织架构</span>
       </div>
       <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/humanData/index' }" @click="toPage('/dataBoard/humanData/index')">
@@ -162,10 +167,33 @@ export default {
       showWeek: "",
       showTime: "",
       showMonth: "",
+      value: "",
       weather: {
         weather: "晴",
         temperature: "--",
       },
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
     };
   },
   components: {
@@ -212,6 +240,10 @@ export default {
     toIndexPage() {
       this.$router.replace("/");
     },
+
+    goBack() {
+      this.$router.push("/main/home");
+    },
     // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
     gotoRouteHandle(menuId, idx) {
       var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter((item) => item.meta.menuId === menuId)[0];
@@ -237,7 +269,11 @@ export default {
         // return this.$message.error("网络错误");
       }
     },
+
+    setSelectName(name) {
+      this.$store.dispatch("chooseArea/chooseName", name);
+    },
   },
 };
 </script>
-<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style>
+<style lang="scss" scoped src="@/assets/scss/dataBoardMain.scss"></style>
diff --git a/src/views/dataBoardMain/main.vue b/src/views/dataBoardMain/main.vue
index 9ab3eb4f1..d761e9957 100644
--- a/src/views/dataBoardMain/main.vue
+++ b/src/views/dataBoardMain/main.vue
@@ -22,7 +22,7 @@
           :style="{
             minHeight: $store.state.fixed1920.height - 100 + 'px',
           }">
-          <main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" />
+          <main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" name="1233223" />
         </div>
       </template>
     </div>