"@antv/g6": "^4.8.17",
image.png
image.png
<template>
<div class="base-info">
<div class="box">
<div id="container" style="position: relative" ref="container"></div>
</div>
</div>
</template>
<script>
import mockData from "./mock";
import G6 from "@antv/g6";
import insertCss from "insert-css";
insertCss(`
.g6-component-tooltip {
background: none !important;
box-shadow: none;
border: none;
}
.g6-component-contextmenu{
background: none !important;
box-shadow: none;
border: none;
}
#contextMenu {
position: absolute;
list-style-type: none;
padding: 10px 8px;
left: -150px;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #e2e2e2;
border-radius: 4px;
font-size: 12px;
color: #545454;
}
#contextMenu li {
cursor: pointer;
list-style-type:none;
list-style: none;
margin-left: 0px;
}
#contextMenu li:hover {
color: #aaa;
}
`);
export default {
name: "g6",
data() {
return {
data: {
nodes: [],
edges: [],
}, // 拓扑图数据
graph: undefined, // new G6
canvasWidth: window.screen.width, // 画布宽度
canvasHeight: window.screen.height, // 画布高度
width: "0",
left: "0",
top: "0",
parentArray: [],
childArray: [],
ipList: [],
subIp: "",
mockData,
ip:'112.230.196.50'
};
},
mounted() {
this.attackPath();
},
methods: {
attackPath2() {
this.graph.destroy();
setTimeout(() => {
this.initComponent(this.data.nodes, this.data.edges);
}, 500);
},
attackPath() {
let child = this.mockData.child || [];
let parent = this.mockData.parent || [];
if (parent && parent.length > 0) {
parent.forEach((item) => {
item.source = item.ip;
item.target = this.ip;
item.stroke = "#f88b8b";
this.parentArray.push(
item.ip.split(".")[0] +
"." +
item.ip.split(".")[1] +
"." +
item.ip.split(".")[2] +
"." +
item.ip.split(".")[3]
);
});
}
if (child && child.length > 0) {
child.forEach((item) => {
item.source = this.ip;
item.target = item.ip;
item.stroke = "#f88b8b";
this.childArray.push(
item.ip.split(".")[0] +
"." +
item.ip.split(".")[1] +
"." +
item.ip.split(".")[2] +
"." +
item.ip.split(".")[3]
);
});
}
let temp = [...parent, ...child];
if (temp && temp.length > 0) {
temp.forEach((item, index) => {
this.data.nodes.push({
id: item.ip,
label:
item.ip.split(".")[0] +
"." +
item.ip.split(".")[1] +
"." +
item.ip.split(".")[2] +
"." +
item.ip.split(".")[3],
});
this.data.edges.push({
source: item.source,
target: item.target,
subCategory: item.subCategory,
collectorReceiptTime: item.collectorReceiptTime,
detail: item.detail,
style: {
stroke: item.stroke,
lineWidth: 1,
},
});
});
}
setTimeout(() => {
console.log(111, this.data.nodes, this.data.edges);
this.initComponent(this.data.nodes, this.data.edges);
}, 500);
},
initComponent(nodes, edges) {
this.data = {
nodes,
edges,
};
this.data.edges.forEach((edge) => {
// console.log(edge, 'edge')
if (edge.collectorReceiptTime) {
edge.label = `${edge.subCategory}-${edge.collectorReceiptTime.slice(
0,
-9
)}`;
} else {
edge.label = `${edge.subCategory}`;
}
});
for (let i = 0, len = this.data.nodes.length; i < len; i++) {
if (
this.data.nodes[i].id == this.ip ||
this.data.nodes[i].id == this.subIp
) {
this.data.nodes[i].img = require("./green.png");
} else {
this.data.nodes[i].img = require("./blue.png");
}
}
const toolbar = new G6.ToolBar({
position: { x: 10, y: 10 },
});
// todo 设置鼠标悬停显示详情操作
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 10,
getContent(e) {
const outDiv = document.createElement("div");
outDiv.style.width = "341px";
outDiv.innerHTML = `
<div id="nodeDetails" style="background:url( ${require("./mask.png")}) no-repeat;width: 341px;height: 248px; background-size: 100% 100%;position:relative;">
<p style=' position: absolute;
font-size: 16px;
color: #fff;
top: 0;
left: 0px;
height: 40px;
padding: 0;
line-height: 40px;
width: 341px;
padding-left: 20px;'>
数据详情
</p>
<ul style=' padding-top: 50px;
font-size: 14px;
color: #333;list-style: none;
padding: 50px 0 0 0';>
<li ><span style=' line-height: 31px;
margin: 0 64px 0 46px;
width: 60px;
display: inline-block;'>攻击时间</span>${
e.item.getModel().detail.collectorReceiptTime
}</li>
<li><span style=' line-height: 31px;
margin: 0 64px 0 46px;
width: 60px;
display: inline-block;'>攻击来源</span>${
e.item.getModel().detail.srcGeoCountry
}</li>
<li><span style=' line-height: 31px;
margin: 0 64px 0 46px;
width: 60px;
display: inline-block;'>攻击IP</span>${
e.item.getModel().detail.srcAddress
}</li>
<li><span style=' line-height: 31px;
margin: 0 64px 0 46px;
width: 60px;
display: inline-block;'>受害IP</span>${
e.item.getModel().detail.destAddress
}</li>
<li><span style=' line-height: 31px;
margin: 0 64px 0 46px;
width: 60px;
display: inline-block;'>攻击类型</span>${
e.item.getModel().detail.subCategory
}</li>
<li><span style=' line-height: 31px;
margin: 0 64px 0 46px;
width: 60px;
display: inline-block;'>攻击阶段</span>${
e.item.getModel().detail.killChain
}</li>
</ul>
</div>`;
return outDiv;
},
itemTypes: ["edge"],
trigger: "click", //点击行为
});
this.graph = new G6.Graph({
container: "container",
width: this.canvasWidth,
height: this.canvasHeight,
draggable: true,
// linkCenter: true,
enabledStack: true,
plugins: [tooltip, toolbar], // 配置 tooltip 插件 //toolbar 配置图标
modes: {
default: ["drag-canvas", "drag-node"], // 允许拖拽画布'drag-canvas'、放缩画布'zoom-canvas',、拖拽节点'drag-node'
},
layout: {
type: "force",
preventOverlap: true, // 防止节点重叠
// 防碰撞必须设置nodeSize或size,否则不生效，由于节点的size设置了40，虽然节点不碰撞了，但是节点之间的距离很近，label几乎都挤在一起，所以又重新设置了大一点的nodeSize,这样效果会好很多
nodeSize: 200,
linkDistance: 150, // 指定边距离为150
},
defaultNode: {
type: "image",
size: [120, 40],
labelCfg: {
position: "center",
style: {
fill: "#fff",
fontSize: 12,
cursor: "pointer",
},
},
},
defaultEdge: {
// 连线配置
// type: 'quadratic',
size: 2,
style: {
endArrow: true,
startArrow: false,
// stroke:''
},
labelCfg: {
autoRotate: true,
refY: -10,
style: {
fontSize: 8,
},
// style: {
// background: {
// fill: '#ffffff',
// stroke: '#ccc',
// padding: [2, 2, 2, 2],
// radius: 2
// }
// }
},
},
});
this.graph.data(this.data);
this.graph.render();
this.graph.on("node:click", (evt) => {
const { item } = evt;
this.subIp = item._cfg.id;
let ip =
item._cfg.id.split(".")[0] +
"." +
item._cfg.id.split(".")[1] +
"." +
item._cfg.id.split(".")[2] +
"." +
item._cfg.id.split(".")[3];
if (this.ipList.includes(ip) || ip == this.ip) {
return;
} else {
this.attackPath2();
}
this.ipList.push(ip);
// this.graph.setItemState(item, "selected", true);
});
this.graph.on("edge:mouseenter", (evt) => {
const { item } = evt;
this.graph.setItemState(item, "active", true);
});
this.graph.on("edge:mouseleave", (evt) => {
const { item } = evt;
this.graph.setItemState(item, "active", false);
});
},
},
};
</script>
<style scoped lang='scss'>
.time-range {
margin-left: 26px;
i {
color: #333;
font-size: 14px;
position: relative;
top: 4px;
}
}
::v-deep .el-input__inner {
background: #fff;
position: relative;
top: 5px;
}
::v-deep .el-range-editor .el-range-input {
background: #fff;
border: 1px solid #c6c6c6;
height: 25px;
font-size: 12px;
}
::v-deep .el-date-editor .el-range-separator {
position: relative;
top: -6px;
color: #333;
left: -2px;
}
::v-deep .el-date-editor .el-range__icon {
display: none;
}
</style>
mock.js
const data={
"parent": [
{
"eventId": "TX83l4kBRbb-Q34OSPbt",
"srcAddress": "162.55.54.17",
"destAddress": "112.230.196.50",
"ip": "162.55.54.17.0",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 19:54:39",
"srcGeoCountry": "德国",
"srcGeoCity": "",
"srcAddress": "162.55.54.17",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "4oiCl4kBRbb-Q34OT52n",
"srcAddress": "107.148.14.184",
"destAddress": "112.230.196.50",
"ip": "107.148.14.184.1",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 21:12:33",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.14.184",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "BhB1kYkBRbb-Q34OGpEQ",
"srcAddress": "118.89.133.116",
"destAddress": "112.230.196.50",
"ip": "118.89.133.116.2",
"subCategory": "代理木马",
"collectorReceiptTime": "2023-07-26 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-26 17:03:55",
"srcGeoCountry": "中国",
"srcGeoCity": "上海市",
"srcAddress": "118.89.133.116",
"destAddress": "112.230.196.50",
"subCategory": "代理木马",
"killChain": "命令与控制"
}
},
{
"eventId": "yLMHhIkBRbb-Q34Ohach",
"srcAddress": "223.104.42.246",
"destAddress": "112.230.196.50",
"ip": "223.104.42.246.3",
"subCategory": "端口扫描",
"collectorReceiptTime": "2023-07-23 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-24 02:30:32",
"srcGeoCountry": "中国",
"srcGeoCity": "北京市",
"srcAddress": "223.104.42.246",
"destAddress": "112.230.196.50",
"subCategory": "端口扫描",
"killChain": "侦察"
}
},
{
"eventId": "dmMolokBRbb-Q34O6qNv",
"srcAddress": "103.243.24.100",
"destAddress": "112.230.196.50",
"ip": "103.243.24.100.4",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 14:54:20",
"srcGeoCountry": "中国",
"srcGeoCity": "中国香港",
"srcAddress": "103.243.24.100",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "bhfJkYkBRbb-Q34OmXph",
"srcAddress": "5.161.64.47",
"destAddress": "112.230.196.50",
"ip": "5.161.64.47.5",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-26 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-26 18:30:16",
"srcGeoCountry": "德国",
"srcGeoCity": "Nuremberg",
"srcAddress": "5.161.64.47",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "S1NhlYkBRbb-Q34OokVg",
"srcAddress": "107.148.236.112",
"destAddress": "112.230.196.50",
"ip": "107.148.236.112.6",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 11:15:39",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.236.112",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "NYuZl4kBRbb-Q34OKXIJ",
"srcAddress": "107.148.14.180",
"destAddress": "112.230.196.50",
"ip": "107.148.14.180.7",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 21:32:45",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.14.180",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "R5DCl4kBRbb-Q34Ohy-N",
"srcAddress": "107.148.14.178",
"destAddress": "112.230.196.50",
"ip": "107.148.14.178.8",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 22:15:51",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.14.178",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "7qugmIkBRbb-Q34O1EeS",
"srcAddress": "107.148.236.13",
"destAddress": "112.230.196.50",
"ip": "107.148.236.13.9",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-28 02:25:56",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.236.13",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "zYygl4kBRbb-Q34OHx3V",
"srcAddress": "107.148.14.179",
"destAddress": "112.230.196.50",
"ip": "107.148.14.179.10",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 21:39:01",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.14.179",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "kdX-mYkBRbb-Q34OeeXR",
"srcAddress": "162.55.101.8",
"destAddress": "112.230.196.50",
"ip": "162.55.101.8.11",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-28 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-28 08:43:42",
"srcGeoCountry": "德国",
"srcGeoCity": "",
"srcAddress": "162.55.101.8",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "cZLSl4kBRbb-Q34Owj5E",
"srcAddress": "107.148.14.132",
"destAddress": "112.230.196.50",
"ip": "107.148.14.132.12",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 22:42:25",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.14.132",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "WbakhYkBRbb-Q34O6MTg",
"srcAddress": "107.148.14.134",
"destAddress": "112.230.196.50",
"ip": "107.148.14.134.13",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-24 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-24 09:50:20",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.14.134",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "2o2wl4kBRbb-Q34OGPw-",
"srcAddress": "5.189.201.113",
"destAddress": "112.230.196.50",
"ip": "5.189.201.113.14",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 22:00:29",
"srcGeoCountry": "俄罗斯",
"srcGeoCity": "Krasnoyarsk",
"srcAddress": "5.189.201.113",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "LoNXl4kBRbb-Q34OMKCN",
"srcAddress": "107.148.14.131",
"destAddress": "112.230.196.50",
"ip": "107.148.14.131.15",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 20:31:01",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.14.131",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "FaeAmIkBRbb-Q34O1BhX",
"srcAddress": "107.148.15.39",
"destAddress": "112.230.196.50",
"ip": "107.148.15.39.16",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-28 01:49:37",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.15.39",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "RrBXgYkBRbb-Q34OuJsy",
"srcAddress": "107.148.15.82",
"destAddress": "112.230.196.50",
"ip": "107.148.15.82.17",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-23 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-23 13:49:58",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.15.82",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "pJDCl4kBRbb-Q34OcxR_",
"srcAddress": "107.148.10.155",
"destAddress": "112.230.196.50",
"ip": "107.148.10.155.18",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 22:13:48",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.10.155",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "uQkSkYkBRbb-Q34OZHAD",
"srcAddress": "78.47.18.128",
"destAddress": "112.230.196.50",
"ip": "78.47.18.128.19",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-26 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-26 15:06:54",
"srcGeoCountry": "德国",
"srcGeoCity": "Nuremberg",
"srcAddress": "78.47.18.128",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "sz8tlIkBRbb-Q34O4nKs",
"srcAddress": "120.220.232.163",
"destAddress": "112.230.196.50",
"ip": "120.220.232.163.20",
"subCategory": "远控木马",
"collectorReceiptTime": "2023-07-26 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 05:45:42",
"srcGeoCountry": "中国",
"srcGeoCity": "烟台市",
"srcAddress": "120.220.232.163",
"destAddress": "112.230.196.50",
"subCategory": "远控木马",
"killChain": "命令与控制"
}
},
{
"eventId": "waiHmIkBRbb-Q34OWQ54",
"srcAddress": "31.184.204.140",
"destAddress": "112.230.196.50",
"ip": "31.184.204.140.21",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-28 01:52:34",
"srcGeoCountry": "俄罗斯",
"srcGeoCity": "Saint Petersburg",
"srcAddress": "31.184.204.140",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "m_5tkIkBRbb-Q34OcRR_",
"srcAddress": "116.203.44.184",
"destAddress": "112.230.196.50",
"ip": "116.203.44.184.22",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-26 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-26 12:08:48",
"srcGeoCountry": "德国",
"srcGeoCity": "Nuremberg",
"srcAddress": "116.203.44.184",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "HxGHkYkBRbb-Q34OgsrQ",
"srcAddress": "5.161.112.148",
"destAddress": "112.230.196.50",
"ip": "5.161.112.148.23",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-26 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-26 17:19:26",
"srcGeoCountry": "德国",
"srcGeoCity": "Nuremberg",
"srcAddress": "5.161.112.148",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "M4qOl4kBRbb-Q34OHzof",
"srcAddress": "107.148.15.35",
"destAddress": "112.230.196.50",
"ip": "107.148.15.35.24",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 21:22:28",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.15.35",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": "koNZl4kBRbb-Q34OI7eR",
"srcAddress": "107.148.237.30",
"destAddress": "112.230.196.50",
"ip": "107.148.237.30.25",
"subCategory": "挖矿协议",
"collectorReceiptTime": "2023-07-27 00:00:00",
"detail": {
"collectorReceiptTime": "2023-07-27 20:28:10",
"srcGeoCountry": "美国",
"srcGeoCity": "San Jose",
"srcAddress": "107.148.237.30",
"destAddress": "112.230.196.50",
"subCategory": "挖矿协议",
"killChain": "危害实施"
}
},
{
"eventId": null,
"srcAddress": null,
"destAddress": null,
"ip": "112.230.196.50",
"subCategory": null,
"collectorReceiptTime": null,
"detail": null
}
],
"child": null
}
export default data;
