From 5141ecae437ed36282beb1c47ae0cad7dfa669ef Mon Sep 17 00:00:00 2001
From: SongZhen <>
Date: Thu, 14 Sep 2023 17:20:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=9A=E7=BB=84=E7=BB=87=E6=9E=B6=E6=9E=84?=
 =?UTF-8?q?=E4=B8=8B=E9=92=BB=E9=A1=B5=E9=9D=A2=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/workflow.scss                  |   3 -
 src/components/Tree/nodeWrap.vue              |  14 +-
 src/router/index.js                           |  10 +
 .../organizational/dangTree/index.vue         | 420 +-----------------
 .../personnel/components/Breadcrumb/index.vue |  41 ++
 .../personnel/components/Pagination/index.vue | 138 ++++++
 .../personnel/components/Tabs/index.vue       |  59 +++
 .../personnel/components/Title/index.vue      |  63 +++
 .../organizational/personnel/index.vue        |  90 ++++
 .../personnel/modules/BusinessRecords.vue     | 128 ++++++
 .../personnel/modules/EnjoyService.vue        | 188 ++++++++
 .../personnel/modules/Family.vue              |  76 ++++
 .../personnel/modules/MatterDetails.vue       |  93 ++++
 .../personnel/modules/PointsRecord.vue        |  51 +++
 src/views/dataBoardMain/main-navbar.vue       |   6 +-
 15 files changed, 956 insertions(+), 424 deletions(-)
 create mode 100644 src/views/dataBoard/organizational/personnel/components/Breadcrumb/index.vue
 create mode 100644 src/views/dataBoard/organizational/personnel/components/Pagination/index.vue
 create mode 100644 src/views/dataBoard/organizational/personnel/components/Tabs/index.vue
 create mode 100644 src/views/dataBoard/organizational/personnel/components/Title/index.vue
 create mode 100644 src/views/dataBoard/organizational/personnel/index.vue
 create mode 100644 src/views/dataBoard/organizational/personnel/modules/BusinessRecords.vue
 create mode 100644 src/views/dataBoard/organizational/personnel/modules/EnjoyService.vue
 create mode 100644 src/views/dataBoard/organizational/personnel/modules/Family.vue
 create mode 100644 src/views/dataBoard/organizational/personnel/modules/MatterDetails.vue
 create mode 100644 src/views/dataBoard/organizational/personnel/modules/PointsRecord.vue

diff --git a/src/assets/css/workflow.scss b/src/assets/css/workflow.scss
index c1c041998..64b847edc 100644
--- a/src/assets/css/workflow.scss
+++ b/src/assets/css/workflow.scss
@@ -1389,13 +1389,10 @@ html {
         transition: transform 0.3s ease-in-out;
         transform-origin: 50% 50%;
 
-        // overflow: scroll;
         .contentList {
             position: relative;
             width: 100%;
             height: 109px;
-            // margin-bottom: 45px;
-            // background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
         }
 
         .flowLevel-1 {
diff --git a/src/components/Tree/nodeWrap.vue b/src/components/Tree/nodeWrap.vue
index a36660922..9f56afa5e 100644
--- a/src/components/Tree/nodeWrap.vue
+++ b/src/components/Tree/nodeWrap.vue
@@ -3,7 +3,7 @@
     <div class="node-wrap" v-if="nodeConfig.laneLevel === 1">
       <div class="node-wrap-box">
         <div class="node-box-after">
-          <div class="nodeBoxTop">{{ spliceNameFun(nodeConfig, 18) }}</div>
+          <div class="nodeBoxTop" @click="gotoPersonnel">{{ spliceNameFun(nodeConfig, 18) }}</div>
         </div>
       </div>
     </div>
@@ -15,15 +15,15 @@
               <div class="condition-node-box">
                 <div class="auto-judge">
                   <div v-if="item.laneLevel >= 2 && item.laneLevel <= 7 && item.partyOrgLevel < 8">
-                    <div class="wgdzb" :title="getAllName(item)">{{ spliceNameFun(item, 18) }}</div>
+                    <div @click="gotoPersonnel" class="wgdzb" :title="getAllName(item)">{{ spliceNameFun(item, 18) }}</div>
                   </div>
                   <div v-if="item.partyOrgLevel === 8">
-                    <div class="lydxz" :title="getAllName(item)">
+                    <div @click="gotoPersonnel" class="lydxz" :title="getAllName(item)">
                       {{ spliceNameFun(item, 18) }}
                     </div>
                   </div>
                   <div v-if="item.partyOrgLevel === 9">
-                    <div class="dyzxh" :title="item.principalName">
+                    <div @click="gotoPersonnel" class="dyzxh" :title="item.principalName">
                       {{ spliceNameFun(item, 3) }}
                     </div>
                   </div>
@@ -44,7 +44,7 @@
                           <span>空巢老人</span>
                         </div> -->
                       </div>
-                      <div @mouseover="getHomeTypes(item.id)" slot="reference" class="lxjt" :title="item.principalName">
+                      <div @click="gotoPersonnel" @mouseover="getHomeTypes(item.id)" slot="reference" class="lxjt" :title="item.principalName">
                         {{ spliceNameFun(item, 3) }}
                         <img src="@/assets/images/home/cjr.png" alt="" />
                       </div>
@@ -143,6 +143,10 @@ export default {
         }
       });
     },
+
+    gotoPersonnel() {
+      this.$router.push("/organizational/orgPersonnel");
+    },
   },
 };
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index d759f7616..b714b6208 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -400,6 +400,16 @@ export const dataBoardRoutes = {
         },
       ],
     },
+    {
+      path: "/organizational/orgPersonnel",
+      props: true,
+      component: () => import("@/views/dataBoard/organizational/personnel/index"),
+      name: "OrgPersonnel",
+      meta: {
+        title: "居民画像",
+        isTab: false,
+      },
+    },
     {
       path: "humanData/index",
       props: true,
diff --git a/src/views/dataBoard/organizational/dangTree/index.vue b/src/views/dataBoard/organizational/dangTree/index.vue
index 7faa7d2c1..b925ab2b6 100644
--- a/src/views/dataBoard/organizational/dangTree/index.vue
+++ b/src/views/dataBoard/organizational/dangTree/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrap">
-    <!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" -->
-    <div class="content">
+    <!--  -->
+    <div class="content" v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'">
       <div v-for="(item, index) in levelArr" :key="item" :class="[`flowLevel-${index + 1}`]">
         <div>{{ getTitleNameMapFun(item) }}</div>
       </div>
@@ -25,7 +25,7 @@ export default {
   data() {
     return {
       loading: false,
-      levelArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      levelArr: [],
       navList: [
         {
           name: "党委组织架构",
@@ -43,424 +43,14 @@ export default {
           ifActive: false,
         },
       ],
-      cardList: [
-        {
-          title: "社区党委",
-          key: "1",
-          name: "南昌路社区党委 （党委书记：解书记）",
-          children: [
-            {
-              title: "网格党支部",
-              name: "第一网格党支部(支部书记：王艺发)",
-              key: "1",
-              children: [
-                {
-                  title: "楼院党小组",
-                  name: "第一楼院党小组 （组长：韩文国）",
-                  key: "1",
-                },
-                {
-                  title: "楼院党小组",
-                  name: "第二楼院党小组 （组长：褚丽兰）",
-                  key: "2",
-                },
-              ],
-            },
-            {
-              title: "网格党支部",
-              name: "第二网格党支部 （支部书记：尤芬紫）",
-              key: "2",
-              children: [
-                {
-                  title: "楼院党小组",
-                  name: "第一楼院党小组 （组长：韩文国）",
-                  key: "1",
-                },
-                {
-                  title: "楼院党小组",
-                  name: "第二楼院党小组 （组长：褚丽兰）",
-                  key: "2",
-                },
-              ],
-            },
-            {
-              title: "网格党支部",
-              name: "第三网格党支部 （支部书记：凤桥强）",
-              key: "3",
-              children: [
-                {
-                  title: "楼院党小组",
-                  name: "第一楼院党小组 （组长：韩文国）",
-                  key: "1",
-                },
-                {
-                  title: "楼院党小组",
-                  name: "第二楼院党小组 （组长：褚丽兰）",
-                  key: "2",
-                },
-                {
-                  title: "楼院党小组",
-                  name: "第三楼院党小组 （组长：王丽丽）",
-                  key: "3",
-                },
-              ],
-            },
-          ],
-        },
-      ],
       nowVal: 100,
 
-      nodeConfig: {
-        partyOrgName: "市北区委",
-        partyOrgLevel: 1,
-        partyOrgPid: "0",
-        principalName: "栾秀杰",
-        laneLevel: 1,
-        children: [
-          {
-            partyOrgName: "市北区委",
-            partyOrgLevel: 2,
-            partyOrgPid: "0",
-            principalName: "栾秀杰",
-            laneLevel: 2,
-            children: [
-              {
-                partyOrgName: "市北区委",
-                partyOrgLevel: 3,
-                partyOrgPid: "0",
-                principalName: "栾秀杰",
-                laneLevel: 3,
-                children: [
-                  {
-                    partyOrgName: "市北区委",
-                    partyOrgLevel: 4,
-                    partyOrgPid: "0",
-                    principalName: "栾秀杰",
-                    laneLevel: 4,
-                    children: [
-                      {
-                        partyOrgName: "市北区委",
-                        partyOrgLevel: 5,
-                        partyOrgPid: "0",
-                        principalName: "栾秀杰",
-                        laneLevel: 5,
-                        children: [
-                          {
-                            partyOrgName: "市北区委",
-                            partyOrgLevel: 6,
-                            partyOrgPid: "0",
-                            principalName: "栾秀杰",
-                            laneLevel: 6,
-                            children: [
-                              {
-                                partyOrgName: "市北区委",
-                                partyOrgLevel: 7,
-                                partyOrgPid: "0",
-                                principalName: "栾秀杰",
-                                laneLevel: 7,
-                                children: [
-                                  {
-                                    partyOrgName: "市北区委",
-                                    partyOrgLevel: 8,
-                                    partyOrgPid: "0",
-                                    principalName: "栾秀杰",
-                                    laneLevel: 8,
-                                    children: [
-                                      {
-                                        partyOrgName: "市北区委",
-                                        partyOrgLevel: 9,
-                                        partyOrgPid: "0",
-                                        principalName: "栾秀杰",
-                                        laneLevel: 9,
-                                        children: [
-                                          {
-                                            partyOrgName: "市北区委",
-                                            partyOrgLevel: 10,
-                                            partyOrgPid: "0",
-                                            principalName: "栾秀杰",
-                                            laneLevel: 10,
-                                          },
-                                        ],
-                                      },
-                                    ],
-                                  },
-                                ],
-                              },
-                            ],
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-
-        // title: "社区党委",
-        // name: "南昌路社区党委(党委书记：解书记)",
-        // key: "1",
-        // children: [
-        //   {
-        //     title: "网格党支部",
-        //     name: "第一网格党支部 （支部书记：王艺发）",
-        //     type: 2,
-        //     children: [
-        //       {
-        //         title: "楼院党小组",
-        //         type: 3,
-        //         name: "第一楼院党小组 （组长：韩文国）",
-        //         children: [
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "周游",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "王阳明",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "刘艳萍",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "谢苗苗",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "杨军",
-        //           },
-        //         ],
-        //       },
-        //       {
-        //         title: "楼院党小组",
-        //         type: 3,
-        //         name: "第二楼院党小组 （组长：褚丽兰）",
-        //         children: [
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "周游",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "王阳明",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "刘艳萍",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "谢苗苗",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "杨军",
-        //           },
-        //         ],
-        //       },
-        //     ],
-        //   },
-        //   {
-        //     title: "网格党支部",
-        //     name: "第二网格党支部 （支部书记：尤芬紫）",
-        //     type: 3,
-        //     children: [
-        //       {
-        //         title: "楼院党小组",
-        //         type: 3,
-        //         name: "第一楼院党小组 （组长：韩文国）",
-        //         children: [
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "周游",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "王阳明",
-        //             children: [
-        //               {
-        //                 title: "联系家庭",
-        //                 type: 5,
-        //                 name: "王宇",
-        //               },
-        //               {
-        //                 title: "联系家庭",
-        //                 type: 5,
-        //                 name: "刘冰冰",
-        //               },
-        //               {
-        //                 title: "联系家庭",
-        //                 type: 5,
-        //                 name: "杨飞宇",
-        //               },
-        //               {
-        //                 title: "联系家庭",
-        //                 type: 5,
-        //                 name: "齐天",
-        //               },
-        //             ],
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "刘艳萍",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "谢苗苗",
-        //           },
-        //         ],
-        //       },
-        //       {
-        //         title: "楼院党小组",
-        //         type: 3,
-        //         name: "第二楼院党小组 （组长：褚丽兰）",
-        //         children: [
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "周游",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "王阳明",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "刘艳萍",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "谢苗苗",
-        //           },
-        //         ],
-        //       },
-        //     ],
-        //   },
-        //   {
-        //     title: "网格党支部",
-        //     name: "第三网格党支部 （支部书记：凤桥强）",
-        //     type: 3,
-        //     children: [
-        //       {
-        //         title: "楼院党小组",
-        //         type: 3,
-        //         name: "第一楼院党小组 （组长：韩文国）",
-        //         children: [
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "周游",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "王阳明",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "刘艳萍",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "谢苗苗",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "杨军",
-        //           },
-        //         ],
-        //       },
-        //       {
-        //         title: "楼院党小组",
-        //         type: 3,
-        //         name: "第二楼院党小组 （组长：褚丽兰）",
-        //         children: [
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "周游",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "王阳明",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "刘艳萍",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "谢苗苗",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "杨军",
-        //           },
-        //         ],
-        //       },
-        //       {
-        //         title: "楼院党小组",
-        //         type: 3,
-        //         name: "第三楼院党小组 （组长：王丽丽）",
-        //         children: [
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "周游",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "王阳明",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "刘艳萍",
-        //           },
-        //           {
-        //             title: "党员中心户",
-        //             type: 4,
-        //             name: "谢苗苗",
-        //           },
-        //         ],
-        //       },
-        //     ],
-        //   },
-        // ],
-      },
+      nodeConfig: {},
     };
   },
   computed: {},
   mounted() {
-    // this.getTreeData();
+    this.getTreeData();
   },
   methods: {
     //获取背景层级
diff --git a/src/views/dataBoard/organizational/personnel/components/Breadcrumb/index.vue b/src/views/dataBoard/organizational/personnel/components/Breadcrumb/index.vue
new file mode 100644
index 000000000..426e82bc2
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/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/organizational/personnel/components/Pagination/index.vue b/src/views/dataBoard/organizational/personnel/components/Pagination/index.vue
new file mode 100644
index 000000000..9722ee858
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/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/organizational/personnel/components/Tabs/index.vue b/src/views/dataBoard/organizational/personnel/components/Tabs/index.vue
new file mode 100644
index 000000000..70597d2a8
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/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/organizational/personnel/components/Title/index.vue b/src/views/dataBoard/organizational/personnel/components/Title/index.vue
new file mode 100644
index 000000000..6faadb2bc
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/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/organizational/personnel/index.vue b/src/views/dataBoard/organizational/personnel/index.vue
new file mode 100644
index 000000000..7cf9da62c
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div class="breadcrumb">
+      <Breadcrumb :list="breadcrumbList" />
+    </div>
+    <el-row>
+      <el-col :span="10">
+        <div class="sub-title">事项详情</div>
+        <MatterDetails />
+
+        <div class="sub-title">家庭关系</div>
+        <Family />
+      </el-col>
+      <el-col :span="13" :offset="1">
+        <div class="sub-title">居民各项业务记录</div>
+        <BusinessRecords />
+        <el-row>
+          <el-col :span="12">
+            <div class="sub-title">享受服务次数统计</div>
+            <EnjoyService />
+          </el-col>
+          <el-col :span="11" :offset="1">
+            <div class="sub-title">积分记录</div>
+            <PointsRecord />
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from "./components/Breadcrumb/index.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";
+
+export default {
+  name: "OrgPersonnel",
+  components: {
+    Breadcrumb,
+    MatterDetails,
+    Family,
+    BusinessRecords,
+    EnjoyService,
+    PointsRecord,
+  },
+  data() {
+    return {
+      breadcrumbList: [
+        {
+          path: "/organizational/dangTree",
+          name: "党组织架构",
+        },
+        {
+          path: "/organizational/orgPersonnel",
+          name: "居民画像",
+        },
+        {
+          path: "",
+          name: "",
+        },
+      ],
+    };
+  },
+  mounted() {
+    console.log(this.breadcrumbList, this.$route);
+
+    this.$set(this.breadcrumbList[2], "name", this.$route.query.name);
+    this.breadcrumbList[2].name = this.$route.query.name;
+  },
+};
+</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;
+}
+</style>
diff --git a/src/views/dataBoard/organizational/personnel/modules/BusinessRecords.vue b/src/views/dataBoard/organizational/personnel/modules/BusinessRecords.vue
new file mode 100644
index 000000000..69441dc63
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/modules/BusinessRecords.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="business-records">
+    <Tabs v-model="type" :list="typeList" @changeVal="typeChange" />
+    <div class="table">
+      <el-table :data="list">
+        <el-table-column label="序号" type="index" width="80" />
+        <el-table-column label="评价周期" prop="key" width="" />
+        <el-table-column label="姓名" prop="key" width="" />
+        <el-table-column label="电话" prop="key" width="" />
+        <el-table-column label="不满意类型" prop="key" width="" />
+        <el-table-column label="不满意原因" prop="key" 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.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
+
+export default {
+  name: "BusinessRecords",
+  components: { Tabs },
+  data() {
+    return {
+      total: 10,
+      queryParams: {
+        pageNum: 0,
+        pageSize: 10,
+      },
+      type: 1,
+      typeList: [
+        {
+          label: " 满意度",
+          value: 1,
+        },
+        {
+          label: "居民需求",
+          value: 2,
+        },
+        {
+          label: "上报事件",
+          value: 3,
+        },
+        // {
+        //   label: '事件',
+        //   value: 4
+        // }, {
+        //   label: '需求',
+        //   value: 5
+        // }, {
+        //   label: '服务',
+        //   value: 6
+        // }, {
+        //   label: '回访记录',
+        //   value: 7
+        // }
+      ],
+      list: [{}, {}, {}, {}, {}],
+    };
+  },
+  methods: {
+    typeChange() {},
+    getList() {},
+  },
+};
+</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/organizational/personnel/modules/EnjoyService.vue b/src/views/dataBoard/organizational/personnel/modules/EnjoyService.vue
new file mode 100644
index 000000000..0e8ecee58
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/modules/EnjoyService.vue
@@ -0,0 +1,188 @@
+<template>
+  <div className="event-statistics">
+    <div id="enjoyServiceChart" style="height: 360px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  name: "EnjoyService",
+  data() {
+    return {}
+  },
+  mounted() {
+    this.initCharts()
+  },
+  methods: {
+    initCharts() {
+      let div = document.getElementById('enjoyServiceChart');
+      this.myChart = echarts.init(div);
+
+      let xData = ['岗位找人', '技能找人', '温暖找人', '服务找人'];
+      let tq = [300, 90, 48, 39];
+      const max = Math.max(...tq)
+
+      let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
+      var option = {
+        title: {
+          show: false,
+          text: '',
+          x: 'center',
+          top: '15px',
+          textStyle: {
+            color: '#333333',
+            fontWeight: 500,
+            fontSize: 18,
+          },
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(13, 64, 71, 0.50)',
+          borderColor: 'rgba(143, 225, 252, 0.60)',
+          padding: 8,
+          textStyle: {
+            color: '#fff',
+          },
+          formatter: function (params) {
+            console.log(params)
+            var res = ''
+            for (var i = 0; i < params.length; i++) {
+              if (params[i].seriesName != "") {
+                res += '<p>' + params[0].name + ':' + params[i].data + '</p>'
+              }
+            }
+            return res;
+          },
+        },
+        grid: {
+          top: '0',
+          left: '1%',
+          right: '2%',
+          bottom: '0',
+          containLabel: true
+        },
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#323c41'
+              }
+            },
+            axisLabel: {
+              align: 'right',
+              textStyle: {
+                fontSize: 12,
+                color: '#A3B9DA'
+              }
+            },
+            boundaryGap: true,
+            data: xData,
+          }, {
+            type: 'category',
+            data: xData,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {show: false},
+            axisLabel: {
+              show: false,
+            },
+            boundaryGap: true,
+
+          }
+        ],
+
+        xAxis: [
+          {
+            type: 'value',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(4,187,255,0.18)',
+                type: 'dashed'
+              },
+            },
+            nameTextStyle: {
+              color: '#A3B9DA',
+              textStyle: {
+                fontSize: 12
+              },
+              align: 'center'
+            },
+            axisLabel: {
+              show: true,
+              color: '#A3B9DA',
+              textStyle: {
+                fontSize: 12
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: 16,
+            itemStyle: {
+              // lenged文本
+              opacity: 1, // 这个是 透明度
+              color: new echarts.graphic.LinearGradient(
+                  1,
+                  0,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: '#6EDDFE' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#0B1F57' // 100% 处的颜色
+                    }
+                  ],
+                  false
+              )
+            },
+            data: tq, //data.values
+          },
+          {
+            name: '',
+            type: 'bar',
+
+            barWidth: 66,
+            barGap: '-60%',
+            data: barArray,
+            itemStyle: {
+              normal: {
+                color: 'rgba(89,130,194,0.12)'
+              }
+            },
+            zlevel: -1,
+            yAxisIndex: 1,
+          }
+        ],
+      };
+      this.myChart.setOption(option);
+      window.addEventListener("resize", () => this.myChart.resize());
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.event-statistics {
+  padding: 16px 16px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/organizational/personnel/modules/Family.vue b/src/views/dataBoard/organizational/personnel/modules/Family.vue
new file mode 100644
index 000000000..52af91e1a
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/modules/Family.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="family">
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+      <div>居民分类：老年人</div>
+    </div>
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+      <div>居民分类：老年人</div>
+    </div>
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+    </div>
+    <div class="tag">
+      <div>张三(户主)</div>
+      <div>入户状态：入户一致</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Family"
+}
+</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;
+  &:nth-of-type(1),
+  &:nth-of-type(2) {
+    background: url("@/assets/images/manyidu/gx_big.png") no-repeat center;
+    width: 180px;
+    height: 100px;
+  }
+  &:nth-of-type(3),
+  &:nth-of-type(4) {
+    background: url("@/assets/images/manyidu/gx_small.png") no-repeat center;
+    width: 180px;
+    height: 70px;
+    padding: 15px 24px;
+  }
+  &:nth-of-type(1) {
+    left: -98px;
+    top: 34px;
+  }
+  &:nth-of-type(2) {
+    right: -68px;
+    top: 34px;
+  }
+  &:nth-of-type(3) {
+    left: -91px;
+    bottom: 41px;
+  }
+  &:nth-of-type(4) {
+    right: -44px;
+    bottom: 41px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/organizational/personnel/modules/MatterDetails.vue b/src/views/dataBoard/organizational/personnel/modules/MatterDetails.vue
new file mode 100644
index 000000000..b965bc1e4
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/modules/MatterDetails.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="matter-details">
+    <div class="user-img">
+      <img src="@/assets/images/manyidu/dn_bg1.png" alt="">
+    </div>
+    <div class="tags">
+      <div class="tag red">满意度风险人员</div>
+      <div class="tag small">与子女同住</div>
+      <div class="tag">第三网格</div>
+      <div class="tag small">入户一致</div>
+      <div class="tag">13343999999</div>
+      <div class="tag">四季景园1号楼1单元101</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MatterDetails"
+}
+</script>
+
+<style scoped lang="scss">
+.matter-details {
+  width: 607px;
+  height: 372px;
+  background: url("@/assets/images/manyidu/dn_bg2.png") no-repeat center bottom;
+  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;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/organizational/personnel/modules/PointsRecord.vue b/src/views/dataBoard/organizational/personnel/modules/PointsRecord.vue
new file mode 100644
index 000000000..75f41e47a
--- /dev/null
+++ b/src/views/dataBoard/organizational/personnel/modules/PointsRecord.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="enjoy-service">
+      <div class="enjoy-service-item" v-for="(item,index) in 5">
+        <div class="num">+10</div>
+        <div class="info">
+          <div class="title">便民服务-配餐服务</div>
+          <div class="time">2023-07-15 15:30:30</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PointsRecord"
+}
+</script>
+
+<style scoped lang="scss">
+
+.enjoy-service {
+  padding-left: 26px;
+}
+.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>
\ No newline at end of file
diff --git a/src/views/dataBoardMain/main-navbar.vue b/src/views/dataBoardMain/main-navbar.vue
index 410f69dec..6aef83272 100644
--- a/src/views/dataBoardMain/main-navbar.vue
+++ b/src/views/dataBoardMain/main-navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="m-topnav">
-    <div class="back">
+    <div class="back" style="cursor: pointer" @click="goBack()">
       <img src="~@/assets/images/shuju/main/back.png" alt="/" />
     </div>
     <div class="title">{{ customerName }}数据智能分析平台</div>
@@ -212,6 +212,10 @@ export default {
     toIndexPage() {
       this.$router.replace("/");
     },
+
+    goBack() {
+      history.go(-1);
+    },
     // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
     gotoRouteHandle(menuId, idx) {
       var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter((item) => item.meta.menuId === menuId)[0];