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

feat: chart-box增加复制expression功能

Browse Source
This commit is contained in:
chenjinsong
2021-03-11 19:59:47 +08:00
parent 746b97b8f4
commit 891f6bfcf2
3 changed files with 73 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -2373,15 +2373,26 @@ li{
}
.right-box-form .nz-icon-minus-medium{
padding: 2px 6px;
background: rgba(236,127,102,.1);
background-color: rgba(236,127,102,.1);
border-radius: 2px;
cursor: pointer;
}
.right-box-form .form-row-item .nz-icon-minus-position{
.nz-icon-copy {
padding: 2px 6px;
color: $global-text-color-active;
background-color: #FDF5E9;
border-radius: 2px;
cursor: pointer;
}
.nz-icon-minus-position{
display: inline-flex;
flex-direction: column;
position: absolute;
right: -40px;
top: 50%;
right: -55px;
transform: translate(-50%,-50%);
transform: translateY(-50%);
height: 70px;
justify-content: space-around;
}
.right-box-form>.el-form-item.half-form-item-other{
display: inline-block;

32
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -71,9 +71,14 @@
</el-col>
</template>
</el-row>
<span class="nz-icon-minus-medium nz-icon-minus-position">
<i class="nz-icon nz-icon-minus" @click="removeExpression(index)"></i>
</span>
<div class="nz-icon-minus-position">
<span class="nz-icon-minus-medium">
<i @click="removeExpression(index)" class="nz-icon nz-icon-minus"></i>
</span>
<span class="nz-icon-copy">
<i @click="copyExpression(index)" class="nz-icon nz-icon-override"></i>
</span>
</div>
</el-row>
<!--tooltip-->
@@ -1564,6 +1569,17 @@
});
}
},
copyExpression(index) {
this.selection.pen.data.expressArr.push(this.selection.pen.data.expressArr[index]);
this.selection.pen.data.legends.push(this.selection.pen.data.legends[index]);
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs[`promql-${index}`][0].metricChange(ex);
}
});
});
},
valueMappingAdd(){
if(this.selection.pen.data.valueMappingSort==='desc'){
this.selection.pen.data.valueMapping.push({
@@ -1835,8 +1851,12 @@
width: calc(100% - 120px);
padding: 20px 20px 20px 0;
}
.form-row-item .nz-icon-minus-position {
.form-row-item .nz-icon-minus-position .nz-icon-minus-medium {
background: rgba(236, 127, 102, 0.1);
padding: 2px 6px;
color: #EC7F66;
}
/*.form-row-item .nz-icon-minus-position {
position: absolute;
top: 50%;
right: -55px;
@@ -1849,7 +1869,7 @@
.nz-icon-minus {
color: #EC7F66;
}
}
}*/
.tooltip-box {
padding-left: 10px;

45
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -323,20 +323,25 @@
></promql-input>
-->
<el-row>
<el-col style="width: 120px; padding-right: 20px; text-align: left; padding-left:10px; color: #666">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover placement="top" trigger="hover" width="211">
<div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
<i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</el-popover>
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-input size="small" type="text" v-model="legends[index-1]" ></el-input>
</el-col>
<el-col style="width: 120px; padding-right: 20px; text-align: left; padding-left:10px; color: #666">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover placement="top" trigger="hover" width="211">
<div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
<i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</el-popover>
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-input size="small" type="text" v-model="legends[index-1]" ></el-input>
</el-col>
</el-row>
<span class="nz-icon-minus-medium nz-icon-minus-position">
<i class="nz-icon nz-icon-minus" @click="removeExpression(index - 1)"></i>
</span>
<div class="nz-icon-minus-position">
<span class="nz-icon-minus-medium">
<i @click="removeExpression(index - 1)" class="nz-icon nz-icon-minus"></i>
</span>
<span class="nz-icon-copy" v-if="!isSingleStat">
<i @click="copyExpression(index - 1)" class="nz-icon nz-icon-override"></i>
</span>
</div>
</el-row>
</div>
<!--value mapping start-->
@@ -739,6 +744,20 @@
});
}
},
copyExpression(index) {
this.expressions.push(this.expressions[index]);
this.legends.push(this.legends[index]);
this.promqlKeys.push(getUUID());
this.elementIds.push("");
this.promqlCount++;
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs[`promql-${index}`][0].metricChange(ex);
}
});
});
},
save() {
this.$refs['chartForm'].validate((valid) => {
if (valid) {