gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改图表明必传

Browse Source
This commit is contained in:
zhangyu
2020-09-07 15:15:10 +08:00
parent d475a01cab
commit 9573f2d9a6
3 changed files with 55 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nezha-fronted/src/components/common/project/addLine.vue
View File

@@ -64,7 +64,7 @@
<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span> <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div> </div>
<el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index"> <el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-form-item :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + index"> <el-form-item :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
<el-row> <el-row>
<template> <template>
<el-col class="expr-title" style=""> <el-col class="expr-title" style="">
@@ -72,7 +72,7 @@
</el-col> </el-col>
<el-col style="width: calc(100% - 140px);"> <el-col style="width: calc(100% - 140px);">
<el-input <el-input
v-model="form.name[index]" v-model="form.name[index-1]"
type="text" type="text"
size="small" size="small"
></el-input> ></el-input>
@@ -369,7 +369,6 @@
/deep/ .el-form-item__label{ /deep/ .el-form-item__label{
font-size: 14px; font-size: 14px;
color: #666666; 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{
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;
@@ -427,7 +426,6 @@
padding-right: 20px; padding-right: 20px;
text-align: right; text-align: right;
color: #666; color: #666;
opacity: 0.6;
font-size: 14px; font-size: 14px;
letter-spacing: 0; letter-spacing: 0;
line-height: 22px; line-height: 22px;

78
nezha-fronted/src/components/common/project/addNode.vue
View File

@@ -63,29 +63,35 @@
<span>{{$t('alert.config.expr')}}</span> <span>{{$t('alert.config.expr')}}</span>
<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span> <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div> </div>
<el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index"> <el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-form-item :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
<el-row>
<template>
<el-col class="expr-title" style="">
{{$t('project.topology.chartName')}}
</el-col>
<el-col style="width: calc(100% - 140px);">
<el-input
v-model="form.name[index-1]"
type="text"
size="small"
></el-input>
</el-col>
<el-col style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
</template>
</el-row>
</el-form-item>
<el-row> <el-row>
<template> <el-col class="expr-title">
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
{{$t('project.topology.chartName')}}
</el-col>
<el-col style="width: calc(100% - 140px);">
<el-input v-model="name[index-1]" type="text" size="small"></el-input>
</el-col>
<el-col style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
</template>
</el-row>
<el-row>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
{{$t('project.topology.unit')}} {{$t('project.topology.unit')}}
</el-col> </el-col>
<el-col style="width: calc(100% - 120px);"> <el-col style="width: calc(100% - 120px);">
<el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%" <el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
:options="unitOptions" :options="unitOptions"
:props="{ expandTrigger: 'click',emitPath:false }" :props="{ expandTrigger: 'click',emitPath:false }"
:show-all-levels="false" :show-all-levels="false"
v-model="unit[index-1]" v-model="unit[index-1]"
></el-cascader> ></el-cascader>
</el-col> </el-col>
</el-row> </el-row>
<promql-input <promql-input
@@ -99,10 +105,11 @@
@change="expressionChange" @change="expressionChange"
@removeExpression="removeExpression" @removeExpression="removeExpression"
:showRemove="false" :showRemove="false"
:projectRightBox="true"
></promql-input> ></promql-input>
<el-row> <el-row>
<template> <template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666"> <el-col class="expr-title">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp; {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover"> <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i> <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
@@ -159,7 +166,7 @@
if( n.expressions){ if( n.expressions){
n.expressions.forEach((item,index)=>{ n.expressions.forEach((item,index)=>{
this.addExpression(); this.addExpression();
this.name[index]=item.name; this.form.name[index]=item.name;
this.unit[index]=item.unit; this.unit[index]=item.unit;
this.expressions[index]=item.metric; this.expressions[index]=item.metric;
this.legends[index]=item.legend; this.legends[index]=item.legend;
@@ -191,6 +198,7 @@
form:{ form:{
moduleId:'', moduleId:'',
iconId:'', iconId:'',
name:[],
}, },
selImage:'', selImage:'',
file:'', file:'',
@@ -201,7 +209,6 @@
promqlCount:0, promqlCount:0,
elementIds:[], elementIds:[],
legends:[], legends:[],
name:[],
unit:[], unit:[],
imgageLoading:false, imgageLoading:false,
rules:{ rules:{
@@ -276,12 +283,13 @@
model.expressions=[]; model.expressions=[];
this.promqlKeys.forEach((item,index)=>{ this.promqlKeys.forEach((item,index)=>{
model.expressions.push({ model.expressions.push({
"name": this.name[index], "name": this.form.name[index],
"unit": this.unit[index], "unit": this.unit[index],
"metric": this.expressions[index], "metric": this.expressions[index],
"legend": this.legends[index], "legend": this.legends[index],
}) })
}); });
console.log(this.form.name,this.unit,model);
this.$emit('addModel',model); this.$emit('addModel',model);
} }
}); });
@@ -293,7 +301,7 @@
addExpression() { addExpression() {
this.expressions.push(''); this.expressions.push('');
this.legends.push(''); this.legends.push('');
this.name.push(''); this.form.name.push('');
this.unit.push(''); this.unit.push('');
this.promqlKeys.push(getUUID()); this.promqlKeys.push(getUUID());
this.elementIds.push(""); this.elementIds.push("");
@@ -303,7 +311,7 @@
if (this.promqlCount >= 1) { if (this.promqlCount >= 1) {
this.expressions.splice(index, 1); this.expressions.splice(index, 1);
this.legends.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.unit.splice(index, 1);
this.promqlKeys.splice(index, 1); this.promqlKeys.splice(index, 1);
this.elementIds.splice(index, 1); this.elementIds.splice(index, 1);
@@ -377,6 +385,7 @@
/deep/ .avatar-uploader{ /deep/ .avatar-uploader{
display: inline-block; display: inline-block;
color: #1989fa; color: #1989fa;
vertical-align: top;
} }
/deep/.right-box-form .icon .el-select{ /deep/.right-box-form .icon .el-select{
width: 60%; width: 60%;
@@ -411,7 +420,7 @@
.icon /deep/ .el-input.el-input--prefix.el-input--suffix{ .icon /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;
height: 28px; height: 28px;
width: calc(100% - 30px); width: calc(100% - 10px);
} }
.icon /deep/ .el-input__inner{ .icon /deep/ .el-input__inner{
display: none; display: none;
@@ -420,6 +429,25 @@
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
} }
.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;
}
/* begin--搜索框*/ /* begin--搜索框*/
.endpoint-asset-search { .endpoint-asset-search {
display: inline-block; display: inline-block;

1
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -251,7 +251,6 @@
padding-right: 20px; padding-right: 20px;
text-align: right; text-align: right;
color: #666; color: #666;
opacity: 0.6;
font-size: 14px; font-size: 14px;
letter-spacing: 0; letter-spacing: 0;
line-height: 22px; line-height: 22px;