From aecc216dc1ada1b36fe8ccb623f2274393907c8e Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 16 Feb 2022 15:04:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=85=E6=B0=91=E5=AE=A1=E6=A0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/shandong/AppResident/AppResident.vue |  195 +++
 packages/shandong/AppResident/auditList.vue   |  212 ++++
 packages/shandong/AppResident/audtiDetail.vue |  639 ++++++++++
 packages/shandong/AppResident/listTpl.vue     |  352 ++++++
 .../shandong/AppResident/localResident.vue    | 1123 +++++++++++++++++
 .../shandong/AppResident/mobileResident.vue   | 1116 ++++++++++++++++
 packages/shandong/AppResident/residentSta.vue |  445 +++++++
 7 files changed, 4082 insertions(+)
 create mode 100644 packages/shandong/AppResident/AppResident.vue
 create mode 100644 packages/shandong/AppResident/auditList.vue
 create mode 100644 packages/shandong/AppResident/audtiDetail.vue
 create mode 100644 packages/shandong/AppResident/listTpl.vue
 create mode 100644 packages/shandong/AppResident/localResident.vue
 create mode 100644 packages/shandong/AppResident/mobileResident.vue
 create mode 100644 packages/shandong/AppResident/residentSta.vue

diff --git a/packages/shandong/AppResident/AppResident.vue b/packages/shandong/AppResident/AppResident.vue
new file mode 100644
index 00000000..4c9d8b6e
--- /dev/null
+++ b/packages/shandong/AppResident/AppResident.vue
@@ -0,0 +1,195 @@
+<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" :instance="instance" :dict="dict" />
+          </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";
+import auditList from "./auditList";
+import auditDetail from "./audtiDetail";
+export default {
+  name: "AppResident",
+  label: "居民档案",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  provide() {
+    return {
+      resident: this
+    }
+  },
+  components: {ResidentSta, MobileResident, ListTpl, localResident, auditList, audtiDetail: auditDetail},
+  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},
+        {label: "居民档案审核", value: "4", comp: auditList, detail: auditDetail}
+      ]
+    },
+    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/packages/shandong/AppResident/auditList.vue b/packages/shandong/AppResident/auditList.vue
new file mode 100644
index 00000000..14484b5d
--- /dev/null
+++ b/packages/shandong/AppResident/auditList.vue
@@ -0,0 +1,212 @@
+<template>
+  <ai-list isTabs>
+    <template slot="content">
+      <ai-search-bar>
+        <template #left>
+          <ai-select
+            v-model="search.auditStatus"
+            clearable
+            placeholder="请选择审核状态"
+            :selectList="dict.getDict('auditStatus')"
+            @change="search.current = 1, getList()">
+          </ai-select>
+          <el-date-picker
+            value-format="yyyy-MM-dd"
+            v-model="search.createTimeStart"
+            type="date"
+            size="small"
+            unlink-panels
+            placeholder="选择开始日期"
+            @change="search.current = 1, getList()"
+          />
+          <el-date-picker
+            value-format="yyyy-MM-dd"
+            v-model="search.createTimeEnd"
+            type="date"
+            size="small"
+            unlink-panels
+            placeholder="选择结束日期"
+            @change="search.current = 1, getList()"
+          />
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.con"
+            size="small"
+            placeholder="姓名/身份证/联系方式"
+            clearable
+            @keyup.enter.native="search.current = 1, getList()"
+            @clear="search.current = 1, search.con = '', 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="options" width="160px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toAudit(row.id)" :disabled="row.auditStatus !== '0'">审批</el-button>
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+              <el-button type="text" @click="remove(row.id)" :disabled="row.auditStatus === '0'">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShow"
+        width="800px"
+        @close="onClose"
+        title="事件审核"
+        @onConfirm="onConfirm">
+        <el-form class="ai-form" label-width="120px" :model="form" ref="form">
+          <el-form-item label="是否通过审核" prop="pass" style="width: 100%;" :rules="[{ required: true, message: '请选择是否通过审核' }]">
+            <el-radio-group v-model="form.pass">
+              <el-radio label="0">否</el-radio>
+              <el-radio label="1">是</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="审核意见" prop="opinion" style="width: 100%;" :rules="[{ required: form.pass === '0' ? true : false, message: '请输入审核意见' }]">
+            <el-input type="textarea" :rows="5" :maxlength="500" v-model="form.opinion" clearable placeholder="请输入审核意见" show-word-limit></el-input>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'auditList',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      areaId: String
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          auditStatus: '',
+          con: '',
+          createTimeEnd: '',
+          createTimeStart: ''
+        },
+        isShow: false,
+        currIndex: -1,
+        areaList: [],
+        total: 10,
+        form: {
+          opinion: '',
+          pass: ''
+        },
+        id: '',
+        colConfigs: [
+          { prop: 'name', label: '申请人', align: 'left' },
+          { prop: 'createTime', label: '申请时间', align: 'center' },
+          { prop: 'sex', label: '性别', align: 'center', formart: v => this.dict.getLabel('sex', v) },
+          { prop: 'idNumber', label: '身份证号', align: 'center' },
+          { prop: 'age', label: '年龄', align: 'center' },
+          { prop: 'auditStatus', label: '审批结果', align: 'center', formart: v => this.dict.getLabel('auditStatus', v) },
+          { prop: 'auditUserName', label: '审批人', align: 'center' },
+          { prop: 'auditTime', label: '审批时间', align: 'center' }
+        ],
+        tableData: []
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    watch: {
+      areaId () {
+        this.search.current = 1
+        this.getList()
+      }
+    },
+
+    created() {
+      this.search.areaId = this.user.info.areaId
+      this.areaName = this.user.info.areaName
+
+      this.dict.load('auditStatus').then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/appresident/list`, null, {
+          params: {
+            ...this.search,
+            areaId: this.areaId
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      toAudit (id) {
+        this.id = id
+        this.isShow = true
+      },
+
+      onClose () {
+        this.form.pass = ''
+        this.form.opinion = ''
+        this.id = ''
+      },
+
+      onConfirm () {
+        this.$refs.form.validate(v => {
+          if (v) {
+            this.instance.post('/app/appresident/examine', null, {
+              params: {
+                ...this.form,
+                id: this.id
+              }
+            }).then(res => {
+              if (res?.code == 0) {
+                this.isShow = false
+                this.getList()
+                this.$message.success('审核成功!')
+              }
+            })
+          }
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appresident/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      toDetail (id) {
+        this.$router.push({query: {type: '4', id: id}})
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/shandong/AppResident/audtiDetail.vue b/packages/shandong/AppResident/audtiDetail.vue
new file mode 100644
index 00000000..e5211a21
--- /dev/null
+++ b/packages/shandong/AppResident/audtiDetail.vue
@@ -0,0 +1,639 @@
+<template>
+  <section class="addAborigines">
+    <ai-detail>
+      <ai-title slot="title" title="详情" isShowBack @onBackClick="$router.push({query:{}})" isShowBottomBorder></ai-title>
+      <template #content>
+          <ai-card title="基本信息">
+            <div slot="content">
+              <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="联络信息">
+            <div slot="content" 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="户籍信息">
+            <div slot="content" 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="家庭成员">
+            <div slot="content">
+              <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 type="text" title="查看详情" class="dict-list-operation" @click="showFamily(scope.row)">详情</el-button>
+                  </template>
+                </el-table-column>
+                <div slot="empty" class="no-data" style="height:160px;"/>
+              </el-table>
+            </div>
+          </ai-card>
+          <ai-card title="处理结果">
+            <div slot="content" 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">{{ baseInfo.auditStatus === '1' ? '通过' : '拒绝'  }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-info">
+                <div class="info fill">
+                  <span class="label">原因：</span>
+                  <span class="value">{{ baseInfo.auditOpinion }}</span>
+                </div>
+              </div>
+            </div>
+          </ai-card>
+          <ai-dialog
+            :visible.sync="isShow"
+            width="800px"
+            @close="onClose"
+            title="事件审核"
+            @onConfirm="onConfirm">
+            <el-form class="ai-form" label-width="120px" :model="form" ref="form">
+              <el-form-item label="是否通过审核" prop="pass" style="width: 100%;" :rules="[{ required: true, message: '请选择是否通过审核' }]">
+                <el-radio-group v-model="form.pass">
+                  <el-radio label="0">否</el-radio>
+                  <el-radio label="1">是</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="审核意见" prop="opinion" style="width: 100%;" :rules="[{ required: form.pass === '0' ? true : false, message: '请输入审核意见' }]">
+                <el-input type="textarea" :rows="5" :maxlength="500" v-model="form.opinion" clearable placeholder="请输入审核意见" show-word-limit></el-input>
+              </el-form-item>
+            </el-form>
+          </ai-dialog>
+      </template>
+      <template #footer >
+        <el-button @click="cancelFn()">取消</el-button>
+        <el-button type="primary" @click="isShow = true" v-if="baseInfo.auditStatus === '0'">审核</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>
+  </section>
+</template>
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "audtiDetail",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    detail: Object,
+    active: String
+  },
+  data() {
+    return {
+      buildingCascader: true,
+      houseCascader: true,
+      navId: 0,
+      form: {
+        opinion: '',
+        pass: ''
+      },
+      isShow: false,
+      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: "",
+      imgUrl: "",
+      fileList: [],
+      showEdit1: false,
+      showEdit2: false,
+      showEdit3: false,
+      showEdit4: false,
+      disabledLevel: 0
+    };
+  },
+  computed: {
+    ...mapState(["user"]),
+    showDetail() {
+      return !!this.$route.query?.id
+    },
+    tipOps() {
+      return this.dict.getDict("residentTipType") || []
+    }
+  },
+  methods: {
+    householdRelationChange() {
+      this.baseInfo.householdIdNumber = "";
+      this.baseInfo.householdRelation = "";
+    },
+
+    onConfirm () {
+      this.$refs.form.validate(v => {
+        if (v) {
+          this.instance.post('/app/appresident/examine', null, {
+            params: {
+              ...this.form,
+              id: this.$route.query.id
+            }
+          }).then(res => {
+            if (res?.code == 0) {
+              this.isShow = false
+              this.searchDetail(this.$route.query.id)
+              this.$message.success('审核成功!')
+            }
+          })
+        }
+      })
+    },
+
+    onClose () {
+      this.form.pass = ''
+      this.form.opinion = ''
+      this.id = ''
+    },
+
+    cancelFn() {
+      this.$refs.ruleForm?.resetFields()
+      this.$router.push({query: {}});
+    },
+
+    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;
+    },
+    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.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/packages/shandong/AppResident/listTpl.vue b/packages/shandong/AppResident/listTpl.vue
new file mode 100644
index 00000000..b8569198
--- /dev/null
+++ b/packages/shandong/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/packages/shandong/AppResident/localResident.vue b/packages/shandong/AppResident/localResident.vue
new file mode 100644
index 00000000..27905ac4
--- /dev/null
+++ b/packages/shandong/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/packages/shandong/AppResident/mobileResident.vue b/packages/shandong/AppResident/mobileResident.vue
new file mode 100644
index 00000000..072c409c
--- /dev/null
+++ b/packages/shandong/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/packages/shandong/AppResident/residentSta.vue b/packages/shandong/AppResident/residentSta.vue
new file mode 100644
index 00000000..3de0971a
--- /dev/null
+++ b/packages/shandong/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>