diff --git a/src/assets/scss/pages/resiAdd.scss b/src/assets/scss/pages/resiAdd.scss
new file mode 100644
index 000000000..8858ececd
--- /dev/null
+++ b/src/assets/scss/pages/resiAdd.scss
@@ -0,0 +1,55 @@
+.div_form {
+    height: 100%;
+    padding:16px;
+    .item_width_1{
+        width: 514px;
+    }
+    .form{
+        background-color: #fff;
+        padding:16px;
+    }
+}
+h5 {
+    position: relative;
+    font-size: 16px;
+    margin: 22px 0;
+    &::after {
+        content: "";
+        position: absolute;
+        display: inline-block;
+        left: -15px;
+        top: -0px;
+        width: 5px;
+        height: 16px;
+        background-color: #0056d6;
+    }
+}
+.basicInfo, .house, .expand {
+    ::v-deep .el-form-item{
+        margin-bottom: 24px;
+    }
+}
+.font-color-orange{
+    ::v-deep .el-form-item__label{
+     color:#ff5107 ;
+    }
+}
+.font-color-blue{
+    ::v-deep .el-form-item__label{
+     color:#3876f2;
+     position: relative;
+     &::before{
+        content: '*';
+        position: absolute;
+        top: 0px;
+        left: 16px;
+     }
+    }
+}
+.font-color-blue2{
+    ::v-deep .el-form-item__label{
+     &::before{
+        left: 2px;
+     }
+    }
+}
\ No newline at end of file
diff --git a/src/views/components/addResi.vue b/src/views/components/addResi.vue
index 24680bf7e..5303a5f09 100644
--- a/src/views/components/addResi.vue
+++ b/src/views/components/addResi.vue
@@ -1,68 +1,254 @@
 <template>
-    <div>
-        <h3>新增居民</h3>
+    <div class="div_form">
         <div class="form">
-            <el-form :model="form" label-width="100px">
-                <h5>选择居住房屋</h5>
-            <div class="house">
-            </div>
-            <h5>基础信息登记</h5>
-            <div class="resiInfo">
-            </div>
-            <h5>拓展信息登记</h5>
-            <div class="expand">
-            </div>
-            <h5>人员标签</h5>
-            <div class="label">
-            </div>
+            <el-form :model="form" :rules="rules" label-width="100px" ref="addForm">
+                <h5 style="margin-top: 6px;">基础信息登记</h5>
+                <div class="basicInfo">
+                    <el-row type="flex" justify="space-between">
+                        <el-col :span="6">
+                            <el-form-item label="姓名" prop="name" class="font-color-orange">
+                                <el-input class="list_item_width_1" v-model="form.name" placeholder="请输入内容" size="small"
+                                    clearable></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="证件类型" prop="idType" class="font-color-orange">
+                                <el-select v-model="form.idType" placeholder="请选择" size="small" class="list_item_width_1" clearable>
+                                    <el-option v-for="(item, index) in idTypeList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="证件号" prop="idNum" class="font-color-orange">
+                                <el-input v-model="form.idNum" placeholder="请输入内容" clearable size="small"
+                                    class="list_item_width_1"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="国籍" prop="nationality" class="font-color-orange">
+                                <el-select v-model="form.nationality" placeholder="请选择" size="small"
+                                    class="list_item_width_1" clearable>
+                                    <!-- <el-option label="男" value="男"></el-option>
+                                    <el-option label="女" value="女"></el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row type="flex" justify="space-between">
+                        <el-col :span="6">
+                            <el-form-item label="联系电话" prop="mobile" class="font-color-orange">
+                                <el-input class="list_item_width_1" v-model="form.mobile" placeholder="请输入内容" size="small"
+                                    clearable></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="性别">
+                                <el-select v-model="form.gender" placeholder="请选择" size="small" class="list_item_width_1" clearable>
+                                    <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="出生日期">
+                                <el-date-picker v-model.trim="form.birthday" class="list_item_width_1" type="date" size="small" clearable placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
+                                </el-date-picker>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="民族">
+                                <el-select v-model="form.nationality" placeholder="请选择" size="small"
+                                    class="list_item_width_1" clearable>
+                                    <!-- <el-option label="男" value="男"></el-option>
+                                    <el-option label="女" value="女"></el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row type="flex" justify="space-between">
+                        <el-col :span="6">
+                            <el-form-item label="文化程度">
+                                <el-select v-model="form.cultureLevel" placeholder="请选择" size="small"
+                                    class="list_item_width_1" clearable>
+                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="婚姻状况">
+                                <el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
+                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="籍贯">
+                                <el-input v-model="form.resideInfoDto.nativePlace" placeholder="请输入内容" clearable
+                                    size="small" class="list_item_width_1"></el-input> <el-radio
+                                    v-model="form.localResidenceFlag" style="margin-left: 10px;">本地</el-radio>
+
+
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6"></el-col>
+                    </el-row>
+                    <el-form-item label="备注">
+                        <el-input type="textarea" class="item_width_1" :rows="3" placeholder="请输入内容" v-model="form.remark" clearable>
+                        </el-input>
+                    </el-form-item>
+                </div>
+                <h5>居住信息登记</h5>
+                <div class="house">
+                    <el-row type="flex" justify="space-between">
+                        <el-col :span="24">
+                            <el-form-item label="所属房屋" prop="houseId" class="font-color-orange">
+                                <el-select v-model="form.houseId" placeholder="请选择" size="small" class="item_width_1" style="margin-right: 10px;" clearable>
+                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option> -->
+                                </el-select>
+                                <!--  v-if="scope.$index == tableData.length - 1" -->
+                                <el-button type="primary" size="mini" icon="el-icon-plus" circle></el-button>
+
+                                <!-- <el-button type="danger" v-if="scope.$index != tableData.length - 1 ||
+                                (tableData.length - 1 >= 1 && scope.$index != '0')
+                                " size="small" icon="el-icon-minus" circle>
+                            </el-button> -->
+                            </el-form-item>
+                        </el-col>
+
+                    </el-row>
+                    <el-row type="flex" justify="space-between">
+                        <el-col :span="6">
+                            <el-form-item label="人房关系" class="font-color-blue">
+                                <el-select v-model="form.cultureLevel" placeholder="请选择" size="small"
+                                    class="list_item_width_1" clearable>
+                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="人户状况" class="font-color-blue">
+                                <el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
+                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="与户主关系" class="font-color-blue font-color-blue2">
+                                <el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
+                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6"></el-col>
+                    </el-row>
+                </div>
+                <h5>拓展信息登记</h5>
+                <div class="expand">
+                    <el-row type="flex" justify="space-between">
+                        <el-col :span="6">
+                            <el-form-item label="宗教信仰">
+                                <el-select v-model="form.religionDto" placeholder="请选择" size="small"
+                                    class="list_item_width_1" clearable>
+                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="就业状态" class="font-color-blue">
+                                <el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
+                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="有无赡养人">
+                                <el-select v-model="form.marriage" placeholder="请选择" size="small" class="list_item_width_1" clearable>
+                                    <!-- <el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
+                                        :value="item.value"></el-option> -->
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6"></el-col>
+                    </el-row>
+                </div>
+                <h5>人员标签</h5>
+                <div class="stafftag">
+                    <stafftag :formType="'add'"></stafftag>
+                </div>
             </el-form>
+            <el-row style="margin:24px">
+                <el-col :span="24" align="center">
+                    <el-button size="small" class="diy-button--white" @click="handlerCancle" plain>取消</el-button>
+                    <el-button type="primary" size="small" :loading="btnLoading" @click="handleSUbmit">保存</el-button>
+                    <el-button type="primary" size="small" :loading="btnLoading"
+                        @click="handleSUbmit">提交并补充家庭人员信息</el-button>
+                </el-col>
+            </el-row>
         </div>
     </div>
 </template>
-
 <script>
+import { idTypeList, genderList } from "@/js/columns/constants";
+import stafftag from "../modules/portrayal/jumin/cpts/staffTag.vue";
 export default {
     data() {
         return {
-            form: {},
-            result:{
-
+            form: {
+                name: '',
+                resideInfoDto: {
+                    nativePlace: '',
+                },
+                localResidenceFlag: false,
+            },
+            result: {},
+            idTypeList,
+            genderList,
+            btnLoading: false,
+            rules: {
+                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+                idType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
+                idNum: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
+                mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }],
+                houseId: [{ required: true, message: '请选择所属房屋', trigger: 'blur' }],
             }
         };
     },
     created() { },
-    methods: {},
-    components: {},
+    methods: {
+        handlerCancle() {
+            this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
+                (item) => item.name !== 'add-resi'
+            );
+            let tab =
+                this.$store.state.contentTabs[
+                this.$store.state.contentTabs.length - 1
+                ];
+            this.$router.push({
+                name: tab.name,
+                params: { ...tab.params },
+                query: { ...tab.query },
+            });
+        },
+        handleSUbmit() {
+
+        }
+    },
+    components: { stafftag },
     computed: {},
     watch: {},
 }
 </script>
 
-<style lang='scss'>
-@import "@/assets/scss/modules/management/list-main.scss";
-//我想做一个关系图谱的功能,要求我可以自定义节点图片包括线条样式
-h3 {
-    background-color: #f2f2f2;
-    height: 50px;
-    line-height: 50px;
-    padding-left: 16px;
-    margin-bottom: 0;
-}
-.form{
-    padding:0 16px 16px;
-}
-h5 {
-    padding-left: 16px;
-    position: relative;
-    &::after{
-        content: "";
-        position: absolute;
-        display: inline-block;
-        left: 4px;
-        top: 0px;
-        width: 5px;
-        height: 16px;
-        background-color:#0056d6 ;
-    }
-}
+<style lang='scss' scoped>
+@import "@/assets/scss/modules/management/form-main.scss";
+@import "@/assets/scss/pages/resiAdd.scss";
 </style>
diff --git a/src/views/components/resiExpand/cpts/disability.vue b/src/views/components/resiExpand/cpts/disability.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/views/components/resiExpand/index.vue b/src/views/components/resiExpand/index.vue
new file mode 100644
index 000000000..0d9549de3
--- /dev/null
+++ b/src/views/components/resiExpand/index.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class=''></div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {};
+    },
+    // 群里之前谁碰到过一个单选框的事来着?
+    created() {},
+    methods: {},
+    components:{},
+    computed:{},
+    watch: {},
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/src/views/modules/portrayal/jumin/cpts/graph.vue b/src/views/modules/portrayal/jumin/cpts/graph.vue
index c9bc143b6..2848dac1f 100644
--- a/src/views/modules/portrayal/jumin/cpts/graph.vue
+++ b/src/views/modules/portrayal/jumin/cpts/graph.vue
@@ -28,7 +28,8 @@ export default {
                     {
                         label: '中心',
                         layoutName: 'center',
-                        layoutClassName: 'seeks-layout-center'
+                        layoutClassName: 'seeks-layout-center',
+                        distance_coefficient: 1.5
                     }
                 ],
                 defaultJunctionPoint: 'border',
@@ -72,15 +73,15 @@ export default {
                 let familyList = data.map((item, index) => ({
                     'id': `N${index + 1}`,
                     'text': item.name,
-                    'innerHTML': `<div class="c-my-node${index == 0 ? '1' : '2'}  c-my-node-${index == 0 ? item.gender == 1 ? 'father' : 'mother' : item.houseHolderRel == '配偶' ? item.gender == '1' ? 'mother' : 'father' : item.houseHolderRel == '女儿' ? 'girl' : item.houseHolderRel == '儿子' ? 'gon' : item.houseHolderRel == '父亲' ? 'grandpa' : item.houseHolderRel == '母亲' ? 'grandma' : 'father'}"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.name} （${item.age}）岁</div></div>`
+                    'innerHTML': `<div class="c-my-node${index == 0 ? '1' : '2'}  c-my-node-${index == 0 ? item.gender == 1 ? 'father' : 'mother' : item.houseHolderRel == '配偶' ? item.gender == '1' ? 'mother' : 'father' : item.houseHolderRel == '女儿' ? 'girl' : item.houseHolderRel == '儿子' ? 'gon' : item.houseHolderRel == '父亲' || item.houseHolderRel == '祖父母' ?item.gender == 1? 'grandpa':'grandma' : item.houseHolderRel == '母亲' ? 'grandma' : 'father'}"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.name} （${item.age}）岁</div></div>`
                 }))
                 let lineList = data.map((item, index) => ({
                     'from': 'N1',
                     'to': `N${index + 1}`,
                     'text': data[index].houseHolderRel || '其他',
                     'isHideArrow': true,
-                    'color': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')),
-                    'fontColor': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2'))
+                    'color': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲'||item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')),
+                    'fontColor': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' ||item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2'))
                 }));
                 lineList = lineList.slice(1)
                 const __graph_json_data = { rootId: 'root', nodes: familyList, lines: lineList }
diff --git a/src/views/modules/portrayal/jumin/cpts/staffTag.vue b/src/views/modules/portrayal/jumin/cpts/staffTag.vue
index fa45c1471..7e0714f1b 100644
--- a/src/views/modules/portrayal/jumin/cpts/staffTag.vue
+++ b/src/views/modules/portrayal/jumin/cpts/staffTag.vue
@@ -3,7 +3,6 @@
         <el-form ref="formRef" :model="formData">
             <el-table border ref="tableBox" :data="formData.tableData" :row-style="{ height: '50px' }"
                 :cell-style="{ padding: '0px' }">
-
                 <el-table-column prop="province" label="标签" width="120" align="center">
                 </el-table-column>
                 <el-table-column prop="city" label="内容" min-width="70" align="left">
@@ -11,13 +10,13 @@
                         <el-form-item v-if="scope.row.type == 'radio'">
                             <el-radio-group v-model="scope.row.value" v-for="(item, index) in scope.row.option"
                                 :key="index">
-                                <el-radio :label="item.value" disabled><span style="margin-right: 50px;">{{ item.label
+                                <el-radio :label="item.value" :disabled="formType == 'detail'"><span style="margin-right: 50px;">{{ item.label
                                 }}</span></el-radio>
                             </el-radio-group>
                         </el-form-item>
                         <el-form-item :prop="'tableData.' + scope.$index + '.value'" v-if="scope.row.type == 'checkbox'">
                             <el-checkbox-group v-model="scope.row.value">
-                                <el-checkbox label="选中且禁用" disabled v-for="(item, index) in scope.row.option" :key="index"
+                                <el-checkbox  :disabled="formType == 'detail'" v-for="(item, index) in scope.row.option" :key="index"
                                     :label="item.value">{{ item.label }}</el-checkbox>
                             </el-checkbox-group>
                         </el-form-item>
@@ -40,7 +39,7 @@ export default {
                     {
                         index: 0,
                         province: '政治面貌',
-                        value: '2',
+                        value: '',
                         type: 'radio',
                         option: [
                             { label: '群众', value: '1' },
@@ -75,9 +74,7 @@ export default {
                     {
                         index: 2,
                         province: '关注人群',
-                        value: [
-
-                        ],
+                        value: [],
                         type: 'checkbox',
                         option: [
                             {
@@ -188,7 +185,6 @@ export default {
                             }
                         ]
                     },
-
                 ]
             },
         };
@@ -197,6 +193,10 @@ export default {
         userInfo: {
             type: Object,
             default: () => { }
+        },
+        formType:{
+            type: String,
+            default: 'detail'
         }
     },
     created() {