diff --git a/pc4mobx/hrmSalary/index.js b/pc4mobx/hrmSalary/index.js
index af5bbfb0..115db668 100644
--- a/pc4mobx/hrmSalary/index.js
+++ b/pc4mobx/hrmSalary/index.js
@@ -42,6 +42,7 @@ import MySalaryView from "./pages/mySalary/mySalaryView";
 import WatermarkPreview from "./pages/payroll/watermarkPreview";
 import ExternalPersonManage from "./pages/externalPersonManage";
 import AdjustSalaryManage from "./pages/adjustSalaryManage";
+import TopologyMap from "./pages/topologyMap";
 
 import stores from "./stores";
 import "./style/index";
@@ -168,6 +169,7 @@ const Routes = (
     <Route key="analysisOfSalaryStatisticsId" path="analysisOfSalaryStatistics/:employeeId" component={EmployeeList}/>
     <Route key="reportView" path="reportView" component={ReportView}/>
     <Route key="externalPersonManage" path="externalPersonManage" component={ExternalPersonManage}/>
+    <Route key="topologyView" path="topologyView/:salarySobId/:salaryItemId" component={TopologyMap}/>
   </Route>
 );
 
diff --git a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/diagramModal.js b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/diagramModal.js
deleted file mode 100644
index 8f74a8c1..00000000
--- a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/diagramModal.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Author: 黎永顺
- * name: 薪资项目拓扑图-查看
- * Description:
- * Date: 2023/10/26
- */
-import React, { Component } from "react";
-import { WeaDialog, WeaLocaleProvider } from "ecCom";
-import SalaryItemDiagram from "../../../../salaryItemDiagram";
-
-const getLabel = WeaLocaleProvider.getLabel;
-
-class DiagramModal extends Component {
-  componentDidMount() {
-    window.addEventListener("message", this.handleReceive, false);
-  }
-
-  handleReceive = async ({ data }) => {
-    const { type } = data;
-    if (type === "initDiagram") this.postMessageToChild(this.props);
-  };
-
-  componentWillUnmount() {
-    window.removeEventListener("message", this.handleReceive, false);
-  }
-
-  postMessageToChild = (payload = {}) => {
-    const { width, height } = this.diagramRef.state.style;
-    const i18n = {
-      "公式": getLabel(18125, "公式")
-    };
-    const childFrameObj = document.getElementById("topologyDiagram");
-    childFrameObj.contentWindow.postMessage(JSON.stringify({ ...payload, width, height, i18n }), "*");
-  };
-
-  render() {
-    return (
-      <WeaDialog
-        {...this.props} ref={dom => this.diagramRef = dom}
-        scalable hasScroll className="diagramDialog" initLoadCss
-        title={getLabel(111, "拓扑图")}
-        style={{
-          width: 1150,
-          height: 850,
-          minHeight: 200,
-          minWidth: 380,
-          maxHeight: "90%",
-          maxWidth: "90%",
-          overflow: "hidden",
-          transform: "translate(0px, 0px)"
-        }}
-      >
-        <SalaryItemDiagram/>
-      </WeaDialog>
-    );
-  }
-}
-
-export default DiagramModal;
diff --git a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcTable.js b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcTable.js
index a09a5052..9a460c53 100644
--- a/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcTable.js
+++ b/pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcTable.js
@@ -11,7 +11,6 @@ import { inject, observer } from "mobx-react";
 import { acctResultList, updateLockStatus } from "../../../../../apis/calculate";
 import ProgressModal from "../../../../../components/progressModal";
 import EditSalaryCalcSlide from "./editSalaryCalcSlide";
-import DiagramModal from "./diagramModal";
 
 const getLabel = WeaLocaleProvider.getLabel;
 
@@ -23,8 +22,7 @@ class EditCalcTable extends Component {
     this.state = {
       loading: false, pageInfo: { current: 1, pageSize: 10, total: 0 },
       selectedRowKeys: [], progressVisible: false, progress: 0,
-      salaryCalcSlide: { visible: false, id: "" },
-      diagramModal: { visible: false, salaryItemId: "", salarySobId: "" }
+      salaryCalcSlide: { visible: false, id: "" }
     };
     this.timerLock = null;
   }
@@ -63,8 +61,8 @@ class EditCalcTable extends Component {
           break;
         case "DIAGRAM":
           const { salarySobId } = this.props;
-          const { diagramModal } = this.state;
-          this.setState({ diagramModal: { ...diagramModal, ...params, visible: true, salarySobId } });
+          const { salaryItemId: itemid, acctEmpId } = params;
+          window.open(`/spa/hrmSalary/static/index.html#/main/hrmSalary/topologyView/${salarySobId}/${itemid}?acctEmpId=${acctEmpId}`, "_blank");
           break;
         default:
           break;
@@ -73,10 +71,9 @@ class EditCalcTable extends Component {
   };
   updateLockStatus = (payload) => {
     const { salarySobId } = this.props;
-    const { diagramModal } = this.state;
     const { lockStatus, salaryItemId } = payload;
     if (lockStatus === "DIAGRAM") {
-      this.setState({ diagramModal: { ...diagramModal, visible: true, salarySobId, salaryItemId } });
+      window.open(`/spa/hrmSalary/static/index.html#/main/hrmSalary/topologyView/${salarySobId}/${salaryItemId}`, "_blank");
       return;
     }
     Modal.confirm({
@@ -173,7 +170,7 @@ class EditCalcTable extends Component {
   };
 
   render() {
-    const { loading, progressVisible, progress, salaryCalcSlide, diagramModal } = this.state;
+    const { loading, progressVisible, progress, salaryCalcSlide } = this.state;
     return (
       <div className="editCalcTable-layout">
         <Spin spinning={loading}>
@@ -190,10 +187,6 @@ class EditCalcTable extends Component {
                                    id: ""
                                  }
                                }, () => isFresh === "true" && this.queryCalcResultList())}/>
-          {
-            diagramModal.visible &&
-            <DiagramModal {...diagramModal} onCancel={() => this.setState({ diagramModal: { visible: false } })}/>
-          }
           {
             progressVisible &&
             <ProgressModal
diff --git a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemTable.js b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemTable.js
index 123b74ab..9366f360 100644
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemTable.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemTable.js
@@ -246,7 +246,13 @@ class LedgerSalaryItemTable extends Component {
       {
         title: "名称",
         dataIndex: "name",
-        key: "name"
+        key: "name",
+        render: (text, record) => {
+          const { salarySobId, salaryItemId } = record;
+          return <a
+            href={`/spa/hrmSalary/static/index.html#/main/hrmSalary/topologyView/${salarySobId}/${salaryItemId}`}
+            target="_blank">{text}</a>;
+        }
       },
       {
         title: <span>
diff --git a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js
index 8b2e350e..cb768c92 100644
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js
@@ -266,7 +266,7 @@ class LedgerSlide extends Component {
         className="slideOuterWrapper"
         visible={visible}
         top={0}
-        width={65}
+        width={100}
         height={100}
         direction="right"
         measure="%"
diff --git a/pc4mobx/hrmSalary/pages/salaryItemDiagram/index.js b/pc4mobx/hrmSalary/pages/salaryItemDiagram/index.js
index 51e16088..710a6387 100644
--- a/pc4mobx/hrmSalary/pages/salaryItemDiagram/index.js
+++ b/pc4mobx/hrmSalary/pages/salaryItemDiagram/index.js
@@ -11,8 +11,8 @@ class Index extends Component {
     return (
       <iframe
         style={{ border: 0, width: "100%", height: "100%" }}
-        src="http://localhost:7607/#/salaryItemDiagram"
-        // src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/salaryItemDiagram"
+        // src="http://localhost:7607/#/salaryItemDiagram"
+        src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/salaryItemDiagram"
         id="topologyDiagram"
       />
     );
diff --git a/pc4mobx/hrmSalary/pages/topologyMap/index.js b/pc4mobx/hrmSalary/pages/topologyMap/index.js
new file mode 100644
index 00000000..9f7c1050
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/topologyMap/index.js
@@ -0,0 +1,45 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资项目拓扑图-查看
+ * Description:
+ * Date: 2023/10/26
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
+import SalaryItemDiagram from "../salaryItemDiagram";
+import { getQueryString } from "../../util/url";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  componentDidMount() {
+    window.addEventListener("message", this.handleReceive, false);
+  }
+
+  handleReceive = async ({ data }) => {
+    const { type } = data;
+    if (type === "initDiagram") this.postMessageToChild();
+  };
+
+  componentWillUnmount() {
+    window.removeEventListener("message", this.handleReceive, false);
+  }
+
+  postMessageToChild = () => {
+    const i18n = { "公式": getLabel(18125, "公式") };
+    const { params: payload = {} } = this.props;
+    const acctEmpId = getQueryString("acctEmpId");
+    const childFrameObj = document.getElementById("topologyDiagram");
+    childFrameObj.contentWindow.postMessage(JSON.stringify({ ...payload, i18n, acctEmpId }), "*");
+  };
+
+  render() {
+    return (
+      <div style={{ width: "100%", height: "100%" }}>
+        <SalaryItemDiagram/>
+      </div>
+    );
+  }
+}
+
+export default Index;