diff --git a/examples/entries.js b/examples/entries.js
index 3d7290b4..e728db8c 100644
--- a/examples/entries.js
+++ b/examples/entries.js
@@ -2,7 +2,7 @@
 const install = function(Vue) {
 	if (install.installed) return Promise.resolve();
 	else {
-		let contexts = require.context('../packages', true, /(\/.+)\/App[^\/]+\.vue$/);
+		let contexts = require.context('../project/sass/apps', true, /(\/.+)\/App[^\/]+\.vue$/);
 		if (contexts) {
 			contexts.keys().map((e) => {
 				if (contexts(e).default) {
diff --git a/project/sass/apps/AppBuildManage/AppBuildManage.vue b/project/sass/apps/AppBuildManage/AppBuildManage.vue
new file mode 100644
index 00000000..a2d05ee0
--- /dev/null
+++ b/project/sass/apps/AppBuildManage/AppBuildManage.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="AppBuildManage">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from './components/List'
+import Add from './components/Add'
+import BuildMsg from './components/BuildMsg'
+
+export default {
+  label: '楼栋管理',
+  name: 'AppBuildManage',
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: 'List',
+      params: {},
+      include: [],
+    }
+  },
+
+  components: {
+    Add,
+    List,
+    BuildMsg,
+  },
+  methods: {
+    onChange(data) {
+      if (data.type === 'add') {
+        this.component = 'Add'
+        this.params = data.params
+      }
+
+      if (data.type === 'buildmsg') {
+        this.component = 'BuildMsg'
+        this.params = { ...data.params }
+      }
+
+      if (data.type == 'list') {
+        this.component = 'List'
+        this.params = data.params
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList()
+          }
+        })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.AppBuildManage {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>
diff --git a/project/sass/apps/AppBuildManage/components/Add.vue b/project/sass/apps/AppBuildManage/components/Add.vue
new file mode 100644
index 00000000..5f1ec682
--- /dev/null
+++ b/project/sass/apps/AppBuildManage/components/Add.vue
@@ -0,0 +1,402 @@
+<template>
+  <section style="height: 100%" class="AppBuildManage">
+    <ai-detail class="Add">
+      <!-- 返回按钮 -->
+      <template #title>
+        <ai-title :title="isEdit ? '编辑楼栋信息' : '添加楼栋'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+      </template>
+
+      <template #content>
+        <el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
+          <!-- 小区名称 -->
+          <ai-bar title="基础信息"></ai-bar>
+          <el-form-item label="小区名称" prop="communityName" class="line" ref="communityNameContent">
+            <!-- 选择小区 -->
+            <ai-select v-if="instance" :instance="instance" v-model="formData.communityId" action="/app/appcommunityinfo/listAll" :prop="{ label: 'communityName' }"></ai-select>
+          </el-form-item>
+
+          <div class="flex">
+            <!-- 楼栋号 -->
+            <el-form-item label="楼栋号" prop="buildingNumber" :rules="[{ required: true, message: '请输入楼栋号', trigger: 'blur' }]">
+              <el-input size="small" v-model="formData.buildingNumber" placeholder="请输入" clearable :disabled="isEdit" />
+            </el-form-item>
+
+            <!-- 单元数 -->
+            <el-form-item label="单元数" prop="unitNumber">
+              <el-input size="small" v-model.number="formData.unitNumber" placeholder="请输入" clearable :disabled="isEdit" />
+            </el-form-item>
+
+            <!-- 起始计数层数 -->
+            <el-form-item label="起始计数层数" prop="layerStart">
+              <el-input size="small" v-model.number="formData.layerStart" placeholder="请输入" clearable :disabled="isEdit"></el-input>
+            </el-form-item>
+
+            <!-- 最高层数 -->
+            <el-form-item label="最高层数" prop="layerNumber">
+              <el-input size="small" v-model.number="formData.layerNumber" placeholder="请输入" clearable :disabled="isEdit"></el-input>
+            </el-form-item>
+
+            <!-- 起始计数户数 -->
+            <el-form-item label="起始计数户数" prop="householdStart">
+              <el-input size="small" v-model.number="formData.householdStart" placeholder="请输入" clearable :disabled="isEdit"></el-input>
+            </el-form-item>
+
+            <!-- 每层户数 -->
+            <el-form-item label="每层户数" prop="householdNumber">
+              <el-input size="small" v-model.number="formData.householdNumber" placeholder="请输入" clearable :disabled="isEdit"></el-input>
+            </el-form-item>
+
+            <!-- 楼栋长姓名 -->
+            <el-form-item label="楼栋长姓名" prop="managerName">
+              <el-input size="small" v-model="formData.managerName" placeholder="请输入" clearable></el-input>
+            </el-form-item>
+
+            <!-- 楼栋长联系方式 -->
+            <el-form-item label="楼栋长联系方式" prop="managerPhone">
+              <el-input size="small" v-model.number="formData.managerPhone" placeholder="请输入" clearable></el-input>
+            </el-form-item>
+
+            <!-- 房屋类别 -->
+            <el-form-item label="房屋类别" prop="buildingType" class="buildingTypes">
+              <el-radio-group v-model="formData.buildingType">
+                <el-radio label="0">单元（公寓）楼</el-radio>
+                <el-radio label="1">筒子楼</el-radio>
+                <el-radio label="2">别墅</el-radio>
+
+                <el-radio label="3">自建楼</el-radio>
+                <el-radio label="4">平房</el-radio>
+                <el-radio label="5">高层公共建筑</el-radio>
+
+                <el-radio label="6">商住两用</el-radio>
+                <el-radio label="7">其它</el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <!-- 楼栋经度坐标 -->
+            <el-form-item label="楼栋经度坐标" prop="lng">
+              <el-input size="small" v-model="formData.lng" placeholder="请输入" clearable></el-input>
+            </el-form-item>
+
+            <!-- 楼栋纬度坐标 -->
+            <el-form-item label="楼栋纬度坐标" prop="lat">
+              <el-input size="small" v-model="formData.lat" placeholder="请输入" clearable></el-input>
+            </el-form-item>
+
+            <!-- 地图位置 -->
+            <el-form-item label="地图位置" prop="lat">
+              <el-button @click="showMap = true">地图标绘</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </template>
+
+      <!-- 底部按钮 -->
+      <template #footer>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="confirm()">提交</el-button>
+      </template>
+    </ai-detail>
+    <ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap">
+      <div id="map"></div>
+      <el-form label-width="80px" style="padding: 10px 20px 0 20px;">
+        <el-row type="flex" justify="space-between">
+          <el-form-item label="经度">
+            <el-input disabled size="small" v-model="placeDetail.lng"></el-input>
+          </el-form-item>
+          <el-form-item label="纬度">
+            <el-input disabled size="small" v-model="placeDetail.lat"></el-input>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
+        <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
+      </el-input>
+      <div id="searchPlaceOutput" />
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+export default {
+  name: 'Add',
+  components: {},
+  props: {
+    dict: Object,
+    params: Object,
+    instance: Function,
+  },
+  data() {
+    return {
+      formData: {
+        communityName: '',
+        buildingNumber: '',
+        unitNumber: '',
+        layerStart: '1',
+        layerNumber: '',
+        householdStart: '1',
+        householdNumber: '',
+        managerName: '',
+        managerPhone: '',
+        lng: '',
+        lat: '',
+        id: '', // 小区编号
+        buildingType: '0',
+        communityId: '',
+      },
+      formRules: {
+        unitNumber: [
+          { required: true, message: '请输入单元数', trigger: 'change' },
+          {
+            validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
+          },
+        ],
+        layerStart: [
+          { required: true, message: '请输入起始计数层数', trigger: 'change' },
+          {
+            validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
+          },
+        ],
+
+        layerNumber: [
+          { required: true, message: '请输入最高层数', trigger: 'change' },
+          {
+            validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
+          },
+        ],
+        householdStart: [
+          { required: true, message: '请输入起始计数户数', trigger: 'change' },
+          {
+            validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
+          },
+        ],
+
+        householdNumber: [
+          { required: true, message: '请输入每层户数', trigger: 'change' },
+          {
+            validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
+          },
+        ],
+      },
+      plot: [],
+      dialogVisible: false,
+      treeData: [],
+      map: null,
+      placeDetail: {
+        lng: '',
+        lat: '',
+      },
+      showMap: false,
+      searchPlace: '',
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+
+    isEdit() {
+      return !!this.params.id
+    },
+  },
+  created() {
+    this.formData.communityId = this.params.communityId
+    this.getListinfo()
+  },
+  methods: {
+    selectMap() {
+      this.formData.lng = this.placeDetail.lng
+      this.formData.lat = this.placeDetail.lat
+      this.showMap = false
+    },
+    getCorpLocation() {
+      this.instance.post('/app/appdvcpconfig/getCorpLocation').then((res) => {
+        if (res.code == 0) {
+          this.initMap(res.data)
+        }
+      })
+    },
+
+    initMap({ lng, lat }) {
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0',
+        plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
+      }).then((AMap) => {
+        this.placeDetail.lng = this.formData.lng
+        this.placeDetail.lat = this.formData.lat
+        this.map = new AMap.Map('map', {
+          resizeEnable: true,
+          zooms: [6, 20],
+          center: [lng, lat],
+          zoom: 11,
+        })
+        this.placeSearch = new AMap.PlaceSearch({ map: this.map })
+        new AMap.AutoComplete({
+          input: 'searchPlaceInput',
+          output: 'searchPlaceOutput',
+        }).on('select', (e) => {
+          if (e?.poi) {
+            this.placeSearch.setCity(e.poi.adcode)
+            this.movePosition(e.poi.location)
+          }
+        })
+        this.map.on('click', (e) => {
+          new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
+            if (res?.regeocode) {
+              this.placeDetail = {
+                lng: e.lnglat?.lng,
+                lat: e.lnglat?.lat,
+                address: res.regeocode.formattedAddress,
+              }
+            }
+          })
+          this.movePosition(e.lnglat)
+        })
+      })
+    },
+
+    movePosition(center) {
+      if (this.map) {
+        this.map.clearMap()
+        this.map.panTo(center)
+        this.map.add([
+          new AMap.Marker({
+            position: center,
+            clickable: true,
+          }),
+        ])
+        this.map.setFitView()
+      }
+    },
+
+    getListinfo() {
+      return this.instance
+        .post('/app/appcommunitybuildinginfo/queryDetailById', null, {
+          params: {
+            id: this.params.id,
+          },
+        })
+        .then((res) => {
+          if (res.data) {
+            this.formData = res.data
+          }
+        })
+    },
+
+    confirm() {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          this.instance
+            .post(`/app/appcommunitybuildinginfo/addOrUpdate`, {
+              ...this.formData,
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 1000)
+              }
+            })
+        }
+      })
+    },
+
+    // 返回按钮
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+  },
+  watch: {
+    communityNameContent: {
+      deep: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppBuildManage {
+  ::v-deep .amap-logo {
+    display: none!important;
+  }
+  ::v-deep .amap-copyright {
+    display: none!important;
+  }
+}
+.Add {
+  height: 100%;
+  .ai-detail__title {
+    background-color: #fff;
+  }
+  .ai-detail__content {
+    .ai-detail__content--wrapper {
+      .el-form {
+        background-color: #fff;
+        padding: 0 60px;
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .el-form-item {
+            width: 48%;
+          }
+          .buildingTypes {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .mapDialog {
+  .el-dialog__body {
+    padding: 0;
+
+    .ai-dialog__content {
+      padding: 0;
+    }
+
+    .ai-dialog__content--wrapper {
+      padding: 0 !important;
+      position: relative;
+    }
+
+    #map {
+      width: 100%;
+      height: 420px;
+    }
+
+    .searchPlaceInput {
+      position: absolute;
+      width: 250px;
+      top: 30px;
+      left: 25px;
+    }
+
+    #searchPlaceOutput {
+      position: absolute;
+      width: 250px;
+      left: 25px;
+      height: initial;
+      top: 80px;
+      background: white;
+      z-index: 250;
+      max-height: 300px;
+      overflow-y: auto;
+
+      .auto-item {
+        text-align: left;
+        font-size: 14px;
+        padding: 8px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppBuildManage/components/BuildMsg.vue b/project/sass/apps/AppBuildManage/components/BuildMsg.vue
new file mode 100644
index 00000000..3f9d71f4
--- /dev/null
+++ b/project/sass/apps/AppBuildManage/components/BuildMsg.vue
@@ -0,0 +1,750 @@
+<template>
+  <ai-list class="BuildMsg">
+    <!-- 标题 -->
+    <template #title>
+      <ai-title :title="params.communityName + '-' + params.buildingNumber + '号楼房屋信息'" isShowBack isShowBottomBorder
+                @onBackClick="cancel(false)"></ai-title>
+    </template>
+    <template #content>
+      <!-- 性别下拉选择框 -->
+      <ai-search-bar>
+        <template #left>
+          <ai-select v-model="search.livingStatus" placeholder="房屋状态" clearable @change=";(page.current = 1), getList()"
+                     :selectList="dict.getDict('houselivingStatus')"></ai-select>
+
+          <ai-select v-model="search.existFlow" placeholder="有无流动人口" clearable @change=";(page.current = 1), getList()"
+                     :selectList="dict.getDict('yesOrNo')"></ai-select>
+        </template>
+
+        <template #right>
+          <el-input v-model="search.houseCode" size="small" placeholder="请输入户号/户主" clearable
+                    @keyup.enter.native=";(page.current = 1), getList()"
+                    @clear=";(page.current = 1), (search.houseCode = ''), getList()" suffix-icon="iconfont iconSearch"/>
+        </template>
+      </ai-search-bar>
+
+      <ai-search-bar>
+        <template #left>
+          <div style="height: 32px"/>
+        </template>
+
+        <template #right>
+          <ai-import :instance="instance" :dict="dict" type="appcommunityhouseinfo" :importParams="houseImpParam" name="房屋信息"
+                     @success="getList()">
+            <el-button icon="iconfont iconImport">导入房屋信息</el-button>
+          </ai-import>
+          <ai-download :instance="instance" url="/app/appcommunityhouseinfo/listExport" :params="houseExpParam"
+                       fileName="房屋信息" style="margin-right: 10px">
+            <el-button icon="iconfont iconExported">导出房屋信息</el-button>
+          </ai-download>
+          <ai-import :instance="instance" :dict="dict" type="appcommunityhouseresident" :importParams="houseImpParam" name="人口信息"
+                     @success="getList()">
+            <el-button icon="iconfont iconImport">导入人口信息</el-button>
+          </ai-import>
+          <ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="houseExpParam"
+                       fileName="人口信息">
+            <el-button icon="iconfont iconExported">导出人口信息</el-button>
+          </ai-download>
+        </template>
+      </ai-search-bar>
+
+      <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex"
+                :current.sync="page.current" :size.sync="page.size" @getList="getList"
+                @selection-change="(v) => (ids = v.map((e) => e.id))">
+        <el-table-column slot="owner" label="房主" align="center">
+          <template slot-scope="{ row }">
+            <span v-for="(item, i) in row.owner" :key="i" v-if="item.name">
+              <span v-if="i < 2" style="margin-right: 5px;">
+                {{ item.name }}
+              </span>
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column slot="owner" label="联系方式" align="center">
+          <template slot-scope="{ row }">
+            <span v-for="(item, i) in row.owner" :key="i" v-if="item.phone">
+              <span v-if="i < 1">
+                {{ item.phone }}
+              </span>
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column slot="livingStatus" label="房屋状态" align="center">
+          <template slot-scope="{ row }">
+            {{ dict.getLabel('houselivingStatus', row.livingStatus) }}
+          </template>
+        </el-table-column>
+
+        <el-table-column slot="owner" label="流动人口" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.existFlow == 1 ? '有' : '无' }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140">
+          <div class="table-options" slot-scope="{ row }">
+            <el-button type="text" @click="toEdit(row.id, 'edit')">编辑</el-button>
+            <el-button type="text" @click="toEdit(row.id, 'detail')">详情</el-button>
+          </div>
+        </el-table-column>
+      </ai-table>
+
+      <ai-dialog :title="isEdit ? '编辑居民户' : '居民户详情'" :visible.sync="dialogVisible" width="800px" customFooter>
+        <ai-wrapper label>
+          <div class="bulidmsg">
+            <span class="icon"></span>
+            <span class="bulidtext">房屋信息</span>
+          </div>
+
+          <ai-info-item label="所属社区">
+            {{ forms.areaName }}
+          </ai-info-item>
+
+          <ai-info-item label="房屋地址">
+            {{ forms.createAddress }}
+          </ai-info-item>
+
+          <ai-info-item label="房屋类型">
+            {{ dict.getLabel('communityBuildingType', forms.buildingType) }}
+          </ai-info-item>
+
+          <template v-if="!isEdit">
+            <ai-info-item label="房屋面积" prop="houseArea" class="line">
+              <span>{{ forms.houseArea }}</span
+              >&nbsp;<span v-if="forms.houseArea">m²</span>
+            </ai-info-item>
+
+            <ai-info-item label="居住现状" prop="livingStatus">
+              <span>{{ dict.getLabel('houselivingStatus', forms.livingStatus) }}</span>
+            </ai-info-item>
+
+            <ai-info-item label="房屋用途" prop="houseUse">
+              <span>{{ dict.getLabel('houseUseStatus', forms.houseUse) }}</span>
+            </ai-info-item>
+
+            <ai-info-item label="承租情况" prop="leaseSituation">
+              <span>{{ dict.getLabel('houseLeaseSituation', forms.leaseSituation) }}</span>
+            </ai-info-item>
+
+            <ai-info-item label="起租日期" prop="startDate">
+              {{ $dateFormat(forms.startDate) }}
+            </ai-info-item>
+
+            <ai-info-item label="备案证明" prop="isFilingCertificate">
+              <span>{{ dict.getLabel('isFilingCertificateStatus', forms.isFilingCertificate) }}</span>
+            </ai-info-item>
+          </template>
+        </ai-wrapper>
+
+        <el-form v-if="isEdit" :model="forms" ref="ruleForm" label-width="100px" label-suffix="：" align-items="center"
+                 size="small">
+          <template>
+            <el-form-item label="房屋面积" prop="houseArea" class="house">
+              <el-input v-model="forms.houseArea" type="text" size="small" placeholder="请输入" suffix="m²">
+                <template slot="suffix">m²</template>
+              </el-input>
+            </el-form-item>
+
+            <div class="family-hose">
+              <el-form-item label="居住现状">
+                <el-radio-group v-model="forms.livingStatus">
+                  <el-radio label="0">自用</el-radio>
+                  <el-radio label="1">出租</el-radio>
+                  <el-radio label="2">闲置</el-radio>
+                </el-radio-group>
+              </el-form-item>
+
+              <el-form-item label="房屋用途">
+                <el-radio-group v-model="forms.houseUse">
+                  <el-radio label="0">居住</el-radio>
+                  <el-radio label="1">闲置</el-radio>
+                  <el-radio label="2">经营</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </div>
+
+            <div class="family-hose">
+              <el-form-item label="承租情况" prop="leaseSituation">
+                <ai-select v-model="forms.leaseSituation" placeholder="请选择" clearable
+                           @change=";(page.current = 1), getList()" :selectList="dict.getDict('houseLeaseSituation')"
+                           size="small"></ai-select>
+              </el-form-item>
+
+              <el-form-item label="起租日期" prop="startDate">
+                <el-date-picker v-model="forms.startDate" type="date" placeholder="选择日期" size="small"
+                                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+              </el-form-item>
+            </div>
+
+            <el-form-item label="备案证明" prop="isFilingCertificate">
+              <el-radio-group v-model="forms.isFilingCertificate">
+                <el-radio label="0">有租赁房备案证明</el-radio>
+                <el-radio label="1">无租赁房备案证明</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </template>
+        </el-form>
+        <!-- 房主信息 -->
+        <div class="table">
+          <div class="msg">
+            <b class="house-msg">
+              <span class="icon"></span>
+              <span class="msg">房主信息</span>
+            </b>
+
+            <div class="button">
+              <ai-person-select :instance="instance" @selectPerson="getOwners" ref="getOwner" :chooseUserList="owners"
+                                :isMultiple="true" v-if="isEdit"/>
+            </div>
+          </div>
+
+          <ai-table :tableData="owners" :col-configs="owner" ref="aitableex">
+            <el-table-column slot="owner" label="居民类型" align="center">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('BulidResidentType', row.residentType) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="owner" label="特殊人群" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ row.tips }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="owner" label="与户主关系" align="center" v-if="isEdit">
+              <template slot-scope="{ row }">
+                <ai-select v-model="row.relation" placeholder="与户主关系" clearable
+                           :selectList="$dict.getDict('householdRelation')"></ai-select>
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="owner" label="与户主关系" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('householdRelation', row.relation) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="options" label="操作" align="center" v-if="isEdit">
+              <template slot-scope="scope">
+                <el-button type="text" @click="remove(scope.$index, 'owners')">删除</el-button>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </div>
+
+        <!-- 承租人信息 -->
+        <div class="table">
+          <div class="msg">
+            <b class="house-msg">
+              <span class="icon"></span>
+              <span class="msg">承租人信息</span>
+            </b>
+
+            <div class="button">
+              <ai-person-select :instance="instance" @selectPerson="getRenters" :chooseUserList="renters"
+                                :isMultiple="true" v-if="isEdit"/>
+            </div>
+          </div>
+
+          <ai-table :tableData="renters" :col-configs="renter" ref="aitableex">
+            <el-table-column slot="renters" label="居民类型" align="center">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('BulidResidentType', row.residentType) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="renters" label="特殊人群" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ row.tips }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="renters" label="与户主关系" align="center" v-if="isEdit">
+              <template slot-scope="{ row }">
+                <ai-select v-model="row.relation" placeholder="与户主关系" clearable
+                           :selectList="$dict.getDict('householdRelation')"></ai-select>
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="renters" label="与户主关系" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('householdRelation', row.relation) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="options" label="操作" align="center" v-if="isEdit">
+              <template slot-scope="scope">
+                <el-button type="text" @click="remove(scope.$index, 'renters')">删除</el-button>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </div>
+
+        <!-- 实际居住人员 -->
+        <div class="table">
+          <div class="msg">
+            <b class="house-msg">
+              <span class="icon"></span>
+              <span class="msg">实际居住人员</span>
+            </b>
+
+            <div class="button" v-if="isEdit">
+              <ai-person-select :instance="instance" @selectPerson="getLives" :isMultiple="true"
+                                :chooseUserList="lives"/>
+            </div>
+          </div>
+
+          <ai-table :tableData="lives" :col-configs="live" ref="aitableex">
+            <el-table-column slot="lives" label="居民类型" align="center">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('BulidResidentType', row.residentType) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="lives" label="特殊人群" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ row.tips }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="lives" label="与户主关系" align="center" v-if="isEdit">
+              <template slot-scope="{ row }">
+                <ai-select v-model="row.relation" placeholder="与户主关系" clearable
+                           :selectList="$dict.getDict('householdRelation')"></ai-select>
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="lives" label="与户主关系" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('householdRelation', row.relation) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="options" label="操作" align="center" v-if="isEdit">
+              <template slot-scope="scope">
+                <el-button type="text" @click="remove(scope.$index, 'lives')">删除</el-button>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </div>
+
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">{{ isEdit ? '取消' : '关闭' }}</el-button>
+          <el-button type="primary" @click="report" v-if="isEdit">确认</el-button>
+        </span>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+export default {
+  name: 'BuildMsg',
+  components: {},
+  props: {
+    dict: Object,
+    params: Object,
+    instance: Function,
+  },
+  data() {
+    return {
+      id: '',
+      page: {
+        current: 1,
+        size: 10,
+      },
+      total: 0,
+      search: {
+        livingStatus: '',
+        houseCode: '',
+      },
+      colConfigs: [
+        {prop: 'unitNumber', label: '单元', align: 'center'},
+        {prop: 'houseCode', label: '户号', align: 'center'},
+        {prop: 'livingNumber', label: '住户数', align: 'center'},
+        {slot: 'owner', label: '户主', align: 'center'},
+        {slot: 'livingStatus', align: 'center'},
+        {slot: 'options', label: '操作', align: 'center'},
+      ],
+      tableData: [],
+      dialogVisible: false,
+      forms: {
+        houseArea: '',
+        livingStatus: 0,
+        houseUse: 0,
+        leaseSituation: '',
+        isFilingCertificate: '',
+      },
+      owners: [],
+      owner: [
+        {prop: 'name', label: '姓名', align: 'center'},
+        {prop: 'idNumber', label: '身份证号', align: 'center'},
+        {prop: 'phone', label: '联系方式', align: 'center'},
+        {slot: 'owner', align: 'center'},
+        {
+          slot: 'relation',
+          align: 'center',
+        },
+        {slot: 'options', label: '操作', align: 'center'},
+      ],
+      renters: [],
+      renter: [
+        {prop: 'name', label: '姓名', align: 'center'},
+        {prop: 'idNumber', label: '身份证号', align: 'center'},
+        {prop: 'phone', label: '联系方式', align: 'center'},
+        {
+          slot: 'relation',
+          align: 'center',
+        },
+        {slot: 'renters', align: 'center'},
+        {slot: 'options', label: '操作', align: 'center'},
+      ],
+      lives: [],
+      live: [
+        {prop: 'name', label: '姓名', align: 'center'},
+        {prop: 'idNumber', label: '身份证号', align: 'center'},
+        {prop: 'phone', label: '联系方式', align: 'center'},
+        {
+          slot: 'relation',
+          align: 'center',
+        },
+        {slot: 'lives', align: 'center'},
+        {slot: 'options', label: '操作', align: 'center'},
+      ],
+      type: '',
+      ids: '',
+      buildingId: '',
+    }
+  },
+  computed: {
+    houseImpParam() {
+      return {
+        buildingId: this.params.id,
+      }
+    },
+    houseExpParam() {
+      return {
+        buildingId: this.params.id,
+      }
+    },
+    isEdit() {
+      return this.type == 'edit'
+    },
+  },
+  watch: {},
+  created() {
+    this.dict.load('yesOrNo', 'houselivingStatus', 'houseLeaseSituation', 'isFilingCertificateStatus', 'houseUseStatus', 'BulidResidentType', 'communityBuildingType', 'householdRelation').then(() => {
+      this.getList()
+    })
+  },
+  mounted() {
+  },
+  methods: {
+    getList() {
+      this.instance
+      .post(`/app/appcommunityhouseinfo/list`, null, {
+        params: {
+          ...this.page,
+          ...this.search,
+          buildingId: this.params.id,
+        },
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+
+    // 返回按钮
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+
+    // 确认增加和编辑
+    report() {
+      this.instance
+      .post(`/app/appcommunityhouseinfo/update`, {
+        ...this.forms,
+        id: this.id,
+        owner: this.owners,
+        renter: this.renters,
+        live: this.lives,
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          this.$message.success('提交成功')
+
+          this.dialogVisible = false
+          this.getList()
+        }
+      })
+    },
+
+    // 详情 和 编辑
+    toEdit(id, type) {
+      this.id = id
+      this.type = type
+      this.instance.post(`/app/appcommunityhouseinfo/queryDetailById?&id=${id}`).then((res) => {
+        if (res.code == 0) {
+          this.forms = res.data
+
+          this.owners = this.forms.owner
+          this.renters = this.forms.renter
+          this.lives = this.forms.live
+        }
+      })
+      this.dialogVisible = true
+    },
+
+    // 删除
+    remove(index, source) {
+      this.$confirm('确定删除该数据？').then(() => {
+        this[source].splice(index, 1)
+      })
+    },
+
+    // 选择人员
+    getOwners(val) {
+      let listNew = []
+      let newName = []
+      for (var i = 0; i < val.length; i++) {
+        if (newName.indexOf(val[i].name) == -1) {
+          newName.push(val[i].name)
+          listNew.push(val[i])
+        }
+      }
+
+      this.owners = listNew
+    },
+
+    getRenters(val) {
+      let listNew = []
+      let newName = []
+      for (var i = 0; i < val.length; i++) {
+        if (newName.indexOf(val[i].name) == -1) {
+          newName.push(val[i].name)
+          listNew.push(val[i])
+        }
+      }
+
+      this.renters = listNew
+    },
+
+    getLives(val) {
+      let listNew = []
+      let newName = []
+      for (var i = 0; i < val.length; i++) {
+        if (newName.indexOf(val[i].name) == -1) {
+          newName.push(val[i].name)
+          listNew.push(val[i])
+        }
+      }
+
+      this.lives = listNew
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.BuildMsg {
+  ::v-deep .ai-list__title {
+    background-color: #fff;
+    margin: 0 !important;
+    padding-left: 20px;
+  }
+
+  ::v-deep .ai-list__content {
+    .ai-list__content--right {
+      .ai-list__content--right-wrapper {
+        .search-select {
+          display: flex;
+          justify-content: space-between;
+          border-bottom: 1px solid #eee;
+          padding-bottom: 10px;
+
+          .left {
+            width: 30%;
+
+            .ai-select {
+              display: inline-block;
+            }
+
+            .ai-select:first-child {
+              margin-right: 15px;
+            }
+          }
+
+          .right {
+            width: 20%;
+          }
+        }
+
+        .bar {
+          display: flex;
+          justify-content: space-between;
+          margin-top: 10px;
+
+          .export {
+            .ai-import {
+              display: inline-block;
+              margin-right: 10px;
+            }
+
+            .ai-download {
+              display: inline-block;
+            }
+          }
+
+          .import {
+            .ai-import {
+              display: inline-block;
+              margin-right: 10px;
+            }
+
+            .ai-download {
+              display: inline-block;
+            }
+          }
+        }
+
+        .ai-dialog__wrapper {
+          background-color: #fff;
+
+          .el-dialog__wrapper {
+            .el-dialog__body {
+              .ai-dialog__content {
+                .ai-dialog__content--wrapper {
+                  .ai-wrapper {
+                    padding-left: 0 !important;
+
+                    .bulidmsg {
+                      height: 32px;
+                      line-height: 32px;
+                      width: 100%;
+                      margin: 0 0 15px 20px;
+
+                      .icon {
+                        border-left: 2px solid #2266ff;
+                      }
+
+                      .bulidtext {
+                        display: inline-block;
+                        margin-left: 9px;
+                        color: #222;
+                        font-size: 15px;
+                        font-weight: 800;
+                      }
+                    }
+
+                    .create {
+                      width: 100% !important;
+
+                      .ai-info-item__left {
+                        width: 78px;
+                        margin-right: 22px;
+                      }
+                    }
+
+                    .Address {
+                      .ai-info-item__left {
+                        width: 78px;
+                        margin-right: 22px;
+                      }
+                    }
+
+                    .building {
+                      padding-left: 40px;
+
+                      .ai-info-item__left {
+                        width: 78px;
+                        margin-right: 22px;
+                      }
+                    }
+                  }
+
+                  .el-form {
+                    padding: 20px 0 0 0;
+
+                    .house {
+                      width: 50%;
+
+                      .el-form-item__content {
+                        width: 63%;
+                      }
+                    }
+
+                    .family-hose {
+                      display: flex;
+                      justify-content: space-between;
+                    }
+
+                    .line {
+                      width: 50% !important;
+                      padding-right: 40px;
+
+                      .el-form-item__content {
+                        .el-input {
+                          .el-input__suffix {
+                            color: #666;
+                            margin-right: 5px;
+                          }
+                        }
+                      }
+                    }
+                  }
+
+                  .table {
+                    padding: 20px 20px 0 20px;
+
+                    .msg {
+                      display: flex;
+                      justify-content: space-between;
+
+                      .house-msg {
+                        height: 32px;
+                        line-height: 32px;
+
+                        .icon {
+                          border-left: 2px solid #2266ff;
+                        }
+
+                        .msg {
+                          display: inline-block;
+                          color: #222;
+                          font-size: 15px;
+                          font-weight: 800;
+                          margin-left: 9px;
+                        }
+                      }
+
+                      // .button {
+                      // }
+                    }
+
+                    .ai-table {
+                      margin-top: 10px;
+                      // .el-table {
+                      // }
+                      .pagination {
+                        display: none;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppBuildManage/components/List.vue b/project/sass/apps/AppBuildManage/components/List.vue
new file mode 100644
index 00000000..5ed67d22
--- /dev/null
+++ b/project/sass/apps/AppBuildManage/components/List.vue
@@ -0,0 +1,312 @@
+<template>
+  <section class="AppPetitionManage">
+    <ai-detail>
+      <!-- 标题 -->
+      <ai-title slot="title" title="楼栋管理" isShowBottomBorder />
+      <template #content>
+        <ai-tree-menu title="楼栋管理" @search="(v) => $refs.gridTree.filter(v)">
+          <el-tree :data="treeData" ref="gridTree" :filter-node-method="handleTreeFilter" @node-click="handleSelectGrid" highlight-current node-key="id" :props="{ label: 'name', children: 'children' }" :default-expanded-keys="[defaultShowNodes]" />
+        </ai-tree-menu>
+
+        <div class="flex">
+          <ai-search-bar bottomBorder>
+            <template slot="left">
+              <!-- 定位状态 -->
+              <ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="$dict.getDict('BuildLocationStatus')" @change=";(page.current = 1), getList()"></ai-select>
+            </template>
+
+            <!-- 搜索 -->
+            <template slot="right">
+              <el-input v-model="search.managerName" size="small" placeholder="楼栋号/楼长/联系方式" clearable @keyup.enter.native=";(page.current = 1), getList()" @clear=";(page.current = 1), (search.managerName = ''), getList()" suffix-icon="iconfont iconSearch" />
+            </template>
+          </ai-search-bar>
+
+          <ai-search-bar class="ai-search-ba">
+            <template slot="left">
+              <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')" :disabled="!isAdd">添加 </el-button>
+              <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button>
+            </template>
+
+            <!-- 导入导出 -->
+            <template #right>
+              <ai-import :instance="instance" :dict="dict" type="appcommunitybuildinginfo" :importParams="{ areaId: user.info && user.info.areaId }" name="楼栋管理" @success="getList()">
+                <el-button icon="iconfont iconImport">导入</el-button>
+              </ai-import>
+              <ai-download :instance="instance" url="/app/appcommunitybuildinginfo/listExport" :params="param" fileName="楼栋管理模板" :disabled="tableData.length == 0">
+                <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
+              </ai-download>
+            </template>
+          </ai-search-bar>
+
+          <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" style="margin-top: 20px;" :current.sync="page.current" :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))">
+            <el-table-column slot="locationStatus" label="定位状态" align="center">
+              <template slot-scope="{ row }">
+                <span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span>
+                <span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="options" label="操作" align="center" width="240px" fixed="right">
+              <div class="table-options" slot-scope="{ row }">
+                <el-button type="text" @click="onAdd(row.id)">编辑</el-button>
+                <el-button type="text" @click="remove(row.id)">删除</el-button>
+                <el-button type="text" @click="toBuildMsg(row)">房屋信息</el-button>
+                <el-button type="text" @click="$router.push({ name: '63', query: { communityId: row.communityId, buildingId: row.id, unitNum: 1, buildingNumber: row.buildingNumber } })">
+                  楼栋模型
+                </el-button>
+              </div>
+            </el-table-column>
+          </ai-table>
+        </div>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'List',
+  props: {
+    dict: Object,
+    instance: Function,
+    params: Object,
+  },
+
+  data() {
+    return {
+      isAdd: false,
+      page: {
+        current: 1,
+        size: 10,
+      },
+      total: 0,
+      search: {
+        locationStatus: '',
+        managerName: '',
+      },
+      id: '',
+      ids: [],
+      colConfigs: [
+        { type: 'selection' },
+        {
+          prop: 'communityName',
+          label: '小区名称',
+        },
+        {
+          prop: 'buildingNumber',
+          label: '楼栋号',
+          align: 'center',
+        },
+        { prop: 'unitNumber', label: '单元数', align: 'center' },
+        {
+          prop: 'layerNumber',
+          label: '最高层数',
+          align: 'center',
+        },
+        { prop: 'householdNumber', label: '每层户数', align: 'center' },
+        {
+          prop: 'houseNum',
+          label: '实有户数',
+          align: 'center',
+        },
+        { prop: 'residentNum', label: '实有人口', align: 'center' },
+        {
+          prop: 'managerName',
+          label: '楼栋长名',
+          align: 'center',
+        },
+        { prop: 'managerPhone', label: '楼栋长联系方式', align: 'center', width: '150' },
+        { slot: 'locationStatus' },
+        {
+          slot: 'options',
+          label: '操作',
+          align: 'center',
+        },
+      ],
+      tableData: [],
+      organizationId: '',
+      meta: [],
+      treeData: [],
+      areaId: '',
+      communityId: null,
+      buildingTypeStatus: '',
+      defaultShowNodes: [],
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    param() {
+      return {
+        ...this.search,
+        communityId: this.communityId,
+        areaId: this.user.info?.areaId,
+        ids: this.ids,
+      }
+    },
+  },
+
+  created() {
+    this.dict.load('BuildLocationStatus').then(() => {
+      this.getList()
+      this.getListinfo()
+    })
+  },
+
+  mounted() {},
+
+  methods: {
+    getListinfo() {
+      return this.instance.post(`/app/appcommunityinfo/queryCommunityTree?id=${this.user.info?.areaId}`).then((res) => {
+        if (res.data) {
+          this.treeData = [res.data]
+          this.$nextTick(() => {
+            this.defaultShowNodes = this.treeData[0].id
+          })
+        }
+      })
+    },
+
+    getList() {
+      this.instance
+        .post(`/app/appcommunitybuildinginfo/list`, null, {
+          params: {
+            ...this.page,
+            ...this.search,
+            communityId: this.communityId,
+            areaId: this.areaId,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+    },
+
+    // 添加
+    onAdd(id) {
+      this.$emit('change', {
+        type: 'add',
+        params: {
+          id: id || '',
+          bulidId: this.id,
+          communityId: this.communityId,
+        },
+      })
+    },
+
+    // 房屋信息
+    toBuildMsg(row) {
+      this.$emit('change', {
+        type: 'buildmsg',
+        params: {
+          ...row,
+        },
+      })
+    },
+
+    // 删除
+    remove(id) {
+      this.$confirm('确定删除该数据?').then(() => {
+        this.instance.post(`/app/appcommunitybuildinginfo/delete?ids=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    removeAll() {
+      var id = this.ids.join(',')
+      this.remove(id)
+    },
+
+    handleTreeFilter(v, data) {
+      return data?.name.indexOf(v) > -1
+    },
+
+    handleSelectGrid(data) {
+      this.isAdd = false
+      if (data.type == 1) {
+        this.isAdd = true
+        this.communityId = data.id
+        this.areaId = null
+      } else if (data.type == 0) {
+        this.communityId = null
+        this.areaId = data.id
+      }
+      this.getList()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppPetitionManage {
+  height: 100%;
+
+  .ai-detail {
+    ::v-deep .ai-detail__content {
+      .ai-detail__content--wrapper {
+        display: flex;
+        justify-content: space-between;
+        height: 100%;
+        max-width: 100%;
+        padding: 15px;
+
+        .AiTreeMenu {
+          width: 22%;
+        }
+
+        .flex {
+          width: 78%;
+          margin-left: 10px;
+          padding: 15px;
+          background-color: #fff;
+
+          .ai-search-ba {
+            margin-top: 10px;
+          }
+
+          .ai-table {
+            margin-top: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-tree {
+    .el-tree-node__content {
+      display: inline-flex;
+      min-width: 100%;
+
+      &:hover {
+        background: #e8efff;
+        color: #222222;
+        border-radius: 2px;
+      }
+    }
+
+    .is-current > .el-tree-node__content {
+      background: #2266ff;
+
+      &:hover {
+        background: #2266ff;
+        color: #fff;
+      }
+
+      span {
+        color: #fff;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppCommunityManage/AppCommunityManage.vue b/project/sass/apps/AppCommunityManage/AppCommunityManage.vue
new file mode 100644
index 00000000..b062126b
--- /dev/null
+++ b/project/sass/apps/AppCommunityManage/AppCommunityManage.vue
@@ -0,0 +1,59 @@
+<template>
+  <section class="AppCommunityManage ailist-wrapper">
+    <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict" />
+  </section>
+</template>
+
+<script>
+import List from './components/List'
+import Add from './components/Add'
+
+export default {
+  name: 'AppCommunityManage',
+  label: '小区管理',
+
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: 'List',
+      params: {},
+      include: [],
+    }
+  },
+
+  components: {
+    Add,
+    List,
+  },
+
+  methods: {
+    onChange(data) {
+      if (data.type === 'add') {
+        this.component = 'Add'
+        this.params = data.params
+      }
+
+      if (data.type === 'list') {
+        this.component = 'List'
+        this.params = data.params
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList()
+          }
+        })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.AppCommunityManage {
+  height: 100%;
+}
+</style>
diff --git a/project/sass/apps/AppCommunityManage/components/Add.vue b/project/sass/apps/AppCommunityManage/components/Add.vue
new file mode 100644
index 00000000..9243858b
--- /dev/null
+++ b/project/sass/apps/AppCommunityManage/components/Add.vue
@@ -0,0 +1,259 @@
+<template>
+  <ai-detail showFooter class="add-detail">
+    <template slot="title">
+      <ai-title :title="isEdit ? '编辑小区信息' : '添加小区'" :isShowBack="true" @onBackClick="cancel()"
+                :isShowBottomBorder="true"></ai-title>
+    </template>
+    <template slot="content">
+      <div class="add-form">
+        <ai-bar title="基础信息"></ai-bar>
+        <el-form label-width="110px" style="padding-bottom: 80px;" :model="form" ref="form">
+          <el-form-item label="小区名称" prop="communityName"
+                        :rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]">
+            <el-input size="small" v-model="form.communityName" :maxlength="50" placeholder="请输入小区名称"></el-input>
+          </el-form-item>
+          <el-form-item label="行政归属" prop="areaId" :rules="[
+              { required: true, message: '请选择行政归属', trigger: 'blur' },
+              { pattern:/[^0]0{0,2}$/g, message: '请选择到村/社区' }]">
+            <ai-area-get :instance="instance" v-model="form.areaId" :root="user.info.areaId"
+                         @select="handleAreaSelect"/>
+          </el-form-item>
+          <el-form-item label="小区地址" prop="address" :rules="[{ required: true, message: '请输入小区地址', trigger: 'blur' }]">
+            <el-input size="small" v-model="form.address" placeholder="请输入小区地址" clearable/>
+          </el-form-item>
+
+          <el-form-item label="所属网格" prop="girdInfoList" style="margin-top: 8px;"
+                        :rules="[{ required: true, message: '请选择所属网格', trigger: 'blur' }]">
+            <el-tag
+                :key="index"
+                v-for="(tag,index) in form.girdInfoList"
+                closable
+                style="margin-right: 16px;"
+                :disable-transitions="false"
+                @close="handleClose(tag)">
+              {{ tag.girdName }}
+            </el-tag>
+            <el-button size="small" @click="showGrid=true">选择网格</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true"
+                 @opened="beforeSelectTree" border width="720px">
+        <div class="grid">
+          <el-tree :data="treeObj.treeList" :props="treeObj.defaultProps" node-key="id" ref="tree"
+                   :check-strictly="true" show-checkbox
+                   :default-checked-keys="treeObj.checkedKeys" default-expand-all highlight-current>
+          </el-tree>
+        </div>
+        <div class="dialog-footer" slot="footer">
+          <el-button size="medium" @click="showGrid=false">取消</el-button>
+          <el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
+        </div>
+      </ai-dialog>
+    </template>
+    <template slot="footer" class="footer">
+      <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
+      <el-button class="footer-btn" type="primary" @click="onSubmit('0')">保存</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'Add',
+
+  props: {
+    dict: Object,
+    params: Object,
+    instance: Function,
+  },
+
+  data() {
+    return {
+      gridList: [],
+      girdId: '',
+      subGridId: '',
+      subGridList: [],
+      sonGridList: [],
+      form: {
+        communityName: '',
+        areaName: '',
+        areaId: '',
+        girdId: '',
+        dealOpinion: '',
+        recordUser: '',
+        address: '',
+        girdInfoList: [],
+        girdName: '',
+      },
+      showGrid: false,
+      treeObj: {
+        treeList: [],
+        defaultProps: {
+          children: "girdList",
+          label: "girdName",
+        },
+        checkedKeys: [],
+      },
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    isEdit() {
+      return !!this.params.id
+    },
+  },
+
+  created() {
+    this.dict.load('cardType', 'sex', 'nation').then(() => {
+      if (this.params && this.params.id) {
+        this.getInfo(this.params.id)
+      }
+    })
+  },
+  methods: {
+    beforeSelectTree() {
+      this.treeObj.checkedKeys = [];
+      this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
+        if (res.code == 0) {
+          this.treeObj.treeList = res.data;
+          if (this.form.girdInfoList.length) {
+            this.form.girdInfoList.map((e) => {
+              this.treeObj.checkedKeys.push(e.id);
+            });
+          }
+        }
+      });
+    },
+    getCheckedTree() {
+      if (this.$refs.tree.getCheckedNodes().length > 1) {
+        return this.$message.error('不能绑定多个网格')
+      }
+      this.form.girdInfoList = this.$refs.tree.getCheckedNodes();
+      this.showGrid = false;
+    },
+    handleClose(tag) {
+      this.form.girdInfoList.splice(this.form.girdInfoList.indexOf(tag), 1);
+    },
+    getInfo(id) {
+      this.instance.post(`/app/appcommunityinfo/queryDetailById?id=${id}`).then((res) => {
+        if (res.code === 0) {
+          this.girdId = res.data.girdId0
+          this.form.communityName = res.data.communityName
+          this.form.address = res.data.address
+          this.form.areaName = res.data.areaName
+          this.form.girdId = res.data.girdId
+          this.form.girdName = res.data.girdName
+          this.form.girdInfoList = [{id: res.data.girdId, girdName: res.data.girdName}]
+          this.$set(this.form, 'areaId', res.data.areaId)
+        }
+      })
+    },
+
+    onSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.form.girdInfoList.length > 1) {
+            return this.$message.error('不能绑定多个网格')
+          }
+
+          this.form.girdName = this.form.girdInfoList[0].girdName
+          this.form.girdId = this.form.girdInfoList[0].id
+          this.instance
+          .post(`/app/appcommunityinfo/addOrUpdate`, {
+            ...this.form,
+            id: this.params ? this.params.id : '',
+          })
+          .then((res) => {
+            if (res.code === 0) {
+              this.$message.success('提交成功')
+              setTimeout(() => {
+                this.cancel(true)
+              }, 800)
+            }
+          })
+        }
+      })
+    },
+
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+    handleAreaSelect(v) {
+      this.form.areaName = v?.[0]?.label
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.add-detail {
+  height: 100%;
+  overflow: hidden;
+  background: #f2f4f6 !important;
+
+  .add-form__item {
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep .el-form-item__label {
+    padding-right: 40px;
+  }
+
+  ::v-deep .ai-detail__footer {
+    background: #fff !important;
+  }
+
+  ::v-deep .ai-detail__content--active {
+    padding: 20px;
+
+    .ai-detail__content--wrapper {
+      width: 100%;
+    }
+
+    .aibar {
+      padding: 0 16px;
+    }
+
+    .el-form {
+      padding: 0 96px 0 50px;
+    }
+
+    .add-form {
+      background: #fff;
+    }
+  }
+
+  ::v-deep .ai-wrapper {
+    align-items: inherit !important;
+  }
+
+  .user-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .avatar {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+    border-radius: 10px;
+  }
+
+  .footer-btn {
+    width: 130px;
+  }
+
+  .el-form {
+    padding-bottom: 80px;
+  }
+}
+</style>
diff --git a/project/sass/apps/AppCommunityManage/components/List.vue b/project/sass/apps/AppCommunityManage/components/List.vue
new file mode 100644
index 00000000..424ffcf3
--- /dev/null
+++ b/project/sass/apps/AppCommunityManage/components/List.vue
@@ -0,0 +1,202 @@
+<template>
+  <ai-list class="AppPetitionManage">
+    <template slot="title">
+      <ai-title title="小区管理" isShowBottomBorder />
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar" bottomBorder>
+        <template slot="left">
+          <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加</el-button>
+          <el-button :disabled="!ids.length" icon="iconfont iconDelete" size="small" @click="removeAll">删除</el-button>
+        </template>
+        <template slot="right">
+          <el-input v-model="search.communityName" class="search-input" size="small" @change=";(search.current = 1), getList()" placeholder="小区名称" suffix-icon="iconfont iconSearch" clearable />
+        </template>
+      </ai-search-bar>
+
+      <ai-search-bar style="margin-top: 15px;">
+        <template #right>
+          <!-- :importParams="{ areaId: user.info && user.info.areaId }" -->
+          <ai-import :instance="instance" :dict="dict" type="appcommunityinfo" name="小区管理" @success="getList()">
+            <el-button icon="iconfont iconImport">导入</el-button>
+          </ai-import>
+          <ai-download :instance="instance" url="/app/appcommunityinfo/listExport" :params="param" fileName="小区管理模板" :disabled="tableData.length == 0">
+            <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
+          </ai-download>
+        </template>
+      </ai-search-bar>
+      <!-- <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="search.current" @selection-change="handleSelectionChange"> -->
+      <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="search.current" @selection-change="(v) => (ids = v.map((e) => e.id))" :size.sync="search.size" @getList="getList">
+        <el-table-column slot="options" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <span class="table-btn" title="编辑" @click="toEdit(row.id)">编辑</span>
+            <span class="table-btn table-btn__remove" title="删除" @click="remove(row.id)">删除</span>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+export default {
+  name: 'List',
+
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      search: {
+        current: 1,
+        size: 10,
+        communityName: '',
+      },
+      ids: [],
+      total: 0,
+      colConfigs: [
+        { type: 'selection' },
+        { prop: 'communityName', label: '小区名称', align: 'center', width: '200' },
+        { prop: 'areaName', label: '行政划分' },
+        { prop: 'address', label: '小区地址' },
+        { prop: 'girdName', label: '所属网格' },
+        { prop: 'buildingNumber', label: '总楼栋数（栋）', align: 'center' },
+        { prop: 'createUserName', label: '创建人', align: 'center' },
+        { prop: 'createTime', label: '创建时间', align: 'center' },
+        { slot: 'options', label: '操作', align: 'center' },
+      ],
+      tableData: [],
+    }
+  },
+
+  computed: {
+    importParams() {
+      return {
+        name: this.search.name,
+        ids: this.ids.map((v) => v.id).join(','),
+      }
+    },
+
+    param() {
+      let params = {}
+
+      if (this.ids.length) {
+        params = {
+          ...params,
+          ids: this.ids,
+        }
+      } else {
+        params = {
+          ...params,
+          ...this.search,
+          ids: this.ids,
+        }
+      }
+      return params
+    },
+  },
+
+  created() {
+    this.getList()
+  },
+
+  methods: {
+    getList() {
+      this.instance
+        .post(`/app/appcommunityinfo/list`, null, {
+          params: {
+            ...this.search,
+          },
+        })
+        .then((res) => {
+          if (res?.data) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+    },
+    handleSelectionChange(e) {
+      this.ids = e
+    },
+
+    toEdit(id) {
+      this.$emit('change', {
+        type: 'add',
+        params: {
+          id: id,
+        },
+      })
+    },
+
+    removeAll() {
+      // this.remove(this.ids.map((v) => v.id).join(','))
+      var id = this.ids.join(',')
+      this.remove(id)
+    },
+
+    remove(id) {
+      this.$confirm('确定删除该数据？').then(() => {
+        this.instance.post(`/app/appcommunityinfo/delete?ids=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    onReset() {
+      this.search.current = 1
+      this.search.communityName = ''
+
+      this.getList()
+    },
+
+    onAdd(id) {
+      this.$emit('change', {
+        type: 'add',
+        params: {
+          id: id,
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppPetitionManage {
+  ::v-deep th {
+    font-weight: bold !important;
+  }
+
+  .table-btn {
+    color: #2266ff;
+    font-size: 14px;
+    cursor: pointer;
+
+    &:last-child:hover {
+      color: #f46;
+    }
+
+    &:first-child {
+      margin-right: 16px;
+
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .icon-color89B {
+    margin-right: 8px;
+    cursor: pointer;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppConvenienceAddressBook/AppConvenienceAddressBook.vue b/project/sass/apps/AppConvenienceAddressBook/AppConvenienceAddressBook.vue
new file mode 100644
index 00000000..1d1ffd1c
--- /dev/null
+++ b/project/sass/apps/AppConvenienceAddressBook/AppConvenienceAddressBook.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="doc-circulation ailist-wrapper">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+  import List from './components/List'
+  import Add from './components/Add'
+
+  export default {
+    name: 'AppConvenienceAddressBook',
+    label: '便民通讯录',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        include: []
+      }
+    },
+
+    components: {
+      Add,
+      List
+    },
+
+    mounted () {
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Add') {
+          this.component = 'Add'
+          this.params = data.params
+        }
+
+        if (data.type === 'list') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              this.$refs.component.getList()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>
diff --git a/project/sass/apps/AppConvenienceAddressBook/components/Add.vue b/project/sass/apps/AppConvenienceAddressBook/components/Add.vue
new file mode 100644
index 00000000..7544f14b
--- /dev/null
+++ b/project/sass/apps/AppConvenienceAddressBook/components/Add.vue
@@ -0,0 +1,148 @@
+<template>
+  <ai-detail>
+    <template slot="title">
+      <ai-title :title="params.id ? '编辑通讯录' : '添加通讯录'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
+            <el-form-item label="地区" style="width: 100%;" prop="codeName">
+              <span style="color: #666;">{{ form.areaName }}</span>
+            </el-form-item>
+            <el-form-item style="width: 100%" label="名称" prop="name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
+              <el-input size="small" placeholder="请输入名称" show-word-limit v-model="form.name" :maxlength="30"></el-input>
+            </el-form-item>
+            <el-form-item style="width: 100%" label="类型" prop="type" :rules="[{ required: true, message: '请输入类型', trigger: 'change' }]">
+              <el-input size="small" placeholder="请输入类型" v-model="form.type"></el-input>
+            </el-form-item>
+            <el-form-item style="width: 100%" label="电话" prop="phone" :rules="[{required: true, validator: regPhone, trigger: 'blur' }]">
+              <el-input size="small" placeholder="请输入电话" show-word-limit maxlength="11" v-model="form.phone"></el-input>
+            </el-form-item>
+            <el-form-item style="width: 100%;" label="是否公开" prop="isPublic" :rules="[{ required: true, message: '请选择是否公开', trigger: 'change' }]">
+              <el-radio-group v-model="form.isPublic">
+                <el-radio label="1">是</el-radio>
+                <el-radio label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+        </template>
+      </ai-card>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'Add',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      var regPhone = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('请输入电话'))
+        } else {
+          const reg = /^[0-9]{3,11}$/
+          if (reg.test(value)) {
+            callback()
+          } else {
+            return callback(new Error('请输入正确的电话号码'))
+          }
+        }
+      }
+      return {
+        info: {},
+        form: {
+          areaId: '',
+          name: '',
+          areaName: '',
+          phone: '',
+          isPublic: '1',
+          type: '',
+        },
+        id: '',
+        regPhone,
+        areaList: []
+      }
+    },
+
+    created () {
+      this.getAreaList()
+
+      if (this.params && this.params.areaId && !this.params.id) {
+        this.form.areaId = this.params.areaId
+        this.form.areaName = this.params.areaName
+      }
+
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appconvenientaddressbook/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = res.data
+          }
+        })
+      },
+
+      getAreaList() {
+        this.instance.post(`/admin/area/queryAreaByParentId?id=341021104000`).then(res => {
+          if (res.code == 0) {
+            this.areaList = res.data.map(item => {
+              item.dictName = item.name
+              item.dictValue = item.id
+
+              return item
+            })
+          }
+        })
+      },
+
+      onClose () {
+        this.form.explain = ''
+      },
+
+      confirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appconvenientaddressbook/addOrUpdate`, {
+              ...this.form,
+              id: this.params.id || ''
+            }).then(res => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 600)
+              }
+            })
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/project/sass/apps/AppConvenienceAddressBook/components/List.vue b/project/sass/apps/AppConvenienceAddressBook/components/List.vue
new file mode 100644
index 00000000..68f787fc
--- /dev/null
+++ b/project/sass/apps/AppConvenienceAddressBook/components/List.vue
@@ -0,0 +1,440 @@
+<template>
+  <ai-list class="villagecode">
+    <template slot="title">
+      <ai-title title="通讯录" isShowBottomBorder></ai-title>
+    </template>
+    <template #left>
+      <div class="villagecode-left">
+        <div class="villagecode-left__title">
+          <h2>地区</h2>
+        </div>
+        <div class="addressBook-left__list">
+          <div class="addressBook-left__list--title">
+            <el-input
+              class="addressBook-left__list--search"
+              size="mini"
+              clearable
+              placeholder="请输入地区名称"
+              v-model="unitName"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </div>
+          <el-tree
+            :filter-node-method="filterNode"
+            ref="tree"
+            :props="defaultProps"
+            node-key="id"
+            :data="areaTree"
+            highlight-current
+            :current-node-key="search.areaId"
+            :default-expanded-keys="defaultExpanded"
+            :default-checked-keys="defaultChecked"
+            @current-change="onTreeChange">
+          </el-tree>
+        </div>
+      </div>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" :disabled="isShowAdd" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="search.name"
+            class="search-input"
+            size="small"
+            @keyup.enter.native="search.current = 1, getList()"
+            placeholder="请输入名称/电话"
+            clearable
+            @change="getList"
+            @clear="search.current = 1, search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="isPublic" label="是否公开" align="center">
+          <template slot-scope="{ row }">
+            <el-switch
+              v-model="row.isPublic"
+              active-value="1"
+              @change="e => onChange(row.id, e)"
+              inactive-value="0">
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: '',
+          areaId: ''
+        },
+        defaultExpanded: [],
+        defaultChecked: [],
+        areaTree: [],
+        defaultProps: {
+          children: 'children',
+          label: 'name'
+        },
+        currIndex: -1,
+        areaList: [],
+        total: 10,
+        colConfigs: [
+          {prop: 'name', label: '名称', align: 'left'},
+          {prop: 'type', label: '类型', align: 'center'},
+          {prop: 'phone', label: '电话', align: 'center'},
+          {prop: 'createTime', align: 'center', label: '创建时间'},
+          {slot: 'isPublic', label: '是否公开', align: 'center'}
+        ],
+        areaName: '',
+        unitName: '',
+        tableData: []
+      }
+    },
+
+    computed: {
+      ...mapState(['user']),
+
+      isShowAdd () {
+        const str = this.search.areaId.substr(this.search.areaId.length - 3)
+
+        return false
+      }
+    },
+
+    watch: {
+      unitName (val) {
+        this.$refs.tree.filter(val)
+      }
+    },
+
+    mounted() {
+      this.search.areaId = this.user.info.areaId
+      this.areaName = this.user.info.areaName
+      this.getTree()
+      this.getAreaList()
+      this.getList()
+
+      this.$nextTick(() => {
+      })
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/appconvenientaddressbook/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      onChange (id) {
+        this.instance.post(`/app/appconvenientaddressbook/enable?id=${id}`).then(res => {
+          if (res.code == 0) {
+            this.$message.success('修改成功')
+            this.getList()
+          }
+        })
+      },
+
+      filterNode(value, data) {
+        if (!value) return true
+        return data.name.indexOf(value) !== -1
+      },
+
+      onTreeChange (e) {
+        this.search.areaId = e.id
+        this.areaName = e.name
+        this.search.current = 1
+
+        this.$nextTick(() => {
+          this.getList()
+        })
+      },
+
+      getTree () {
+        this.instance.post(`/admin/area/queryAllArea?id=${this.user.info.areaId}`).then(res => {
+          if (res.code === 0) {
+            let parent = res.data.map(v => {
+              v.label = v.name
+              v.children = []
+
+              return v
+            }).filter(e => !e.parentid)[0]
+            this.defaultExpanded = [parent.id]
+            this.defaultChecked = [parent.id]
+            this.search.areaId = parent.id
+            this.addChild(parent, res.data)
+            this.areaTree = [parent]
+
+            this.$nextTick(() => {
+              this.$refs.tree.setCurrentKey(parent.id)
+            })
+          }
+        })
+      },
+
+      addChild (parent, list) {
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].parentId === parent.id) {
+            parent.children.push(list[i])
+          }
+        }
+
+        if (list.length > 0) {
+          parent['children'].map(v => this.addChild(v, list))
+        }
+      },
+
+      getAreaList() {
+        this.instance.post(`/admin/area/queryAreaByParentId?id=341021104000`).then(res => {
+          if (res.code == 0) {
+            this.areaList = res.data
+          }
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appconvenientaddressbook/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      toAdd(id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            areaName: this.areaName,
+            id: id || '',
+            areaId: this.search.areaId
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.villagecode {
+  .table-tags {
+    .el-tag {
+      margin-right: 8px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .addressBook-left__list {
+    height: calc(100% - 40px);
+    padding: 8px 8px;
+    overflow: auto;
+
+    .addressBook-left__tags--item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      padding: 0 8px 0 16px;
+      color: #222222;
+
+      &.addressBook-left__tags--item-active, &:hover {
+        background: #E8EFFF;
+        color: #2266FF;
+
+        i, span {
+          color: #2266FF;
+        }
+      }
+
+      span {
+        font-size: 14px;
+      }
+
+      i {
+        cursor: pointer;
+        color: #8e9ebf;
+        font-size: 16px;
+      }
+    }
+
+    .addressBook-left__list--title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+
+      .addressBook-left__list--search {
+        flex: 1;
+        ::v-deep input {
+          width: 100%;
+        }
+      }
+
+      .el-button {
+        width: 84px;
+        flex-shrink: 1;
+        margin-right: 8px;
+      }
+    }
+
+    span {
+      color: #222222;
+      font-size: 14px;
+    }
+
+    ::v-deep .el-tree {
+      background: transparent;
+
+      .el-tree-node__expand-icon.is-leaf {
+        color: transparent!important;
+      }
+
+      .el-tree-node__content > .el-tree-node__expand-icon {
+        padding: 4px;
+      }
+
+      .el-tree-node__content {
+        height: 32px;
+      }
+
+      .el-tree__empty-text {
+        color: #222;
+        font-size: 14px;
+      }
+
+      .el-tree-node__children .el-tree-node__content {
+        height: 32px;
+      }
+
+      .el-tree-node__content:hover {
+        background: #E8EFFF;
+        color: #222222;
+        border-radius: 2px;
+      }
+
+      .is-current > .el-tree-node__content {
+        &:hover {
+          background: #2266FF;
+          color: #fff;
+        }
+
+        background: #2266FF;
+        
+        span {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  ::v-deep .ai-list__content--left {
+    margin-right: 2px;
+  }
+
+  .villagecode-left {
+    width: 100%;
+    height: auto;
+    background: #FAFAFB;
+
+    .villagecode-left__title {
+      display: flex;
+      align-items: center;
+      height: 40px;
+      padding: 0 16px;
+      background: #fff;
+
+      h2 {
+        color: #222;
+        font-size: 14px;
+      }
+    }
+
+    .villagecode-left__list {
+      height: calc(100% - 40px);
+      padding: 8px 0;
+      overflow: auto;
+
+      span {
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 24px;
+        color: #222222;
+        font-size: 14px;
+        cursor: pointer;
+        border-right: 2px solid transparent;
+        background: transparent;
+
+        &:hover {
+          color: #2266FF;
+          background: #E8EFFF;
+        }
+
+        &.left-active {
+          color: #2266FF;
+          border-color: #2266FF;
+          background: #E8EFFF;
+        }
+      }
+    }
+  }
+
+  ::v-deep .ai-list__content--right {
+
+    .ai-list__content--right-wrapper {
+      min-height: 100%;
+    }
+  }
+
+}
+
+.message-info__img {
+  font-size: 0;
+  width: 144px;
+  height: 144px;
+}
+</style>
diff --git a/project/sass/apps/AppHomesteadManagement/AppHomesteadManagement.vue b/project/sass/apps/AppHomesteadManagement/AppHomesteadManagement.vue
new file mode 100644
index 00000000..b910a093
--- /dev/null
+++ b/project/sass/apps/AppHomesteadManagement/AppHomesteadManagement.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="AppHomesteadManagement">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from './components/List'
+import Add from './components/Add'
+
+export default {
+  label: '宅基地管理',
+  name: 'AppHomesteadManagement',
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: 'List',
+      params: {},
+      include: [],
+    }
+  },
+
+  components: {
+    Add,
+    List,
+  },
+  methods: {
+    onChange(data) {
+      if (data.type === 'add') {
+        this.component = 'Add'
+        this.params = data.params
+      }
+
+      if (data.type == 'list') {
+        this.component = 'List'
+        this.params = data.params
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList()
+          }
+        })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.AppHomesteadManagement {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>
diff --git a/project/sass/apps/AppHomesteadManagement/components/Add.vue b/project/sass/apps/AppHomesteadManagement/components/Add.vue
new file mode 100644
index 00000000..016be73b
--- /dev/null
+++ b/project/sass/apps/AppHomesteadManagement/components/Add.vue
@@ -0,0 +1,475 @@
+<template>
+  <section style="height: 100%" class="AppHomesteadManagement">
+    <ai-detail class="Add">
+      <!-- 返回按钮 -->
+      <template #title>
+        <ai-title :title="isEdit ? '编辑宅基地信息' : '添加宅基地'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template #content>
+        <el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
+          <ai-card title="户主信息" >
+            <template slot="content">
+              <div class="flex">
+                <el-form-item label="姓名" prop="name">
+                  <el-input size="small" class="user-selecter" v-model="formData.name" placeholder="请输入" clearable>
+                    <template slot="append">
+                      <ai-person-select :instance="instance" @selectPerson="checkName">
+                      </ai-person-select>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="身份证号码" prop="idNumber">
+                  <ai-id size="small" v-model="formData.idNumber" @change="IdCard(formData.idNumber)"/>
+                </el-form-item>
+                <el-form-item label="性别" prop="sex">
+                  <ai-select v-model="formData.sex" placeholder="请选择" :selectList="dict.getDict('sex')" disabled />
+                </el-form-item>
+                <el-form-item label="年龄" prop="age">
+                  <el-input size="small" v-model="formData.age" placeholder="请输入" clearable disabled></el-input>
+                </el-form-item>
+                <el-form-item label="联系电话">
+                  <el-input size="small" v-model="formData.phone" placeholder="请输入" clearable :maxlength="20"></el-input>
+                </el-form-item>
+              </div>
+              <el-form-item label="所属村" prop="areaId">
+                <ai-area-get :instance="instance" v-model="formData.areaId" :name.sync="formData.areaName" />
+              </el-form-item>
+            </template>
+          </ai-card>
+          <ai-card title="宅基地情况" >
+            <template slot="content">
+              <div class="flex">
+                <el-form-item label="宅基地面积">
+                  <el-input size="small" v-model="formData.homesteadArea" placeholder="请输入" clearable maxlength="10">
+                    <template slot="append">m²</template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="房基占地面积">
+                  <el-input size="small" v-model="formData.houseArea" placeholder="请输入" clearable maxlength="10">
+                    <template slot="append">m²</template>
+                  </el-input>
+                </el-form-item>
+              </div>
+              <el-form-item label="宅基地地址">
+                <el-input size="small" v-model="formData.homesteadAddress" placeholder="请输入" clearable maxlength="20"></el-input>
+              </el-form-item>
+              <div class="flex">
+                <el-form-item label="四至-东至">
+                  <el-input size="small" v-model="formData.eastTo" placeholder="请输入" clearable maxlength="20"></el-input>
+                </el-form-item>
+                <el-form-item label="四至-南至">
+                  <el-input size="small" v-model="formData.southTo" placeholder="请输入" clearable maxlength="20"></el-input>
+                </el-form-item>
+                <el-form-item label="四至-西至">
+                  <el-input size="small" v-model="formData.westTo" placeholder="请输入" clearable maxlength="20"></el-input>
+                </el-form-item>
+                <el-form-item label="四至-北至">
+                  <el-input size="small" v-model="formData.northTo" placeholder="请输入" clearable maxlength="20"></el-input>
+                </el-form-item>
+              </div>
+              <el-form-item label="地类" class="buildingTypes">
+                <el-radio-group v-model="formData.landType">
+                  <el-radio :label="item.dictValue" v-for="(item, index) in dict.getDict('homesteadLandType')" :key="index">{{item.dictName}}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="性质" class="buildingTypes">
+                <el-radio-group v-model="formData.houseType">
+                  <el-radio :label="item.dictValue" v-for="(item, index) in dict.getDict('homesteadHouseType')" :key="index">{{item.dictName}}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <div class="flex">
+                <el-form-item label="住宅建筑面积">
+                  <el-input size="small" v-model="formData.liveBuildingArea" placeholder="请输入" clearable maxlength="10">
+                    <template slot="append">m²</template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="建筑层数">
+                  <el-input size="small" v-model="formData.buildingFloorNumber" placeholder="请输入" clearable maxlength="10">
+                    <template slot="append">层</template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="建筑高度">
+                  <el-input size="small" v-model="formData.buildingHeight" placeholder="请输入" clearable maxlength="10">
+                    <template slot="append">m</template>
+                  </el-input>
+                </el-form-item>
+              </div>
+            </template>
+          </ai-card>
+          <ai-card title="位置信息" >
+            <template slot="content">
+              <div class="flex">
+                <el-form-item label="楼栋经度">
+                  <el-input size="small" v-model="formData.lng" placeholder="请输入" clearable maxlength="10"></el-input>
+                </el-form-item>
+                <el-form-item label="楼栋纬度">
+                  <el-input size="small" v-model="formData.lat" placeholder="请输入" clearable maxlength="10"></el-input>
+                </el-form-item>
+              </div>
+              <el-form-item label="地图位置">
+                <el-button @click="showMap = true">地图标绘</el-button>
+              </el-form-item>
+            </template>
+          </ai-card>
+        </el-form>
+      </template>
+      <!-- 底部按钮 -->
+      <template #footer>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="confirm()">提交</el-button>
+      </template>
+    </ai-detail>
+    <ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap">
+      <div id="map"></div>
+      <el-form label-width="80px" style="padding: 10px 20px 0 20px;">
+        <el-row type="flex" justify="space-between">
+          <el-form-item label="经度">
+            <el-input disabled size="small" v-model="placeDetail.lng"></el-input>
+          </el-form-item>
+          <el-form-item label="纬度">
+            <el-input disabled size="small" v-model="placeDetail.lat"></el-input>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
+        <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
+      </el-input>
+      <div id="searchPlaceOutput" />
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+export default {
+  name: 'Add',
+  props: {
+    dict: Object,
+    params: Object,
+    instance: Function,
+  },
+  data() {
+    return {
+      formData: {
+        name: '',
+        idNumber: '',
+        age: '',
+        sex: '',
+        phone: '',
+        areaId: '',
+        homesteadArea: '',
+        houseArea: '',
+        homesteadAddress: '',
+        eastTo: '',
+        southTo: '',
+        westTo: '',
+        northTo: '',
+        landType: '0',
+        houseType: '0',
+        liveBuildingArea: '',
+        buildingFloorNumber: '',
+        buildingHeight: '',
+        lng: '',
+        lat: '',
+        id: '',
+        areaName: ''
+      },
+      formRules: {
+        name: [
+          { required: true, message: '请选择人员', trigger: 'change' },
+        ],
+        age: [
+          { required: true, message: '请输入年龄', trigger: 'change' },
+        ],
+        sex: [
+          { required: true, message: '请选择性别', trigger: 'change' },
+        ],
+        idNumber: [
+          { required: true, message: '请输入身份证号码', trigger: 'change' },
+        ],
+        areaId: [
+          { required: true, message: '请选择所属村', trigger: 'change' },
+        ]
+      },
+      map: null,
+      placeDetail: {
+        lng: '',
+        lat: '',
+      },
+      showMap: false,
+      searchPlace: '',
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+
+    isEdit() {
+      return !!this.params.id
+    },
+  },
+  mounted() {
+    this.dict.load('homesteadLocationStatus', 'homesteadHouseType', 'homesteadLandType', 'sex').then(() => {
+      if(this.params.id) {
+        this.getListinfo()
+      }
+    })
+
+  },
+  methods: {
+    checkName(e) {
+      this.formData.name = e.name
+      this.formData.idNumber = e.idNumber
+      this.formData.phone = e.phone
+      this.formData.areaId = e.householdAreaId
+    },
+    IdCard(UUserCard) {
+      if (UUserCard) {
+        let arr = [];
+        if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
+          arr.push("1");
+        } else {
+          arr.push("0");
+        }
+
+        const myDate = new Date();
+        const month = myDate.getMonth() + 1;
+        const day = myDate.getDate();
+        let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
+        if (
+            UUserCard.substring(10, 12) < month ||
+            (UUserCard.substring(10, 12) == month &&
+                UUserCard.substring(12, 14) <= day)
+        ) {
+          age++;
+        }
+        arr.push(age);
+        this.formData.sex = arr[0];
+        this.formData.age = arr[1];
+      }
+    },
+    decimalInput(name) {
+      if(!/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/g.test(this.formData[name])){
+        this.formData[name] = ''
+        return this.$message.error('最多只保留两位小数点')
+      }
+    },
+    numberInput(name) {
+      if(!/^[1-9]\d*|0$/g.test(this.formData[name])){
+        this.formData[name] = ''
+        return this.$message.error('请输入正整数')
+      }
+    },
+    selectMap() {
+      this.formData.lng = this.placeDetail.lng
+      this.formData.lat = this.placeDetail.lat
+      this.showMap = false
+    },
+    getCorpLocation() {
+      this.instance.post('/app/appdvcpconfig/getCorpLocation').then((res) => {
+        if (res.code == 0) {
+          this.initMap(res.data)
+        }
+      })
+    },
+    initMap({ lng, lat }) {
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0',
+        plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
+      }).then((AMap) => {
+        this.placeDetail.lng = this.formData.lng
+        this.placeDetail.lat = this.formData.lat
+        this.map = new AMap.Map('map', {
+          resizeEnable: true,
+          zooms: [6, 20],
+          center: [lng, lat],
+          zoom: 11,
+        })
+        this.placeSearch = new AMap.PlaceSearch({ map: this.map })
+        new AMap.AutoComplete({
+          input: 'searchPlaceInput',
+          output: 'searchPlaceOutput',
+        }).on('select', (e) => {
+          if (e?.poi) {
+            this.placeSearch.setCity(e.poi.adcode)
+            this.movePosition(e.poi.location)
+          }
+        })
+        this.map.on('click', (e) => {
+          new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
+            if (res?.regeocode) {
+              this.placeDetail = {
+                lng: e.lnglat?.lng,
+                lat: e.lnglat?.lat,
+                address: res.regeocode.formattedAddress,
+              }
+            }
+          })
+          this.movePosition(e.lnglat)
+        })
+      })
+    },
+
+    movePosition(center) {
+      if (this.map) {
+        this.map.clearMap()
+        this.map.panTo(center)
+        this.map.add([
+          new AMap.Marker({
+            position: center,
+            clickable: true,
+          }),
+        ])
+        this.map.setFitView()
+      }
+    },
+
+    getListinfo() {
+      return this.instance
+        .post('/app/apphomesteadinfo/queryDetailById', null, {
+          params: {
+            id: this.params.id,
+          },
+        })
+        .then((res) => {
+          if (res.data) {
+            this.formData = res.data
+          }
+        })
+    },
+
+    confirm() {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          this.instance
+            .post(`/app/apphomesteadinfo/addOrUpdate`, {
+              ...this.formData,
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 1000)
+              }
+            })
+        }
+      })
+    },
+
+    // 返回按钮
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+  },
+  watch: {
+    communityNameContent: {
+      deep: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .AppHomesteadManagement {
+    ::v-deep .amap-logo {
+      display: none!important;
+    }
+    ::v-deep .amap-copyright {
+      display: none!important;
+    }
+  }
+
+.Add {
+  height: 100%;
+  .ai-detail__title {
+    background-color: #fff;
+  }
+  .ai-detail__content {
+    .ai-detail__content--wrapper {
+      .el-form {
+        // background-color: #fff;
+        // padding: 0 60px;
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .el-form-item {
+            width: 48%;
+          }
+          .buildingTypes {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .user-selecter {
+    ::v-deep .el-input-group__append {
+      width: 68px;
+      background: transparent;
+    }
+
+    ::v-deep .el-button {
+      color: #fff;
+
+      &:hover {
+        opacity: 0.8;
+        background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
+      }
+    }
+  }
+}
+
+::v-deep .mapDialog {
+  .el-dialog__body {
+    padding: 0;
+
+    .ai-dialog__content {
+      padding: 0;
+    }
+
+    .ai-dialog__content--wrapper {
+      padding: 0 !important;
+      position: relative;
+    }
+
+    #map {
+      width: 100%;
+      height: 420px;
+    }
+
+    .searchPlaceInput {
+      position: absolute;
+      width: 250px;
+      top: 30px;
+      left: 25px;
+    }
+
+    #searchPlaceOutput {
+      position: absolute;
+      width: 250px;
+      left: 25px;
+      height: initial;
+      top: 80px;
+      background: white;
+      z-index: 250;
+      max-height: 300px;
+      overflow-y: auto;
+
+      .auto-item {
+        text-align: left;
+        font-size: 14px;
+        padding: 8px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppHomesteadManagement/components/List.vue b/project/sass/apps/AppHomesteadManagement/components/List.vue
new file mode 100644
index 00000000..43fb30c7
--- /dev/null
+++ b/project/sass/apps/AppHomesteadManagement/components/List.vue
@@ -0,0 +1,203 @@
+<template>
+  <section class="AppPetitionManage">
+    <ai-list>
+      <!-- 标题 -->
+      <ai-title slot="title" title="宅基地管理" isShowBottomBorder  isShowArea v-model="areaId" :instance="instance" @change="page.current=1,getList()"/>
+      <template #content>
+        <ai-search-bar bottomBorder>
+          <template slot="left">
+            <!-- 定位状态 -->
+            <ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="$dict.getDict('homesteadLocationStatus')" @change=";(page.current = 1), getList()"></ai-select>
+          </template>
+
+          <!-- 搜索 -->
+          <template slot="right">
+            <el-input v-model="search.name" size="small" placeholder="户主/联系电话" clearable @keyup.enter.native=";(page.current = 1), getList()" @clear=";(page.current = 1), (search.name = ''), getList()" suffix-icon="iconfont iconSearch" />
+          </template>
+        </ai-search-bar>
+
+        <ai-search-bar class="ai-search-ba mar-t10">
+          <template slot="left">
+            <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加 </el-button>
+            <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button>
+          </template>
+
+          <!-- 导入导出 -->
+          <template #right>
+            <ai-import :instance="instance" :dict="dict" type="apphomesteadinfo" :importParams="{ areaId: user.info && user.info.areaId }" name="宅基地管理" @success="getList()">
+              <el-button icon="iconfont iconImport">导入</el-button>
+            </ai-import>
+            <ai-download :instance="instance" url="/app/apphomesteadinfo/export" :params="param" fileName="宅基地管理模板" :disabled="tableData.length == 0">
+              <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
+            </ai-download>
+          </template>
+        </ai-search-bar>
+
+        <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="page.current" :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))">
+          <el-table-column slot="locationStatus" label="定位状态" align="center">
+            <template slot-scope="{ row }">
+              <span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('homesteadLocationStatus', row.locationStatus) }}</span>
+              <span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('homesteadLocationStatus', row.locationStatus) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
+            <template slot-scope="{ row }">
+              <el-button type="text" @click="onAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+  </section>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'List',
+  props: {
+    dict: Object,
+    instance: Function,
+    params: Object,
+  },
+
+  data() {
+    return {
+      isAdd: false,
+      page: {
+        current: 1,
+        size: 10,
+      },
+      total: 0,
+      search: {
+        locationStatus: '',
+        name: '',
+      },
+      id: '',
+      ids: [],
+      colConfigs: [
+        { type: 'selection', width: 100,  align: 'center'},
+        {
+          prop: 'areaName',
+          label: '村/社区',
+        },
+        {
+          prop: 'name',
+          label: '户主',
+          align: 'center',
+        },
+        { prop: 'phone', label: '联系电话', align: 'center' },
+        {
+          prop: 'sex',
+          label: '性别',
+          width: '100',
+          align: 'center',
+          render: (h, { row }) => {
+            return h('span', null, this.dict.getLabel('sex', row.sex))
+          },
+        },
+        { prop: 'age', label: '年龄', align: 'center' },
+        {
+          prop: 'idNumber',
+          label: '身份证号',
+          align: 'center',
+        },
+        { prop: 'liveBuildingArea', label: '建筑面积(m²)', align: 'center',width: 120 },
+        {
+          slot: 'locationStatus'
+        },
+        {
+          slot: 'options',
+          label: '操作',
+          align: 'center',
+        },
+      ],
+      tableData: [],
+      areaId: '',
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    param() {
+      return {
+        ...this.search,
+        areaId: this.user.info?.areaId,
+        ids: this.ids,
+      }
+    },
+  },
+
+  mounted() {
+    this.areaId = this.user.info.areaId
+    this.dict.load('homesteadLocationStatus', 'homesteadHouseType', 'homesteadLandType', 'sex').then(() => {
+      this.getList()
+    })
+  },
+
+  methods: {
+    getList() {
+      this.instance
+        .post(`/app/apphomesteadinfo/list`, null, {
+          params: {
+            ...this.page,
+            ...this.search,
+            areaId: this.areaId,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            if(res.data.records.length) {
+              res.data.records.map((item) => {
+                item.idNumber = item.idNumber.substring(0,10) +  '****' + item.idNumber.substring(13,17)
+              })
+            }
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+    },
+
+    // 添加
+    onAdd(id) {
+      this.$emit('change', {
+        type: 'add',
+        params: {
+          id: id || '',
+          areaId: this.areaId,
+        },
+      })
+    },
+
+    // 删除
+    remove(id) {
+      this.$confirm('确定删除该数据?').then(() => {
+        this.instance.post(`/app/apphomesteadinfo/delete?ids=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    removeAll() {
+      var id = this.ids.join(',')
+      this.remove(id)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppPetitionManage {
+  height: 100%;
+  .mar-t10{
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/project/sass/apps/AppHouseMap/AppHouseMap.vue b/project/sass/apps/AppHouseMap/AppHouseMap.vue
new file mode 100644
index 00000000..ae0f5173
--- /dev/null
+++ b/project/sass/apps/AppHouseMap/AppHouseMap.vue
@@ -0,0 +1,1344 @@
+<template>
+  <div style="height:100%;">
+    <div class="map" v-if="!hasCommunityId">
+      <ai-title title="房屋地图" is-show-bottom-border style="margin-left: 20px"/>
+      <div id="map" ref="rootmap" @click="hidePopup"/>
+      <div class="map-area">
+        <div class="map-area__container">
+          <div class="map-area__left">
+            <div class="left">
+              <i class="iconfont iconLocation"></i>
+              <span>{{ areaName }}</span>
+            </div>
+            <el-input placeholder="请输入姓名、房屋" v-model="community"
+                      @focus="isShowSearch = true, isShowArea = false"></el-input>
+            <i class="search-icon iconfont iconSearch" @click="search(false)"></i>
+          </div>
+          <div class="map-area__right">
+            <ai-select size="medium" v-model="type" placeholder="请选择房屋类型" :selectList="typeList" @change="search"/>
+          </div>
+        </div>
+        <div class="search-result" v-if="isShowSearch && searchList.length">
+          <div class="search-result__item" v-for="(item, index) in searchList" :key="index"
+              @click="chooseCommunity(item)">
+            <i class="search-icon iconfont iconLocation"></i>
+            <h2 v-if="type != 1">{{ item.residentName }}</h2>
+            <span v-if="type != 1">{{ item.createAddress }}</span>
+            <h2 v-if="type == 1">{{ item.name }}</h2>
+            <span v-if="type == 1">{{ item.homesteadAddress }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="community-info" v-show="isShowInfo">
+        <div class="community-info__close" title="关闭" @click="info = {}, isShowInfo = false,chooseBuildId=''">
+          <i class="iconClean iconfont"></i>
+        </div>
+        <div class="community-info__header">
+          <h2 v-if="!info.name">{{ info.createAddress }}</h2>
+          <h2 v-if="info.name">{{ info.homesteadAddress }}</h2>
+          <div>{{ info.lng }},{{ info.lat }}</div>
+        </div>
+        <div class="community-info__wrapper" v-if="info.name">
+          <h2>户主信息</h2>
+          <div class="community-info__item">
+            <label>所属村</label>
+            <span>{{info.areaName}}</span>
+          </div>
+          <div class="community-info__item">
+            <label>姓名</label>
+            <span style="color:#2266FF;">{{info.name}}</span>
+          </div>
+          <div class="community-info__item">
+            <label>联系电话</label>
+            <span style="color:#2266FF;">{{info.phone}}</span>
+          </div>
+          <div class="community-info__item">
+            <label>性别</label>
+            <span>{{info.sex == 1 ? '男' : '女'}}</span>
+          </div>
+          <div class="community-info__item">
+            <label>年龄</label>
+            <span>{{info.age}}</span>
+          </div>
+          <div class="community-info__item bg-fff"></div>
+        </div>
+        <div class="community-info__wrapper" v-if="info.name">
+          <h2>宅基地信息</h2>
+          <div class="community-info__item">
+            <label>住宅建筑面积</label>
+            <span>{{info.liveBuildingArea}}m²</span>
+          </div>
+          <div class="community-info__item">
+            <label>建筑层数</label>
+            <span>{{info.buildingFloorNumber}}层</span>
+          </div>
+          <div class="community-info__item">
+            <label>建筑高度</label>
+            <span>{{info.buildingHeight}}m</span>
+          </div>
+        </div>
+        <div class="community-info__wrapper" v-if="!info.name">
+          <h2>房屋信息</h2>
+          <div class="community-info__item">
+            <label>所属社区</label>
+            <span>{{ info.areaName}}</span>
+          </div>
+          <div class="community-info__item">
+            <label>所属小区</label>
+            <span>{{ info.communityName }}</span>
+          </div>
+          <div class="community-info__item">
+            <label>房屋类型</label>
+            <span>{{ dict.getLabel("communityBuildingType",info.buildingType) }}</span>
+          </div>
+          <div class="community-info__item">
+            <label>楼长姓名</label>
+            <span>{{ info.managerName }}</span>
+          </div>
+          <div class="community-info__item">
+            <label>楼长电话</label>
+            <span>{{ info.managerPhone}}</span>
+          </div>
+        </div>
+        <div class="community-btn" v-if="!info.name">
+          <el-button icon="iconfont iconloudongmoxing" size="small"
+                    @click="showStatistics=true; $router.push({query: {communityId: info.communityId, buildingId: info.id,unitNum:house ? house.unitNumber : 1,buildingNumber:info.buildingNumber}})">楼栋模型
+          </el-button>
+        </div>
+      </div>
+      
+      <div class="map-menu">
+        <div class="map-menu__item">
+          <div class="map-layers__wrapper">
+            <div class="map-layers">
+              <div class="map-layers__item" @click="switchLayer(false)"
+                  :class="[!isImageMap ? 'map-layers__item-active' : '']">
+                <img src="https://cdn.cunwuyun.cn/AppCommunityMap/dz.png" alt="">
+                <div class="map-layers__item--tag" :class="[!isImageMap ? 'map-layers__item--tag-active' : '']">地图</div>
+              </div>
+              <div class="map-layers__item" @click="switchLayer(true)"
+                  :class="[isImageMap ? 'map-layers__item-active' : '']">
+                <img src="https://cdn.cunwuyun.cn/AppCommunityMap/yx.png" alt="">
+                <div class="map-layers__item--tag" :class="[isImageMap ? 'map-layers__item--tag-active' : '']">卫星</div>
+              </div>
+            </div>
+          </div>
+          <i class="iconfont iconEarth"></i>
+        </div>
+        <div class="map-menu__item" @click="changeZoom(true)">
+          <i class="iconfont iconfangda"></i>
+        </div>
+        <div class="map-menu__item" @click="changeZoom()">
+          <i class="iconfont iconsuoxiao"></i>
+        </div>
+      </div>
+    </div>
+    <building-statistics :instance="instance" :dict="dict" v-if="hasCommunityId"/>
+  </div>
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader'
+import {mapState} from 'vuex'
+import BuildingStatistics from "./buildingStatistics"
+
+export default {
+  name: 'AppHouseMap',
+  label: '房屋地图',
+  components: {BuildingStatistics},
+  provide() {
+    return {
+      root: this
+    }
+  },
+  props: {
+    instance: Function,
+    dict: Object
+  },
+  data() {
+    return {
+      map: null,
+      community: '',
+      isShowLayer: false,
+      isShowSearch: false,
+      isShowArea: false,
+      styleFunction: null,
+      areaData: {},
+      isImageMap: false,
+      isShowInfo: false,
+      areaId: '',
+      areaName: '',
+      list: [],
+      areaList: [],
+      info: {},
+      resident:null,
+      satellite: null,
+      zoom: 11,
+      chooseBuildId: '',
+      buildList: [],
+      searchList: [],
+      house:null,
+      center: [],
+      type: '',
+      typeList: [
+        {
+          dictValue: '0',
+          dictName: '楼栋'
+        },
+        {
+          dictValue: '1',
+          dictName: '宅基地'
+        }
+      ],
+      showStatistics: false
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+
+    hasCommunityId() {
+      return !!this.$route.query?.communityId
+    }
+  },
+
+  watch: {
+    community: {
+      deep: true,
+      handler() {
+        this.debounce(this.search, 500)
+      }
+    },
+    hasCommunityId(v) {
+      if (!v) {
+        this.getCorpLocation()
+      }
+    },
+    showStatistics: {
+      deep: true,
+      handler() {
+        this.debounce(this.getCorpLocation, 500)
+      }
+    },
+  },
+
+  created() {
+    this.dict.load('householdRelation','communityBuildingType')
+  },
+
+  mounted() {
+    this.areaId = this.user.info.areaId
+    this.areaName = this.user.info.areaName
+    this.getCorpLocation()
+  },
+
+  methods: {
+    getCorpLocation(){
+      if(this.showStatistics) { //楼栋模型返回重新查询
+        return
+      }
+      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
+        if(res.code==0){
+          this.initMap(res.data);
+        }
+      })
+    },
+    changeZoom(isAdd) {
+      const zoom = isAdd ? this.map.getZoom() + 1 : this.map.getZoom() - 1
+      this.map.setZoom(zoom, false, 600)
+    },
+
+    debounce(fn, wait) {
+      if (this.timer !== null) {
+        clearTimeout(this.timer)
+      }
+      this.timer = setTimeout(fn, wait)
+    },
+
+    search() {
+      if(this.type === '') {
+        this.searchList = []
+        this.$message.error('请先选择房屋类型')
+        return
+      }
+      this.isShowArea = false
+      var url = '/app/appcommunityhouseinfo/queryHouseByName'
+      if(this.type == 1) {
+        url = '/app/apphomesteadinfo/list'
+      }
+      this.instance.post(url, null, {
+        params: {
+          current: 1,
+          size: 20,
+          areaId: this.user.info.areaId,
+          name: this.community
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          var data = []
+          if(this.type == 1) {
+            data = res.data.records
+          }else {
+            data = res.data
+          }
+
+          if (data.length) {
+            this.searchList = data
+          } else {
+            this.$message.error('未搜索到结果')
+            this.searchList = []
+          }
+        }
+      })
+    },
+
+    getBuildInfo(id, type) {
+      var url = `/app/apphomesteadinfo/queryDetailById?id=${id}`
+      if(type == 0) {
+        url= `/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${id}`
+      }
+      this.instance.post(url).then(res => {
+        if (res.code === 0) {
+          if(type == 1) {
+            this.info = res.data
+          }else {
+            this.info = res.data.build
+            this.resident = null;
+          }
+          this.$nextTick(() => {
+            this.isShowInfo = true
+          })
+        }
+      })
+    },
+
+    chooseCommunity(item) {
+      if(item.name) { //宅基地
+        if(!item.lng || !item.lat) {
+          return this.$message.error('未获取到该房屋坐标信息')
+        }else {
+          this.map.setZoomAndCenter(18, [item.lng, item.lat], false, 600)
+          this.info = item
+          this.$nextTick(() => {
+            this.isShowSearch = false
+            this.isShowInfo = true
+          })
+        }
+        
+      }else { //楼栋
+        this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`,null,{
+        params:{
+          buildId:item.buildingId,
+          houseId:item.id,
+          residentId:item.residentId
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          if (!res.data.build?.lng || !res.data.build?.lat) {
+            this.isShowInfo = true
+            this.isShowSearch = false
+            this.info = res.data.build;
+            return this.$message.error('未获取到该房屋坐标信息')
+          } else {
+            this.chooseBuildId = res.data.build.id
+            this.house = res.data.house
+            this.resident = res.data.resident;
+          }
+
+          this.map.setZoomAndCenter(18, [res.data.build?.lng, res.data.build?.lat], false, 600)
+          this.info = res.data.build
+          this.$nextTick(() => {
+            this.isShowSearch = false
+            this.isShowInfo = true
+          })
+        }
+      })
+      }
+    },
+
+    toCenter() {
+      this.map.setZoomAndCenter(this.zoom, this.center, false, 600)
+    },
+
+    renderClusterMarker(context) {
+      let el = `<div class="polymeric">
+        <div class="polymeric-container">
+          <p>${context.count}</p>
+        </div>
+      </div>`
+
+      let offset = new AMap.Pixel(-9, -9)
+      context.marker.setContent(el)
+      context.marker.setOffset(offset)
+      context.marker.lnglat = context.clusterData[0].lnglat
+
+      context.marker.on('click', e => {
+        this.map.setZoomAndCenter(this.map.getZoom() + 2, e.target.lnglat, false, 500)
+      })
+    },
+
+    renderMarker(context) {
+      const buildId = context.data[0].id
+      let el = ''
+      var urlType = ''
+      if(context.data[0].communityName == context.data[0].buildingNumber) { //宅基地
+        urlType = 1
+        el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId?'background-color:#2266FF':'background-color:#FF701A'}">
+         <div class="mark-contaienr">
+            <span>${context.data[0].areaName}</span>&nbsp;&nbsp;
+            <span>${context.data[0].communityName}</span>
+          </div>
+        <div class="arrow" style="${buildId === this.chooseBuildId?'border-top-color: #2266FF':'border-top-color:#FF701A'}"></div>
+      </div>`
+      }else {
+        urlType = 0
+        el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId?'background-color:#2266FF':''}">
+         <div class="mark-contaienr">
+            <span>${context.data[0].communityName}</span>&nbsp;&nbsp;
+            <span>${context.data[0].buildingNumber}栋</span>
+          </div>
+        <div class="arrow" style="${buildId === this.chooseBuildId?'border-top-color: #2266FF':''}"></div>
+      </div>`
+      }
+
+      context.marker.setContent(el);
+      context.marker.setAnchor("center")
+      context.marker.id = `${buildId}`
+      context.marker.lnglat = context.data[0].lnglat
+      context.marker.urlType = urlType
+
+      context.marker.on('click', e => {
+        this.chooseBuildId = e.target.id
+        this.getBuildInfo(e.target.id, e.target.urlType)
+        context.marker.setContent(el);
+        document.querySelectorAll('.mark').forEach(el => {
+          el.style['background-color'] = '#0F8F64'
+          el.querySelector('.arrow').style['border-top-color'] = '#0F8F64'
+        })
+        document.querySelector(`#buildId-${e.target.id}`).style['background-color'] = '#2266FF'
+        document.querySelector(`#buildId-${e.target.id}`).querySelector('.arrow').style['border-top-color'] = '#2266FF'
+        // this.map.setZoomAndCenter(this.map.getZoom() + 2 + 0.00001, e.target.lnglat, false, 300)
+      })
+    },
+
+    addMakert(points) {
+      new AMap.MarkerClusterer(this.map, points, {
+        gridSize: 60,
+        maxZoom: 15,
+        clusterByZoomChange: false,
+        renderClusterMarker: this.renderClusterMarker,
+        renderMarker: this.renderMarker
+      })
+    },
+
+    getCommunityList() {
+      this.instance.post('/app/appcommunitybuildinginfo/listByBuildingAndHomestead', null, {
+        params: {
+          current: 1,
+          size: 1000000
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.buildList = res.data
+          const points = res.data.map(item => {
+            return {
+              lnglat: [item.lng, item.lat],
+              id: item.id,
+              corpId: item.corpId,
+              areaName:item.areaName,
+              buildingNumber: item.name || item.buildingNumber,
+              communityName:item.name || item.communityName,
+            }
+          })
+
+          this.addMakert(points)
+        }
+      })
+    },
+
+    hidePopup() {
+      this.isShowArea = false
+      this.isShowSearch = false
+    },
+
+    switchLayer(flag) {
+      if (flag) {
+        this.map.addLayer(this.satellite)
+      } else {
+        this.map.removeLayer(this.satellite)
+      }
+
+      this.isImageMap = flag
+    },
+
+    initMap({lng,lat}) {
+      this.center = [lng,lat];
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0',
+        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer'],
+        AMapUI: {
+          version: '1.1',
+          plugins: []
+        }
+      }).then((AMap) => {
+        this.map = new AMap.Map('map', {
+          resizeEnable: true,
+          zooms: [6, 20],
+          center: [lng, lat],
+          zoom: this.zoom
+        })
+        this.satellite = new AMap.TileLayer.Satellite()
+        this.getCommunityList()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.no-more {
+  display: block;
+  height: 60px;
+  line-height: 60px;
+  margin-top: 2px;
+  text-align: center;
+  font-size: 12px;
+  color: #999;
+  width: 100%;
+}
+
+::v-deep .ai-list__content--right-wrapper{
+  height: 100%;
+  margin: 0px !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+
+.map {
+  ::v-deep .amap-logo, ::v-deep .amap-copyright {
+    display: none !important;
+  }
+
+  ::v-deep .amap-icon {
+    width: 40px !important;
+    height: 40px !important;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.community-btn {
+  margin: 16px auto 20px;
+  text-align: center;
+}
+
+.community-info__star {
+  margin-top: 4px;
+  margin-bottom: 8px;
+
+  .community-info__star--content {
+    display: flex;
+    align-items: center;
+    height: 36px;
+    padding: 0 12px;
+    color: #666666;
+    font-size: 12px;
+
+    span {
+      flex: 1;
+      text-align: center;
+
+      &:first-child {
+        text-align: left;
+      }
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+
+    &:nth-of-type(2n) {
+      background: #fff;
+    }
+  }
+
+  .community-info__star--tab {
+    display: flex;
+    align-items: center;
+    height: 36px;
+    padding: 0 12px;
+    user-select: none;
+    background: #fff;
+
+    span {
+      height: 100%;
+      line-height: 36px;
+      color: #999999;
+      font-size: 12px;
+      font-weight: 700;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+
+      &:first-child {
+        margin-right: 16px;
+      }
+
+      &.star-active {
+        color: #2266FF;
+        border-bottom: 2px solid #2266FF;
+      }
+    }
+  }
+}
+
+.community-info__item--imgs {
+  display: block !important;
+  height: auto !important;
+
+  label {
+    height: 36px;
+    line-height: 36px;
+  }
+
+  .community-info__item--img {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-bottom: 10px;
+    overflow: hidden;
+
+    img {
+      width: 69px;
+      height: 69px;
+      margin-right: 4px;
+      margin-bottom: 4px;
+      cursor: pointer;
+
+      &:nth-of-type(4n) {
+        margin-right: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.map-menu {
+  position: absolute;
+  bottom: 52px;
+  left: 30px;
+  z-index: 11;
+
+  .map-layers__wrapper {
+    display: none;
+    position: absolute;
+    bottom: 28px;
+    left: 0;
+    padding-bottom: 4px;
+  }
+
+  .map-layers {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 180px;
+    height: 66px;
+    margin-bottom: 4px;
+    padding: 5px;
+    background: #FFFFFF;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+
+    .map-layers__item {
+      position: relative;
+      width: 80px;
+      height: 56px;
+      margin-right: 10px;
+      cursor: pointer;
+      user-select: none;
+      border: 1px solid transparent;
+
+      &.map-layers__item-active {
+        border: 1px solid #366FFF;
+      }
+
+      .map-layers__item--tag {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 32px;
+        height: 18px;
+        line-height: 18px;
+        text-align: center;
+        color: #fff;
+        font-size: 12px;
+        border: 1px solid transparent;
+        background: transparent;
+
+        &.map-layers__item--tag-active {
+          background: #366FFF;
+        }
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .map-menu__item {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    margin-bottom: 10px;
+    background: #FFFFFF;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      .map-layers__wrapper {
+        display: block;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    i {
+      font-size: 16px;
+      color: #89b;
+    }
+  }
+}
+
+.switch-layer {
+  position: absolute;
+  bottom: 4.6em;
+  left: .56em;
+  z-index: 11;
+  width: 29px;
+  height: 29px;
+  padding: 3px;
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.4);
+  border-radius: 4px;
+  cursor: pointer;
+
+  .switch-layer__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background-color: rgba(0, 60, 136, 0.5);
+
+    &:hover {
+      background-color: rgba(0, 60, 136, 0.7);
+    }
+  }
+}
+
+.map {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  ::v-deep .ol-zoom {
+    display: none !important;
+    top: inherit !important;
+    bottom: 0.5em !important;
+  }
+
+  div {
+    box-sizing: border-box;
+  }
+
+  #map {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.community {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 28px;
+  padding: 0 10px;
+  background: #0F8F64;
+  border-radius: 26px;
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+
+  &.color1 {
+    background: #2266FF;
+
+    em:after {
+      border-top-color: #2266FF !important;
+    }
+  }
+
+  &.color2 {
+    background: #F46159;
+
+    em:after {
+      border-top-color: #F46159 !important;
+    }
+  }
+
+  em {
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    &::after {
+      position: absolute;
+      bottom: -6px;
+      left: 0;
+      width: 0;
+      height: 0;
+      border: 6px solid #0F8F64;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+      border-right-color: transparent;
+      transform: translate(-50%, 0);
+      overflow: hidden;
+      content: ' ';
+    }
+  }
+
+  i {
+    padding-right: 2px;
+    position: relative;
+    color: #ffc928;
+    font-size: 16px;
+    font-style: normal;
+  }
+}
+
+::v-deep .polymeric {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 62px;
+  height: 62px;
+  border-radius: 50%;
+  cursor: pointer;
+  user-select: none;
+
+  &.polymeric-active {
+    .polymeric-container {
+      background: #F46159;
+    }
+
+    &::after {
+      background-color: #F46159;
+    }
+  }
+
+  &::after {
+    position: absolute;
+    z-index: -1;
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    -webkit-animation: warn 1s ease-out 0s infinite;
+    animation: warn 1s ease-out 0s infinite;
+    background-color: rgba(15, 143, 100, 1);
+    transform: translate(-50%, -50%);
+    content: " ";
+  }
+
+  .polymeric-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    background: rgba(15, 143, 100, 1);
+
+    p {
+      text-align: center;
+      width: 58px;
+      color: #fff;
+      font-size: 18px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    p:first-child{
+      font-size: 14px;
+    }
+
+    h2 {
+      color: #fff;
+      font-weight: normal;
+      font-size: 12px;
+    }
+  }
+}
+
+::v-deep .mark{
+  user-select: none;
+  cursor: pointer;
+  height: 32px;
+  border-radius: 26px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #0F8F64;
+  box-sizing: border-box;
+  padding: 0 12px;
+
+  .mark-contaienr{
+    color: white;
+    font-size: 14px;
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .arrow{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -21px;
+    width: 0;
+    height: 0;
+    border: 12px solid transparent;
+    border-top: 12px solid #0F8F64;
+  }
+
+}
+
+@-webkit-keyframes warn {
+  0% {
+    transform: scale(.5);
+    opacity: 1
+  }
+
+  30% {
+    opacity: .5
+  }
+
+  to {
+    transform: scale(1.8);
+    opacity: 0
+  }
+}
+
+@keyframes warn {
+  0% {
+    transform: scale(.5);
+    opacity: 1
+  }
+
+  30% {
+    opacity: .5
+  }
+
+  to {
+    transform: scale(1.4);
+    opacity: 0
+  }
+}
+
+.community-info {
+  position: absolute;
+  top: 58px;
+  right: 10px;
+  width: 320px;
+  height: calc(100% - 117px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 111;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  background: #fff;
+
+  .community-info__close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 16px 12px 0 12px;
+    font-size: 16px;
+    color: #fff;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 1px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: rgba(144, 147, 153, .5);
+  }
+
+  .community-info__header {
+    min-height: 92px;
+    padding: 12px;
+    background: #2266FF;
+
+    h2 {
+      max-width: 260px;
+      margin: 0;
+      color: #fff;
+      font-size: 18px;
+      font-weight: 500;
+      margin-bottom: 20px;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+      color: #D2E0FF;
+      font-size: 12px;
+    }
+
+    span {
+      display: block;
+      margin-top: 4px;
+      font-style: normal;
+      color: #D2E0FF;
+      font-size: 12px;
+    }
+  }
+
+  .community-info__table {
+    margin: 4px 0;
+    font-size: 0;
+
+    .community-info__table--item {
+      display: inline-block;
+      width: 25%;
+      font-size: 12px;
+      color: #333;
+
+      span {
+        display: block;
+        width: 80px;
+        height: 48px;
+        padding: 8px 10px;
+        text-align: center;
+        box-sizing: border-box;
+        background: #fff;
+        border-bottom: 1px solid #DEE6F3;
+        border-right: 1px solid #DEE6F3;
+      }
+
+      h2 {
+        width: 80px;
+        height: 40px;
+        line-height: 40px;
+        font-size: 12px;
+        text-align: center;
+        font-weight: normal;
+        box-sizing: border-box;
+        background: #F3F6F9;
+        border-bottom: 1px solid #DEE6F3;
+        border-right: 1px solid #DEE6F3;
+      }
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  .community-info__wrapper {
+    h2 {
+      height: 36px;
+      line-height: 36px;
+      margin: 0;
+      padding: 0 12px;
+      font-size: 12px;
+      font-weight: 900;
+      background: #F3F6F9;
+    }
+
+    .community-info__item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px;
+      font-size: 12px;
+      color: #333;
+      background: #fff;
+
+      &:nth-of-type(2n) {
+        background: #F3F6F9;
+      }
+
+      span {
+        max-width: 70%;
+        text-align: right;
+      }
+
+      label {
+        flex-shrink: 1;
+        color: #333;
+      }
+    }
+
+    &.community-info__wrapper--last {
+      .community-info__item {
+        background: #fff;
+
+        &:nth-of-type(2n-1) {
+          background: #fff;
+        }
+      }
+    }
+
+    .bg-fff{
+      background-color: #fff!important;
+    }
+  }
+}
+
+.map-area__list {
+  position: absolute;
+  top: 51px;
+  left: 0;
+  z-index: 111;
+  width: 320px;
+  overflow-y: auto;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  background: #fff;
+
+  .content {
+    padding: 10px 20px;
+    font-size: 0;
+
+    h2 {
+      margin-bottom: 10px;
+      color: #5088FF;
+      font-size: 12px;
+      cursor: pointer;
+    }
+
+    span {
+      display: inline-block;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      color: #333;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        color: #5088FF;
+      }
+    }
+  }
+
+  .top {
+    height: 36px;
+    line-height: 36px;
+    padding: 0 20px;
+    border-bottom: 1px solid #EEEEEE;
+
+    h2 {
+      font-weight: normal;
+      color: #666666;
+      font-size: 12px;
+    }
+  }
+}
+
+.search-result {
+  position: absolute;
+  top: 51px;
+  left: 0;
+  z-index: 111;
+  width: 360px;
+  height: 216px;
+  overflow-y: auto;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  background: #fff;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 1px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: rgba(144, 147, 153, .5);
+  }
+
+  .search-result__item {
+    display: flex;
+    align-items: center;
+    height: 36px;
+    padding: 0 16px;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background: #f5f7fa;
+    }
+
+    i {
+      position: relative;
+      top: 2px;
+      color: #ccc;
+      font-size: 16px;
+    }
+
+    h2 {
+      padding: 0 8px 0 10px;
+      color: #333333;
+      font-size: 14px;
+    }
+
+    span {
+      max-width: 240px;
+      color: #999999;
+      font-size: 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.map-area {
+  position: absolute;
+  top: 58px;
+  left: 10px;
+  z-index: 111;
+
+  .map-area__container {
+    display: flex;
+
+    .map-area__left {
+      display: flex;
+      align-items: center;
+      width: 360px;
+      height: 36px;
+      padding: 0 16px 0 0;
+      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 2px;
+      cursor: pointer;
+      user-select: none;
+      background: #fff;
+
+      .left {
+        display: flex;
+        position: relative;
+        align-items: center;
+        height: 100%;
+        line-height: 1;
+        padding: 0 20px 0 8px;
+
+        &:hover {
+          opacity: 0.6;
+        }
+
+        &:after {
+          position: absolute;
+          right: 0;
+          top: 50%;
+          width: 1px;
+          height: 24px;
+          background: #DDDDDD;
+          transform: translateY(-50%);
+          box-shadow: -1px 0px 0px 0px #DDDDDD;
+          border-radius: 2px 0 0 0;
+          opacity: 0.9;
+          content: ' ';
+        }
+
+        span {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 12px;
+          color: #333;
+        }
+
+        i {
+          font-size: 16px;
+        }
+      }
+
+      ::v-deep .el-input, ::v-deep input {
+        border: none;
+      }
+
+      ::v-deep input {
+        position: relative;
+        flex: 1;
+        height: 36px;
+        padding: 0 32px 0 16px;
+        font-size: 14px;
+        border: none;
+      }
+
+      .search-icon {
+        &:after {
+          position: absolute;
+          left: -16px;
+          top: 50%;
+          width: 1px;
+          height: 24px;
+          background: #DDDDDD;
+          transform: translateY(-50%);
+          box-shadow: -1px 0px 0px 0px #DDDDDD;
+          border-radius: 2px 0 0 0;
+          opacity: 0.9;
+          content: ' ';
+        }
+      }
+
+      i {
+        position: relative;
+        color: #89B;
+      }
+    }
+    .map-area__right{
+      margin-left: 16px;
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppHouseMap/AppPopulationDV.vue b/project/sass/apps/AppHouseMap/AppPopulationDV.vue
new file mode 100644
index 00000000..3b5283f0
--- /dev/null
+++ b/project/sass/apps/AppHouseMap/AppPopulationDV.vue
@@ -0,0 +1,1429 @@
+<template>
+  <section class="AppPopulationDV">
+    <div class="map">
+      <ai-map v-bind="mapOptions" :map.sync="map" :lib.sync="mapLib" @click.native.stop="hidePopup" is3d/>
+      <div class="community-info" v-show="isShowInfo">
+        <div class="community-info__close" title="关闭"
+             @click="info = {}, isShowInfo = false,chooseBuildId=''">
+          <i class="iconClean iconfont"></i>
+        </div>
+        <div class="community-info__header">
+          <h2>{{ info.createAddress }}</h2>
+          <div>{{ info.lng }},{{ info.lat }}</div>
+        </div>
+        <div class="community-info__wrapper">
+          <h2>人口信息</h2>
+          <div class="community-info__total">
+            <div class="community-info__total--item">
+              <h2>{{ statisticsInfo['实有户数'] }}</h2>
+              <span>实有户数</span>
+            </div>
+            <div class="community-info__total--item">
+              <h2>{{ statisticsInfo['实有人口'] }}</h2>
+              <span>实有人口</span>
+            </div>
+            <div class="community-info__total--item">
+              <h2>{{ statisticsInfo['流动人口'] }}</h2>
+              <span>流动人口</span>
+            </div>
+          </div>
+        </div>
+        <div class="community-info__wrapper">
+          <h2>房屋信息</h2>
+          <div class="community-info__item">
+            <label>所属社区</label>
+            <span>{{ info.areaName }}</span>
+          </div>
+          <div class="community-info__item">
+            <label>所属小区</label>
+            <span>{{ info.communityName }}</span>
+          </div>
+          <div class="community-info__item">
+            <label>房屋类型</label>
+            <span>{{ dict.getLabel("communityBuildingType", info.buildingType) }}</span>
+          </div>
+          <div class="community-info__item">
+            <label>楼长姓名</label>
+            <span>{{ info.managerName }}</span>
+          </div>
+          <div class="community-info__item">
+            <label>楼长电话</label>
+            <span>{{ info.managerPhone }}</span>
+          </div>
+        </div>
+        <div class="community-info__wrapper" v-if="resident">
+          <h2>人员信息</h2>
+          <div class="community-info__item">
+            <label>姓名</label>
+            <span style="color:#2266FF;">{{ resident.name }}</span>
+          </div>
+          <div class="community-info__item">
+            <label>所属单元</label>
+            <span>{{ house.unitNumber }}</span>
+          </div>
+          <div class="community-info__item">
+            <label>房号</label>
+            <span>{{ house.houseCode }}</span>
+          </div>
+          <div class="community-info__item">
+            <label>联系方式</label>
+            <span>{{ resident.phone }}</span>
+          </div>
+        </div>
+        <div class="community-btn" @click="isShowModel = true">楼栋模型</div>
+      </div>
+    </div>
+    <div class="building-model" v-if="isShowModel">
+      <div class="building-model__title">
+        <h2>{{ info.createAddress }}</h2>
+        <i class="iconClean iconfont" @click="isShowModel = false" title="关闭"></i>
+      </div>
+      <building-statistics
+          class="building-model__content"
+          :instance="instance"
+          :isFormDv="true"
+          :query="{communityId: info.communityId, buildingId: info.id,unitNum:house ? house.unitNumber : 1,buildingNumber:info.buildingNumber}"
+          :dict="dict">
+      </building-statistics>
+    </div>
+    <div class="switch-btn" @click="changeMap">{{ pitch === 60 ? '切换成2D地图' : '切换成3D地图' }}</div>
+    <div class="AppPopulationDV-mask"></div>
+    <div class="summary" v-if="totalInfo.residentCountMap">
+      <div class="summary-wrapper">
+        <div class="summary-item">
+          <div class="summary-item__top">
+            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_yellow.png">
+            <h2>实有人口</h2>
+          </div>
+          <div>{{ totalInfo.residentCountMap.allResidentNumber }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="summary-item__top">
+            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_yellow.png">
+            <h2>实有户数</h2>
+          </div>
+          <div>{{ totalInfo.residentCountMap.householdNumber }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="summary-item__top">
+            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_yellow.png">
+            <h2>流动人口</h2>
+          </div>
+          <div>{{ totalInfo.residentCountMap.turnoverNumber }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="summary-item__top">
+            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_yellow.png">
+            <h2>党员</h2>
+          </div>
+          <div>{{ totalInfo.residentCountMap.partyNumber }}</div>
+        </div>
+      </div>
+      <div class="summary-wrapper">
+        <div class="summary-item">
+          <div class="summary-item__top">
+            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_green.png">
+            <h2>网格数</h2>
+          </div>
+          <div>{{ totalInfo.communityCountMap.girdNumber }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="summary-item__top">
+            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_green.png">
+            <h2>小区数</h2>
+          </div>
+          <div>{{ totalInfo.communityCountMap.communityNumber }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="summary-item__top">
+            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_green.png">
+            <h2>实有楼栋</h2>
+          </div>
+          <div>{{ totalInfo.communityCountMap.buildingNumber }}</div>
+        </div>
+        <div class="summary-item">
+          <div class="summary-item__top">
+            <img src="https://cdn.cunwuyun.cn/shuangzhu/arrow_green.png">
+            <h2>实有房屋</h2>
+          </div>
+          <div>{{ totalInfo.communityCountMap.houseNumber }}</div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import BuildingStatistics from "./buildingStatistics";
+
+export default {
+  name: "AppPopulationDV",
+  label: "数据大屏-人口数据",
+  components: {BuildingStatistics},
+  provide() {
+    return {
+      root: this
+    }
+  },
+  props: {
+    instance: Function,
+    dict: Object
+  },
+  data() {
+    return {
+      isFormDv: true,
+      isShowModel: false,
+      map: null,
+      mapLib: null,
+      community: '',
+      isShowLayer: false,
+      isShowSearch: false,
+      isShowArea: false,
+      styleFunction: null,
+      areaData: {},
+      isImageMap: false,
+      isShowInfo: false,
+      areaId: '',
+      areaName: '',
+      list: [],
+      areaList: [],
+      info: {},
+      resident: null,
+      satellite: null,
+      zoom: 17,
+      chooseBuildId: '',
+      buildList: [],
+      searchList: [],
+      house: null,
+      pitch: 60,
+      center: [],
+      totalInfo: {},
+      statisticsInfo: {}
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    hasCommunityId() {
+      return !!this.$route.query?.communityId
+    },
+    mapOptions() {
+      return {
+        areaId: this.user.info.areaId,
+        mapStyle: "amap://styles/e51987628aee5206d4c9ca8c6e98b4f7",
+        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer', 'AMap.DistrictSearch'],
+        ops: {
+          pitch: this.pitch,
+          buildingAnimation: true,
+          zoom: this.zoom
+        }
+      }
+    }
+  },
+  watch: {
+    hasCommunityId(v) {
+      if (!v) {
+        this.getCorpLocation()
+      }
+    },
+    map(v) {
+      v && this.initMap()
+    }
+  },
+  created() {
+    this.getTotalInfo()
+    this.dict.load('householdRelation', 'communityBuildingType')
+  },
+  mounted() {
+    this.areaId = this.user.info.areaId
+    this.areaName = this.user.info.areaName
+    if (!this.hasCommunityId) {
+      this.getCorpLocation()
+    }
+  },
+  methods: {
+    getCorpLocation() {
+      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
+        if (res?.data) {
+          this.initMap(res.data);
+        }
+      })
+    },
+
+    getTotalInfo() {
+      this.instance.post("/app/statistics/people/queryResidentCount").then(res => {
+        if (res?.data) {
+          this.totalInfo = res.data
+        }
+      })
+    },
+    changeMap() {
+      if (this.pitch === 60) {
+        this.pitch = 0
+        this.map.setPitch(0, false, 300)
+        this.map.setZoom(16, false, 300)
+      } else {
+        this.pitch = 60
+        this.map.setZoom(18, false, 300)
+        this.map.setPitch(60, false, 300)
+      }
+    },
+
+    changeZoom(isAdd) {
+      const zoom = isAdd ? this.map.getZoom() + 1 : this.map.getZoom() - 1
+      this.map.setZoom(zoom, false, 600)
+    },
+
+    getBuildInfo(id) {
+      this.instance.post(`/app/appcommunitybuildinginfo/statistics`, null, {
+        params: {
+          id: id,
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.statisticsInfo = res.data.unit
+        }
+      })
+      this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`, null, {
+        params: {
+          buildId: id
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.info = res.data.build
+          this.resident = null;
+          this.$nextTick(() => {
+            this.isShowInfo = true
+          })
+        }
+      })
+    },
+
+    toCenter() {
+      this.map.setZoomAndCenter(this.zoom, this.center, false, 600)
+    },
+
+    renderClusterMarker(context) {
+      let el = `<div class="polymeric">
+        <div class="polymeric-container">
+          <p>${context.count}</p>
+        </div>
+      </div>`
+
+      let offset = new this.mapLib.Pixel(-9, -9)
+      context.marker.setContent(el)
+      context.marker.setOffset(offset)
+      context.marker.lnglat = context.clusterData[0].lnglat
+
+      context.marker.on('click', e => {
+        this.map.setZoomAndCenter(this.map.getZoom() < 22 ? this.map.getZoom() + 3 : this.map.getZoom(), e.target.lnglat, false, 400)
+      })
+    },
+
+    renderMarker(context) {
+      const buildId = context.data[0].id
+
+      let el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId ? 'background-color:#2266FF' : ''}">
+         <div class="mark-contaienr">
+            <span>${context.data[0].communityName}</span>&nbsp;&nbsp;
+            <span>${context.data[0].buildingNumber}栋</span>
+          </div>
+        <div class="arrow" style="${buildId === this.chooseBuildId ? 'border-top-color: #2266FF' : ''}"></div>
+      </div>`
+
+      context.marker.setContent(el);
+      context.marker.setAnchor("center")
+      context.marker.id = `${buildId}`
+      context.marker.lnglat = context.data[0].lnglat
+
+      context.marker.on('click', e => {
+        this.chooseBuildId = e.target.id
+        this.getBuildInfo(e.target.id)
+        context.marker.setContent(el);
+        document.querySelectorAll('.mark').forEach(el => {
+          el.style['background-color'] = 'rgba(0, 39, 100, 0.5)'
+        })
+        document.querySelector(`#buildId-${e.target.id}`).style['background-color'] = '#2266FF'
+        // this.map.setZoomAndCenter(this.map.getZoom() < 22 ? this.map.getZoom() + 2 + 0.00001 : this.map.getZoom(), e.target.lnglat, false, 300)
+      })
+    },
+
+    addMakert(points) {
+      new this.mapLib.MarkerClusterer(this.map, points, {
+        gridSize: 60,
+        maxZoom: 15,
+        clusterByZoomChange: false,
+        renderClusterMarker: this.renderClusterMarker,
+        renderMarker: this.renderMarker
+      })
+    },
+
+    getCommunityList() {
+      this.instance.post('/app/appcommunitybuildinginfo/list', null, {
+        params: {
+          current: 1,
+          size: 1000000
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.buildList = res.data.records
+          const points = res.data.records.map(item => {
+            return {
+              lnglat: [item.lng, item.lat],
+              id: item.id,
+              corpId: item.corpId,
+              areaName: item.areaName,
+              buildingNumber: item.buildingNumber,
+              communityName: item.communityName
+            }
+          })
+
+          this.addMakert(points)
+        }
+      })
+    },
+
+    hidePopup() {
+      this.isShowArea = false
+      this.isShowSearch = false
+    },
+
+    switchLayer(flag) {
+      if (flag) {
+        this.map.addLayer(this.satellite)
+      } else {
+        this.map.removeLayer(this.satellite)
+      }
+
+      this.isImageMap = flag
+    },
+
+    initMap() {
+      if (this.map && this.mapLib) {
+        this.mapLib.plugin([
+          'AMap.ControlBar'
+        ], () => {
+          this.map.addControl(new this.mapLib.ControlBar({
+            position: {
+              right: '20px',
+              bottom: '20px'
+            },
+            showControlButton: true
+          }))
+        })
+        this.getCommunityList()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppPopulationDV {
+  position: relative;
+  height: 100%;
+
+  .AppPopulationDV-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);
+  }
+
+  .switch-btn {
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    z-index: 11;
+    width: 160px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    background-image: url(https://cdn.cunwuyun.cn/shuangzhu/btn.png);
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+    user-select: none;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .summary {
+    display: flex;
+    position: absolute;
+    justify-content: space-between;
+    flex-direction: column;
+    left: 40px;
+    top: 0;
+    z-index: 1;
+    height: 100%;
+    padding: 40px 0;
+
+    .summary-item {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      & > div:last-child {
+        width: 180px;
+        height: 40px;
+        line-height: 40px;
+        padding-left: 14px;
+        font-size: 28px;
+        color: #fff;
+        background: linear-gradient(270deg, rgba(119, 169, 255, 0.2) 0%, rgba(66, 112, 255, 0.3) 100%);
+      }
+    }
+
+    .summary-item__top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+
+      h2 {
+        margin-left: 10px;
+        font-size: 16px;
+        color: #D8E2F9;
+        font-weight: normal;
+      }
+    }
+  }
+
+  .building-model {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1111;
+    width: 80%;
+    height: 90%;
+    transform: translate(-50%, -50%);
+
+    .building-model__title {
+      position: relative;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      background: #081037;
+      box-shadow: 0 0 20px 4px #3F63FF inset;
+
+      i {
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        z-index: 1;
+        color: #fff;
+        font-size: 20px;
+        cursor: pointer;
+        transform: translateY(-50%);
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+
+      h2 {
+        font-size: 20px;
+        font-weight: normal;
+        color: #fff;
+      }
+    }
+
+    .building-model__content {
+      width: 100%;
+      height: calc(100% - 50px);
+    }
+  }
+
+  .no-more {
+    display: block;
+    height: 60px;
+    line-height: 60px;
+    margin-top: 2px;
+    text-align: center;
+    font-size: 12px;
+    color: #999;
+    width: 100%;
+  }
+
+  ::v-deep .ai-list__content--right-wrapper {
+    height: 100%;
+    margin: 0 !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+  }
+
+  .community-btn {
+    width: 120px;
+    height: 40px;
+    line-height: 40px;
+    margin: 20px auto 20px;
+    color: #fff;
+    font-size: 16px;
+    text-align: center;
+    background: rgba(7, 11, 35, 0.4);
+    box-shadow: 0 0 18px 4px #3F63FF inset;
+    border-radius: 4px;
+    border: 1px solid #B0D2FF;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .community-info__star {
+    margin-top: 4px;
+    margin-bottom: 8px;
+
+    .community-info__star--content {
+      display: flex;
+      align-items: center;
+      height: 36px;
+      padding: 0 12px;
+      color: #666666;
+      font-size: 12px;
+
+      span {
+        flex: 1;
+        text-align: center;
+
+        &:first-child {
+          text-align: left;
+        }
+
+        &:last-child {
+          text-align: right;
+        }
+      }
+
+      &:nth-of-type(2n) {
+        background: #fff;
+      }
+    }
+
+    .community-info__star--tab {
+      display: flex;
+      align-items: center;
+      height: 36px;
+      padding: 0 12px;
+      user-select: none;
+      background: #fff;
+
+      span {
+        height: 100%;
+        line-height: 36px;
+        color: #999999;
+        font-size: 12px;
+        font-weight: 700;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+
+        &:first-child {
+          margin-right: 16px;
+        }
+
+        &.star-active {
+          color: #2266FF;
+          border-bottom: 2px solid #2266FF;
+        }
+      }
+    }
+  }
+
+  .community-info__item--imgs {
+    display: block !important;
+    height: auto !important;
+
+    label {
+      height: 36px;
+      line-height: 36px;
+    }
+
+    .community-info__item--img {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      padding-bottom: 10px;
+      overflow: hidden;
+
+      img {
+        width: 69px;
+        height: 69px;
+        margin-right: 4px;
+        margin-bottom: 4px;
+        cursor: pointer;
+
+        &:nth-of-type(4n) {
+          margin-right: 0;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  .map-menu {
+    position: absolute;
+    bottom: 52px;
+    left: 30px;
+    z-index: 11;
+
+    .map-layers__wrapper {
+      display: none;
+      position: absolute;
+      bottom: 28px;
+      left: 0;
+      padding-bottom: 4px;
+    }
+
+    .map-layers {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 180px;
+      height: 66px;
+      margin-bottom: 4px;
+      padding: 5px;
+      background: #FFFFFF;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 2px;
+
+      .map-layers__item {
+        position: relative;
+        width: 80px;
+        height: 56px;
+        margin-right: 10px;
+        cursor: pointer;
+        user-select: none;
+        border: 1px solid transparent;
+
+        &.map-layers__item-active {
+          border: 1px solid #366FFF;
+        }
+
+        .map-layers__item--tag {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          width: 32px;
+          height: 18px;
+          line-height: 18px;
+          text-align: center;
+          color: #fff;
+          font-size: 12px;
+          border: 1px solid transparent;
+          background: transparent;
+
+          &.map-layers__item--tag-active {
+            background: #366FFF;
+          }
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .map-menu__item {
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      margin-bottom: 10px;
+      background: #FFFFFF;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 2px;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        .map-layers__wrapper {
+          display: block;
+        }
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      i {
+        font-size: 16px;
+        color: #89b;
+      }
+    }
+  }
+
+  .switch-layer {
+    position: absolute;
+    bottom: 4.6em;
+    left: .56em;
+    z-index: 11;
+    width: 29px;
+    height: 29px;
+    padding: 3px;
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.4);
+    border-radius: 4px;
+    cursor: pointer;
+
+    .switch-layer__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      background-color: rgba(0, 60, 136, 0.5);
+
+      &:hover {
+        background-color: rgba(0, 60, 136, 0.7);
+      }
+    }
+  }
+
+  .map {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    ::v-deep .ol-zoom {
+      display: none !important;
+      top: inherit !important;
+      bottom: 0.5em !important;
+    }
+
+    div {
+      box-sizing: border-box;
+    }
+
+    #map {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .community {
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: 28px;
+    padding: 0 10px;
+    background: #0F8F64;
+    border-radius: 26px;
+    color: #fff;
+    font-size: 12px;
+    cursor: pointer;
+
+    &.color1 {
+      background: #2266FF;
+
+      em:after {
+        border-top-color: #2266FF !important;
+      }
+    }
+
+    &.color2 {
+      background: #F46159;
+
+      em:after {
+        border-top-color: #F46159 !important;
+      }
+    }
+
+    em {
+      position: absolute;
+      bottom: -6px;
+      left: 50%;
+      transform: translate(-50%, 0);
+
+      &::after {
+        position: absolute;
+        bottom: -6px;
+        left: 0;
+        width: 0;
+        height: 0;
+        border: 6px solid #0F8F64;
+        border-bottom-color: transparent;
+        border-left-color: transparent;
+        border-right-color: transparent;
+        transform: translate(-50%, 0);
+        overflow: hidden;
+        content: ' ';
+      }
+    }
+
+    i {
+      padding-right: 2px;
+      position: relative;
+      color: #ffc928;
+      font-size: 16px;
+      font-style: normal;
+    }
+  }
+
+  ::v-deep .polymeric {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    cursor: pointer;
+    user-select: none;
+
+    &.polymeric-active {
+      .polymeric-container {
+        background: #F46159;
+      }
+
+      &::after {
+        background-color: #F46159;
+      }
+    }
+
+    &::after {
+      position: absolute;
+      z-index: -1;
+      width: 62px;
+      height: 62px;
+      border-radius: 50%;
+      -webkit-animation: warn 1s ease-out 0s infinite;
+      animation: warn 1s ease-out 0s infinite;
+      background: rgba(54, 165, 255, 1);
+      transform: translate(-50%, -50%);
+      content: " ";
+    }
+
+    .polymeric-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      width: 62px;
+      height: 62px;
+      border-radius: 50%;
+      background: rgba(54, 165, 255, 1);
+
+      p {
+        text-align: center;
+        width: 58px;
+        color: #fff;
+        font-size: 18px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      p:first-child {
+        font-size: 14px;
+      }
+
+      h2 {
+        color: #fff;
+        font-weight: normal;
+        font-size: 12px;
+      }
+    }
+  }
+
+  ::v-deep .mark {
+    user-select: none;
+    cursor: pointer;
+    height: 32px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 39, 100, 0.5);
+    box-sizing: border-box;
+    padding: 0 12px;
+    border-radius: 20px;
+    border: 1px solid #36A5FF;
+
+    .mark-contaienr {
+      color: white;
+      font-size: 14px;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .arrow {
+      display: none;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -21px;
+      width: 0;
+      height: 0;
+      border: 12px solid transparent;
+      border-top: 12px solid #0F8F64;
+    }
+
+  }
+
+  @-webkit-keyframes warn {
+    0% {
+      transform: scale(.5);
+      opacity: 1
+    }
+
+    30% {
+      opacity: .5
+    }
+
+    to {
+      transform: scale(1.7);
+      opacity: 0
+    }
+  }
+
+  @keyframes warn {
+    0% {
+      transform: scale(.5);
+      opacity: 1
+    }
+
+    30% {
+      opacity: .5
+    }
+
+    to {
+      transform: scale(1.7);
+      opacity: 0
+    }
+  }
+
+  .community-info {
+    position: absolute;
+    top: 58px;
+    right: 10px;
+    width: 400px;
+    max-height: calc(100% - 117px);
+    background: rgba(0, 15, 38, 0.7);
+    border: 1px solid #103588;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: 111;
+    border-radius: 2px;
+
+    &::after {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      filter: blur(5px);
+      content: ' ';
+      background: inherit;
+      pointer-events: none;
+    }
+
+    .community-info__close {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: 16px 12px 0 12px;
+      font-size: 16px;
+      color: #fff;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 1px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 6px;
+      background: rgba(144, 147, 153, .5);
+    }
+
+    .community-info__header {
+      min-height: 72px;
+      padding: 10px 20px;
+      background: linear-gradient(270deg, rgba(11, 158, 255, 0.2) 0%, rgba(2, 81, 227, 0.2) 100%);
+
+      h2 {
+        max-width: 330px;
+        line-height: 28px;
+        margin: 0;
+        color: #fff;
+        font-size: 20px;
+        font-weight: 500;
+        margin-bottom: 5px;
+        text-align: justify;
+      }
+
+      div {
+        display: flex;
+        align-items: center;
+        color: #D2E0FF;
+        font-size: 12px;
+      }
+
+      span {
+        display: block;
+        line-height: 20px;
+        font-style: normal;
+        color: #82C5FF;
+        font-size: 12px;
+      }
+    }
+
+    .community-info__table {
+      margin: 4px 0;
+      font-size: 0;
+
+      .community-info__table--item {
+        display: inline-block;
+        width: 25%;
+        font-size: 12px;
+        color: #333;
+
+        span {
+          display: block;
+          width: 80px;
+          height: 48px;
+          padding: 8px 10px;
+          text-align: center;
+          box-sizing: border-box;
+          background: #fff;
+          border-bottom: 1px solid #DEE6F3;
+          border-right: 1px solid #DEE6F3;
+        }
+
+        h2 {
+          width: 80px;
+          height: 40px;
+          line-height: 40px;
+          font-size: 12px;
+          text-align: center;
+          font-weight: normal;
+          box-sizing: border-box;
+          background: #F3F6F9;
+          border-bottom: 1px solid #DEE6F3;
+          border-right: 1px solid #DEE6F3;
+        }
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+
+    .community-info__wrapper {
+      & > h2 {
+        line-height: 36px;
+        height: 36px;
+        margin: 16px 0;
+        padding: 0 26px;
+        font-size: 16px;
+        color: #fff;
+        font-weight: normal;
+        background: url(https://cdn.cunwuyun.cn/shuangzhu/title2.png) no-repeat;
+        background-size: auto 24px;
+        background-position: 0 7px;
+      }
+
+      .community-info__total {
+        display: flex;
+        align-items: center;
+        height: 68px;
+        background: rgba(63, 136, 255, 0.15);
+
+        & > div {
+          flex: 1;
+          text-align: center;
+
+          h2 {
+            line-height: 1;
+            font-size: 24px;
+            color: #fff;
+          }
+
+          span {
+            display: block;
+            margin-top: 4px;
+            color: rgba(130, 197, 255, 1);
+            font-size: 14px;
+          }
+        }
+      }
+
+      .community-info__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 12px;
+        font-size: 12px;
+        color: #333;
+        background: rgba(63, 136, 255, 0.15);
+
+        &:nth-of-type(2n) {
+          background: rgba(0, 0, 0, 0.14);
+        }
+
+        span {
+          max-width: 70%;
+          text-align: right;
+          color: #fff;
+        }
+
+        label {
+          flex-shrink: 1;
+          color: #82C5FF;
+        }
+      }
+
+      &.community-info__wrapper--last {
+        .community-info__item {
+          background: #fff;
+
+          &:nth-of-type(2n) {
+            background: #F3F6F9;
+          }
+        }
+      }
+    }
+  }
+
+  .map-area__list {
+    position: absolute;
+    top: 51px;
+    left: 0;
+    z-index: 111;
+    width: 320px;
+    overflow-y: auto;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+    background: #fff;
+
+    .content {
+      padding: 10px 20px;
+      font-size: 0;
+
+      h2 {
+        margin-bottom: 10px;
+        color: #5088FF;
+        font-size: 12px;
+        cursor: pointer;
+      }
+
+      span {
+        display: inline-block;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        color: #333;
+        font-size: 12px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &:hover {
+          color: #5088FF;
+        }
+      }
+    }
+
+    .top {
+      height: 36px;
+      line-height: 36px;
+      padding: 0 20px;
+      border-bottom: 1px solid #EEEEEE;
+
+      h2 {
+        font-weight: normal;
+        color: #666666;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .search-result {
+    position: absolute;
+    top: 51px;
+    left: 0;
+    z-index: 111;
+    width: 360px;
+    height: 216px;
+    overflow-y: auto;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+    background: #fff;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 1px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 6px;
+      background: rgba(144, 147, 153, .5);
+    }
+
+    .search-result__item {
+      display: flex;
+      align-items: center;
+      height: 36px;
+      padding: 0 16px;
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:hover {
+        background: #f5f7fa;
+      }
+
+      i {
+        position: relative;
+        top: 2px;
+        color: #ccc;
+        font-size: 16px;
+      }
+
+      h2 {
+        padding: 0 8px 0 10px;
+        color: #333333;
+        font-size: 14px;
+      }
+
+      span {
+        max-width: 240px;
+        color: #999999;
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .map-area {
+    position: absolute;
+    top: 58px;
+    left: 10px;
+    z-index: 111;
+
+    .map-area__container {
+      display: flex;
+
+      .map-area__left {
+        display: flex;
+        align-items: center;
+        width: 360px;
+        height: 36px;
+        padding: 0 16px 0 0;
+        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+        border-radius: 2px;
+        cursor: pointer;
+        user-select: none;
+        background: #fff;
+
+        .left {
+          display: flex;
+          position: relative;
+          align-items: center;
+          height: 100%;
+          line-height: 1;
+          padding: 0 20px 0 8px;
+
+          &:hover {
+            opacity: 0.6;
+          }
+
+          &:after {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            width: 1px;
+            height: 24px;
+            background: #DDDDDD;
+            transform: translateY(-50%);
+            box-shadow: -1px 0px 0px 0px #DDDDDD;
+            border-radius: 2px 0 0 0;
+            opacity: 0.9;
+            content: ' ';
+          }
+
+          span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 12px;
+            color: #333;
+          }
+
+          i {
+            font-size: 16px;
+          }
+        }
+
+        ::v-deep .el-input, ::v-deep input {
+          border: none;
+        }
+
+        ::v-deep input {
+          position: relative;
+          flex: 1;
+          height: 36px;
+          padding: 0 32px 0 16px;
+          font-size: 14px;
+          border: none;
+        }
+
+        .search-icon {
+          &:after {
+            position: absolute;
+            left: -16px;
+            top: 50%;
+            width: 1px;
+            height: 24px;
+            background: #DDDDDD;
+            transform: translateY(-50%);
+            box-shadow: -1px 0px 0px 0px #DDDDDD;
+            border-radius: 2px 0 0 0;
+            opacity: 0.9;
+            content: ' ';
+          }
+        }
+
+        i {
+          position: relative;
+          color: #89B;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppHouseMap/buildingStatistics.vue b/project/sass/apps/AppHouseMap/buildingStatistics.vue
new file mode 100644
index 00000000..281b70aa
--- /dev/null
+++ b/project/sass/apps/AppHouseMap/buildingStatistics.vue
@@ -0,0 +1,443 @@
+<template>
+  <section class="buildingStatistics">
+    <ai-title v-if="!isFormDv" title="楼栋统计" isShowBack isShowBottomBorder @onBackClick="$router.push({query:{}}),$parent.info={},$parent.isShowInfo=false,$parent.house=null,$parent.chooseBuildId='',$parent.showStatistics=false, $parent.type='0'"/>
+    <div class="buildingPane">
+      <div class="bgItem tree"/>
+        <div class="building">
+          <template v-if="floorRooms.length>0">
+            <div class="buildingSignboard">{{ `${currentBuilding.buildingNumber}栋 ${unitNumber}单元` }}
+            </div>
+            <el-scrollbar class="floors">
+              <div class="floor" v-for="(fl,j) in floorRooms" :key="j">
+                <div class="room" v-for="(op,i) in fl" :key="op.id" @click="handleSelectRoom(op,$event)" @touchstart="handleSelectRoom(op,$event)" :class="[{none:op.livingNumber==0,selected:selected.houseCode==op.houseCode},handleTipsHighlight(op.tips)]">
+                  {{ op.houseCode }}
+                  <div v-if="op.livingNumber==0">无人</div>
+                  <div v-show="op.id==selected.id" class="detail" @click.stop :style="{left:position.x,top:position.y}">
+                    <el-row class="popupHeader" type="flex" justify="space-between" align="middle">
+                      <span>{{selected.houseCode}}详情</span>
+                      <ai-icon icon="iconClean" @click.native.stop="selected={}"/>
+                    </el-row>
+                    <div class="family-member">
+                      <h2>房主信息</h2>
+                      <div v-for="(item,index) in selected.owner" :key="item.id">
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>{{item.name}}</label>
+                          </div>
+                          <span style="color: #2266FF">{{root.dict.getLabel("houseLivingType",item.livingType)}}</span>
+                        </div>
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>联系方式</label>
+                          </div>
+                          <span style="color: #2266FF;">{{item.phone}}</span>
+                        </div>
+                      </div>
+
+                      <h2>承租人信息</h2>
+                      <div v-for="(item,index) in selected.renter" :key="item.id">
+                        <div class="family-member__item" >
+                          <div class="member-left">
+                            <label>{{item.name}}</label>
+                          </div>
+                          <span style="color: #2266FF">{{root.dict.getLabel("houseLivingType",item.livingType)}}</span>
+                        </div>
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>联系方式</label>
+                          </div>
+                          <span>{{item.phone}}</span>
+                        </div>
+                      </div>
+
+                      <h2>实际居住人员</h2>
+                      <div v-for="(item,index) in selected.live" :key="item.id">
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>{{item.name}}</label>
+                          </div>
+                          <span>{{root.dict.getLabel("householdRelation",item.relation)}}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </template>
+          <ai-empty v-else>请在【<b>小区总览</b>】中选取【楼栋单元】</ai-empty>
+          <div class="bottom"/>
+        </div>
+      <building-tool-bar></building-tool-bar>
+    </div>
+  </section>
+</template>
+
+<script>
+import BuildingToolBar from "./buildingToolBar";
+
+export default {
+  name: "buildingStatistics",
+  components: {BuildingToolBar},
+  inject: ['root'],
+  provide() {
+    return {
+      sta: this
+    }
+  },
+  props: {
+    instance: Function,
+    dict: Object,
+    isFormDv: Boolean,
+    query: Object
+  },
+  data() {
+    return {
+      rooms: [],
+      selected: {},
+      currentBuilding: {},
+      unitNumber:1,
+      tips: [],
+      position:{
+        x:"",
+        y:""
+      },
+    }
+  },
+  computed: {
+    floorRooms() {
+      let obj = {}
+      this.rooms.map(e => {
+        e.none = e.isNone == 0
+        return obj[e.layerNumber]?.push(e) || (obj[e.layerNumber] = [e])
+      })
+      return Object.values(obj).reverse()
+    }
+  },
+  created() {
+    this.dict.load('householdRelation', 'residentTipType',"houseLivingType")
+    if (this.isFormDv && this.query.buildingId) {
+      this.getRoomsByBuilding(this.query.buildingId, this.query.unitNum)
+      this.currentBuilding = { buildingNumber: this.query.buildingNumber}
+      this.unitNumber = this.query.unitNum
+
+      return false
+    }
+    this.getRoomsByBuilding(this.$route.query?.buildingId,this.$route.query?.unitNum)
+    this.currentBuilding = {buildingNumber: this.$route.query?.buildingNumber};
+    this.unitNumber = this.$route.query?.unitNum;
+  },
+  methods: {
+    handleSelectRoom(room, e) {
+      console.log(e)
+      if (room.livingNumber>0) {
+        this.$nextTick(()=>{
+          this.position.x = e.pageX + 40 + "px"
+          this.position.y = e.pageY + "px"
+          this.selected = room;
+          this.$forceUpdate()
+        })
+        // this.getRoomDetail(room.id)
+      }
+    },
+    selectedBuilding(building,unitNumber) {
+      this.selected = {}
+      this.tips = []
+      this.$router.push({query: {...this.$route.query, buildingId: building.id,unitNum:unitNumber}}).catch(e=>{e})
+      this.currentBuilding = building
+      this.unitNumber = unitNumber
+      this.getRoomsByBuilding(building.id,unitNumber)
+    },
+    getRoomsByBuilding(buildingId,unitNumber) {
+      this.root.instance.post("/app/appcommunityhouseinfo/list", null, {
+        params: {
+          unitNumber,
+          buildingId,
+          size: 999
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.rooms = res.data.records
+        }
+      })
+    },
+    getRoomDetail(id) {
+      return this.root.instance.post("/app/appcommunityhouseinfo/queryDetailById", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          let {residents} = res.data
+          this.selected = {
+            ...this.selected, ...res.data,
+            residents: residents.map(e => {
+              let {tips} = e
+              //显示为户主
+              let relationLabel = e.householdName == 1 ? "户主" : this.root.dict.getLabel("householdRelation", e.householdRelation)
+              return {...e, tips: tips ? tips.split("|") : [], relationLabel}
+            }
+            )
+          }
+        }
+      })
+    },
+    handleTipsHighlight(tip) {
+      let flag = this.tips.length > 0 && !this.tips.some(t => tip?.split("|").includes(t))
+      return flag ? 'tipsHighlight' : ''
+    },
+    selectedTips(tips) {
+      this.tips = tips
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingStatistics {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  ::v-deep .ailist-title{
+    margin: 0 20px;
+  }
+
+  .family-member {
+    & > h2 {
+      height: 32px;
+      line-height: 32px;
+      margin: 0;
+      padding: 0 12px;
+      color: #333333;
+      font-size: 12px;
+      font-weight: 700;
+      text-align: left;
+      background: #E3E8F1;
+    }
+
+    .family-member__item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 32px;
+      padding: 0 12px;
+      background: #F3F6F9;
+
+      .member-left {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      &:nth-of-type(2n) {
+        background: #fff;
+      }
+
+      label {
+        font-weight: normal !important;
+        color: #333;
+        font-size: 12px;
+      }
+
+      & > span {
+        color: #666666;
+        font-size: 12px;
+      }
+    }
+
+    &:last-child {
+      label {
+        color: #666666;
+        font-weight: normal !important;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .buildingPane {
+    background-image: url("https://cdn.cunwuyun.cn/buildSta/cloud.png"), linear-gradient(3deg, #FFFFFF 0%, #3093FF 100%);
+    background-repeat: no-repeat;
+    background-position: 227px 43px, 100%;
+    background-size: 788px 112px, 100%;
+    position: relative;
+    box-sizing: border-box;
+    padding-right: 400px;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+
+    .bgItem {
+      position: absolute;
+      background-repeat: no-repeat;
+      pointer-events: none;
+
+      &.tree {
+        left: calc(50% - 200px);
+        transform: translateX(-50%);
+        bottom: 0;
+        width: 580px;
+        height: 71px;
+        background-image: url("https://cdn.cunwuyun.cn/buildSta/tree.png");
+        z-index: 3;
+      }
+    }
+
+    .building {
+      margin-left: 60px;
+      flex-shrink: 0;
+      height: auto;
+      width: auto;
+      box-sizing: border-box;
+      padding: 136px 0 0;
+      background-image: url("https://cdn.cunwuyun.cn/buildSta/roof.png"),
+      url("https://cdn.cunwuyun.cn/buildSta/chimney.png");
+      background-position: 0 121px, 70px 91px;
+      background-size: 100% 105px, 70px;
+      background-repeat: no-repeat;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: center;
+      border-bottom: 10px solid #E9C28E;
+
+      .buildingSignboard {
+        padding-top: 41px;
+        width: 200px;
+        height: 65px;
+        text-align: center;
+        background-image: url("https://cdn.cunwuyun.cn/buildSta/buildingSignboard.png");
+        background-repeat: no-repeat;
+        box-sizing: border-box;
+        font-size: 12px;
+        font-weight: bold;
+        color: #1D3296;
+        margin-bottom: 15px;
+      }
+
+      .ai-empty {
+        background: #FFECD9;
+        margin: 90px 20px 0;
+        padding: 0 10px 90px;
+        font-size: 14px;
+        color: #666;
+
+        b {
+          color: #26f
+        }
+      }
+
+      .bottom {
+        background: #FFECD9;
+        height: 50px;
+        width: calc(100% - 40px);
+      }
+    }
+
+    ::v-deep .floors {
+      max-height: 520px;
+
+      .el-scrollbar__wrap {
+        overflow-x: hidden;
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .floor {
+      margin: 0 20px;
+      height: 105px;
+      flex-shrink: 0;
+      max-width: calc(100% - 40px);
+      display: flex;
+      align-items: center;
+      background-image: url("https://cdn.cunwuyun.cn/buildSta/floor.png");
+      background-size: 100% 105px;
+      padding: 0 30px;
+      box-sizing: border-box;
+      gap: 20px;
+
+      .room {
+        width: 60px;
+        height: 72px;
+        background-image: url("https://cdn.cunwuyun.cn/buildSta/room.png");
+        text-align: center;
+        padding-top: 20px;
+        box-sizing: border-box;
+        font-size: 14px;
+        font-weight: bold;
+        color: #FFFFFF;
+        cursor: pointer;
+        position: relative;
+
+        .detail {
+          position: fixed;
+          width: 320px;
+          background: #fff;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+          border-radius: 4px;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          z-index: 11;
+          transform: translateY(-100%);
+
+          .popupHeader {
+            background: #D42222;
+            padding: 0 12px;
+            height: 32px;
+
+            .AiIcon {
+              width: 16px;
+              height: 16px;
+            }
+          }
+
+          li {
+            list-style-type: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 12px;
+            font-size: 12px;
+            color: #333;
+            height: 32px;
+
+            & > div {
+
+            }
+
+            &.title {
+              background: #E3E8F1;
+            }
+
+            &.stretch {
+              background: #F3F6F9;
+            }
+          }
+        }
+
+        &.none {
+          cursor: not-allowed;
+          color: #f46;
+          background-image: url("https://cdn.cunwuyun.cn/buildSta/roomNone.png");
+        }
+
+        &.selected {
+          background-image: url("https://cdn.cunwuyun.cn/buildSta/roomSelected.png");
+        }
+      }
+    }
+
+    .buildingToolBar {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+    }
+  }
+
+  .tipsHighlight {
+    opacity: 0.6;
+  }
+}
+</style>
diff --git a/project/sass/apps/AppHouseMap/buildingToolBar.vue b/project/sass/apps/AppHouseMap/buildingToolBar.vue
new file mode 100644
index 00000000..65c09252
--- /dev/null
+++ b/project/sass/apps/AppHouseMap/buildingToolBar.vue
@@ -0,0 +1,95 @@
+<template>
+  <section class="buildingToolBar">
+    <div class="toolBar">
+      <div class="nav" v-for="(op,i) in navs" :key="i" :class="{selected:i==active}" @click="active=i">
+        <ai-icon :icon="op.icon"/>
+        <div>{{ op.name }}</div>
+      </div>
+    </div>
+    <component :is="currentNav.comp" class="toolPane"/>
+  </section>
+</template>
+
+<script>
+import BuildingInfo from "./toolBar/buildingInfo";
+import CommunityOverview from "./toolBar/communityOverview";
+// import NearbyGCS from "./toolBar/nearbyGCS";
+import RecentEvents from "./toolBar/recentEvents";
+
+export default {
+  name: "buildingToolBar",
+  components: {RecentEvents, CommunityOverview, BuildingInfo},
+  computed: {
+    navs() {
+      return [
+        {icon: 'icondanweiguanli', name: "单元统计", comp: BuildingInfo},
+        {icon: 'icondanweiguanli', name: "单元切换", comp: CommunityOverview},
+        // {icon: 'icondanweiguanli', name: "网格员", comp: NearbyGCS},
+        // {icon: 'icondanweiguanli', name: "近期事件", comp: RecentEvents},
+      ]
+    },
+    currentNav() {
+      return this.navs[this.active]
+    }
+  },
+  data() {
+    return {
+      active: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingToolBar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .toolBar {
+    height: 40px;
+    background: #FFFFFF;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    padding: 4px;
+    width: 400px;
+    display: flex;
+    gap: 8px;
+    box-sizing: border-box;
+    align-self: flex-end;
+
+    .nav {
+      flex: 1;
+      height: 32px;
+      color: #3A3A3A;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      cursor: pointer;
+
+      .AiIcon {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+      }
+
+      &:hover {
+        color: #2266FF;
+      }
+
+      &.selected {
+        background: #E4F0FF;
+        color: #2266FF;
+      }
+    }
+  }
+
+  .toolPane {
+    background: #FFFFFF;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/project/sass/apps/AppHouseMap/toolBar/buildingInfo.vue b/project/sass/apps/AppHouseMap/toolBar/buildingInfo.vue
new file mode 100644
index 00000000..887b8712
--- /dev/null
+++ b/project/sass/apps/AppHouseMap/toolBar/buildingInfo.vue
@@ -0,0 +1,239 @@
+<template>
+  <section class="buildingInfo">
+    <ai-title title="人口信息"/>
+    <div class="infoPane">
+      <div class="staZone">
+        <div v-for="(value, name) in staData" :key="name">
+          <b>{{ value }}</b>
+          <span>{{ name }}</span>
+        </div>
+      </div>
+    </div>
+    <ai-title title="房屋信息"/>
+    <div class="infoPane">
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>所属社区</span>
+        <span>{{build.areaName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>所属小区</span>
+        <span>{{build.communityName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>房屋类型</span>
+        <span>{{root.dict.getLabel("communityBuildingType",build.buildingType)}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>楼长姓名</span>
+        <span>{{build.managerName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>联系方式</span>
+        <span>{{build.managerPhone}}</span>
+      </el-row>
+    </div>
+  </section>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: "buildingInfo",
+  inject: ['root', 'sta'],
+  computed: {
+    chartData() {
+      return this.root.dict.getDict("residentTipType").map(e => ({
+        name: e.dictName,
+        key: e.dictValue,
+        color: e.dictColor,
+        v1: 0
+      }))
+    },
+    colConfigs() {
+      return [
+        {prop:"areaName",label:"所属社区"}
+      ];
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      staData: {},
+      tag:{},
+      color:{},
+      build:{},
+    }
+  },
+  methods: {
+    initChart(data) {
+      this.chart = echarts.init(document.getElementById("PersonStaChart"))
+      let selected = {}, color = []
+      this.chartData.map(e => {
+        selected[e.name] = false
+        color.push(e.color)
+      })
+      this.chart.setOption({
+        grid: {top: 31, right: 0, height: 135},
+        tooltip: {},
+        legend: {
+          top: 185,
+          left: 0,
+          orient: "vertical",
+          selected,
+          itemWidth: 14,
+          itemHeight: 14,
+          itemGap: 12,
+          icon: "rect",
+          formatter: name => {
+            let item = data.find(e => this.root.dict.getLabel('residentTipType', e.name) == name)
+            return `{a|${name}}  {b|${item.v1}}`
+          },
+          textStyle: {
+            rich: {
+              a: {color: "#666", width: 123},
+              b: {color: "#333", fontWeight: 'bold', align: 'right'}
+            }
+          }
+        }, color,
+        yAxis: {type: 'value', min: 0, minInterval: 1, axisTick: false, axisLine: false, axisLabel: {color: "#666"}},
+        xAxis: {type: 'category', axisTick: false, axisLine: false, axisLabel: false},
+        series: data.map(e => ({
+          type: 'bar',
+          barWidth: 8,
+          barGap: '250%',
+          name: this.root.dict.getLabel('residentTipType', e.name)
+        }))
+      })
+      this.chart.on('legendselectchanged', ({selected}) => {
+        let tips = Object.keys(selected)?.filter(e => selected[e])?.map(e => this.root.dict.getValue('residentTipType', e))
+        this.sta?.selectedTips(tips)
+      })
+      this.getChartData(data)
+    },
+    getChartData(data) {
+      this.chart?.setOption({
+        series: data.map(e => ({data: [e.v1]}))
+      })
+    }
+  },
+  created(){
+    this.root.dict?.load("communityBuildingType")
+  },
+  mounted() {
+    this.root.instance.post("/app/appcommunitybuildinginfo/statistics", null, {
+      params: {
+        id: this.root.isFormDv ? this.root.info.id : this.$route.query.buildingId,
+        unitNum: this.root.isFormDv ? this.root.info.unitNumber : this.$route.query.unitNum,
+      }
+    }).then(res => {
+      if (res?.data) {
+        this.staData = res.data.unit;
+        this.tag = res.data.tag;
+        this.color = res.data.color;
+        this.build = res.data.build;
+        // this.root.dict.load('residentTipType').then(() => {
+        //   this.initChart(res.data.lx)
+        // })
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingInfo {
+  ::v-deep .infoPane {
+    box-sizing: border-box;
+    padding: 10px 20px;
+
+    .info-item{
+      height: 32px;
+      box-sizing: border-box;
+      padding: 0 12px;
+      font-size: 12px;
+      color: #666666;
+      align-items: center;
+
+      span:last-child{
+        color: #333333;
+      }
+
+      &:nth-child(2n-1){
+        background-color: #F3F6F9;
+      }
+    }
+
+    .static-wrap{
+      width: 360px;
+      box-sizing: border-box;
+      padding-top: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .sta-item{
+        width: 46%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+
+        .sta-left{
+          display: flex;
+          align-items: center;
+          .tag{
+            width: 14px;
+            height: 14px;
+            background: #DC1739;
+            border-radius: 2px;
+            margin-right: 3px;
+          }
+          & > label{
+            font-size: 12px;
+            color: #666666;
+          }
+        }
+        .num{
+          font-size: 12px;
+          color: #333333;
+        }
+      }
+    }
+    .staZone {
+      height: 80px;
+      background: #F5F7F9;
+      border-radius: 4px;
+      overflow: hidden;
+      display: flex;
+
+      & > div {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        font-size: 12px;
+        color: #333;
+
+        b {
+          font-size: 24px;
+          font-family: DINAlternate-Bold, DINAlternate,serif;
+          color: #2266FF;
+          margin-bottom: 4px;
+        }
+      }
+
+
+    }
+
+    #PersonStaChart {
+      width: 100%;
+      height: 350px;
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppHouseMap/toolBar/communityOverview.vue b/project/sass/apps/AppHouseMap/toolBar/communityOverview.vue
new file mode 100644
index 00000000..b4a92afe
--- /dev/null
+++ b/project/sass/apps/AppHouseMap/toolBar/communityOverview.vue
@@ -0,0 +1,116 @@
+<template>
+  <section class="communityOverview">
+    <ai-title title="小区总览"/>
+    <div class="units" v-if="Object.keys(buildingUnits).length>0">
+      <div class="building" v-for="(value,name) in buildingUnits" :key="name">
+        <div class="unit" v-for="(op,j) in value" :key="j" @click="sta.selectedBuilding(op,j+1)"
+             :class="{selected:sta.unitNumber==j+1 && sta.currentBuilding.buildingNumber==name}">
+          <b>{{ name}}栋</b>
+          <div>{{ j+1 }}单元</div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty v-else>暂无楼栋信息,请进入【楼栋管理】添加</AiEmpty>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "communityOverview",
+  inject: ['root', 'sta'],
+  computed: {
+    buildingUnits() {
+      let obj = {}
+      this.units.map(e => {
+        for(let i=0;i<e.unitNumber;i++){
+          obj[e.buildingNumber]?.push(e) || (obj[e.buildingNumber] = [e])
+        }
+      })
+      return obj;
+    }
+  },
+  data() {
+    return {
+      units: []
+    }
+  },
+  methods: {
+    getUnits(communityId) {
+      this.root.instance.post("/app/appcommunitybuildinginfo/list", null, {
+        params: {
+          communityId,
+          size: 999
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.units = res.data.records
+        }
+      })
+    }
+  },
+  created() {
+    this.getUnits(this.root.isFormDv ? this.root.info.communityId : this.$route.query.communityId)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.communityOverview {
+  max-width: 400px;
+
+  .units {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 20px 20px;
+    align-items: flex-start;
+
+    .building {
+      display: flex;
+      align-items: center;
+      height: auto;
+      flex-wrap: wrap; 
+
+      .unit {
+        margin-right: 10px;
+        margin-bottom: 10px;
+
+        &:nth-of-type(5) {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .unit {
+      width: 64px;
+      height: 56px;
+      background: #F8FBFF;
+      border-radius: 2px 0 0 2px;
+      border: 1px solid #829CCF;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+
+      b {
+        color: #424242;
+      }
+
+      &.selected {
+        color: #fff;
+        background: #2266FF;
+
+        b {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .ai-empty {
+    height: 240px;
+  }
+}
+</style>
diff --git a/project/sass/apps/AppHouseMap/toolBar/nearbyGCS.vue b/project/sass/apps/AppHouseMap/toolBar/nearbyGCS.vue
new file mode 100644
index 00000000..a68e67f5
--- /dev/null
+++ b/project/sass/apps/AppHouseMap/toolBar/nearbyGCS.vue
@@ -0,0 +1,129 @@
+<template>
+  <section class="nearbyGCS">
+    <ai-title title="全部网格员"/>
+    <div class="radarPane">
+      <div class="radar">
+        <div class="indicator"/>
+      </div>
+      <div class="gcsItem" v-for="(op,i) in userList" :key="i" :style="op.style">
+        <i class="dot" :class="{offline:op.offline}"/>
+        <span>{{ op.name }}</span>
+        <ai-icon icon="iconIM"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "nearbyGCS",
+  inject: ['root', 'sta'],
+
+  data () {
+    return {
+      userList: []
+    }
+  },
+
+  mounted () {
+    this.getInfo()
+  },
+
+  methods: {
+    getInfo () {
+      this.root.instance.post('/app/appgirdmemberinfo/queryGirdMemberByBuilding', null, {
+        params: {buildingId: this.$route.query.buildingId}
+      }).then(res => {
+        if (res?.data) {
+          this.gcsList(res.data)
+        }
+      })
+    },
+
+    gcsList (data) {
+      this.userList = data.map(e => ({
+        ...e,
+        style: {
+          transform: `translate(
+        ${Math.round(160 * (Math.random() - 0.5))}px,
+        ${Math.round(160 * (Math.random() - 0.5))}px)`}
+      }))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nearbyGCS {
+  .radarPane {
+    width: 100%;
+    height: 360px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .gcsItem {
+      position: absolute;
+      width: 92px;
+      height: 28px;
+      background: #FFFFFF;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 16px;
+      font-size: 12px;
+      color: #333333;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 3;
+      gap: 8px;
+
+      .AiIcon {
+        width: 16px;
+        height: 16px;
+      }
+
+      .dot {
+        width: 4px;
+        height: 4px;
+        background: #30BC77;
+
+        &.offline {
+          background: #FF4466;
+        }
+      }
+    }
+  }
+
+  .radar {
+    width: 320px;
+    height: 320px;
+    position: relative;
+    border-radius: 50%;
+    overflow: hidden;
+    background-image: url("https://cdn.cunwuyun.cn/buildSta/radarBg.png");
+
+    .indicator {
+      position: absolute;
+      width: 160px;
+      height: 160px;
+      top: 0;
+      left: 0;
+      transform-origin: 100% 100%;
+      background: linear-gradient(190deg, rgba(162, 255, 182, 0.5) 0%, rgba(162, 255, 215, 0) 100%);
+      border-right: 1px solid #A2FFB6;
+      animation: radar 5s linear infinite;
+      z-index: 2;
+    }
+  }
+}
+
+@keyframes radar {
+  0% {
+    transform: rotate(0deg)
+  }
+  100% {
+    transform: rotate(360deg)
+  }
+}
+</style>
diff --git a/project/sass/apps/AppHouseMap/toolBar/recentEvents.vue b/project/sass/apps/AppHouseMap/toolBar/recentEvents.vue
new file mode 100644
index 00000000..abee470b
--- /dev/null
+++ b/project/sass/apps/AppHouseMap/toolBar/recentEvents.vue
@@ -0,0 +1,81 @@
+<template>
+  <section class="recentEvents">
+    <ai-title title="楼栋近期相关事件"/>
+    <div class="recentEvents-list">
+      <div class="recentEvents-item" v-for="(item, index) in 4" :key="index">
+        <div class="recentEvents-item__top">
+          <i>[已解决]</i>
+          <span>102室与402室矛盾纠纷</span>
+        </div>
+        <div class="recentEvents-item__middle">
+          <span>102室与402室矛盾纠纷</span>
+          <em>[张三]</em>
+          <span>接到了</span>
+          <em>[矛盾调解]</em>
+          <span>任务，事件目前</span>
+          <i>[已完成]</i>
+        </div>
+        <div class="recentEvent-item__bottom">2019-06-18 13:35:45</div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "recentEvents"
+}
+</script>
+
+<style lang="scss" scoped>
+.recentEvents {
+  font-size: 14px;
+  width: 100%;
+
+  .recentEvents-list {
+    .recentEvents-item {
+      border-bottom: 1px solid #E6E8EE;
+      background: transparent;
+      padding: 10px;
+      box-sizing: border-box;
+      .recentEvent-item__bottom {
+        color: #999;
+        font-size: 12px;
+      }
+
+      &:first-child {
+        background: #EFF6FF;
+        border-bottom: none;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .recentEvents-item__top {
+        display: flex;
+      }
+
+      .recentEvents-item__middle {
+        margin: 6px 0 10px;
+      }
+
+      span {
+        color: #666666;
+      }
+
+      em {
+        color: #2266FF;
+        font-style: normal;
+      }
+
+      i {
+        font-style: normal;
+        color: #2EA222;
+      }
+    }
+  }
+
+
+}
+</style>
diff --git a/project/sass/apps/AppInterview/AppInterview.vue b/project/sass/apps/AppInterview/AppInterview.vue
index 0f18d8f6..2c69d238 100644
--- a/project/sass/apps/AppInterview/AppInterview.vue
+++ b/project/sass/apps/AppInterview/AppInterview.vue
@@ -2,7 +2,7 @@
   <section class="AppInterview">
     <ai-list v-if="!isDetail">
       <template #title>
-        <ai-title title="调查走访" isShowBottomBorder/>
+        <ai-title title="事务记录" isShowBottomBorder/>
       </template>
       <template #content>
         <ai-search-bar>
diff --git a/project/sass/apps/AppInterview/interviewDetail.vue b/project/sass/apps/AppInterview/interviewDetail.vue
index 54fbfeb1..1803bacc 100644
--- a/project/sass/apps/AppInterview/interviewDetail.vue
+++ b/project/sass/apps/AppInterview/interviewDetail.vue
@@ -2,7 +2,7 @@
   <section class="interviewDetail">
     <ai-detail>
       <template #title>
-        <ai-title title="调查走访详情" isShowBottomBorder isShowBack @onBackClick="interview.back()"/>
+        <ai-title title="事务记录详情" isShowBottomBorder isShowBack @onBackClick="interview.back()"/>
       </template>
       <template #content>
         <ai-card title="基本信息">
diff --git a/project/sass/apps/AppResident/AppResident.vue b/project/sass/apps/AppResident/AppResident.vue
new file mode 100644
index 00000000..1ef46b3e
--- /dev/null
+++ b/project/sass/apps/AppResident/AppResident.vue
@@ -0,0 +1,193 @@
+<template>
+  <section class="AppResident">
+    <ai-list v-if="!showDetail" isTabs>
+      <ai-title slot="title" title="居民档案" :instance="instance" :hideLevel="hideLevel-1" isShowArea
+                v-model="areaId"/>
+      <template #tabs>
+        <el-tabs v-model="activeName">
+          <el-tab-pane v-for="op in tabs" :key="op.value" :name="op.value" :label="op.label">
+            <component v-if="op.value==activeName" :is="op.comp" :areaId="areaId" :active="activeName"/>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+    </ai-list>
+    <component v-else :is="detailComponent" :instance="instance" :dict="dict" :permissions="permissions"/>
+  </section>
+</template>
+<script>
+import {mapState} from "vuex";
+import localResident from "./localResident";
+import ListTpl from "./listTpl";
+import MobileResident from "./mobileResident";
+import ResidentSta from "./residentSta";
+
+export default {
+  name: "AppResident",
+  label: "居民档案",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  provide() {
+    return {
+      resident: this
+    }
+  },
+  components: {ResidentSta, MobileResident, ListTpl, localResident},
+  computed: {
+    ...mapState(["user"]),
+    tabs() {
+      let details = {
+        "本地居民": localResident,
+        "流动人员": MobileResident,
+      }
+      return [
+        ...this.dict.getDict('residentType').map(e => ({
+          label: e.dictName,
+          value: e.dictValue,
+          comp: ListTpl,
+          detail: details[e.dictName]
+        })),
+        {label: "居民统计", value: "3", comp: ResidentSta},
+      ]
+    },
+    hideLevel() {
+      return this.user.info.areaList?.length || 0
+    },
+    showDetail() {
+      this.activeName = this.activeName || this.$route.query?.type || 0
+      return !!this.$route.query?.type || !!this.$route.query?.id
+    },
+    detailComponent() {
+      return this.tabs.find(e => e.value == this.activeName)?.detail || ""
+    }
+  },
+  data() {
+    return {
+      areaId: '',
+      activeName: "0",
+    }
+  },
+  created() {
+    this.activeName = this.$route.query?.type
+    this.areaId = JSON.parse(JSON.stringify(this.user.info.areaId))
+    this.dict.load('residentType', "sex", "faithType", "fileStatus",
+        "legality",
+        "education",
+        "maritalStatus",
+        "politicsStatus",
+        "householdName",
+        "nation",
+        "liveReason",
+        "certificateType",
+        "job",
+        "militaryStatus",
+        "householdRelation",
+        "logoutReason",
+        "nation",
+        "registerStatus",
+        "residentTipType",
+        "liveCategory",
+        "livePeriod",
+        "language",
+        "nationality");
+  },
+}
+</script>
+<style lang="scss" scoped>
+.AppResident {
+  width: 100%;
+  height: 100%;
+  background: rgba(243, 246, 249, 1);
+
+  .iconfont {
+    cursor: pointer;
+  }
+
+  .tab-content-box {
+    padding: 16px 0;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #f3f6f9;
+    overflow-y: auto;
+  }
+
+  .list {
+    box-sizing: border-box;
+    background-color: #fff;
+    border-radius: 4px;
+    border: solid 1px #d8e0e8;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .searchBar {
+      padding: 8px 0;
+
+      .el-col {
+        margin-bottom: 8px;
+
+        span {
+          display: inline-block;
+          width: 100px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          font-size: 14px;
+          background-color: #f5f5f5;
+          border-radius: 2px;
+          border: solid 1px #d0d4dc;
+          border-right: none;
+          margin: 0;
+        }
+      }
+    }
+
+    .addClass {
+      height: 64px;
+    }
+  }
+
+  .dataStatistic {
+    width: 100%;
+    margin-top: 16px;
+    padding: 0 16px 16px 16px;
+    box-sizing: border-box;
+
+    .above {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .data-item {
+        width: 32%;
+        height: 380px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 4px;
+        padding: 16px;
+        box-sizing: border-box;
+        position: relative;
+
+        p {
+          position: absolute;
+          right: 16px;
+          top: 16px;
+          font-size: 14px;
+          font-weight: bold;
+
+          span:nth-of-type(1) {
+            color: #999999;
+          }
+
+          span:nth-of-type(2) {
+            color: #333333;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/project/sass/apps/AppResident/listTpl.vue b/project/sass/apps/AppResident/listTpl.vue
new file mode 100644
index 00000000..b8569198
--- /dev/null
+++ b/project/sass/apps/AppResident/listTpl.vue
@@ -0,0 +1,352 @@
+<template>
+  <section class="listTpl">
+    <ai-list isTabs>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <ai-select placeholder="档案状态" v-model="search.fileStatus"
+                       :selectList="resident.dict.getDict('fileStatus')"
+                       @change="page.current=1,refreshTable()"/>
+            <ai-select placeholder="性别" v-model="search.sex"
+                       :selectList="resident.dict.getDict('sex')"
+                       @change="page.current=1,refreshTable()"/>
+            <ai-select placeholder="文化程度" v-model="search.education"
+                       :selectList="resident.dict.getDict('education')"
+                       @change="page.current=1,refreshTable()"/>
+            <ai-select placeholder="婚姻状况" v-model="search.maritalStatus"
+                       :selectList="resident.dict.getDict('maritalStatus')"
+                       @change="page.current=1,refreshTable()"/>
+            <ai-select placeholder="民族" v-model="search.nation"
+                       :selectList="resident.dict.getDict('nation')"
+                       @change="page.current=1,refreshTable()"/>
+            <el-date-picker
+                value-format="yyyy-MM-dd HH:mm:ss"
+                v-model="search.birthStart"
+                style="width:250px;border-radius:0;"
+                type="date"
+                size="small"
+                unlink-panels
+                placeholder="选择出生开始日期"
+                @change="page.current=1,refreshTable()"
+            />
+            <el-date-picker
+                value-format="yyyy-MM-dd HH:mm:ss"
+                v-model="search.birthEnd"
+                style="width:250px;border-radius:0;"
+                type="date"
+                size="small"
+                placeholder="选择出生结束日期"
+                unlink-panels
+                @change="page.current=1,refreshTable()"
+            />
+            <el-select
+                v-model="search.politicsStatus"
+                placeholder="政治面貌"
+                size="small"
+                @change="page.current=1,refreshTable()"
+                clearable
+            >
+              <el-option
+                  v-for="(item,i) in resident.dict.getDict('politicsStatus')"
+                  :key="i"
+                  :label="item.dictName"
+                  :value="item.dictValue"
+              ></el-option>
+            </el-select>
+            <el-select
+                v-model="search.householdName"
+                placeholder="是否户主"
+                size="small"
+                @change="page.current=1,refreshTable()"
+                clearable
+            >
+              <el-option
+                  v-for="(item,i) in resident.dict.getDict('householdName')"
+                  :key="i"
+                  :label="item.dictName"
+                  :value="item.dictValue"
+              ></el-option>
+            </el-select>
+            <el-select
+                v-model="search.faithType"
+                placeholder="宗教信仰"
+                @change="page.current=1,refreshTable()"
+                size="small"
+                clearable
+            >
+              <el-option
+                  v-for="(item,i) in resident.dict.getDict('faithType')"
+                  :key="i"
+                  :label="item.dictName"
+                  :value="item.dictValue"
+              ></el-option>
+            </el-select>
+          </template>
+          <template #right>
+            <el-input
+                size="small"
+                v-model="search.con"
+                placeholder="姓名/身份证/联系方式"
+                @keyup.enter.native="search.current = 1, refreshTable()"
+                @clear="search.current = 1, refreshTable()"
+                clearable
+                suffix-icon="iconfont iconSearch"/>
+          </template>
+        </ai-search-bar>
+        <ai-search-bar>
+          <template #left>
+            <el-button
+                size="small"
+                type="primary"
+                icon="iconfont iconAdd"
+                @click="gotoAdd()"
+                v-if="$permissions('app_appresident_edit')">
+              添加
+            </el-button>
+            <el-button
+                size="small"
+                icon="iconfont iconDelete"
+                :disabled="multipleSelection.length<=0"
+                @click="beforeDelete()"
+                v-if="$permissions('app_appresident_del')">
+              删除
+            </el-button>
+          </template>
+          <template #right>
+            <ai-import :instance="resident.instance" :dict="resident.dict" type="appresident" name="居民档案"
+                       :importParams="{residentType: active}" @success="refreshTable()">
+              <el-button icon="iconfont iconImport">导入</el-button>
+            </ai-import>
+            <ai-download :instance="resident.instance" :params="params" url="/app/appresident/export"
+                         fileName="居民档案"/>
+          </template>
+        </ai-search-bar>
+
+        <ai-table :tableData="tableData" :col-configs="colConfigs" :dict="resident.dict"
+                  :total="page.total" :current.sync="page.current" :size.sync="page.size"
+                  @getList="refreshTable"
+                  @selection-change="handleSelectionChange">
+          <el-table-column slot="idNumber" label="身份证号" show-overflow-tooltip align="center">
+            <template slot-scope="{row}">
+              <ai-id mode="show" v-model="row.idNumber" :showEyes="false"/>
+            </template>
+          </el-table-column>
+          <el-table-column slot="fileStatus" label="档案状态" show-overflow-tooltip align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.fileStatus==0" style="color:rgba(46,162,34,1);">正常</span>
+              <span v-if="scope.row.fileStatus==1" style="color:rgba(153,153,153,1);">已注销</span>
+            </template>
+          </el-table-column>
+          <el-table-column slot="options" label="操作" show-overflow-tooltip align="center">
+            <template slot-scope="scope">
+              <div class="table-options">
+                <el-button
+                    title="详情"
+                    type="text"
+                    v-if="$permissions('app_appresident_detail')"
+                    @click="detailShow(scope.row)">
+                  详情
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "listTpl",
+  inject: ['resident'],
+  props: {
+    areaId: {default: ""},
+    active: {default: ""},//人员类型
+  },
+  computed: {
+    ...mapState(["user"]),
+    params() {
+      let params = {
+        residentType: this.active
+      }
+      //导出搜索条件
+      if (this.deleteIds.length) {
+        params = {
+          ...params,
+          areaId: this.areaId,
+          ids: this.deleteIds
+        }
+      } else {
+        params = {
+          areaId: this.areaId,
+          ...params,
+          ...this.search
+        }
+      }
+      return params
+    },
+    colConfigs() {
+      return [
+        {type: "selection"},
+        {label: "姓名", prop: "name", align: "center"},
+        {label: "性别", prop: "sex", dict: 'sex', align: "center"},
+        {slot: "idNumber"},
+        {label: "年龄", prop: "age", align: "center"},
+        {label: "民族", prop: "nation", align: "center", dict: "nation"},
+        {label: "文化程度", prop: "education", align: "center", dict: "education"},
+        {label: "政治面貌", prop: "politicsStatus", align: "center", dict: "politicsStatus"},
+        {slot: "fileStatus"},
+        {slot: "options"}
+      ]
+    }
+  },
+  watch: {
+    areaId(v) {
+      v && this.refreshTable()
+    }
+  },
+  data() {
+    return {
+      page: {current: 1, size: 10, total: 0},
+      search: {
+        fileStatus: "",
+        sex: "",
+        nation: "",
+        education: "",
+        politicsStatus: "",
+        birthStart: "",
+        birthEnd: "",
+        faithType: "",
+        householdName: "",
+        con: "",
+        maritalStatus: ""
+      },
+      style: {},
+      tableData: [],
+      multipleSelection: [],
+      deleteIds: [],
+    };
+  },
+  methods: {
+    handleClick() {
+      this.tableData = [];
+      this.multipleSelection = [];
+      this.searchInit()
+    },
+    searchInit() {
+      let tempAreaId = this.search.areaId;
+      this.search = {
+        fileStatus: "",
+        sex: "",
+        nation: "",
+        education: "",
+        politicsStatus: "",
+        birth: [],
+        faithType: "",
+        householdName: "",
+        areaId: "",
+        con: "",
+        maritalStatus: ""
+      };
+      this.search.areaId = tempAreaId;
+      this.page = {current: 1, size: 10, total: 0};
+      this.refreshTable()
+    },
+    handleSelectionChange(val) {
+      this.deleteIds = [];
+      this.multipleSelection = val;
+      this.multipleSelection.forEach(e => {
+        this.deleteIds.push(e.id);
+      });
+    },
+    exportrExcle() {
+      if (this.deleteIds.length == 0) {
+        if (this.search.birth) {
+          this.search.birth = this.search.birth.join(",");
+        }
+        this.resident.instance
+        .post(`/app/appresident/exportAll`, null, {
+          params: {
+            ...this.search,
+            ...this.page
+          }
+        })
+        .then(res => {
+          if (res && res.code == 0) {
+            this.$message.success(res.data);
+            if (typeof this.search.birth == "string") {
+              this.search.birth = this.search.birth.split(",");
+            }
+          }
+        });
+      } else {
+        this.resident.instance.post(`/app/appresident/exportByIds`, {
+          ids: this.deleteIds,
+          areaId: this.user.info.areaId
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success(res.data);
+          }
+        });
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val;
+      this.refreshTable()
+    },
+    detailShow(row) {
+      this.$router.push({query: {type: this.active, id: row.id}})
+    },
+    gotoAdd() {
+      this.$router.push({query: {type: this.active}})
+    },
+    refreshTable() {
+      this.resident.instance.post(`/app/appresident/list`, null, {
+        params: {...this.search, ...this.page, areaId: this.areaId, residentType: this.active}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    beforeDelete() {
+      this.$confirm("确定要执行删除操作吗？", {type: "error"})
+      .then(() => {
+        this.deletePersonFn();
+        this.deleteIds = [];
+      })
+      .catch(() => {
+      });
+    },
+    deletePersonFn() {
+      this.resident.instance.post(`/app/appresident/deleteBody`, {
+        ids: this.deleteIds
+      }).then(res => {
+        if (res && res.code == 0) {
+          this.$message.success("删除成功");
+          if (
+              this.page.current == Math.ceil(this.page.total / this.page.size)
+          ) {
+            this.page.total = this.page.total - this.deleteIds.length;
+            this.page.current = Math.ceil(this.page.total / this.page.size);
+          }
+          this.refreshTable();
+        }
+      })
+    },
+  },
+  created() {
+    this.refreshTable()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.listTpl {
+  height: 100%;
+}
+</style>
diff --git a/project/sass/apps/AppResident/localResident.vue b/project/sass/apps/AppResident/localResident.vue
new file mode 100644
index 00000000..27905ac4
--- /dev/null
+++ b/project/sass/apps/AppResident/localResident.vue
@@ -0,0 +1,1123 @@
+<template>
+  <section class="addAborigines">
+    <ai-detail>
+      <ai-title slot="title" :title="showDetail?'本地居民信息':'添加本地居民'" isShowBack @onBackClick="$router.push({query:{}})"
+                isShowBottomBorder>
+        <template v-if="showDetail" #rightBtn>
+          <el-button @click="beforeWriteOff()" icon="el-icon-switch-button" v-if="baseInfo.fileStatus==0">注销档案
+          </el-button>
+          <el-button icon="iconfont iconDelete" @click="handleDelete()" v-if="$permissions('app_appresident_del')">
+            删除人员
+          </el-button>
+        </template>
+      </ai-title>
+      <template #content>
+        <el-form class="content-right" :model="baseInfo" ref="ruleForm" :rules="rules" label-width="130px"
+                 label-position="right" size="small">
+
+          <ai-card title="基本信息">
+            <template v-if="showDetail" #right>
+              <template v-if="$permissions('app_appresident_edit')">
+                <el-button
+                    type="text"
+                    class="iconfont iconEdit"
+                    @click="editInit(),showEdit1=true;"
+                    v-if="!showEdit1"
+                >&nbsp;修改
+                </el-button>
+              </template>
+              <el-button
+                  type="text"
+                  @click="showEdit1=false,searchDetail(baseInfo.id)"
+                  v-if="showEdit1"
+              >取消
+              </el-button>
+              <el-button type="text" v-if="showEdit1" @click="saveFrom('ruleForm')">保存</el-button>
+            </template>
+            <div slot="content" v-if="showEdit1">
+              <div class="above">
+                <div class="left">
+                  <el-form-item label="姓名：" prop="name">
+                    <el-input
+                        v-model="baseInfo.name"
+                        autocomplete="off"
+                        size="small"
+                        placeholder="请输入姓名"
+                        v-if="showEdit1"
+                        :disabled="!!showDetail"
+                    ></el-input>
+                    <!-- <p v-else>{{baseInfo.name||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="身份证号：" prop="idNumber">
+                    <el-input
+                        v-model="baseInfo.idNumber"
+                        autocomplete="off"
+                        size="small"
+                        placeholder="请输入身份证号"
+                        v-if="showEdit1"
+                        :maxlength="18"
+                        @input="idChange"
+                        :disabled="!!showDetail"
+                    />
+                    <!-- <p v-else>
+                        <ai-id mode="show" v-model="baseInfo.idNumber" right-btn></ai-id>
+                    </p>-->
+                  </el-form-item>
+                  <el-form-item label="性别：" prop="sex">
+                    <el-select v-model="baseInfo.sex"
+                               placeholder="请选择"
+                               disabled
+                               clearable>
+                      <el-option
+                          v-for="(item,i) in dict.getDict('sex')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>
+                        {{dict.getLabel('sex',baseInfo.sex)||'-'}}
+                    </p>-->
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="个人照片：" prop="photo">
+                    <!-- <div class="pictrue">
+                        <img :src="imgUrl" alt="" title=""></img>
+                        <el-upload
+                            v-if="showEdit1"
+                            class="upload-demo"
+                            action
+                            multiple
+                            accept=".png,.jpg"
+                            :http-request="uploadFile"
+                            :show-file-list="false"
+                            :on-change="handleChange"
+                            :file-list="fileList"
+                            >
+                            <el-button >上传照片</el-button>
+                            <div slot="tip" class="el-upload__tip">
+                                    图片大小不能超过2M
+                    </div>
+                        </el-upload>
+                    </div>-->
+                    <ai-avatar :instance="instance" v-if="showEdit1" v-model="baseInfo.photo"/>
+                    <ai-avatar v-model="baseInfo.photo" v-else :editable="false"/>
+                    <!--<ai-avatar :instance="instance" v-model="baseInfo.photo"/>-->
+                  </el-form-item>
+                </div>
+              </div>
+              <div class="above">
+                <div class="left">
+                  <el-form-item label="出生日期：" prop="birthday">
+                    <el-date-picker
+                        v-if="showEdit1"
+                        disabled
+                        :editable="false"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        format="yyyy-MM-dd"
+                        v-model="birthday"
+                        type="date"
+
+                        placeholder="选择日期"
+                    ></el-date-picker>
+                    <!-- <p v-else>{{birthday?birthday.substring(0, 10):"-"}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="文化程度：" prop="education">
+                    <el-select
+                        v-model="baseInfo.education"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('education')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('education',baseInfo.education)||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="政治面貌：" prop="politicsStatus">
+                    <el-select
+                        v-model="baseInfo.politicsStatus"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('politicsStatus')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('politicsStatus',baseInfo.politicsStatus)||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="职业：" prop="job">
+                    <el-select
+                        v-model="baseInfo.job"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('job')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('job',baseInfo.job)||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="宗教信仰：" prop="faithType">
+                    <el-select
+                        v-model="baseInfo.faithType"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('faithType')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('faithType',baseInfo.faithType)||'-'}}</p> -->
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="年龄：" prop="age">
+                    <el-input
+                        disabled
+                        v-model="baseInfo.age"
+                        autocomplete="off"
+                        size="small"
+                        placeholder="请输入年龄"
+                        v-if="showEdit1"
+                        type="number"
+                        @mousewheel.native.prevent
+                    ></el-input>
+                    <!-- <p v-else>{{baseInfo.age}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="民族：" prop="nation">
+                    <el-select
+                        v-model="baseInfo.nation"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('nation')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('nation',baseInfo.nation)||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="婚姻状况：" prop="maritalStatus">
+                    <el-select
+                        v-model="baseInfo.maritalStatus"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('maritalStatus')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('maritalStatus',baseInfo.maritalStatus)||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="兵役状况：" prop="militaryStatus">
+                    <el-select
+                        v-model="baseInfo.militaryStatus"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('militaryStatus')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('militaryStatus',baseInfo.militaryStatus)||'-'}}</p> -->
+                  </el-form-item>
+                </div>
+              </div>
+              <div class="areaList">
+                <el-form-item label="籍贯：" prop=" birthplaceAreaId">
+                  <ai-area-select
+                      clearable
+                      always-show
+                      :instance="instance"
+                      v-if="showEdit1"
+                      v-model="baseInfo.birthplaceAreaId"
+                      :areaLevel="3"
+                  ></ai-area-select>
+                  <!-- <p v-if="!showEdit1">{{baseInfo.birthplaceAreaName||'-'}}</p> -->
+                </el-form-item>
+              </div>
+            </div>
+            <div slot="content" v-else>
+              <el-row type="flex">
+                <div class="detail-info fill">
+                  <h3 class="name">{{ baseInfo.name || '-' }}</h3>
+                  <div class="detail-left fill">
+                    <div class="info">
+                      <span class="label">性别：</span>
+                      <span class="value">{{ dict.getLabel('sex', baseInfo.sex) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">出生日期：</span>
+                      <span class="value">{{ birthday ? birthday.substring(0, 10) : '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">籍贯：</span>
+                      <span class="value">{{ baseInfo.birthplaceAreaName || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">文化程度：</span>
+                      <span class="value">{{ dict.getLabel('education', baseInfo.education) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">政治面貌：</span>
+                      <span
+                          class="value"
+                      >{{ dict.getLabel('politicsStatus', baseInfo.politicsStatus) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">宗教信仰：</span>
+                      <span class="value">{{ dict.getLabel('faithType', baseInfo.faithType) || '-' }}</span>
+                    </div>
+                  </div>
+                  <div class="detail-right fill">
+                    <div class="info">
+                      <span class="label">身份证号：</span>
+                      <span class="value">
+                        <ai-id mode="show" v-model="baseInfo.idNumber" right-btn class="line-center"></ai-id>
+                      </span>
+                    </div>
+                    <div class="info">
+                      <span class="label">年龄：</span>
+                      <span class="value">{{ baseInfo.age }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">民族：</span>
+                      <span class="value">{{ dict.getLabel('nation', baseInfo.nation) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">婚姻状况：</span>
+                      <span
+                          class="value"
+                      >{{ dict.getLabel('maritalStatus', baseInfo.maritalStatus) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">兵役状况：</span>
+                      <span
+                          class="value"
+                      >{{ dict.getLabel('militaryStatus', baseInfo.militaryStatus) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">职业：</span>
+                      <span class="value">{{ dict.getLabel('job', baseInfo.job) || '-' }}</span>
+                    </div>
+                  </div>
+                </div>
+                <ai-avatar v-model="baseInfo.photo" :editable="false"/>
+              </el-row>
+            </div>
+          </ai-card>
+
+          <ai-card title="联络信息">
+            <template v-if="showDetail" #right>
+              <template v-if="$permissions('app_appresident_edit')">
+                <el-button
+                    type="text"
+                    class="iconfont iconEdit"
+                    @click="editInit(),showEdit2=true;"
+                    v-if="!showEdit2">
+                  修改
+                </el-button>
+              </template>
+              <el-button
+                  type="text"
+                  @click="showEdit2=false,searchDetail(baseInfo.id)"
+                  v-if="showEdit2">
+                取消
+              </el-button>
+              <el-button type="text" v-if="showEdit2" @click="saveFrom('ruleForm')">保存</el-button>
+            </template>
+            <div slot="content" v-if="showEdit2">
+              <div class="above">
+                <div class="left">
+                  <el-form-item label="联系方式：" prop="phone">
+                    <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" v-if="showEdit2"
+                              :maxlength="11"/>
+                  </el-form-item>
+                </div>
+              </div>
+              <el-form-item label="现住址：" prop="currentAreaId">
+                <ai-area-select clearable always-show :instance="instance" :disabled-level="disabledLevel" v-model="baseInfo.currentAreaId"
+                                :valueLevel="4"/>
+                <el-form-item>
+                  <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" clearable/>
+                </el-form-item>
+              </el-form-item>
+            </div>
+            <div slot="content" v-else style="margin-top: 16px;margin-bottom:24px">
+              <div class="info" style="margin-bottom:8px">
+                <span class="label">联系方式：</span>
+                <span class="value">{{ baseInfo.phone || '-' }}</span>
+              </div>
+              <div class="info">
+                <span class="label">现住址：</span>
+                <span class="value">{{ baseInfo.currentAreaName + baseInfo.currentAddress || "-" }}</span>
+              </div>
+            </div>
+          </ai-card>
+
+          <ai-card title="户籍信息">
+            <template v-if="showDetail" #right>
+              <template v-if="$permissions('app_appresident_edit')">
+                <el-button
+                    type="text"
+                    class="iconfont iconEdit"
+                    @click="editInit(),showEdit3=true;"
+                    v-if="!showEdit3"
+                >&nbsp;修改
+                </el-button>
+              </template>
+              <el-button
+                  type="text"
+                  @click="showEdit3=false,searchDetail(baseInfo.id)"
+                  v-if="showEdit3"
+              >取消
+              </el-button>
+              <el-button type="text" v-if="showEdit3" @click="saveFrom('ruleForm')">保存</el-button>
+            </template>
+            <div slot="content" v-if="showEdit3">
+              <div class="above">
+                <div class="left">
+                  <el-form-item label="是否户主：" prop="householdName">
+                    <el-select v-model="baseInfo.householdName" placeholder="请选择"
+                               @change="householdRelationChange" clearable>
+                      <el-option v-for="(item,i) in dict.getDict('householdName')"
+                                 :label="item.dictName" :key="i" :value="item.dictValue"/>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.householdName==0">
+                    <el-select v-model="baseInfo.householdRelation" placeholder="请选择" v-if="showEdit3" clearable>
+                      <el-option v-for="(item,i) in dict.getDict('householdRelation')"
+                                 :label="item.dictName" :key="i" :value="item.dictValue"/>
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="户主身份证号：" prop="householdIdNumber" v-if="baseInfo.householdName==0">
+                    <el-input v-model="baseInfo.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18" clearable/>
+                  </el-form-item>
+                </div>
+              </div>
+              <el-form-item label="户籍地：" prop="householdAreaId">
+                <ai-area-select clearable always-show :instance="instance" v-if="showEdit3"
+                                v-model="baseInfo.householdAreaId" :disabled-level="disabledLevel" :valueLevel="4"/>
+                <el-form-item v-if="baseInfo.householdAreaId">
+                  <el-input v-model="baseInfo.householdAddress" placeholder="详细地址" clearable/>
+                </el-form-item>
+              </el-form-item>
+            </div>
+            <div slot="content" v-else style="margin-top: 16px;margin-bottom:24px">
+              <div class="detail-info">
+                <div class="detail-left fill">
+                  <div class="info">
+                    <span class="label">是否户主：</span>
+                    <span class="value">{{ dict.getLabel('householdName', baseInfo.householdName) || '-' }}</span>
+                  </div>
+                </div>
+                <div class="info fill" v-if="baseInfo.householdName==0">
+                  <span class="label">与户主关系：</span>
+                  <span class="value">{{ dict.getLabel('householdRelation', baseInfo.householdRelation) || '-' }}</span>
+                </div>
+                <div class="info fill" v-if="baseInfo.householdName==0">
+                  <span class="label">户主身份证号：</span>
+                  <span class="value">
+                        <ai-id mode="show" v-model="baseInfo.householdIdNumber" right-btn></ai-id>
+                      </span>
+                </div>
+              </div>
+              <div class="detail-info-p info">
+                <span class="label">户籍地：</span>
+                <span class="value">
+                  {{ baseInfo.householdAreaName + (baseInfo.householdAddress ? baseInfo.householdAddress : "") }}
+                </span>
+              </div>
+            </div>
+          </ai-card>
+
+          <ai-card title="家庭成员" v-if="showDetail">
+            <div slot="content" v-if="showDetail">
+              <el-table
+                  border
+                  ref="multipleTable"
+                  :data="family"
+                  style="margin-top:8px;"
+
+                  header-cell-class-name="table-header"
+                  tooltip-effect="light"
+                  row-class-name="table-row"
+                  cell-class-name="table-cell"
+              >
+                <el-table-column align="center" prop="name" label="与户主关系">
+                  <template slot-scope="scope">
+                      <span>{{
+                          scope.row.householdRelation ? dict.getLabel('householdRelation', scope.row.householdRelation) : "户主"
+                        }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="idNumber" label="性别" align="center" show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <span>{{ parseInt(scope.row.idNumber.substr(16, 1)) % 2 == 1 ? '男' : '女' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="age" label="年龄" align="center" show-overflow-tooltip></el-table-column>
+                <el-table-column
+                    prop="idNumber"
+                    label="身份证号"
+                    align="center"
+                    width="200"
+                    show-overflow-tooltip>
+                  <template slot-scope="{row}">
+                    <ai-id mode="show" v-model="row.idNumber" :showEyes="false"/>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="address" label="操作" align="center" show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <el-button icon="iconfont iconShow" title="查看详情" class="dict-list-operation"
+                               @click="showFamily(scope.row)" type="text"/>
+                  </template>
+                </el-table-column>
+                <div slot="empty" class="no-data" style="height:160px;"/>
+              </el-table>
+            </div>
+          </ai-card>
+        </el-form>
+      </template>
+      <template v-if="!showDetail" #footer>
+        <el-button @click="cancelFn()">取消</el-button>
+        <el-button type="primary" @click="saveFrom('ruleForm','goBack')">保存</el-button>
+      </template>
+    </ai-detail>
+
+    <el-dialog class="deleteStyle" :visible.sync="familyDialog" width="720px" title="家庭成员信息" top="30vh">
+      <el-row type="flex" justify="space-between">
+        <ul>
+          <li>
+            <span>姓名：</span>
+            <p>{{ familyInfo.name }}</p>
+          </li>
+          <li>
+            <span>身份证号：</span>
+            <p>
+              <ai-id mode="show" v-model="familyInfo.idNumber" right-btn class="line-center"></ai-id>
+            </p>
+          </li>
+          <li>
+            <span>性别：</span>
+            <p>{{ dict.getLabel('sex', familyInfo.sex) }}</p>
+          </li>
+          <li>
+            <span>年龄：</span>
+            <p>{{ familyInfo.age }}</p>
+          </li>
+          <li>
+            <span>联系方式：</span>
+            <p>{{ familyInfo.phone }}</p>
+          </li>
+          <li>
+            <span>民族：</span>
+            <p>{{ dict.getLabel('nation', familyInfo.nation) }}</p>
+          </li>
+          <li>
+            <span>籍贯：</span>
+            <p>{{ familyInfo.birthplaceAreaName }}</p>
+          </li>
+          <li>
+            <span>文化程度：</span>
+            <p>{{ dict.getLabel('education', familyInfo.education) }}</p>
+          </li>
+          <li>
+            <span>婚姻状况：</span>
+            <p>{{ dict.getLabel('maritalStatus', familyInfo.maritalStatus) }}</p>
+          </li>
+          <li>
+            <span>政治面貌：</span>
+            <p>{{ dict.getLabel('politicsStatus', familyInfo.politicsStatus) }}</p>
+          </li>
+          <li>
+            <span>兵役状况：</span>
+            <p>{{ dict.getLabel('militaryStatus', familyInfo.militaryStatus) }}</p>
+          </li>
+          <li>
+            <span>宗教信仰：</span>
+            <p>{{ dict.getLabel('faithType', familyInfo.faithType) }}</p>
+          </li>
+          <li>
+            <span>职业：</span>
+            <p>{{ dict.getLabel('job', familyInfo.job) }}</p>
+          </li>
+          <li style="width:100%;">
+            <span>现住址：</span>
+            <p>{{ familyInfo.currentAreaName + familyInfo.currentAddress }}</p>
+          </li>
+        </ul>
+        <div class="img_block">
+          <ai-avatar v-model="familyInfo.imgUrl" :editable="false"/>
+        </div>
+      </el-row>
+      <div slot="footer" style="text-align: center;">
+        <el-button style="width:92px" size="small" @click="familyDialog = false">关闭
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="档案注销"
+               class="deleteStyle"
+               :visible.sync="writeoffDialog"
+               width="700px" top="25vh"
+               @close="familyInit()"
+               :close-on-click-modal="false">
+      <el-form :model="writeInfo" ref="writeInfo" label-width="100px" size="small">
+        <el-form-item label="姓名：">{{ baseInfo.name }}</el-form-item>
+        <el-form-item label="身份证号：">
+          <ai-id mode="show" v-model="baseInfo.idNumber" right-btn/>
+        </el-form-item>
+        <el-form-item label="注销原因：" prop="logoutReason" autocomplete="off"
+                      :rules="{required: true, message: '注销原因不能为空', trigger: 'change'}">
+          <el-select v-model="writeInfo.logoutReason" placeholder="请选择">
+            <el-option v-for="(item,i) in dict.getDict('logoutReason')"
+                       :label="item.dictName"
+                       :key="i" :value="item.dictValue"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="操作说明：" prop="logoutDescription" :rules="{ required: true, message: '操作说明不能为空'}">
+          <el-input type="textarea" v-model="writeInfo.logoutDescription" :rows="4"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" style="text-align: center;">
+        <el-button
+            style="width:92px"
+            size="small"
+            class="delete-btn"
+            @click="writeoffDialog=false,$refs.writeInfo.resetFields();"
+        >取消
+        </el-button>
+        <el-button
+            style="width:92px"
+            size="small"
+            type="primary"
+            @click="submitForm('writeInfo')"
+        >确认
+        </el-button>
+      </div>
+    </el-dialog>
+  </section>
+</template>
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "addAborigines",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    detail: Object,
+    active: String
+  },
+  data() {
+    let IdNumberPass = (rule, value, callback) => {
+      if (value) {
+        if (this.idCardNoUtil.checkIdCardNo(value)) {
+          callback();
+        } else {
+          callback(new Error("身份证号格式错误"));
+        }
+      } else {
+        callback(new Error("请输入身份证号"));
+      }
+    };
+    return {
+      buildingCascader: true,
+      houseCascader: true,
+      navId: 0,
+      baseInfo: {
+        registerStatus: "",
+        tips: [],
+        age: "",
+        birthplaceAreaId: "",
+        currentAddress: "",
+        currentAreaId: "",
+        education: "",
+        faithType: "",
+        fileStatus: "",
+        householdAddress: "",
+        householdAreaId: "",
+        householdIdNumber: "",
+        householdName: "",
+        householdRelation: "",
+        id: "",
+        idNumber: "",
+        job: "",
+        logoutDescription: "",
+        logoutReason: "",
+        logoutTime: "",
+        logoutUserId: "",
+        maritalStatus: "",
+        militaryStatus: "",
+        name: "",
+        nation: "",
+        phone: "",
+        photo: "",
+        politicsStatus: "",
+        sex: ""
+      },
+      family: [],
+      familyDialog: false,
+      familyInfo: {},
+      writeoffDialog: false,
+      writeInfo: {
+        id: "",
+        logoutReason: "",
+        logoutDescription: "",
+        fileStatus: "1"
+      },
+      birthday: "",
+      rules: {
+        name: [{required: true, message: "请输入姓名", trigger: "blur"}],
+        idNumber: [
+          {required: true, validator: IdNumberPass, trigger: "blur"}
+        ],
+        sex: [{required: true, message: "请选择性别", trigger: "blur"}],
+        currentAreaId: [{message: "请选择现住址", required: true, trigger: "blur"},
+          {
+            validator: (r, v, cb) => {
+              if (/.+0{3}$/.test(v)) {
+                cb("现住址必须选到村级")
+              } else cb()
+            }, trigger: "blur"
+          }],
+        currentAddress: [{message: "请选择现住址详细地址", required: true}],
+        householdAreaId: [
+          {message: "户籍地必须选到村级", required: true,trigger: "blur"},
+          {
+            validator: (r, v, cb) => {
+              if (/.+0{3}$/.test(v)) {
+                cb("户籍地必须选到村级")
+              } else cb()
+            },trigger: "blur"
+          }
+        ],
+        householdName: [
+          {required: true, message: "请选择是否户主", trigger: "change"}
+        ],
+        householdRelation: [
+          {required: true, message: "请选择与户主关系", trigger: "change"}
+        ],
+        householdIdNumber: [
+          {required: true, validator: IdNumberPass, trigger: "blur"}
+        ],
+        householdAddress: [
+          {required: true, message: "请选择户籍地详细地址", trigger: "blur"}
+        ]
+      },
+      imgUrl: "",
+      fileList: [],
+      showEdit1: false,
+      showEdit2: false,
+      showEdit3: false,
+      showEdit4: false,
+      disabledLevel: 0
+    };
+  },
+  computed: {
+    ...mapState(["user"]),
+    showDetail() {
+      return !!this.$route.query?.id
+    },
+    navList() {
+      return [
+        {name: "本地居民信息", id: "1"},
+        {name: "变更记录", id: "2"}
+      ]
+    },
+    tipOps() {
+      return this.dict.getDict("residentTipType") || []
+    }
+  },
+  methods: {
+    uploadFile(file) {
+      const isLt2M = file.file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        this.$message.warning("头像大小不能超过 2MB!");
+        return;
+      }
+      let formData = new FormData();
+      formData.append("file", file.file);
+      this.instance.post(`/admin/file/add`, formData, {withCredentials: false})
+      .then(res => {
+        if (res && res.code == 0) {
+          let imgInfo = res.data[0].split(";");
+          this.imgUrl = imgInfo[0];
+          this.baseInfo.photo = res.data[0];
+        }
+      });
+    },
+    handleChange(file, fileList) {
+      this.fileList = fileList;
+    },
+    householdRelationChange() {
+      this.baseInfo.householdIdNumber = "";
+      this.baseInfo.householdRelation = "";
+    },
+    saveFrom(formName, type) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.saveFromFn(type);
+        }
+      });
+    },
+    cancelFn() {
+      this.$refs.ruleForm?.resetFields()
+      this.$router.push({query: {}});
+    },
+    submitForm(formName) {
+      this.writeInfo.id = this.baseInfo.id;
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.instance.post(`/app/appresident/addOrUpdate`, {
+            ...this.writeInfo
+          }).then(res => {
+            if (res && res.code == 0) {
+              this.$message.success("注销成功");
+              this.writeoffDialog = false;
+              this.$router.push({query: {}});
+            }
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    familyInit() {
+      Object.keys(this.writeInfo).forEach(e => {
+        this.writeInfo[e] = "";
+      });
+      this.$refs.writeInfo.resetFields();
+    },
+    saveFromFn(type) {
+      let {currentHouseList, householdHouseList, tips} = this.baseInfo
+      this.instance.post(`/app/appresident/addOrUpdate`, {
+        residentType: this.$route.query.type,
+        ...this.baseInfo,
+        currentHouseList: currentHouseList?.join("|"),
+        householdHouseList: householdHouseList?.join("|"),
+        tips: tips?.join("|")
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$message.success("保存成功");
+          if (type) {
+            this.$router.push({query: {}})
+          } else {
+            this.editInit();
+          }
+        }
+      });
+    },
+    editInit() {
+      this.showEdit1 = false;
+      this.showEdit2 = false;
+      this.showEdit3 = false;
+      this.showEdit4 = false;
+      this.searchDetail(this.baseInfo.id);
+    },
+    searchDetail(id, type) {
+      this.instance.post(`/app/appresident/detail`, null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          let {currentHouseList, householdHouseList, tips} = res.data.resident
+          this.baseInfo = {
+            ...res.data.resident,
+            currentHouseList: currentHouseList?.split("|"),
+            householdHouseList: householdHouseList?.split("|"),
+            tips: tips ? tips.split("|") : [],
+          };
+          this.family = res.data.family;
+          this.IdCard(this.baseInfo.idNumber);
+          if (type == "family") {
+            this.familyDialog = false;
+          }
+        }
+      });
+    },
+    showFamily(row) {
+      this.familyInfo = row;
+      if (this.familyInfo.photo) {
+        this.familyInfo.imgUrl = this.familyInfo.photo.split(";")[0];
+      } else {
+        this.familyInfo.imgUrl = "";
+      }
+      this.familyDialog = true;
+    },
+    beforeWriteOff() {
+      this.writeoffDialog = true;
+    },
+    handleDelete() {
+      this.$confirm("删掉档案后，\n" +
+          `<span class="username">${this.baseInfo.name}</span>` +
+          "        的历史相关信息可能无法追溯查看，是否确定删除该人员档案？", {
+        title: "档案删除"
+      }).then(() => {
+        this.instance.post(`/app/appresident/delete?ids=${this.baseInfo.id}`).then(res => {
+          if (res && res.code == 0) {
+            this.$message.success("删除成功");
+            this.$router.push({query: {}});
+          }
+        });
+      }).catch(() => 0)
+    },
+    idChange(val) {
+      if (val.length == 18) {
+        this.IdCard(val);
+      }
+    },
+    IdCard(UUserCard) {
+      if (UUserCard) {
+        let arr = [];
+        //获取出生日期
+        let birth =
+            UUserCard.substring(6, 10) +
+            "-" +
+            UUserCard.substring(10, 12) +
+            "-" +
+            UUserCard.substring(12, 14) +
+            " 00:00:00";
+        arr.push(birth);
+
+        if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
+          //男
+          arr.push("1");
+        } else {
+          //女
+          arr.push("0");
+        }
+        //获取年龄
+        const myDate = new Date();
+        const month = myDate.getMonth() + 1;
+        const day = myDate.getDate();
+        let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
+        if (
+            UUserCard.substring(10, 12) < month ||
+            (UUserCard.substring(10, 12) == month &&
+                UUserCard.substring(12, 14) <= day)
+        ) {
+          age++;
+        }
+        arr.push(age);
+        this.baseInfo.sex = arr[1];
+        this.baseInfo.age = arr[2];
+        this.birthday = arr[0];
+      }
+    }
+  },
+  created() {
+    this.disabledLevel = this.user.info.areaMap[this.user.info.areaId].length;
+    if (!this.showDetail) {
+      this.showEdit1 = true;
+      this.showEdit2 = true;
+      this.showEdit3 = true;
+      this.showEdit4 = true;
+      this.baseInfo.householdAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
+      this.baseInfo.currentAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
+      this.$nextTick(() => this.$refs.ruleForm?.resetFields())
+    } else {
+      this.searchDetail(this.$route.query.id);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.addAborigines {
+  height: 100%;
+  font-size: 14px;
+
+  .el-form-item {
+    margin-bottom: 10px;
+
+    .el-form-item {
+      margin-top: 10px;
+    }
+
+    .el-cascader, .el-select, .el-date-editor {
+      width: 100%;
+    }
+  }
+
+  ::v-deep .el-form-item__error {
+    position: static;
+  }
+
+  ::v-deep .content-right {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-bottom: 80px;
+
+    .ailist-title {
+      padding: 0;
+    }
+
+    .above {
+      width: 100%;
+      overflow: hidden;
+
+      .left {
+        width: 380px;
+        float: left;
+      }
+
+      .right {
+        width: 380px;
+        float: left;
+
+        .pictrue {
+          display: flex;
+          height: 120px;
+
+          img {
+            width: 104px;
+            height: 120px;
+            border-radius: 2px;
+            border: solid 1px #d0d4dc;
+          }
+
+          .upload-demo {
+            padding: 0 15px;
+          }
+
+          .el-button {
+            width: 104px;
+            height: 32px;
+            background-color: #ffffff;
+            border-radius: 2px;
+            border: solid 1px #8899bb;
+          }
+        }
+      }
+    }
+  }
+
+  ul {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+      min-height: 32px;
+      width: 50%;
+
+      span {
+        flex-shrink: 0;
+      }
+
+      p {
+        margin: 0
+      }
+    }
+  }
+
+  .img_block {
+    flex-shrink: 0;
+  }
+
+  .detail-info {
+    display: flex;
+    flex-wrap: wrap;
+
+    h3 {
+      width: 100%;
+      flex-shrink: 0
+    }
+
+  }
+
+  .info {
+    display: flex;
+    align-items: center;
+    line-height: 1.4;
+    margin-bottom: 16px;
+
+    .label {
+      flex-shrink: 0;
+      width: 100px;
+      margin-right: 40px;
+      text-align: right;
+      color: #888;
+      font-size: 14px;
+    }
+
+    .value {
+      color: #222;
+      font-size: 14px;
+      word-break: break-all;
+    }
+  }
+
+  .fill {
+    flex: 1;
+    min-width: 50%;
+  }
+
+  .el-checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    .el-checkbox {
+      margin: 0 !important;
+      display: flex;
+      align-items: center;
+
+      ::v-deep .el-checkbox__label {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .tags {
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/project/sass/apps/AppResident/mobileResident.vue b/project/sass/apps/AppResident/mobileResident.vue
new file mode 100644
index 00000000..072c409c
--- /dev/null
+++ b/project/sass/apps/AppResident/mobileResident.vue
@@ -0,0 +1,1116 @@
+<template>
+  <section class="mobileResident">
+    <ai-detail>
+      <ai-title slot="title" :title="showDetail?'流动人口信息':'添加流动人口'" isShowBack @onBackClick="$router.push({query:{}})"
+                isShowBottomBorder>
+        <template v-if="showDetail" #rightBtn>
+          <el-button @click="beforeWriteOff()" icon="el-icon-switch-button" v-if="baseInfo.fileStatus==0">注销档案
+          </el-button>
+          <el-button icon="iconfont iconDelete" @click="handleDelete()" v-if="$permissions('app_appresident_del')">
+            删除人员
+          </el-button>
+        </template>
+      </ai-title>
+      <template #content>
+        <el-form class="content-right" :model="baseInfo" ref="ruleForm" :rules="rules" label-width="130px"
+                 label-position="right" size="small">
+          <ai-card title="基本信息">
+            <template v-if="showDetail" #right>
+              <template v-if="$permissions('app_appresident_edit')">
+                <el-button
+                    type="text"
+                    class="iconfont iconEdit"
+                    @click="editInit(),showEdit1=true;"
+                    v-if="!showEdit1"
+                >&nbsp;修改
+                </el-button>
+              </template>
+              <el-button
+                  type="text"
+                  @click="showEdit1=false,searchDetail(baseInfo.id)"
+                  v-if="showEdit1"
+              >取消
+              </el-button>
+              <el-button type="text" v-if="showEdit1" @click="saveFrom('ruleForm')">保存</el-button>
+            </template>
+            <div slot="content" v-if="showEdit1">
+              <div class="above">
+                <div class="left">
+                  <el-form-item label="姓名：" prop="name">
+                    <el-input
+                        v-model="baseInfo.name"
+                        autocomplete="off"
+                        size="small"
+                        placeholder="请输入姓名"
+                        v-if="showEdit1"
+                        :disabled="!!showDetail"
+                    ></el-input>
+                    <!-- <p v-else>{{baseInfo.name||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="身份证号：" prop="idNumber">
+                    <el-input
+                        v-model="baseInfo.idNumber"
+                        autocomplete="off"
+                        size="small"
+                        placeholder="请输入身份证号"
+                        v-if="showEdit1"
+                        :maxlength="18"
+                        @input="idChange"
+                        :disabled="!!showDetail"
+                    />
+                    <!-- <p v-else>
+                        <ai-id mode="show" v-model="baseInfo.idNumber" right-btn></ai-id>
+                    </p>-->
+                  </el-form-item>
+                  <el-form-item label="性别：" prop="sex">
+                    <el-select v-model="baseInfo.sex"
+                               placeholder="请选择"
+                               disabled
+                               clearable>
+                      <el-option
+                          v-for="(item,i) in dict.getDict('sex')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>
+                        {{dict.getLabel('sex',baseInfo.sex)||'-'}}
+                    </p>-->
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="个人照片：" prop="photo">
+                    <!-- <div class="pictrue">
+                        <img :src="imgUrl" alt="" title=""></img>
+                        <el-upload
+                            v-if="showEdit1"
+                            class="upload-demo"
+                            action
+                            multiple
+                            accept=".png,.jpg"
+                            :http-request="uploadFile"
+                            :show-file-list="false"
+                            :on-change="handleChange"
+                            :file-list="fileList"
+                            >
+                            <el-button >上传照片</el-button>
+                            <div slot="tip" class="el-upload__tip">
+                                    图片大小不能超过2M
+                    </div>
+                        </el-upload>
+                    </div>-->
+                    <ai-avatar :instance="instance" v-if="showEdit1" v-model="baseInfo.photo"/>
+                    <ai-avatar v-model="baseInfo.photo" v-else :editable="false"/>
+                    <!--<ai-avatar :instance="instance" v-model="baseInfo.photo"/>-->
+                  </el-form-item>
+                </div>
+              </div>
+              <div class="above">
+                <div class="left">
+                  <el-form-item label="出生日期：" prop="birthday">
+                    <el-date-picker
+                        v-if="showEdit1"
+                        disabled
+                        :editable="false"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        format="yyyy-MM-dd"
+                        v-model="birthday"
+                        type="date"
+
+                        placeholder="选择日期"
+                    ></el-date-picker>
+                    <!-- <p v-else>{{birthday?birthday.substring(0, 10):"-"}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="文化程度：" prop="education">
+                    <el-select
+                        v-model="baseInfo.education"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('education')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('education',baseInfo.education)||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="政治面貌：" prop="politicsStatus">
+                    <el-select
+                        v-model="baseInfo.politicsStatus"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('politicsStatus')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('politicsStatus',baseInfo.politicsStatus)||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="职业：" prop="job">
+                    <el-select
+                        v-model="baseInfo.job"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('job')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('job',baseInfo.job)||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="宗教信仰：" prop="faithType">
+                    <el-select
+                        v-model="baseInfo.faithType"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('faithType')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('faithType',baseInfo.faithType)||'-'}}</p> -->
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="年龄：" prop="age">
+                    <el-input
+                        disabled
+                        v-model="baseInfo.age"
+                        autocomplete="off"
+                        size="small"
+                        placeholder="请输入年龄"
+                        v-if="showEdit1"
+                        type="number"
+                        @mousewheel.native.prevent
+                    ></el-input>
+                    <!-- <p v-else>{{baseInfo.age}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="民族：" prop="nation">
+                    <el-select
+                        v-model="baseInfo.nation"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('nation')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('nation',baseInfo.nation)||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="婚姻状况：" prop="maritalStatus">
+                    <el-select
+                        v-model="baseInfo.maritalStatus"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('maritalStatus')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('maritalStatus',baseInfo.maritalStatus)||'-'}}</p> -->
+                  </el-form-item>
+                  <el-form-item label="兵役状况：" prop="militaryStatus">
+                    <el-select
+                        v-model="baseInfo.militaryStatus"
+                        placeholder="请选择"
+
+                        v-if="showEdit1"
+                        clearable
+                    >
+                      <el-option
+                          v-for="(item,i) in dict.getDict('militaryStatus')"
+                          :label="item.dictName"
+                          :key="i"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                    <!-- <p v-else>{{dict.getLabel('militaryStatus',baseInfo.militaryStatus)||'-'}}</p> -->
+                  </el-form-item>
+                </div>
+              </div>
+              <div class="areaList">
+                <el-form-item label="籍贯：" prop=" birthplaceAreaId">
+                  <ai-area-select
+                      clearable
+                      always-show
+                      :instance="instance"
+                      v-if="showEdit1"
+                      v-model="baseInfo.birthplaceAreaId"
+                      :areaLevel="3"
+                  ></ai-area-select>
+                  <!-- <p v-if="!showEdit1">{{baseInfo.birthplaceAreaName||'-'}}</p> -->
+                </el-form-item>
+              </div>
+            </div>
+            <div slot="content" v-else>
+              <el-row type="flex">
+                <div class="detail-info fill">
+                  <h3 class="name">{{ baseInfo.name || '-' }}</h3>
+                  <div class="detail-left fill">
+                    <div class="info">
+                      <span class="label">性别：</span>
+                      <span class="value">{{ dict.getLabel('sex', baseInfo.sex) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">出生日期：</span>
+                      <span class="value">{{ birthday ? birthday.substring(0, 10) : '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">籍贯：</span>
+                      <span class="value">{{ baseInfo.birthplaceAreaName || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">文化程度：</span>
+                      <span class="value">{{ dict.getLabel('education', baseInfo.education) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">政治面貌：</span>
+                      <span
+                          class="value"
+                      >{{ dict.getLabel('politicsStatus', baseInfo.politicsStatus) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">宗教信仰：</span>
+                      <span class="value">{{ dict.getLabel('faithType', baseInfo.faithType) || '-' }}</span>
+                    </div>
+                  </div>
+                  <div class="detail-right fill">
+                    <div class="info">
+                      <span class="label">身份证号：</span>
+                      <span class="value">
+                        <ai-id mode="show" v-model="baseInfo.idNumber" right-btn class="line-center"></ai-id>
+                      </span>
+                    </div>
+                    <div class="info">
+                      <span class="label">年龄：</span>
+                      <span class="value">{{ baseInfo.age }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">民族：</span>
+                      <span class="value">{{ dict.getLabel('nation', baseInfo.nation) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">婚姻状况：</span>
+                      <span
+                          class="value"
+                      >{{ dict.getLabel('maritalStatus', baseInfo.maritalStatus) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">兵役状况：</span>
+                      <span
+                          class="value"
+                      >{{ dict.getLabel('militaryStatus', baseInfo.militaryStatus) || '-' }}</span>
+                    </div>
+                    <div class="info">
+                      <span class="label">职业：</span>
+                      <span class="value">{{ dict.getLabel('job', baseInfo.job) || '-' }}</span>
+                    </div>
+                  </div>
+                </div>
+                <ai-avatar v-model="baseInfo.photo" :editable="false"/>
+              </el-row>
+            </div>
+          </ai-card>
+          <ai-card title="联络信息">
+            <template v-if="showDetail" #right>
+              <template v-if="$permissions('app_appresident_edit')">
+                <el-button
+                    type="text"
+                    class="iconfont iconEdit"
+                    @click="editInit(),showEdit2=true;"
+                    v-if="!showEdit2">
+                  修改
+                </el-button>
+              </template>
+              <el-button
+                  type="text"
+                  @click="showEdit2=false,searchDetail(baseInfo.id)"
+                  v-if="showEdit2">
+                取消
+              </el-button>
+              <el-button type="text" v-if="showEdit2" @click="saveFrom('ruleForm')">保存</el-button>
+            </template>
+            <div slot="content" v-if="showEdit2">
+              <div class="above">
+                <div class="left">
+                  <el-form-item label="联系方式：" prop="phone">
+                    <el-input v-model="baseInfo.phone" size="small" placeholder="请输入联系方式" v-if="showEdit2"
+                              :maxlength="11"/>
+                  </el-form-item>
+                </div>
+              </div>
+              <el-form-item label="现住址：" prop="currentAreaId">
+                <ai-area-select clearable always-show :instance="instance" :disabled-level="disabledLevel" v-model="baseInfo.currentAreaId"
+                                :valueLevel="4"/>
+                <el-form-item>
+                  <el-input v-model="baseInfo.currentAddress" placeholder="详细地址" clearable/>
+                </el-form-item>
+              </el-form-item>
+            </div>
+            <div slot="content" v-else style="margin-top: 16px;margin-bottom:24px">
+              <div class="info" style="margin-bottom:8px">
+                <span class="label">联系方式：</span>
+                <span class="value">{{ baseInfo.phone || '-' }}</span>
+              </div>
+              <div class="info">
+                <span class="label">现住址：</span>
+                <span class="value">{{ baseInfo.currentAreaName + baseInfo.currentAddress || "-" }}</span>
+              </div>
+            </div>
+          </ai-card>
+          <ai-card title="户籍信息">
+            <template v-if="showDetail" #right>
+              <template v-if="$permissions('app_appresident_edit')">
+                <el-button
+                    type="text"
+                    class="iconfont iconEdit"
+                    @click="editInit(),showEdit3=true;"
+                    v-if="!showEdit3"
+                >&nbsp;修改
+                </el-button>
+              </template>
+              <el-button
+                  type="text"
+                  @click="showEdit3=false,searchDetail(baseInfo.id)"
+                  v-if="showEdit3"
+              >取消
+              </el-button>
+              <el-button type="text" v-if="showEdit3" @click="saveFrom('ruleForm')">保存</el-button>
+            </template>
+            <div slot="content" v-if="showEdit3">
+              <div class="above">
+                <div class="left">
+                  <el-form-item label="是否户主：" prop="householdName">
+                    <el-select v-model="baseInfo.householdName" placeholder="请选择"
+                               @change="householdRelationChange" clearable>
+                      <el-option v-for="(item,i) in dict.getDict('householdName')"
+                                 :label="item.dictName" :key="i" :value="item.dictValue"/>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="与户主关系：" prop="householdRelation" v-if="baseInfo.householdName==0">
+                    <el-select v-model="baseInfo.householdRelation" placeholder="请选择" v-if="showEdit3" clearable>
+                      <el-option v-for="(item,i) in dict.getDict('householdRelation')"
+                                 :label="item.dictName" :key="i" :value="item.dictValue"/>
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="户主身份证号：" prop="householdIdNumber" v-if="baseInfo.householdName==0">
+                    <el-input v-model="baseInfo.householdIdNumber" placeholder="请输入户主身份证号" :maxlength="18" clearable/>
+                  </el-form-item>
+                </div>
+              </div>
+              <el-form-item label="户籍地：" prop="householdAreaId">
+                <ai-area-select clearable always-show :instance="instance" v-if="showEdit3"
+                                v-model="baseInfo.householdAreaId" :valueLevel="4"/>
+                <el-form-item v-if="baseInfo.householdAreaId">
+                  <el-input v-model="baseInfo.householdAddress" placeholder="详细地址" clearable/>
+                </el-form-item>
+              </el-form-item>
+            </div>
+            <div slot="content" v-else style="margin-top: 16px;margin-bottom:24px">
+              <div class="detail-info">
+                <div class="detail-left fill">
+                  <div class="info">
+                    <span class="label">是否户主：</span>
+                    <span class="value">{{ dict.getLabel('householdName', baseInfo.householdName) || '-' }}</span>
+                  </div>
+                </div>
+                <div class="info fill" v-if="baseInfo.householdName==0">
+                  <span class="label">与户主关系：</span>
+                  <span class="value">{{ dict.getLabel('householdRelation', baseInfo.householdRelation) || '-' }}</span>
+                </div>
+                <div class="info fill" v-if="baseInfo.householdName==0">
+                  <span class="label">户主身份证号：</span>
+                  <span class="value">
+                        <ai-id mode="show" v-model="baseInfo.householdIdNumber" right-btn></ai-id>
+                      </span>
+                </div>
+              </div>
+              <div class="detail-info-p info">
+                <span class="label">户籍地：</span>
+                <span class="value">
+                  {{ baseInfo.householdAreaName + (baseInfo.householdAddress ? baseInfo.householdAddress : "") }}
+                </span>
+              </div>
+            </div>
+          </ai-card>
+          <ai-card title="家庭成员" v-if="showDetail">
+            <div slot="content" v-if="showDetail">
+              <el-table
+                  border
+                  ref="multipleTable"
+                  :data="family"
+                  style="margin-top:8px;"
+
+                  header-cell-class-name="table-header"
+                  tooltip-effect="light"
+                  row-class-name="table-row"
+                  cell-class-name="table-cell"
+              >
+                <el-table-column align="center" prop="name" label="与户主关系">
+                  <template slot-scope="scope">
+                      <span>{{
+                          scope.row.householdRelation ? dict.getLabel('householdRelation', scope.row.householdRelation) : "户主"
+                        }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="idNumber" label="性别" align="center" show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <span>{{ parseInt(scope.row.idNumber.substr(16, 1)) % 2 == 1 ? '男' : '女' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="age" label="年龄" align="center" show-overflow-tooltip></el-table-column>
+                <el-table-column
+                    prop="idNumber"
+                    label="身份证号"
+                    align="center"
+                    width="200"
+                    show-overflow-tooltip>
+                  <template slot-scope="{row}">
+                    <ai-id mode="show" v-model="row.idNumber" :showEyes="false"/>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="address" label="操作" align="center" show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <el-button icon="iconfont iconShow" title="查看详情" class="dict-list-operation"
+                               @click="showFamily(scope.row)" type="text"/>
+                  </template>
+                </el-table-column>
+                <div slot="empty" class="no-data" style="height:160px;"/>
+              </el-table>
+            </div>
+          </ai-card>
+        </el-form>
+      </template>
+      <template v-if="!showDetail" #footer>
+        <el-button @click="cancelFn()">取消</el-button>
+        <el-button type="primary" @click="saveFrom('ruleForm','goBack')">保存</el-button>
+      </template>
+    </ai-detail>
+    <el-dialog class="deleteStyle" :visible.sync="familyDialog" width="720px" title="家庭成员信息" top="30vh">
+      <el-row type="flex" justify="space-between">
+        <ul>
+          <li>
+            <span>姓名：</span>
+            <p>{{ familyInfo.name }}</p>
+          </li>
+          <li>
+            <span>身份证号：</span>
+            <p>
+              <ai-id mode="show" v-model="familyInfo.idNumber" right-btn class="line-center"></ai-id>
+            </p>
+          </li>
+          <li>
+            <span>性别：</span>
+            <p>{{ dict.getLabel('sex', familyInfo.sex) }}</p>
+          </li>
+          <li>
+            <span>年龄：</span>
+            <p>{{ familyInfo.age }}</p>
+          </li>
+          <li>
+            <span>联系方式：</span>
+            <p>{{ familyInfo.phone }}</p>
+          </li>
+          <li>
+            <span>民族：</span>
+            <p>{{ dict.getLabel('nation', familyInfo.nation) }}</p>
+          </li>
+          <li>
+            <span>籍贯：</span>
+            <p>{{ familyInfo.birthplaceAreaName }}</p>
+          </li>
+          <li>
+            <span>文化程度：</span>
+            <p>{{ dict.getLabel('education', familyInfo.education) }}</p>
+          </li>
+          <li>
+            <span>婚姻状况：</span>
+            <p>{{ dict.getLabel('maritalStatus', familyInfo.maritalStatus) }}</p>
+          </li>
+          <li>
+            <span>政治面貌：</span>
+            <p>{{ dict.getLabel('politicsStatus', familyInfo.politicsStatus) }}</p>
+          </li>
+          <li>
+            <span>兵役状况：</span>
+            <p>{{ dict.getLabel('militaryStatus', familyInfo.militaryStatus) }}</p>
+          </li>
+          <li>
+            <span>宗教信仰：</span>
+            <p>{{ dict.getLabel('faithType', familyInfo.faithType) }}</p>
+          </li>
+          <li>
+            <span>职业：</span>
+            <p>{{ dict.getLabel('job', familyInfo.job) }}</p>
+          </li>
+          <li style="width:100%;">
+            <span>现住址：</span>
+            <p>{{ familyInfo.currentAreaName + familyInfo.currentAddress }}</p>
+          </li>
+        </ul>
+        <div class="img_block">
+          <ai-avatar v-model="familyInfo.imgUrl" :editable="false"/>
+        </div>
+      </el-row>
+      <div slot="footer" style="text-align: center;">
+        <el-button style="width:92px" size="small" @click="familyDialog = false">关闭</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="档案注销"
+               class="deleteStyle"
+               :visible.sync="writeoffDialog"
+               width="700px" top="25vh"
+               @close="familyInit()"
+               :close-on-click-modal="false">
+      <el-form :model="writeInfo" ref="writeInfo" label-width="100px" size="small">
+        <el-form-item label="姓名：">{{ baseInfo.name }}</el-form-item>
+        <el-form-item label="身份证号：">
+          <ai-id mode="show" v-model="baseInfo.idNumber" right-btn/>
+        </el-form-item>
+        <el-form-item label="注销原因：" prop="logoutReason" autocomplete="off"
+                      :rules="{required: true, message: '注销原因不能为空', trigger: 'change'}">
+          <el-select v-model="writeInfo.logoutReason" placeholder="请选择">
+            <el-option v-for="(item,i) in dict.getDict('logoutReason')"
+                       :label="item.dictName"
+                       :key="i" :value="item.dictValue"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="操作说明：" prop="logoutDescription" :rules="{ required: true, message: '操作说明不能为空'}">
+          <el-input type="textarea" v-model="writeInfo.logoutDescription" :rows="4"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" style="text-align: center;">
+        <el-button
+            style="width:92px"
+            size="small"
+            class="delete-btn"
+            @click="writeoffDialog=false,$refs.writeInfo.resetFields();"
+        >取消
+        </el-button>
+        <el-button
+            style="width:92px"
+            size="small"
+            type="primary"
+            @click="submitForm('writeInfo')"
+        >确认
+        </el-button>
+      </div>
+    </el-dialog>
+  </section>
+</template>
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "mobileResident",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    detail: Object,
+  },
+  data() {
+    let IdNumberPass = (rule, value, callback) => {
+      if (value) {
+        if (this.idCardNoUtil.checkIdCardNo(value)) {
+          callback();
+        } else {
+          callback(new Error("身份证号格式错误"));
+        }
+      } else {
+        callback(new Error("请输入身份证号"));
+      }
+    };
+    return {
+      buildingCascader: true,
+      houseCascader: true,
+      navId: 0,
+      baseInfo: {
+        registerStatus: "",
+        tips: [],
+        age: "",
+        birthplaceAreaId: "",
+        currentAddress: "",
+        currentAreaId: "",
+        education: "",
+        faithType: "",
+        fileStatus: "",
+        householdAddress: "",
+        householdAreaId: "",
+        householdIdNumber: "",
+        householdName: "",
+        householdRelation: "",
+        id: "",
+        idNumber: "",
+        job: "",
+        logoutDescription: "",
+        logoutReason: "",
+        logoutTime: "",
+        logoutUserId: "",
+        maritalStatus: "",
+        militaryStatus: "",
+        name: "",
+        nation: "",
+        phone: "",
+        photo: "",
+        politicsStatus: "",
+        sex: ""
+      },
+      family: [],
+      familyDialog: false,
+      familyInfo: {},
+      writeoffDialog: false,
+      writeInfo: {
+        id: "",
+        logoutReason: "",
+        logoutDescription: "",
+        fileStatus: "1"
+      },
+      disabledLevel: 0,
+      birthday: "",
+      rules: {
+        name: [{required: true, message: "请输入姓名", trigger: "blur"}],
+        idNumber: [
+          {required: true, validator: IdNumberPass, trigger: "blur"}
+        ],
+        sex: [{required: true, message: "请选择性别", trigger: "blur"}],
+        currentAreaId: [{message: "请选择现住址", required: true, trigger: "blur"},
+          {
+            validator: (r, v, cb) => {
+              if (/.+0{3}$/.test(v)) {
+                cb("现住址必须选到村级")
+              } else cb()
+            }, trigger: "blur"
+          }],
+        currentAddress: [{message: "请选择现住址详细地址", required: true}],
+        householdAreaId: [
+          {message: "户籍地必须选到村级", required: true, trigger: "blur"},
+          {
+            validator: (r, v, cb) => {
+              if (/.+0{3}$/.test(v)) {
+                cb("户籍地必须选到村级")
+              } else cb()
+            }, trigger: "blur"
+          }
+        ],
+        householdName: [
+          {required: true, message: "请选择是否户主", trigger: "change"}
+        ],
+        householdRelation: [
+          {required: true, message: "请选择与户主关系", trigger: "change"}
+        ],
+        householdIdNumber: [
+          {required: true, validator: IdNumberPass, trigger: "blur"}
+        ],
+        householdAddress: [
+          {required: true, message: "请选择户籍地详细地址", trigger: "blur"}
+        ]
+      },
+      imgUrl: "",
+      fileList: [],
+      showEdit1: false,
+      showEdit2: false,
+      showEdit3: false,
+      showEdit4: false,
+    };
+  },
+  computed: {
+    ...mapState(["user"]),
+    showDetail() {
+      return !!this.$route.query?.id
+    },
+    navList() {
+      return [
+        {name: "流动人口信息", id: "1"},
+        {name: "变更记录", id: "2"}
+      ]
+    },
+    tipOps() {
+      return this.dict.getDict("residentTipType") || []
+    }
+  },
+  methods: {
+    uploadFile(file) {
+      const isLt2M = file.file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        this.$message.warning("头像大小不能超过 2MB!");
+        return;
+      }
+      let formData = new FormData();
+      formData.append("file", file.file);
+      this.instance.post(`/admin/file/add`, formData, {withCredentials: false})
+      .then(res => {
+        if (res && res.code == 0) {
+          let imgInfo = res.data[0].split(";");
+          this.imgUrl = imgInfo[0];
+          this.baseInfo.photo = res.data[0];
+        }
+      });
+    },
+    handleChange(file, fileList) {
+      this.fileList = fileList;
+    },
+    householdRelationChange() {
+      this.baseInfo.householdIdNumber = "";
+      this.baseInfo.householdRelation = "";
+    },
+    saveFrom(formName, type) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.saveFromFn(type);
+        }
+      });
+    },
+    cancelFn() {
+      this.$refs.ruleForm?.resetFields()
+      this.$router.push({query: {}});
+    },
+    submitForm(formName) {
+      this.writeInfo.id = this.baseInfo.id;
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.instance.post(`/app/appresident/addOrUpdate`, {
+            ...this.writeInfo
+          }).then(res => {
+            if (res && res.code == 0) {
+              this.$message.success("注销成功");
+              this.writeoffDialog = false;
+              this.$router.push({query: {}});
+            }
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    familyInit() {
+      Object.keys(this.writeInfo).forEach(e => {
+        this.writeInfo[e] = "";
+      });
+      this.$refs.writeInfo.resetFields();
+    },
+    saveFromFn(type) {
+      let {currentHouseList, householdHouseList, tips} = this.baseInfo
+      this.instance.post(`/app/appresident/addOrUpdate`, {
+        residentType: this.$route.query.type,
+        ...this.baseInfo,
+        currentHouseList: currentHouseList?.join("|"),
+        householdHouseList: householdHouseList?.join("|"),
+        tips: tips?.join("|"),
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$message.success("保存成功");
+          if (type) {
+            this.$router.push({query: {}})
+          } else {
+            this.editInit();
+          }
+        }
+      });
+    },
+    editInit() {
+      this.showEdit1 = false;
+      this.showEdit2 = false;
+      this.showEdit3 = false;
+      this.showEdit4 = false;
+      this.searchDetail(this.baseInfo.id);
+    },
+    searchDetail(id, type) {
+      this.instance.post(`/app/appresident/detail`, null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          let {currentHouseList, householdHouseList, tips} = res.data.resident
+          this.baseInfo = {
+            ...res.data.resident,
+            currentHouseList: currentHouseList?.split("|"),
+            householdHouseList: householdHouseList?.split("|"),
+            tips: tips ? tips.split("|") : [],
+          };
+          this.family = res.data.family;
+          this.IdCard(this.baseInfo.idNumber);
+          if (type == "family") {
+            this.familyDialog = false;
+          }
+        }
+      });
+    },
+    showFamily(row) {
+      this.familyInfo = row;
+      if (this.familyInfo.photo) {
+        this.familyInfo.imgUrl = this.familyInfo.photo.split(";")[0];
+      } else {
+        this.familyInfo.imgUrl = "";
+      }
+      this.familyDialog = true;
+    },
+    beforeWriteOff() {
+      this.writeoffDialog = true;
+    },
+    handleDelete() {
+      this.$confirm("删掉档案后，\n" +
+          `<span class="username">${this.baseInfo.name}</span>` +
+          "        的历史相关信息可能无法追溯查看，是否确定删除该人员档案？", {
+        title: "档案删除"
+      }).then(() => {
+        this.instance.post(`/app/appresident/delete?ids=${this.baseInfo.id}`).then(res => {
+          if (res && res.code == 0) {
+            this.$message.success("删除成功");
+            this.$router.push({query: {}});
+          }
+        });
+      }).catch(() => 0)
+    },
+    idChange(val) {
+      if (val.length == 18) {
+        this.IdCard(val);
+      }
+    },
+    IdCard(UUserCard) {
+      if (UUserCard) {
+        let arr = [];
+        //获取出生日期
+        let birth =
+            UUserCard.substring(6, 10) +
+            "-" +
+            UUserCard.substring(10, 12) +
+            "-" +
+            UUserCard.substring(12, 14) +
+            " 00:00:00";
+        arr.push(birth);
+
+        if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
+          //男
+          arr.push("1");
+        } else {
+          //女
+          arr.push("0");
+        }
+        //获取年龄
+        const myDate = new Date();
+        const month = myDate.getMonth() + 1;
+        const day = myDate.getDate();
+        let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
+        if (
+            UUserCard.substring(10, 12) < month ||
+            (UUserCard.substring(10, 12) == month &&
+                UUserCard.substring(12, 14) <= day)
+        ) {
+          age++;
+        }
+        arr.push(age);
+        this.baseInfo.sex = arr[1];
+        this.baseInfo.age = arr[2];
+        this.birthday = arr[0];
+      }
+    }
+  },
+  created() {
+    this.disabledLevel = this.user.info.areaMap[this.user.info.areaId].length;
+    if (!this.showDetail) {
+      this.showEdit1 = true;
+      this.showEdit2 = true;
+      this.showEdit3 = true;
+      this.showEdit4 = true;
+      this.baseInfo.householdAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
+      this.baseInfo.currentAreaId = JSON.parse(JSON.stringify(this.user.info.areaId))
+      this.$nextTick(() => this.$refs.ruleForm?.resetFields())
+    } else {
+      this.searchDetail(this.$route.query.id);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.mobileResident {
+  height: 100%;
+  font-size: 14px;
+
+  .el-form-item {
+    margin-bottom: 10px;
+
+    .el-form-item {
+      margin-top: 10px;
+    }
+
+    .el-cascader, .el-select, .el-date-editor {
+      width: 100%;
+    }
+  }
+
+  ::v-deep .el-form-item__error {
+    position: static;
+  }
+
+  ::v-deep .content-right {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-bottom: 80px;
+
+    .ailist-title {
+      padding: 0;
+    }
+
+    .above {
+      width: 100%;
+      overflow: hidden;
+
+      .left {
+        width: 380px;
+        float: left;
+      }
+
+      .right {
+        width: 380px;
+        float: left;
+
+        .pictrue {
+          display: flex;
+          height: 120px;
+
+          img {
+            width: 104px;
+            height: 120px;
+            border-radius: 2px;
+            border: solid 1px #d0d4dc;
+          }
+
+          .upload-demo {
+            padding: 0 15px;
+          }
+
+          .el-button {
+            width: 104px;
+            height: 32px;
+            background-color: #ffffff;
+            border-radius: 2px;
+            border: solid 1px #8899bb;
+          }
+        }
+      }
+    }
+  }
+
+  ul {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+      min-height: 32px;
+      width: 50%;
+
+      span {
+        flex-shrink: 0;
+      }
+
+      p {
+        margin: 0
+      }
+    }
+  }
+
+  .img_block {
+    flex-shrink: 0;
+  }
+
+  .detail-info {
+    display: flex;
+    flex-wrap: wrap;
+
+    h3 {
+      width: 100%;
+      flex-shrink: 0
+    }
+
+  }
+
+  .info {
+    display: flex;
+    align-items: center;
+    line-height: 1.4;
+    margin-bottom: 16px;
+
+    .label {
+      flex-shrink: 0;
+      width: 100px;
+      margin-right: 40px;
+      text-align: right;
+      color: #888;
+      font-size: 14px;
+    }
+
+    .value {
+      color: #222;
+      font-size: 14px;
+      word-break: break-all;
+    }
+  }
+
+  .fill {
+    flex: 1;
+    min-width: 50%;
+  }
+
+  .el-checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    .el-checkbox {
+      margin: 0 !important;
+      display: flex;
+      align-items: center;
+
+      ::v-deep .el-checkbox__label {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .tags {
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/project/sass/apps/AppResident/residentSta.vue b/project/sass/apps/AppResident/residentSta.vue
new file mode 100644
index 00000000..3de0971a
--- /dev/null
+++ b/project/sass/apps/AppResident/residentSta.vue
@@ -0,0 +1,445 @@
+<template>
+  <section class="residentSta">
+    <div class="dataStatistic">
+      <div class="above">
+        <div class="data-item">
+          <div id="LocalResident" v-if="showStatis"/>
+          <ai-empty v-else/>
+          <h5 v-if="LocalResidentData">
+            更新时间:{{ statisticData.更新时间 }}
+          </h5>
+        </div>
+        <div class="data-item" style="width:66%;">
+          <div id="ResidentDistribution" v-if="showStatis"/>
+          <ai-empty v-else/>
+        </div>
+      </div>
+      <div class="above" style="margin-top:24px;">
+        <div class="data-item">
+          <div id="SexRatio" v-if="showStatis"/>
+          <ai-empty v-else/>
+          <div rightTop><i v-html="'有效数据:'"/> {{ LocalResidentData }}</div>
+        </div>
+        <div class="data-item">
+          <div id="MaritalSta" v-if="showStatis"/>
+          <ai-empty v-else/>
+          <div rightTop><i v-html="'有效数据:'"/>{{ LocalResidentData }}</div>
+        </div>
+        <div class="data-item">
+          <div id="AgeDistribution" v-if="showStatis"/>
+          <ai-empty v-else/>
+          <div rightTop><i v-html="'有效数据:'"/>{{ LocalResidentData }}</div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: "residentSta",
+  inject: ['resident'],
+  props: {
+    areaId: String
+  },
+  computed: {
+    LocalResidentData() {
+      return this.statisticData?.总人数 || 0
+    },
+    AgeDistributionData() {
+      return this.statisticData?.年龄层次 || []
+    },
+    MaritalStaData() {
+      return this.statisticData?.婚姻状况 || []
+    },
+    SexRatioData() {
+      return this.statisticData?.男女比例 || []
+    },
+    ResidentDistributionData() {
+      return this.statisticData?.人口分布 || []
+    }
+  },
+  data() {
+    return {
+      statisticData: {},
+      showStatis: true,
+    }
+  },
+  watch: {
+    areaId(v) {
+      v && this.getStaData()
+    }
+  },
+  methods: {
+    getStaData() {
+      this.resident.instance.post(`/app/appresident/queryCustInfoByAreaId`, null, {
+        params: {
+          areaId: this.areaId
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.statisticData = res.data;
+          this.showStatis = this.LocalResidentData > 0;
+          this.showLocalResident();
+          this.showSexRatio();
+          this.showAgeDistribution();
+          this.showResidentDistribution();
+          this.showMaritalSta();
+        }
+      })
+    },
+    showAgeDistribution() {
+      //年龄分布
+      let myChart = echarts.init(document.getElementById("AgeDistribution"));
+      if (!this.showStatis) {
+        return myChart.dispose();
+      }
+      myChart.setOption({
+        title: {
+          text: "年龄层次统计",
+          subtext: "",
+          x: "left"
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          bottom: "bottom",
+          data: this.AgeDistributionData.map(e => e.v1)
+        },
+        series: [
+          {
+            name: "年龄层次统计",
+            type: "pie",
+            radius: ["40%", "55%"],
+            center: ["50%", "50%"],
+            data: this.AgeDistributionData.map(e => ({value: e.v2 * 1, name: e.v1})),
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              },
+              normal: {
+                color: function (params) {
+                  //自定义颜色
+                  var colorList = [
+                    "#FB3C3C",
+                    "#fc5947",
+                    "#81E84F",
+                    "#3C76FF",
+                    "#6995FF",
+                    "#FFD500",
+                    "#FEF517",
+                    "#B1E598",
+                    "#81E84F",
+                    "#B1E598",
+                    "#FEBB8E"
+                  ];
+                  return colorList[params.dataIndex];
+                }
+              }
+            }
+          }
+        ]
+      });
+    },
+    showLocalResident() {
+      //本地居民
+      let myChart = echarts.init(document.getElementById("LocalResident"));
+      if (!this.showStatis) {
+        return myChart.dispose();
+      }
+      let option = {
+        title: {
+          text: "本地居民",
+          subtext: "",
+          x: "left"
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)"
+        },
+        series: [
+          {
+            name: "本地居民",
+            type: "pie",
+            radius: ["50%", "65%"],
+            avoidLabelOverlap: false,
+            label: {
+              normal: {
+                show: true,
+                position: "center",
+                textStyle: {
+                  fontSize: "40",
+                  fontWeight: "normal",
+                  color: "#333333"
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: "40",
+                  fontWeight: "normal",
+                  color: "#333333"
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [{value: this.LocalResidentData, name: this.LocalResidentData}],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              },
+              normal: {
+                color: function (params) {
+                  //自定义颜色
+                  var colorList = ["#5088FF"];
+                  return colorList[params.dataIndex];
+                }
+              }
+            }
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    showMaritalSta() {
+      //婚姻状况
+      let myChart = echarts.init(document.getElementById("MaritalSta"));
+      if (!this.showStatis) {
+        return myChart.dispose();
+      }
+      let option = {
+        color: [
+          "#FB3C3C",
+          "#FC5947",
+          "#FE8B3F",
+          "#3C76FF",
+          "#6995FF",
+          "#FFD500",
+          "#FEF517",
+          "#B1E598",
+          "#81E84F",
+          "#B1E598",
+          "#FEBB8E"
+        ],
+        backgroundColor: "#FFFFFF",
+        title: {
+          text: "婚姻状况统计",
+          x: "left"
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          bottom: "bottom",
+          width: "auto",
+          height: 50,
+          data: this.MaritalStaData.map(e => e.v1)
+        },
+        series: [
+          {
+            name: "婚姻状况",
+            type: "pie",
+            radius: ["40%", "55%"],
+            center: ["50%", "50%"],
+            data: this.MaritalStaData.map(e => ({value: e.v2 * 1, name: e.v1})),
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    showResidentDistribution() {
+      //人口分布/居民分布
+      let myChart = echarts.init(document.getElementById("ResidentDistribution"));
+      if (!this.showStatis) {
+        return myChart.dispose();
+      }
+      let option = {
+        title: {
+          text: "人口分布统计",
+          subtext: "",
+          x: "left"
+        },
+        color: ["#5088FF"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: "{a} <br/>{b} : {c} "
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.ResidentDistributionData.map(e => e.name),
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: "value"
+          }
+        ],
+        dataZoom: [
+          {
+            id: "dataZoomX",
+            type: "slider",
+            xAxisIndex: [0],
+            filterMode: "filter"
+          }
+        ],
+        series: [
+          {
+            name: "人口数量",
+            type: "bar",
+            barWidth: "16",
+            data: this.ResidentDistributionData.map(e => e.v1)
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    showSexRatio() {
+      //男女比例
+      let myChart = echarts.init(document.getElementById("SexRatio"));
+      if (!this.showStatis) {
+        return myChart.dispose();
+      }
+      myChart.setOption({
+        title: {
+          text: "男女比例统计",
+          subtext: "",
+          x: "left"
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          bottom: "bottom",
+          data: this.SexRatioData.map(e => e.v1)
+        },
+        series: [
+          {
+            name: "男女比例",
+            type: "pie",
+            radius: ["40%", "55%"],
+            center: ["50%", "50%"],
+            data: this.SexRatioData.map(e => ({value: e.v2 * 1, name: e.v1})),
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              },
+              normal: {
+                color: function (params) {
+                  //自定义颜色
+                  let colorList = [
+                    "#FB3C3C",
+                    "#3C76FF",
+                    "#3C76FF",
+                    "#FC5947",
+                    "#6995FF",
+                    "#FB3C3C",
+                    "#FE8B3F",
+                    "#B1E598",
+                    "#81E84F",
+                    "#FEBB8E"
+                  ];
+                  return colorList[params.dataIndex];
+                }
+              }
+            }
+          }
+        ]
+      });
+    },
+  },
+  created() {
+    this.getStaData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.residentSta {
+  height: 100%;
+
+  .dataStatistic {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    padding: 16px 0;
+    box-sizing: border-box;
+
+    .above {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .data-item {
+        width: 32%;
+        height: 380px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 4px;
+        padding: 16px;
+        box-sizing: border-box;
+        position: relative;
+
+        div[rightTop] {
+          position: absolute;
+          right: 16px;
+          top: 16px;
+          font-size: 14px;
+          font-weight: bold;
+          color: #333;
+
+          & > i {
+            font-style: normal;
+            color: #999;
+          }
+        }
+
+        & > h5 {
+          width: 100%;
+          color: #999;
+          text-align: center;
+          position: absolute;
+          bottom: 0;
+        }
+      }
+    }
+  }
+
+  #LocalResident, #MaritalSta, #ResidentDistribution, #SexRatio, #AgeDistribution {
+    width: 100%;
+    height: 95%
+  }
+}
+</style>
diff --git a/project/sass/apps/AppReturnHomeRegister/components/Detail.vue b/project/sass/apps/AppReturnHomeRegister/components/Detail.vue
index 36a60293..d2f34f0f 100644
--- a/project/sass/apps/AppReturnHomeRegister/components/Detail.vue
+++ b/project/sass/apps/AppReturnHomeRegister/components/Detail.vue
@@ -84,7 +84,9 @@
               <ai-info-item label="填报时间" :value="info.createTime"></ai-info-item>
               <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
               <ai-info-item label="手机号码" :value="info.phone"></ai-info-item>
-              <ai-info-item label="人员类别" isLine :value="dict.getLabel('epidemicMemberType', info.type)"></ai-info-item>
+              <ai-info-item label="人员类别" isLine>
+                <span :style="info.type == 0 ? 'color:#42D784;' : 'color:#f46;'">{{dict.getLabel('epidemicMemberType', info.type)}}</span>
+              </ai-info-item>
               <ai-info-item label="异常状况" isLine>
                 <span :style="{color: info.unusual ? 'red' : '#333'}">{{ info.unusual || '-' }}</span>
               </ai-info-item>
diff --git a/project/sass/apps/AppReturnHomeRegister/components/List.vue b/project/sass/apps/AppReturnHomeRegister/components/List.vue
index cdac14e0..e67378e8 100644
--- a/project/sass/apps/AppReturnHomeRegister/components/List.vue
+++ b/project/sass/apps/AppReturnHomeRegister/components/List.vue
@@ -157,7 +157,7 @@
 
     created () {
       this.disabledLevel = this.user.info.areaList.length - 1
-      this.search.arriveAreaId = this.user.info.areaId
+      // this.search.arriveAreaId = this.user.info.areaId
       this.loading = true
       this.dict.load(['marriageType', 'marriagePersonType', 'modeType']).then(() => {
         this.getList()