diff --git a/src/assets/images/manyidu/dn_bg3.png b/src/assets/images/manyidu/dn_bg3.png
new file mode 100644
index 000000000..e67a57f6d
Binary files /dev/null and b/src/assets/images/manyidu/dn_bg3.png differ
diff --git a/src/views/dataBoard/cpts/family/components/Breadcrumb/index.vue b/src/views/dataBoard/cpts/family/components/Breadcrumb/index.vue
new file mode 100644
index 000000000..426e82bc2
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/components/Breadcrumb/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div class="breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item v-for="(item,index) in list" :to="item.path" :key="index">{{ item.name }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Breadcrumb",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.breadcrumb {
+  background: url("@/assets/images/manyidu/breadcrumb_bg.png") no-repeat left top;
+  height: 50px;
+  color: #fff;
+  padding-left: 20px;
+  display: flex;
+  align-items: center;
+
+  /deep/ .el-breadcrumb__inner {
+    color: #fff!important;
+
+    &.is-link {
+      color: #A3B9DA!important;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/cpts/family/components/Pagination/index.vue b/src/views/dataBoard/cpts/family/components/Pagination/index.vue
new file mode 100644
index 000000000..9722ee858
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/components/Pagination/index.vue
@@ -0,0 +1,138 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+        :background="background"
+        :current-page.sync="currentPage"
+        :page-size.sync="pageSize"
+        :layout="layout"
+        :page-sizes="pageSizes"
+        :pager-count="pagerCount"
+        :total="total"
+        v-bind="$attrs"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'total, prev, pager, next, jumper, sizes'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.pagination-container {
+  padding: 32px 16px;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+
+  /deep/ .el-pagination__total {
+    position: absolute;
+    left: 16px;
+    top: 32px;
+    color: #A3B9DA;
+  }
+  /deep/ .el-pagination__jump {
+    color: #A3B9DA;
+  }
+  /deep/ .el-pagination.is-background .btn-next,
+  /deep/ .el-pagination.is-background .btn-prev,
+  /deep/ .el-pagination.is-background .el-pager li {
+    background: rgba(0,23,66,0.3);
+    border: 1px solid #126AC5;
+    border-radius: 2px;
+    color: #A3B9DA;
+  }
+  /deep/ .el-input__inner {
+    background: rgba(0,23,66,0.3);
+    border: 1px solid #126AC5;
+    border-radius: 2px;
+    color: #A3B9DA;
+  }
+  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background: #1A95FF;
+    border-radius: 2px;
+    color: #FFFFFF!important;
+  }
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/components/Tabs/index.vue b/src/views/dataBoard/cpts/family/components/Tabs/index.vue
new file mode 100644
index 000000000..70597d2a8
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/components/Tabs/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="tabs">
+    <div class="tab" :class="value2 === item.value?'cur':''" v-for="(item,index) in list" @click="tabClick(index)" :key="index">
+      {{item.label}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Tabs",
+  props: {
+    list:{
+      type: Array,
+      default: () => []
+    },
+    value:{
+      type: [String,Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      value2: this.value,
+    }
+  },
+  mounted() {
+    this.value2 = this.value
+  },
+  methods: {
+    tabClick(index) {
+      this.value2 = this.list[index].value
+      this.$emit('changeVal',this.value)
+      this.$emit('changeLabel',this.list[index].label)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.tabs {
+  display: flex;
+  .tab {
+    cursor: pointer;
+    padding: 10px 11px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #96B1CE;
+    min-width: 120px;
+    background: url("@/assets/images/manyidu/tab.png") repeat-x top left;
+    margin-right: 4px;
+    text-align: center;
+    &.cur {
+      color: #FFFFFF;
+      background: url("@/assets/images/manyidu/tab_cur.png") repeat-x top left;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/cpts/family/components/Title/index.vue b/src/views/dataBoard/cpts/family/components/Title/index.vue
new file mode 100644
index 000000000..6faadb2bc
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/components/Title/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="title" :class="noBg?'no-bg':''">
+    <span class="text">
+      <span class="txt">{{ text }}</span>
+      <span class="text-shadow">{{ text }}</span>
+    </span>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Title",
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    noBg: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.title {
+  background: url(../../../../../assets/images/shuju/overview/title-bg.png)
+    no-repeat 0 0 fixed;
+  padding: 8px 16px 8px 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .text {
+    position: relative;
+    font-size: 22px;
+    font-family: HYShuYuanHeiJ;
+    font-weight: 400;
+
+    .txt {
+      color: #1f79ff;
+      background: linear-gradient(0deg, #2dc1ff 0%, #ffffff 58.5205078125%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      position: relative;
+      z-index: 2;
+    }
+
+    .text-shadow {
+      top: 4px;
+      left: 3px;
+      position: absolute;
+      color: #020f21;
+      white-space: nowrap;
+    }
+  }
+}
+.no-bg {
+  background: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/cpts/family/index.vue b/src/views/dataBoard/cpts/family/index.vue
new file mode 100644
index 000000000..49e9c2837
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="10">
+        <data-title title="家庭标签">
+        </data-title>
+        <MatterDetails />
+        <data-title title="家庭关系" />
+        <Family @setJuminData="setJuminData" />
+      </el-col>
+      <el-col :span="13" :offset="1">
+        <data-title title="居民各项业务记录" />
+        <BusinessRecords :juminArr="juminArr" />
+        <data-title title="人口变化情况" />
+        <EnjoyService />
+      </el-col>
+    </el-row>
+    <resi-details
+      @close="popupShow = false"
+      :resi-id="resId"
+      v-if="popupShow"
+    />
+  </div>
+</template>
+
+<script>
+import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
+import MatterDetails from "./modules/MatterDetails";
+import Family from "./modules/Family";
+import BusinessRecords from "./modules/BusinessRecords";
+import EnjoyService from "./modules/EnjoyService";
+import PointsRecord from "./modules/PointsRecord";
+import resiDetails from "@/views/dataBoard/cpts/resi-details";
+
+export default {
+  name: "OrgPersonnel",
+  components: {
+    MatterDetails,
+    Family,
+    BusinessRecords,
+    EnjoyService,
+    PointsRecord,
+    dataTitle,
+    resiDetails,
+  },
+  data() {
+    return {
+      popupShow: false,
+      resId: "",
+      juminArr: [],
+    };
+  },
+  mounted() {
+    const query = this.$route.query;
+    this.resId = query.user_id;
+  },
+  methods: {
+    setJuminData(arr) {
+      this.juminArr = arr;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.sub-title {
+  background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center;
+  font-size: 18px;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 22px;
+  padding-left: 26px;
+  margin-bottom: 20px;
+}
+.breadcrumb {
+  margin-bottom: 25px;
+}
+a:hover {
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/BusinessRecords.vue b/src/views/dataBoard/cpts/family/modules/BusinessRecords.vue
new file mode 100644
index 000000000..eb9028f0d
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/BusinessRecords.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="business-records">
+    <Tabs v-model="type" :list="typeList" @changeVal="typeChange" />
+    <complaint
+      @changeTotal="changeTotal"
+      :juminArr="juminArr"
+      v-show="type == 1"
+    />
+    <economize
+      @changeTotal="changeTotal"
+      :juminArr="juminArr"
+      v-show="type == 2"
+    />
+    <community
+      @changeTotal="changeTotal"
+      :juminArr="juminArr"
+      v-show="type == 3"
+    />
+    <reporting-events
+      @changeTotal="changeTotal"
+      :juminArr="juminArr"
+      v-show="type == 4"
+    />
+    <resident
+      @changeTotal="changeTotal"
+      :juminArr="juminArr"
+      v-show="type == 5"
+    />
+    <giveService
+      @changeTotal="changeTotal"
+      :juminArr="juminArr"
+      v-show="type == 6"
+    />
+  </div>
+</template>
+
+<script>
+import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
+import complaint from "./businessTables/complaint.vue";
+import economize from "./businessTables/economize.vue";
+import community from "./businessTables/community.vue";
+import reportingEvents from "./businessTables/reporting-events.vue";
+import resident from "./businessTables/resident.vue";
+import giveService from "./businessTables/give-service.vue";
+
+export default {
+  name: "BusinessRecords",
+  props: {
+    juminArr: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    Tabs,
+    complaint,
+    reportingEvents,
+    economize,
+    community,
+    resident,
+    giveService,
+  },
+  data() {
+    return {
+      type: 1,
+      typeList: [
+        {
+          label: "12345投诉",
+          value: 1,
+        },
+        {
+          label: "省满意度调查",
+          value: 2,
+        },
+        {
+          label: "社区满意度自查",
+          value: 3,
+        },
+        {
+          label: "上报事件",
+          value: 4,
+        },
+        {
+          label: "居民需求",
+          value: 5,
+        },
+        {
+          label: "社区服务",
+          value: 6,
+        },
+      ],
+      typeLists: [
+        {
+          label: "12345投诉",
+          value: 1,
+        },
+        {
+          label: "省满意度调查",
+          value: 2,
+        },
+        {
+          label: "社区满意度自查",
+          value: 3,
+        },
+        {
+          label: "上报事件",
+          value: 4,
+        },
+        {
+          label: "居民需求",
+          value: 5,
+        },
+        {
+          label: "社区服务",
+          value: 6,
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    typeChange(e) {
+      this.type = e;
+    },
+    changeTotal(item) {
+      this.typeList[item.name].label = item.total
+        ? `${this.typeLists[item.name].label}（${item.total}）`
+        : this.typeLists[item.name].label;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-top: 12px;
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td,
+  /deep/ .el-table th,
+  /deep/ .el-table tr {
+    padding: 14px !important;
+    border: none !important;
+    min-height: 52px;
+  }
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+    background: rgba(14, 56, 115, 0.4);
+  }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #a3b9da !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none !important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none !important;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/EnjoyService.vue b/src/views/dataBoard/cpts/family/modules/EnjoyService.vue
new file mode 100644
index 000000000..0a7dcb6cd
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/EnjoyService.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="table">
+    <el-table :data="list" max-height="390px" height="390px">
+      <el-table-column label="序号" type="index" width="80" />
+      <el-table-column label="变更人" prop="resiName" width="140" />
+      <el-table-column label="变更类型" prop="typeName" width="" />
+      <el-table-column label="变更前" prop="beforeChange" width="120" />
+      <el-table-column label="变更后" prop="afterChange" width="120" />
+      <el-table-column label="操作人" prop="operatorName" width="120" />
+      <el-table-column label="调整时间" prop="changeTime" width="190" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "community",
+  props: {
+    juminArr: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      houseId: "",
+      list: [],
+      total: 0,
+    };
+  },
+  created() {
+    const query = this.$route.query;
+    this.houseId = query.houseId;
+    this.getList();
+  },
+  methods: {
+    getList() {
+      // 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访)
+      const completeFlags = {
+        "-2": "未知",
+        "-1": "不接受回访",
+        0: "接受回访/待回访",
+        1: "已回访",
+      };
+      // 省满意度列表
+      this.$http
+        .get(
+          "/actual/base/peopleRoomOverview/houseResidentChangeRecord?houseId=" +
+            this.houseId
+        )
+        .then(({ data: res }) => {
+          console.log('res::',res);
+          this.list = res.data.map((item) => {
+            return {
+              ...item,
+              completeFlag: completeFlags[item.completeFlag],
+            };
+          });
+          this.total = res.data.length;
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td,
+  /deep/ .el-table th,
+  /deep/ .el-table tr {
+    padding: 14px !important;
+    border: none !important;
+    min-height: 52px;
+  }
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+    background: rgba(14, 56, 115, 0.4);
+  }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #a3b9da !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none !important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none !important;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/Family.vue b/src/views/dataBoard/cpts/family/modules/Family.vue
new file mode 100644
index 000000000..4e9396f3e
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/Family.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="family">
+    <div class="tag" v-for="item in data" :key="item.id">
+      <div>
+        {{ item.name }}
+        <span v-if="item.houseHolderRel"
+          >({{ item.houseHolderRel == "本人" ? "户主" : item.houseHolderRel }})
+        </span>
+      </div>
+      <div v-if="item.householdSituation">
+        入户状态：{{ item.householdSituation }}
+      </div>
+      <div>居民分类：{{ getType(item.classificationOfInhabitantsList) }}</div>
+    </div>
+    <div style="padding-top: 220px; margin-left: 148px">
+      <div class="user-name">{{ hzData.name }}</div>
+      <div class="user-gx">（户主）</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Family",
+  data() {
+    return {
+      data: [],
+      queryParam: {
+        type: "1",
+      },
+      info: {},
+    };
+  },
+  computed: {
+    getType() {
+      return (arr) => {
+        if (arr.length > 0) {
+          let txt = "";
+          arr.forEach((item, index) => {
+            if (arr.length == index + 1) {
+              txt = txt + item;
+            } else {
+              txt = txt + item + ",";
+            }
+          });
+          return txt;
+        } else {
+          return "暂无";
+        }
+      };
+    },
+  },
+  created() {
+    const query = this.$route.query;
+    this.queryParam.resid = query.houseId;
+    this.getDatas();
+  },
+  methods: {
+    getDatas() {
+      this.$http
+        .post(
+          "/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=1&resid=" +
+            this.queryParam.resid
+        )
+        .then(({ data: res }) => {
+          const data = res.data;
+          this.data = data;
+          this.hzData = data.filter((item) => item.houseHolderRel == "本人")[0];
+          this.$emit("setJuminData", data);
+        });
+    },
+    // getUserInfo() {
+    //   this.$http
+    //     .post(
+    //       "/actual/base/peopleRoomOverview/getPersonalFile?resid=" +
+    //         this.queryParam.resid,
+    //       this.queryParam
+    //     )
+    //     .then(({ data: res }) => {
+    //       this.info = res.data;
+    //     });
+    // },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.family {
+  width: 464px;
+  height: 340px;
+  background: url("@/assets/images/manyidu/gx_bg.png") no-repeat center;
+  position: relative;
+  margin: 40px auto;
+}
+.tag {
+  font-size: 14px;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 22px;
+  padding: 18px 24px;
+  box-sizing: border-box;
+  position: absolute;
+  background: url("@/assets/images/manyidu/gx_big.png") no-repeat center;
+  background-size: 100% 100%;
+  width: 180px;
+  min-height: 80px;
+  &:nth-of-type(1) {
+    left: -24px;
+    top: -24px;
+  }
+  &:nth-of-type(2) {
+    right: -24px;
+    top: -24px;
+  }
+  &:nth-of-type(3) {
+    left: -24px;
+    bottom: -20px;
+  }
+  &:nth-of-type(4) {
+    right: -24px;
+    top: 274px;
+  }
+  &:nth-of-type(5) {
+    left: -94px;
+    top: 74px;
+  }
+  &:nth-of-type(6) {
+    right: -94px;
+    top: 74px;
+  }
+  &:nth-of-type(7) {
+    left: -124px;
+    top: 174px;
+  }
+  &:nth-of-type(8) {
+    right: -124px;
+    top: 174px;
+  }
+}
+.user-name {
+  width: 174px;
+  text-align: center;
+  height: 17px;
+  font-size: 18px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 22px;
+  margin-top: -12px;
+}
+.user-gx {
+  width: 174px;
+  text-align: center;
+  height: 17px;
+  font-size: 16px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 32px;
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/MatterDetails.vue b/src/views/dataBoard/cpts/family/modules/MatterDetails.vue
new file mode 100644
index 000000000..8f99c4eba
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/MatterDetails.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="matter-details">
+    <div class="user-img">
+      <!-- <img src="@/assets/images/manyidu/dn_bg1.png" alt="" /> -->
+      <div class="user-name">{{ data.name }}</div>
+    </div>
+    <div class="tags">
+      <div
+        :class="`tag ${index % 2 == 0 ? 'small' : ''} ${
+          item.red == '0' ? '' : 'red'
+        }`"
+        v-for="(item, index) in data"
+        :key="item.tagName"
+      >
+        {{ item.tagName }}
+      </div>
+    </div>
+    <div class="jtxxdz">四季景园1号楼1单元101</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MatterDetails",
+  data() {
+    return {
+      data: [],
+      queryParams: {},
+      genderArr: ["未知", "男", "女"],
+    };
+  },
+
+  created() {
+    const query = this.$route.query;
+    this.queryParams.houseId = query.houseId;
+    this.getDatas();
+  },
+  methods: {
+    getDatas() {
+      this.$http
+        .get(
+          "/actual/base/peopleRoomOverview/getHouseTag?houseId=" +
+            this.queryParams.houseId
+        )
+        .then(({ data: res }) => {
+          this.data = res.data;
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.jtxxdz {
+  width: 100%;
+  text-align: center;
+  height: 14px;
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #ffffff !important;
+  line-height: 32px;
+  position: absolute;
+  top:370px;
+  left: 0;
+}
+.matter-details {
+  width: 607px;
+  height: 372px;
+  background: url("@/assets/images/manyidu/dn_bg3.png") no-repeat center bottom;
+  background-size: 454px 230px;
+  position: relative;
+  margin: 12px auto 60px;
+}
+.user-img {
+  position: absolute;
+  left: calc(50% - 87px);
+  top: calc(50% - 37px);
+}
+.tag {
+  position: absolute;
+  background: url("@/assets/images/manyidu/dn_big.png") center no-repeat;
+  width: 108px;
+  height: 107px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 16px;
+  box-sizing: border-box;
+  padding: 24px;
+  text-align: center;
+  word-break: break-all;
+  &.small {
+    width: 89px;
+    height: 89px;
+    background: url("@/assets/images/manyidu/dn_small.png") center no-repeat;
+    padding: 16px;
+  }
+  &.red {
+    background: url("@/assets/images/manyidu/dn_red.png") center no-repeat;
+    color: #fe0000;
+  }
+  &:nth-of-type(1) {
+    left: 0;
+    bottom: 15px;
+  }
+
+  &:nth-of-type(2) {
+    left: 42px;
+    bottom: 185px;
+  }
+
+  &:nth-of-type(3) {
+    left: 194px;
+    bottom: 245px;
+  }
+
+  &:nth-of-type(4) {
+    left: 384px;
+    bottom: 240px;
+  }
+
+  &:nth-of-type(5) {
+    left: 499px;
+    bottom: 157px;
+  }
+
+  &:nth-of-type(6) {
+    left: 453px;
+    bottom: 10px;
+  }
+}
+
+.user-name {
+  width: 174px;
+  text-align: center;
+  height: 17px;
+  font-size: 18px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 22px;
+  margin-top: -12px;
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/PointsRecord.vue b/src/views/dataBoard/cpts/family/modules/PointsRecord.vue
new file mode 100644
index 000000000..c671a394a
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/PointsRecord.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="enjoy-service">
+      <div class="enjoy-service-item" v-for="(item, index) in data">
+        <div class="num">+{{ item.classificationNum }}</div>
+        <div class="info">
+          <div class="title">{{ item.classification }}</div>
+          <div class="time">{{ item.recordTime }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PointsRecord",
+  data() {
+    return {
+      data:[],
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.$http
+        .get("/actual/base/peopleRoomOverview/recorHistory")
+        .then(({ data: res }) => {
+          this.data = res.data;
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.enjoy-service {
+  padding-left: 26px;
+  margin-top: 12px;
+}
+.enjoy-service-item {
+  color: #ffffff;
+  display: flex;
+  padding: 14px 16px 14px;
+  margin-bottom: 8px;
+  background: #07266b;
+  .num {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 22px;
+  }
+  .info {
+    font-size: 14px;
+    margin-left: 40px;
+    .title {
+      font-weight: 500;
+      margin-bottom: 10px;
+    }
+    .time {
+      font-weight: 400;
+      color: #a3b9da;
+    }
+  }
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/businessTables/community.vue b/src/views/dataBoard/cpts/family/modules/businessTables/community.vue
new file mode 100644
index 000000000..b4d3c4ad3
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/businessTables/community.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="table">
+    <el-table :data="list" max-height="363px" height="363px">
+      <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">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "community",
+  props: {
+    juminArr: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      queryParams: {
+        residList: [],
+      },
+      list: [],
+      total: 0,
+    };
+  },
+  watch: {
+    juminArr(newVal, oldVal) {
+      if (newVal.length > 0) {
+        this.queryParams.residList = newVal.map((item) => {
+          return item.id;
+        });
+        this.getList();
+      }
+    },
+  },
+  methods: {
+    getList() {
+      // 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访)
+      const completeFlags = {
+        "-2": "未知",
+        "-1": "不接受回访",
+        0: "接受回访/待回访",
+        1: "已回访",
+      };
+      // 省满意度列表
+      this.$http
+        .post(
+          "/actual/base/peopleRoomOverview/communitySatisfactionPageList",
+          this.queryParams
+        )
+        .then(({ data: res }) => {
+          this.list = res.data.map((item) => {
+            return {
+              ...item,
+              completeFlag: completeFlags[item.completeFlag],
+            };
+          });
+          this.total = res.data.length;
+          this.$emit("changeTotal", { name: 2, total: this.total });
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td,
+  /deep/ .el-table th,
+  /deep/ .el-table tr {
+    padding: 14px !important;
+    border: none !important;
+    min-height: 52px;
+  }
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+    background: rgba(14, 56, 115, 0.4);
+  }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #a3b9da !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none !important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none !important;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/businessTables/complaint.vue b/src/views/dataBoard/cpts/family/modules/businessTables/complaint.vue
new file mode 100644
index 000000000..2f05286a0
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/businessTables/complaint.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="table">
+    <el-table :data="list" max-height="363px" height="363px">
+      <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">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "complaint",
+  props: {
+    juminArr: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        eventType: "3",
+        residList: [],
+      },
+      list: [],
+      total: 0,
+    };
+  },
+  watch: {
+    juminArr(newVal, oldVal) {
+      if (newVal.length > 0) {
+        this.queryParams.residList = newVal.map((item) => {
+          return item.id;
+        });
+        this.getList();
+      }
+    },
+  },
+  methods: {
+    getList() {
+      // 事件分页查询
+      const statusArr = {
+        processing: "处理中",
+        closed_case: "已办结",
+      };
+      const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"];
+      this.$http
+        .post("/actual/base/peopleRoomOverview/eventPageList", this.queryParams)
+        .then(({ data: res }) => {
+          this.list = res.data.list.map((item) => {
+            return {
+              ...item,
+              status: item.status?statusArr[item.status]:null,
+              marktype: marktypes[item.marktype],
+            };
+          });
+          this.total = res.data.total;
+          this.$emit("changeTotal", { name: 0, total: this.total });
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td,
+  /deep/ .el-table th,
+  /deep/ .el-table tr {
+    padding: 14px !important;
+    border: none !important;
+    min-height: 52px;
+  }
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+    background: rgba(14, 56, 115, 0.4);
+  }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #a3b9da !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none !important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none !important;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/businessTables/economize.vue b/src/views/dataBoard/cpts/family/modules/businessTables/economize.vue
new file mode 100644
index 000000000..0459a1b0f
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/businessTables/economize.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="table">
+    <el-table :data="list" max-height="363px" height="363px">
+      <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">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "economize",
+  props: {
+    juminArr: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      queryParams: {
+        residList: [],
+      },
+      list: [],
+      total: 0,
+    };
+  },
+  watch: {
+    juminArr(newVal, oldVal) {
+      if (newVal.length > 0) {
+        this.queryParams.residList = newVal.map((item) => {
+          return item.id;
+        });
+        this.getList();
+      }
+    },
+  },
+  methods: {
+    getList() {
+      // 省满意度列表
+      this.$http
+        .post("/actual/base/peopleRoomOverview/provincialSatisfactionPageList", this.queryParams)
+        .then(({ data: res }) => {
+          this.list = res.data;
+          this.total = res.data.length;
+          this.$emit("changeTotal", { name: 1, total: this.total });
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td,
+  /deep/ .el-table th,
+  /deep/ .el-table tr {
+    padding: 14px !important;
+    border: none !important;
+    min-height: 52px;
+  }
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+    background: rgba(14, 56, 115, 0.4);
+  }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #a3b9da !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none !important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none !important;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/businessTables/give-service.vue b/src/views/dataBoard/cpts/family/modules/businessTables/give-service.vue
new file mode 100644
index 000000000..4be3e89e3
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/businessTables/give-service.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="table">
+    <el-table :data="list" max-height="363px" height="363px">
+      <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">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "give-service",
+  props: {
+    juminArr: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      queryParams: {
+        residList: [],
+      },
+      list: [],
+      total: 0,
+    };
+  },
+  watch: {
+    juminArr(newVal, oldVal) {
+      if (newVal.length > 0) {
+        this.queryParams.residList = newVal.map((item) => {
+          return item.id;
+        });
+        this.getList();
+      }
+    },
+  },
+  methods: {
+    getList() {
+      // 社区服务列表
+      this.$http
+        .post("/actual/base/peopleRoomOverview/communityServicePageList", this.queryParams)
+        .then(({ data: res }) => {
+          this.list = res.data.map((item) => {
+            return {
+              ...item,
+            };
+          });
+          this.total = res.data.length;
+          this.$emit("changeTotal", { name: 5, total: this.total });
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td,
+  /deep/ .el-table th,
+  /deep/ .el-table tr {
+    padding: 14px !important;
+    border: none !important;
+    min-height: 52px;
+  }
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+    background: rgba(14, 56, 115, 0.4);
+  }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #a3b9da !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none !important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none !important;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/businessTables/reporting-events.vue b/src/views/dataBoard/cpts/family/modules/businessTables/reporting-events.vue
new file mode 100644
index 000000000..3852446e9
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/businessTables/reporting-events.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="table">
+    <el-table :data="list" max-height="363px" height="363px">
+      <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">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "reporting-events",
+  props: {
+    juminArr: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        residList: [],
+      },
+      list: [],
+      total: 0,
+    };
+  },
+  watch: {
+    juminArr(newVal, oldVal) {
+      if (newVal.length > 0) {
+        this.queryParams.residList = newVal.map((item) => {
+          return item.id;
+        });
+        this.getList();
+      }
+    },
+  },
+  methods: {
+    getList() {
+      // 事件分页查询
+      const statusArr = {
+        processing: "处理中",
+        closed_case: "已办结",
+      };
+      const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"];
+      this.$http
+        .post("/actual/base/peopleRoomOverview/eventPageList", this.queryParams)
+        .then(({ data: res }) => {
+          this.list = res.data.list.map((item) => {
+            return {
+              ...item,
+              status: item.status?statusArr[item.status]:null,
+              marktype: marktypes[item.marktype],
+            };
+          });
+          this.total = res.data.total;
+          this.$emit("changeTotal", { name: 3, total: this.total });
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td,
+  /deep/ .el-table th,
+  /deep/ .el-table tr {
+    padding: 14px !important;
+    border: none !important;
+    min-height: 52px;
+  }
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+    background: rgba(14, 56, 115, 0.4);
+  }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #a3b9da !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none !important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none !important;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/cpts/family/modules/businessTables/resident.vue b/src/views/dataBoard/cpts/family/modules/businessTables/resident.vue
new file mode 100644
index 000000000..680a16b7f
--- /dev/null
+++ b/src/views/dataBoard/cpts/family/modules/businessTables/resident.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="table">
+    <el-table :data="list" max-height="363px" height="363px">
+      <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">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "complaint",
+  props: {
+    juminArr: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      queryParams: {
+        residList: [],
+      },
+      list: [],
+      total: 0,
+    };
+  },
+  watch: {
+    juminArr(newVal, oldVal) {
+      if (newVal.length > 0) {
+        this.queryParams.residList = newVal.map((item) => {
+          return item.id;
+        });
+        this.getList();
+      }
+    },
+  },
+  methods: {
+    getList() {
+      // 居民需求列表
+      this.$http
+        .post(
+          "/actual/base/peopleRoomOverview/demandOfResidentsPageList",
+          this.queryParams
+        )
+        .then(({ data: res }) => {
+          this.list = res.data.map((item) => {
+            return {
+              ...item,
+            };
+          });
+          this.total = res.data.length;
+          this.$emit("changeTotal", { name: 4, total: this.total });
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.business-records {
+  margin-bottom: 25px;
+}
+.table {
+  /deep/ .el-table td,
+  /deep/ .el-table th,
+  /deep/ .el-table tr {
+    padding: 14px !important;
+    border: none !important;
+    min-height: 52px;
+  }
+  /deep/ .el-table td,
+  /deep/ .el-table th {
+    background: none !important;
+  }
+  /deep/ .el-table td {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
+  }
+
+  /deep/ .el-table tr {
+    background: none;
+    &:hover {
+      background-color: rgba(26, 149, 255, 0.3) !important;
+    }
+  }
+  /deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
+    background: rgba(14, 56, 115, 0.4);
+  }
+
+  /deep/ .el-table {
+    background: none !important;
+
+    &:before {
+      background: none;
+    }
+  }
+  /deep/ .el-table__header-wrapper tr {
+    color: #a3b9da !important;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 0.76;
+    background: none;
+    &:hover {
+      background: none !important;
+    }
+  }
+  /deep/ .el-table__header-wrapper {
+    background: none !important;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/cpts/personnel/modules/Family.vue b/src/views/dataBoard/cpts/personnel/modules/Family.vue
index 57886409d..6fda2fc8c 100644
--- a/src/views/dataBoard/cpts/personnel/modules/Family.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/Family.vue
@@ -12,6 +12,12 @@
       </div>
       <div>居民分类：{{ getType(item.classificationOfInhabitantsList) }}</div>
     </div>
+    <div style="padding-top: 220px; margin-left: 148px">
+      <div class="user-name">{{ info.name }}</div>
+      <div class="user-gx" v-if="info.houseHolderRel">
+        （{{ info.houseHolderRel == "本人" ? "户主" : info.houseHolderRel }}）
+      </div>
+    </div>
   </div>
 </template>
 
@@ -22,8 +28,9 @@ export default {
     return {
       data: [],
       queryParam: {
-        type: "0",
+        type: "1",
       },
+      info: {},
     };
   },
   computed: {
@@ -45,6 +52,7 @@ export default {
     const query = this.$route.query;
     this.queryParam.resid = query.user_id;
     this.getDatas();
+    this.getUserInfo();
   },
   methods: {
     getDatas() {
@@ -58,6 +66,17 @@ export default {
           this.data = res.data;
         });
     },
+    getUserInfo() {
+      this.$http
+        .post(
+          "/actual/base/peopleRoomOverview/getPersonalFile?resid=" +
+            this.queryParam.resid,
+          this.queryParam
+        )
+        .then(({ data: res }) => {
+          this.info = res.data;
+        });
+    },
   },
 };
 </script>
@@ -110,4 +129,25 @@ export default {
     bottom: 41px;
   }
 }
+.user-name {
+  width: 174px;
+  text-align: center;
+  height: 17px;
+  font-size: 18px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 22px;
+  margin-top: -12px;
+}
+.user-gx {
+  width: 174px;
+  text-align: center;
+  height: 17px;
+  font-size: 16px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 32px;
+}
 </style>
diff --git a/src/views/dataBoard/cpts/personnel/modules/MatterDetails.vue b/src/views/dataBoard/cpts/personnel/modules/MatterDetails.vue
index a8563dc3e..10ef93f55 100644
--- a/src/views/dataBoard/cpts/personnel/modules/MatterDetails.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/MatterDetails.vue
@@ -2,9 +2,10 @@
   <div class="matter-details">
     <div class="user-img">
       <img src="@/assets/images/manyidu/dn_bg1.png" alt="" />
+      <div class="user-name">{{ data.name }}</div>
     </div>
     <div class="tags">
-      <div class="tag" v-if="data.name">{{ data.name }}</div>
+      <!-- <div class="tag" v-if="data.name">{{ data.name }}</div> -->
       <div class="tag red" v-if="data.riskyFlag == '1'">满意度风险人员</div>
       <div class="tag small" v-if="data.gender">
         {{ genderArr[data.gender] }}
@@ -126,4 +127,16 @@ export default {
     bottom: 10px;
   }
 }
+
+.user-name {
+  width:174px;
+  text-align: center;
+  height: 17px;
+  font-size: 18px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 22px;
+  margin-top: -12px;
+}
 </style>
diff --git a/src/views/dataBoard/renfang/resident/index.vue b/src/views/dataBoard/renfang/resident/index.vue
index 3838d6e25..de753eb87 100644
--- a/src/views/dataBoard/renfang/resident/index.vue
+++ b/src/views/dataBoard/renfang/resident/index.vue
@@ -5,13 +5,15 @@
       v-if="breadList.length > 1"
       :bread-list="breadList"
     />
-    <personnel />
+    <!-- <personnel /> -->
+    <family />
   </div>
 </template>
 
 <script>
 import cptBread from "@/views/dataBoard/renfang/cpts/bread";
 import personnel from "@/views/dataBoard/cpts/personnel"
+import family from "@/views/dataBoard/cpts/family"
 
 export default {
   name: "renfang",
@@ -19,6 +21,7 @@ export default {
   components: {
     cptBread,
     personnel,
+    family,
   },
 
   data() {
diff --git a/src/views/dataBoard/satisfactionEval/components/Title/index.vue b/src/views/dataBoard/satisfactionEval/components/Title/index.vue
index e776c3a2e..218a3b5c9 100644
--- a/src/views/dataBoard/satisfactionEval/components/Title/index.vue
+++ b/src/views/dataBoard/satisfactionEval/components/Title/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="title" :class="noBg?'no-bg':''">
+  <div class="title" :class="noBg ? 'no-bg' : ''">
     <span class="text">
       <span class="txt">{{ text }}</span>
       <span class="text-shadow">{{ text }}</span>
@@ -14,20 +14,20 @@ export default {
   props: {
     text: {
       type: String,
-      default: ''
+      default: "",
     },
     noBg: {
       type: Boolean,
-      default: false
-    }
-  }
-}
+      default: false,
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
 .title {
-//   background: url(../../../../../assets/images/shuju/overview/title-bg.png)
-    // no-repeat 0 0 fixed;
+  background: url(../../../../../assets/images/shuju/overview/title-bg.png)
+    no-repeat 0 0 fixed;
   padding: 8px 16px 8px 32px;
   display: flex;
   align-items: center;
@@ -60,4 +60,4 @@ export default {
 .no-bg {
   background: none;
 }
-</style>
\ No newline at end of file
+</style>