fix(amap):core

package-lock.json

@@ -18,6 +18,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "@tinymce/tinymce-react": "^4.3.0",
+        "@twp0217/react-org-chart": "^1.1.2",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.11.65",
         "@types/react": "^18.0.21",
@@ -4472,6 +4473,18 @@
       "resolved": "https://registry.npmmirror.com/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA=="
     },
+    "node_modules/@twp0217/react-org-chart": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@twp0217/react-org-chart/-/react-org-chart-1.1.2.tgz",
+      "integrity": "sha512-Jjr9p26L/CVYsa3QIygAMduhEqxJUiSOWFZdmWsOti/URVhBG5+SCzcZpWbWH1rdm+lNKVAJTgZGlfSyES6I3w==",
+      "dependencies": {
+        "classnames": "^2.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmmirror.com/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -36495,6 +36508,14 @@
       "resolved": "https://registry.npmmirror.com/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA=="
     },
+    "@twp0217/react-org-chart": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@twp0217/react-org-chart/-/react-org-chart-1.1.2.tgz",
+      "integrity": "sha512-Jjr9p26L/CVYsa3QIygAMduhEqxJUiSOWFZdmWsOti/URVhBG5+SCzcZpWbWH1rdm+lNKVAJTgZGlfSyES6I3w==",
+      "requires": {
+        "classnames": "^2.3.1"
+      }
+    },
     "@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmmirror.com/@types/aria-query/-/aria-query-5.0.4.tgz",

package.json

@@ -13,6 +13,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@tinymce/tinymce-react": "^4.3.0",
+    "@twp0217/react-org-chart": "^1.1.2",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.11.65",
     "@types/react": "^18.0.21",

src/components/org/OrgChart.less

@@ -0,0 +1,171 @@
+@node-color: #1890ff;
+@line-width: 1px;
+@line-color: @node-color;
+@expand-icon-size: 16px;
+
+.text-overflow-ellipsis() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.org-chart {
+  &-container {
+    display: inline-block;
+  }
+
+  &-table {
+    border-collapse: separate;
+    border-spacing: 0;
+    line-height: 1.5715;
+
+    .expand-icon {
+      display: inline-block;
+      width: @expand-icon-size;
+      height: @expand-icon-size;
+      border-radius: 50%;
+      background-color: @line-color;
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      margin-left: -@expand-icon-size / 2;
+      margin-bottom: -@expand-icon-size / 2;
+      z-index: 99;
+      cursor: pointer;
+
+      &-expanded,
+      &-collapsed {
+        &::before {
+          content: '';
+          width: 8px;
+          height: 2px;
+          background-color: #fff;
+          position: absolute;
+          top: 7px;
+          left: 4px;
+        }
+      }
+
+      &-collapsed {
+        &::after {
+          content: '';
+          width: 2px;
+          height: 8px;
+          background-color: #fff;
+          position: absolute;
+          top: 4px;
+          left: 7px;
+        }
+      }
+
+      &:hover {
+        background-color: darken(@line-color, 5%);
+      }
+    }
+
+    td {
+      text-align: center;
+      padding: 0;
+      vertical-align: top;
+
+      &.hidden {
+        display: none !important;
+      }
+    }
+
+    &-node {
+      display: inline-block;
+      border: 1px solid @node-color;
+      padding: 0.5rem;
+      margin: 0 5px;
+      cursor: pointer;
+    }
+
+    &-line {
+      height: 20px;
+      position: relative;
+
+      &:not(&-children) {
+        &:before {
+          content: '';
+          position: absolute;
+          top: 0;
+          width: @line-width;
+          height: 100%;
+          background-color: @line-color;
+        }
+      }
+
+      &-children {
+        &:nth-child(odd) {
+          border-right: @line-width solid @line-color;
+        }
+
+        &:not(:first-child, :last-child) {
+          border-top: @line-width solid @line-color;
+        }
+      }
+    }
+
+    // 水平
+    &&-horizontal {
+      .expand-icon {
+        top: 50%;
+        bottom: auto;
+        left: auto;
+        right: 0;
+        margin-left: auto;
+        margin-right: -@expand-icon-size / 2;
+        margin-top: -@expand-icon-size / 2;
+        margin-bottom: auto;
+      }
+      td {
+        vertical-align: middle;
+      }
+
+      tr {
+        &:nth-child(odd) {
+          > .org-chart-table-line-children {
+            border-bottom: @line-width solid @line-color;
+          }
+        }
+        &:not(:first-child, :last-child) {
+          > .org-chart-table-line-children {
+            border-left: @line-width solid @line-color;
+          }
+        }
+      }
+
+      .org-chart-table {
+        &-node {
+          margin: 5px 0;
+          width: 120px;
+
+          &-content {
+          }
+        }
+
+        &-line {
+          height: auto;
+          width: 20px;
+
+          &:not(&-children) {
+            &:before {
+              top: auto;
+              left: 0;
+              width: 100%;
+              height: @line-width;
+            }
+          }
+
+          &-children {
+            &:nth-child(odd),
+            &:not(:first-child, :last-child) {
+              border: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/org/OrgChart.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import React from 'react';
+import { OrgChartProps } from './interface';
+import OrgChartNode from './components/OrgChartNode';
+import './OrgChart.less';
+
+const OrgChart = (props: OrgChartProps) => {
+  const { data, className, style, ...otherProps } = props;
+
+  return !!data ? (
+    <div className={classNames('org-chart-container', className)} style={style}>
+      <OrgChartNode {...otherProps} data={data} />
+    </div>
+  ) : null;
+};
+
+OrgChart.defaultProps = {
+  direction: 'vertical',
+  expandAll: true,
+  expandable: false,
+};
+
+export default OrgChart;

src/components/org/components/OrgChartNode.tsx

@@ -0,0 +1,188 @@
+import classNames from 'classnames';
+import React from 'react';
+import {
+  OrgChartNodeDataType,
+  OrgChartNodeProps,
+  RowProps,
+} from '../interface';
+import OrgChartNodeRow from './OrgChartNodeRow';
+
+const OrgChartNode = (props: OrgChartNodeProps) => {
+  const {
+    data,
+    expandAll,
+    expandable,
+    direction,
+    renderNode,
+    onExpand,
+    onClick,
+  } = props;
+
+  const [expanded, setExpanded] = React.useState<boolean>(false);
+
+  const handleExpandChange = () => {
+    const newExpanded = !expanded;
+    setExpanded(newExpanded);
+    onExpand?.(newExpanded, data);
+  };
+
+  const getOrgNodeRow = (
+    span: number,
+    data: OrgChartNodeDataType,
+  ): RowProps => {
+    const contentNode: React.ReactNode = (
+      <div className="org-chart-table-node-content" title={data.label}>
+        {data.label}
+      </div>
+    );
+
+    return [
+      {
+        span,
+        content: (
+          <td>
+            <div
+              className={classNames('org-chart-table-node', data.className)}
+              style={data.style}
+              onClick={() => onClick?.(data)}
+            >
+              {!!renderNode ? renderNode(data, contentNode) : contentNode}
+            </div>
+          </td>
+        ),
+      },
+    ];
+  };
+
+  const getLineRow = (span: number): RowProps => {
+    return [
+      {
+        span,
+        content: (
+          <td className="org-chart-table-line">
+            {expandable ? (
+              <div
+                className={classNames({
+                  'expand-icon': expandable,
+                  'expand-icon-expanded': expandable && expanded,
+                  'expand-icon-collapsed': expandable && !expanded,
+                })}
+                onClick={() => handleExpandChange()}
+              ></div>
+            ) : null}
+          </td>
+        ),
+      },
+    ];
+  };
+
+  const getChildrenLineRow = (span: number, itemSpan: number): RowProps => {
+    const cells: RowProps = [];
+    for (let index = 0; index < span; index = index + itemSpan) {
+      cells.push({
+        span: 1,
+        content: (
+          <td
+            key={index}
+            className={classNames(
+              'org-chart-table-line',
+              'org-chart-table-line-children',
+              {
+                hidden: !expanded,
+              },
+            )}
+          >
+            &nbsp;
+          </td>
+        ),
+      });
+    }
+    return cells;
+  };
+
+  const getChildrenNode = (
+    datas: OrgChartNodeDataType[] = [],
+    itemSpan: number,
+  ): RowProps => {
+    const cells: RowProps = [];
+    datas.forEach((data, index) => {
+      cells[itemSpan * index] = {
+        span: itemSpan,
+        content: (
+          <td
+            key={data.key}
+            className={classNames('org-chart-table-node-children', {
+              hidden: !expanded,
+            })}
+          >
+            <OrgChartNode {...props} data={data} />
+          </td>
+        ),
+      };
+    });
+    return cells;
+  };
+
+  const getRows = (): RowProps[] => {
+    if (data) {
+      const rows: RowProps[] = [];
+      const childrenLength = data?.children?.length || 0;
+      const span = childrenLength * 2;
+
+      rows.push(getOrgNodeRow(span, data));
+      // 判断是否有子节点
+      if (data.children?.length ?? 0 > 0) {
+        rows.push(getLineRow(span));
+        rows.push(getChildrenLineRow(span, 1));
+        rows.push(getChildrenNode(data.children, 2));
+      }
+
+      if (direction === 'horizontal') {
+        const newRow: RowProps[] = [];
+        rows.forEach((row, rowIndex) => {
+          row.forEach((cell, cellIndex) => {
+            newRow[cellIndex] = newRow[cellIndex] || [];
+            newRow[cellIndex][rowIndex] = cell;
+          });
+        });
+        return newRow;
+      }
+      return rows;
+    }
+    return [];
+  };
+
+  const rows = React.useMemo(() => {
+    return getRows();
+  }, [data, expanded]);
+
+  React.useEffect(() => {
+    if (expandable === true) {
+      setExpanded(!!expandAll);
+    } else {
+      setExpanded(true);
+    }
+  }, [expandAll, expandable]);
+
+  return (
+    <table
+      className={classNames('org-chart-table', {
+        'org-chart-table-horizontal': direction === 'horizontal',
+        'org-chart-table-vertical': direction === 'vertical',
+      })}
+    >
+      <tbody>
+        {rows.map((row, index) => (
+          <OrgChartNodeRow
+            key={index}
+            index={index}
+            row={row}
+            direction={direction}
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default OrgChartNode;

src/components/org/components/OrgChartNodeRow.tsx

@@ -0,0 +1,27 @@
+import { OrgChartNodeProps, RowProps } from '../interface';
+import React from 'react';
+
+export interface OrgChartNodeRowProps
+  extends Pick<OrgChartNodeProps, 'direction'> {
+  className?: string;
+  index: number;
+  row: RowProps;
+}
+
+const OrgChartNodeRow = (props: OrgChartNodeRowProps) => {
+  const { className, index, row, direction } = props;
+
+  return (
+    <tr key={index} className={className}>
+      {row.map((cell, cellIndex) => {
+        return React.cloneElement(cell.content, {
+          key: cellIndex,
+          ...(direction === 'horizontal' ? { rowSpan: cell.span } : {}),
+          ...(direction === 'vertical' ? { colSpan: cell.span } : {}),
+        });
+      })}
+    </tr>
+  );
+};
+
+export default OrgChartNodeRow;

src/components/org/index.ts

@@ -0,0 +1,5 @@
+import { OrgChartNodeDataType, OrgChartProps } from './interface';
+import OrgChart from './OrgChart';
+
+export type { OrgChartNodeDataType, OrgChartProps };
+export default OrgChart;

src/components/org/interface.ts

@@ -0,0 +1,32 @@
+export interface CellProps {
+  span: number;
+  content: React.ReactElement;
+}
+
+export type RowProps = CellProps[];
+
+export interface OrgChartNodeDataType {
+  key: string | number;
+  label: string;
+  children?: OrgChartNodeDataType[];
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface OrgChartNodeProps {
+  data: OrgChartNodeDataType;
+  expandAll?: boolean;
+  expandable?: boolean;
+  direction?: 'horizontal' | 'vertical';
+  renderNode?: (
+    node: OrgChartNodeDataType,
+    originNode: React.ReactNode,
+  ) => React.ReactNode;
+  onExpand?: (expanded: boolean, node: OrgChartNodeDataType) => void;
+  onClick?: (node: OrgChartNodeDataType) => void;
+}
+
+export interface OrgChartProps extends Partial<OrgChartNodeProps> {
+  className?: string;
+  style?: React.CSSProperties;
+}

src/pages/OrgChart.tsx

@@ -1,372 +1,75 @@
 import "./org_chart.less";
-const OrgChart = () => {
+import OrgChart from "@/components/org/OrgChart";
-  const getArrayDepth=(arr)=> {
+import { OrgChartNodeDataType } from "@/components/org";
-    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].userList.length);
-          maxDepth = Math.max(maxDepth, currentDepth);
-        }
-      }
-    }
 
-    dfs(arr, 0);
+const OrgChartSelf = () => {
-    return maxUser;
+  const data: OrgChartNodeDataType = {
-  }
+    key: 0,
-   
+    label: "科技有限公司",
-  // 示例代码
+    children: [
-  // const arr = [[1, 2, [3, 4]], [[5], 6], 7];
+      {
-  // console.log(getArrayDepth(arr));  // 输出: 3
+        key: 1,
-  const data = [
+        label: "研发部",
-    {
+        children: [
-      depName: "镇武装部党委",
+          { key: 11, label: "开发-前端" },
-      depId: 1,
+          { key: 12, label: "开发-后端" },
-      userList: [
+          { key: 13, label: "UI设计" },
-        {
+          { key: 14, label: "产品经理" ,},
-          position: "武装部长",
+        ],
-          userName: "李部长",
+      },
-          userId: 1,
+      {
-        },
+        key: 2,
-        {
+        label: "销售部",
-          position: "教导员",
+        children: [
-          userName: "王教导",
+          { key: 21, label: "销售一部" },
-          userId: 2,
+          { key: 22, label: "销售二部" },
-        },
+        ],
-      ],
+      },
-      children: [
+      { key: 3, label: "财务部" },
-        {
+      { key: 4, label: "人事部" },
-          depName: " 武装力量党支部",
+    ],
-          depId: 2,
-          children: [
-            {
-              depName: " 文武社区支部",
-              depId: 3,
-              children: [
-                {
-                  depName: " 一小组",
-                  depId: 6,
-                  userList: [
-                    {
-                      position: "一小组长",
-                      userName: "一小组长1",
-                      userId: 6,
-                    },
-                    {
-                      position: "二小组长12",
-                      userName: "二小组长2",
-                      userId: 8,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小三3",
-                      userId: 11,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小四4",
-                      userId: 12,
-                    },
-                    {
-                        position: "二小组长34",
-                        userName: "二小组长5",
-                        userId: 8,
-                      },
-                      {
-                        position: "战士",
-                        userName: "王小三6",
-                        userId: 11,
-                      },
-                      {
-                        position: "战士",
-                        userName: "王小四7",
-                        userId: 13,
-                      },
-                  ],
-                },
-                {
-                  depName: " 二小组",
-                  depId: 7,
-                  userList: [
-                    {
-                      position: "二小组长8",
-                      userName: "二小组长9",
-                      userId: 7,
-                    },
-                    {
-                      position: "二小组长10",
-                      userName: "二小组长11",
-                      userId: 8,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小三14",
-                      userId: 11,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小四",
-                      userId: 12,
-                    },
-                  ],
-                },
-              ],
-              userList: [
-                {
-                  position: "文武社区支部书记",
-                  userName: "书记名称",
-                  userId: 3,
-                },
-              ],
-            },
-            {
-              depName: " 花龙村支部",
-              depId: 4,
-              children: [
-                {
-                  depName: " 一小组",
-                  depId: 7,
-                  userList: [
-                    {
-                      position: "一小组长",
-                      userName: "一小组长",
-                      userId: 7,
-                    },
-                    {
-                        position: "二小组长2",
-                        userName: "二小组长11",
-                        userId: 8,
-                      },
-                      {
-                        position: "战士",
-                        userName: "王小三",
-                        userId: 11,
-                      },
-                      {
-                        position: "战士",
-                        userName: "王小四12",
-                        userId: 12,
-                      },
-                      {
-                        position: "二小组长3",
-                        userName: "二小组长",
-                        userId: 8,
-                      },
-                     
-                      {
-                        position: "战士",
-                        userName: "王小四32",
-                        userId: 12,
-                      },
-                  ],
-                },
-                {
-                  depName: " 二小组",
-                  depId: 8,
-                  userList: [
-                    {
-                      position: "二小组长4",
-                      userName: "二小组长4",
-                      userId: 8,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小三",
-                      userId: 11,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小四12",
-                      userId: 12,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小五",
-                      userId: 13,
-                    },
-                  ],
-                },
-              ],
-              userList: [
-                {
-                  position: "花龙村支部书记",
-                  userName: "书记名称",
-                  userId: 4,
-                },
-              ],
-            },
-            {
-              depName: " 云华社区支部",
-              depId: 5,
-              children: [
-                {
-                  depName: " 一小组",
-                  depId: 8,
-                  userList: [
-                    {
-                      position: "一小组长",
-                      userName: "小组长",
-                      userId: 8,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王喜哦",
-                      userId: 12,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王喜吃",
-                      userId: 13,
-                    },
-                  ],
-                },
-                {
-                  depName: " 二小组",
-                  depId: 9,
-                  userList: [
-                    {
-                      position: "二小组长5",
-                      userName: "小组长",
-                      userId: 9,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小二",
-                      userId: 10,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小三",
-                      userId: 11,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小四3",
-                      userId: 12,
-                    },
-                    {
-                      position: "战士",
-                      userName: "王小五",
-                      userId: 13,
-                    },
-                  ],
-                },
-              ],
-              userList: [
-                {
-                  position: "云华社区支部书记",
-                  userName: "书记名称",
-                  userId: 5,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ];
-const dc = (v)=>{
-  let max = getArrayDepth(data)
-  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(data)
-  if (v.depId===1){
-    return -30*max+20
-  }
-  if (v.children.length>0){
-    return -30*v.children.length+20
-  }
- 
-}
-  const renderTree = (list: Array<any>) => {
-    return (
-      <div className="orgsBox">
-        {list?.map((v, _) => {
-          if (v.children) {
-            return (
-              <div key={v.depName} className="orgs">
-                {v.depId !== 2 ? (
-                  <span
-                    style={{
-                      display: "inline-block",
-                      width: "20px",
-                      marginLeft: 15,
-                      color: "#fff",
-                    }}
-                  >
-                    {v.depName}
-                  </span>
-                ) : null}
-                {v.depId === 1 ? (
-                  <div className="userNameCont">
-                    {v.userList?.map((v1, _) => {
-                      return (
-                        <div key={v1.userName} className="userNmaeBox">
-                          <img
-                            height={60}
-                            src="https://img0.baidu.com/it/u=2135939479,1633462316&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
-                            alt=""
-                          />
-                          <span className="userNmae">{v1.userName}</span>
-                        </div>
-                      );
-                    })}
-                  </div>
-                ) : (
-                  v.userList?.map((v1, _) => {
-                    return (
-                      <div key={v1.userName} className="userNmaeBox">
-                        <img
-                          height={60}
-                          src="https://img0.baidu.com/it/u=2135939479,1633462316&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
-                          alt=""
-                        />
-                        <span className="userNmae">{v1.userName}</span>
-                      </div>
-                    );
-                  })
-                )}
-                {v.depId !== 2 ? (
-                  <div className="lineBox"  style={{ width: 80 }}>
-                    <div className="linLeft"></div>
-                    <div className="linRight" style={{ width: dc(v),right:lf(v) }}></div>
-                  </div>
-                ) : null}
-                {renderTree(v.children)}
-              </div>
-            );
-          }
-          return (
-            <div className="userNameCont node" key={v.depName} style={{ paddingLeft: 20, display: "flex" }}>
-              {v.userList?.map((v1, _) => {
-                return (
-                  <div key={v1.userName} className="userNmaeBox">
-                    <img
-                      height={60}
-                      src="https://img1.baidu.com/it/u=1746619441,3368766734&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"
-                      alt=""
-                    />
-                    <span className="userNmae">{v1.userName}</span>
-                  </div>
-                );
-              })}
-            </div>
-          );
-        })}
-      </div>
-    );
   };
-  return <div className="org_sc">{renderTree(data)}</div>;
+
+  return (
+    <>
+      <OrgChart data={data} direction={"horizontal"}/>
+    </>
+  );
 };
 
-export default OrgChart;
+export default OrgChartSelf;
+
+// import React from 'react';
+// import OrgChart, {
+
+//   OrgChartProps,
+// } from '@twp0217/react-org-chart';
+
+// import OrgChartNodeDataType from '@twp0217/react-org-chart';
+
+// export default () => {
+//   const data: OrgChartNodeDataType = require('./data.json');
+
+//   const [direction, setDirection] =
+//     React.useState<OrgChartProps['direction']>('horizontal');
+
+//   return (
+//     <div>
+//       <div>
+//         <button
+//           style={{ color: direction === 'horizontal' ? 'blue' : null }}
+//           onClick={() => setDirection('horizontal')}
+//         >
+//           horizontal
+//         </button>
+//         <button
+//           style={{ color: direction === 'vertical' ? 'blue' : null }}
+//           onClick={() => setDirection('vertical')}
+//         >
+//           vertical
+//         </button>
+//       </div>
+//       <OrgChart data={data} direction={direction} />
+//     </div>
+//   );
+// };

src/pages/home/homeLeft/pover.tsx

@@ -13,7 +13,7 @@ const Pover = (props: Store) => {
     var option = {
       xAxis: {
         type: "category",
-        data:  data.map((item) => item.dep_name),
+        data: data.map((item) => item.dep_name),
         axisLabel: {
           show: true,
           interval: 0,
@@ -50,6 +50,7 @@ const Pover = (props: Store) => {
     homeStore.getAf().then((res) => {
       initChart(res?.data?.record);
     });
+   
   }, [homeStore]);
   const openPoverHander = () => {
     setIsModalOpen(true);

src/pages/poverDetail/index.tsx

@@ -1,63 +1,68 @@
+import { inject, observer } from "mobx-react";
 import "./pvd.less";
-const PoverDetail = () => {
+import { Store } from "antd/es/form/interface";
+const PoverDetail = (props:Store) => {
+  const {usrStore} = props
   return (
     <div className="pvd_table">
       <table className="table" border={1}>
         <thead>
           <tr>
             <td >姓名</td>
-            <td >王永平</td>
+            <td >{usrStore.userDetail?.user_name}</td>
             <td >性别</td>
-            <td >男</td>
+            <td >{usrStore.userDetail?.sex===1?'男':'女'}</td>
-            <td rowSpan={4} colSpan={2}>所属队伍</td>
+            <td rowSpan={4} colSpan={2}>
+              <img src={usrStore.userDetail?.head_img} alt="" width={80} />
+            </td>
           </tr>
           <tr>
             <td >出生年月</td>
-            <td >2024-09-12</td>
+            <td >{usrStore.userDetail?.sex===1}</td>
             <td >贯籍</td>
-            <td >广州</td>
+            <td >{usrStore.userDetail?.porig}</td>
           </tr>
           <tr>
             <td >政治面貌</td>
-            <td >中共党员</td>
+            <td >{usrStore.userDetail?.political_affil}</td>
             <td >民族</td>
-            <td >汉族</td>
+            <td >{usrStore.userDetail?.eth}</td>
           </tr>
           <tr>
             <td >通讯地址</td>
-            <td colSpan={3}>四川省成都市双流区</td>
+            <td colSpan={3}>{usrStore.userDetail?.mail_addr}</td>
           </tr>
           <tr>
             <td >联系电话</td>
             <td >13208266337</td>
             <td >邮箱</td>
-            <td colSpan={2}>wang_yp2023@qq.com</td>
+            <td colSpan={2}>{usrStore.userDetail?.email}</td>
           </tr>
           <tr>
             <td >学历</td>
-            <td >本科</td>
+            <td >{usrStore.userDetail?.eduLevel}</td>
             <td >专业</td>
-            <td colSpan={2}>应急消防</td>
+            <td colSpan={2}>{usrStore.userDetail?.spec}</td>
           </tr>
           <tr>
             <td >服役部队</td>
-            <td colSpan={4}>中国人民武装警察部队四川省总队凉山消防支队</td>
+            <td colSpan={4}>{usrStore.userDetail?.serv_unit}</td>
           </tr>
           <tr>
             <td >工作单位及职务</td>
-            <td colSpan={4}>中国人民武装警察部队四川省总队凉山消防支队</td>
+            <td colSpan={4}>{usrStore.userDetail?.serv_unit}</td>
           </tr>
           <tr>
             <td >立功受奖情况</td>
-            <td colSpan={4}>中国人民武装警察部队四川省总队凉山消防支队</td>
+            <td colSpan={4}>{usrStore.userDetail?.honors_rec}</td>
           </tr>
           <tr>
             <td >专业情况</td>
-            <td colSpan={4}>中国人民武装警察部队四川省总队凉山消防支队</td>
+            <td colSpan={4}>{usrStore.userDetail?.spec}</td>
           </tr>
           <tr>
             <td >个人证书</td>
-            <td colSpan={4}>中国人民武装警察部队四川省总队凉山消防支队</td>
+            <td colSpan={4}></td>
           </tr>
         </thead>
       </table>
@@ -65,4 +70,4 @@ const PoverDetail = () => {
   );
 };
 
-export default PoverDetail;
+export default inject("usrStore")(observer(PoverDetail));

src/pages/poverPage/index.tsx

@@ -1,12 +1,15 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import * as echarts from "echarts";
 import "./pv.less";
 import { SnippetsTwoTone } from "@ant-design/icons";
 import { inject, observer } from "mobx-react";
 import { Store } from "antd/es/form/interface";
 import PvTable from "./pvTable";
-const PoverPage = (props:Store) => {
+import PoverDetail from "../poverDetail";
-  const initChart = (id: string) => {
+const PoverPage = (props: Store) => {
+  const { usrStore } = props;
+  const [poverData, setPover] = useState<any>();
+  const initChart = (id: string, count: number, total: number) => {
     var myChart = echarts.init(document.getElementById(id));
     var option = {
       title: {
@@ -25,14 +28,13 @@ const PoverPage = (props:Store) => {
           center: ["50%", "50%"],
           color: "#000",
           data: [
-            // itemSyle是单项的背景颜色设置。
             {
-              value: 30,
+              value: count,
               itemStyle: { color: "#254e99", borderRadius: 100 },
               emphasis: { scale: false },
             },
             {
-              value: 100,
+              value: total,
               itemStyle: { color: "#f5f5f5" },
               emphasis: { scale: false },
             },
@@ -49,65 +51,70 @@ const PoverPage = (props:Store) => {
     option && myChart.setOption(option);
   };
   useEffect(() => {
-    initChart("pover_jg");
+    usrStore.getPover().then((e) => {
-    initChart("pover_jgs");
+      initChart("pover_jg",e.data.o_type_nums,e.data.total);
-    initChart("pover1");
+      initChart("pover_jgs",e.data.o_type_num,e.data.total);
-    initChart("pover2");
+      initChart("pover1",e.data.a_member,e.data.total);
-  }, []);
+      initChart("pover2",e.data.p_team,e.data.total);
+      setPover(e.data);
+    });
+  }, [usrStore]);
 
   return (
     <div style={{ width: "100%", height: "100%" }}>
       <div className="nav-header">
-      <div style={{ textAlign: "center" }}>
+        <div style={{ textAlign: "center" }}>
-            <div style={{ width: "150px", height: "100px" }} id="pover_jgs"></div>
+          <div style={{ width: "150px", height: "100px" }} id="pover_jgs"></div>
-            <span style={{ color: "#fff" }}>机关单位</span>
+          <span style={{ color: "#fff" }}>机关单位</span>
-          </div>
+        </div>
         <div className="pv-head-item">
           <SnippetsTwoTone style={{ fontSize: 30 }} />
           <div>
-            <div>120人</div>
+            <div>{poverData?.militia_meber}人</div>
             <span>基干民兵</span>
           </div>
         </div>
         <div className="pv-head-item">
           <SnippetsTwoTone style={{ fontSize: 30 }} />
           <div>
-            <div>120人</div>
+            <div>{poverData?.easy_meber}人</div>
             <span>普通民兵</span>
           </div>
         </div>
         <div className="pv-head-item">
           <SnippetsTwoTone style={{ fontSize: 30 }} />
           <div>
-            <div>120人</div>
+            <div>{poverData?.vet_meber}人</div>
             <span>退役军人</span>
           </div>
         </div>
         <div className="pv-head-item">
           <SnippetsTwoTone style={{ fontSize: 30 }} />
           <div>
-            <div>120人</div>
+            <div>{poverData?.c_member}人</div>
             <span>社干力量</span>
           </div>
         </div>
         <div className="pv-head-item">
           <SnippetsTwoTone style={{ fontSize: 30 }} />
           <div>
-            <div>120人</div>
+          <div>{poverData?.o_member}人</div>
             <span>三方力量</span>
           </div>
         </div>
       </div>
-      <div className="nav-content">
+      <div className="nav-content" >
-        <div className="content-left">
+        <div className="content-left" onClick={(e)=>{
+        usrStore.setPoverDe(false)
+      }}>
           <div style={{ textAlign: "center" }}>
             <div style={{ width: "100%", height: "100%" }} id="pover_jg"></div>
-            <span style={{ color: "#fff" }}>机关单位</span>
+            <span style={{ color: "#fff" }}>企事业单位</span>
           </div>
           <p></p>
           <div style={{ textAlign: "center" }}>
             <div style={{ width: "100%", height: "100%" }} id="pover1"></div>
-            <span style={{ color: "#fff" }}>企事业单位</span>
+            <span style={{ color: "#fff" }}>积极力量</span>
           </div>
           <p></p>
           <div style={{ textAlign: "center" }}>
@@ -116,8 +123,10 @@ const PoverPage = (props:Store) => {
           </div>
         </div>
         <div className="content-right">
-          <p style={{margin:0,fontSize:"20px",marginBottom:"10px"}}>双流区黄水镇人民武装部基干民兵力量</p>
+          <p style={{ margin: 0, fontSize: "20px", marginBottom: "10px" }}>
-          <PvTable />
+            双流区黄水镇人民武装部基干民兵力量
+          </p>
+          {usrStore.poverDetail? <PoverDetail />: <PvTable />}
         </div>
       </div>
     </div>

src/pages/poverPage/pvTable.tsx

@@ -1,4 +1,33 @@
-const PvTable = () => {
+import { Store } from "antd/es/form/interface";
+import { inject, observer } from "mobx-react";
+import { useEffect } from "react";
+
+const PvTable = (props: Store) => {
+  const { teamStore, persMgmtStore, usrStore } = props;
+  useEffect(() => {
+    teamStore.getlist();
+    persMgmtStore.getlist();
+    usrStore.getlist();
+   
+  }, [teamStore,persMgmtStore,usrStore]);
+  const folders = (id,list) => {
+    let has = false
+    list.forEach(element => {
+      if (element.team_identity === id) {
+        has = true
+      }
+    });
+    return <div>{has?'√':'x'}</div>
+  };
+  const foldersp = (id,list) => {
+    let has = false
+    list.forEach(element => {
+      if (element.pers_identity === id) {
+        has = true
+      }
+    });
+    return <div>{has?'√':'x'}</div>
+  };
   return (
     <div className="pv_table">
       <table className="table">
@@ -8,38 +37,45 @@ const PvTable = () => {
             <td rowSpan={2}>姓名</td>
             <td rowSpan={2}>政治面貌</td>
             <td rowSpan={2}>所属集结点</td>
-            <td colSpan={4}>所属队伍</td>
+            <td colSpan={teamStore.list?.length ?? 4}>所属队伍</td>
-            <td colSpan={4}>个人身份</td>
+            <td colSpan={persMgmtStore.list?.length ?? 4}>个人身份</td>
           </tr>
           <tr>
-            <td>消防</td>
+            {teamStore.list?.map((e) => {
-            <td>救援</td>
+              return <td key={e.id}>{e.name}</td>;
-            <td>灭火</td>
+            })}
-            <td>处突</td>
+            {persMgmtStore.list?.map((e) => {
-            <td>企事业</td>
+              return <td key={e.id}>{e.name}</td>;
-            <td>治保</td>
+            })}
-            <td>社区</td>
-            <td>退役</td>
           </tr>
         </thead>
         <tbody>
-          <tr onClick={(e) => console.log(e)}>
+          {usrStore.list?.map((us,i) => {
-            <td>1</td>
+            return (
-            <td>wang_yp</td>
+              <tr onClick={(e) => {
-            <td>党员</td>
+                usrStore.setUserDetaul(us)
-            <td>杨公社区</td>
+                usrStore.setPoverDe(true)
-            <td>√</td>
+              }}>
-            <td></td>
+                <td>{i+1}</td>
-            <td></td>
+                <td>{us.user_name}</td>
-            <td></td>
+                <td>{us.political_affil}</td>
-            <td>√</td>
+                <td>{us.dep_identity}</td>
-            <td>√</td>
+                {teamStore.list?.map((e) => {
-            <td>√</td>
+                  return <td key={e.identity}>{folders(e.identity,us.team)}</td>;
-            <td>√</td>
+                })}
-          </tr>
+                {persMgmtStore.list?.map((e) => {
+                   return <td key={e.identity}>{foldersp(e.identity,us.pers)}</td>;
+                })}
+              </tr>
+            );
+          })}
         </tbody>
       </table>
     </div>
   );
 };
-export default PvTable;
+export default inject(
+  "teamStore",
+  "persMgmtStore",
+  "usrStore"
+)(observer(PvTable));

src/pages/training/task_archives.tsx

@@ -62,7 +62,7 @@ const TaskArchives = (props: TaskArchivesProps) => {
       list: imlist,
       category_identity: category_identity,
     };
-    let res = await trainingStore?.addAcieves(data);
+     await trainingStore?.addAcieves(data);
     message.success("档案已保存到当前文件夹");
   };
   const handleSelect = async (identity) => {

src/router/routers/home_router.tsx

@@ -19,9 +19,9 @@ import Training from "@/pages/training";
 import PoverPage from "@/pages/poverPage";
 import PoverDetail from "@/pages/poverDetail";
 import SystemPage from "@/pages/system";
-import OrgChart from "@/pages/OrgChart";
 import ArchiveBox from "@/pages/archives/index_box";
 import FileListPage from "@/pages/archives/file_list";
+import OrgChartSelf from "@/pages/OrgChart";
 export const homeRouter = [
   {
     path: "/",
@@ -40,7 +40,7 @@ export const homeRouter = [
       {
         path: "/admin/orgChart",
         index: true,
-        element: <OrgChart />,
+        element: <OrgChartSelf />,
       },
       {
         path: "/admin/poverDetail",

src/store/user.ts

@@ -9,13 +9,16 @@ class UserConfig {
     static ADD: string = "user"
     static DELETE: string = "user"
     static EDIT: string = "user"
+    static pover: string = "user/userPower"
     static team: string = "team/list"
     static per: string = "persMgmt/list"
     
 }
 class UserStore extends BaseStore<UserDataType> {
     _userinfo: UserInfos = {}; // 用户信息
+    userDetail = {}
     isNeedLogin: boolean = false; // 是否需要登录
+    poverDetail:boolean = false; // 是否展示民兵详情
 
     constructor() {
         super(UserConfig)
@@ -24,8 +27,12 @@ class UserStore extends BaseStore<UserDataType> {
             login: action,
             getTeam:action,
             getPer:action,
+            setPoverDe:action,
+            setUserDetaul:action,
             _userinfo: observable,
             isNeedLogin: observable,
+            poverDetail: observable,
+            userDetail: observable,
             openLoginDilog: action,
             userInfo: computed,
         })
@@ -36,6 +43,9 @@ class UserStore extends BaseStore<UserDataType> {
     async getPer(){
         return await baseHttp.get(UserConfig.per, null)
     }
+    async getPover(){
+        return await baseHttp.get(UserConfig.pover, null)
+    }
     get userInfo(): UserInfos {
         if (!this._userinfo.token) {
             let token = window.localStorage.getItem("token")
@@ -70,6 +80,12 @@ class UserStore extends BaseStore<UserDataType> {
     closeLoginDilog() {
         this.isNeedLogin = false;
     }
+    setPoverDe(status:boolean){
+        this.poverDetail = status
+    }
+    setUserDetaul(data){
+        this.userDetail = data
+    }
 }
 const userStore = new UserStore();
 export default userStore;