层级树2
组件名称：层级树2
组件样式：
组件说明：
高度定制化组件
类似层级和数结构的功能组件。有明确的层级关系，需要通过参数指定层级。
组件支持自由拖动位置并保存位置。组件的颜色支持通过自定义修改。
组件配合API可支持折叠，甚至支持下钻，鼠标移动到节点上显示节点信息。
请求方式：POST
https://doc.tingyun.com/sense/example/hierarchytree2.json
参数：
| 字段 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| currentTime | Number | 当前时间戳 | 是 |
| token | String | 盐值，校验规则为md5(timePeriod+currentTime+ 配置的token), 例如：timePeriod为30，currentTime为 1513137332798,token为abc,则应对 301513137332798abc进行MD5。 |
否 |
| timePeriod | Number | 时间范围分钟数 | 是 |
正确响应数据：
| 字段 | 类型 | 描述 |
|---|---|---|
| nodes | Array | 节点数组 |
| id | string | 唯一的id |
| zIndex | number | 层级，值越小层级越高 |
| name | string | 节点名称 |
| scale | number | 节点缩放系数 |
| info | string | 节点hover信息 |
| hasChildren | boolean | 节点是否支持折叠 |
| hasNodes | boolean | 节点是否有下钻拓扑 |
| value | string/number | 节点在值，可以是数字或者字符串（如：良好，优秀） |
| links | Array | 链接数组 |
| source | string | 指向链接的起点的id |
| target | String | 指向链接的终点的id |
示例：
{
"nodes": [
{
"id": "a",
"zIndex": 1,
"name": "PEK T2航站楼",
"value": 60,
"scale": 1.5,
"hasChildren": true
},
{
"id": "b",
"zIndex": 1,
"name": "PEK T3航站楼",
"value": 90,
"scale": 1.5,
"hasChildren": true
},
{
"id": "c",
"zIndex": 1,
"name": "PEK T1网络",
"value": 98,
"scale": 1.5
},
{
"id": "d",
"zIndex": 1,
"name": "PEK T1 3A",
"value": 96,
"scale": 1.5
},
{
"id": "e",
"zIndex": 1,
"name": "PEK T1主机",
"value": 88,
"scale": 1.5
},
{
"id": "a1",
"zIndex": 2,
"name": "A",
"value": 11,
"scale": 1
},
{
"id": "a2",
"zIndex": 2,
"name": "B",
"value": 22,
"scale": 1
},
{
"id": "a3",
"zIndex": 2,
"name": "C",
"value": 33,
"scale": 1
},
{
"id": "a4",
"zIndex": 2,
"name": "J",
"value": 44,
"scale": 1
},
{
"id": "a5",
"zIndex": 2,
"name": "D",
"value": 55,
"scale": 1
},
{
"id": "a6",
"zIndex": 2,
"name": "G",
"value": 66,
"scale": 1
},
{
"id": "b1",
"zIndex": 2,
"name": "A",
"value": 22,
"scale": 1
},
{
"id": "b2",
"zIndex": 2,
"name": "G",
"value": 33,
"scale": 1
},
{
"id": "b3",
"zIndex": 2,
"name": "F",
"value": 44,
"scale": 1
},
{
"id": "b4",
"zIndex": 2,
"name": "J",
"value": 55,
"scale": 1
},
{
"id": "b5",
"zIndex": 2,
"name": "H",
"value": 66,
"scale": 1
},
{
"id": "z1",
"zIndex": 3,
"name": "MCSS-DCS01",
"value": 66,
"scale": 1.8
},
{
"id": "z2",
"zIndex": 3,
"name": "OMSE01",
"value": 66,
"scale": 1.8
},
{
"id": "z3",
"zIndex": 3,
"name": "网络单元1",
"value": 55,
"scale": 1.4
},
{
"id": "z4",
"zIndex": 3,
"name": "网络单元2",
"value": 44,
"scale": 1.5
},
{
"id": "z5",
"zIndex": 3,
"name": "网络单元3",
"value": 33,
"scale": 1.5
},
{
"id": "z6",
"zIndex": 3,
"name": "网络单元4",
"value": 22,
"scale": 1.5
},
{
"id": "z7",
"zIndex": 3,
"name": "网络单元5",
"value": 11,
"scale": 1.5
},
{
"id": "z8",
"zIndex": 3,
"name": "网络单元6",
"value": 66,
"scale": 1.5
},
{
"id": "z9",
"zIndex": 3,
"name": "网络单元7",
"value": 55,
"scale": 1
},
{
"id": "z10",
"zIndex": 3,
"name": "网络单元8",
"value": 44,
"scale": 1
}
],
"links": [
{
"source": "a",
"target": "a1",
"value": 1
},
{
"source": "a",
"target": "a2",
"value": 1
},
{
"source": "a",
"target": "a3",
"value": 1
},
{
"source": "a",
"target": "a4",
"value": 1
},
{
"source": "a",
"target": "a5",
"value": 1
},
{
"source": "a",
"target": "a6",
"value": 1
},
{
"source": "b",
"target": "b1",
"value": 1
},
{
"source": "b",
"target": "b2",
"value": 1
},
{
"source": "b",
"target": "b3",
"value": 1
},
{
"source": "b",
"target": "b4",
"value": 1
},
{
"source": "b",
"target": "b5",
"value": 1
},
{
"source": "a1",
"target": "z1",
"value": 1
},
{
"source": "a2",
"target": "z1",
"value": 1
},
{
"source": "a3",
"target": "z1",
"value": 1
},
{
"source": "a4",
"target": "z1",
"value": 1
},
{
"source": "a5",
"target": "z1",
"value": 1
},
{
"source": "a6",
"target": "z1",
"value": 1
},
{
"source": "b1",
"target": "z1",
"value": 1
},
{
"source": "b2",
"target": "z1",
"value": 1
},
{
"source": "b3",
"target": "z1",
"value": 1
},
{
"source": "b4",
"target": "z1",
"value": 1
},
{
"source": "b5",
"target": "z1",
"value": 1
},
{
"source": "c",
"target": "z2",
"value": 4
},
{
"source": "d",
"target": "z1",
"value": 4
},
{
"source": "e",
"target": "z3",
"value": 4
},
{
"source": "a2",
"target": "z2",
"value": 1
},
{
"source": "a2",
"target": "z4",
"value": 1
},
{
"source": "a2",
"target": "z8",
"value": 1
},
{
"source": "a2",
"target": "z10",
"value": 1
},
{
"source": "a3",
"target": "z10",
"value": 1
},
{
"source": "a4",
"target": "z1",
"value": 1
},
{
"source": "a4",
"target": "z4",
"value": 1
},
{
"source": "a5",
"target": "z1",
"value": 1
},
{
"source": "a5",
"target": "z6",
"value": 1
},
{
"source": "a5",
"target": "z1",
"value": 1
},
{
"source": "a5",
"target": "z7",
"value": 1
},
{
"source": "b1",
"target": "z4",
"value": 1
},
{
"source": "b2",
"target": "z7",
"value": 1
},
{
"source": "b3",
"target": "z8",
"value": 1
},
{
"source": "b4",
"target": "z5",
"value": 1
},
{
"source": "b5",
"target": "z9",
"value": 1
}
]
}
下钻示例：
{
"nodes": [
{
"id": "a0",
"zIndex": 1,
"name": "防火墙",
"value": 10,
"scale": 1,
"info": "报警:XXX-XUIO-001"
},
{
"id": "b0",
"zIndex": 2,
"name": "负载均衡",
"value": 80,
"scale": 1
},
{
"id": "c0",
"zIndex": 3,
"name": "MQ3A-1",
"value": 10,
"scale": 1
},
{
"id": "c1",
"zIndex": 3,
"name": "MCSS-2",
"value": 80,
"scale": 1,
"hasNodes": true
},
{
"id": "c2",
"zIndex": 3,
"name": "MCSS-3",
"value": 10,
"scale": 1
},
{
"id": "c3",
"zIndex": 3,
"name": "MCSS-4",
"value": 10,
"scale": 1,
"info": "报警:XXX-MUIK-002"
},
{
"id": "c4",
"zIndex": 3,
"name": "MQ3A-5",
"value": 10,
"scale": 1,
"info": "报警:XXX-YUIN-003"
},
{
"id": "d0",
"zIndex": 4,
"name": "Rounter_DCS",
"value": 10,
"scale": 1
},
{
"id": "e0",
"zIndex": 5,
"name": "RCPE-E0",
"value": 10,
"scale": 1
},
{
"id": "e1",
"zIndex": 5,
"name": "RCPE-E1",
"value": 10,
"scale": 1
},
{
"id": "e2",
"zIndex": 5,
"name": "RCPE-E2",
"value": 10,
"scale": 1
},
{
"id": "f0",
"zIndex": 6,
"name": "OMSE-F0",
"value": 10,
"scale": 1
},
{
"id": "f1",
"zIndex": 6,
"name": "OMSE-F1",
"value": 10,
"scale": 1
},
{
"id": "f2",
"zIndex": 6,
"name": "OMSE-F2",
"value": 10,
"scale": 1
},
{
"id": "f3",
"zIndex": 6,
"name": "OMSE-F3",
"value": 10,
"scale": 1
},
{
"id": "f4",
"zIndex": 6,
"name": "OMSE-F4",
"value": 10,
"scale": 1
}
],
"links": [
{
"source": "a0",
"target": "b0",
"value": 2
},
{
"source": "b0",
"target": "c1",
"value": 1
},
{
"source": "b0",
"target": "e2",
"value": 1
},
{
"source": "b0",
"target": "c2",
"value": 1
},
{
"source": "b0",
"target": "c3",
"value": 1
},
{
"source": "c1",
"target": "c0",
"value": 1
},
{
"source": "c3",
"target": "c4",
"value": 1
},
{
"source": "c1",
"target": "d0",
"value": 1
},
{
"source": "c2",
"target": "d0",
"value": 1
},
{
"source": "c3",
"target": "d0",
"value": 1
},
{
"source": "d0",
"target": "e0",
"value": 1
},
{
"source": "d0",
"target": "e1",
"value": 1
},
{
"source": "d0",
"target": "e2",
"value": 1
},
{
"source": "e0",
"target": "f0",
"value": 1
},
{
"source": "e0",
"target": "f1",
"value": 1
},
{
"source": "e1",
"target": "f1",
"value": 1
},
{
"source": "e1",
"target": "f2",
"value": 1
},
{
"source": "e2",
"target": "f2",
"value": 1
},
{
"source": "e2",
"target": "f3",
"value": 1
},
{
"source": "e2",
"target": "f4",
"value": 1
}
],
"childrenNodes": [
{
"id": "c1",
"data": {
"nodes": [
{
"id": "a0",
"zIndex": 1,
"name": "逻辑服务器单元1",
"value": 80,
"scale": 1,
"info": {}
},
{
"id": "a1",
"zIndex": 1,
"name": "逻辑服务器单元2",
"value": 10,
"scale": 1
},
{
"id": "b0",
"zIndex": 2,
"name": "RP-HSY-AZI-XX01",
"value": 10,
"scale": 1
},
{
"id": "c0",
"zIndex": 3,
"name": "虚拟化宿主单元1",
"value": 10,
"scale": 1
},
{
"id": "c1",
"zIndex": 3,
"name": "虚拟化宿主单元2",
"value": 10,
"scale": 1
},
{
"id": "c2",
"zIndex": 3,
"name": "虚拟化宿主单元3",
"value": 10,
"scale": 1
},
{
"id": "d0",
"zIndex": 4,
"name": "物理服务器设备1",
"value": 10,
"scale": 1
},
{
"id": "d1",
"zIndex": 4,
"name": "物理服务器设备2",
"value": 10,
"scale": 1
},
{
"id": "d2",
"zIndex": 4,
"name": "物理服务器设备3",
"value": 10,
"scale": 1
}
],
"links": [
{
"source": "a0",
"target": "b0",
"value": 1
},
{
"source": "a1",
"target": "b0",
"value": 1
},
{
"source": "b0",
"target": "c0",
"value": 1
},
{
"source": "b0",
"target": "c1",
"value": 1
},
{
"source": "b0",
"target": "c2",
"value": 1
},
{
"source": "c0",
"target": "d0",
"value": 1
},
{
"source": "c1",
"target": "d1",
"value": 1
},
{
"source": "c2",
"target": "d2",
"value": 1
}
]
}
}
]
}