diff --git a/package.json b/package.json
index 4eae9e3..979081a 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     ]
   },
   "dependencies": {
+    "@ant-design/charts": "^1.4.2",
     "@ant-design/pro-layout": "6.32.1",
     "@formily/antd": "^2.0.6",
     "@types/lodash": "^4.14.172",
diff --git a/src/layouts/config.js b/src/layouts/config.js
index 86025f5..41badeb 100644
--- a/src/layouts/config.js
+++ b/src/layouts/config.js
@@ -11,6 +11,7 @@ module.exports = {
     "/fileTable.*": "blank",
     "/rankMapTable.*": "blank",
     "/reportTable.*": "blank",
+    "/personnelReport.*": "blank",
     "/manage.*": "manage",
     "/portal.*": "template",
     "/passport/oauth-in": "blank",
diff --git a/src/pages/personnelReport/constants.js b/src/pages/personnelReport/constants.js
new file mode 100644
index 0000000..c258040
--- /dev/null
+++ b/src/pages/personnelReport/constants.js
@@ -0,0 +1,536 @@
+import { G2 } from "@ant-design/plots";
+
+const G = G2.getEngine("canvas");
+
+//人员流动数据
+export const flowingData = [
+  {
+    type: "当期总人数",
+    value: 27
+  },
+  {
+    type: "本月入职",
+    value: 25
+  },
+  {
+    type: "本月离职",
+    value: 18
+  },
+  {
+    type: "年度累计入职",
+    value: 15
+  },
+  {
+    type: "年度累计离职",
+    value: 10
+  },
+  {
+    type: "平均年龄",
+    value: 5
+  }
+];
+//人员流动配置信息
+export const flowingConfig = {
+  appendPadding: 10,
+  data: flowingData,
+  angleField: "value",
+  colorField: "type",
+  radius: 1,
+  // 设置圆弧起始角度
+  startAngle: Math.PI,
+  endAngle: Math.PI * 1.5,
+  label: {
+    type: "inner",
+    offset: "-2%",
+    content: "{name}",
+    style: {
+      fontSize: 10
+    }
+  },
+  interactions: [
+    {
+      type: "element-active"
+    }
+  ],
+  pieStyle: {
+    lineWidth: 0
+  }
+};
+
+//司龄占比数据
+export const seniorityData = [
+  {
+    type: "5年",
+    value: 100
+  },
+  {
+    type: "10年",
+    value: 200
+  },
+  {
+    type: "15年",
+    value: 300
+  },
+  {
+    type: "其他",
+    value: 200
+  }
+];
+//性别占比数据
+export const genderData = [
+  {
+    type: "男",
+    value: 20
+  },
+  {
+    type: "女",
+    value: 80
+  }
+];
+//学历占比数据
+export const degreeData = [
+  {
+    type: "大专",
+    value: 45
+  },
+  {
+    type: "大专以下",
+    value: 35
+  },
+  {
+    type: "全日制本科",
+    value: 11
+  },
+  {
+    type: "硕士",
+    value: 6
+  },
+  {
+    type: "研究生",
+    value: 1
+  },
+  {
+    type: "中专",
+    value: 1
+  },
+  {
+    type: "博士",
+    value: 1
+  }
+];
+//条线占比数据
+export const linesData = [
+  {
+    type: "条线1",
+    value: 35
+  },
+  {
+    type: "条线2",
+    value: 25
+  },
+  {
+    type: "条线3",
+    value: 15
+  },
+  {
+    type: "条线4",
+    value: 17
+  },
+  {
+    type: "条线5",
+    value: 8
+  }
+];
+//实习生占比数据
+export const internData = [
+  {
+    type: "1",
+    value: 17
+  },
+  {
+    type: "2",
+    value: 25
+  },
+  {
+    type: "3",
+    value: 8
+  },
+  {
+    type: "4",
+    value: 35
+  },
+  {
+    type: "5",
+    value: 15
+  }
+];
+export const seniorityConfig = {
+  appendPadding: 10,
+  data: [],
+  angleField: "value",
+  colorField: "type",
+  radius: 0.75,
+  label: {
+    type: "inner",
+    offset: "-30%",
+    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
+    style: {
+      fontSize: 14,
+      textAlign: "center"
+    }
+  },
+  interactions: [
+    {
+      type: "element-active"
+    }
+  ]
+};
+
+//人员流动情况趋势图数据信息
+export const flowingTrendData = [
+  {
+    "name": "入职",
+    "年份": "2022",
+    "年份流动信息": 18.9
+  },
+  {
+    "name": "入职",
+    "年份": "2023",
+    "年份流动信息": 28.8
+  },
+  {
+    "name": "离职",
+    "年份": "2022",
+    "年份流动信息": 12.4
+  },
+  {
+    "name": "离职",
+    "年份": "2023",
+    "年份流动信息": 23.2
+  },
+  {
+    "name": "在职",
+    "年份": "2022",
+    "年份流动信息": 12.4
+  },
+  {
+    "name": "在职",
+    "年份": "2023",
+    "年份流动信息": 23.2
+  }
+];
+//人员流动情况趋势图配置信息
+export const flowingTrendconfig = {
+  data: flowingTrendData,
+  isGroup: true,
+  xField: "年份",
+  yField: "年份流动信息",
+  seriesField: "name",
+  // 分组柱状图 组内柱子间的间距 (像素级别)
+  dodgePadding: 2,
+  // 分组柱状图 组间的间距 (像素级别)
+  intervalPadding: 50,
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: "middle",
+    // 'top', 'middle', 'bottom'
+    // 可配置附加的布局方法
+    layout: [
+      // 柱形图数据标签位置自动调整
+      {
+        type: "interval-adjust-position"
+      }, // 数据标签防遮挡
+      {
+        type: "interval-hide-overlap"
+      }, // 数据标签文颜色自动调整
+      {
+        type: "adjust-color"
+      }
+    ]
+  }
+};
+
+
+//机构人员排名数数据
+export const institutionData = [
+  {
+    stage: "机构一",
+    number: 253
+  },
+  {
+    stage: "机构二",
+    number: 151
+  },
+  {
+    stage: "机构三",
+    number: 113
+  },
+  {
+    stage: "机构四",
+    number: 87
+  },
+  {
+    stage: "机构五",
+    number: 59
+  }
+];
+//机构人员排名配置信息
+export const institutionConfig = {
+  data: institutionData,
+  xField: "stage",
+  yField: "number",
+  dynamicHeight: true,
+  legend: false
+};
+
+//人员异动分析数数据
+export const personChangeData = [
+  {
+    type: "全员离职率",
+    value: 253
+  },
+  {
+    type: "关键岗位离职率",
+    value: 151
+  },
+  {
+    type: "绩优员工离职率",
+    value: 113
+  }
+];
+export const personChangeConfig = {
+  appendPadding: 10,
+  data:[],
+  angleField: "value",
+  colorField: "type",
+  radius: 0.75,
+  label: {
+    type: "spider",
+    labelHeight: 28,
+    content: "{name}\n{percentage}"
+  },
+  interactions: [
+    {
+      type: "element-active"
+    }
+  ]
+};
+
+//详细图表柱状图
+export const multiplData = [
+  {
+    "name": "全员离职率",
+    "年份": "2022",
+    "年份流动信息": 18.9
+  },
+  {
+    "name": "全员离职率",
+    "年份": "2023",
+    "年份流动信息": 28.8
+  },
+  {
+    "name": "主动离职率",
+    "年份": "2022",
+    "年份流动信息": 12.4
+  },
+  {
+    "name": "主动离职率",
+    "年份": "2023",
+    "年份流动信息": 23.2
+  },
+  {
+    "name": "被动离职率",
+    "年份": "2022",
+    "年份流动信息": 12.4
+  },
+  {
+    "name": "被动离职率",
+    "年份": "2023",
+    "年份流动信息": 23.2
+  },
+  {
+    "name": "关键岗位离职率",
+    "年份": "2022",
+    "年份流动信息": 12.4
+  },
+  {
+    "name": "关键岗位离职率",
+    "年份": "2023",
+    "年份流动信息": 23.2
+  },
+  {
+    "name": "绩优员工离职率",
+    "年份": "2022",
+    "年份流动信息": 12.4
+  },
+  {
+    "name": "绩优员工离职率",
+    "年份": "2023",
+    "年份流动信息": 23.2
+  },
+  {
+    "name": "转正率",
+    "年份": "2022",
+    "年份流动信息": 12.4
+  },
+  {
+    "name": "转正率",
+    "年份": "2023",
+    "年份流动信息": 23.2
+  },
+];
+
+//人员流动情况趋势图配置信息
+export const multipleConfig = {
+  isGroup: true,
+  xField: "年份",
+  yField: "年份流动信息",
+  seriesField: "name",
+  // 分组柱状图 组内柱子间的间距 (像素级别)
+  dodgePadding: 2,
+  // 分组柱状图 组间的间距 (像素级别)
+  intervalPadding: 50,
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: "middle",
+    // 'top', 'middle', 'bottom'
+    // 可配置附加的布局方法
+    layout: [
+      // 柱形图数据标签位置自动调整
+      {
+        type: "interval-adjust-position"
+      }, // 数据标签防遮挡
+      {
+        type: "interval-hide-overlap"
+      }, // 数据标签文颜色自动调整
+      {
+        type: "adjust-color"
+      }
+    ]
+  }
+};
+
+//培训管理分析数据
+export const trainingData = [
+  {
+    type: "人均培训费用",
+    value: 20
+  },
+  {
+    type: "人均培训时长",
+    value: 80
+  }
+];
+
+//培训排名
+export const rankingData =[
+  {
+    name: '机构一',
+    month: 'Jan.',
+    grades: 18.9,
+  },
+  {
+    name: '机构一',
+    month: 'Feb.',
+    grades: 28.8,
+  },
+  {
+    name: '机构一',
+    month: 'Mar.',
+    grades: 39.3,
+  },
+  {
+    name: '机构一',
+    month: 'Apr.',
+    grades: 81.4,
+  },
+  {
+    name: '机构一',
+    month: 'May',
+    grades: 47,
+  },
+  {
+    name: '机构一',
+    month: 'Jun.',
+    grades: 20.3,
+  },
+  {
+    name: '机构一',
+    month: 'Jul.',
+    grades: 24,
+  },
+  {
+    name: '机构一',
+    month: 'Aug.',
+    grades: 35.6,
+  },
+  {
+    name: '机构二',
+    month: 'Jan.',
+    grades: 12.4,
+  },
+  {
+    name: '机构二',
+    month: 'Feb.',
+    grades: 23.2,
+  },
+  {
+    name: '机构二',
+    month: 'Mar.',
+    grades: 34.5,
+  },
+  {
+    name: '机构二',
+    month: 'Apr.',
+    grades: 99.7,
+  },
+  {
+    name: '机构二',
+    month: 'May',
+    grades: 52.6,
+  },
+  {
+    name: '机构二',
+    month: 'Jun.',
+    grades: 35.5,
+  },
+  {
+    name: '机构二',
+    month: 'Jul.',
+    grades: 37.4,
+  },
+  {
+    name: '机构二',
+    month: 'Aug.',
+    grades: 42.4,
+  },
+]
+export const rankingConfig = {
+  isGroup: true,
+  xField: "month",
+  yField: "grades",
+  seriesField: "name",
+  // 分组柱状图 组内柱子间的间距 (像素级别)
+  dodgePadding: 2,
+  // 分组柱状图 组间的间距 (像素级别)
+  intervalPadding: 10,
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: "middle",
+    // 'top', 'middle', 'bottom'
+    // 可配置附加的布局方法
+    layout: [
+      // 柱形图数据标签位置自动调整
+      {
+        type: "interval-adjust-position"
+      }, // 数据标签防遮挡
+      {
+        type: "interval-hide-overlap"
+      }, // 数据标签文颜色自动调整
+      {
+        type: "adjust-color"
+      }
+    ]
+  }
+};
+
diff --git a/src/pages/personnelReport/index.less b/src/pages/personnelReport/index.less
new file mode 100644
index 0000000..b73becc
--- /dev/null
+++ b/src/pages/personnelReport/index.less
@@ -0,0 +1,38 @@
+.chartWrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: #e5e5e5;
+  padding: 8px;
+
+  .talentTableBox, .flowRateTableBox {
+    display: flex;
+    align-items: center;
+
+    & > div:not(:last-child) {
+      margin-right: 8px;
+    }
+
+    & > div {
+      flex: 1;
+      height: 100%;
+      position: relative;
+      background: #fff;
+      padding: 40px 10px 8px;
+      overflow: hidden;
+
+      .title {
+        position: absolute;
+        left: 2%;
+        top: 2%;
+        font-size: 16px;
+        font-weight: 700;
+      }
+    }
+  }
+
+  & > div {
+    flex: 1;
+  }
+}
diff --git a/src/pages/personnelReport/index.tsx b/src/pages/personnelReport/index.tsx
new file mode 100644
index 0000000..84b404e
--- /dev/null
+++ b/src/pages/personnelReport/index.tsx
@@ -0,0 +1,93 @@
+import React, { FC } from "react";
+import { Tabs } from "antd";
+import { Column, Funnel, Pie } from "@ant-design/plots";
+import {
+  degreeData,
+  flowingConfig,
+  flowingTrendconfig,
+  genderData,
+  institutionConfig,
+  internData,
+  linesData,
+  personChangeConfig,
+  personChangeData,
+  seniorityConfig,
+  seniorityData,
+  multiplData,
+  multipleConfig,
+  trainingData,
+  rankingData,
+  rankingConfig
+} from "./constants";
+import styles from "./index.less";
+
+interface OwnProps {
+}
+
+type Props = OwnProps;
+
+const index: FC<Props> = (props) => {
+  // @ts-ignore
+  return (
+    <div className={styles.chartWrapper}>
+      {/*人才结构表*/}
+      <div className={styles.talentTableBox}>
+        <div>
+          <div className={styles.title}>人员流动情况</div>
+          <Pie {...flowingConfig} />
+        </div>
+        <div style={{ paddingTop: 0 }}>
+          <Pie {...seniorityConfig} data={seniorityData}/>
+          {/*<Tabs defaultActiveKey="1">*/}
+          {/*  <Tabs.TabPane tab="司龄占比" key="1">*/}
+          {/*    <Pie {...seniorityConfig} data={seniorityData}/>*/}
+          {/*  </Tabs.TabPane>*/}
+          {/*  <Tabs.TabPane tab="性别占比" key="2">*/}
+          {/*    <Pie {...seniorityConfig} data={genderData}/>*/}
+          {/*  </Tabs.TabPane>*/}
+          {/*  <Tabs.TabPane tab="学历分布" key="3">*/}
+          {/*    <Pie {...seniorityConfig} data={degreeData}/>*/}
+          {/*  </Tabs.TabPane>*/}
+          {/*  <Tabs.TabPane tab="条线占比" key="4">*/}
+          {/*    <Pie {...seniorityConfig} data={linesData}/>*/}
+          {/*  </Tabs.TabPane>*/}
+          {/*  <Tabs.TabPane tab="实习生占比" key="5">*/}
+          {/*    <Pie {...seniorityConfig} data={internData}/>*/}
+          {/*  </Tabs.TabPane>*/}
+          {/*</Tabs>*/}
+        </div>
+        <div>
+          <div className={styles.title}>人员流动情况趋势图</div>
+          <Column {...flowingTrendconfig} />
+        </div>
+        <div>
+          <div className={styles.title}>机构人员排名数</div>
+          <Funnel {...institutionConfig} />
+        </div>
+      </div>
+      {/*人才利润报表*/}
+      <div className={styles.profitTableBox}></div>
+      {/*人员流量表*/}
+      <div className={styles.flowRateTableBox}>
+        <div>
+          <div className={styles.title}>人员异动分析</div>
+          <Pie {...personChangeConfig} data={personChangeData}/>
+        </div>
+        <div>
+          <div className={styles.title}>详细图表</div>
+          <Column {...multipleConfig} data={multiplData} />
+        </div>
+        <div>
+          <div className={styles.title}>培训管理分析</div>
+          <Pie {...seniorityConfig} data={trainingData}/>
+        </div>
+        <div>
+          <div className={styles.title}>培训排名</div>
+          <Column {...rankingConfig} data={rankingData} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default index;