|
@@ -4,17 +4,21 @@ import G6 from '@antv/g6'
|
|
const tooltip = new G6.Tooltip({
|
|
const tooltip = new G6.Tooltip({
|
|
offsetX: 10,
|
|
offsetX: 10,
|
|
offsetY: 10,
|
|
offsetY: 10,
|
|
- // 允许出现 tooltip 的 item 类型
|
|
|
|
// itemTypes: ['node', 'edge'],
|
|
// itemTypes: ['node', 'edge'],
|
|
itemTypes: ['node'],
|
|
itemTypes: ['node'],
|
|
- // 自定义 tooltip 内容
|
|
|
|
getContent: (e) => {
|
|
getContent: (e) => {
|
|
|
|
+ const data = e.item.getModel()
|
|
const outDiv = document.createElement('div')
|
|
const outDiv = document.createElement('div')
|
|
outDiv.style.width = 'fit-content'
|
|
outDiv.style.width = 'fit-content'
|
|
- //outDiv.style.padding = '0px 0px 20px 0px';
|
|
|
|
- outDiv.innerHTML = `<ul>
|
|
|
|
- <li>节点ID: ${e.item.getModel().id}</li>
|
|
|
|
- <li>节点名称: ${e.item.getModel().label || e.item.getModel().id}</li>
|
|
|
|
|
|
+ outDiv.innerHTML = data.info
|
|
|
|
+ ? `<ul>
|
|
|
|
+ <li>节点ID: ${data.id}</li>
|
|
|
|
+ <li style="margin-top:5px;">节点名称: ${data.label}</li>
|
|
|
|
+ <li style="margin-top:5px;">报警原因: ${data.info}</li>
|
|
|
|
+ </ul>`
|
|
|
|
+ : `<ul>
|
|
|
|
+ <li>节点ID: ${data.id}</li>
|
|
|
|
+ <li style="margin-top:5px;">节点名称: ${data.label}</li>
|
|
</ul>`
|
|
</ul>`
|
|
return outDiv
|
|
return outDiv
|
|
}
|
|
}
|
|
@@ -59,7 +63,7 @@ export function getG6Options({ container = 'container' }) {
|
|
size: 30,
|
|
size: 30,
|
|
type: 'image',
|
|
type: 'image',
|
|
style: {
|
|
style: {
|
|
- // fill: '#fa8c16',
|
|
|
|
|
|
+ // fill: '#f00',
|
|
// stroke: '#000',
|
|
// stroke: '#000',
|
|
// lineWidth: 1
|
|
// lineWidth: 1
|
|
},
|
|
},
|
|
@@ -200,7 +204,7 @@ G6.registerNode(
|
|
back1.animate(
|
|
back1.animate(
|
|
{
|
|
{
|
|
// Magnifying and disappearing
|
|
// Magnifying and disappearing
|
|
- r: r + 10,
|
|
|
|
|
|
+ r: r + 15,
|
|
opacity: 0.1
|
|
opacity: 0.1
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -213,7 +217,7 @@ G6.registerNode(
|
|
back2.animate(
|
|
back2.animate(
|
|
{
|
|
{
|
|
// Magnifying and disappearing
|
|
// Magnifying and disappearing
|
|
- r: r + 10,
|
|
|
|
|
|
+ r: r + 15,
|
|
opacity: 0.1
|
|
opacity: 0.1
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -226,7 +230,7 @@ G6.registerNode(
|
|
back3.animate(
|
|
back3.animate(
|
|
{
|
|
{
|
|
// Magnifying and disappearing
|
|
// Magnifying and disappearing
|
|
- r: r + 10,
|
|
|
|
|
|
+ r: r + 15,
|
|
opacity: 0.1
|
|
opacity: 0.1
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -518,6 +522,15 @@ const nodeTree2 = [
|
|
id: '19',
|
|
id: '19',
|
|
label: 'VM\nVM02',
|
|
label: 'VM\nVM02',
|
|
img: '/imgs/vm.svg',
|
|
img: '/imgs/vm.svg',
|
|
|
|
+ type: 'background-animate',
|
|
|
|
+ info: '网络异常',
|
|
|
|
+ color: '#f00',
|
|
|
|
+ labelCfg: {
|
|
|
|
+ style: {
|
|
|
|
+ fill: '#f00'
|
|
|
|
+ },
|
|
|
|
+ position: 'bottom'
|
|
|
|
+ },
|
|
children: [
|
|
children: [
|
|
{
|
|
{
|
|
id: '22',
|
|
id: '22',
|