@tntx/overview-tree

@tntx/overview-tree 树形概览图

安装

npm i @tntx/overview-tree

如何使用

import React, { useEffect, useRef } from "react";
import ReactDOM from 'react-dom';
import Overview from "@tntx/overview-tree";
import { mockData } from "./mockData";

const Demo = props => {
    const [data, setData] = useState([]);
    
    useEffect(() => {
        getData();
    }, []);

    const getData = (d) => {
        setTimeout(() => {
            if (d) {
                setData([
                    {
                        name: "字段名称", // 名称 -- 必填
                        nodeType: 10, // 类型 -- 必填
                        value: "SYSTEM_VB_TEST12", // 标识 -- 必填
                        version: "V1", // 版本
                        id: "SYSTEM_VB_TEST12_10" // -- 必填
                    },
                    {
                        name: "字段名称ce是长度啊", // 名称 -- 必填
                        nodeType: 10, // 类型 -- 必填
                        value: "SYSTEM_VB_TEST", // 标识 -- 必填
                        version: "V1", // 版本
                        id: "SYSTEM_VB_TEST_10" // -- 必填
                    }
                ]);
            } else {
                setData(mockData);
            }
        }, 100);
    };

    return (
        <Overview
            rootName="我是根节点"
            data={data}
            getData={(d) => {
                getData(d);
            }}
            onClick={(d) => {
                console.log(d);
            }}
        />
    )
};

ReactDOM.render(
    <Demo />,
    document.getElementById('root')
);

API

参数	说明	类型	默认值
rootName	根节点名称	String	--
data	单层数据结构，组件内部已为你做了tree结构拼接	Arrary	--
treeData	如果你只想渲染你的树结构，请用此属性传入数据，此时data,getData属性将失效	Arrary	---
nodeTypeMap	节点数据配置	Object	往下看
noPlus	某个节点无扩展	Number	10
getData	需要请求获取子节点数据回调	Function	--
onClick	点击节点回调	Function	--

data 数据结构

[
    {
        name: "字段名称", // 名称 -- 必填
        nodeType: 10, // 类型 -- 必填
        value: "SYSTEM_VB_TEST12", // 标识 -- 必填
        version: "V1", // 版本
        id: "SYSTEM_VB_TEST12_10" // -- 必填
    },
    {
        name: "字段名称ce是长度啊", // 名称 -- 必填
        nodeType: 10, // 类型 -- 必填
        value: "SYSTEM_VB_TEST", // 标识 -- 必填
        id: "SYSTEM_VB_TEST_10" // -- 必填
    }
]

treeData 数据结构

[
    {
        name: "字段名称", // 名称 -- 必填
        nodeType: 10, // 类型 -- 必填
        value: "SYSTEM_VB_TEST12", // 标识 -- 必填
        id: "SYSTEM_VB_TEST12_10", // -- 必填
        children: [
            {
                name: "字段名称ce是长度啊",
                nodeType: 10,
                value: "SYSTEM_VB_TEST",
                id: "SYSTEM_VB_TEST_10",
                children: [
                    {
                        name: "字段名称ce是长度啊",
                        nodeType: 10,
                        value: "SYSTEM_VB_TEST",
                        id: "SYSTEM_VB_TEST_10"
                    }
                ]
            }
        ]
    },
    {
        name: "字段名称ce是长度啊",
        nodeType: 10,
        value: "SYSTEM_VB_TEST",
        id: "SYSTEM_VB_TEST_10"
    }
]

nodeTypeMap 默认可不填，内置数据如下：

{
    1: { name: "决策流", color: "#0FB8FE", img: require("./Base/img/1.svg") },
    2: { name: "策略集", color: "#628FE4", img: require("./Base/img/2.svg") },
    3: { name: "决策工具", color: "#CF6767", img: require("./Base/img/3.svg") },
    4: { name: "三方服务", color: "#CFAB67", img: require("./Base/img/4.svg") },
    5: { name: "模型", color: "#4DA9C9", img: require("./Base/img/5.svg") },
    6: { name: "冠军挑战者", color: "#9367C6", img: require("./Base/img/6.svg") },
    7: { name: "计算公式", color: "#D97B4E", img: require("./Base/img/7.svg") },
    8: { name: "规则", color: "#E8A530", img: require("./Base/img/8.svg") },
    9: { name: "指标", color: "#2B82EC", img: require("./Base/img/9.svg") },
    10: { name: "字段", color: "#6776CF", img: require("./Base/img/10.svg") }
}