diff --git a/src/assets/img/modules/visual/popup.png b/src/assets/img/modules/visual/popup.png
new file mode 100644
index 00000000..a529d926
Binary files /dev/null and b/src/assets/img/modules/visual/popup.png differ
diff --git a/src/assets/scss/modules/visual/basicInfoMain copy.scss b/src/assets/scss/modules/visual/basicInfoMain copy.scss
new file mode 100644
index 00000000..938856f4
--- /dev/null
+++ b/src/assets/scss/modules/visual/basicInfoMain copy.scss	
@@ -0,0 +1,499 @@
+.div_top {
+  margin-left: 10px;
+  height: 35px;
+  .router_line {
+    width: 212px;
+    height: 1px;
+    border: 1px solid #ffffff;
+    opacity: 0.09;
+    /* opacity: 0.09; */
+  }
+  .div_router {
+    margin-top: 5px;
+    font-size: 16px;
+
+    .router_parents {
+      color: #a0c3d9;
+
+      .arrow {
+        padding: 0 5px;
+      }
+    }
+    .router_parents:hover {
+      cursor: pointer;
+    }
+
+    .router_child {
+      color: #ffffff;
+    }
+  }
+}
+
+.div_content {
+  display: flex;
+
+  .div_map {
+    box-sizing: border-box;
+    width: 100%;
+    // padding: 10px 5px 13px;
+    // margin-top: 8px;
+    height: calc(88vh - 15px);
+    color: #fff;
+    // background: url('../../../img/modules/visual/warning-box.png') no-repeat
+    //   center;
+    // background-size: 100% 100%;
+  }
+
+  .div_data {
+    flex: 0 0 562px;
+    margin-left: 12px;
+
+    .div_search {
+      width: 100%;
+      height: 56px;
+      text-align: center;
+      background-color: #011168;
+      border-radius: 4px 0 0 4px;
+      border: none;
+      box-shadow: 0 0 10px inset #1a5afd;
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #ffffff;
+      opacity: 0.7;
+      display: flex;
+      justify-content: space-between;
+      .div_search_left {
+        display: flex;
+        justify-content: flex-start;
+        .icon {
+          display: flex;
+          align-items: center;
+          margin-left: 29px;
+
+          > img {
+            width: 24px;
+            height: 24px;
+          }
+        }
+
+        > span {
+          line-height: 56px;
+          margin-left: 10px;
+        }
+      }
+
+      .btn {
+        text-align: center;
+        flex: 0 0 113px;
+        height: 56px;
+        background: linear-gradient(90deg, #1a5afd, #26c4ff);
+        font-size: 20px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 56px;
+        border-radius: 0 4px 4px 0;
+      }
+    }
+
+    .div_search:hover {
+      cursor: pointer;
+    }
+
+    .div_info {
+      box-sizing: border-box;
+      width: 100%;
+      margin-top: 21px;
+      height: calc(88vh - 87px);
+      color: #fff;
+      background: url('../../../img/modules/visual/warning-box.png') no-repeat
+        center;
+      background-size: 100% 100%;
+      // padding: 45px 21px 35px 24px;
+
+      .info_loading {
+        margin-top: 50px;
+      }
+      .info_tip {
+        padding: 31px 0 0 19px;
+        display: flex;
+        > img {
+          height: 34px;
+          width: 46px;
+        }
+
+        .tip_title {
+          line-height: 34px;
+          margin-left: 7px;
+          font-size: 22px;
+          font-family: PingFang SC;
+          font-weight: 800;
+          color: #ffffff;
+        }
+      }
+
+      .info_list {
+        margin-top: 9px;
+
+        .item {
+          .item_line {
+            margin-top: 13px;
+            margin-left: 24px;
+            width: 517px;
+            height: 0px;
+            border: 1px dotted #1797ff31;
+            border-width: 0.5px;
+          }
+          .last_line {
+            border: 1px dotted #1797ff00;
+          }
+          .list_item {
+            display: flex;
+            padding: 18px 59px 0;
+            justify-content: space-between;
+
+            .list_item_col {
+              flex: 0 0 240px;
+              display: flex;
+
+              > img {
+                height: 76px;
+                width: 76px;
+              }
+
+              .item_content {
+                margin-left: 10px;
+                height: 76px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                .item_label {
+                  font-size: 18px;
+                  font-family: PingFang SC;
+                  font-weight: 400;
+                  color: #ffffff;
+                }
+                .item_count {
+                  margin-top: 10px;
+                  font-size: 28px;
+                  font-family: PingFang SC;
+                  font-weight: bold;
+                  color: #00fffc;
+                }
+              }
+            }
+          }
+
+          ::v-deep .el-popper {
+            padding: 0px;
+          }
+          //
+        }
+      }
+    }
+
+    .div_info {
+      /deep/ .el-scrollbar__wrap {
+        overflow-x: hidden !important;
+      }
+    }
+  }
+}
+
+.div_community_info {
+  box-sizing: border-box;
+  flex: 0 0 calc(100vw - 620px);
+  // width: calc(100vw - 560px);
+
+  height: calc(88vh - 10px);
+  color: #fff;
+  background: url('../../../img/modules/visual/warning-box.png') no-repeat
+    center;
+  background-size: 100% 100%;
+
+  .div_select {
+    margin-top: 28px;
+    margin-left: 24px;
+    display: flex;
+    .customer_select {
+      display: flex;
+      justify-content: flex-start;
+
+      > span {
+        width: auto;
+        font-size: 22px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #ffffff;
+        line-height: 34px;
+      }
+    }
+    > img {
+      height: 34px;
+      width: 46px;
+    }
+
+    .tip_title {
+      line-height: 34px;
+      margin-left: 12px;
+      font-size: 22px;
+      font-family: PingFang SC;
+      font-weight: 800;
+      color: #ffffff;
+    }
+  }
+
+  .div_room_bar {
+    box-sizing: border-box;
+
+    margin-top: 9px;
+    height: calc(88vh - 120px);
+  }
+
+  .div_room {
+    // height: calc(88vh - 40px);
+    // margin-top: 9px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin: 0 21px 0 21px;
+
+    .item:hover {
+      cursor: pointer;
+    }
+    .item_sel {
+      box-shadow: 0 0 10px inset #1a5afd;
+    }
+    .item {
+      background-color: #011168;
+      margin-top: 12px;
+      width: 244px;
+      height: 190px;
+      border: 1px solid #037ddc;
+      border-radius: 8px;
+      text-align: center;
+      margin-left: 11px;
+      position: relative;
+
+      // &:first-child {
+      //   margin-left: 0;
+      // }
+
+      .housename {
+        margin-top: 70px;
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        // line-height: 180px;
+      }
+
+      .icon_party {
+        position: absolute;
+        top: 13px;
+        left: 18px;
+      }
+
+      .icon_category {
+        position: absolute;
+        bottom: 14px;
+        left: 9px;
+        // margin-left: 7px;
+
+        > img {
+          margin-left: 5px;
+          width: 21px;
+          height: 20px;
+        }
+      }
+      .div_user:hover {
+        cursor: pointer;
+      }
+
+      .div_user {
+        position: absolute;
+        bottom: 10px;
+        right: 11px;
+        width: 88px;
+        height: 30px;
+        background: #073082;
+        border-radius: 15px;
+
+        > img {
+          width: 10px;
+          height: 6px;
+          margin-left: 4px;
+        }
+
+        > span {
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 30px;
+        }
+      }
+    }
+  }
+
+  .div_room::after {
+    content: '';
+    flex: 1;
+  }
+}
+
+.user_list {
+  position: relative;
+  z-index: 10;
+
+  background: #020340;
+  border: 1px solid #0a359b;
+  border-radius: 4px;
+  box-shadow: 0 0 10px inset #1a5afd;
+
+  .user_item {
+    padding: 13px 8px 0 14px;
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+
+    .user_item_content {
+      display: flex;
+      // justify-content: space-between;
+      align-items: center;
+
+      .name {
+        max-width: 80%;
+        text-align: left;
+      }
+
+      > img {
+        margin-left: auto;
+
+        margin-top: 4px;
+        width: 8px;
+        height: 12px;
+      }
+    }
+
+    .item_line {
+      margin-top: 9px;
+      width: 70px;
+      height: 0px;
+      border: 1px dotted #1797ff31;
+      border-width: 0.5px;
+    }
+    .last_line {
+      border: 1px dotted #1797ff00;
+    }
+  }
+}
+.div_agency_tran {
+  transition: width 2s ease-out, opacity 1s ease-in, visibility 1s ease-in;
+  width: 0;
+  height: 470px;
+  z-index: 1000;
+  position: absolute;
+  top: 50px;
+  right: 600px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .div_agency_list {
+    width: 320px;
+    height: 470px;
+    color: #fff;
+    background: url('../../../img/modules/visual/box-2.png') no-repeat center;
+    background-size: 100% 100%;
+    padding: 45px 20px 35px 20px;
+
+    .agency_main {
+      height: 100%;
+      position: relative;
+    }
+
+    .agency_main {
+      /deep/ .el-scrollbar__wrap {
+        overflow-x: hidden !important;
+      }
+    }
+
+    .no-data-img {
+      text-align: center;
+      margin-top: 50px;
+      margin-left: 15px;
+    }
+    .agency_list {
+      .agency_item {
+        // height: 60px;
+        padding: 15px 0;
+        font-size: 17px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        // line-height: 50px;
+        padding-left: 12px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        // padding-top: 15px;
+
+        .agency_item_name {
+          // line-height: 20px;
+        }
+      }
+
+      .agency_item_on {
+        background: #08216c;
+        border-radius: 2px;
+      }
+
+      .agency_item:hover {
+        cursor: pointer;
+        background-color: #011168;
+        border-radius: 4px 0 0 4px;
+        border: none;
+        box-shadow: 0 0 10px inset #1a5afd;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .arrow_tip {
+    margin-right: -2px;
+    > img {
+      width: 21px;
+      height: 176px;
+    }
+  }
+  .arrow_tip:hover {
+    cursor: pointer;
+  }
+}
+
+.div_agency_tran-fade-in {
+  width: 341px;
+  opacity: 1;
+  visibility: 1;
+}
+.div_agency_tran-fade-out {
+  visibility: 0;
+  opacity: 1;
+  width: 0;
+  right: 575px;
+}
+// .div_agency_list-fade-in {
+//   width: 341px;
+//   opacity: 1;
+//   visibility: 1;
+// }
+// .div_agency_list-fade-out {
+//   visibility: 0;
+//   opacity: 0;
+//   width: 0;
+// }
diff --git a/src/assets/scss/modules/visual/basicInfoMain.scss b/src/assets/scss/modules/visual/basicInfoMain.scss
index 8b7cfd43..72c37bd1 100644
--- a/src/assets/scss/modules/visual/basicInfoMain.scss
+++ b/src/assets/scss/modules/visual/basicInfoMain.scss
@@ -42,6 +42,7 @@
     // background: url('../../../img/modules/visual/warning-box.png') no-repeat
     //   center;
     // background-size: 100% 100%;
+    position: relative;
   }
 
   .div_data {
@@ -392,72 +393,98 @@
   }
 }
 
-.div_agency_list {
-  z-index: 1000;
+.m-sidebar {
   position: absolute;
+  right: 0;
   top: 50px;
-  right: 600px;
-  box-sizing: border-box;
-  width: 320px;
+  z-index: 1000;
+  width: 370px;
   height: 470px;
-  color: #fff;
-  background: url('../../../img/modules/visual/box-2.png') no-repeat center;
-  background-size: 100% 100%;
-  padding: 45px 20px 35px 20px;
+  overflow: hidden;
 
-  .agency_main {
-    height: 100%;
-    position: relative;
-    .arrow_tip {
-      position: absolute;
-      top: 180px;
-      left: -20px;
-    }
+  .wrap {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    background-color: rgba(rgb(173, 173, 173), 0);
+    transform: translateX(-5px);
+    transition: all ease 1s;
+    border-radius: 4px;
   }
 
-  .agency_main {
-    /deep/ .el-scrollbar__wrap {
-      overflow-x: hidden !important;
-    }
+  .wrap-hidden {
+    transform: translateX(339px);
   }
 
-  .no-data-img {
-    text-align: center;
-    margin-top: 50px;
-    margin-left: 15px;
-  }
-  .agency_list {
-    .agency_item {
-      // height: 60px;
-      padding: 15px 0;
-      font-size: 17px;
-      font-family: PingFang SC;
-      font-weight: 400;
-      color: #ffffff;
-      // line-height: 50px;
-      padding-left: 12px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      // padding-top: 15px;
+  .div_agency_list {
+    width: 320px;
+    height: 470px;
+    color: #fff;
+    background: url('../../../img/modules/visual/box-2.png') no-repeat center;
+    background-size: 100% 100%;
+    padding: 45px 20px 35px 20px;
 
-      .agency_item_name {
-        // line-height: 20px;
+    .agency_main {
+      height: 100%;
+      position: relative;
+    }
+
+    .agency_main {
+      /deep/ .el-scrollbar__wrap {
+        overflow-x: hidden !important;
       }
     }
 
-    .agency_item_on {
-      background: #08216c;
-      border-radius: 2px;
+    .no-data-img {
+      text-align: center;
+      margin-top: 50px;
+      margin-left: 15px;
     }
+    .agency_list {
+      .agency_item {
+        // height: 60px;
+        padding: 15px 0;
+        font-size: 17px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        // line-height: 50px;
+        padding-left: 12px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        // padding-top: 15px;
 
-    .agency_item:hover {
-      cursor: pointer;
-      background-color: #011168;
-      border-radius: 4px 0 0 4px;
-      border: none;
-      box-shadow: 0 0 10px inset #1a5afd;
-      border-radius: 2px;
+        .agency_item_name {
+          // line-height: 20px;
+        }
+      }
+
+      .agency_item_on {
+        background: #08216c;
+        border-radius: 2px;
+      }
+
+      .agency_item:hover {
+        cursor: pointer;
+        background-color: #011168;
+        border-radius: 4px 0 0 4px;
+        border: none;
+        box-shadow: 0 0 10px inset #1a5afd;
+        border-radius: 2px;
+      }
     }
   }
+
+  .arrow_tip {
+    margin-right: -2px;
+    margin-left: 10px;
+    > img {
+      width: 22px;
+      height: 176px;
+    }
+  }
+  .arrow_tip:hover {
+    cursor: pointer;
+  }
 }
diff --git a/src/assets/scss/modules/visual/people.scss b/src/assets/scss/modules/visual/people.scss
index 5a6edb5f..01c04348 100644
--- a/src/assets/scss/modules/visual/people.scss
+++ b/src/assets/scss/modules/visual/people.scss
@@ -1,650 +1,657 @@
-@import "../../c/config";
-@import "../../c/function";
-@import "./c/common";
+@import '../../c/config';
+@import '../../c/function';
+@import './c/common';
 
 .g-cpt {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 5px;
+
+  .g-l {
+    width: 850px;
+    margin-bottom: 20px;
+  }
+
+  .g-r {
+    margin-left: 6px;
+    width: calc(100% - 850px - 6px);
+    min-width: 850px;
+  }
+}
+
+.m-people {
+  position: relative;
+
+  .title {
+    padding: 10px;
+    font-size: 22px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-top: 5px;
+    align-items: center;
 
-    .g-l {
-        width: 850px;
-        margin-bottom: 20px;
+    img {
+      display: block;
+      margin-right: 5px;
     }
-
-    .g-r {
-        margin-left: 6px;
-        width: calc(100% - 850px - 6px);
-        min-width: 850px;
+    span {
+      display: block;
     }
-}
-
-.m-people {
+  }
+
+  .more {
+    // position: absolute;
+    margin-left: auto;
+    margin-top: -10px;
+    width: 90px;
+    height: 29px;
+    line-height: 29px;
+    background: linear-gradient(90deg, #1a5afd, #26c4ff);
+    border-radius: 15px;
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .ren {
     position: relative;
+    margin-top: 0;
+    padding-bottom: 15px;
+
+    .ren-name {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: -10px;
+      width: 400px;
+      margin: 0 auto;
+      font-size: 24px;
+      line-height: 40px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+
+      > span {
+        @include toe;
+        display: block;
+        text-align: center;
+      }
 
-    .title {
-        padding: 10px;
-        font-size: 22px;
-        font-family: PingFang SC;
-        font-weight: 800;
-        color: #ffffff;
-        display: flex;
-        align-items: center;
-
-        img {
-            display: block;
-            margin-right: 5px;
-        }
-        span {
-            display: block;
-        }
+      > img {
+        display: block;
+        margin: 3px auto;
+      }
     }
 
-    .more {
-        // position: absolute;
-        margin-left: auto;
-        margin-top: -10px;
-        width: 90px;
-        height: 29px;
-        line-height: 29px;
-        background: linear-gradient(90deg, #1a5afd, #26c4ff);
-        border-radius: 15px;
-        font-size: 14px;
+    .pic-ren {
+      margin: 0 auto;
+      display: block;
+      pointer-events: none;
+    }
+    .ren-prop {
+      position: absolute;
+      width: 100px;
+      height: 120px;
+
+      &.z-1 {
+        left: 170px;
+        top: 10px;
+      }
+      &.z-6 {
+        right: 170px;
+        top: 10px;
+      }
+      &.z-2 {
+        left: 55px;
+        top: 110px;
+      }
+      &.z-5 {
+        right: 55px;
+        top: 110px;
+      }
+      &.z-3 {
+        left: 115px;
+        top: 245px;
+      }
+      &.z-4 {
+        right: 115px;
+        top: 245px;
+      }
+
+      > img {
+        margin: 0 auto;
+      }
+      > span {
+        display: block;
+        font-size: 16px;
+        line-height: 30px;
         font-family: PingFang SC;
         font-weight: 500;
         color: #ffffff;
         text-align: center;
-        cursor: pointer;
-    }
-
-    .ren {
-        position: relative;
-        margin-top: 0;
-        padding-bottom: 15px;
-
-        .ren-name {
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: -10px;
-            width: 400px;
-            margin: 0 auto;
-            font-size: 24px;
-            line-height: 40px;
-            font-family: PingFang SC;
-            font-weight: 500;
-            color: #ffffff;
-
-            > span {
-                @include toe;
-                display: block;
-                text-align: center;
-            }
+      }
 
-            > img {
-                display: block;
-                margin: 3px auto;
-            }
+      &:hover {
+        .ren-cnt {
+          display: block;
         }
+      }
 
-        .pic-ren {
-            margin: 0 auto;
-            display: block;
-            pointer-events: none;
+      .ren-cnt {
+        position: absolute;
+        z-index: 10;
+        display: none;
+        box-sizing: border-box;
+        top: 60px;
+        left: 90px;
+        padding: 10px;
+        width: 162px;
+        min-height: 60px;
+        background: rgba(#b7c7e0, 0.24);
+        line-height: 20px;
+
+        h5 {
+          margin: 0;
+          font-size: 16px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #fefefe;
         }
-        .ren-prop {
-            position: absolute;
-            width: 100px;
-            height: 120px;
-
-            &.z-1 {
-                left: 170px;
-                top: 10px;
-            }
-            &.z-6 {
-                right: 170px;
-                top: 10px;
-            }
-            &.z-2 {
-                left: 55px;
-                top: 110px;
-            }
-            &.z-5 {
-                right: 55px;
-                top: 110px;
-            }
-            &.z-3 {
-                left: 115px;
-                top: 245px;
-            }
-            &.z-4 {
-                right: 115px;
-                top: 245px;
-            }
-
-            > img {
-                margin: 0 auto;
-            }
-            > span {
-                display: block;
-                font-size: 16px;
-                line-height: 30px;
-                font-family: PingFang SC;
-                font-weight: 500;
-                color: #ffffff;
-                text-align: center;
-            }
 
-            &:hover {
-                .ren-cnt {
-                    display: block;
-                }
-            }
-
-            .ren-cnt {
-                position: absolute;
-                z-index: 10;
-                display: none;
-                box-sizing: border-box;
-                top: 60px;
-                left: 90px;
-                padding: 10px;
-                width: 162px;
-                min-height: 60px;
-                background: rgba(#b7c7e0, 0.24);
-                line-height: 20px;
-
-                h5 {
-                    margin: 0;
-                    font-size: 16px;
-                    font-family: PingFang SC;
-                    font-weight: 500;
-                    color: #fefefe;
-                }
-
-                p {
-                    margin: 0;
-                    margin-top: 4px;
-                    font-size: 14px;
-                    font-family: PingFang SC;
-                    font-weight: 400;
-                    color: #fefefe;
-                }
-            }
+        p {
+          margin: 0;
+          margin-top: 4px;
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #fefefe;
         }
+      }
     }
+  }
 }
 
 .m-pop {
-    @include shield;
-    background-color: rgba(#000, 0.9);
-    overflow-y: auto;
-
-    .wrap {
-        position: relative;
-        margin: 120px auto;
-        width: 1000px;
+  @include shield;
+  background-color: rgba(#000, 0.9);
+  overflow-y: auto;
 
-        .title {
-            padding: 10px;
-            font-size: 22px;
-            font-family: PingFang SC;
-            font-weight: 800;
-            color: #ffffff;
-            display: flex;
-            align-items: center;
+  .wrap {
+    position: relative;
+    margin: 120px auto;
+    width: 1000px;
 
-            img {
-                display: block;
-                margin-right: 5px;
-            }
-            span {
-                display: block;
-            }
-        }
+    .title {
+      padding: 10px;
+      font-size: 22px;
+      font-family: PingFang SC;
+      font-weight: 800;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+
+      img {
+        display: block;
+        margin-right: 5px;
+      }
+      span {
+        display: block;
+      }
+    }
 
-        .btn-close {
-            position: absolute;
-            top: -15px;
-            right: -15px;
-            cursor: pointer;
-        }
+    .btn-close {
+      position: absolute;
+      top: -15px;
+      right: -15px;
+      cursor: pointer;
+    }
 
-        .list {
-            display: flex;
-            flex-wrap: wrap;
-            padding: 10px 30px;
-
-            .item {
-                position: relative;
-                box-sizing: border-box;
-                padding: 0 15px;
-                width: 33%;
-                color: #fff;
-                font-size: 18px;
-                font-family: PingFang SC;
-                font-weight: 400;
-                color: #ffffff;
-                line-height: 24px;
-                margin: 20px 0;
-
-                &::before {
-                    position: absolute;
-                    left: 0;
-                    top: 9px;
-                    content: "";
-                    display: block;
-                    width: 7px;
-                    height: 7px;
-                    background: #0c81fe;
-                    border-radius: 3px;
-                }
-            }
-        }
+    .list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 10px 30px;
 
-        .line {
-            margin: 20px auto;
-            width: 900px;
-            height: 1px;
-            border: 1px dashed #1257c9;
+      .item {
+        position: relative;
+        box-sizing: border-box;
+        padding: 0 15px;
+        width: 33%;
+        color: #fff;
+        font-size: 18px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 24px;
+        margin: 20px 0;
+
+        &::before {
+          position: absolute;
+          left: 0;
+          top: 9px;
+          content: '';
+          display: block;
+          width: 7px;
+          height: 7px;
+          background: #0c81fe;
+          border-radius: 3px;
         }
+      }
+    }
 
-        .tabs {
-            margin-top: 30px;
-            display: flex;
-            align-items: center;
-            padding-left: 20px;
+    .line {
+      margin: 20px auto;
+      width: 900px;
+      height: 1px;
+      border: 1px dashed #1257c9;
+    }
 
-            .tab-btn {
-                width: 30px;
-                text-align: center;
-                cursor: pointer;
-            }
+    .tabs {
+      margin-top: 30px;
+      display: flex;
+      align-items: center;
+      padding-left: 20px;
 
-            .tab {
-                margin: 0 5px;
-                min-width: 76px;
-                padding: 0 5px;
-                height: 30px;
-                background: rgba(255, 255, 255, 0);
-                border: 1px solid #1257c9;
-                box-shadow: 0 0 10px 0 inset #1257c9;
-                border-radius: 2px;
-                text-align: center;
-                font-size: 14px;
-                font-family: PingFang SC;
-                font-weight: 400;
-                color: #ffffff;
-                line-height: 30px;
-                cursor: pointer;
-                transition: all ease 0.5s;
-                &.z-on {
-                    background: linear-gradient(90deg, #1a5afd, #009cff);
-                    box-shadow: none;
-                }
-            }
+      .tab-btn {
+        width: 30px;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      .tab {
+        margin: 0 5px;
+        min-width: 76px;
+        padding: 0 5px;
+        height: 30px;
+        background: rgba(255, 255, 255, 0);
+        border: 1px solid #1257c9;
+        box-shadow: 0 0 10px 0 inset #1257c9;
+        border-radius: 2px;
+        text-align: center;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 30px;
+        cursor: pointer;
+        transition: all ease 0.5s;
+        &.z-on {
+          background: linear-gradient(90deg, #1a5afd, #009cff);
+          box-shadow: none;
         }
+      }
     }
+  }
 }
 
 .m-relation {
+  position: relative;
+  margin-top: 10px;
+
+  .title {
+    padding: 10px;
+    font-size: 22px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+
+    img {
+      display: block;
+      margin-right: 5px;
+    }
+    span {
+      display: block;
+    }
+  }
+
+  .info {
     position: relative;
-    margin-top: 10px;
+    width: 410px;
+    height: 312px;
+    margin: 0 auto;
+    .huzhu {
+      position: relative;
 
-    .title {
-        padding: 10px;
-        font-size: 22px;
+      .huzhu-bg {
+        display: block;
+      }
+
+      .huzhu-ico {
+        position: absolute;
+        display: block;
+        top: 90px;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+      }
+      .huzhu-name {
+        position: absolute;
+        display: block;
+        top: 170px;
+        width: 100%;
+        font-size: 24px;
         font-family: PingFang SC;
-        font-weight: 800;
+        font-weight: 500;
         color: #ffffff;
-        display: flex;
-        align-items: center;
-
-        img {
-            display: block;
-            margin-right: 5px;
-        }
-        span {
-            display: block;
-        }
+        line-height: 30px;
+        text-align: center;
+      }
+      > p {
+        position: absolute;
+        top: 200px;
+        font-size: 16px;
+        width: 100%;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        text-align: center;
+      }
     }
 
-    .info {
-        position: relative;
-        width: 410px;
-        height: 312px;
-        margin: 0 auto;
-        .huzhu {
-            position: relative;
+    .rel {
+      position: absolute;
+      width: 128px;
+      height: 38px;
 
-            .huzhu-bg {
-                display: block;
-            }
+      .rel-line {
+        position: absolute;
+        z-index: 1;
+      }
+      .rel-bg {
+        height: 70px;
+        width: 128px;
+      }
+
+      .rel-text {
+        @include toe;
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        width: 100%;
+        padding: 7px 10px;
+        line-height: 24px;
+        text-align: center;
+        color: #fff;
+        font-size: 18px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        cursor: pointer;
 
-            .huzhu-ico {
-                position: absolute;
-                display: block;
-                top: 90px;
-                left: 0;
-                right: 0;
-                margin: 0 auto;
-            }
-            .huzhu-name {
-                position: absolute;
-                display: block;
-                top: 170px;
-                width: 100%;
-                font-size: 24px;
-                font-family: PingFang SC;
-                font-weight: 500;
-                color: #ffffff;
-                line-height: 30px;
-                text-align: center;
-            }
-            > p {
-                position: absolute;
-                top: 200px;
-                font-size: 16px;
-                width: 100%;
-                font-family: PingFang SC;
-                font-weight: 500;
-                color: #ffffff;
-                text-align: center;
-            }
+        .rel-name {
+          font-size: 14px;
         }
-
-        .rel {
-            position: absolute;
-            width: 128px;
-            height: 38px;
-
-            .rel-line {
-                position: absolute;
-                z-index: 1;
-            }
-
-            .rel-text {
-                @include toe;
-                position: absolute;
-                z-index: 2;
-                top: 0;
-                left: 0;
-                width: 100%;
-                line-height: 38px;
-                text-align: center;
-                color: #fff;
-                font-size: 18px;
-                font-family: PingFang SC;
-                font-weight: 500;
-                cursor: pointer;
-
-                .rel-name {
-                    font-size: 14px;
-                }
-            }
-
-            &.z-zuo-2 {
-                top: 138px;
-                left: -33px - 128px;
-                .rel-line {
-                    left: 127px;
-                    top: -28px;
-                }
-            }
-
-            &.z-you-2 {
-                top: 138px;
-                right: -33px - 128px;
-                .rel-line {
-                    right: 127px;
-                    top: -28px;
-                }
-            }
-
-            &.z-zuo-1 {
-                top: 43px;
-                left: -33px - 128px;
-                .rel-line {
-                    left: 131px;
-                }
-            }
-            &.z-you-1 {
-                top: 43px;
-                right: -33px - 128px;
-                .rel-line {
-                    right: 131px;
-                }
-            }
-
-            &.z-zuo-3 {
-                bottom: 41px;
-                left: -33px - 128px;
-                .rel-line {
-                    left: 131px;
-                    bottom: -2px;
-                }
-            }
-            &.z-you-3 {
-                bottom: 41px;
-                right: -33px - 128px;
-                .rel-line {
-                    right: 131px;
-                    bottom: -2px;
-                }
-            }
+      }
+
+      &.z-zuo-2 {
+        top: 124px;
+        left: -33px - 128px;
+        .rel-line {
+          left: 127px;
+          top: -8px;
+        }
+      }
+
+      &.z-you-2 {
+        top: 124px;
+        right: -33px - 128px;
+        .rel-line {
+          right: 127px;
+          top: -8px;
         }
+      }
+
+      &.z-zuo-1 {
+        top: 25px;
+        left: -33px - 128px;
+        .rel-line {
+          top: 17px;
+          left: 131px;
+        }
+      }
+      &.z-you-1 {
+        top: 25px;
+        right: -33px - 128px;
+        .rel-line {
+          top: 17px;
+          right: 131px;
+        }
+      }
+
+      &.z-zuo-3 {
+        bottom: 45px;
+        left: -33px - 128px;
+        .rel-line {
+          left: 131px;
+          bottom: -15px;
+        }
+      }
+      &.z-you-3 {
+        bottom: 45px;
+        right: -33px - 128px;
+        .rel-line {
+          right: 131px;
+          bottom: -15px;
+        }
+      }
     }
+  }
 }
 
 .m-tb {
+  .title {
+    padding: 10px;
+    font-size: 22px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+
+    img {
+      display: block;
+      margin-right: 5px;
+    }
+    span {
+      display: block;
+    }
+  }
+  .tb {
+    height: 300px;
+    overflow-y: auto;
+    @include scrollBar;
+  }
+}
+
+.m-row {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+
+  .m-list {
+    width: calc(50% - 3px);
+
     .title {
-        padding: 10px;
+      padding: 10px;
+      font-size: 22px;
+      font-family: PingFang SC;
+      font-weight: 800;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+
+      img {
+        display: block;
+        margin-right: 5px;
+      }
+      span {
+        display: block;
+      }
+
+      a {
+        display: block;
+        color: rgba(#fff, 0.5);
         font-size: 22px;
         font-family: PingFang SC;
         font-weight: 800;
-        color: #ffffff;
-        display: flex;
-        align-items: center;
+        margin-right: 10px;
+        cursor: pointer;
+
+        &.z-on {
+          color: #fff;
+          cursor: default;
 
-        img {
-            display: block;
-            margin-right: 5px;
+          &:hover {
+            color: #fff;
+            text-decoration: none;
+          }
         }
-        span {
-            display: block;
+
+        &:hover {
+          color: rgba(#fff, 0.5);
+          text-decoration: underline;
         }
+      }
     }
-    .tb {
-        height: 300px;
-        overflow-y: auto;
-        @include scrollBar;
-    }
-}
 
-.m-row {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
-
-    .m-list {
-        width: calc(50% - 3px);
-
-        .title {
-            padding: 10px;
-            font-size: 22px;
-            font-family: PingFang SC;
-            font-weight: 800;
-            color: #ffffff;
+    .list-wrap {
+      height: 480px;
+      overflow-y: auto;
+      @include scrollBar;
+
+      .list {
+        .item {
+          position: relative;
+          background-color: #104ba4;
+          padding: 10px 20px;
+          margin-bottom: 4px;
+          cursor: pointer;
+          transition: all ease 0.1s;
+
+          .item-row {
             display: flex;
+            justify-content: space-between;
             align-items: center;
 
-            img {
-                display: block;
-                margin-right: 5px;
+            .item-l {
+              width: 25%;
             }
-            span {
-                display: block;
+            .item-r {
+              width: 75%;
             }
 
-            a {
+            &:hover {
+              &::before {
+                content: '';
+                position: absolute;
                 display: block;
-                color: rgba(#fff, 0.5);
-                font-size: 22px;
-                font-family: PingFang SC;
-                font-weight: 800;
-                margin-right: 10px;
-                cursor: pointer;
-
-                &.z-on {
-                    color: #fff;
-                    cursor: default;
-
-                    &:hover {
-                        color: #fff;
-                        text-decoration: none;
-                    }
-                }
-
-                &:hover {
-                    color: rgba(#fff, 0.5);
-                    text-decoration: underline;
-                }
-            }
-        }
+                left: 0;
+                top: 0;
+                bottom: 0;
+                width: 6px;
+                background: linear-gradient(270deg, #0336ff, #01b4ff);
+                border-radius: 2px;
+              }
 
-        .list-wrap {
-            height: 480px;
-            overflow-y: auto;
-            @include scrollBar;
-
-            .list {
-                .item {
-                    position: relative;
-                    background-color: #104ba4;
-                    padding: 10px 20px;
-                    margin-bottom: 4px;
-                    cursor: pointer;
-                    transition: all ease 0.1s;
-
-                    .item-row {
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-
-                        .item-l {
-                            width: 25%;
-                        }
-                        .item-r {
-                            width: 75%;
-                        }
-
-                        &:hover {
-                            &::before {
-                                content: "";
-                                position: absolute;
-                                display: block;
-                                left: 0;
-                                top: 0;
-                                bottom: 0;
-                                width: 6px;
-                                background: linear-gradient(270deg, #0336ff, #01b4ff);
-                                border-radius: 2px;
-                            }
-
-                            &::after {
-                                content: "";
-                                position: absolute;
-                                display: block;
-                                left: 15px;
-                                top: 0;
-                                bottom: 0;
-                                margin: auto 0;
-                                width: 0;
-                                height: 0;
-                                border-width: 10px;
-                                border-style: solid;
-                                border-color: transparent transparent transparent #20edff;
-                            }
-                        }
-                    }
-
-                    .item-point {
-                        text-align: center;
-                        padding-left: 10%;
-                        height: 16px;
-                        font-size: 22px;
-                        font-family: PingFang SC;
-                        font-weight: bold;
-                        color: #ffffff;
-                        line-height: 12px;
-                    }
-
-                    .item-title {
-                        padding: 10px 0;
-                        font-size: 18px;
-                        font-family: PingFang SC;
-                        font-weight: 400;
-                        color: #ffffff;
-                        line-height: 24px;
-                    }
-
-                    .item-date {
-                        padding: 10px 0;
-                        border-top: 1px dashed #8398d9;
-                        font-size: 14px;
-                        font-family: PingFang SC;
-                        font-weight: 400;
-                        color: #ffffff;
-                        opacity: 0.67;
-                    }
-                    &:hover {
-                        box-shadow: 0 0 30px 5px inset #22f;
-                        background-color: darken(#104ba4, 12);
-                    }
-                }
-            }
+              &::after {
+                content: '';
+                position: absolute;
+                display: block;
+                left: 15px;
+                top: 0;
+                bottom: 0;
+                margin: auto 0;
+                width: 0;
+                height: 0;
+                border-width: 10px;
+                border-style: solid;
+                border-color: transparent transparent transparent #20edff;
+              }
+            }
+          }
+
+          .item-point {
+            text-align: center;
+            padding-left: 10%;
+            height: 16px;
+            font-size: 22px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 12px;
+          }
+
+          .item-title {
+            padding: 10px 0;
+            font-size: 18px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 24px;
+          }
+
+          .item-date {
+            padding: 10px 0;
+            border-top: 1px dashed #8398d9;
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #ffffff;
+            opacity: 0.67;
+          }
+          &:hover {
+            box-shadow: 0 0 30px 5px inset #22f;
+            background-color: darken(#104ba4, 12);
+          }
         }
+      }
     }
+  }
 }
 
 .m-pagination {
-    box-sizing: border-box;
-    margin-top: 20px;
-    width: 100%;
-    height: 40px;
-    display: flex;
-    justify-content: flex-end;
-
-    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
-        background: #0266d1;
-        color: #000d3f;
-    }
-
-    /deep/ .el-pagination .el-pager li {
-        background: #002e74;
-    }
-
-    /deep/ .el-pagination .btn-prev {
-        background: #002e74;
-    }
-
-    /deep/ .el-pagination .btn-next {
-        background: #002e74;
-    }
+  box-sizing: border-box;
+  margin-top: 20px;
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: flex-end;
+
+  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background: #0266d1;
+    color: #000d3f;
+  }
+
+  /deep/ .el-pagination .el-pager li {
+    background: #002e74;
+  }
+
+  /deep/ .el-pagination .btn-prev {
+    background: #002e74;
+  }
+
+  /deep/ .el-pagination .btn-next {
+    background: #002e74;
+  }
 }
 
 .m-hint {
-    position: relative;
-    height: 300px;
-
-    // 暂无数据
-    img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        margin: auto;
-    }
+  position: relative;
+  height: 300px;
+
+  // 暂无数据
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+  }
 }
diff --git a/src/assets/scss/modules/visual/personCategory.scss b/src/assets/scss/modules/visual/personCategory.scss
index 3a9d5913..ddf1da35 100644
--- a/src/assets/scss/modules/visual/personCategory.scss
+++ b/src/assets/scss/modules/visual/personCategory.scss
@@ -76,10 +76,42 @@
         width: 100%;
         display: flex;
         position: relative;
-        flex-direction: column;
-        align-items: space-between;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-top: 10px;
         // border: 1px solid red;
 
+        .item_left {
+          font-size: 16px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #ffffff;
+        }
+
+        .item_right {
+          width: 160px;
+          display: flex;
+          flex-direction: column;
+          align-items: space-between;
+
+          font-size: 16px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+
+          .item_right_row {
+            display: flex;
+            justify-content: space-between;
+
+            .item_right_title {
+            }
+          }
+
+          .row2 {
+            margin-top: 10px;
+          }
+        }
+
         .num-item {
           position: relative;
           width: 100%;
@@ -90,19 +122,6 @@
           justify-content: space-between;
           padding: 0 10px 0 9px;
 
-          // &::after {
-          //   display: block;
-          //   content: "";
-          //   width: 8px;
-          //   height: 8px;
-          //   background: #f0f3f7;
-          //   border-radius: 50%;
-          //   position: absolute;
-          //   left: 12px;
-          //   top: 50%;
-          //   transform: translate(0, -50%);
-          // }
-
           div:nth-child(1) {
             font-size: 16px;
             font-family: PingFang SC;
@@ -111,17 +130,15 @@
           }
 
           div:nth-child(2) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
             // width: 70%;
             display: flex;
             font-size: 20px;
             font-family: PingFang SC;
             font-weight: 500;
             color: #ffffff;
-
-            .right-icon {
-              width: 10px;
-              height: 14px;
-            }
           }
         }
 
diff --git a/src/views/modules/base/community/buildTable.vue b/src/views/modules/base/community/buildTable.vue
index 17b182b6..6d71cd1e 100644
--- a/src/views/modules/base/community/buildTable.vue
+++ b/src/views/modules/base/community/buildTable.vue
@@ -172,7 +172,7 @@
                    style="margin-left:15px"
                    type="red"
                    size="small"
-                   @click="deleteBatch">批量删除</el-button>
+                   @click="deleteBatch">删除</el-button>
       </div>
 
     </div>
diff --git a/src/views/modules/base/community/communityTable.vue b/src/views/modules/base/community/communityTable.vue
index 0f3e390e..51949ae8 100644
--- a/src/views/modules/base/community/communityTable.vue
+++ b/src/views/modules/base/community/communityTable.vue
@@ -193,7 +193,7 @@
                    style="margin-left:15px"
                    type="red"
                    size="small"
-                   @click="deleteBatch">批量删除</el-button>
+                   @click="deleteBatch">删除</el-button>
       </div>
     </div>
 
diff --git a/src/views/modules/base/community/roomTable.vue b/src/views/modules/base/community/roomTable.vue
index 3beb3b0b..62e31c49 100644
--- a/src/views/modules/base/community/roomTable.vue
+++ b/src/views/modules/base/community/roomTable.vue
@@ -164,7 +164,7 @@
                    style="margin-left:15px"
                    type="red"
                    size="small"
-                   @click="deleteBatch">批量删除</el-button>
+                   @click="deleteBatch">删除</el-button>
       </div>
 
     </div>
diff --git a/src/views/modules/visual/basicinfo/basicInfoMain copy.vue b/src/views/modules/visual/basicinfo/basicInfoMain copy.vue
new file mode 100644
index 00000000..c8daa908
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/basicInfoMain copy.vue	
@@ -0,0 +1,1074 @@
+<template>
+  <div style="position: relative">
+
+    <!-- 组织路由 -->
+    <div class="div_top">
+      <div class="router_line"></div>
+      <div class="div_router">
+        <span class="router_parents"
+              v-for="(item,index) in runAgencyArray"
+              @click="handleClickAgency(index)"
+              :key="index">{{item.name}}<span class="arrow">></span></span>
+
+        <span class="router_child">{{orgData.name}}</span>
+      </div>
+    </div>
+
+    <!-- 组织列表 -->
+    <!-- <transition name="slideFade">
+      <div class="div_agency_tran"
+           transiton="slideFade">
+        <div @click="showAgencyList=!showAgencyList"
+             class="arrow_tip">
+          <img src="@/assets/img/modules/visual/popupbox.png"
+               alt />
+        </div>
+
+        <div v-show="showAgencyList&&(orgLevel!=='people' && orgLevel!=='search' && orgLevel!=='neighborHood')"
+             class="div_agency_list">
+          <div class="agency_main">
+            <el-scrollbar style="height:98%"
+                          wrap-style="overflow-x:hidden">
+
+              <div v-if="subAgencyArray.length>0"
+                   class="agency_list">
+                <div v-for="(item,index) in subAgencyArray"
+                     :key="index"
+                     @click="clickAgencyItem(item,index)"
+                     :class="['agency_item',{'agency_item_on':index%2 ==0}]">
+                  <div class="agency_item_name">{{item.name}}</div>
+
+                </div>
+              </div>
+              <div v-else>
+                <img src="@/assets/img/modules/visual/noData.png"
+                     alt=""
+                     srcset=""
+                     class="no-data-img" />
+              </div>
+            </el-scrollbar>
+
+          </div>
+        </div>
+
+      </div>
+    </transition> -->
+
+    <div :class="['div_agency_tran','div_agency_tran-fade-in',{'div_agency_tran-fade-out':!agencyFadeIn}]">
+      <div @click="hideAgencyList"
+           class="arrow_tip">
+        <!-- <img src="@/assets/img/modules/visual/popupbox.png"
+             alt /> -->
+      </div>
+
+      <div v-show="(orgLevel!=='people' && orgLevel!=='search' && orgLevel!=='neighborHood')"
+           :class="['div_agency_list','div_agency_list-fade-in',{'div_agency_list-fade-out':!agencyFadeIn}]">
+        <div class="agency_main">
+          <el-scrollbar style="height:98%"
+                        wrap-style="overflow-x:hidden">
+
+            <div v-if="subAgencyArray.length>0"
+                 class="agency_list">
+              <div v-for="(item,index) in subAgencyArray"
+                   :key="index"
+                   @click="clickAgencyItem(item,index)"
+                   :class="['agency_item',{'agency_item_on':index%2 ==0}]">
+                <div class="agency_item_name">{{item.name}}</div>
+
+              </div>
+            </div>
+            <div v-else>
+              <img src="@/assets/img/modules/visual/noData.png"
+                   alt=""
+                   srcset=""
+                   class="no-data-img" />
+            </div>
+          </el-scrollbar>
+
+        </div>
+      </div>
+
+    </div>
+
+    <people-search v-show="orgLevel==='search'"
+                   @toSubAgency="toSubAgency"
+                   ref="ref_search"></people-search>
+    <people v-if="orgLevel==='people'"
+            :uid="selUserId"
+            ref="ref_people"></people>
+
+    <div v-show="orgLevel!=='people' && orgLevel!=='search'"
+         class="div_content">
+
+      <basic-info-community v-show="orgLevel==='neighborHood'"
+                            @toSubAgency="toSubAgency"
+                            ref="ref_community"
+                            @refreshInfoList="refreshInfoList"></basic-info-community>
+
+      <div v-show="orgLevel!=='people' && orgLevel!=='search' && orgLevel!=='neighborHood'"
+           class="div_map"
+           id="map"
+           ref="map">
+        <!-- <div id="map"
+             class="map"></div> -->
+      </div>
+
+      <div class="div_data">
+        <div @click="handleSearch"
+             class="div_search">
+          <div class="div_search_left">
+            <i slot="prefix"
+               class="icon">
+              <img src="../../../../assets/img/modules/visual/sousuo.png"
+                   alt />
+            </i>
+            <span>请输入姓名</span>
+          </div>
+
+          <div class="btn">搜索</div>
+
+        </div>
+
+        <div class="div_info">
+          <el-scrollbar style="height:98%">
+            <div class="info_tip">
+              <img src="../../../../assets/img/shuju/title-tip.png"
+                   alt />
+              <div class="tip_title">分类列表</div>
+            </div>
+
+            <div class="info_loading"
+                 v-if="infoLoading">
+              <screen-loading>加载中</screen-loading>
+            </div>
+
+            <div v-if="!infoLoading"
+                 class="info_list">
+              <div v-for="(item,index) in listDatashow"
+                   :key="index"
+                   class="item">
+                <div class="list_item">
+                  <div v-for="(colItem,colIndex) in item"
+                       :key="colIndex"
+                       class="list_item_col">
+                    <img :src="colItem.dataIcon"
+                         alt />
+                    <div class="item_content">
+                      <div class="item_label">{{colItem.label}}</div>
+                      <div class="item_count">{{colItem.count}}</div>
+                    </div>
+
+                  </div>
+                </div>
+                <div :class="['item_line',{'last_line':index==(listDatashow.length-1)}]"></div>
+              </div>
+
+            </div>
+          </el-scrollbar>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js';
+import XYZ from 'ol/source/XYZ.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Point from "ol/geom/Point.js";
+import Feature from "ol/Feature.js";
+import Overlay from 'ol/Overlay';
+import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
+import { getCenter, boundingExtent } from 'ol/extent.js';
+import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
+
+import nextTick from 'dai-js/tools/nextTick'
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+import BasicInfoCommunity from "./basicInfoCommunity";
+import PeopleSearch from "./peopleSearch";
+import People from "./people";
+import cptCard from "@/views/modules/visual/cpts/card";
+import ScreenLoading from "@/views/modules/visual/cpts/loading";
+
+var centerPointGlobal = [120.38945519, 36.0722275]
+
+let loading;//加载动画
+
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+let parentLayer;//上级组织图层
+let parentSource;//上级组织多边形
+let polygonLayer;//变电站标注图层
+let iconLayer; // icon标注图层
+let iconSource; // icon
+let polygonSource;//变电站标注多边形
+let select;//选中标注
+
+
+//url图标
+
+let iconUrlArray = [
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+];
+let textColorArray = [
+  'rgba(236, 69, 4, 0.66)',
+  'rgba(0, 146, 238, 0.75)',
+  'rgba(238, 151, 0, 0.8)'
+];
+let polygonColorArray = [
+  'rgba(210, 2, 2, 0.24)',
+  'rgba(43, 231, 253, 0.25)',
+  'rgba(183, 185, 0, 0.16)'
+];
+//变电站标注的文字样式
+var createTextStyle = function (feature) {
+  return new Text({
+    textAlign: undefined,
+    font: "18px Arial",
+    //fontFamily: "Courier New, monospace",
+    // fontWeight: "bold",
+    text: feature.values_.name,
+    backgroundFill: new Fill({
+      // color: 'rgba(0, 146, 238, 0.75)'
+      color: textColorArray[feature.values_.colorIndex]
+    }),
+    padding: [4, 10, 4, 10],
+    //text: "变电站名称",
+    fill: new Fill({ color: "#ffffff" }),
+    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
+    offsetY: -30,
+    offsetX: -50,
+    overflow: true,
+  });
+};
+
+//上级组织标注样式
+var parentStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      // fill: new Fill({
+      //   color: [255, 255, 255, 0.3]
+      // }),
+      stroke: new Stroke({
+        color: [0, 103, 182, 1],
+        width: 2
+      }),
+
+      // text: createTextStyle(feature)
+    });;
+  };
+})()
+
+
+//变电站标注样式
+var polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.colorIndex]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.colorIndex],
+        width: 3
+      }),
+
+      text: createTextStyle(feature)
+    });;
+  };
+})()
+
+const vueGis = {
+  name: 'HomeMap',
+  data () {
+    return {
+      showAgencyList: true,
+      agencyFadeIn: true,
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      subAgencyArray: [],//下拉框数据
+      iconCoordinators: [],
+      currentCoordinate: null,
+      overlay: null,
+
+      //右侧搜索
+      searchName: "",
+
+      //右侧列表
+      infoLoading: true,
+      listData: [],//得到的数据
+      listDatashow: [],//处理成一行两列的数据
+
+      //下钻层级记录
+      runNum: 0,
+      runAgencyArray: [],
+      selUserId: '',
+      center: [],
+      zoom: null,
+      parentPolygon: [],
+
+      centerFlag: 'point',//定义中心点的flag  point点 fit 自适应
+
+    }
+  },
+  async mounted () {
+
+    //加载组织数据
+    await this.loadOrgData()
+
+    //初始化地图
+    this.initMap()
+
+    await nextTick(300)
+    this.addParentLayer()
+    this.loadParentPolygon()
+    //添加标注图层
+    this.addPolygonLayer()
+
+    //添加icontuceng
+    this.addIconLayer()
+
+    //加载当前园区的标注
+    this.loadPolygon(this.subAgencyArray)
+    this.setMapLocation()
+    await this.loadList()
+
+  },
+  methods: {
+    hideAgencyList () {
+
+      if (this.showAgencyList) {
+        this.agencyFadeIn = false
+        setTimeout(() => {
+          this.showAgencyList = false
+        }, 1000)
+
+      } else {
+        this.agencyFadeIn = true
+        this.showAgencyList = true
+      }
+
+
+    },
+    handleSearch () {
+      this.toSubAgency('search')
+    },
+
+    //获取右侧infolist数据
+    async loadList () {
+      this.infoLoading = true
+      const url = "/epmetuser/statsresiwarn/list"
+      // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/statsresiwarn/list"
+      let params = {
+        id: this.orgId,
+        level: this.orgLevel
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+      this.infoLoading = false
+      if (code === 0) {
+        this.listData = data
+        // this.listData = this.listData1
+        this.listDatashow = []
+        let itemArray = []
+        this.listData.forEach((item, index) => {
+          if (!item.dataIcon) {
+            item.dataIcon = require('../../../../assets/img/modules/visual/dibao.png')
+          }
+
+          if (index % 2 === 0) {//偶数
+            itemArray.push(item)
+          } else {
+            itemArray.push(item)
+            this.listDatashow.push(itemArray)
+            itemArray = []
+          }
+
+        });
+
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //子组件点击房间，刷新右侧list
+    refreshInfoList (selId, type) {
+      this.orgId = selId
+      this.level = ''
+    },
+
+    //点击组织列表数据
+    clickAgencyItem (item, index) {
+
+      let e = {
+        selected: []
+      }
+      let one = {
+        values_: item
+      }
+      e.selected.push(one)
+
+      this.toSubAgency('polygon', e)
+    },
+
+    //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区）   search 点击搜索  people 点击详情
+    async toSubAgency (type, e, searchName) {
+
+      //点击小区neighborHood显示楼栋，点击非小区，进入下一级地图
+      if (type === 'people') {
+        this.runNum++
+        this.runAgencyArray.push(this.orgData)
+        this.orgLevel = 'people'
+        this.selUserId = e
+        this.orgId = ''
+        this.orgData = {
+          id: '',
+          level: 'people',
+          name: '人员档案'
+        }
+        this.searchName = searchName
+
+      } else if (type === 'search') {
+        this.runNum++
+        this.runAgencyArray.push(this.orgData)
+        this.orgLevel = 'search'
+        this.orgId = ''
+        this.orgData = {
+          id: '',
+          level: 'search',
+          name: '搜索'
+        }
+        this.$nextTick(() => {
+          this.$refs.ref_search.reset();
+        });
+
+      } else {
+
+        if (!e) {
+          return false
+        }
+        if (!e.selected[0]) {
+          return false
+        }
+        this.runNum++
+        this.orgData.center = map.getView().getCenter()
+        this.orgData.zoom = map.getView().getZoom()
+        console.log('center', map.getView().getCenter())
+        console.log('zoom', map.getView().getZoom())
+
+        this.runAgencyArray.push(this.orgData)
+
+        this.subAgencyArray.forEach(item => {
+          if (item.id === e.selected[0].values_.id) {
+            this.orgId = item.id
+            this.orgLevel = item.level
+            this.orgData = item
+          }
+        });
+
+        if (this.orgLevel === 'neighborHood') {
+          this.loadList()
+          this.$nextTick(() => {
+            // 小区id，小区名称
+            this.$refs.ref_community.initData(this.orgData.id, this.orgData.name);
+          });
+
+        } else {
+          this.refreshMap(true)
+        }
+
+      }
+
+    },
+
+    //刷新地图
+    async refreshMap (isRefreshView) {
+
+      //加载组织数据
+      await this.loadOrgData()
+
+      //绘制父级组织数据
+      this.loadParentPolygon()
+      //绘制本级组织数据
+      this.loadPolygon(this.subAgencyArray)
+
+      //重置地图中心点
+
+      // if (isRefreshView) {
+      this.setMapLocation()
+
+      // }
+
+      await this.loadList()
+
+    },
+
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      if (!this.zoom) {
+        this.setZoom(this.orgData.agencyLevel)
+      }
+      this.centerPoint = []
+
+
+      //如果存在中心点（返回时赋值）
+      if (this.center && this.center.length > 0) {
+        this.centerPoint = this.center
+        this.centerFlag = 'point'
+        this.center = []
+
+      } else if (parentLayer.getSource().getFeatures()[0]) {//如果是初次进入，不存在下级组织，用父级组织
+        this.centerFlag = 'flag_parent'
+
+
+      } else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织
+        this.centerFlag = 'flag_polygon'
+
+      } else if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+        this.centerFlag = 'point'
+
+      } else {
+        this.centerPoint = centerPointGlobal
+        this.centerFlag = 'point'
+      }
+      // debugger
+      if (this.centerFlag === 'flag_parent') {
+        let parentFeatures = parentLayer.getSource().getFeatures()[0]
+        let polygon = parentFeatures.getGeometry();
+        map.getView().fit(polygon, map.getSize());
+        this.zoom = map.getView().getZoom() - 1
+
+      } else if (this.centerFlag === 'flag_polygon') {
+        let polygonFeatures = polygonLayer.getSource().getFeatures()[0]
+        let polygon = polygonFeatures.getGeometry();
+        map.getView().fit(polygon, map.getSize());
+        this.zoom = map.getView().getZoom() - 1
+
+      } else {
+        mapView.setCenter(this.centerPoint);
+
+      }
+      mapView.setZoom(this.zoom);
+
+
+
+    },
+
+    //返回所选组织
+    handleClickAgency (index) {
+      const cutNum = this.runAgencyArray.length - index//要减去的长度
+      this.runNum = this.runNum - cutNum
+      this.orgData = this.runAgencyArray[index]
+
+      for (let i = 0; i < cutNum; i++) {
+        this.runAgencyArray.pop()
+      }
+
+      this.orgId = this.orgData.id
+      this.orgLevel = this.orgData.level
+      this.center = this.orgData.center
+      this.zoom = this.orgData.zoom
+
+      if (this.orgLevel === 'people') {
+
+      } else if (this.orgLevel === 'search') {
+        this.$nextTick(() => {
+          this.$refs.ref_search.loadByName(this.searchName);
+        });
+
+      } else if (this.orgLevel === 'neighborHood') {//显示小区
+
+      } else {
+
+        this.$nextTick(() => {
+          this.refreshMap(true)
+          this.$forceUpdate()
+        });
+
+      }
+
+    },
+
+    //加载组织数据
+    async loadOrgData () {
+
+      const url = "/gov/org/agency/maporg"
+      let params = {
+        orgId: this.orgId,
+        level: this.orgLevel
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+
+        this.orgData = data
+        this.orgId = this.orgData.id
+        this.orgLevel = this.orgData.level
+        this.parentPolygon = []
+        this.parentPolygon.push(data)
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children
+        } else {
+          this.subAgencyArray = []
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载父级组织多边形
+    loadParentPolygon () {
+      parentSource.clear()//清空变电站标注
+
+      let featureData = []//标注数据
+      if (this.parentPolygon && this.parentPolygon.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        this.parentPolygon.forEach(agencyItem => {
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name
+              },
+              geometry: {
+                type: 'Polygon',
+                coordinates: [],
+              },
+            }
+            let coorArray = agencyItem.coordinates.split(',')//坐标数组
+
+            let itemArray = []//单个点位的[lon,lat]，数组
+            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
+
+            coorArray.forEach((item, index) => {
+              itemArray.push(item)
+              if (index % 2 == 0) {//偶
+
+              } else {//奇
+                polygonArray.push(itemArray)
+                itemArray = []
+              }
+
+            });
+            oneData.geometry.coordinates.push(polygonArray)
+            featureData.push(oneData)
+          }
+        });
+      }
+
+      if (featureData && featureData.length > 0) {
+        var geojsonObject = {
+          'type': 'FeatureCollection',
+          'features': featureData
+        };
+        let feature = (new GeoJSON()).readFeatures(geojsonObject)
+        parentSource.addFeatures(feature)
+
+      }
+
+    },
+
+    //加载当前园区的标注
+    loadPolygon (subAgencyArray) {
+      polygonSource.clear()//清空多边形标注
+      iconSource.clear()//清空多边形标注
+
+      let featureData = []//标注数据
+      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        let count = 0
+        for (let i = 0; i < subAgencyArray.length; i++) {
+          const agencyItem = subAgencyArray[i]
+
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            let urlNum = count % 3
+            count++
+
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name,
+                colorIndex: urlNum//颜色随机的索引
+              },
+              geometry: {
+                type: 'Polygon',
+                coordinates: [],
+              },
+            }
+            let coorArray = agencyItem.coordinates.split(',')//坐标数组
+
+            let itemArray = []//单个点位的[lon,lat]，数组
+            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
+
+            coorArray.forEach((item, index) => {
+              itemArray.push(item)
+              if (index % 2 == 0) {//偶
+
+              } else {//奇
+                polygonArray.push(itemArray)
+                itemArray = []
+              }
+
+            });
+            oneData.geometry.coordinates.push(polygonArray)
+            featureData.push(oneData)
+          }
+        }
+      }
+
+      if (featureData && featureData.length > 0) {
+        var geojsonObject = {
+          'type': 'FeatureCollection',
+          'features': featureData
+        };
+        let feature = (new GeoJSON()).readFeatures(geojsonObject)
+
+        polygonSource.addFeatures(feature)
+
+        let iconFeatures = [];
+        feature.forEach(oneIcon => {
+
+          var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
+          // var center = getCenter(extent);   //获取边界区域的中心位置
+          //添加标注
+          let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
+          let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
+
+          let oneArray = [x, y]
+          this.iconCoordinators.push(oneArray)
+          // debugger
+          //地图icon样式
+          let oneCctv = new Feature({
+            geometry: new Point([x, y]),
+            id: oneIcon.id_,
+            properties: {
+              type: "icon",
+              id: oneIcon.id_
+            }
+          });
+
+          let iconStyle = new Style({
+            image: new Icon({
+              // anchor: [0.5, 0.5],
+              // imgSize: [32, 32],
+              scale: 0.5,
+              // src: "/img/largeScreen/icon_camra.png"
+              // src: "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png"
+              src: iconUrlArray[oneIcon.values_.colorIndex]
+            })
+          });
+
+          oneCctv.setStyle(iconStyle);
+          iconFeatures.push(oneCctv);
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+
+    },
+
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 12
+      } else if (agencyLevel === 'street') {
+        this.zoom = 13
+      } else if (agencyLevel === 'community') {
+        this.zoom = 14
+      }
+
+    },
+
+    firstCenterMap () {
+      this.centerPoint = []
+      if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+
+      } else {
+        this.centerPoint = centerPointGlobal
+      }
+
+      if (!this.zoom) {
+        this.setZoom(this.orgData.agencyLevel)
+      }
+    },
+
+    initMap () {
+      this.firstCenterMap()
+
+      gaodeMapLayer = new TileLayer({
+        title: "地图",
+        source: new XYZ({
+          //指定url瓦片
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true//x方向平铺，也可以选择false
+        }),
+        zIndex: 20
+      });
+
+      mapView = new View({
+        //中心点坐标
+        center: this.centerPoint,
+        // projection: 'EPSG:3857',
+        projection: 'EPSG:4326',
+        zoom: this.zoom,
+        minZoom: this.minZoom
+      })
+
+      //初始化map和地图底图
+      //创建地图容器
+      map = new Map({
+        layers: [gaodeMapLayer],
+        //加载瓦片图层数据
+        view: mapView,
+        target: 'map'
+        //目标加载到map中
+      })
+
+      map.on('singleclick', function (e) {
+        // console.log(e.coordinate)
+        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+      })
+
+      //去除双击放大效果
+      const dblClickInteraction = map
+        .getInteractions()
+        .getArray()
+        .find(interaction => {
+          return interaction instanceof DoubleClickZoom;
+        });
+      map.removeInteraction(dblClickInteraction);
+
+    },
+    //添加变电站标注图层
+    addParentLayer () {
+      parentSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      parentLayer = new VectorLayer({
+        source: parentSource,
+        style: parentStyleFunction,
+        zIndex: 50
+      });
+
+
+      map.addLayer(parentLayer)
+
+
+    },
+
+    //添加变电站标注图层
+    addPolygonLayer () {
+      polygonSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      polygonLayer = new VectorLayer({
+        source: polygonSource,
+        style: polygonStyleFunction,
+        zIndex: 50
+      });
+
+      //选中多边形后的样式
+      var overlayStyle = (function () {
+
+        return function (feature) {
+          var styles = {};
+          styles['Polygon'] = [
+            new Style({
+              stroke: new Stroke({
+                color: '#ec9000',
+                width: 2
+              })
+            }),
+
+            new Style({
+              fill: new Fill({
+                color: 'rgba(0, 0, 255, 0.1)'
+              })
+            }),
+            new Style({
+              text: createTextStyle(feature)
+            })
+          ];
+          styles['MultiPolygon'] = styles['Polygon'];
+          return styles[feature.getGeometry().getType()];
+        };
+      })();
+
+      select = new Select({
+        style: overlayStyle
+      });
+
+
+      map.addLayer(polygonLayer)
+      map.addInteraction(select);
+
+      select.on('select', e => {
+        this.toSubAgency('polygon', e)
+      });
+
+    },
+
+    addIconLayer () {
+      iconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      iconLayer = new VectorLayer({
+        source: iconSource,
+        zIndex: 70
+      });
+
+      map.addLayer(iconLayer);
+
+    },
+
+    //取随机数
+    getRndBetween (lowerLimit, upperLimit) {
+      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
+    },
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  props: {
+
+    // vueFlag: {
+    //   type: String,
+    //   default: "alarm"
+    // }
+  },
+  computed: {
+
+    mapHeight () {
+
+      return this.clientHeight - 120;
+
+    },
+    // zoom: {
+    //   get () {
+    //     //根据不同屏幕分辨率，控制zoom大小
+    //     if (this.clientHeight < 900) {
+    //       return 2.3
+    //     } else {
+    //       return 2.8
+    //     }
+    //   },
+    //   set (value) {
+    //   }
+    // },
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: { BasicInfoCommunity, PeopleSearch, People, cptCard, ScreenLoading },
+}
+export default vueGis;
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_content {
+  .ol-viewport {
+    border-radius: 5px;
+  }
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+</style>  
+
+<style lang="scss" scoped>
+.aaa {
+  height: 100px;
+  width: 100px;
+  background-color: aquamarine;
+}
+.slideFade-enter {
+  animation: slideFade-dialog-fade-in 0.5s ease;
+}
+.slideFade-leave {
+  animation: slideFade-dialog-fade-out 0.5s ease forwards;
+}
+.slideFade-enter-active {
+  animation: slideFade-dialog-fade-in 0.5s ease;
+}
+.slideFade-leave-active {
+  animation: slideFade-dialog-fade-out 0.5s ease forwards;
+}
+
+@keyframes slideFade-dialog-fade-in {
+  from {
+    left: 110px;
+  }
+  to {
+    left: 0px;
+  }
+}
+@keyframes slideFade-dialog-fade-out {
+  from {
+    left: 0px;
+  }
+  to {
+    left: 100px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/visual/basicinfo/basicInfoMain.vue b/src/views/modules/visual/basicinfo/basicInfoMain.vue
index 44b04d0f..d85baf72 100644
--- a/src/views/modules/visual/basicinfo/basicInfoMain.vue
+++ b/src/views/modules/visual/basicinfo/basicInfoMain.vue
@@ -14,57 +14,6 @@
       </div>
     </div>
 
-    <!-- 组织列表 -->
-    <transition name="slideFade">
-      <div v-show="isshow&&(orgLevel!=='people' && orgLevel!=='search' && orgLevel!=='neighborHood')"
-           transiton="slideFade"
-           class="div_agency_list">
-        <div class="agency_main">
-          <el-scrollbar style="height:98%"
-                        wrap-style="overflow-x:hidden">
-
-            <div v-if="subAgencyArray.length>0"
-                 class="agency_list">
-              <div v-for="(item,index) in subAgencyArray"
-                   :key="index"
-                   @click="clickAgencyItem(item,index)"
-                   :class="['agency_item',{'agency_item_on':index%2 ==0}]">
-                <div class="agency_item_name">{{item.name}}</div>
-
-              </div>
-            </div>
-            <div v-else>
-              <img src="@/assets/img/modules/visual/noData.png"
-                   alt=""
-                   srcset=""
-                   class="no-data-img" />
-            </div>
-          </el-scrollbar>
-
-          <div @click="isshow=!isshow"
-               class="arrow_tip">
-            <img src="../../../../assets/img/modules/visual/sousuo.png"
-                 alt />
-          </div>
-        </div>
-      </div>
-    </transition>
-
-    <!-- <transition name="slideFade">
-
-      <div v-if="isshow"
-           class="aaa"
-           transiton="slideFade">
-        <div>1111111</div>
-
-        <div class="arrow_tip"
-             @click="isshow=!isshow">
-          <img src="../../../../assets/img/modules/visual/sousuo.png"
-               alt />
-        </div>
-      </div>
-    </transition> -->
-
     <people-search v-show="orgLevel==='search'"
                    @toSubAgency="toSubAgency"
                    ref="ref_search"></people-search>
@@ -84,8 +33,44 @@
            class="div_map"
            id="map"
            ref="map">
-        <!-- <div id="map"
-             class="map"></div> -->
+
+        <div class="m-sidebar">
+          <div class="wrap"
+               :class="[{'wrap-hidden':!showAgencyList}]">
+            <div @click="hideAgencyList"
+                 class="arrow_tip">
+              <img src="@/assets/img/modules/visual/popup.png"
+                   alt />
+            </div>
+
+            <div class="div_agency_list">
+              <div class="agency_main">
+                <el-scrollbar style="height:98%"
+                              wrap-style="overflow-x:hidden">
+
+                  <div v-if="subAgencyArray.length>0"
+                       class="agency_list">
+                    <div v-for="(item,index) in subAgencyArray"
+                         :key="index"
+                         @click="clickAgencyItem(item,index)"
+                         :class="['agency_item',{'agency_item_on':index%2 ==0}]">
+                      <div class="agency_item_name">{{item.name}}</div>
+
+                    </div>
+                  </div>
+                  <div v-else>
+                    <img src="@/assets/img/modules/visual/noData.png"
+                         alt=""
+                         srcset=""
+                         class="no-data-img" />
+                  </div>
+                </el-scrollbar>
+
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
 
       <div class="div_data">
@@ -269,7 +254,8 @@ const vueGis = {
   name: 'HomeMap',
   data () {
     return {
-      isshow: true,
+      showAgencyList: true,
+      agencyFadeIn: true,
       centerPoint: [],//中心点位置
       zoom: 14,//缩放范围：区14
       minZoom: 1,//最小缩放
@@ -327,7 +313,21 @@ const vueGis = {
 
   },
   methods: {
+    hideAgencyList () {
+      this.showAgencyList = !this.showAgencyList
+      // if (this.showAgencyList) {
+      //   this.agencyFadeIn = false
+      //   setTimeout(() => {
+      //     this.showAgencyList = false
+      //   }, 1000)
+
+      // } else {
+      //   this.agencyFadeIn = true
+      //   this.showAgencyList = true
+      // }
 
+
+    },
     handleSearch () {
       this.toSubAgency('search')
     },
@@ -997,38 +997,4 @@ export default vueGis;
 </style>  
 
 <style lang="scss" scoped>
-.aaa {
-  height: 100px;
-  width: 100px;
-  background-color: aquamarine;
-}
-.slideFade-enter {
-  animation: slideFade-dialog-fade-in 0.5s ease;
-}
-.slideFade-leave {
-  animation: slideFade-dialog-fade-out 0.5s ease forwards;
-}
-.slideFade-enter-active {
-  animation: slideFade-dialog-fade-in 0.5s ease;
-}
-.slideFade-leave-active {
-  animation: slideFade-dialog-fade-out 0.5s ease forwards;
-}
-
-@keyframes slideFade-dialog-fade-in {
-  from {
-    left: 110px;
-  }
-  to {
-    left: 0px;
-  }
-}
-@keyframes slideFade-dialog-fade-out {
-  from {
-    left: 0px;
-  }
-  to {
-    left: 100px;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/modules/visual/basicinfo/people.vue b/src/views/modules/visual/basicinfo/people.vue
index f2585b70..edfe119d 100644
--- a/src/views/modules/visual/basicinfo/people.vue
+++ b/src/views/modules/visual/basicinfo/people.vue
@@ -7,9 +7,11 @@
             <img src="@/assets/img/shuju/title-tip.png" />
             <span>人员情况</span>
           </div>
-          <div class="more" @click="showedMoreInfo = true">查看更多</div>
+          <div class="more"
+               @click="showedMoreInfo = true">查看更多</div>
           <div class="ren">
-            <img class="pic-ren" src="@/assets/img/shuju/people/ren.png" />
+            <img class="pic-ren"
+                 src="@/assets/img/shuju/people/ren.png" />
             <div class="ren-name">
               <span>{{ info.name }}</span>
               <img src="@/assets/img/shuju/people/arrow.png" />
@@ -106,13 +108,11 @@
         </cpt-card>
       </div>
 
-      <people-more
-        v-show="showedMoreInfo"
-        v-if="userId"
-        :userId="userId"
-        :gridName="info.gridName"
-        @close="showedMoreInfo = false"
-      />
+      <people-more v-show="showedMoreInfo"
+                   v-if="userId"
+                   :userId="userId"
+                   :gridName="info.gridName"
+                   @close="showedMoreInfo = false" />
 
       <div class="m-relation">
         <cpt-card>
@@ -122,168 +122,99 @@
           </div>
           <div class="info">
             <div class="huzhu">
-              <img class="huzhu-bg" src="@/assets/img/shuju/people/huzhu.png" />
-              <img
-                class="huzhu-ico"
-                src="@/assets/img/shuju/people/huzhu-home.png"
-              />
+              <img class="huzhu-bg"
+                   src="@/assets/img/shuju/people/huzhu.png" />
+              <img class="huzhu-ico"
+                   src="@/assets/img/shuju/people/huzhu-home.png" />
               <div class="huzhu-name">{{ houseInfo.ownerName }}</div>
               <p>（户主）</p>
             </div>
 
-            <div
-              class="rel z-zuo-2"
-              @click="toUserInfo(houseInfo.userList[0].userId)"
-              v-if="houseInfo.userList[0]"
-            >
-              <img
-                class="rel-bg"
-                src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
-              />
-              <img
-                class="rel-line"
-                src="@/assets/img/shuju/people/huzhu-line/zuo2.png"
-              />
-              <div
-                class="rel-text"
-                :class="houseInfo.userList[0].isSelf == '1' ? 'z-on' : ''"
-              >
-                <span class="rel-call">{{
+            <div class="rel z-zuo-2"
+                 @click="toUserInfo(houseInfo.userList[0].userId)"
+                 v-if="houseInfo.userList[0]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/zuo2.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[0].isSelf == '1' ? 'z-on' : ''">
+                <div class="rel-call">岳父母或公婆</div>
+                <div class="rel-name">吉克隽逸</div>
+                <!-- <span class="rel-call">{{
                   houseInfo.userList[0].relation
                 }}</span>
-                <span class="rel-name"
-                  >（{{ houseInfo.userList[0].userName }}）</span
-                >
+                <span class="rel-name">（{{ houseInfo.userList[0].userName }}）</span> -->
               </div>
             </div>
 
-            <div
-              class="rel z-you-2"
-              @click="toUserInfo(houseInfo.userList[1].userId)"
-              v-if="houseInfo.userList[1]"
-            >
-              <img
-                class="rel-bg"
-                src="@/assets/img/shuju/people/huzhu-kuang-you.png"
-              />
-              <img
-                class="rel-line"
-                src="@/assets/img/shuju/people/huzhu-line/you2.png"
-              />
-              <div
-                class="rel-text"
-                :class="houseInfo.userList[1].isSelf == '1' ? 'z-on' : ''"
-              >
-                <span class="rel-call">{{
-                  houseInfo.userList[1].relation
-                }}</span>
-                <span class="rel-name"
-                  >（{{ houseInfo.userList[1].userName }}）</span
-                >
+            <div class="rel z-you-2"
+                 @click="toUserInfo(houseInfo.userList[1].userId)"
+                 v-if="houseInfo.userList[1]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/you2.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[1].isSelf == '1' ? 'z-on' : ''">
+                <div class="rel-call">{{ houseInfo.userList[1].relation }}</div>
+                <div class="rel-name">{{ houseInfo.userList[1].userName }}</div>
               </div>
             </div>
 
-            <div
-              class="rel z-zuo-1"
-              @click="toUserInfo(houseInfo.userList[2].userId)"
-              v-if="houseInfo.userList[2]"
-            >
-              <img
-                class="rel-bg"
-                src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
-              />
-              <img
-                class="rel-line"
-                src="@/assets/img/shuju/people/huzhu-line/zuo1.png"
-              />
-              <div
-                class="rel-text"
-                :class="houseInfo.userList[2].isSelf == '1' ? 'z-on' : ''"
-              >
-                <span class="rel-call">{{
-                  houseInfo.userList[2].relation
-                }}</span>
-                <span class="rel-name"
-                  >（{{ houseInfo.userList[2].userName }}）</span
-                >
+            <div class="rel z-zuo-1"
+                 @click="toUserInfo(houseInfo.userList[2].userId)"
+                 v-if="houseInfo.userList[2]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/zuo1.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[2].isSelf == '1' ? 'z-on' : ''">
+                <div class="rel-call">{{ houseInfo.userList[2].relation  }}</div>
+                <div class="rel-name">{{ houseInfo.userList[2].userName }}</div>
               </div>
             </div>
 
-            <div
-              class="rel z-you-1"
-              @click="toUserInfo(houseInfo.userList[3].userId)"
-              v-if="houseInfo.userList[3]"
-            >
-              <img
-                class="rel-bg"
-                src="@/assets/img/shuju/people/huzhu-kuang-you.png"
-              />
-              <img
-                class="rel-line"
-                src="@/assets/img/shuju/people/huzhu-line/you1.png"
-              />
-              <div
-                class="rel-text"
-                :class="houseInfo.userList[3].isSelf == '1' ? 'z-on' : ''"
-              >
-                <span class="rel-call">{{
-                  houseInfo.userList[3].relation
-                }}</span>
-                <span class="rel-name"
-                  >（{{ houseInfo.userList[3].userName }}）</span
-                >
+            <div class="rel z-you-1"
+                 @click="toUserInfo(houseInfo.userList[3].userId)"
+                 v-if="houseInfo.userList[3]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/you1.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[3].isSelf == '1' ? 'z-on' : ''">
+                <div class="rel-call">{{   houseInfo.userList[3].relation   }}</div>
+                <span class="rel-name">{{ houseInfo.userList[3].userName }}</span>
               </div>
             </div>
 
-            <div
-              class="rel z-zuo-3"
-              @click="toUserInfo(houseInfo.userList[4].userId)"
-              v-if="houseInfo.userList[4]"
-            >
-              <img
-                class="rel-bg"
-                src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
-              />
-              <img
-                class="rel-line"
-                src="@/assets/img/shuju/people/huzhu-line/zuo3.png"
-              />
-              <div
-                class="rel-text"
-                :class="houseInfo.userList[4].isSelf == '1' ? 'z-on' : ''"
-              >
-                <span class="rel-call">{{
-                  houseInfo.userList[4].relation
-                }}</span>
-                <span class="rel-name"
-                  >（{{ houseInfo.userList[4].userName }}）</span
-                >
+            <div class="rel z-zuo-3"
+                 @click="toUserInfo(houseInfo.userList[4].userId)"
+                 v-if="houseInfo.userList[4]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/zuo3.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[4].isSelf == '1' ? 'z-on' : ''">
+                <div class="rel-call">{{      houseInfo.userList[4].relation         }}</div>
+                <div class="rel-name">{{ houseInfo.userList[4].userName }}</div>
               </div>
             </div>
 
-            <div
-              class="rel z-you-3"
-              @click="toUserInfo(houseInfo.userList[5].userId)"
-              v-if="houseInfo.userList[5]"
-            >
-              <img
-                class="rel-bg"
-                src="@/assets/img/shuju/people/huzhu-kuang-you.png"
-              />
-              <img
-                class="rel-line"
-                src="@/assets/img/shuju/people/huzhu-line/you3.png"
-              />
-              <div
-                class="rel-text"
-                :class="houseInfo.userList[5].isSelf == '1' ? 'z-on' : ''"
-              >
-                <span class="rel-call">{{
-                  houseInfo.userList[5].relation
-                }}</span>
-                <span class="rel-name"
-                  >（{{ houseInfo.userList[5].userName }}）</span
-                >
+            <div class="rel z-you-3"
+                 @click="toUserInfo(houseInfo.userList[5].userId)"
+                 v-if="houseInfo.userList[5]">
+              <img class="rel-bg"
+                   src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
+              <img class="rel-line"
+                   src="@/assets/img/shuju/people/huzhu-line/you3.png" />
+              <div class="rel-text"
+                   :class="houseInfo.userList[5].isSelf == '1' ? 'z-on' : ''">
+                <div class="rel-call">{{     houseInfo.userList[5].relation      }}</div>
+                <div class="rel-name">{{ houseInfo.userList[5].userName }}</div>
               </div>
             </div>
           </div>
@@ -299,23 +230,20 @@
           </div>
 
           <div class="tb">
-            <cpt-tb
-              :col-list="demand.colList"
-              :loading="demand.loading"
-              :header="demand.header"
-              :list="demand.list"
-              @operate="handleOperateDemandList"
-            ></cpt-tb>
-
-            <div class="m-pagination" v-if="demand.total > demand.pageSize">
-              <el-pagination
-                :current-page="demand.pageNo"
-                :page-size="demand.pageSize"
-                :total="demand.total"
-                background
-                layout="prev, pager, next"
-                @current-change="handlePageNoChangeDemand"
-              >
+            <cpt-tb :col-list="demand.colList"
+                    :loading="demand.loading"
+                    :header="demand.header"
+                    :list="demand.list"
+                    @operate="handleOperateDemandList"></cpt-tb>
+
+            <div class="m-pagination"
+                 v-if="demand.total > demand.pageSize">
+              <el-pagination :current-page="demand.pageNo"
+                             :page-size="demand.pageSize"
+                             :total="demand.total"
+                             background
+                             layout="prev, pager, next"
+                             @current-change="handlePageNoChangeDemand">
               </el-pagination>
             </div>
           </div>
@@ -327,83 +255,68 @@
           <cpt-card>
             <div class="title">
               <img src="@/assets/img/shuju/title-tip.png" />
-              <a
-                :class="{ 'z-on': showedIncidentOrTopic == 'incident' }"
-                @click="showedIncidentOrTopic = 'incident'"
-                >上报事件</a
-              >
-              <a
-                :class="{ 'z-on': showedIncidentOrTopic == 'topic' }"
-                @click="showedIncidentOrTopic = 'topic'"
-                >发布话题</a
-              >
+              <a :class="{ 'z-on': showedIncidentOrTopic == 'incident' }"
+                 @click="showedIncidentOrTopic = 'incident'">上报事件</a>
+              <a :class="{ 'z-on': showedIncidentOrTopic == 'topic' }"
+                 @click="showedIncidentOrTopic = 'topic'">发布话题</a>
             </div>
-            <div class="list-wrap" v-show="showedIncidentOrTopic == 'incident'">
+            <div class="list-wrap"
+                 v-show="showedIncidentOrTopic == 'incident'">
               <div class="list">
-                <div
-                  class="item"
-                  :key="'incident' + index"
-                  v-for="(item, index) in incident.list"
-                  @click="handleClickIncident(index)"
-                >
+                <div class="item"
+                     :key="'incident' + index"
+                     v-for="(item, index) in incident.list"
+                     @click="handleClickIncident(index)">
                   <div class="item-title">{{ item.eventContent }}</div>
                   <div class="item-date">{{ item.reportTime }}</div>
                 </div>
               </div>
 
-              <div
-                class="m-pagination"
-                v-if="incident.total > incident.pageSize"
-              >
-                <el-pagination
-                  :current-page="incident.pageNo"
-                  :page-size="incident.pageSize"
-                  :total="incident.total"
-                  background
-                  layout="prev, pager, next"
-                  @current-change="handlePageNoChangeIncident"
-                >
+              <div class="m-pagination"
+                   v-if="incident.total > incident.pageSize">
+                <el-pagination :current-page="incident.pageNo"
+                               :page-size="incident.pageSize"
+                               :total="incident.total"
+                               background
+                               layout="prev, pager, next"
+                               @current-change="handlePageNoChangeIncident">
                 </el-pagination>
               </div>
 
-              <div v-if="incident.list.length == 0" class="m-hint">
-                <img
-                  src="@/assets/img/modules/visual/noData.png"
-                  class="no-data-img"
-                />
+              <div v-if="incident.list.length == 0"
+                   class="m-hint">
+                <img src="@/assets/img/modules/visual/noData.png"
+                     class="no-data-img" />
               </div>
             </div>
 
-            <div class="list-wrap" v-show="showedIncidentOrTopic == 'topic'">
+            <div class="list-wrap"
+                 v-show="showedIncidentOrTopic == 'topic'">
               <div class="list">
-                <div
-                  class="item"
-                  :key="'topic' + index"
-                  v-for="(item, index) in topic.list"
-                  @click="handleClickTopic(index)"
-                >
+                <div class="item"
+                     :key="'topic' + index"
+                     v-for="(item, index) in topic.list"
+                     @click="handleClickTopic(index)">
                   <div class="item-title">{{ item.topicContent }}</div>
                   <div class="item-date">{{ item.releaseTime }}</div>
                 </div>
               </div>
 
-              <div class="m-pagination" v-if="topic.total > topic.pageSize">
-                <el-pagination
-                  :current-page="topic.pageNo"
-                  :page-size="topic.pageSize"
-                  :total="topic.total"
-                  background
-                  layout="prev, pager, next"
-                  @current-change="handlePageNoChangeTopic"
-                >
+              <div class="m-pagination"
+                   v-if="topic.total > topic.pageSize">
+                <el-pagination :current-page="topic.pageNo"
+                               :page-size="topic.pageSize"
+                               :total="topic.total"
+                               background
+                               layout="prev, pager, next"
+                               @current-change="handlePageNoChangeTopic">
                 </el-pagination>
               </div>
 
-              <div v-if="topic.list.length == 0" class="m-hint">
-                <img
-                  src="@/assets/img/modules/visual/noData.png"
-                  class="no-data-img"
-                />
+              <div v-if="topic.list.length == 0"
+                   class="m-hint">
+                <img src="@/assets/img/modules/visual/noData.png"
+                     class="no-data-img" />
               </div>
             </div>
           </cpt-card>
@@ -418,12 +331,10 @@
 
             <div class="list-wrap">
               <div class="list">
-                <div
-                  class="item"
-                  :key="'point' + index"
-                  v-for="(item, index) in point.list"
-                  @click="handleClickPoint(index)"
-                >
+                <div class="item"
+                     :key="'point' + index"
+                     v-for="(item, index) in point.list"
+                     @click="handleClickPoint(index)">
                   <div class="item-row">
                     <div class="item-l">
                       <div class="item-point">{{ item.point }}</div>
@@ -436,23 +347,21 @@
                 </div>
               </div>
 
-              <div class="m-pagination" v-if="point.total > point.pageSize">
-                <el-pagination
-                  :current-page="point.pageNo"
-                  :page-size="point.pageSize"
-                  :total="point.total"
-                  background
-                  layout="prev, pager, next"
-                  @current-change="handlePageNoChangePoint"
-                >
+              <div class="m-pagination"
+                   v-if="point.total > point.pageSize">
+                <el-pagination :current-page="point.pageNo"
+                               :page-size="point.pageSize"
+                               :total="point.total"
+                               background
+                               layout="prev, pager, next"
+                               @current-change="handlePageNoChangePoint">
                 </el-pagination>
               </div>
 
-              <div v-if="point.list.length == 0" class="m-hint">
-                <img
-                  src="@/assets/img/modules/visual/noData.png"
-                  class="no-data-img"
-                />
+              <div v-if="point.list.length == 0"
+                   class="m-hint">
+                <img src="@/assets/img/modules/visual/noData.png"
+                     class="no-data-img" />
               </div>
             </div>
           </cpt-card>
@@ -460,29 +369,23 @@
       </div>
     </div>
 
-    <demand-info
-      v-if="demand.list.length > 0 && showedDemandInfo"
-      :userId="userId"
-      queryOrigin="personal-data"
-      :demandId="demand.srcList[demand.currentIndex].demandRecId"
-      @close="showedDemandInfo = false"
-    />
-
-    <incident-info
-      v-if="incident.list.length > 0 && incident.showedInfo"
-      :resiEventId="incident.list[incident.currentIndex].resiEventId"
-      :epmetUserIdList="info.epmetUserIdList"
-      :icResiUserId="userId"
-      @close="incident.showedInfo = false"
-    />
-
-    <topic-info
-      v-if="topic.list.length > 0 && topic.showedInfo"
-      :topicId="topic.list[topic.currentIndex].topicId"
-      :epmetUserIdList="info.epmetUserIdList"
-      :icResiUserId="userId"
-      @close="topic.showedInfo = false"
-    />
+    <demand-info v-if="demand.list.length > 0 && showedDemandInfo"
+                 :userId="userId"
+                 queryOrigin="personal-data"
+                 :demandId="demand.srcList[demand.currentIndex].demandRecId"
+                 @close="showedDemandInfo = false" />
+
+    <incident-info v-if="incident.list.length > 0 && incident.showedInfo"
+                   :resiEventId="incident.list[incident.currentIndex].resiEventId"
+                   :epmetUserIdList="info.epmetUserIdList"
+                   :icResiUserId="userId"
+                   @close="incident.showedInfo = false" />
+
+    <topic-info v-if="topic.list.length > 0 && topic.showedInfo"
+                :topicId="topic.list[topic.currentIndex].topicId"
+                :epmetUserIdList="info.epmetUserIdList"
+                :icResiUserId="userId"
+                @close="topic.showedInfo = false" />
   </div>
 </template>
 
@@ -498,7 +401,7 @@ import cptTb from "@/views/modules/visual/cpts/tb";
 
 export default {
   name: "HomeMap",
-  data() {
+  data () {
     return {
       showedMoreInfo: false,
       showedDemandInfo: false,
@@ -619,24 +522,24 @@ export default {
   },
 
   watch: {
-    uid(id) {
+    uid (id) {
       this.userId = id;
     },
-    userId() {
+    userId () {
       this.getApiData();
       window.scrollTo(0, 0);
     },
   },
 
-  async mounted() {
+  async mounted () {
     this.userId = this.uid;
     this.getApiData();
   },
 
   methods: {
-    handleSearch() {},
+    handleSearch () { },
 
-    async getApiData() {
+    async getApiData () {
       await this.getInfo();
       this.getHouseInfo();
       this.getDemandData();
@@ -645,12 +548,12 @@ export default {
       this.getPointData();
     },
 
-    toUserInfo(uid) {
+    toUserInfo (uid) {
       this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
     },
 
     //加载组织数据
-    async getInfo() {
+    async getInfo () {
       const url = "/epmetuser/icresiuser/persondata";
       let params = {
         userId: this.userId,
@@ -666,7 +569,7 @@ export default {
     },
 
     //加载组织数据
-    async getHouseInfo() {
+    async getHouseInfo () {
       const url = "/epmetuser/icresiuser/ownerrelation";
       let params = {
         userId: this.userId,
@@ -681,12 +584,12 @@ export default {
       }
     },
 
-    handlePageNoChangeDemand(val) {
+    handlePageNoChangeDemand (val) {
       this.demand.pageNo = val;
       this.getDemandData();
     },
 
-    handleOperateDemandList(index, type) {
+    handleOperateDemandList (index, type) {
       if (type == "查看") {
         this.showedDemandInfo = true;
         this.demand.currentIndex = index;
@@ -694,7 +597,7 @@ export default {
     },
 
     //加载组织数据
-    async getDemandData() {
+    async getDemandData () {
       const url = "/heart/userdemand/mydemand";
       let params = {
         epmetUserIdList: this.info.epmetUserIdList,
@@ -724,18 +627,18 @@ export default {
       }
     },
 
-    handlePageNoChangeIncident(val) {
+    handlePageNoChangeIncident (val) {
       this.incident.pageNo = val;
       this.getIncidentData();
     },
 
-    handleClickIncident(index) {
+    handleClickIncident (index) {
       this.incident.showedInfo = true;
       this.incident.currentIndex = index;
     },
 
     //加载组织数据
-    async getIncidentData() {
+    async getIncidentData () {
       const url = "/gov/project/resievent/pageuserreported";
       let params = {
         epmetUserIdList: this.info.epmetUserIdList,
@@ -755,18 +658,18 @@ export default {
       }
     },
 
-    handlePageNoChangeTopic(val) {
+    handlePageNoChangeTopic (val) {
       this.topic.pageNo = val;
       this.getTopicData();
     },
 
-    handleClickTopic(index) {
+    handleClickTopic (index) {
       this.topic.showedInfo = true;
       this.topic.currentIndex = index;
     },
 
     //加载组织数据
-    async getTopicData() {
+    async getTopicData () {
       const url = "/data/aggregator/resigroup/pageusertopic";
       let params = {
         epmetUserIdList: this.info.epmetUserIdList,
@@ -786,18 +689,18 @@ export default {
       }
     },
 
-    handlePageNoChangePoint(val) {
+    handlePageNoChangePoint (val) {
       this.point.pageNo = val;
       this.getPointData();
     },
 
-    handleClickPoint(index) {
+    handleClickPoint (index) {
       this.point.showedInfo = true;
       this.point.currentIndex = index;
     },
 
     //加载组织数据
-    async getPointData() {
+    async getPointData () {
       const url = "/point/resi/point/pageuserpoint";
       let params = {
         epmetUserIdList: this.info.epmetUserIdList,
diff --git a/src/views/modules/visual/basicinfo/personCategory/index.vue b/src/views/modules/visual/basicinfo/personCategory/index.vue
index 09a5e1bc..8d6607fa 100644
--- a/src/views/modules/visual/basicinfo/personCategory/index.vue
+++ b/src/views/modules/visual/basicinfo/personCategory/index.vue
@@ -46,25 +46,50 @@
               </div>
             </div>
             <div class="top-item-num">
-              <div class="num-item">
+              <div class="item_left">较上月</div>
+              <div class="item_right">
+                <div class="item_right_row">
+                  <div class="item_right_title">新人员增加</div>
+                  <div>
+                    <span v-if=" item.immigration!==0">{{ "+" }}</span>
+                    <span>{{  item.immigration }}</span>
+                  </div>
+
+                </div>
+
+                <div class="item_right_row row2">
+                  <div class="item_right_title">原人员减少</div>
+                  <div>
+                    <span v-if=" item.emigration!==0">{{ "-" }}</span>
+                    <span>{{  item.emigration }}</span>
+                  </div>
+
+                </div>
+
+              </div>
+              <!-- <div class="num-item">
                 <div>较上月</div>
+
                 <div>
                   <div>
+                    <span>新人员增加</span>
                     <span v-if=" item.immigration!==0">{{ "+" }}</span>
                     <span>{{  item.immigration }}</span>
                   </div>
 
                 </div>
-              </div>
-              <div class="num-item">
+              </div> -->
+              <!-- <div class="num-item">
                 <div>{{"  "}}</div>
+
                 <div>
                   <div>
+                    <span>原人员减少</span>
                     <span v-if=" item.emigration!==0">{{ "-" }}</span>
                     <span>{{  item.emigration }}</span>
                   </div>
                 </div>
-              </div>
+              </div> -->
             </div>
           </div>
         </div>