From 44c17194c8bbe9c2d2fc2cd97672596573b27679 Mon Sep 17 00:00:00 2001 From: Chengliang <1546584672@qq.com> Date: Thu, 11 Aug 2022 10:03:55 +0800 Subject: [PATCH] fixed --- .umirc.ts | 4 +- src/components/orgChart/index.jsx | 71 +++++++++++++++++-------------- 2 files changed, 41 insertions(+), 34 deletions(-) diff --git a/.umirc.ts b/.umirc.ts index 36b62ad..6957058 100644 --- a/.umirc.ts +++ b/.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去掉 }, diff --git a/src/components/orgChart/index.jsx b/src/components/orgChart/index.jsx index 1ffe036..6c4cdd8 100644 --- a/src/components/orgChart/index.jsx +++ b/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); @@ -12,54 +20,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}); - window.chart = chart + chart = new OrgChart({ expandLevel: 3 }); + window.chart = chart; } - props.setChart(chart) + props.setChart(chart); try { - - let buttonClick = chart.onButtonClick + let buttonClick = chart.onButtonClick; chart - .container(d3Container.current) - .data(props.data) - .nodeWidth(props.nodeWidth) - .nodeHeight(props.nodeHeight) - .layout("top") - .linkUpdate(function(d, i, arr) { - d3.select(this) - .attr("stroke", "#66BAF5") - .attr("stroke-width", 1) - .style("stroke-dasharray", ("3, 3")) - }) - .onNodeClick((d, i, arr) => { - console.log(d, 'Id of clicked node '); - props.onNodeClick(d); - }) - - .buttonContent(props.buttonContent) - .nodeContent(props.nodeContent) - .render() + .container(d3Container.current) + .data(props.data) + .nodeWidth(props.nodeWidth) + .nodeHeight(props.nodeHeight) + .layout('top') + .linkUpdate(function (d, i, arr) { + d3.select(this) + .attr('stroke', '#66BAF5') + .attr('stroke-width', 1) + .style('stroke-dasharray', '3, 3'); + }) + .onNodeClick((d, i, arr) => { + console.log(d, 'Id of clicked node '); + props.onNodeClick(d); + }) + + .buttonContent(props.buttonContent) + .nodeContent(props.nodeContent) + .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 (