泛微薪资核算iframe表格-薪资项目拓扑图
parent
5dfcbe1af9
commit
7b59ba7cf0
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
@ -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
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -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;
|
||||||
|
};
|
||||||
@ -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");
|
||||||
Loading…
Reference in New Issue