- 
- 
- 
- 
+
+
+
+
+
+
+ {{$t('project.topology.chartName')}}
+
+
+
+
+
+
+
-
-
- {{$t('project.topology.chartName')}}
-
-
-
-
-
-
-
-
+
{{$t('project.topology.unit')}}
@@ -110,10 +159,11 @@
@change="expressionChange"
@removeExpression="removeExpression"
:showRemove="false"
+ :projectRightBox="true"
>
-
+
{{$t('dashboard.panel.chartForm.legend')}}
@@ -172,11 +222,13 @@
lineId:n.id,
width:n.width,
lineName:n.label,
+ name:[],
+ dashes:!n.dashes?n.dashes:JSON.stringify(n.dashes),
};
if( n.expressions){
n.expressions.forEach((item,index)=>{
this.addExpression();
- this.name[index]=item.name;
+ this.form.name[index]=item.name;
this.unit[index]=item.unit;
this.expressions[index]=item.metric;
this.legends[index]=item.legend;
@@ -191,7 +243,7 @@
data(){
return{
form:{
- arrows:'',
+ arrows:'0',
label:'',
color:'#1e90ff',
lineName:'',
@@ -199,6 +251,8 @@
width:'',
type:'',
roundness:'',
+ name:[],
+ dashes:''
},
predefineColors: [
'#ff4500',
@@ -209,18 +263,20 @@
'#1e90ff',
'#c71585',
],
+ showPicker:false,
unitOptions: chartDataFormat.unitOptions(),
promqlKeys:[],
expressions: [],
promqlCount:0,
elementIds:[],
legends:[],
- name:[],
+ widthOption:['1','2','3','4'],
+ dashesOption:[false,'[3,3]','[9,9]','[15,15]','[21,21]'],
unit:[],
rules:{
- arrows: [
- { required: true, message: '', trigger: 'change' },
- ],
+ // arrows: [
+ // { required: true, message: '', trigger: 'change' },
+ // ],
lineName: [
{ required: true, message: '', trigger: 'change' },
],
@@ -246,10 +302,11 @@
roundness:(Math.random()*8 +1)/10 ,//获取0.1-0.9之间的随机数
type:'curvedCW',
};
+ model.dashes=!model.dashes?model.dashes:JSON.parse(model.dashes);
model.expressions=[];
this.promqlKeys.forEach((item,index)=>{
model.expressions.push({
- "name": this.name[index],
+ "name": this.form.name[index],
"unit": this.unit[index],
"metric": this.expressions[index],
"legend": this.legends[index],
@@ -265,7 +322,7 @@
addExpression() {
this.expressions.push('');
this.legends.push('');
- this.name.push('');
+ this.form.name.push('');
this.unit.push('');
this.promqlKeys.push(getUUID());
this.elementIds.push("");
@@ -275,7 +332,7 @@
if (this.promqlCount >= 1) {
this.expressions.splice(index, 1);
this.legends.splice(index, 1);
- this.name.splice(index, 1);
+ this.form.name.splice(index, 1);
this.unit.splice(index, 1);
this.promqlKeys.splice(index, 1);
this.elementIds.splice(index, 1);
@@ -301,6 +358,7 @@
this.esc();
},
colorPickerClick(){
+ this.showPicker=true;
this.$refs['colorPicker'].showPicker=true;
},
colorChange(val){
@@ -313,6 +371,9 @@
let b = parseInt(rgb[2].split(')')[0]);
let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return hex;
+ },
+ colorOut(){
+ this.showPicker=false;
}
},
@@ -345,7 +406,7 @@
border-radius: 5px;
display: flex;
align-items: center;
- width: calc(100% - 30px);
+ width: calc(100% - 60px);
height: 30px;
}
.color-show-left{
@@ -367,23 +428,109 @@
/deep/ .el-form-item__label{
font-size: 14px;
color: #666666;
- opacity: 0.6;
}
- .arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
+ .arrows /deep/ .el-input.el-input--prefix.el-input--suffix,.line-width /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6;
height: 28px;
- width: calc(100% - 30px);
+ width: calc(100% - 32px);
}
- .arrows /deep/ .el-input__inner{
+ .arrows /deep/ .el-input__inner,.line-width /deep/ .el-input__inner{
display: none;
}
- .arrows /deep/ .el-input__prefix{
+ .arrows /deep/ .el-input__prefix,.line-width /deep/ .el-input__prefix{
height: 28px;
line-height: 28px;
+ color: #899FB7;
+ }
+ .arrows /deep/ .el-input__prefix > div{
+ width: 100%;
+ height: 100%;
+ }
+ .line-width /deep/ .el-input__prefix{
+ width: 100%;
+ display: flex;
+ align-items: center;
+ }
+ .line-width /deep/ .el-input__prefix > div{
+ width: 100%;
}
/deep/ .el-select{
width: 262px;
}
+ .line-option{
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .line-option > div{
+ width: 50%;
+ }
+ .line-option .line-width .el-input{
+ width: clac(100% - 60px);
+ }
+ /deep/ .el-input--small .el-input__icon{
+ line-height: 28px;
+ }
+ .width-option-line{
+ position: relative;
+ color: #899FB7;
+ }
+ .position-left{
+ position: absolute;
+ left:-4px ;
+ top: -18px;
+ }
+ .position-right{
+ position: absolute;
+ right: -4px;
+ top: -18px;
+ }
+ /deep/ .el-select-dropdown__item.selected .width-option-line {
+ border-color: #ee9d3f !important;
+ color: #ee9d3f !important;
+ }
+ /deep/ .el-dropdown-menu__item:focus .width-option-line, .el-dropdown-menu__item:not(.is-disabled):hover .width-option-line, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover .width-option-line, .el-select-dropdown__item.hover .width-option-line, .el-select-dropdown__item:hover .width-option-line{
+ border-color: #ee9d3f !important;
+ color: #ee9d3f !important;
+ }
+ .color-arrows{
+ color: #C0C4CC;
+ position: absolute;
+ right: 70px;
+ }
+ .color-arrows .nz-icon{
+ font-size: 12px;
+ }
+ .element-item{
+ padding: 20px 0;
+ border-bottom: 1px dashed #dfe7f2;
+ width: 100%;
+ }
+ .element-item.expr /deep/ .el-form-item__content{
+ position: relative;
+ margin-left: 0 !important;
+ }
+ .element-item.expr /deep/ .el-form-item__content .el-row{
+ margin-bottom: 0;
+ }
+ .element-item.expr /deep/ .el-form-item__content .el-form-item__error{
+ left: 120px;
+ }
+ .expr-title{
+ width: 120px;
+ padding-right: 20px;
+ text-align: right;
+ color: #666;
+ font-size: 14px;
+ letter-spacing: 0;
+ line-height: 22px;
+ }
+ .width-option{
+ width: 195px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ }
.el-row {
margin-bottom: 20px;
line-height: 32px;
diff --git a/nezha-fronted/src/components/common/project/addNode.vue b/nezha-fronted/src/components/common/project/addNode.vue
index 823df745b..c5a6b0313 100644
--- a/nezha-fronted/src/components/common/project/addNode.vue
+++ b/nezha-fronted/src/components/common/project/addNode.vue
@@ -63,29 +63,35 @@
{{$t('alert.config.expr')}}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+ {{item}}px
+
+
+ {{form.dashes}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{form.color}}
+
+
+
+
-
-
- {{form.color}}
-
-
-
-
-
-
+
+
+
+
+
{{$t('alert.config.expr')}}
-