From 8bab7d0249c3b71f98ac9c26a6d0ab936d82a926 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Thu, 2 Dec 2021 16:10:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E6=B2=BB=E7=90=86=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |   6 +
 .../communityGovern/basicInfoCommunity.vue    | 442 +++++++++++
 .../communityGovern/cpts/people-more.vue      | 503 ++++++++++++
 .../modules/visual/communityGovern/index.vue  | 748 ++++++++++++++++++
 .../modules/visual/communityGovern/people.vue | 408 ++++++++++
 .../visual/communityGovern/peopleSearch.vue   | 164 ++++
 6 files changed, 2271 insertions(+)
 create mode 100644 src/views/modules/visual/communityGovern/basicInfoCommunity.vue
 create mode 100644 src/views/modules/visual/communityGovern/cpts/people-more.vue
 create mode 100644 src/views/modules/visual/communityGovern/index.vue
 create mode 100644 src/views/modules/visual/communityGovern/people.vue
 create mode 100644 src/views/modules/visual/communityGovern/peopleSearch.vue

diff --git a/src/router/index.js b/src/router/index.js
index d997154b7..74065fe04 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -251,6 +251,12 @@ router.beforeEach((to, from, next) => {
           name: "人员预警",
           url: "visual/warning/index",
         },
+        {
+          icon: "icon-setting",
+          id: "6",
+          name: "社区治理",
+          url: "visual/communityGovern/index",
+        },
       ];
       fnAddDynamicMenuRoutes2(window.SITE_CONFIG["menuShujuList"]);
       // next({ ...to, replace: true })
diff --git a/src/views/modules/visual/communityGovern/basicInfoCommunity.vue b/src/views/modules/visual/communityGovern/basicInfoCommunity.vue
new file mode 100644
index 000000000..dbb0a3c43
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/basicInfoCommunity.vue
@@ -0,0 +1,442 @@
+<template>
+
+  <div class="div_community_info"
+       @click="handleShowAllUser()">
+    <div class="div_select">
+
+      <img src="../../../../assets/img/shuju/title-tip.png"
+           alt />
+      <div class="customer_select">
+        <!-- <span>{{neighborHoodName+'-'}}</span> -->
+        <el-select v-model="selBuildingId"
+                   :popper-append-to-body="false"
+                   placeholder="请选择">
+          <el-option v-for="(item,index) in buildingArray"
+                     :key="item.buildingId"
+                     :label="item.buildingName"
+                     :value="item.buildingId"
+                     @click.native="handleClickBuilding(index)">
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="div_room_bar">
+      <el-scrollbar style="height:100%">
+        <div v-if="roomLoaded"
+             class="div_room">
+
+          <div v-for="(item,index) in roomArray"
+               :key="index"
+               :class="['item',{'item_sel':selHouseIndex==index}]"
+               @click="handleClickRoom(index)">
+            <span>{{item.houseName}}</span>
+
+            <div class="icon_party">
+              <img :src="item.partyUrl"
+                   alt />
+            </div>
+            <div class="icon_category">
+              <img v-for="(iconItem,iconIndex) in item.iconArrayShow"
+                   :key="iconIndex"
+                   :src="iconItem.iconUrl"
+                   alt />
+            </div>
+            <div @click.stop="handleShowAllUser(index)"
+                 class="div_user">
+
+              <span>全部成员</span>
+              <img src="../../../../assets/img/xiala.png"
+                   alt />
+
+              <div class="user_list"
+                   v-show="item.showAllUser&&userArray.length>0">
+                <div v-for="(userItem,userIndex) in userArray"
+                     :key="userIndex"
+                     class="user_item"
+                     @click.stop="handleClickUser(userItem.userId)">
+                  <div class="user_item_content">
+                    <div class="name">{{userItem.name}}</div>
+
+                    <img src="../../../../assets/img/jinru.png"
+                         alt />
+
+                  </div>
+                  <div :class="['item_line',{'last_line':userIndex==(userArray.length-1)}]"></div>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+let loading;//加载动画
+
+export default {
+
+  data () {
+    return {
+      //父组件传过来的小区id
+      neighborHoodId: '',
+      neighborHoodName: '',
+      buildingArray: [],//楼栋下拉框数据
+      selBuildingId: '',
+      selBuildingName: '',
+
+      roomLoaded: false,
+      roomArray: [],
+      selHouseId: '',
+      selHouseName: '',
+      selHouseIndex: 0,
+
+      userArray: [],
+      selUserName: '',
+      selUserId: '',
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      //下钻层级记录
+      runNum: 0,
+      runAgencyArray: [],
+
+    }
+  },
+  async mounted () {
+
+
+  },
+  methods: {
+    //小区id，小区名称
+    async initData (neighborHoodId, neighborHoodName) {
+      this.roomLoaded = false
+      this.neighborHoodId = neighborHoodId
+      this.neighborHoodName = neighborHoodName
+      //加载楼栋数据
+      await this.loadBuilding()
+
+      if (this.selBuildingId) {
+        await this.loadRoom()
+        this.roomLoaded = true
+
+      }
+
+    },
+
+    //切换楼栋
+    async handleClickBuilding (index) {
+
+      this.selBuildingId = this.buildingArray[index].buildingId
+      this.selBuildingName = this.buildingArray[index].buildingName
+
+      await this.loadRoom()
+      this.roomLoaded = true
+
+      this.$emit('refreshInfoList', this.selBuildingId, 'building')
+    },
+    //选择房间
+    handleClickRoom (index) {
+      this.selHouseIndex = index
+      this.selHouseId = this.roomArray[index].houseId
+      this.selHouseName = this.roomArray[index].houseName
+
+      // this.$emit('refreshInfoList', this.selHouseId, 'room')
+    },
+    //点击全部成员
+    async handleShowAllUser (selIndex) {
+      // this.startLoading()
+      await this.loadUser(this.roomArray[selIndex].houseId, selIndex)
+
+      this.roomArray.forEach((element, index) => {
+        let obj = JSON.parse(JSON.stringify(element))
+
+        if (index === selIndex) {
+          obj.showAllUser = !obj.showAllUser
+          this.$set(this.roomArray, selIndex, obj)
+
+
+        } else {
+          obj.showAllUser = false
+          this.$set(this.roomArray, index, obj)
+          // element.showAllUser = false
+        }
+      });
+      // this.endLoading()
+
+    },
+
+    //点击用户
+    handleClickUser (userId) {
+      this.$emit('toSubAgency', 'people', userId, "")
+    },
+    //获取右侧infolist数据
+    async loadList () {
+
+    },
+
+    //加载楼栋数据
+    async loadBuilding () {
+      const url = "/gov/org/agency/baseinfofamilybuilding"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/baseinfofamilybuilding"
+      let params = {
+        neighborHoodId: this.neighborHoodId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.buildingArray = data
+        this.buildingArray.forEach(item => {
+          if (!this.buildingArray[0].buildingName) {
+            item.buildingName = '楼'
+          }
+
+        });
+        if (this.buildingArray.length > 0) {
+          this.selBuildingId = this.buildingArray[0].buildingId
+          this.selBuildingName = this.buildingArray[0].buildingName
+
+        } else {
+          this.selBuildingId = ''
+          this.selBuildingName = ''
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载房间数据
+    async loadRoom () {
+      const url = "/gov/org/ichouse/houselist"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/ichouse/houselist"
+      let params = {
+        buildingId: this.selBuildingId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.roomArray = data
+
+        if (this.roomArray.length > 0) {
+
+          this.roomArray.forEach(roomItem => {
+            let iconArrayShow = JSON.parse(JSON.stringify(roomItem.categoryList))
+            let iconArray = []
+
+            if (iconArrayShow.length > 0) {
+              if (iconArrayShow[0].isSpecial === '1') {//第一个图标是党员
+                roomItem.isParty = true
+                roomItem.partyUrl = iconArrayShow[0].iconUrl
+                iconArrayShow.shift();//删除第一个数据
+              } else {
+                roomItem.isParty = false
+              }
+            }
+            if (iconArrayShow.length > 4) {//去前四个
+              for (let i = 0; i < 4; i++) {
+                iconArray.push(iconArrayShow[i])
+              }
+            } else {
+              iconArray = iconArrayShow
+            }
+            this.$nextTick(() => {
+              // ref_tree 元素的ref   value 绑定的node-key
+              roomItem.iconArrayShow = iconArray
+            });
+
+            roomItem.showAllUser = false
+
+          });
+
+        }
+
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载成员数据
+    async loadUser (houseId, index) {
+      const url = "/epmetuser/icresiuser/getpeoplebyroom"
+      // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/getpeoplebyroom"
+      let params = {
+        homeId: houseId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.userArray = data
+        if (this.userArray.length === 0) {
+          this.$message.warning('该房间下没有住户')
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  props: {
+
+  },
+  computed: {
+    // selectWidth () {
+    //   let width = this.selHouseName.length * 200
+    //   console.log(width)
+    //   return width + 'px';
+    // },
+
+    mapHeight () {
+
+      return this.clientHeight - 120;
+
+    },
+    // zoom: {
+    //   get () {
+    //     //根据不同屏幕分辨率，控制zoom大小
+    //     if (this.clientHeight < 900) {
+    //       return 2.3
+    //     } else {
+    //       return 2.8
+    //     }
+    //   },
+    //   set (value) {
+    //   }
+    // },
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: {},
+}
+
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang=scss scoped>
+.customer_select {
+  /* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
+  /deep/ input::-webkit-input-placeholder {
+    color: #fff;
+  }
+  /deep/ input::-moz-input-placeholder {
+    color: #fff;
+  }
+  /deep/ input::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  /* 修改的是el-input的样式 */
+  /* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */
+  /* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */
+  /deep/ .el-select,
+  /deep/ .el-input,
+  /deep/ .el-input__inner {
+    background-color: #08164d00;
+    color: #fff;
+    border: 0px;
+    border-radius: 0px;
+    text-align: left;
+    font-size: 22px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
+    display: flex;
+  }
+
+  /* el-input聚焦的时候 外层的border会有一个样式 */
+  /deep/ .el-select .el-input.is-focus .el-input__inner {
+    border: 0px;
+  }
+
+  /* 修改的是el-input上下的小图标的颜色 */
+  /deep/ .el-select .el-input .el-select__caret::before {
+    color: #fff;
+    content: "";
+    background: url("../../../../assets/img/xiala.png") center center no-repeat;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* 修改总体选项的样式 最外层 */
+  /deep/ .el-select-dropdown {
+    background-color: #08164d;
+    margin: 0px;
+    border: 0px;
+    border-radius: 0px;
+  }
+
+  /* 修改选项整体的样式 */
+  /deep/ .el-select-dropdown__list {
+    padding: 6px 0 20px 0;
+  }
+  /* 修改单个的选项的样式 */
+  /deep/ .el-select-dropdown__item {
+    background-color: transparent;
+    color: #fff;
+  }
+
+  /* item选项的hover样式 */
+  /deep/ .el-select-dropdown__item.hover,
+  /deep/ .el-select-dropdown__item:hover {
+    color: #409eff;
+  }
+
+  /* 修改的是下拉框选项内容上方的尖角 */
+  /deep/ .el-popper .popper__arrow,
+  .el-popper .popper__arrow::after {
+    display: none;
+  }
+}
+</style> 
+
+<style lang=scss >
+.el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/visual/communityGovern/cpts/people-more.vue b/src/views/modules/visual/communityGovern/cpts/people-more.vue
new file mode 100644
index 000000000..a634aadeb
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/cpts/people-more.vue
@@ -0,0 +1,503 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <cpt-card>
+        <div class="title">
+          <img src="@/assets/img/shuju/title-tip.png" />
+          <span>更多信息</span>
+        </div>
+
+        <div class="btn-close" @click="handleClose">
+          <img src="@/assets/img/shuju/people/close.png" />
+        </div>
+
+        <div
+          :key="'fieldSubList' + index"
+          v-for="(fieldSubList, index) in fieldList"
+        >
+          <div class="list">
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属网格：</span>
+              <span>{{ gridName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属小区：</span>
+              <span>{{ xiaoquName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属楼宇：</span>
+              <span>{{ louName }}-{{ danyuanName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属家庭：</span>
+              <span>{{ homeName }}</span>
+            </div>
+            <div class="item" :key="field.itemId" v-for="field in fieldSubList">
+              <span class="item-field">{{ field.label }}：</span>
+
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  info[field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        info[field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                info[field.columnName] == null ? "--" : info[field.columnName]
+              }}</span>
+            </div>
+          </div>
+
+          <div class="line"></div>
+        </div>
+
+        <div class="tabs">
+          <div
+            class="tab-btn"
+            @click="subStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
+          </div>
+          <div
+            v-show="index >= startGroupIndex && index < startGroupIndex + 9"
+            class="tab"
+            :class="groupIndex % groupList.length == index ? 'z-on' : ''"
+            :key="'tab' + index"
+            @click="groupIndex = index"
+            v-for="(item, index) in groupList"
+          >
+            {{ item.label }}
+          </div>
+          <div
+            class="tab-btn"
+            @click="addStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
+          </div>
+        </div>
+
+        <div
+          :key="'group' + index"
+          v-show="groupIndex % groupList.length == index"
+          v-for="(group, index) in groupList"
+        >
+          <div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length>0">
+            <div
+              class="list"
+              :key="'ic_resi_demand' + infoIndex"
+              v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"
+            >
+              <div
+                class="item"
+                :key="field.itemId"
+                v-for="field in group.itemList"
+              >
+                <span class="item-field">{{ field.label }}：</span>
+                <span
+                  v-if="
+                    field.itemType == 'select' ||
+                    field.itemType == 'radio' ||
+                    field.itemType == 'checkbox' ||
+                    field.itemType == 'cascader'
+                  "
+                  >{{
+                    infoItem[field.columnName] == null
+                      ? "--"
+                      : getOptionLabel(
+                          field.options,
+                          infoItem[field.columnName],
+                          field.itemType
+                        )
+                  }}</span
+                >
+
+                <span v-else>{{
+                  infoItem[field.columnName] == null
+                    ? "--"
+                    : infoItem[field.columnName]
+                }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="list" v-else>
+            <div
+              class="item"
+              :key="field.itemId"
+              v-for="field in group.itemList"
+            >
+              <span class="item-field">{{ field.label }}：</span>
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  !allInfo[group.tableName] ||
+                  allInfo[group.tableName][0][field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        allInfo[group.tableName][0][field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                !allInfo[group.tableName] ||
+                allInfo[group.tableName][0][field.columnName] == null
+                  ? "--"
+                  : allInfo[group.tableName][0][field.columnName]
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "peopleMore",
+  props: {
+    userId: {
+      type: String,
+      default: "",
+    },
+    gridName: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: {
+    cptCard,
+  },
+
+  data() {
+    return {
+      fieldList: [],
+      groupList: [],
+      groupIndex: 0,
+      startGroupIndex: 0,
+      info: {},
+      allInfo: {},
+
+      xiaoquList: [],
+      louList: [],
+      danyuanList: [],
+      homeList: [],
+    };
+  },
+
+  computed: {
+    xiaoquName() {
+      const {
+        xiaoquList,
+        info: { VILLAGE_ID },
+      } = this;
+      if (Array.isArray(xiaoquList) && xiaoquList.length > 0 && VILLAGE_ID) {
+        let item = xiaoquList.find((item) => item.value == VILLAGE_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    louName() {
+      const {
+        louList,
+        info: { BUILD_ID },
+      } = this;
+      if (Array.isArray(louList) && louList.length > 0 && BUILD_ID) {
+        let item = louList.find((item) => item.value == BUILD_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    danyuanName() {
+      const {
+        danyuanList,
+        info: { UNIT_ID },
+      } = this;
+      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
+        let item = danyuanList.find((item) => item.value == UNIT_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    danyuanName() {
+      const {
+        danyuanList,
+        info: { UNIT_ID },
+      } = this;
+      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
+        let item = danyuanList.find((item) => item.value == UNIT_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+    homeName() {
+      const {
+        homeList,
+        info: { HOME_ID },
+      } = this;
+      if (Array.isArray(homeList) && homeList.length > 0 && HOME_ID) {
+        let item = homeList.find((item) => item.value == HOME_ID);
+        if (item) {
+          return item.label;
+        }
+      }
+      return "";
+    },
+  },
+
+  watch: {
+    userId() {
+      this.getApiData();
+    },
+  },
+
+  mounted() {
+    this.getApiData();
+  },
+
+  methods: {
+    addStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex < groupList.length - 9) {
+        this.startGroupIndex = startGroupIndex + 1;
+      } else {
+        this.startGroupIndex = groupList.length - 9;
+      }
+    },
+    subStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex > 0) {
+        this.startGroupIndex = startGroupIndex - 1;
+      } else {
+        this.startGroupIndex = 0;
+      }
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+
+    async getApiData() {
+      await this.getField();
+      await this.getInfo();
+      this.getXiaoquList();
+      this.getLouList();
+      this.getDanyuanList();
+      this.getHomeList();
+    },
+
+    getOptionLabel(options, value, type = "") {
+      if (Array.isArray(options)) {
+        let valueArr = value.split(",");
+        if (type == "cascader") {
+          if (valueArr.length > 0) {
+            let level1 = options.find((item) => item.value == valueArr[0]);
+            if (level1) {
+              if (valueArr.length > 1 && level1.children) {
+                let level2 = level1.children.find(
+                  (item) => item.value == valueArr[1]
+                );
+                if (level2) {
+                  return level1.label + "-" + level2.label;
+                }
+              }
+              return level1.label;
+            }
+          }
+        } else {
+          return valueArr
+            .map((val) => {
+              let item = options.find((item) => item.value == val);
+              if (item && item.label) {
+                return item.label;
+              }
+              return "--";
+            })
+            .join("、");
+        }
+      }
+      return "--";
+    },
+
+    //加载组织数据
+    async getField() {
+      const url = "/oper/customize/icform/getcustomerform";
+
+      const { data, code, msg } = await requestPost(url, {
+        dynamic: true,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.groupList = data.groupList;
+        this.fieldList = (function (arr) {
+          let col = [];
+          let ele = [];
+          for (let i = 0; i < arr.length; i++) {
+            let item = arr[i];
+            if (item.itemType == "divider" || i == arr.length - 1) {
+              col.push([...ele]);
+              ele = [];
+            } else {
+              ele.push(item);
+            }
+          }
+          return col;
+        })(data.itemList);
+
+        this.fieldList.forEach((subList, index) => {
+          subList.forEach(async (item, subIndex) => {
+            if (item.optionSourceType == "remote" && item.optionSourceValue) {
+              this.fieldList[index][subIndex].options = await this.getOptions(
+                item.optionSourceValue
+              );
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getInfo() {
+      const url = "/epmetuser/icresiuser/detail";
+
+      const { data, code, msg } = await requestPost(url, {
+        icResiUserId: this.userId,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.info = data.ic_resi_user[0];
+        this.allInfo = data;
+
+        this.fieldList.forEach((subList, index) => {
+          subList.forEach((item, subIndex) => {
+            if (
+              item.itemType == "radio" &&
+              item.childGroup &&
+              this.allInfo[item.tableName] &&
+              this.allInfo[item.tableName][0][item.columnName] == "1"
+            ) {
+              this.groupList = [...this.groupList, item.childGroup];
+            }
+          });
+        });
+        console.log("1111111111111111111111111", this.groupList);
+
+        this.groupList.forEach((subList, index) => {
+          subList.itemList.forEach(async (item, subIndex) => {
+            if (item.optionSourceType == "remote" && item.optionSourceValue) {
+              this.groupList[index].itemList[subIndex].options =
+                await this.getOptions(item.optionSourceValue);
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getOptions(url) {
+      if (!url) return [];
+
+      const { data, code, msg } = await requestPost(url, {});
+
+      if (code === 0) {
+        return data;
+      } else {
+        return [];
+      }
+    },
+
+    async getXiaoquList() {
+      const url = "/gov/org/icneighborhood/neighborhoodoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        agencyId: this.info.AGENCY_ID,
+        gridId: this.info.GRID_ID,
+      });
+
+      if (code === 0) {
+        this.xiaoquList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getLouList() {
+      const url = "/gov/org/icbuilding/buildingoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        neighborHoodId: this.info.VILLAGE_ID,
+      });
+
+      if (code === 0) {
+        this.louList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getDanyuanList() {
+      const url = "/gov/org/icbuildingunit/unitoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        buildingId: this.info.BUILD_ID,
+      });
+
+      if (code === 0) {
+        this.danyuanList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getHomeList() {
+      const url = "/gov/org/ichouse/houseoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        unitId: this.info.UNIT_ID,
+      });
+
+      if (code === 0) {
+        this.homeList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/people.scss" scoped></style>
diff --git a/src/views/modules/visual/communityGovern/index.vue b/src/views/modules/visual/communityGovern/index.vue
new file mode 100644
index 000000000..8c0f4a590
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/index.vue
@@ -0,0 +1,748 @@
+<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>
+
+    <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:100%">
+            <div class="info_tip">
+              <img src="../../../../assets/img/shuju/title-tip.png"
+                   alt />
+              <div class="tip_title">分类列表</div>
+            </div>
+
+            <div 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 { 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";
+
+
+let loading;//加载动画
+
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+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_.index - 1]
+    }),
+    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 polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.index - 1]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.index - 1],
+        width: 3
+      }),
+
+      text: createTextStyle(feature)
+    });;
+  };
+})()
+
+const vueGis = {
+  name: 'HomeMap',
+  data () {
+    return {
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      subAgencyArray: [],//下拉框数据
+      iconCoordinators: [],
+      currentCoordinate: null,
+      overlay: null,
+
+      //右侧搜索
+      searchName: "",
+
+      //右侧列表
+      listData: [],//得到的数据
+      listDatashow: [],//处理成一行两列的数据
+
+      //下钻层级记录
+      runNum: 0,
+      runAgencyArray: [],
+      selUserId: '',
+
+
+    }
+  },
+  async mounted () {
+    //加载组织数据
+    await this.loadOrgData()
+
+    //初始化地图
+    this.initMap()
+
+    //添加标注图层
+    this.addPolygonLayer()
+
+    //添加icontuceng
+    this.addIconLayer()
+
+    //加载当前园区的标注
+    this.loadPolygon(this.subAgencyArray)
+
+    await this.loadList()
+
+  },
+  methods: {
+
+    handleSearch () {
+
+      this.toSubAgency('search')
+    },
+
+    //获取右侧infolist数据
+    async loadList () {
+      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)
+
+      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 = houselIdseId
+      this.level = ''
+    },
+
+    //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区）   search 点击搜索  people 点击详情
+    async toSubAgency (type, e, searchName) {
+      console.log(e)
+      this.runNum++
+      this.runAgencyArray.push(this.orgData)
+      //点击小区neighborHood显示楼栋，点击非小区，进入下一级地图
+      if (type === 'people') {
+
+        this.orgLevel = 'people'
+        this.selUserId = e
+        this.orgId = ''
+        this.orgData = {
+          id: '',
+          level: 'people',
+          name: '人员档案'
+        }
+        this.searchName = searchName
+
+      } else if (type === 'search') {
+
+
+        this.orgLevel = 'search'
+        this.orgId = ''
+        this.orgData = {
+          id: '',
+          level: 'search',
+          name: '搜索'
+        }
+        this.$nextTick(() => {
+          this.$refs.ref_search.reset();
+        });
+
+      } else {
+        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()
+
+      //加载当前园区的标注
+      await this.loadPolygon(this.subAgencyArray)
+
+      //重置地图中心点
+      if (isRefreshView) {
+        this.setMapLocation()
+        mapView.setCenter(this.centerPoint);
+        mapView.setZoom(this.zoom);
+      }
+
+      await this.loadList()
+
+    },
+
+    //返回所选组织
+    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
+
+      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
+
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children
+        } else {
+          this.subAgencyArray = []
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载当前园区的标注
+    loadPolygon (subAgencyArray) {
+      polygonSource.clear()//清空多边形标注
+      iconSource.clear()//清空多边形标注
+
+      let featureData = []//标注数据
+      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        subAgencyArray.forEach(agencyItem => {
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            let urlNum = this.getRndBetween(1, 3)
+
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name,
+                index: 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
+          //视频监控样式
+          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_.index - 1]
+            })
+          });
+
+          oneCctv.setStyle(iconStyle);
+          iconFeatures.push(oneCctv);
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+
+      // this.addGif()
+
+    },
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      this.centerPoint = []
+
+      if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+      }
+
+      this.setZoom(this.orgData.agencyLevel)
+    },
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 14
+      } else if (agencyLevel === 'street') {
+        this.zoom = 15
+      } else if (agencyLevel === 'community') {
+        this.zoom = 16
+      }
+
+    },
+
+    initMap () {
+      this.setMapLocation()
+
+      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);
+
+    },
+
+    //添加变电站标注图层
+    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 },
+}
+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;
+}
+
+.el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+</style>   
\ No newline at end of file
diff --git a/src/views/modules/visual/communityGovern/people.vue b/src/views/modules/visual/communityGovern/people.vue
new file mode 100644
index 000000000..a75bebad5
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/people.vue
@@ -0,0 +1,408 @@
+<template>
+  <div class="g-cpt">
+    <div class="g-l">
+      <div class="m-people">
+        <cpt-card>
+          <div class="title">
+            <img src="@/assets/img/shuju/title-tip.png" />
+            <span>人员情况</span>
+          </div>
+          <div class="more" @click="showedMoreInfo = true">查看更多</div>
+          <div class="ren">
+            <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" />
+            </div>
+            <div class="ren-prop z-1">
+              <img src="@/assets/img/shuju/people/ren-prop-1.png" />
+              <span>所属网格</span>
+
+              <div class="ren-cnt">
+                <h5>所属网格：</h5>
+                <p>
+                  {{ info.gridName }}
+                </p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-2">
+              <img src="@/assets/img/shuju/people/ren-prop-2.png" />
+              <span>人员类别</span>
+
+              <div class="ren-cnt">
+                <h5>人员类别：</h5>
+                <p>
+                  {{
+                    info.personCategory.length == 0
+                      ? "--"
+                      : info.personCategory.join("、")
+                  }}
+                </p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-3">
+              <img src="@/assets/img/shuju/people/ren-prop-3.png" />
+              <span>工作单位</span>
+
+              <div class="ren-cnt">
+                <h5>工作单位：</h5>
+                <p>
+                  {{ info.workUnit || "--" }}
+                </p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-4">
+              <img src="@/assets/img/shuju/people/ren-prop-4.png" />
+              <span>志愿者类别</span>
+
+              <div class="ren-cnt">
+                <h5>志愿者类别：</h5>
+                <p>
+                  {{
+                    info.volunteerCategory.length == 0
+                      ? "--"
+                      : info.volunteerCategory.join("、")
+                  }}
+                </p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-5">
+              <img src="@/assets/img/shuju/people/ren-prop-5.png" />
+              <span>房屋信息</span>
+
+              <div class="ren-cnt">
+                <h5>房屋信息：</h5>
+                <p>
+                  {{
+                    info.houseInfo.length == 0
+                      ? "--"
+                      : info.houseInfo.join("、")
+                  }}
+                </p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-6">
+              <img src="@/assets/img/shuju/people/ren-prop-6.png" />
+              <span>经济状况</span>
+
+              <div class="ren-cnt">
+                <h5>经济状况：</h5>
+                <p>
+                  月薪:
+                  {{
+                    info.financialSituation.monthlyIncome || "--"
+                  }}，退休金：{{
+                    info.financialSituation.retirementAmount || "--"
+                  }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </cpt-card>
+      </div>
+
+      <people-more
+        v-show="showedMoreInfo"
+        v-if="userId"
+        :userId="userId"
+        :gridName="info.gridName"
+        @close="showedMoreInfo = false"
+      />
+
+      <div class="m-relation">
+        <cpt-card>
+          <div class="title">
+            <img src="@/assets/img/shuju/title-tip.png" />
+            <span>家庭关系</span>
+          </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"
+              />
+              <div class="huzhu-name">{{ houseInfo.ownerName }}</div>
+              <p>（户主）</p>
+            </div>
+
+            <div
+              class="rel z-zuo-2"
+              @click="userId = 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">{{
+                  houseInfo.userList[0].relation
+                }}</span>
+                <span class="rel-name"
+                  >（{{ houseInfo.userList[0].userName }}）</span
+                >
+              </div>
+            </div>
+
+            <div
+              class="rel z-you-2"
+              @click="userId = 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>
+            </div>
+
+            <div
+              class="rel z-zuo-1"
+              @click="userId = 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>
+            </div>
+
+            <div
+              class="rel z-you-1"
+              @click="userId = 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>
+            </div>
+
+            <div
+              class="rel z-zuo-3"
+              @click="userId = 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>
+            </div>
+
+            <div
+              class="rel z-you-3"
+              @click="userId = 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>
+            </div>
+          </div>
+        </cpt-card>
+      </div>
+    </div>
+    <div class="g-r"></div>
+  </div>
+</template>
+
+<script>
+import { Loading } from "element-ui"; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+import cptCard from "@/views/modules/visual/cpts/card";
+import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
+
+export default {
+  name: "HomeMap",
+  data() {
+    return {
+      showedMoreInfo: false,
+
+      userId: "",
+
+      info: {
+        financialSituation: { monthlyIncome: "", retirementAmount: "" },
+        gridName: "",
+        houseInfo: [],
+        name: "",
+        personCategory: [],
+        volunteerCategory: [],
+        workUnit: "",
+      },
+
+      houseInfo: {
+        ownerName: "",
+        userList: [
+          // {
+          //   userId: "",
+          //   userName: "",
+          //   isSelf: "",
+          //   relation: "",
+          // },
+        ],
+      },
+    };
+  },
+
+  props: {
+    uid: {
+      type: String,
+      default: "",
+      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
+    },
+  },
+
+  computed: {},
+
+  components: {
+    cptCard,
+    peopleMore,
+  },
+
+  watch: {
+    uid(id) {
+      this.userId = id;
+    },
+    userId() {
+      this.getApiData();
+      window.scrollTo(0, 0);
+    },
+  },
+
+  async mounted() {
+    this.userId = this.uid;
+    this.getApiData();
+  },
+
+  methods: {
+    handleSearch() {},
+
+    getApiData() {
+      this.getInfo();
+      this.getHouseInfo();
+    },
+
+    //加载组织数据
+    async getInfo() {
+      const url = "/epmetuser/icresiuser/persondata";
+      let params = {
+        userId: this.userId,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.info = { ...this.info, ...data };
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getHouseInfo() {
+      const url = "/epmetuser/icresiuser/ownerrelation";
+      let params = {
+        userId: this.userId,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.houseInfo = { ...this.houseInfo, ...data };
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/people.scss" scoped></style>
diff --git a/src/views/modules/visual/communityGovern/peopleSearch.vue b/src/views/modules/visual/communityGovern/peopleSearch.vue
new file mode 100644
index 000000000..7e44c6d3b
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/peopleSearch.vue
@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <div>
+      <div class="div_search_list">
+        <el-input size="mini"
+                  WarningColor='warning'
+                  placeholder="请输入姓名"
+                  v-model="searchName">
+          <i slot="prefix"
+             class="icon">
+            <img src="../../../../assets/img/modules/visual/sousuo.png"
+                 alt />
+          </i>
+        </el-input>
+
+        <div class="btn"
+             @click="loadList">搜索</div>
+
+      </div>
+
+      <div class="list_box">
+        <div class="info_tip">
+          <img src="../../../../assets/img/shuju/title-tip.png"
+               alt />
+          <div class="tip_title">查询列表</div>
+        </div>
+        <div class="warning-table">
+          <div class="table">
+            <div class="table-header">
+              <div class="td td1">序号</div>
+              <div class="td td2">姓名</div>
+              <div class="td td3">所属网格</div>
+              <div class="td td3">所属小区</div>
+              <div class="td td3">所属楼栋</div>
+              <div class="td td2">操作</div>
+
+            </div>
+            <div class="table-body">
+              <div class="table-body-tr"
+                   v-for="(item,index) in tableData"
+                   :key='index'>
+                <div class="td td1">{{item.sort}} </div>
+                <div class="td td2">{{item.name}} </div>
+                <div class="td td3">{{item.gridName}} </div>
+                <div class="td td3">{{item.neighborHoodName}} </div>
+                <div class="td td3">{{item.buildNum}} </div>
+                <div @click="handelToPeople(index)"
+                     class="td td2 btn_detail">{{'查看'}} </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pagination">
+          <el-pagination background
+                         layout="prev, pager, next"
+                         :current-page="pageNo"
+                         :page-size="pageSize"
+                         :total="total"
+                         @current-change="pageCurrentChangeHandle">
+          </el-pagination>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import People from "./people";
+
+export default {
+  name: "people-list",
+  components: {
+    People
+  },
+  data () {
+    return {
+      headerList: [],
+      tableData: [],
+      searchName: '',
+      pageSize: 4,
+      pageNo: 1,
+      total: 0
+    };
+  },
+  methods: {
+    handleSearch () {
+
+    },
+
+    loadByName (searchName) {
+      this.searchName = searchName
+      if (this.searchName) {
+        this.loadList()
+      }
+
+    },
+    reset () {
+      this.searchName = ''
+      this.tableData = []
+    },
+    async loadList () {
+      if (this.searchName) {
+        const url = "/epmetuser/icresiuser/searchbyname"
+        // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/searchbyname"
+        let params = {
+          name: this.searchName,
+          pageSize: this.pageSize,
+          pageNo: this.pageNo
+        }
+
+        const { data, code, msg } = await requestPost(url, params)
+
+        if (code === 0) {
+          this.total = data.total
+          this.tableData = data.list
+        } else {
+          this.$message.error(msg)
+        }
+      } else {
+
+      }
+    },
+
+    //点击查看
+    handelToPeople (index) {
+      this.$emit('toSubAgency', 'people', this.tableData[index].userId, this.searchName)
+    },
+
+    pageCurrentChangeHandle (val) {
+      this.pageNo = val
+      this.loadList()
+    },
+  },
+  destroyed () {
+    console.log("我已经离开了！");
+
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/searchPerson.scss"
+  scoped
+></style>
+
+<style lang=scss>
+.div_search_list {
+  .el-input__inner[WarningColor="warning"] {
+    border-radius: 8px 0 0 8px;
+    height: 53px;
+    background-color: #01106800;
+    border: 2px solid #0082fb;
+    padding-left: 70px;
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+  }
+}
+</style>