fixed

.umirc.ts

@@ -2,7 +2,7 @@
  * @Author: Chengliang 1546584672@qq.com
  * @Date: 2022-08-04 10:22:55
  * @LastEditors: Chengliang 1546584672@qq.com
- * @LastEditTime: 2022-08-08 16:31:31
+ * @LastEditTime: 2022-08-09 10:34:39
  * @FilePath: /org-chart-frant/.umirc.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -26,7 +26,7 @@ export default defineConfig({
   proxy: {
     '/api': {
       // 标识需要进行转换的请求的url
-      target: 'http://localhost:8686/api', // 服务端域名
+      target: 'http://localhost:8686/api', // 服务端域名 / http://localhost:8686
       changeOrigin: true, // 允许域名进行转换
       pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
     },

src/components/orgChart/index.jsx

@@ -1,7 +1,15 @@
+/*
+ * @Author: Chengliang 1546584672@qq.com
+ * @Date: 2022-08-04 10:22:55
+ * @LastEditors: Chengliang 1546584672@qq.com
+ * @LastEditTime: 2022-08-09 11:01:43
+ * @FilePath: /org-chart-frant/src/components/orgChart/index.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import React, { useLayoutEffect, useRef, useEffect } from 'react';
 import { OrgChart } from 'd3-org-chart';
 import * as d3 from 'd3';
-import { message } from "antd";
+import { message } from 'antd';
 
 export const OrgChartComponent = (props, ref) => {
   const d3Container = useRef(null);
@@ -13,54 +21,53 @@ export const OrgChartComponent = (props, ref) => {
 
   props.setClick(addNode);
 
-
   // We need to manipulate DOM
   useLayoutEffect(() => {
     if (props.data && d3Container.current) {
       if (!chart) {
-        chart = new OrgChart({expandLevel: 3});
+        chart = new OrgChart({ expandLevel: 3 });
-        window.chart = chart
+        window.chart = chart;
       }
-      props.setChart(chart)
+      props.setChart(chart);
       try {
-
+        let buttonClick = chart.onButtonClick;
-        let buttonClick = chart.onButtonClick
 
         chart
-        .container(d3Container.current)
+          .container(d3Container.current)
-        .data(props.data)
+          .data(props.data)
-        .nodeWidth(props.nodeWidth)
+          .nodeWidth(props.nodeWidth)
-        .nodeHeight(props.nodeHeight)
+          .nodeHeight(props.nodeHeight)
-        .layout("top")
+          .layout('top')
-        .linkUpdate(function(d, i, arr) {
+          .linkUpdate(function (d, i, arr) {
-          d3.select(this)
+            d3.select(this)
-            .attr("stroke", "#66BAF5")
+              .attr('stroke', '#66BAF5')
-            .attr("stroke-width", 1)
+              .attr('stroke-width', 1)
-            .style("stroke-dasharray", ("3, 3"))
+              .style('stroke-dasharray', '3, 3');
-        })
+          })
-        .onNodeClick((d, i, arr) => {
+          .onNodeClick((d, i, arr) => {
-          console.log(d, 'Id of clicked node ');
+            console.log(d, 'Id of clicked node ');
-          props.onNodeClick(d);
+            props.onNodeClick(d);
-        })
+          })
 
-        .buttonContent(props.buttonContent)
+          .buttonContent(props.buttonContent)
-        .nodeContent(props.nodeContent)
+          .nodeContent(props.nodeContent)
-        .render()
+          .render();
 
-        chart.setCentered(chart.getChartState().root.id).expandExpandNodes().render();
+        chart
+          .setCentered(chart.getChartState().root.id)
+          .expandExpandNodes()
+          .render();
         chart.onButtonClick = (event, d) => {
-          buttonClick.bind(chart)(event, d)
+          buttonClick.bind(chart)(event, d);
           props.onButtonClick && props.onButtonClick(event, d);
-        }
+        };
-        
+      } catch (err) {
-      } catch(err) {
         console.log(err);
         message.warning(err);
       }
     }
   }, [props.data, d3Container.current]);
 
-
   return (
     <div>
       <div ref={d3Container} />