diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index aeb4e0641..2c356909e 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -4716,8 +4716,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"aproba": {
"version": "1.2.0",
@@ -4738,14 +4737,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -4760,20 +4757,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -4890,8 +4884,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"ini": {
"version": "1.3.5",
@@ -4903,7 +4896,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -4918,7 +4910,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -4926,14 +4917,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -4952,7 +4941,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -5033,8 +5021,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -5046,7 +5033,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"wrappy": "1"
}
@@ -5132,8 +5118,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -5169,7 +5154,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -5189,7 +5173,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -5233,14 +5216,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
diff --git a/nezha-fronted/src/components/charts/addLine.vue b/nezha-fronted/src/components/charts/addLine.vue
new file mode 100644
index 000000000..1507550f5
--- /dev/null
+++ b/nezha-fronted/src/components/charts/addLine.vue
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+ 取消
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/charts/addNode.vue b/nezha-fronted/src/components/charts/addNode.vue
new file mode 100644
index 000000000..6f9363bc4
--- /dev/null
+++ b/nezha-fronted/src/components/charts/addNode.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+ 取消
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index c2ada986a..7b57b1101 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -660,7 +660,7 @@
panelId: 0,
title: this.$t("alert.config.chart.alertNumTrend"),
span: 8,
- height: 350,
+ height: 800,
type: "topology",
prev: -11,
next: -1,
diff --git a/nezha-fronted/src/components/charts/visNetwork.vue b/nezha-fronted/src/components/charts/visNetwork.vue
index 472b46dc1..4d80c180b 100644
--- a/nezha-fronted/src/components/charts/visNetwork.vue
+++ b/nezha-fronted/src/components/charts/visNetwork.vue
@@ -1,5 +1,5 @@
-
+
@@ -38,9 +38,27 @@
-
-
-
+
+
+
+
+
请选择两个节点
- 1111111111
+
Click event:
' + JSON.stringify(params, null, 4);
- console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM),params);
+ console.log(params);
+ let selId=params.nodes[0];
+ this_.networkPopClose();
+ if(selId){
+ this_.selNodeId=selId;
+ this_.cursorMove=true;
+ this_.nodeData=this_.nodesArray.find((item)=>item.id==selId);
+ this_.setPopPosition(selId,params);
+ if(this_.selectNodeTitle){
+ this_.NodeArr.push(selId);
+ this_.network.selectNodes(this_.NodeArr,true)
+ }
+ }
});
- this.network.on("dragEnd", function (params) {
+
+ this.network.on("selectEdge", function (params) {
+ this_.lineData.id=params.edges[0];
+ console.log(this_.lineData.id);
+ });
+
+ this.network.on("dragStart", function (params) {//节点移动开始
// params.event = "[original event]";
// document.getElementById('eventSpan').innerHTML = 'Click event:
' + JSON.stringify(params, null, 4);
- console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM),params);
- console.log( this_.network.getPositions());
- let selId=params.nodes[0];
- this_.setNodePosition(selId)
+ // console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM),params);
+ // console.log( this_.network.getPositions());
+ this_.networkPopShow=false;
});
- })
+
+ this.network.on("dragging", function (params,event) {//节点移动中
+
+ });
+
+ this.network.on("dragEnd", function (params) {//节点移动结束
+ this_.viewsCenter=this_.network.getViewPosition();
+ let selId=params.nodes[0];
+ if(selId){
+ this_.setPopPosition(selId,params)
+ this_.setNodePosition(selId)
+ }
+ });
+ this.network.on("hoverNode", function (params) {//hoverNode
+ this_.cursorMove=true;
+ console.log(params);
+ });
+ this.network.on("blurNode", function (params) {//blurNode
+ this_.cursorMove=false;
+ // console.log(params);
+ });
+ });
+
}
}
@@ -569,6 +718,62 @@
height: calc(100% - 30px);
}
.network{
+ display: flex;
height: calc(100% - 30px);
+ position: relative;
+ }
+ .networkPop{
+ position: absolute;
+ z-index: 10;
+ border: 1px solid #e6e6e6;
+ border-radius: 5px;
+ height: 32px;
+ background: #fff;
+ padding: 0 3px;
+ line-height: 32px;
+ }
+ .btmTriangle{
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-width: 10px;
+ border-style: solid;
+ border-color:#e6e6e6 transparent transparent transparent;
+ bottom: -20px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ .btmTriangle:after{
+ content: '';
+ display:block;
+ width:0;
+ height:0;
+ border-width: 10px;
+ border-style:solid;
+ border-color:#fff transparent transparent transparent;
+ position:absolute;
+ bottom: -7px;
+ left: -9px;
+ }
+ #network_id{
+ width: 60%;
+ }
+ .cursorMove{
+ cursor: move;
+ }
+ #network_id2{
+ height: 100%;
+ }
+ .networkContent{
+ width: 40%;
+ }
+ .nz-icon-delete{
+ cursor: pointer;
+ color: #ee6723;
+ margin-left: 10px;
+ }
+ .nz-icon-edit{
+ font-size: 14px;
+ cursor: pointer;
}