diff --git a/.env.development b/.env.development
index 30e67c27b..0fde813fa 100644
--- a/.env.development
+++ b/.env.development
@@ -1,9 +1,9 @@
 NODE_ENV=development
 
 # VUE_APP_API_SERVER =  https://epmet-preview.elinkservice.cn/api
-# VUE_APP_API_SERVER =  http://localhost:8080/api
+# VUE_APP_API_SERVER =  http://192.168.1.60:8080/api
 VUE_APP_API_SERVER =  http://219.146.91.110:30801/api
-# VUE_APP_API_SERVER =  http://219.146.91.110:30801/api
+# VUE_APP_API_SERVER =  http://219.146.91.110:30801/api219.146.91.110:30801
 # VUE_APP_API_SERVER =  https://epmet-yantai.elinkservice.cn/api
 # VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
 # VUE_APP_API_SERVER =   https://epmet-cloud.elinkservice.cn/api
diff --git a/.env.production.sit b/.env.production.sit
index 2191f2dde..5c4611a9a 100644
--- a/.env.production.sit
+++ b/.env.production.sit
@@ -1,7 +1,7 @@
 NODE_ENV=production
 # VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
-# VUE_APP_API_SERVER =  http://192.168.1.140/api
-VUE_APP_API_SERVER =  http://219.146.91.110:30801/api
+VUE_APP_API_SERVER =  http://192.168.1.140/api
+# VUE_APP_API_SERVER =  http://192.168.1.60:8080/api
 VUE_APP_BIPASS_API_SERVER = http://dcommunity-dev.elinkservice.cn:30801/linkdata/linkdata-gateway/route
 VUE_APP_NODE_ENV=prod:sit
 VUE_APP_PUBLIC_PATH=epmet-oper
diff --git a/README.md b/README.md
index 9c118b8ac..cf2224fa6 100644
--- a/README.md
+++ b/README.md
@@ -19,3 +19,5 @@ npm run build
 ```
 npm run lint
 ```
+
+export NODE_OPTIONS=--max-old-space-size=4096
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 4de359e98..a4c73427a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -118,6 +118,16 @@ export const moduleRoutes = {
         title: "",
       },
     },
+    {
+      path: "house-huaxiang",
+      props: true,
+      name: "house-huaxiang",
+      component: () => import("@/views/modules/portrayal/house/index"),
+      meta: {
+        isTab: true,
+        title: "",
+      },
+    },
     {
       path: "fangwu-huaxiang",
       props: true,
@@ -932,6 +942,10 @@ router.beforeEach((to, from, next) => {
     to.meta.title = store.state.huaXiang.userInfo.name
     return next();
   }
+  if (to.name === 'house-huaxiang') {
+    to.meta.title = store.state.huaXiang.houseInfo.houseName
+    return next();
+  }
   if (to.name === 'fangwu-huaxiang') {
     to.meta.title = store.state.huaXiang.houseInfo.doorName
     return next();
diff --git a/src/views/components/addResi.vue b/src/views/components/addResi.vue
index 8ef63d166..9e9e819a9 100644
--- a/src/views/components/addResi.vue
+++ b/src/views/components/addResi.vue
@@ -497,13 +497,13 @@ export default {
                     {
                         agencyName: this.$store.state.user.agencyName,
                         agencyId: this.$store.state.user.agencyId,
-                        gridId: null,//所属网格id
-                        villageId: null,//小区id
-                        buildId: null,//楼栋id
-                        unitId: null,//单元id
+                        gridId: this.$route.params.gridId,//所属网格id
+                        villageId: this.$route.params.villageId,//小区id
+                        buildId: this.$route.params.buildId,//楼栋id
+                        unitId: this.$route.params.unitId,//单元id
                         moveOutFlag: null,
                         outOfTime: null,//迁出时间
-                        homeId: null, //房屋id
+                        homeId: this.$route.params.homeId, //房屋id
                         placeOfDomicile: null,//户籍所在地	
                         currentResidence: null,//现居住地
                         householdSituation: null,//人户状况
@@ -985,8 +985,22 @@ export default {
     created() {
         this.getDicts()
         this.getOrgTreeList()
+
+        this.initHouseBind();
+        
     },
     methods: {
+        // 从房屋画像进行添加居民时绑定房屋信息
+        initHouseBind(){
+            for (let i in this.form.resideInfoDtos) {
+                this.getValiheList(i);
+                this.getBuildList(i);
+                this.getHouseList(i);
+                this.getUniList(i);
+                this.form.resideInfoDtos[i].orgOptions = []
+                this.getOrgTreeList(this.form.resideInfoDtos[i].agencyId,i);
+            }
+        },
         async getDicts() {
             try {
                 const requests = [
@@ -1185,8 +1199,6 @@ export default {
         },
         handleValidBlur() {
             if (this.form.baseInfoDto.idType != 1) return
-            this.getResidentInfoByIdNum()
-
             if (!isCard(this.form.baseInfoDto.idNum) && !isPassport(this.form.baseInfoDto.idNum)) return
             const { user } = this.$store.state
             let huji = '', i = 0
@@ -1208,36 +1220,6 @@ export default {
             }
 
         },
-        async getResidentInfoByIdNum(){
-            try {
-                let url = '/actual/base/residentBaseInfo/getResidentInfoByIdNum'
-                let parm = {
-                    idType: this.form.baseInfoDto.idType,
-                    idNum: this.form.baseInfoDto.idNum
-                }
-                let { code, data, msg } = await requestGet(url,parm)
-                if (code == 0 && data != null) {
-                    this.$confirm(`该居民已存在于“${data.name}”是否继续填写`, {
-                    confirmButtonText: '前往修改',
-                    cancelButtonText: '继续填写',
-                    type: 'warning'
-                }).then(() => {
-                    this.$router.push({ name: 'edit-resi', query: { id: data.id }, params: { idNum: data.idNum, mobile: data.mobile } });
-
-                }).catch(() => {
-                    
-                });
-
-                } else if (code >= 8000) {
-                    this.$message.error(msg);
-                    this.btnLoading = false;
-                }
-            }
-            catch (error) {
-                // this.$message.error(msg);
-                console.log(msg);
-            }
-        },
         handleLocalRadio(e) {
             if (e.target.type === 'radio') return
             this.form.baseInfoDto.localResidenceFlag = this.form.baseInfoDto.localResidenceFlag === 0 ? 1 : 0;
@@ -1302,7 +1284,6 @@ export default {
             })
         },
         async submitForm(house) {
-            this.btnLoading = true;
             try {
                 let url = '/actual/base/residentBaseInfo/save'
                 let parm = {
@@ -1320,16 +1301,14 @@ export default {
                         this.$refs['addForm'].resetFields();
                         this.form.resideInfoDtos = homeArr
                     }
-                    this.btnLoading = false;
-
                 } else if (code >= 8000) {
                     this.$message.error(msg);
-                    this.btnLoading = false;
                 }
             }
             catch (error) {
                 this.$message.error(msg);
             }
+
         },
         showDialog({ index, value }, event) {
             if (value == 1) {
diff --git a/src/views/modules/base/community/roomTable.vue b/src/views/modules/base/community/roomTable.vue
index 26cb23de9..f1e376faf 100644
--- a/src/views/modules/base/community/roomTable.vue
+++ b/src/views/modules/base/community/roomTable.vue
@@ -602,12 +602,16 @@ export default {
     },
 
     handleDetail (row) {
-      this.detailShow = true;
-
-      // const _data = await this.detail(row)
-      this.$nextTick(() => {
-        this.$refs.ref_form_detail.initForm(row, this.agencyObj);
-      });
+      this.lookResiId = row.resiId;
+            let { agencyId, gridId, gridName, houseId, houseName} = row
+            this.$store.dispatch('saveDataH', { agencyId, gridId, gridName, houseId, houseName});
+            this.$router.push({ name: 'house-huaxiang' });
+            this.$store.state.contentTabs = this.$store.state.contentTabs.map(item => {
+                if (item.name === "house-huaxiang") {
+                    return { ...item, title: name };
+                }
+                return item;
+            });
     },
 
     detailFormCancle () {
diff --git a/src/views/modules/portrayal/house/cpts/businessRecord.vue b/src/views/modules/portrayal/house/cpts/businessRecord.vue
new file mode 100644
index 000000000..2371a5980
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/businessRecord.vue
@@ -0,0 +1,298 @@
+<template>
+  <div style="padding:0 16px;margin-top: 7px;">
+    <el-tabs v-model="topTabs" @tab-click="tabClick">
+      <el-tab-pane :label="complainLabel" name="12345">
+        <complain :tableData="complainList" />
+      </el-tab-pane>
+      <el-tab-pane :label="shengLabel" name="sheng">
+        <sheng :tableData="shengList" />
+      </el-tab-pane>
+      <el-tab-pane :label="shequLabel" name="shequ">
+        <shequ :tableData="shequList" />
+      </el-tab-pane>
+      <el-tab-pane :label="shijianLabel" name="shijian">
+        <shijian :tableData="shijianList" />
+      </el-tab-pane>
+      <el-tab-pane :label="xuqiuLabel" name="xuqiu">
+        <xuqiu :tableData="xuqiuList" />
+      </el-tab-pane>
+      <el-tab-pane :label="fuwuLabel" name="fuwu">
+        <div style="display: flex; flex-direction: column; height: 100%">
+          <fuwu
+            :tableData="fuwuList"
+            style="flex: 1; overflow: auto"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import complain from "./table/complain";
+import sheng from "./table/sheng";
+import shequ from "./table/shequ";
+import shijian from "./table/shijian";
+import xuqiu from "./table/xuqiu";
+import fuwu from "./table/fuwu";
+export default {
+  //数据
+  data() {
+    return {
+      topTabs: "12345",
+
+      complainTotal: 0,
+      complainList: [],
+      complainLabel: "",
+
+      shengLabel: "",
+      shengList: [],
+      shengTotal: 0,
+
+      shequLabel: "",
+      shequList: [],
+      shequTotal: 0,
+
+      shijianLabel: "",
+      shijianList: [],
+      shijianTotal: 0,
+
+      xuqiuLabel: "",
+      xuqiuList: [],
+      xuqiuTotal: 0,
+
+      fuwuLabel: "",
+      fuwuList: [],
+      fuwuTotal: 0,
+
+      pageNo: 1,
+      pageSize: 20,
+    };
+  },
+  //创建前
+  created() {
+  },
+  async mounted() {
+    // 获取家庭所有成员
+    await this.getHouseRelationShip();
+
+    await this.getComplainList();
+    await this.getShengList();
+    await this.getShequList();
+    await this.getshijianList();
+    await this.getxuqiuList();
+    await this.getfuwuList();
+  },
+  props: {
+    houseId: {
+      type: String,
+      default: () => {},
+    },
+    familyResiList: {
+      type: Array,
+      default: () => [],
+    },
+   
+  },
+  //方法
+  methods: {
+    tabClick(index) {},
+    handleSizeChange() {},
+    handleCurrentChange() {},
+    getComplainList() {
+
+      if (this.resiId.length == 0) {
+        this.complainList = [];
+        this.complainLabel = `12345投诉（0）`;
+        return;
+      }
+      let parm = {
+        residList: this.resiId,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        eventType: "3",
+      };
+      const statusArr = {
+        processing: "处理中",
+        closed_case: "已办结",
+      };
+      const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"];
+
+      // 省满意度列表
+      this.$http
+        .post("/actual/base/peopleRoomOverview/eventPageList", parm)
+        .then(({ data: res }) => {
+          this.complainList = res.data.list.map((item) => {
+            return {
+              ...item,
+              status: item.status ? statusArr[item.status] : null,
+              marktype: marktypes[item.marktype],
+            };
+          });
+          this.complainTotal = res.data.total;
+
+          this.complainLabel = `12345投诉（${this.complainTotal}）`;
+        });
+    },
+    getShengList() {
+      if (this.resiId.length == 0) {
+        this.shengList = [];
+        this.shengLabel = `省满意度调查（0）`;
+        return;
+      }
+      let parm = {
+        residList: this.resiId,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      // 省满意度列表
+      this.$http
+        .post(
+          "/actual/base/peopleRoomOverview/provincialSatisfactionPageList",
+          parm
+        )
+        .then(({ data: res }) => {
+          this.shengList = res.data;
+          this.shengTotal = res.data.length;
+          this.shengLabel = `省满意度调查（${this.shengTotal}）`;
+        });
+    },
+    getShequList() {
+      if (this.resiId.length == 0) {
+        this.shequList = [];
+        this.shequLabel = `社区满意度自查（0）`;
+        return;
+      }
+      let parm = {
+        residList: this.resiId,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      const completeFlags = {
+        "-2": "未知",
+        "-1": "不接受回访",
+        0: "接受回访/待回访",
+        1: "已回访",
+      };
+      this.$http
+        .post(
+          "/actual/base/peopleRoomOverview/communitySatisfactionPageList",
+          parm
+        )
+        .then(({ data: res }) => {
+          this.shequList = res.data.map((item) => {
+            return {
+              ...item,
+              completeFlag: completeFlags[item.completeFlag],
+            };
+          });
+          this.shequTotal = this.shequList.length;
+          this.shequLabel = `社区满意度自查（${this.shequTotal}）`;
+        });
+    },
+    getshijianList() {
+      if (this.resiId.length == 0) {
+        this.shijianList = [];
+        this.shijianLabel = `上报事件（0）`;
+        return;
+      }
+      let parm = {
+        residList: this.resiId,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      const statusArr = {
+        processing: "处理中",
+        closed_case: "已办结",
+      };
+      const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"];
+      this.$http
+        .post("/actual/base/peopleRoomOverview/eventPageList", parm)
+        .then(({ data: res }) => {
+          this.shijianList = res.data.list.map((item) => {
+            return {
+              ...item,
+              status: item.status ? statusArr[item.status] : null,
+              marktype: marktypes[item.marktype],
+            };
+          });
+          this.shijianTotal = this.shijianList.length;
+          this.shijianLabel = `上报事件（${this.shijianTotal}）`;
+        });
+    },
+    getxuqiuList() {
+      if (this.resiId.length == 0) {
+        this.xuqiuList = [];
+        this.xuqiuLabel = `居民需求（0）`;
+        return;
+      }
+      let parm = {
+        residList: this.resiId,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      // 省满意度列表
+      this.$http
+        .post("/actual/base/peopleRoomOverview/demandOfResidentsPageList", parm)
+        .then(({ data: res }) => {
+          this.xuqiuList = res.data.map((item) => {
+            return {
+              ...item,
+            };
+          });
+          this.xuqiuTotal = this.xuqiuList.length;
+          this.xuqiuLabel = `居民需求（${this.xuqiuTotal}）`;
+        });
+    },
+    getfuwuList() {
+      if (this.resiId.length == 0) {
+        this.fuwuList = [];
+        this.fuwuLabel = `社区服务（0）`;
+        return;
+      }
+      let parm = {
+        residList: this.resiId,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      this.$http
+        .post("/actual/base/peopleRoomOverview/communityServicePageList", parm)
+        .then(({ data: res }) => {
+          this.fuwuList = res.data.map((item) => {
+            return {
+              ...item,
+            };
+          });
+          this.fuwuTotal = this.fuwuList.length;
+          this.fuwuLabel = `社区服务（${this.fuwuTotal}）`;
+        });
+    },
+
+     // 业务记录
+     async getHouseRelationShip() {
+      try {
+          var resiIds = [];
+          await this.$http.post("/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=1&resid="+this.houseId).then(({ data: res }) => {
+          res.data.forEach(function(item) {
+            // 将每个元素中的"id"放入houseResiIds数组中
+            resiIds.push(item.id);
+          },this); 
+        });
+
+        this.resiId = resiIds;
+
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+  //子组件注册
+  components: { complain, sheng, fuwu, shijian, xuqiu, shequ },
+  //计算
+  computed: {},
+  //监听
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/details/fwdetail.vue b/src/views/modules/portrayal/house/cpts/details/fwdetail.vue
new file mode 100644
index 000000000..7a7a7caf1
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/details/fwdetail.vue
@@ -0,0 +1,206 @@
+<template>
+  <el-dialog width="818px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog"
+    @close="handleClose" title="服务详情">
+    <div class="eventWrap">
+      <el-row :gutter="32">
+        <el-col :span="23" style="padding-left: 40px">
+          <div class="leftEvent">
+            <div class="eventItem">
+              <span>所属组织：</span>
+              <span>{{ formData.principalName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>服务类型：</span>
+              <span>{{
+                formData.customerId && getFwType(formData.customerId)
+              }}</span>
+            </div>
+            <div class="eventItem">
+              <span>服务事项：</span>
+              <span>{{ formData.serviceName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>服务时间：</span>
+              <span>{{ formData.serviceTimeStart || '--' }} ~
+                {{ formData.serviceTimeEnd || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>服务内容：</span>
+              <span style="margin-top: 20px">{{ formData.remark || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>经办人：</span>
+              <span>{{ formData.principalName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>联系电话：</span>
+              <span> {{ $sensitive(formData.principalContact, 3, 7) }}</span>
+            </div>
+            <div class="eventItem">
+              <span>服务组织：</span>
+              <span>{{ formData.principalName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>政策依据：</span>
+              <span>{{ formData.policyTitle || '--' }}</span>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-dialog>
+</template>
+  
+<script>
+export default {
+  name: "ReportAnEvent",
+  components: {
+  },
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    showDialog: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      item: {},
+      loading: false,
+      activities: [],
+
+
+      // 服务类型。
+      serviceTypesLevel1: [],
+      formData: {}
+    };
+  },
+
+  computed: {},
+  watch: {
+    showDialog: {
+      handler(val) {
+        if (val) {
+          this.getDetailsData(this.id);
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.$http
+      .get("/governance/commonServiceType/selectList/0")
+      .then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg);
+        } else {
+          this.serviceTypesLevel1 = res.data;
+        }
+      })
+      .catch(() => {
+        return this.$message.error("网络错误");
+      });
+  },
+
+  methods: {
+    handleClose() {
+      this.$emit("close", false);
+      this.item = {};
+    },
+
+    openImg(src) {
+      window.open(src);
+    },
+
+    getTrueTime(time) {
+      return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+    },
+
+    getFwType(value) {
+      if (this.serviceTypesLevel1.length > 0 && value) {
+        return this.serviceTypesLevel1.filter(
+          (item) => item.customerId == value
+        )[0].name;
+      }
+      return "";
+    },
+    getDetailsData(id) {
+      this.loading = true;
+      this.$http
+        .post("/governance/icServiceRecordV2/detail", {
+          serviceRecordId: id,
+        })
+        .then((res) => {
+          const { code, data, msg } = res.data;
+          if (code === 0) {
+            this.formData = data;
+            this.loading = false;
+          } else {
+            this.loading = false;
+            this.$message.error(msg);
+          }
+        });
+      // this.$http
+      //   .post("/governance/icEvent/process", { icEventId: id })
+      //   .then((res) => {
+      //     const { code, data, msg } = res.data;
+      //     if (code === 0) {
+      //       this.activities = data;
+      //     } else {
+      //       this.$message.error(msg);
+      //     }
+      //   });
+    },
+  },
+};
+</script>
+  
+  
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+
+.eventWrap {
+  width: 1094px;
+  max-height: 798px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 24px;
+
+  .eventDetails {
+    font-size: 18px;
+    margin: 48px 24px 48px 0;
+
+    img {
+      margin-top: -4px;
+      margin-right: 8px;
+    }
+  }
+
+  .m-info {
+    padding: 0px !important;
+
+    .m-process {
+      margin: 0 !important;
+
+      .detail {
+        .detail-field {
+          flex: none !important;
+        }
+      }
+    }
+  }
+
+  .leftEvent {
+    .eventItem {
+      font-size: 14px;
+      margin-bottom: 24px;
+
+    }
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/details/shengdetail.vue b/src/views/modules/portrayal/house/cpts/details/shengdetail.vue
new file mode 100644
index 000000000..e8835661e
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/details/shengdetail.vue
@@ -0,0 +1,189 @@
+<template>
+    <el-dialog width="818px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog"
+        @close="handleClose" title="省满意度调查不满意事项详情">
+        <div class="eventWrap">
+            <el-row :gutter="32">
+                <el-col :span="23" style="padding-left: 40px">
+                    <div class="leftEvent">
+                        <div class="eventItem">
+                            <span>所属组织：</span>
+                            <span>{{ item.agencyName || '--' }}</span>
+                        </div>
+                        <div class="eventItem">
+                            <span>不满意事项来源：</span>
+                            <span>省满意度调查</span>
+                        </div>
+                        <div class="eventItem">
+                            <span>不满意事项类型：</span>
+                            <span>{{ item.scopeId && getSxType(item.scopeId) }}</span>
+                        </div>
+                        <div class="eventItem">
+                            <span>所属月份：</span>
+                            <span>{{
+                                item.createdTime && getMonthData(item.createdTime)
+                            }}</span>
+                        </div>
+                        <div class="eventItem">
+                            <div>不满意事项描述：</div>
+                            <div style="margin-top: 20px">{{ item.problemDesc || '--' }}</div>
+                        </div>
+                        <div class="eventItem">
+                            <span>提交人姓名：</span>
+                            <span>{{ item.name || '--' }}</span>
+                        </div>
+                        <div class="eventItem">
+                            <span>提交人电话：</span>
+                            <span> {{ $sensitive(item.mobile, 3, 7) }}</span>
+                        </div>
+                        <div class="eventItem">
+                            <span>完成时限：</span>
+                            <span>{{ item.completeTime || '--' }}</span>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </el-dialog>
+</template>
+  
+<script>
+
+export default {
+    components: {
+    },
+    props: {
+        id: {
+            type: String,
+            default: "",
+        },
+        showDialog: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    data() {
+        return {
+            item: {
+                logList: [],
+            },
+            loading: false,
+            loading1: false,
+            activities: [],
+            // 不满意类型列表
+            satisfactionCategoryOptions: [],
+        };
+    },
+    computed: {},
+    watch: {
+        showDialog: {
+            handler(val) {
+                if (val) {
+                    this.getDetailsData(this.id);
+                }
+            },
+            immediate: true,
+        },
+    },
+    mounted() { },
+
+    methods: {
+        handleClose() {
+            this.$emit("close", false);
+            this.item = {};
+        },
+
+        openImg(src) {
+            window.open(src);
+        },
+
+        getTrueTime(time) {
+            return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+        },
+
+        getSxType(value) {
+            if (this.satisfactionCategoryOptions.length > 0 && value) {
+                return this.satisfactionCategoryOptions.filter(
+                    (item) => item.value == value
+                )[0].label;
+            }
+            return "";
+        },
+        getMonthData(time) {
+            if (time) {
+                return this.$moment(time).format("YYYY年MM月");
+            }
+            return "";
+        },
+        getDetailsData(id) {
+            this.loading = true;
+            this.$http
+                .post("/governance/provinceEvaluationRecord/" + id)
+                .then((res) => {
+                    this.loading = false;
+                    const { code, data, msg } = res.data;
+                    if (code === 0) {
+                        this.item = data;
+                    } else {
+                        this.$message.error(msg);
+                    }
+                });
+            this.$http
+                .get(
+                    "/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource="
+                )
+                .then(({ data: { data } }) => {
+                    this.satisfactionCategoryOptions = data.map((item) => {
+                        return {
+                            label: item.categoryName,
+                            value: item.categoryCode,
+                        };
+                    });
+                });
+        },
+    },
+};
+</script>
+  
+  
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+
+.eventWrap {
+    width: 1094px;
+    max-height: 798px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 24px;
+
+    .eventDetails {
+        font-size: 18px;
+        margin: 48px 24px 48px 0;
+
+        img {
+            margin-top: -4px;
+            margin-right: 8px;
+        }
+    }
+    .m-info {
+        padding: 0px !important;
+
+        .m-process {
+            margin: 0 !important;
+            .detail {
+                .detail-field {
+                    flex: none !important;
+                }
+            }
+        }
+    }
+
+    .leftEvent {
+        .eventItem {
+            font-size: 14px;
+            margin-bottom: 24px;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/details/sjdetail.vue b/src/views/modules/portrayal/house/cpts/details/sjdetail.vue
new file mode 100644
index 000000000..84c3084b7
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/details/sjdetail.vue
@@ -0,0 +1,306 @@
+<template>
+  <el-dialog width="1118px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog"
+    @close="handleClose" title="事件详情">
+    <div class="eventWrap">
+      <el-row :gutter="32">
+        <el-col :span="13" style="padding-left: 40px">
+          <div class="leftEvent">
+
+            <div class="eventItem">
+              <span>所属组织：</span>
+              <span>{{ item.gridName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>上报渠道：</span>
+              <span>{{ item.sourceTypeName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>事件类型：</span>
+              <span>{{ item.categoryName || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>接受时间：</span>
+              <span>{{ item.happenTime || '--' }}</span>
+            </div>
+            <!--            <div class="eventItem">
+                            <span>工单号：</span>
+                            <span>{{ item.workOrderNum }}</span>
+                          </div>-->
+            <div class="eventItem">
+              <div>问题描述：</div>
+              <div style="margin-top: 20px">{{ item.eventContent || '--' }}</div>
+            </div>
+            <!--            <div class="eventItem">
+                            <div>图片：</div>
+                            <div style="margin-top: 20px; display: flex">
+                              <img
+                                style="width: 100px; height: 100px; margin-right: 5px"
+                                v-for="src in item.imageList"
+                                :key="src"
+                                :src="src"
+                                alt="/"
+                                @click="openImg(src)"
+                              />
+                            </div>
+                          </div>-->
+            <div class="eventItem">
+              <span>联系人：</span>
+              <span>{{ item.name || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>联系电话：</span>
+              <span>{{ item.mobile || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>详细地址：</span>
+              <span>{{ item.address || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>办结时限：</span>
+              <span>{{ item.latestOperatedTime || '--' }}</span>
+            </div>
+            <div class="eventItem">
+              <span>满意度评价：</span>
+              <span>{{ item.satisfactionName || '--' }}</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="11">
+          <div class="rightEvent m-info">
+            <!-- <div class="eventDetails">
+              <img :width="18" :height="18" src="@/assets/images/manyidu/tc-title-icon.png" />办理进展
+            </div> -->
+            <!-- <el-timeline class="timeline" :reverse="true">
+                  <el-timeline-item v-for="(item, index) in activities" :key="index" :class="index == activities.length - 1 ? 'sucess' : ''">
+                    <div class="status-box">
+                      <div class="status1" v-if="index == activities.length - 1">回复</div>
+                      <div class="status2" v-else>完成并回复</div>
+                      <div class="timestamp">{{ item.timeLimit ? $moment(item.timeLimit).format("YYYY-MM-DD hh:mm:ss") : "" }}</div>
+                    </div>
+                    <div class="content">
+                      <div class="field">回复人：</div>
+                      <div class="value">{{ item.departmentName }}</div>
+                    </div>
+                    <div class="content">
+                      <div class="field">回复内容：</div>
+                      <div class="value">{{ item.publicReply }}</div>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline> -->
+            <div v-if="activities.length > 0">
+              <!-- <el-card :class="{ 'box-card': source === 'visiual' }" style="min-height: calc(88vh - 50px); overflow: auto"> -->
+              <div class="m-process">
+                <div class="list">
+                  <div class="item" :class="[index === 0 ? 'z-on' : '']" :key="item.processId"
+                    v-for="(item, index) in activities">
+                    <div class="item-row">
+                      <template v-if="item.agencyId">
+                        <div class="name">指派</div>
+                      </template>
+                      <template v-if="!item.timeLimit">
+                        <div class="name">完成并回复</div>
+                      </template>
+                      <template v-if="!item.agencyId && item.timeLimit">
+                        <div class="name">{{ item.processName || '--' }}</div>
+                      </template>
+                      <div class="date">
+                        {{
+                          item.processTime ? getTrueTime(item.processTime) : ""
+                        }}
+                      </div>
+                    </div>
+                    <div v-if="item.type === 'event'">
+                      <template v-if="item.agencyId">
+                        <div class="detail">
+                          <div class="detail-field">指派人：</div>
+                          <div class="detail-value">
+                            {{ item.departmentName || '--' }}
+                          </div>
+                        </div>
+                        <div class="detail">
+                          <div class="detail-field">指派部门：</div>
+                          <div class="detail-value">
+                            {{ item.agencyName || '--' }}
+                          </div>
+                        </div>
+                        <div class="detail">
+                          <div class="detail-field">转办意见：</div>
+                          <div class="detail-value">
+                            {{ item.publicReply || '--' }}
+                          </div>
+                        </div>
+                        <div class="detail">
+                          <div class="detail-field">办结时限：</div>
+                          <div class="detail-value">
+                            {{ item.timeLimit || '--' }}
+                          </div>
+                        </div>
+                      </template>
+                      <template v-else>
+                        <div class="detail">
+                          <div class="detail-field">回复人：</div>
+                          <div class="detail-value">
+                            {{ item.departmentName || '--' }}
+                          </div>
+                        </div>
+                        <div class="detail">
+                          <div class="detail-field">回复内容：</div>
+                          <div class="detail-value">
+                            {{ item.publicReply || '--' }}
+                          </div>
+                        </div>
+                        <div class="detail" v-if="item.timeLimit">
+                          <div class="detail-field">办结时限：</div>
+                          <div class="detail-value">
+                            {{ getTrueTime(item.timeLimit) }}
+                          </div>
+                        </div>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- </el-card> -->
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-dialog>
+</template>
+  
+<script>
+export default {
+  name: "ReportAnEvent",
+  components: {
+  },
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    showDialog: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      item: {},
+      loading: false,
+      loading1: false,
+      activities: [],
+    };
+  },
+
+  computed: {},
+  watch: {
+    showDialog: {
+      handler(val) {
+        if (val) {
+          this.getDetailsData(this.id);
+          this.getProcessData(this.id);
+        } else {
+          this.item = {}
+          this.activities = []
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+  },
+
+  methods: {
+    handleClose() {
+      this.$emit("close", false);
+      this.item = {};
+    },
+
+    openImg(src) {
+      window.open(src);
+    },
+
+    getTrueTime(time) {
+      return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+    },
+
+    getDetailsData(id) {
+      this.loading = true;
+      this.$http
+        .post("/governance/icEvent/detail", { icEventId: id })
+        .then((res) => {
+          const { code, data, msg } = res.data;
+          if (code === 0) {
+            this.item = data;
+            this.loading = false;
+          } else {
+            this.loading = false;
+            this.$message.error(msg);
+          }
+        });
+    },
+
+    getProcessData(id) {
+      this.$http
+        .post("/governance/icEvent/process", { icEventId: id })
+        .then((res) => {
+          const { code, data, msg } = res.data;
+          if (code === 0) {
+            this.activities = data;
+            this.loading1 = false;
+          } else {
+            this.loading1 = false;
+            this.$message.error(msg);
+          }
+        });
+    },
+  },
+};
+</script>
+  
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+
+.eventWrap {
+  width: 1094px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 24px;
+
+  .eventDetails {
+    font-size: 18px;
+    margin: 48px 24px 48px 0;
+
+    img {
+      margin-top: -4px;
+      margin-right: 8px;
+    }
+  }
+
+  .m-info {
+    padding: 0px !important;
+
+    .m-process {
+      margin: 0 !important;
+
+      .detail {
+        .detail-field {
+          flex: none !important;
+        }
+      }
+    }
+  }
+
+  .leftEvent {
+    .eventItem {
+      font-size: 14px;
+      margin-bottom: 24px;
+
+      span:first-child {}
+    }
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/details/sqdetail.vue b/src/views/modules/portrayal/house/cpts/details/sqdetail.vue
new file mode 100644
index 000000000..b718abe25
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/details/sqdetail.vue
@@ -0,0 +1,283 @@
+<template>
+    <el-dialog
+      width="818px"
+      :modal="true"
+      :modal-append-to-body="false"
+      :destroy-on-close="true"
+      :visible="showDialog"
+      @close="handleClose"
+      title="社区满意度自查不满意事项详情"
+    >
+      <div class="eventWrap">
+        <el-row :gutter="32">
+          <el-col :span="24" style="padding-left: 40px">
+          </el-col>
+          <el-col
+            :span="23"
+            style="padding-left: 40px"
+          >
+            <div class="leftEvent">
+              
+              <!-- <div class="eventItem">
+                <span>所属组织：</span>
+                <span>{{ item.agencyName }}</span>
+              </div> -->
+              <div class="eventItem">
+                <span>不满意事项来源：</span>
+                <span>社区意度自查</span>
+              </div>
+              <div class="eventItem">
+                <span>不满意事项类型：</span>
+                <span>{{ getSxType(item) }}</span>
+              </div>
+              <!-- <div class="eventItem">
+                <span>所属月份：</span>
+                <span>{{
+                  item.createdTime && getMonthData(item.createdTime)
+                }}</span>
+              </div> -->
+              <div class="eventItem">
+                <div>不满意事项描述：</div>
+                <div style="margin-top: 20px">{{ getSxReason(item) }}</div>
+              </div>
+              <div class="eventItem">
+                <span>提交人姓名：</span>
+                <span>{{ item.reporterName || '--' }}</span>
+              </div>
+              <div class="eventItem">
+                <span>提交人电话：</span>
+                <span> {{ $sensitive(item.reporterMobile, 3, 7) }}</span>
+              </div>
+              <!-- <div class="eventItem">
+                <span>完成时限：</span>
+                <span>{{ item.completeTime }}</span>
+              </div> -->
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-dialog>
+  </template>
+  
+  <script>
+  
+  export default {
+    components: {
+    },
+    props: {
+      id: {
+        type: String,
+        default: "",
+      },
+      showDialog: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  
+    data() {
+      return {
+        item: {
+          logList: [],
+        },
+        loading: false,
+        // 不满意类型列表
+        satisfactionCategoryOptions: [
+          {
+            key: "evaCulturalFacility",
+            value: "文化设施",
+          },
+          {
+            key: "evaSportsFacility",
+            value: "体育设施",
+          },
+          {
+            key: "evaEcologicalEnv",
+            value: "生态环境",
+          },
+          {
+            key: "evaSocialSecurity",
+            value: "社会治安",
+          },
+          {
+            key: "evaocialAssistance",
+            value: "社会救助",
+          },
+          {
+            key: "evaOldPeopleProvide",
+            value: "老有所养",
+          },
+          {
+            key: "evaBasicEducation",
+            value: "基础教育",
+          },
+          {
+            key: "evaMedical",
+            value: "病有所医",
+          },
+        ],
+        reason: [
+          "basicEducationReason",
+          "culturalFacilityReason",
+          "ecologicalEnvReason",
+          "medicalReason",
+          "oldPeopleProvideReason",
+          "socialAssistanceReason",
+          "socialSecurityReason",
+          "sportsFacilityReason",
+        ],
+      };
+    },
+  
+    computed: {},
+    watch: {
+      showDialog: {
+        handler(val) {
+          if (val) {
+            this.getDetailsData(this.id);
+          }
+        },
+        immediate: true,
+      },
+    },
+    mounted() {},
+  
+    methods: {
+      handleClose() {
+        this.$emit("close", false);
+        this.item = {};
+      },
+  
+      openImg(src) {
+        window.open(src);
+      },
+  
+      getTrueTime(time) {
+        return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+      },
+  
+      getSxType(row) {
+        let arr = [];
+        let text = "";
+        for (let k in row) {
+          if (row[k] == "bad") {
+            arr.push(k);
+          }
+        }
+        this.satisfactionCategoryOptions.forEach((item) => {
+          arr.forEach((item1) => {
+            if (item1 == item.key) {
+              if (text == "") {
+                text = item.value;
+              } else {
+                text = text + "， " + item.value;
+              }
+            }
+          });
+        });
+        return text;
+      },
+      getSxReason(row) {
+        let text = "";
+        this.reason.forEach((item) => {
+          for (let key in row) {
+            if (item == key && row[key]) {
+              if (text == "") {
+                text = row[key];
+              } else {
+                text = text + "；" + row[key];
+              }
+            }
+          }
+        });
+        return text;
+      },
+      getMonthData(time) {
+        if (time) {
+          return this.$moment(time).format("YYYY年MM月");
+        }
+        return "";
+      },
+      getDetailsData(id) {
+        this.loading = true;
+        this.$http
+          .get(
+            "/governance/satisfaction/communitySelfInsp/inspResult/detail/" + id
+          )
+          .then((res) => {
+            this.loading = false;
+            const { code, data, msg } = res.data;
+            if (code === 0) {
+              this.item = { ...data.reporter, ...data.satisfaction };
+            } else {
+              this.$message.error(msg);
+            }
+          });
+        // this.$http
+        //   .post("/governance/provinceEvaluationRecord/" + id)
+        //   .then((res) => {
+        //     this.loading = false;
+        //     const { code, data, msg } = res.data;
+        //     if (code === 0) {
+        //       this.item = data;
+        //     } else {
+        //       this.$message.error(msg);
+        //     }
+        //   });
+        // this.$http
+        //   .get(
+        //     "/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource="
+        //   )
+        //   .then(({ data: { data } }) => {
+        //     console.log('data::', data);
+        //     this.satisfactionCategoryOptions = data.map((item) => {
+        //       return {
+        //         label: item.categoryName,
+        //         value: item.categoryCode,
+        //       };
+        //     });
+        //   });
+      },
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  @import "@/assets/scss/modules/shequzhili/event-info.scss";
+  .eventWrap {
+    width: 1094px;
+    // max-height: 798px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 24px;
+    .eventDetails {
+      font-size: 18px;
+      margin: 48px 24px 48px 0;
+      img {
+        margin-top: -4px;
+        margin-right: 8px;
+      }
+    }
+  
+    .m-info {
+      padding: 0px !important;
+  
+      .m-process {
+        margin: 0 !important;
+        .detail {
+          .detail-field {
+            flex: none !important;
+          }
+        }
+      }
+    }
+  
+    .leftEvent {
+  
+      .eventItem {
+        font-size: 14px;
+        margin-bottom: 24px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/details/xqdetail.vue b/src/views/modules/portrayal/house/cpts/details/xqdetail.vue
new file mode 100644
index 000000000..047666a2d
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/details/xqdetail.vue
@@ -0,0 +1,188 @@
+<template>
+    <el-dialog
+      width="818px"
+      :modal="true"
+      :modal-append-to-body="false"
+      :destroy-on-close="true"
+      :visible="showDialog"
+      @close="handleClose"
+      title="需求详情"
+    >
+      <div class="eventWrap">
+        <el-row :gutter="32">
+          
+          <el-col
+            :span="23"
+            style="padding-left: 40px"
+          >
+            <div class="leftEvent">
+              <div class="eventItem">
+                <span>所属组织：</span>
+                <span>{{ item.gridName||'--' }}</span>
+              </div>
+              <div class="eventItem">
+                <span>上报渠道：</span>
+                <span>{{ item.reportTypeName||'--' }}</span>
+              </div>
+              <div class="eventItem">
+                <span>需求类型：</span>
+                <span>{{ item.categoryName ||'--'}}</span>
+              </div>
+              <div class="eventItem">
+                <span>上报时间：</span>
+                <span>{{ item.reportTime||'--' }}</span>
+              </div>
+              <div class="eventItem">
+                <div>需求描述：</div>
+                <div style="margin-top: 20px">{{ item.content ||'--'}}</div>
+              </div>
+              <div class="eventItem">
+                <span>需求人姓名：</span>
+                <span>{{ item.demandUserName ||'--'}}</span>
+              </div>
+              <div class="eventItem">
+                <span>需求人电话：</span>
+                <span> {{ $sensitive(item.demandUserMobile, 3, 7) }}</span>
+              </div>
+              <div class="eventItem">
+                <span>完成时限：</span>
+                <span>{{ item.wantServiceTime||'--' }}</span>
+              </div>
+              <div class="eventItem">
+                <span>需求人住址：</span>
+                <span>{{ item.serviceAddress||'--' }}</span>
+              </div>
+              <div class="eventItem">
+                <span>上报人：</span>
+                <span>{{ item.reportUserName||'--' }}</span>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-dialog>
+  </template>
+  
+  <script>
+  export default {
+    name: "ReportAnEvent",
+    components: {
+ 
+    },
+    props: {
+      id: {
+        type: String,
+        default: "",
+      },
+      showDialog: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  
+    data() {
+      return {
+        item: {
+          logList: [],
+        },
+        loading: false,
+        loading1: false,
+        activities: [],
+      };
+    },
+  
+    computed: {},
+    watch: {
+      showDialog: {
+        handler(val) {
+          if (val) {
+            this.getDetailsData(this.id);
+          }
+        },
+        immediate: true,
+      },
+    },
+    mounted() {},
+  
+    methods: {
+      handleClose() {
+        this.$emit("close", false);
+        this.item = {};
+      },
+  
+      openImg(src) {
+        window.open(src);
+      },
+  
+      getTrueTime(time) {
+        return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+      },
+  
+      getDetailsData(id) {
+        this.loading = true;
+  
+        let params = {
+          demandRecId: id,
+        };
+        this.$http
+          .post("/governance/userdemand/demandDetail", params)
+          .then((res) => {
+            this.loading = false;
+            const { code, data, msg } = res.data;
+            if (code === 0) {
+              this.item = data;
+            } else {
+              this.$message.error(msg);
+            }
+          });
+      },
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  @import "@/assets/scss/modules/shequzhili/event-info.scss";
+  .eventWrap {
+    width: 1094px;
+    height: 610px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 24px;
+  
+    .eventDetails {
+      font-size: 18px;
+      margin: 48px 24px 48px 0;
+  
+      img {
+        margin-top: -4px;
+        margin-right: 8px;
+      }
+    }
+  
+    .m-info {
+      padding: 0px !important;
+  
+      .m-process {
+        margin: 0 !important;
+        .detail {
+          .detail-field {
+            flex: none !important;
+          }
+        }
+      }
+    }
+  
+    .leftEvent {
+      .eventItem {
+        font-size: 14px;
+        margin-bottom: 24px;
+  
+        span:first-child {
+        }
+  
+        span:last-child {
+        }
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/graph.vue b/src/views/modules/portrayal/house/cpts/graph.vue
new file mode 100644
index 000000000..18b3de69b
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/graph.vue
@@ -0,0 +1,187 @@
+
+<template>
+    <div>
+        <div style="height:300px; width: 500px;">
+            <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick"
+                :on-line-click="onLineClick" />
+        </div>
+    </div>
+</template>
+  
+<script>
+import { requestPost } from '@/js/dai/request'
+
+export default {
+    name: 'RelationGraphDemo3',
+    components: {},
+    data() {
+        return {
+            graphOptions: {
+                disableDragNode: true,
+                defaultNodeBorderWidth: 0,
+                defaultNodeColor: 'rgba(238, 178, 94, 0)',
+                allowSwitchLineShape: true,
+                allowSwitchJunctionPoint: true,
+                defaultLineShape: 1,
+                allowShowMiniToolBar: false,
+                layouts: [
+                    {
+                        label: '中心',
+                        layoutName: 'center',
+                        layoutClassName: 'seeks-layout-center',
+                        distance_coefficient: 1.5
+                    }
+                ],
+                defaultJunctionPoint: 'border',
+                // 这里可以参考"Graph 图谱"中的参数进行设置
+            }
+        };
+    },
+    props: {
+        houseInfo: {
+            type: Object,
+            default: () => { }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.getFamilyRelationshipList()
+        })
+    },
+    watch: {
+        houseInfo: {
+            handler(newVal, oldVal) {
+                this.getFamilyRelationshipList()
+            },
+            deep: true
+        }
+    },
+    methods: {
+        async getFamilyRelationshipList() {
+            let url = `/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=1&resid=` + this.houseInfo.id;
+            let { code, data, msg } = await requestPost(url)
+            if (code == 0) {
+                
+                // 将房屋本身的信息放到数组元素的第一个
+                const rootNode = {};
+                rootNode["id"] = this.houseInfo.id;
+                rootNode["name"] = this.houseInfo.fullName;
+                rootNode["type"] = 1;
+                data.unshift(rootNode);
+
+                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-${item.type == 1?'home':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' : item.gender == 1 ? 'father' : 'mother' }"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.type == 1?`${item.name}`:item.name.length === 2 ?
+                        item.name.substring(0, 1) + '*' :
+                        item.name.substring(0, 1) + '*' + item.name.substring(2)} ${item.age?`（${item.age}）岁`:''}</div></div>`
+                }))
+
+
+                let lineList = data.map((item, index) => ({
+                    'from': 'N1',
+                    'to': `N${index + 1}`,
+                    'text':item.type ==1?'未知':data[index].houseHolderRel || '自住',
+                    'isHideArrow': true,
+                    '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 }
+                this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => {
+                    // 这些写上当图谱初始化完成后需要执行的代码
+                });
+            } else {
+                this.$message.error(msg)
+            }
+        },
+
+        onNodeClick(nodeObject, $event) {
+            console.log('onNodeClick:', nodeObject);
+        },
+        onLineClick(lineObject, $event) {
+            console.log('onLineClick:', lineObject);
+        }
+    }
+};
+</script>
+  
+<style lang="scss" >
+.c-my-node2 {
+    border: none;
+    background-position: center center;
+    background-size: 100%;
+    height: 74px;
+    width: 74px;
+    border-radius: 40px;
+}
+
+.c-node-name2 {
+    margin-left: -5px;
+    text-align: center;
+    margin-top: 63px;
+    line-height: 20px;
+    position: absolute;
+    width: 96px;
+    height: 20px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 6px 0px rgba(211, 213, 214, 0.4);
+    border-radius: 10px;
+}
+
+.c-my-node1 {
+    border: none;
+    background-size: 100%;
+    height: 100px;
+    width: 100px;
+    border-radius: 50px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.c-my-node-son {
+    background-image: url(~@/assets/images/index/son.png) !important;
+}
+
+.c-my-node-girl {
+    background-image: url(~@/assets/images/index/girl.png) !important;
+}
+
+.c-my-node-father {
+    background-image: url(~@/assets/images/index/father.png) !important;
+}
+
+.c-my-node-mother {
+    background-image: url(~@/assets/images/index/mother.png) !important;
+}
+
+.c-my-node-grandpa {
+    background-image: url(~@/assets/images/index/grandpa.png) !important;
+}
+
+.c-my-node-grandma {
+    background-image: url(~@/assets/images/index/grandma.png) !important;
+}
+
+.c-my-node-home {
+    background-image: url(~@/assets/images/index/home.png) !important;
+}
+
+.c-node-name1 {
+    margin-left: -5px;
+    text-align: center;
+    margin-top: 63px;
+    line-height: 20px;
+    position: absolute;
+    width: 96px;
+    height: 20px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 6px 0px rgba(211, 213, 214, 0.4);
+    border-radius: 10px;
+}
+
+.rel-node-checked {
+    box-shadow: none !important;
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/table/changeRecord.vue b/src/views/modules/portrayal/house/cpts/table/changeRecord.vue
new file mode 100644
index 000000000..ff015281c
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/table/changeRecord.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="table" style="padding:0 16px;">
+
+        <el-table class="m-table-item" :data="tableData" border style="width: 100%; margin-top:23px">
+            <el-table-column label="序号" type="index" fixed="left" align="left" width="50">
+            </el-table-column>
+            <el-table-column v-for="item in tableHeader" :key="item.columnName" :prop="item.columnName" :label="item.label"
+                align="left" :show-overflow-tooltip="true" :width="item.width || ''">
+                <template slot-scope="scope">
+                    <span>{{ handleFilterSpan(scope.row, item) }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+  
+<script>
+export default {
+    components: {},
+    data() {
+        return {
+            tableHeader: [
+                { columnName: "resiName", label: "变更人", width: 150 },
+                { columnName: "typeName", label: "变更类型", width: 80 },
+                { columnName: "beforeChange", label: "变更前", width: 200 },
+                { columnName: "afterChange", label: "变更后", width: 200 },
+                { columnName: "operatorName", label: "操作人", width: 80 },
+                { columnName: "changeTime", label: "调整时间", width: 150 }
+            ],
+        };
+    },
+    activated() {
+    },
+    watch: {
+
+    },
+    computed: {
+    },
+    mounted() { },
+    props: {
+        tableData: {
+            type: Array,
+            default: []
+        }
+    },
+    methods: {
+        handleFilterSpan(row, item) {
+            let _val = "";
+            return _val || row[item.columnName];
+        },
+    },
+};
+</script>
+  
+<style scoped lang="scss"></style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/table/complain.vue b/src/views/modules/portrayal/house/cpts/table/complain.vue
new file mode 100644
index 000000000..cc4b0a755
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/table/complain.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="table">
+        <el-table :data="tableData"  >
+            <el-table-column label="序号" type="index" width="80" />
+            <el-table-column label="事件类型" prop="categorycode" width="" />
+            <el-table-column label="事件描述" prop="eventcontent" width="" />
+            <el-table-column label="办理状态" prop="status" width="" />
+            <el-table-column label="接收时间" prop="happentime" width="180" />
+            <el-table-column label="标记" prop="marktype" width="" />
+            <el-table-column label="操作" width="90" align="center">
+                <template slot-scope="data">
+                    <el-button type="text" @click="handleView(data.row)">查看</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <sjdetails :showDialog="showDialog" :id="rowId" @close="close" />
+    </div>
+</template>
+  
+<script>
+import sjdetails from "../details/sjdetail";
+export default {
+    name: "community",
+    components: {
+        sjdetails
+    },
+    data() {
+        return {
+            queryParams: {
+                residList: [],
+            },
+            list: [],
+            total: 0,
+            rowId: null,
+            showDialog: false,
+            pageNo: 1,
+            pageSize: 20
+        };
+    },
+    activated() {
+    },
+    watch: {
+
+    },
+    mounted() { },
+    props: {
+        tableData: {
+            type: Array,
+            default: []
+        }
+    },
+    methods: {
+        getList() {
+            let parm = {
+                residList: [this.resiId],
+                pageNo: this.pageNo,
+                pageSize: this.pageSize
+            }
+            this.list = [];
+            this.total = 0;
+            // this.$emit("changeTotal", { name: 2, total: 0 });
+            // 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访)
+            const completeFlags = {
+                "-2": "未知",
+                "-1": "不接受回访",
+                0: "接受回访/待回访",
+                1: "已回访",
+            };
+            // 省满意度列表
+            this.$http.post("/actual/base/peopleRoomOverview/communitySatisfactionPageList", parm).then(({ data: res }) => {
+                this.list = []
+                //         this.list = res.data.list.map((item) => {
+                //     return {
+                //       ...item,
+                //       status: item.status ? statusArr[item.status] : null,
+                //       marktype: marktypes[item.marktype],
+                //     };
+                //   });
+                this.total = this.list.length;
+                this.$emit("changeTotal", { name: 2, total: this.total });
+            });
+        },
+        handleView(item) {
+            this.rowId = item.id;
+            this.showDialog = true;
+        },
+        close() {
+            this.showDialog = false;
+        },
+        handleSizeChange(val) {
+            this.pageSize = val;
+            this.pageNo = 1;
+            this.getList();
+        },
+        handleCurrentChange(val) {
+            this.pageNo = val;
+            this.getList();
+        },
+    },
+};
+</script>
+  
+<style scoped lang="scss"></style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/table/fuwu.vue b/src/views/modules/portrayal/house/cpts/table/fuwu.vue
new file mode 100644
index 000000000..f076a2c91
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/table/fuwu.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="table">
+        <el-table :data="tableData">
+            <el-table-column label="序号" type="index" width="80" />
+            <el-table-column label="需求类型" prop="serviceCategoryKey" width="" />
+            <el-table-column label="事件描述" prop="serviceName" width="" />
+            <el-table-column label="服务情况" prop="state" width="" />
+            <el-table-column label="创建时间" prop="serviceTimeStart" width="180" />
+            <el-table-column label="操作" width="90" align="center">
+                <template slot-scope="data">
+                    <el-button type="text" @click="handleView(data.row)">查看</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <fwdetail :showDialog="showDialog" :id="rowId" @close="close" />
+    </div>
+</template>
+  
+<script>
+import fwdetail from "../details/fwdetail";
+export default {
+    name: "community",
+    components: {
+        fwdetail
+    },
+    data() {
+        return {
+            queryParams: {
+                residList: [],
+            },
+            list: [],
+            total: 0,
+            rowId: null,
+            showDialog: false,
+        };
+    },
+    activated() {
+    },
+    watch: {
+
+    },
+    mounted() { },
+    props: {
+        tableData: {
+            type: Array,
+            default: []
+        }
+    },
+    methods: {
+
+        handleView(item) {
+            this.rowId = item.id;
+            this.showDialog = true;
+        },
+        close() {
+            this.showDialog = false;
+        },
+    },
+};
+</script>
+  
+<style scoped lang="scss"></style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/table/sheng.vue b/src/views/modules/portrayal/house/cpts/table/sheng.vue
new file mode 100644
index 000000000..d4d1013cb
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/table/sheng.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="table">
+        <el-table>
+            <el-table-column label="序号" type="index" width="80" />
+            <el-table-column label="不满意事项类型" prop="scope" width="190" />
+            <el-table-column label="不满意事项描述" prop="problemDesc" width="" />
+            <el-table-column label="办理状态" prop="completeFlag" width="120" />
+            <el-table-column label="是否回访" prop="isReturn" width="120" />
+            <el-table-column label="操作" width="90" align="center">
+                <template slot-scope="data">
+                <el-button type="text" @click="handleView(data.row)">查看</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <shengdetail :showDialog="showDialog" :id="rowId" @close="close" />
+    </div>
+</template>
+  
+<script>
+import shengdetail from "../details/shengdetail";
+
+export default {
+    name: "community",
+    components: {
+        shengdetail
+    },
+    data() {
+        return {
+            
+            list: [],
+            total: 0,
+            rowId: null,
+            showDialog: false,
+        };
+    },
+    activated() {
+    },
+    watch: {
+    },
+    mounted() { },
+    props: {
+        tableData: {
+            type: Array,
+            default: []
+        }
+    },
+    methods: {
+        handleView(item) {
+            this.rowId = item.id;
+            this.showDialog = true;
+        },
+        close() {
+            this.showDialog = false;
+        },
+    },
+};
+</script>
+  
+<style scoped lang="scss"></style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/table/shequ.vue b/src/views/modules/portrayal/house/cpts/table/shequ.vue
new file mode 100644
index 000000000..4aac5e61d
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/table/shequ.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="table">
+        <el-table  :data="tableData">
+            <el-table-column label="序号" type="index" width="80" />
+            <el-table-column label="不满意事项类型" prop="scope" width="190" />
+            <el-table-column label="不满意事项描述" prop="problemDesc" width="" />
+            <el-table-column label="办理状态" prop="completeFlag" width="120" />
+            <el-table-column label="是否回访" prop="isReturn" width="120" />
+            <el-table-column label="操作" width="90" align="center">
+                <template slot-scope="data">
+                    <el-button type="text" @click="handleView(data.row)">查看</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <sqdetail :showDialog="showDialog" :id="rowId" @close="close" />
+    </div>
+</template>
+  
+<script>
+import sqdetail from "../details/sqdetail";
+export default {
+    name: "community",
+    components: {
+        sqdetail
+    },
+    data() {
+        return {
+            list: [],
+            total: 0,
+            rowId: null,
+            showDialog: false,
+        };
+    },
+    activated() {
+    },
+    watch: {
+        
+    },
+    mounted() { },
+    props: {
+        tableData: {
+            type: Array,
+            default: []
+        }
+    },
+    methods: {
+        handleView(item) {
+            this.rowId = item.id;
+            this.showDialog = true;
+        },
+        close() {
+            this.showDialog = false;
+        },
+    },
+};
+</script>
+  
+<style scoped lang="scss"></style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/table/shijian.vue b/src/views/modules/portrayal/house/cpts/table/shijian.vue
new file mode 100644
index 000000000..92294cd37
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/table/shijian.vue
@@ -0,0 +1,105 @@
+<template>
+    <div class="table">
+        <el-table  :data="tableData">
+            <el-table-column label="序号" type="index" width="80" />
+            <el-table-column label="事件类型" prop="categorycode" width="" />
+            <el-table-column label="事件描述" prop="eventcontent" width="" />
+            <el-table-column label="办理状态" prop="status" width="" />
+            <el-table-column label="接收时间" prop="happentime" width="180" />
+            <el-table-column label="操作" width="90" align="center">
+                <template slot-scope="data">
+                    <el-button type="text" @click="handleView(data.row)">查看</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <sjdetail :showDialog="showDialog" :id="rowId" @close="close" />
+
+    </div>
+</template>
+  
+<script>
+import sjdetail from "../details/sjdetail";
+export default {
+    components: {
+        sjdetail
+    },
+    data() {
+        return {
+            queryParams: {
+                residList: [],
+            },
+            list: [],
+            total: 0,
+            rowId: null,
+            showDialog: false,
+        };
+    },
+    activated() {
+    },
+    mounted() { },
+    props: {
+        resiId: {
+            type: String,
+            default: ''
+        },
+        tableData: {
+            type: Array,
+            default: []
+        }
+    },
+    methods: {
+        getList() {
+            let residList = [this.resiId]
+            this.list = [];
+            this.total = 0;
+            // this.$emit("changeTotal", { name: 2, total: 0 });
+            // 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访)
+            const completeFlags = {
+                "-2": "未知",
+                "-1": "不接受回访",
+                0: "接受回访/待回访",
+                1: "已回访",
+            };
+            // 省满意度列表
+            this.$http.post("/actual/base/peopleRoomOverview/communitySatisfactionPageList", { residList }).then(({ data: res }) => {
+                this.list = [{
+                    scope: "服务态度",
+                    problemDesc: "服务人员态度不好",
+                    completeFlag: "未办理",
+                    isReturn: "否"
+                },
+                {
+                    scope: "处理速度",
+                    problemDesc: "等待时间过长",
+                    completeFlag: "已办理",
+                    isReturn: "是"
+                },
+                {
+                    scope: "设备问题",
+                    problemDesc: "使用的机器经常故障",
+                    completeFlag: "办理中",
+                    isReturn: "否"
+                },
+                {
+                    scope: "其他",
+                    problemDesc: "场地不够干净",
+                    completeFlag: "已办理",
+                    isReturn: "是"
+                }]
+                this.total = res.data.length;
+                //   this.$emit("changeTotal", { name: 2, total: this.total });
+            });
+        },
+        handleView(item) {
+            this.rowId = item.id;
+            this.showDialog = true;
+        },
+        close() {
+            this.showDialog = false;
+        },
+    },
+};
+</script>
+  
+<style scoped lang="scss"></style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/cpts/table/xuqiu.vue b/src/views/modules/portrayal/house/cpts/table/xuqiu.vue
new file mode 100644
index 000000000..9b524c715
--- /dev/null
+++ b/src/views/modules/portrayal/house/cpts/table/xuqiu.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="table">
+        <el-table  :data="tableData">
+            <el-table-column label="序号" type="index" width="80" />
+            <el-table-column label="需求类型" prop="categoryName" width="" />
+            <el-table-column label="需求描述" prop="content" width="" />
+            <el-table-column label="办理情况" prop="status" width="" />
+            <el-table-column label="上报时间" prop="reportTime" width="180" />
+            <el-table-column label="操作" width="90" align="center">
+                <template slot-scope="data">
+                    <el-button type="text" @click="handleView(data.row)">查看</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <xqdetail :showDialog="showDialog" :id="rowId" @close="close" />
+    </div>
+</template>
+  
+<script>
+import xqdetail from "../details/xqdetail";
+
+export default {
+    name: "community",
+    components: {
+        xqdetail
+    },
+    data() {
+        return {
+            queryParams: {
+                residList: [],
+            },
+            list: [],
+            total: 0,
+            rowId: null,
+            showDialog: false,
+        };
+    },
+    activated() {
+    },
+
+    mounted() { },
+    props: {
+        tableData: {
+            type: Array,
+            default: []
+        }
+    },
+    methods: {
+        getList() {
+            let residList = [this.resiId]
+            this.list = [];
+            this.total = 0;
+            // this.$emit("changeTotal", { name: 2, total: 0 });
+            // 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访)
+            const completeFlags = {
+                "-2": "未知",
+                "-1": "不接受回访",
+                0: "接受回访/待回访",
+                1: "已回访",
+            };
+            // 省满意度列表
+            this.$http.post("/actual/base/peopleRoomOverview/communitySatisfactionPageList", { residList }).then(({ data: res }) => {
+                this.list = [{
+                    scope: "服务态度",
+                    problemDesc: "服务人员态度不好",
+                    completeFlag: "未办理",
+                    isReturn: "否"
+                },
+                {
+                    scope: "处理速度",
+                    problemDesc: "等待时间过长",
+                    completeFlag: "已办理",
+                    isReturn: "是"
+                },
+                {
+                    scope: "设备问题",
+                    problemDesc: "使用的机器经常故障",
+                    completeFlag: "办理中",
+                    isReturn: "否"
+                },
+                {
+                    scope: "其他",
+                    problemDesc: "场地不够干净",
+                    completeFlag: "已办理",
+                    isReturn: "是"
+                }]
+                this.total = res.data.length;
+                //   this.$emit("changeTotal", { name: 2, total: this.total });
+            });
+        },
+        handleView(item) {
+            this.rowId = item.id;
+            this.showDialog = true;
+        },
+        close() {
+            this.showDialog = false;
+        },
+    },
+};
+</script>
+  
+<style scoped lang="scss"></style>
+  
\ No newline at end of file
diff --git a/src/views/modules/portrayal/house/index.vue b/src/views/modules/portrayal/house/index.vue
new file mode 100644
index 000000000..98435f874
--- /dev/null
+++ b/src/views/modules/portrayal/house/index.vue
@@ -0,0 +1,346 @@
+<template>
+  <div class="g-main" v-loading="loading">
+    <div class="right">
+      <!-- <div class="editBtn">
+        <el-button
+          class="diy-button--add"
+          type="primary"
+          size="small"
+          @click.native="handelClickHouseEdit"
+          >编辑</el-button
+        >
+      </div> -->
+      <div class="title-small" id="base">房屋信息</div>
+      <el-row type="flex" justify="" class="f-m-top23">
+
+        <el-col :span="6" class="f-flex">
+          <div class="f-label">房屋编码：</div>
+          <div class="f-left8 f-font-color" v-if="houseDetailObj">
+            {{houseDetailObj.houseCode || "--" }}
+          </div>
+        </el-col>
+        <el-col :span="6" class="f-flex">
+          <div class="f-label">房屋类型：</div>
+          <div class="f-left8 f-font-color" v-if="houseDetailObj">
+            {{houseDetailObj.houseTypeName || "--" }}
+          </div>
+        </el-col>
+        <el-col :span="6" class="f-flex">
+          <div class="f-label">房屋用途：</div>
+          <div class="f-left8 f-font-color" v-if="houseDetailObj">
+            {{houseDetailObj.purposeName || "--" }}
+          </div>
+        </el-col>
+        <el-col :span="6" class="f-flex">
+          <div class="f-label">房屋状态：</div>
+          <div class="f-left8 f-font-color" v-if="houseDetailObj">
+            {{houseDetailObj.rentName || "--" }}
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row type="flex" justify="" class="f-m-top23">
+
+        <el-col :span="6" class="f-flex">
+          <div class="f-label">家庭标签：</div>
+          <div class="f-left8 f-font-color" v-if="houseDetailObj">
+            {{houseDetailObj.familyTags || "--" }}
+          </div>
+        </el-col>
+        <el-col :span="6" class="f-flex">
+          <div class="f-label">房主姓名：</div>
+          <div class="f-left8 f-font-color" v-if="houseDetailObj">
+            {{houseDetailObj.ownerName || "--" }}
+          </div>
+        </el-col>
+        
+        <el-col :span="6" class="f-flex">
+          <div class="f-label"><b>证件号：</b></div>
+            <div class="f-left8 f-font-color">
+              {{
+                houseDetailObj.ownerIdCard
+                  ? houseDetailObj.ownerIdCard
+                  : "--"
+              }}
+            </div>
+            <img
+              v-show="showFlagIdCardBtn"
+              src="@/assets/img/yanjing1.png"
+              alt=""
+              width="14px"
+              style="margin-left: 10px"
+            />
+            <img
+              v-show="!showFlagIdCardBtn"
+              src="@/assets/img/yanjing2.png"
+              alt=""
+              width="14px"
+              style="margin-left: 10px"
+            />
+            <el-button
+              type="text"
+              class="div-table-button--blue"
+              size="small"
+              @click="handelCLickShowCheckPassword('idCard')"
+              >{{ showFlagIdCardBtn ? "显示" : "隐藏" }}</el-button
+            >
+        </el-col>
+        <el-col :span="6" class="f-flex">
+          <div class="f-label"><b>联系电话：</b></div>
+          <div class="f-left8 f-font-color">
+            {{
+              houseDetailObj.ownerPhone
+                ? houseDetailObj.ownerPhone
+                : "--"
+            }}
+          </div>
+          <img
+            v-show="showFlagMobileBtn"
+            src="@/assets/img/yanjing1.png"
+            alt=""
+            width="14px"
+            style="margin-left: 10px"
+          />
+          <img
+            v-show="!showFlagMobileBtn"
+            src="@/assets/img/yanjing2.png"
+            alt=""
+            width="14px"
+            style="margin-left: 10px"
+          />
+          <el-button
+            type="text"
+            class="div-table-button--blue"
+            size="small"
+            @click="handelCLickShowCheckPassword('mobile')"
+            >{{ showFlagMobileBtn ? "显示" : "隐藏" }}</el-button
+          >
+        </el-col>
+      </el-row>
+
+      <el-row type="flex" justify="" class="f-m-top23">
+
+        <el-col :span="6" class="f-flex">
+          <div class="f-label">备注：</div>
+          <div class="f-left8 f-font-color" v-if="houseDetailObj">
+            {{houseDetailObj.remark || "--" }}
+          </div>
+        </el-col>
+        <el-col :span="6" class="f-flex">
+          <div class="f-label">创建时间：</div>
+          <div class="f-left8 f-font-color" v-if="houseDetailObj">
+            {{houseDetailObj.createdTime || "--" }}
+          </div>
+        </el-col>
+        <el-col :span="6" class="f-flex">
+          <div class="f-label">更新时间：</div>
+          <div class="f-left8 f-font-color" v-if="houseDetailObj">
+            {{houseDetailObj.updatedTime || "--" }}
+          </div>
+        </el-col>
+      </el-row>
+
+
+      <div class="title-small">关系图谱
+        <el-button type="primary" style="margin-left: 20px;" size="small"
+                            @click="addResident()">新增居民</el-button>
+      </div>
+      
+      <graph
+        :houseInfo="houseDetailObj"
+        v-if="houseDetailObj"
+      />
+      
+      <div class="title-small" id="businessRecord">业务记录</div>
+        <business-record :houseId="houseId"></business-record>
+      <div class="title-small" id="updateRecord">更新记录</div>
+        <change-record :tableData="houseChangeRecordList"></change-record>
+    </div>
+    <el-dialog title="密码验证" :visible.sync="showCheckPassword">
+      <el-form :model="form" :rules="rules" ref="form">
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="form.password"
+            autocomplete="off"
+            type="password"
+            placeholder="请输入当前账号密码"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showCheckPassword = false">取 消</el-button>
+        <el-button type="primary" @click="handelClickCheckPassword"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import graph from "./cpts/graph.vue";
+import businessRecord from "./cpts/businessRecord.vue";
+import changeRecord from "./cpts/table/changeRecord.vue";
+
+export default {
+  data() {
+    return {
+      loading: true,
+      checkType: "edit", //edit或者view
+      houseChangeRecordList: [], //更新记录
+      houseDetailObj: {}, //房屋详情
+      showFlagIdCardBtn: true,
+      showFlagMobileBtn: true,
+
+      showCheckPassword: false,
+      houseId:"",
+
+      form: {
+        password: "", //脱敏确认密码
+      },
+      rules: {
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+      },
+    };
+  },
+  components: { graph, businessRecord, changeRecord },
+  created() {
+  },
+  mounted() {},
+  activated() {},
+  methods: {
+    // 更新记录
+    async getChangeRecordDetailById() {
+      try {
+        const { data } = await this.$http.get(
+          `/actual/base/peopleRoomOverview/houseResidentChangeRecord?houseId=${this.houseId}`
+        );
+        if (data.data == null) {
+          this.houseChangeRecordList = [];
+        } else {
+          this.houseChangeRecordList = data.data;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    
+    getHouseDetail() {
+      this.$http
+        .post(`/actual/base/communityHouse/getMaskedHouseDeatilById/${this.houseId}`)
+        .then(async (res) => {
+          if (res.data.code === 0) {
+            this.houseDetailObj = res.data.data || {};
+            
+          } else if (res.data.code >= 8000) {
+            this.houseDetailObj = {};
+            this.$message.error(res.data.msg);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+      this.loading = false;
+    },
+    handelClickHouseEdit() {
+      this.checkType = "edit";
+      this.showCheckPassword = true;
+    },
+    
+    handelCLickShowCheckPassword(type) {
+      this.form.password = "";
+      this.checkType = "view";
+      if (type === "idCard") {
+        if (this.showFlagIdCardBtn) {
+          this.showCheckPassword = true;
+        } else {
+          this.showFlagIdCardBtn = true;
+          this.$set(
+            this.houseDetailObj,
+            "ownerIdCard",
+            this.houseDetailObj.ownerIdCard.substr(0, 11) +
+              "****" +
+              this.houseDetailObj.ownerIdCard.substr(16, 2)
+          );
+        }
+      } else if (type === "mobile") {
+        if (this.showFlagMobileBtn) {
+          this.showCheckPassword = true;
+        } else {
+          this.showFlagMobileBtn = true;
+          this.$set(
+            this.houseDetailObj,
+            "ownerPhone",
+            this.houseDetailObj.ownerPhone.substr(0, 3) +
+              "****" +
+              this.houseDetailObj.ownerPhone.substr(7, 4)
+          );
+        }
+      }
+      this.tuominType = type;
+    },
+    
+    handelClickCheckPassword() {
+      this.$refs.form.validate((vali) => {
+        if (vali) {
+          this.handleSaveTuomin(this.form.password);
+        } else {
+          return false;
+        }
+      });
+    },
+
+    addResident(){
+      // this.$router.push({ name: 'add-resi' });
+      this.$router.push({
+            name: "add-resi",
+            params: { agencyId: "1673584241869238273",gridId: "1673585475279826946",villageId:"1673600667388780545",buildId:"1673600667527192577",unitId:"1673600667577524226",homeId:"1673600737530126338"},
+          });
+    },
+
+    async handleSaveTuomin(password) {
+      const url = `/actual/base/communityHouse/getClearHouseDeatilById/${this.houseId}`;
+      let parm = {
+        password,
+      };
+      const { data, code, msg } = await requestPost(url, parm);
+      if (code === 0) {
+        if (this.tuominType === "mobile") {
+            this.$set(this.houseDetailObj, "ownerPhone", data.ownerPhone);
+            this.showFlagMobileBtn = !this.showFlagMobileBtn;
+          }
+          if (this.tuominType === "idCard") {
+            this.$set(this.houseDetailObj, "ownerIdCard", data.ownerIdCard);
+            this.showFlagIdCardBtn = !this.showFlagIdCardBtn;
+          }
+          this.showCheckPassword = false;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+  computed: {},
+  watch: {
+    "$store.state.huaXiang.houseInfo.houseId": {
+      handler(newValue, oldValue) {
+        this.houseId = newValue;
+        this.houseDetailObj = {};
+        this.houseGraphObj = {};
+
+        this.getHouseDetail();
+        this.getChangeRecordDetailById();
+        
+        this.loading = false;
+      },
+      deep: true, // 开启深度监听
+      immediate: true, // 立即触发一次handler
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/pages/resiInfo.scss";
+@import "@/assets/scss/modules/management/list-main.scss";
+</style>
diff --git a/vue.config.js b/vue.config.js
index fa6a9a897..d8dc2c0d7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -35,8 +35,8 @@ module.exports = {
         target: "http://bipaas.elinkservice.cn", // 我们要代理的真实接口地址
       },
       "/api": {
-        // target: "http://219.146.91.110:30801", // 测试地址
-        target: "http://localhost:8080", // 本地地址
+        target: "http://219.146.91.110:30801", // 测试地址
+        // target: "http://192.168.1.60:8080", // 本地地址
         // target: "https://epmet-preview.elinkservice.cn", // 演示地址
         changeOrigin: true,
         pathRewrite: {