泛微薪资核算iframe表格-薪资项目拓扑图

package.json

@@ -20,7 +20,9 @@
     ]
   },
   "dependencies": {
+    "@ant-design/charts": "^1.4.2",
     "@ant-design/pro-layout": "6.32.1",
+    "@antv/g6": "^4.8.17",
     "@types/lodash": "^4.14.172",
     "@ztree/ztree_v3": "^3.5.42",
     "ahooks": "^3.1.3",

public/css/iconfont/demo_index.html

@@ -47,11 +47,37 @@
         <li class="dib"><span>Symbol</span></li>
       </ul>
       
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4257468" target="_blank" class="nav-more">查看项目</a>
+      
     </div>
     <div class="tab-container">
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">批量分配</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe724;</span>
+                <div class="name">操作日志</div>
+                <div class="code-name">&amp;#xe724;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6aa;</span>
+                <div class="name">警告</div>
+                <div class="code-name">&amp;#xe6aa;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe70c;</span>
+                <div class="name">应急处理</div>
+                <div class="code-name">&amp;#xe70c;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe652;</span>
                 <div class="name">批量解锁</div>
@@ -82,7 +108,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.ttf?t=1695032721128') format('truetype');
+  src: url('iconfont.woff2?t=1698312705146') format('woff2'),
+       url('iconfont.woff?t=1698312705146') format('woff'),
+       url('iconfont.ttf?t=1698312705146') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -108,6 +136,42 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-piliangfenpei"></span>
+            <div class="name">
+              批量分配
+            </div>
+            <div class="code-name">.icon-piliangfenpei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caozuorizhi32"></span>
+            <div class="name">
+              操作日志
+            </div>
+            <div class="code-name">.icon-caozuorizhi32
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jinggao"></span>
+            <div class="name">
+              警告
+            </div>
+            <div class="code-name">.icon-jinggao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yingjichuli"></span>
+            <div class="name">
+              应急处理
+            </div>
+            <div class="code-name">.icon-yingjichuli
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-piliangjiesuo"></span>
             <div class="name">
@@ -153,6 +217,38 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-piliangfenpei"></use>
+                </svg>
+                <div class="name">批量分配</div>
+                <div class="code-name">#icon-piliangfenpei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caozuorizhi32"></use>
+                </svg>
+                <div class="name">操作日志</div>
+                <div class="code-name">#icon-caozuorizhi32</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jinggao"></use>
+                </svg>
+                <div class="name">警告</div>
+                <div class="code-name">#icon-jinggao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yingjichuli"></use>
+                </svg>
+                <div class="name">应急处理</div>
+                <div class="code-name">#icon-yingjichuli</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-piliangjiesuo"></use>

public/css/iconfont/iconfont.css

@@ -1,6 +1,8 @@
 @font-face {
-  font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1695032721128') format('truetype');
+  font-family: "iconfont"; /* Project id 4257468 */
+  src: url('iconfont.woff2?t=1698312705146') format('woff2'),
+       url('iconfont.woff?t=1698312705146') format('woff'),
+       url('iconfont.ttf?t=1698312705146') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-piliangfenpei:before {
+  content: "\e619";
+}
+
+.icon-caozuorizhi32:before {
+  content: "\e724";
+}
+
+.icon-jinggao:before {
+  content: "\e6aa";
+}
+
+.icon-yingjichuli:before {
+  content: "\e70c";
+}
+
 .icon-piliangjiesuo:before {
   content: "\e652";
 }

public/css/iconfont/iconfont.json

@@ -1,10 +1,38 @@
 {
-  "id": "",
-  "name": "",
+  "id": "4257468",
+  "name": "weaver-salary",
   "font_family": "iconfont",
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "35054680",
+      "name": "批量分配",
+      "font_class": "piliangfenpei",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "763145",
+      "name": "操作日志",
+      "font_class": "caozuorizhi32",
+      "unicode": "e724",
+      "unicode_decimal": 59172
+    },
+    {
+      "icon_id": "947139",
+      "name": "警告",
+      "font_class": "jinggao",
+      "unicode": "e6aa",
+      "unicode_decimal": 59050
+    },
+    {
+      "icon_id": "4551216",
+      "name": "应急处理",
+      "font_class": "yingjichuli",
+      "unicode": "e70c",
+      "unicode_decimal": 59148
+    },
     {
       "icon_id": "16043851",
       "name": "批量解锁",

src/api/calculate.service.ts

@@ -80,6 +80,10 @@ class CalculateService extends BasicService {
   getSyMixSum = async (params: any) => {
     return this.post(`/api/bs/hrmsalary/siaccount/detail/list/syMixSum`, params);
   };
+  //薪资项目拓扑图
+  getSalarysobItemTopology = async (params: any) => {
+    return this.post(`/api/bs/hrmsalary/salarysob/item/topology`, params);
+  };
 }
 
 const calculateService = new CalculateService();

src/layouts/config.js

@@ -13,6 +13,7 @@ module.exports = {
     "/reportTable.*": "blank",
     "/commonTable.*": "blank",
     "/calcTable.*": "blank",
+    "/salaryItemDiagram.*": "blank",
     "/welfareLedgerTable.*": "blank",
     "/payrollFilesTable.*": "blank",
     "/employeeDeclareTable.*": "blank",

src/pages/atdTable/components/index.less

@@ -40,8 +40,13 @@
     }
 
     :global {
-      span.anticon-lock {
+      span.anticon {
         color: #5d9cec;
+        cursor: pointer;
+      }
+
+      span.anticon-lock {
+        margin-left: 4px;
       }
     }
   }
@@ -86,7 +91,7 @@
 
   .expand-th:hover {
     .toogle-lock-tool {
-      width: 30%;
+      width: 37%;
     }
   }
 
@@ -118,7 +123,7 @@
       justify-content: center;
       align-items: center;
 
-      & > :first-child {
+      & > :not(:last-child) {
         margin-right: 4px;
       }
 

src/pages/calcTable/calcExplainFooter.tsx

@@ -29,6 +29,10 @@ const CalcExplainFooter: FunctionComponent<Props> = (props) => {
         <UnlockOutlined/>
         <span>{i18n["当前状态未锁定，点击锁定"]}</span>
       </div>
+      <div className={styles["icon-item"]}>
+        <Icon type="icon-piliangfenpei"/>
+        <span>{i18n["查看拓扑图"]}</span>
+      </div>
     </div>
   );
 };

src/pages/calcTable/customTableTitle.tsx

@@ -42,6 +42,8 @@ const customTableTitle: FunctionComponent<Props> = (props) => {
                 onClick={() => handleToggleSalaryItemVal(dataIndex as string, "LOCK")}/>
           <Icon type="icon-piliangjiesuo" title={i18n["点击解锁所有锁定的项目值"]}
                 onClick={() => handleToggleSalaryItemVal(dataIndex as string, "UNLOCK")}/>
+          <Icon type="icon-piliangfenpei" title={i18n["查看拓扑图"]}
+                onClick={() => handleToggleSalaryItemVal(dataIndex as string, "DIAGRAM")}/>
         </div>
       }
     </div>

src/pages/calcTable/index.tsx

@@ -14,6 +14,7 @@ import type { ColumnType } from "antd/lib/table";
 import type { PaginationData } from "rc-pagination";
 import { exceptStr, paginationFun } from "@/utils/common";
 import { IPage } from "@/common/types";
+import Icon from "../../lib/CustomIcon";
 import styles from "@/pages/atdTable/components/index.less";
 
 interface OwnProps {
@@ -68,11 +69,14 @@ const index: FunctionComponent<Props> = (props) => {
           ...item, title: <CustomTableTitle {...item} onHandleFormulatd={handleFormulaTd}/>,
           children: convertColumns(_.map(item.children, o => ({ ...o, i18n: item.i18n }))),
           className: styles["td_odd"], i18n: item.i18n,
-          render: (text: string) => (
+          render: (text: string, record: any) => (
             <span className={styles.contentSpan}>
               <span title={text} className={styles.contentTitle}>{text}</span>
+              <Icon type="icon-piliangfenpei" title={i18n["查看拓扑图"]}
+                    onClick={() => handleDiagramTd(item?.dataIndex, record?.id)}
+              />
               {
-                item.lockStatus === "LOCK" ? <LockOutlined title="锁定的项目值"/> : null
+                item.lockStatus === "LOCK" ? <LockOutlined title={i18n["锁定的项目值"]}/> : null
               }
             </span>
           )
@@ -80,6 +84,15 @@ const index: FunctionComponent<Props> = (props) => {
       }
     });
   };
+  const handleDiagramTd = (salaryItemId: string, acctEmpId: string) => {
+    window.parent.postMessage(
+      {
+        type: "turn",
+        payload: { id: "DIAGRAM", params: { salaryItemId, acctEmpId } }
+      },
+      "*"
+    );
+  };
   const handleFormulaTd = (dataIndex: string) => {
     window.parent.postMessage(
       {

src/pages/salaryItemDiagram/data.js

@@ -0,0 +1,125 @@
+export const data = {
+  id: "root",
+  label: "利息收入",
+  subLabel: "3,283.456",
+  ratio: 3,
+  children: [
+    {
+      id: "child-a",
+      label: "平均利息",
+      subLabel: "9%",
+      ratio: 1,
+      increase: true
+    },
+    {
+      id: "child-b",
+      label: "贷款余额",
+      subLabel: "1,789,567",
+      ratio: 23,
+      increase: true,
+      children: [
+        {
+          id: "child-b-a",
+          label: "投放金额",
+          subLabel: "2,385,124",
+          ratio: 17,
+          increase: true,
+          operator: ""
+        },
+        {
+          id: "child-b-b",
+          label: "还款金额",
+          subLabel: "595,557",
+          ratio: 12,
+          increase: true,
+          children:[
+            {
+              id: 'child-b-b-a',
+              label: '还款期限',
+              subLabel: '7',
+              ratio: 23,
+              increase: true,
+              children:[
+                {
+                  id: "child-b-b-a-a",
+                  label: "还款金额",
+                  subLabel: "595,557",
+                  ratio: 12,
+                  increase: true,
+                  children:[
+                    {
+                      id: "child-b-b-a-a-a",
+                      label: "还款金额",
+                      subLabel: "595,557",
+                      ratio: 12,
+                      increase: true,
+                      children:[
+                        {
+                          id: "child-b-b-a-a-a-a",
+                          label: "还款金额",
+                          subLabel: "595,557",
+                          ratio: 12,
+                          increase: true,
+                          children:[
+                            {
+                              id: "child-b-b-a-a-a-a-a",
+                              label: "还款金额",
+                              subLabel: "595,557",
+                              ratio: 12,
+                              increase: true,
+                              children:[
+                                {
+                                  id: "child-b-b-a-a-a-a-a-a",
+                                  label: "还款金额",
+                                  subLabel: "595,557",
+                                  ratio: 12,
+                                  increase: true,
+                                  children:[
+                                    {
+                                      id: "child-b-b-a-a-a-a-a-a-a",
+                                      label: "还款金额",
+                                      subLabel: "595,557",
+                                      ratio: 12,
+                                      increase: true,
+                                      children:[
+                                        {
+                                          id: "child-b-b-a-a-a-a-a-a-a-a",
+                                          label: "还款金额",
+                                          subLabel: "595,557",
+                                          ratio: 12,
+                                          increase: true,
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              id: 'child-b-b-6',
+              label: '还款期限',
+              subLabel: '7',
+              ratio: 23,
+              increase: true,
+            }
+          ]
+        }
+      ]
+    },
+    {
+      id: "child-c",
+      label: "还款期限",
+      subLabel: "7",
+      ratio: 23,
+      increase: false
+    }
+  ]
+};

src/pages/salaryItemDiagram/index-g6.tsx

@@ -0,0 +1,156 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资项目-拓扑图
+ * Description:
+ * Date: 2023/10/19
+ */
+import React, { FunctionComponent, useEffect, useRef } from "react";
+// @ts-ignore
+import G6 from "@antv/g6";
+import API from "@/api";
+// @ts-ignore
+import uuidV4 from "uuid/v4";
+import "./registerShape";
+
+interface OwnProps {
+}
+
+type Props = OwnProps;
+
+const index: FunctionComponent<Props> = (props) => {
+  const ref: any = useRef(null);
+  let graph: any = null;
+  useEffect(() => {
+    initG6().then(r => {
+    });
+    return () => {
+    };
+  }, []);
+  // 1688699208883
+  const initG6 = async () => {
+    const { data: { data: result } }: any = await API.CalculateService.getSalarysobItemTopology({
+      salarySobId: "31",
+      salaryItemId: "1688699208872"
+    });
+    const dataSource = {
+      id: result.salaryItemId.toString(), label: result.salaryItemName || "",
+      subLabel: result.result || "", formula: result.formula, level: 0,
+      children: !_.isEmpty(result.children) ? traverse(result.children) : []
+    };
+    const width = ref.current.scrollWidth;
+    const height = ref.current.scrollHeight;
+    // @ts-ignore
+    G6.Util.traverseTree(dataSource, (subtree: any) => {
+      // if (subtree.level === undefined) subtree.level = 0;
+      // subtree.children?.forEach((child: any) => child.level = subtree.level + 1);
+      switch (subtree.level) {
+        case 0:
+          subtree.type = "root";
+          break;
+        case 1:
+          subtree.type = "level1node";
+          // subtree.collapsed = true;
+          break;
+        default:
+          subtree.type = "othernode";
+      }
+    });
+    if (!graph) {
+      graph = new G6.TreeGraph({
+        // fitCenter: true, linkCenter: true,
+        container: ref.current, width, height, fitView: true,
+        layout: {
+          // LR
+          type: "compactBox", direction: "LR", getHGap: function getVGap() {
+            return 5;
+          }
+        },
+        defaultEdge:
+        //   {
+        //   type: "cubic-vertical",
+        //   style: {
+        //     stroke: "#A3B1BF"
+        //   }
+        // },
+          {
+            type: "round-poly",
+            sourceAnchor: 0,
+            targetAnchor: 1,
+            style: {
+              radius: 8,
+              stroke: "rgb(19, 33, 92)"
+            }
+          },
+        defaultNode: {
+          style: {
+            cursor: "pointer"
+          },
+          // anchorPoints: [
+          //   [0.5, 0],
+          //   [0.5, 1]
+          // ]
+          anchorPoints: [
+            [0.9, 0.5],
+            [0, 0.5]
+          ]
+        },
+        nodeStateStyles: {
+          hover: {
+            fill: "#fff",
+            shadowBlur: 30,
+            shadowColor: "#ddd"
+          },
+          operatorhover: {
+            "operator-box": {
+              opacity: 1
+            }
+          }
+        },
+        modes: {
+          default: ["zoom-canvas", "drag-canvas", "collapse-expand", "drag-node"]
+        }
+      });
+    }
+    graph.data(dataSource);
+    graph.render();
+    graph.on("node:mouseenter", (e: any) => {
+      if (e.target.get("name")?.includes("operator")) {
+        graph.setItemState(e.item, "operatorhover", true);
+      } else {
+        graph.setItemState(e.item, "hover", true);
+      }
+    });
+    graph.on("node:mouseleave", (e: any) => {
+      graph.setItemState(e.item, "operatorhover", false);
+      graph.setItemState(e.item, "hover", false);
+    });
+    graph.on("node:click", (e: any) => {
+      // graph.zoom(3, { x: e.canvasX, y: e.canvasY });
+    });
+  };
+
+  return (<div ref={ref} style={{ width: "100%", height: "100%" }}/>);
+};
+
+export default index;
+
+const traverse: any = (arr: any[]) => {
+  return _.map(arr, item => {
+    if (!_.isEmpty(item.children)) {
+      const uuid = uuidV4();
+      return {
+        id: uuid, label: item.salaryItemName,
+        subLabel: item.result, formula: item.formula,
+        ratio: 1, increase: true, level: 1, collapsed: true,
+        children: traverse(item.children)
+      };
+    } else {
+      const uuid = uuidV4();
+      return {
+        id: uuid, label: item.salaryItemName,
+        subLabel: item.result, formula: item.formula,
+        ratio: 1, increase: true, level: 2
+      };
+    }
+  });
+};

src/pages/salaryItemDiagram/index.tsx

@@ -0,0 +1,168 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资项目-拓扑图
+ * Description:
+ * Date: 2023/10/19
+ */
+import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
+import { DecompositionTreeGraph, NodeConfig } from "@ant-design/graphs";
+import { notification } from "antd";
+import { exceptStr } from "@/utils/common";
+import API from "@/api";
+// @ts-ignore
+import uuidV4 from "uuid/v4";
+
+interface OwnProps {
+}
+
+type Props = OwnProps;
+const index: FunctionComponent<Props> = (props) => {
+  const [dataSource, setDataSource] = useState<any>({});
+  const [i18n, setI18n] = useState<any>({});
+  useEffect(() => {
+    window.parent.postMessage({ type: "initDiagram" }, "*");
+    window.addEventListener("message", receiveMessageFromIndex, false);
+    return () => {
+      window.removeEventListener("message", receiveMessageFromIndex, false);
+    };
+  }, []);
+  const receiveMessageFromIndex = (event: any) => {
+    const data: any = exceptStr(event.data);
+    if (!_.isEmpty(data)) {
+      const { i18n, acctEmpId, salaryItemId, salarySobId } = data;
+      setI18n(i18n);
+      init({ acctEmpId, salaryItemId, salarySobId });
+    }
+  };
+  const init = (paylaod: any) => {
+    API.CalculateService.getSalarysobItemTopology(paylaod).then(({ data }) => {
+      const { status, data: result } = data;
+      if (status) {
+        const dataSource = {
+          id: result.salaryItemId.toString(),
+          value: { title: result.salaryItemName, formula: result.formula, items: [{ text: result.result }] },
+          children: !_.isEmpty(result.children) ? traverse(result.children) : []
+        };
+        setDataSource(dataSource);
+      }
+    });
+  };
+  const getChildren = async (nodeCfg: NodeConfig) => {
+    return findChildren(extractTree(dataSource.children), nodeCfg.id);
+  };
+  const openNotification = (data: any) => {
+    const { value: { formula } } = data;
+    notification.destroy();
+    if (_.isEmpty(formula)) return;
+    const { formula: description } = formula;
+    notification.open({
+      message: i18n["公式"],
+      duration: null,
+      description,
+      style: { maxWidth: 600 }
+    });
+  };
+  const component: any = useMemo(() => {
+    const config = {
+      data: {
+        ...dataSource,
+        children: dataSource.children ? _.map(dataSource.children, o => ({ ...o, children: null })) : null
+      },
+      autoFit: false, animate: true,
+      nodeCfg: {
+        getChildren,
+        autoWidth: true,
+        items: {
+          layout: "follow"
+        }
+      },
+      markerCfg: (cfg: any) => {
+        const { g_level, id } = cfg;
+        return {
+          show: (g_level === 0 && !_.isEmpty(dataSource.children)) || getStorageIds(dataSource.children).includes(id)
+        };
+      },
+      onReady: (graph: any) => {
+        graph.on("node:click", (evt: any) => {
+          if (_.isEmpty(evt.target.attrs) || JSON.stringify(evt.target.attrs).indexOf("cursor") !== -1) return;
+          openNotification(evt.item._cfg.model);
+        });
+        setTimeout(() => {
+          graph.zoom(1);
+        });
+      },
+      behaviors: ["drag-canvas", "zoom-canvas", "drag-node"]
+    };
+    return !_.isEmpty(dataSource) ? <DecompositionTreeGraph {...config} /> : null;
+  }, [dataSource]);
+  return component;
+};
+
+export default index;
+
+const traverse: any = (arr: any[]) => {
+  return _.map(arr, item => {
+    if (!_.isEmpty(item.children)) {
+      const uuid = uuidV4();
+      return {
+        id: uuid,
+        value: { title: item.salaryItemName, formula: item.formula, items: [{ text: item.result }] },
+        children: traverse(item.children)
+      };
+    } else {
+      const uuid = uuidV4();
+      return {
+        id: uuid, value: { title: item.salaryItemName, formula: item.formula, items: [{ text: item.result }] }
+      };
+    }
+  });
+};
+const findChildren: any = (arr: any[], id: string) => {
+  const dataSource = _.find(arr, o => o.id === id).children;
+  return _.map(dataSource, o => ({ ...o, children: [] }));
+};
+/*
+ * Author: 黎永顺
+ * Description:数组扁平换
+ * Params:
+ * Date: 2023/10/26
+ */
+const extractTree = (data: any[]) => {
+  if (!data.length) return [];
+  const list: any[] = [];
+  const getObj = (arr: any[]) => {
+    arr.forEach((row: any) => {
+      let obj = {};
+      obj = JSON.parse(JSON.stringify(row));
+      list.push(obj);
+      if (row.children) {
+        getObj(row.children);
+      }
+    });
+    return list;
+  };
+  return getObj(data);
+};
+/*
+ * Author: 黎永顺
+ * Description: 有children子集的id集合
+ * Params:
+ * Date: 2023/10/26
+ */
+const getStorageIds = (array: any[]) => {
+  let ids: any = [];
+  const getIds = (array: any, ids: any) => {
+    array.forEach((item: any) => {
+      if (item.children) ids.push(item.id);
+      if (item.children) ids = getIds(item.children, ids);
+    });
+    return ids;
+  };
+  if (Array.isArray(array)) {
+    if (array.length === 0) return [];
+  } else {
+    return [];
+  }
+  ids = getIds(array, ids);
+  return ids;
+};

src/pages/salaryItemDiagram/registerShape.ts

@@ -0,0 +1,292 @@
+// @ts-ignore
+import G6 from "@antv/g6";
+
+G6.registerNode("root", {
+  draw: (cfg: any, group: any) => {
+    const size = [80, 30];
+    const keyShape = group.addShape("rect", {
+      attrs: {
+        width: size[0],
+        height: size[1],
+        x: -size[0] / 2,
+        y: -size[1] / 2,
+        fill: "rgb(19, 33, 92)",
+        radius: 5
+      },
+      draggable: true,
+      name: "root-keyshape"
+    });
+    group.addShape("text", {
+      attrs: {
+        text: `${cfg.ratio}%`,
+        fill: "rgba(255, 255, 255, 0.85)",
+        fontSize: 6,
+        x: 10 - size[0] / 2,
+        y: 3
+      },
+      draggable: true,
+      name: "ratio-shape"
+    });
+    group.addShape("text", {
+      attrs: {
+        text: `${cfg.label}`,
+        fill: "rgba(255, 255, 255, 0.85)",
+        fontSize: 9,
+        x: -6,
+        y: 0
+      },
+      draggable: true,
+      name: "label-shape"
+    });
+    group.addShape("line", {
+      attrs: {
+        x1: -6,
+        x2: 35,
+        y1: 2,
+        y2: 2,
+        stroke: "rgba(255, 255, 255, 0.85)",
+        lineWidth: 0.5
+      },
+      draggable: true,
+      name: "divider-shape"
+    });
+    group.addShape("text", {
+      attrs: {
+        text: `${cfg.subLabel}`,
+        fill: "rgba(255, 255, 255, 0.65)",
+        fontSize: 6,
+        x: -6,
+        y: 10
+      },
+      draggable: true,
+      name: "sublabel-shape"
+    });
+    return keyShape;
+  }
+});
+G6.registerNode("level1node", {
+  draw: (cfg: any, group: any) => {
+    const size = [60, 40];
+    const keyShape = group.addShape("rect", {
+      attrs: {
+        width: size[0],
+        height: size[1],
+        x: -size[0] / 2,
+        y: -size[1] / 2,
+        fill: "rgb(213, 225, 247)",
+        radius: 5
+      },
+      draggable: true,
+      name: "level1node-keyshape"
+    });
+    group.addShape("text", {
+      attrs: {
+        text: `${cfg.label}`,
+        fill: "rgba(19, 33, 92, 0.65)",
+        fontSize: 6,
+        x: 0,
+        y: -6,
+        textAlign: "center"
+      },
+      draggable: true,
+      name: "label-shape"
+    });
+    group.addShape("text", {
+      attrs: {
+        text: `${cfg.subLabel}`,
+        fill: "rgba(19, 33, 92, 0.65)",
+        fontSize: 8,
+        x: 0,
+        y: 6,
+        fontWeight: 800,
+        textAlign: "center"
+      },
+      draggable: true,
+      name: "sublabel-shape"
+    });
+    group.addShape("rect", {
+      attrs: {
+        x: -12,
+        y: 8,
+        width: 25,
+        height: 8,
+        radius: 4,
+        fill: cfg.increase ? "rgb(127, 193, 193)" : "rgb(220, 124, 125)"
+      },
+      draggable: true,
+      name: "ratio-box"
+    });
+    group.addShape("text", {
+      attrs: {
+        text: `${cfg.ratio}%`,
+        fill: "rgba(255, 255, 255, 0.85)",
+        fontSize: 6,
+        x: 0,
+        y: 9,
+        textAlign: "center",
+        textBaseline: "top"
+      },
+      draggable: true,
+      name: "ratio-shape"
+    });
+    // edge end
+    group.addShape("line", {
+      attrs: {
+        x1: -size[0] / 2,
+        x2: -size[0] / 2 + 6,
+        y1: 0,
+        y2: 0,
+        lineWidth: 1,
+        stroke: "rgb(19, 33, 92)"
+      }
+    });
+    group.addShape("circle", {
+      attrs: {
+        r: 2,
+        x: -size[0] / 2 + 6,
+        y: 0,
+        fill: "rgb(19, 33, 92)"
+      }
+    });
+    return keyShape;
+  },
+  update: undefined
+}, "rect");
+G6.registerNode("othernode", {
+  draw: (cfg: any, group: any) => {
+    const size = [100, 30];
+    const keyShape = group.addShape("rect", {
+      attrs: {
+        width: size[0],
+        height: size[1],
+        x: -size[0] / 2,
+        y: -size[1] / 2,
+        fill: "rgb(213, 225, 247)",
+        radius: 5
+      },
+      draggable: true,
+      name: "level1node-keyshape"
+    });
+    group.addShape("text", {
+      attrs: {
+        text: `${cfg.label}`,
+        fill: "rgba(19, 33, 92, 0.65)",
+        fontSize: 6,
+        x: 10 - size[0] / 2,
+        y: -2,
+        textAlign: "left"
+      },
+      draggable: true,
+      name: "label-shape"
+    });
+    group.addShape("text", {
+      attrs: {
+        text: `${cfg.subLabel}`,
+        fill: "rgba(19, 33, 92, 0.65)",
+        fontSize: 8,
+        fontWeight: 800,
+        x: 10 - size[0] / 2,
+        y: 8,
+        textAlign: "left"
+      },
+      draggable: true,
+      name: "sublabel-shape"
+    });
+    group.addShape("rect", {
+      attrs: {
+        x: 12,
+        y: -4,
+        width: 25,
+        height: 8,
+        radius: 4,
+        fill: cfg.increase ? "rgb(127, 193, 193)" : "rgb(220, 124, 125)"
+      },
+      draggable: true,
+      name: "ratio-box"
+    });
+    group.addShape("text", {
+      attrs: {
+        text: `${cfg.ratio}%`,
+        fill: "rgba(255, 255, 255, 0.85)",
+        fontSize: 6,
+        x: 18,
+        y: -3,
+        textAlign: "left",
+        textBaseline: "top"
+      },
+      draggable: true,
+      name: "ratio-shape"
+    });
+    if (cfg.operator) {
+      group.addShape("rect", {
+        attrs: {
+          x: -8,
+          y: 27,
+          width: 16,
+          height: 16,
+          lineWidth: 1,
+          stroke: "#aaa",
+          lineDash: [2, 1],
+          opacity: 0
+        },
+        name: "operator-box"
+      });
+      group.addShape("circle", {
+        attrs: {
+          r: 6,
+          x: 0,
+          y: 35,
+          fill: "rgba(240, 90, 109, 0.15)"
+        },
+        name: "operator-circle"
+      });
+      group.addShape("text", {
+        attrs: {
+          text: cfg.operator,
+          x: 0,
+          y: 34,
+          fontSize: 12,
+          fill: "rgba(240, 90, 109, 0.85)",
+          textAlign: "center",
+          textBaseline: "middle"
+        },
+        name: "operator-symbol"
+      });
+    }
+
+    // edge end
+    group.addShape("line", {
+      attrs: {
+        x1: -size[0] / 2,
+        x2: -size[0] / 2 + 6,
+        y1: 0,
+        y2: 0,
+        lineWidth: 1,
+        stroke: "rgb(19, 33, 92)"
+      }
+    });
+    group.addShape("circle", {
+      attrs: {
+        r: 2,
+        x: -size[0] / 2 + 6,
+        y: 0,
+        fill: "rgb(19, 33, 92)"
+      }
+    });
+    return keyShape;
+  },
+  update: undefined
+}, "rect");
+G6.registerEdge("round-poly", {
+  getControlPoints: (cfg: any) => {
+    const { startPoint, endPoint } = cfg;
+    return [
+      startPoint,
+      {
+        x: startPoint.x,
+        y: endPoint.y
+      },
+      endPoint
+    ];
+  }
+}, "polyline");

src/pages/welfareLedgerTable/index.tsx

@@ -44,15 +44,15 @@ const Index: FunctionComponent<Props> = (props) => {
       setPageInfo(pageInfo);
       setDataSource(dataSource);
       setColumns(_.map(columns, it => {
-        if (it.dataIndex === "userName") {
+        if (it.dataIndex === "userName" || it.dataIndex === "workcode") {
           return {
-            ...it, width: 200, title: (
+            ...it, width: 140, title: (
               <span dangerouslySetInnerHTML={{ __html: it.title }}></span>
-            ), fixed: "left"
+            ), fixed: "left", ellipsis: true
           };
         }
         return {
-          ...it, width: 200, title: (
+          ...it, width: 140, ellipsis: true, title: (
             <span dangerouslySetInnerHTML={{ __html: it.title }}></span>
           )
         };