diff --git a/src/views/projectAdmin/dataBoard/homePage/personOverview.vue b/src/views/projectAdmin/dataBoard/homePage/personOverview.vue
index bb966361..100bd503 100644
--- a/src/views/projectAdmin/dataBoard/homePage/personOverview.vue
+++ b/src/views/projectAdmin/dataBoard/homePage/personOverview.vue
@@ -1,15 +1,147 @@
 <template>
   <div class="personOverview">
-personOverview
+    <div class="title">
+      {{ $t('message.companyDiagram.peopleOverview') }}
+    </div>
+    <div class="content">
+      <div class="personCount">
+        <div class="countItem">
+          <img src="@//assets/images/dataBoard/numImg_purple.png" />
+          <div class="info">
+            <div class="num">
+              {{ statisticsCount.presencecount.totalPerson }}
+            </div>
+            <!-- 实名制人数 -->
+            <div class="label">
+              {{ $t('message.companyDiagram.registerPeopleNum') }}
+            </div>
+          </div>
+        </div>
+        <div class="countItem">
+          <img src="@//assets/images/dataBoard/numImg_orange.png" />
+          <div class="info">
+            <div class="num">
+              {{ statisticsCount.presencecount.lwPersonTotal }}
+            </div>
+            <!-- 在场人数 -->
+            <div class="label">
+              {{ $t('message.companyDiagram.onlineLabourPeople') }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="manager">
+        <div class="manager-title">
+          <!-- 管理人员 -->{{ $t('message.companyDiagram.onlineManagePeople') }}
+        </div>
+        <div class="manager-persons">
+          <div class="person">
+            <div class="person-info">
+              <div class="person-rate">
+                <span>{{ statisticsCount.presencecount.jfGlPersonTotal }}</span
+                >/{{ statisticsCount.workercount.jfGlPersonTotal }}
+              </div>
+              <div class="person-label">
+                <!-- 监理人员 -->{{ $t('message.dataBoard.PartyAPersonnel') }}
+              </div>
+            </div>
+          </div>
+          <div class="person">
+            <div class="person-info">
+              <div class="person-rate">
+                <span>{{ statisticsCount.presencecount.jlGlPersonTotal }}</span
+                >/{{ statisticsCount.workercount.jlGlPersonTotal }}
+              </div>
+              <div class="person-label">
+                <!-- 甲方人员 -->{{ $t('message.dataBoard.supervisoryStaff') }}
+              </div>
+            </div>
+          </div>
+          <div class="person">
+            <div class="person-info">
+              <div class="person-rate">
+                <span>{{ statisticsCount.presencecount.yfGlPersonTotal }}</span
+                >/{{ statisticsCount.workercount.yfGlPersonTotal }}
+              </div>
+              <div class="person-label">
+                <!-- 乙方人员 -->{{ $t('message.dataBoard.PartyBPersonnel') }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-
+  props: ['statisticsCount']
 }
 </script>
 
 <style lang="less" scoped>
-
+.personOverview {
+  position: relative;
+  margin-bottom: 25px;
+  height: calc(100% - 2px);
+  width: 100%;
+  .title {
+    position: relative;
+    top: -10px;
+    font-size: 17px;
+    font-weight: bold;
+    text-align: center;
+    color: #6ce9f0;
+  }
+  .content {
+    position: relative;
+    padding: 10px 20px;
+    height: calc(100% - 20px - 24px);
+    z-index: 2;
+    .personCount {
+      display: flex;
+      .countItem {
+        flex: 1;
+        height: 35%;
+        display: flex;
+        img {
+          margin-right: 8px;
+        }
+      }
+    }
+    .manager {
+      .manager-title {
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+        &::before {
+          content: '';
+          margin-right: 6px;
+          width: 5px;
+          height: 5px;
+          background-color: #6ce9f0;
+          border-radius: 50%;
+        }
+      }
+      .manager-persons {
+        display: flex;
+        .person {
+          position: relative;
+          width: 86px;
+          height: 86px;
+          background: url(~@/assets/images/dataBoard/fc857081d1aded7077e783a698bd1d6.png);
+          &:nth-child(2) {
+            background: url(~@/assets/images/dataBoard/9f4e0bd5a0baebf3e96d512b208527b.png);
+          }
+          .person-info {
+            transform: translate(15px);
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/projectAdmin/dataBoard/index.vue b/src/views/projectAdmin/dataBoard/index.vue
index 14ccfc51..758efe98 100644
--- a/src/views/projectAdmin/dataBoard/index.vue
+++ b/src/views/projectAdmin/dataBoard/index.vue
@@ -3,109 +3,11 @@
     <div class="fullHeight aside">
       <div class="blockBox">
         <!-- 项目信息 -->
-        <ProjectInfo :projectData="projectData"></ProjectInfo>
+        <ProjectInfo :projectData="projectData" />
       </div>
       <div class="blockBox">
         <!-- 人员概况 -->
-        <div class="blockTitle">
-          {{ $t('message.companyDiagram.peopleOverview') }}
-        </div>
-        <div class="blockContent dataBoxContent">
-          <div class="dataBox">
-            <img
-              src="@//assets/images/dataBoard/numImg_purple.png"
-              alt=""
-              srcset=""
-            />
-            <div>
-              <p class="num primaryText5">
-                {{ statisticsCount.workercount.totalPerson }}
-              </p>
-              <!-- 实名制人数 -->
-              <p>{{ $t('message.companyDiagram.registerPeopleNum') }}</p>
-            </div>
-          </div>
-          <div class="dataBox">
-            <img
-              src="@//assets/images/dataBoard/numImg_orange.png"
-              alt=""
-              srcset=""
-            />
-            <div>
-              <p class="num primaryText4">
-                {{ statisticsCount.presencecount.lwPersonTotal }}
-              </p>
-              <!-- 在场人数 -->
-              <p>{{ $t('message.companyDiagram.onlineLabourPeople') }}</p>
-            </div>
-          </div>
-          <div class="managePeople">
-            <div class="managePeopleTitle">
-              <!-- 管理人员 -->
-              <p>{{ $t('message.companyDiagram.onlineManagePeople') }}</p>
-            </div>
-
-            <div class="management">
-              <div class="management_item">
-                <div class="item_content">
-                  <span style="color: #5ce2f6">{{
-                    statisticsCount.presencecount.jfGlPersonTotal
-                  }}</span>
-                  <span>/</span>
-                  <span>{{ statisticsCount.workercount.jfGlPersonTotal }}</span>
-                  <p>
-                    <!-- 监理人员 -->
-                    {{ $t('message.dataBoard.PartyAPersonnel') }}
-                  </p>
-                </div>
-                <div class="itemImgBox">
-                  <img
-                    src="@/assets/images/dataBoard/fc857081d1aded7077e783a698bd1d6.png"
-                    alt=""
-                  />
-                </div>
-              </div>
-              <div class="management_item">
-                <div class="item_content">
-                  <span style="color: #5ce2f6">{{
-                    statisticsCount.presencecount.jlGlPersonTotal
-                  }}</span>
-                  <span>/</span>
-                  <span>{{ statisticsCount.workercount.jlGlPersonTotal }}</span>
-                  <p>
-                    <!-- 甲方人员 -->
-                    {{ $t('message.dataBoard.supervisoryStaff') }}
-                  </p>
-                </div>
-                <div class="itemImgBox">
-                  <img
-                    src="@/assets/images/dataBoard/9f4e0bd5a0baebf3e96d512b208527b.png"
-                    alt=""
-                  />
-                </div>
-              </div>
-              <div class="management_item">
-                <div class="item_content">
-                  <span style="color: #5ce2f6">{{
-                    statisticsCount.presencecount.yfGlPersonTotal
-                  }}</span>
-                  <span>/</span>
-                  <span>{{ statisticsCount.workercount.yfGlPersonTotal }}</span>
-                  <p>
-                    <!-- 乙方人员 -->
-                    {{ $t('message.dataBoard.PartyBPersonnel') }}
-                  </p>
-                </div>
-                <div class="itemImgBox">
-                  <img
-                    src="@/assets/images/dataBoard/cd1a4dbcd4a1b6300f41404ac5bd0ef.png"
-                    alt=""
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <PersonOverview :statisticsCount="statisticsCount" />
       </div>
       <div class="blockBox">
         <!-- 智能设备 -->
@@ -663,9 +565,10 @@ import {
   queryBySnData
 } from '@/assets/js/api/projectSummary.js'
 import ProjectInfo from './homePage/projectInfo'
+import PersonOverview from './homePage/personOverview'
 
 export default {
-  components: { devNumChart, airQulityChart, ProjectInfo },
+  components: { devNumChart, airQulityChart, ProjectInfo, PersonOverview },
   data() {
     return {
       COMPANY: '',