diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index 15a430cd8..a312667c7 100644 --- a/nezha-fronted/src/components/common/language/cn.js +++ b/nezha-fronted/src/components/common/language/cn.js @@ -951,6 +951,7 @@ const cn = { selTwoNode:'请选择两个模块', save:'保存', cancel:'取消', + preview:'预览', addLine:'添加连线', editLine:'编辑连线', lineName:'连线名称', diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 8c5800f9b..57eccb3ba 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -957,6 +957,7 @@ const en = { selTwoNode:'Please select two module', save:'save', cancel:'cancel', + preview:'preview', addLine:'Add line', editLine:'Edit line', lineName:'Line Name', diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue index 8acde97ab..aaaa2506c 100644 --- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue +++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue @@ -107,22 +107,62 @@ - - level - color - value - animation - - - - - level - color - value - animation - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
add
@@ -506,292 +546,320 @@ -
- - - - - - - -
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- - -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
-
- -
- +
+ Project +
+
+
Title
+ +
+ +
+ +
+ +
-
- -
- -
-
- - - - - - +
Appearance
+ +
+
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ + + + + + + +
-
- -
- - - - - + +
+ + + + + + + +
+ + +
+
+ +
+ +
+ +
+
+ + + + + + + +
- - + +
+ + + + + + + +
+ + +
+
-
- -
- - +
Appearance
+ +
+ +
+ +
+ + +
+ +
+ +
+ + +
+
+
-
- -
- -
-
- - - - - - - -
-
- -
- - - - - - - -
- - -
-
+
Link
-
- -
- -
-
- - - - - - - -
-
- -
- - - - - - - -
- - -
-
+
-
- -
- +
+ +
+ +
-
-
- -
- - -
-
- -
- -
- - -
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- - -
-
- -
- -
- -
@@ -878,7 +946,7 @@ topologyData:{ data:{ name:'', - bkColor:undefined, + bkColor:'#FFFFFF', bkImage:'', grid:false, gridSize:'', @@ -889,6 +957,9 @@ lineWidth:1, fromArrow:'', toArrow:'triangleSolid', + projectInfo:true, + alertInfo:true, + url:'', } }, pen:{ @@ -997,28 +1068,35 @@ deep:true, immediate:true, }, - 'topologyData.data':{ - handler(n){ - setTimeout(()=>{ - let data=getTopology(this.index).data; - Object.keys(this.topologyData.data).forEach((key)=>{ - data[key]=this.topologyData.data[key]; - }); - getTopology(this.index).render(); - }) - }, - deep:true, - immediate:true, - } + // 'topologyData.data':{ + // handler(n){ + // setTimeout(()=>{ + // let dataOption=getTopology(this.index).data; + // Object.keys(this.topologyData.data).forEach((key)=>{ + // dataOption[key]=this.topologyData.data[key]; + // }); + // getTopology(this.index).render(); + // }) + // }, + // deep:true, + // immediate:false, + // } + }, + created(){ + let dataOption=getTopology(this.index).data; + console.log(dataOption); + Object.keys(this.topologyData.data).forEach((key)=>{ + console.log() + this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]); + }); }, mounted(){ this.queryMetrics(); - let dataOption=getTopology(this.index).data; - Object.keys(this.topologyData.data).forEach((key)=>{ - this.topologyData.data[key]=dataOption[key]?dataOption[key]:this.topologyData.data[key] - }); - this.topologyData.data.grid= !!getTopology(this.index).data.grid; - this.topologyData.data.rule= !!getTopology(this.index).data.rule; + // this.topologyData.data.grid= !!dataOption.grid; + // this.topologyData.data.rule= !!dataOption.rule; + // this.topologyData.data.projectInfo= !!dataOption.projectInfo; + // this.topologyData.data.alertInfo= !!dataOption.alertInfo; + console.log(this.topologyData); }, updated(){ if(!this.selection.pen){//没选中node line返回 @@ -1158,11 +1236,19 @@ this.onChange(); }, changeTopologyOpt(val,key){ - this.topologyData.data[key]=this.colorRGBtoHex(val); + // this.topologyData.data[key]=this.colorRGBtoHex(val); // getTopology(this.index).data[key]=val; // getTopology(this.index).render(); + this.topologyData.data[key]=val; + Object.keys(this.topologyData.data).forEach((key1)=>{ + getTopology(this.index).data[key1]=this.topologyData.data[key1]; + }); + // console.log(dataOption[key]); + getTopology(this.index).render(); + console.log(123213123); }, colorRGBtoHex(color){//获取颜色16进制数 + return color; if(!color){ return "" } @@ -1217,6 +1303,23 @@ }); } }, + valueMappingAdd(){ + this.selection.pen.data.valueMapping.push({ + color:{ + border:'#000', + bac:'#fff', + text:'#000', + }, + animation:'upDown', + value:'', + }); + }, + valueMappingValueChange(index,row){ + console.log(index,row) + }, + valueMappingDel(index,row){ + console.log(index,row) + }, } } @@ -1243,6 +1346,51 @@ }