diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue index aaaa2506c..fab81a487 100644 --- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue +++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue @@ -1,17 +1,17 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + {{$t('dashboard.panel.chartForm.tooltip')}} + + + + + +
+ + + + + + + + + {{item.name}} + + + + + + + + + + + + + + + + + {{item.name}} + + + +
+ + + {{'Thresholds'}} （0:Ok > … >2:Critical） + +
+ + + + + + + + + + + + + + + + +
add
+ + + + {{'Link'}} + + + + + + @@ -174,90 +201,189 @@
X（px）
- +
Y（px）
- +
宽（px）
- +
高（px）
- +
圆角（0 - 1）
- +
旋转（°）
- +
内边距 上（px）
- +
内边距 下（px）
- +
内边距 左（px）
- +
内边距 右（px）
- +
@@ -266,7 +392,7 @@
-
+
线条样式
-
+
线条宽度（px）
- +
-
+
线条颜色
- +
+
+ {{selection.pen.strokeStyle}} + + + + +
+
+ + +
-
+
箭头颜色
- +
+
+ {{selection.pen.arrowColor}} + + + + +
+
+ + +
背景颜色
- +
+
+ {{selection.pen.fillStyle}} + + + + +
+
+ + +
透明度（0 - 1）
- +
@@ -486,17 +673,41 @@
圆点大小（px）
- +
线条颜色
- +
+
+ {{selection.pen.animateColor}} + + + + +
+
+ + +
@@ -518,100 +729,39 @@ - -
-
开启
- -
- - -
-
-
- +
+
Animation + + + + +
+
+
+ +
+ + + +
+
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -636,8 +786,22 @@
- +
+
+ {{topologyData.data.bkColor}} + + + + +
+
+ + +
@@ -652,13 +816,18 @@
- +
@@ -679,19 +848,42 @@
- +
- +
+
+ {{topologyData.data.gridColor}} + + + + +
+
+ + +
+ +
@@ -711,9 +903,22 @@
- +
+
+ {{topologyData.data.ruleColor}} + + + + +
+
+ + +
@@ -854,7 +1059,7 @@
- +
@@ -1040,6 +1245,36 @@ {id:'dot',name:'圆点'}, {id:'comet',name:'彗星'}, ], + nodeAnimateOptions :[ + { + id: 'upDown', + name: '上下跳动' + }, + { + id: 'leftRight', + name: '左右跳动' + }, + { + id: 'heart', + name: '心跳' + }, + { + id: 'success', + name: '成功' + }, + { + id: 'warning', + name: '警告' + }, + { + id: 'error', + name: '错误' + }, + { + id: 'show', + name: '炫耀' + }, + ], } }, mixins: [rz], @@ -1161,28 +1396,27 @@ }, moduleIdChange(n){ this.selection.pen.data.moduleName=this.modules.find(item=>item.id===n).name; + if(!this.selection.pen.data.title){ + this.selection.pen.data.title=this.selection.pen.data.moduleName + this.selection.pen.text=this.selection.pen.data.title; + this.onChange() + } + }, + changeTitle(val){ + this.selection.pen.text=val; + this.onChange() }, onChange(value){ + console.log(value,this.selection.pen.lineWidth) if(value==='lineWidth'){ - this.pen.lineWidth=this.selection.pen.data.lineWidth; - } - if(this.selection.pens){ - for(const item of this.selection.pens){ - item.dash=this.pen.dash; - item.strokeStyle=this.pen.strokeStyle; - item.lineWidth=this.pen.lineWidth; - item.globalAlpha=this.pen.globalAlpha; - item.font=Object.assign({},this.pen.font); - item.textMaxLine=this.pen.textMaxLine; - item.textOffsetX=this.pen.textOffsetX; - item.textOffsetY=this.pen.textOffsetY; - } - } - if(!this.selection.pen.type||this.selection.pens){ - this.$emit('change',this.selection.pen||this.selection.pens); - }else{// 线更新 - this.$emit('change'); + this.selection.pen.lineWidth=this.selection.pen.data.lineWidth; } + this.$emit('change',this.selection.pen); + // if(!this.selection.pen.type||this.selection.pens){ + // this.$emit('change',this.selection.pen||this.selection.pens); + // }else{// 线更新 + // this.$emit('change'); + // } }, changeExpand(){ this.selection.expand= !this.selection.expand; @@ -1235,20 +1469,22 @@ this.onChange(); }, - changeTopologyOpt(val,key){ - // this.topologyData.data[key]=this.colorRGBtoHex(val); + changeTopologyOpt(val,key,isColor){ + // // getTopology(this.index).data[key]=val; // getTopology(this.index).render(); - this.topologyData.data[key]=val; + if(isColor){ + this.topologyData.data[key]=this.colorRGBtoHex(val); + } else{ + 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 "" } @@ -1320,6 +1556,17 @@ valueMappingDel(index,row){ console.log(index,row) }, + inputFocus(e){ + // console.log(e); + // console.log(e.path[2]); + // e.path[2].classList.add('el-input-number-show-button'); + }, + inputBlur(e){ + // console.log(e); + }, + colorPickerClick(ref){ + this.$refs[ref].showPicker=true; + }, } } @@ -1337,7 +1584,22 @@ font-size: 14px; text-align: center; } - + .props-box /deep/ .el-tabs--card>.el-tabs__header{ + background: #EEEEEE; + border: none; + } + .props-box /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{ + background: #FFFFFF; + font-family: Roboto-Bold; + font-size: 14px; + color: #FA901C; + font-weight: 700; + border-bottom-color: #FFF; + border-top: 3px solid #FA901C; + } + .props-box /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item{ + box-sizing: content-box; + } diff --git a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue index 8489a8acb..3c561ec97 100644 --- a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue +++ b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue @@ -9,17 +9,24 @@
- - - % + + - + +
+
50
+
100
+
200
+
+ {{scaleNum}}% + + + +
@@ -105,7 +112,18 @@ fitView(){//自适应画布大小 getTopology(this.index).fitView(); }, + changeScale(num){ + this.scaleNum+=num; + if(this.scaleNum<25){ + this.scaleNum=25 + } + if(this.scaleNum>400){ + this.scaleNum=400 + } + this.scale(this.scaleNum) + }, scale(val){ + this.scaleNum=val; getTopology(this.index).scaleTo(val/100); }, del(){ @@ -124,7 +142,26 @@ } } - +