diff --git a/pc4mobx/hrmSalary/apis/mySalaryBenefits.js b/pc4mobx/hrmSalary/apis/mySalaryBenefits.js
index 2cd64d80..0cb56cfe 100644
--- a/pc4mobx/hrmSalary/apis/mySalaryBenefits.js
+++ b/pc4mobx/hrmSalary/apis/mySalaryBenefits.js
@@ -6,6 +6,14 @@ import { convertToUrlString } from "../util/url";
 export const mySalaryBillList = params => {
   return postFetch("/api/bs/hrmsalary/salaryBill/mySalaryBillList", params);
 };
+// 人事卡片-工资单列表
+export const mySalaryBillList4Card = params => {
+  return postFetch("/api/bs/hrmsalary/salaryBill/mySalaryBillList4Card", params);
+};
+// 人事卡片-调薪记录列表
+export const mySalaryRecordList4Card = params => {
+  return WeaTools.callApi("/api/bs/hrmsalary/report/record/list4Card", "GET", params);
+};
 
 // 调薪记录列表
 export const recordList = params => {
diff --git a/pc4mobx/hrmSalary/index.js b/pc4mobx/hrmSalary/index.js
index 743b5cfc..799df79c 100644
--- a/pc4mobx/hrmSalary/index.js
+++ b/pc4mobx/hrmSalary/index.js
@@ -1,6 +1,8 @@
 import React from "react";
 import Route from "react-router/lib/Route";
 import { WeaLocaleProvider } from "ecCom";
+import HistoricalPayroll from "./pages/historicalPayroll";
+import SalaryAdjustmentRecords from "./pages/salaryAdjustmentRecords";
 import MySalaryMobile from "./pages/mySalaryMobile";
 import MySalary from "./pages/mySalaryBenefits";
 import Programme from "./pages/socialSecurityBenefits/programme";
@@ -67,6 +69,10 @@ const Home = (props) => props.children;
 const SocialSecurityBenefits = (props) => props.children;
 const DataAcquisition = (props) => props.children;
 
+// historicalPayroll  历史工资单查看
+// salaryAdjustmentRecords  调薪记录查看
+
+// mySalaryMobile  我的薪资福利-移动端
 // mySalaryMobile  我的薪资福利-移动端
 // mySalary  我的薪资福利
 // mySalaryView  我的薪资福利-查看工资单
@@ -112,6 +118,8 @@ const Routes = (
     path="hrmSalary"
     onEnter={getLocaleLabel}
     component={Home}>
+    <Route key="historicalPayroll" path="historicalPayroll" component={HistoricalPayroll}/>
+    <Route key="salaryAdjustmentRecords" path="salaryAdjustmentRecords" component={SalaryAdjustmentRecords}/>
     <Route key="mySalaryMobile" path="mySalaryMobile" component={MySalaryMobile}/>
     <Route key="mySalary" path="mySalary" component={MySalary}/>
     <Route key="mySalaryView" path="mySalary/:salaryInfoId" component={MySalaryView}/>
diff --git a/pc4mobx/hrmSalary/pages/historicalPayroll/index.js b/pc4mobx/hrmSalary/pages/historicalPayroll/index.js
new file mode 100644
index 00000000..342a69a2
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/historicalPayroll/index.js
@@ -0,0 +1,43 @@
+/*
+ * Author: 黎永顺
+ * name:历史工资单
+ * Description:
+ * Date: 2024/1/25
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaTools } from "ecCom";
+import { MonthRangePicker } from "../reportView/components/statisticalMicroSettingsSlide";
+import Payroll from "../mySalaryBenefits/components/payrollTable";
+import moment from "moment";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dateRange: [
+        moment(new Date()).subtract(1, "year").startOf("year").format("YYYY-MM"),
+        moment(new Date()).endOf("year").format("YYYY-MM")
+      ]
+    };
+  }
+
+  render() {
+    const { dateRange } = this.state;
+    const employeeId = WeaTools.getUrlParams().hrmResourceID;
+    return (
+      <div className="history-payroll-box">
+        <div className="topQuery">
+          <span className="title">{getLabel(542604, "薪资所属月")}</span>
+          <MonthRangePicker dateRange={dateRange} viewAttr={2}
+                            onChange={v => this.setState({ dateRange: v })}/>
+        </div>
+        <Payroll salaryYearMonth={dateRange} type="mySalaryBillList4Card" employeeId={employeeId}/>
+      </div>
+    );
+  }
+}
+
+export default Index;
diff --git a/pc4mobx/hrmSalary/pages/historicalPayroll/index.less b/pc4mobx/hrmSalary/pages/historicalPayroll/index.less
new file mode 100644
index 00000000..459ccbaf
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/historicalPayroll/index.less
@@ -0,0 +1,23 @@
+.history-payroll-box {
+  width: 100%;
+  height: 100%;
+  background: #f6f6f6;
+  padding: 16px;
+
+  .topQuery {
+    width: 100%;
+    background: #fff;
+    padding: 16px;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+
+    .title {
+      margin-right: 10px;
+    }
+  }
+
+  .wea-new-table {
+    background: #fff;
+  }
+}
diff --git a/pc4mobx/hrmSalary/pages/mySalaryBenefits/components/SalaryAdjustmentRecords/index.js b/pc4mobx/hrmSalary/pages/mySalaryBenefits/components/SalaryAdjustmentRecords/index.js
index ed75ad76..d13cd2fe 100644
--- a/pc4mobx/hrmSalary/pages/mySalaryBenefits/components/SalaryAdjustmentRecords/index.js
+++ b/pc4mobx/hrmSalary/pages/mySalaryBenefits/components/SalaryAdjustmentRecords/index.js
@@ -8,9 +8,12 @@ import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
 import { WeaLocaleProvider, WeaTable } from "ecCom";
 import Authority from "../../../mySalary/authority";
-import { recordList } from "../../../../apis/mySalaryBenefits";
+import { mySalaryRecordList4Card, recordList } from "../../../../apis/mySalaryBenefits";
 
 const getLabel = WeaLocaleProvider.getLabel;
+const API = {
+  recordList, mySalaryRecordList4Card
+};
 
 @inject("mySalaryStore")
 @observer
@@ -24,14 +27,18 @@ class Index extends Component {
   }
 
   componentDidMount() {
-    const { mySalaryStore: { initRecordData } } = this.props;
-    initRecordData(this.getRecordList);
+    const { mySalaryStore: { initRecordData, getRecordData }, type } = this.props;
+    !type ? initRecordData(this.getRecordList) : getRecordData({
+      status: "1", token: "",
+      callback: () => this.getRecordList()
+    });
   }
 
   getRecordList = () => {
     const { pageInfo } = this.state;
+    const { employeeId, type = "recordList" } = this.props;
     this.setState({ loading: true });
-    recordList({ ...pageInfo }).then(({ status, data }) => {
+    API[type]({ ...pageInfo, employeeId }).then(({ status, data }) => {
       this.setState({ loading: false });
       if (status) {
         const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
diff --git a/pc4mobx/hrmSalary/pages/mySalaryBenefits/components/payrollTable/index.js b/pc4mobx/hrmSalary/pages/mySalaryBenefits/components/payrollTable/index.js
index 33cb6873..4c882560 100644
--- a/pc4mobx/hrmSalary/pages/mySalaryBenefits/components/payrollTable/index.js
+++ b/pc4mobx/hrmSalary/pages/mySalaryBenefits/components/payrollTable/index.js
@@ -6,17 +6,20 @@
  */
 import React, { Component } from "react";
 import { WeaLocaleProvider, WeaTable } from "ecCom";
-import { mySalaryBillList } from "../../../../apis/mySalaryBenefits";
+import { mySalaryBillList, mySalaryBillList4Card } from "../../../../apis/mySalaryBenefits";
 import moment from "moment";
 
 const getLabel = WeaLocaleProvider.getLabel;
+const API = {
+  mySalaryBillList, mySalaryBillList4Card
+};
 
 class Index extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      juniorMapList: [], dataSource: [], columns: [], pageInfo: { current: 1, pageSize: 10, total: 0 },
-      loading: false, employeeId: ""
+      dataSource: [], columns: [], pageInfo: { current: 1, pageSize: 10, total: 0 },
+      loading: false
     };
   }
 
@@ -30,9 +33,9 @@ class Index extends Component {
 
   getMySalaryBillList = (props) => {
     this.setState({ loading: true });
-    const { pageInfo, employeeId } = this.state;
-    const { salaryYearMonth } = props;
-    mySalaryBillList({ salaryYearMonth, employeeId, ...pageInfo }).then(({ status, data }) => {
+    const { pageInfo } = this.state;
+    const { salaryYearMonth, employeeId, type = "mySalaryBillList" } = props;
+    API[type]({ salaryYearMonth, employeeId, ...pageInfo }).then(({ status, data }) => {
       this.setState({ loading: false });
       if (status) {
         const { columns, datas: dataSource, pageInfo: { pageNum: current, pageSize, total } } = data;
@@ -55,7 +58,7 @@ class Index extends Component {
   };
 
   render() {
-    const { juniorMapList, dataSource, loading, columns, pageInfo } = this.state;
+    const { dataSource, loading, columns, pageInfo } = this.state;
     const pagination = {
       ...pageInfo,
       showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
diff --git a/pc4mobx/hrmSalary/pages/salaryAdjustmentRecords/index.js b/pc4mobx/hrmSalary/pages/salaryAdjustmentRecords/index.js
new file mode 100644
index 00000000..5399f8dd
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/salaryAdjustmentRecords/index.js
@@ -0,0 +1,25 @@
+/*
+ * Author: 黎永顺
+ * name:调薪记录
+ * Description:
+ * Date: 2024/1/25
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaTools } from "ecCom";
+import SalaryAdjustmentRecords from "../mySalaryBenefits/components/SalaryAdjustmentRecords";
+import "../historicalPayroll/index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  render() {
+    const employeeId = WeaTools.getUrlParams().hrmResourceID;
+    return (
+      <div className="history-payroll-box">
+        <SalaryAdjustmentRecords type="mySalaryRecordList4Card" employeeId={employeeId}/>
+      </div>
+    );
+  }
+}
+
+export default Index;