ball_admin/src/pages/OrgChart.tsx

import { Store } from "antd/es/form/interface";
import "./org_chart.less";
import { inject, observer } from "mobx-react";
import { useEffect, useState } from "react";
import { orgData } from "./org_config";
const OrgChartSelf = (props: Store) => {
  const { depStore } = props;
  const [data, setOrgData] = useState([]);
  useEffect(() => {
    depStore.getOrg().then((res) => {
      // setOrgData(res.data.record)
      // setOrgData(orgData);
    });
  }, []);

  const getArrayDepth = (arr) => {
    let maxDepth = 0;
    let maxUser = 0;
    function dfs(currentArr, currentDepth) {
      currentDepth++;
      for (let i = 0; i < currentArr.length; i++) {
        if (Array.isArray(currentArr[i].children)) {
          dfs(currentArr[i].children, currentDepth);
        } else {
          maxUser = Math.max(maxUser, currentArr[i].users.length);
          maxDepth = Math.max(maxDepth, currentDepth);
        }
      }
    }
    dfs(arr, 0);
    return maxUser;
  };

  // 示例代码
  // const arr = [[1, 2, [3, 4]], [[5], 6], 7];
  // console.log(getArrayDepth(arr));  // 输出: 3

  const dc = (v) => {
    let max = getArrayDepth(orgData);
    if (v.depId === 1) {
      return 70 * max - 40;
    }
    if (v.children.length > 0) {
      return v.children?.length * 70 - 40;
    }
  };
  const lf = (v) => {
    let max = getArrayDepth(orgData);
    if (v.depId === 1) {
      return -30 * max + 20;
    }
    if (v.children?.length > 0) {
      return -30 * v.children?.length + 10;
    }
  };
  const renderTree = (list: Array<any>) => {
    return (
      <div className="orgsBox">
        {list?.map((v, _) => {
          if (v.children) {
            return (
              <div key={v.dep_name} className="orgs">
                {v.depId !== 2 ? (
                  <span
                    style={{
                      display: "inline-block",
                      width: "20px",
                      marginLeft: 15,
                      color: "#fff",
                    }}
                  >
                    {v.dep_name}
                  </span>
                ) : null}
                {v.depId === 1 ? (
                  <div className="userNameCont">
                    {v.users?.map((v1, _) => {
                      return (
                        <div key={v1.user_name} className="userNmaeBox">
                          <img
                            height={60}
                            style={{
                              border: "1px solid #fff",
                              backgroundColor: "#fff",
                            }}
                            width={50}
                            src="https://pic.aigexing.net/uploads/5/1253/3721116011/92968290915/8785297.jpg"
                            alt=""
                          />
                          <span className="userNmae">{v1.user_name}</span>
                        </div>
                      );
                    })}
                  </div>
                ) : (
                  v.users?.map((v1, _) => {
                    return (
                      <div key={v1.user_name} className="userNmaeBox">
                        <img
                          height={60}
                          style={{
                            border: "1px solid #fff",
                            backgroundColor: "#fff",
                          }}
                          width={50}
                          src="https://pic.aigexing.net/uploads/5/1253/3721116011/92968290915/8785297.jpg"
                          alt=""
                        />
                        <span className="userNmae">{v1.user_name}</span>
                      </div>
                    );
                  })
                )}
                {v.depId !== 2 ? (
                  <div className="lineBox" style={{ width: 80 }}>
                    <div className={"linLeft" + v.depId}></div>
                    <div
                      className={"linRight linRight" + v.depId}
                      style={{ width: dc(v), right: lf(v) }}
                    ></div>
                  </div>
                ) : null}
                {renderTree(v.children)}
              </div>
            );
          }
          return (
            <div
              className="userNameCont node"
              key={v.dep_name}
              style={{ paddingLeft: 20, display: "flex" }}
            >
              {v.users?.map((v1, _) => {
                return (
                  <div key={v1.user_name} className="userNmaeBox">
                    <img
                      height={60}
                      style={{
                        border: "1px solid #fff",
                        backgroundColor: "#fff",
                      }}
                      width={50}
                      src="https://pic.aigexing.net/uploads/5/1253/3721116011/92968290915/8785297.jpg"
                      alt=""
                    />
                    <span className="userNmae">{v1.user_name}</span>
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
    );
  };
  return <div className="org_sc">{renderTree(orgData)}</div>;
};

// export default OrgChartSelf;
export default inject("depStore")(observer(OrgChartSelf));