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{ .right-box-form .nz-icon-minus-medium{
padding: 2px 6px; padding: 2px 6px;
background: rgba(236,127,102,.1); background-color: rgba(236,127,102,.1);
border-radius: 2px; border-radius: 2px;
cursor: pointer; 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; position: absolute;
right: -40px;
top: 50%; top: 50%;
right: -55px; transform: translateY(-50%);
transform: translate(-50%,-50%); height: 70px;
justify-content: space-around;
} }
.right-box-form>.el-form-item.half-form-item-other{ .right-box-form>.el-form-item.half-form-item-other{
display: inline-block; display: inline-block;

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

@@ -71,9 +71,14 @@
</el-col> </el-col>
</template> </template>
</el-row> </el-row>
<span class="nz-icon-minus-medium nz-icon-minus-position"> <div class="nz-icon-minus-position">
<i class="nz-icon nz-icon-minus" @click="removeExpression(index)"></i> <span class="nz-icon-minus-medium">
</span> <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> </el-row>
<!--tooltip--> <!--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(){ valueMappingAdd(){
if(this.selection.pen.data.valueMappingSort==='desc'){ if(this.selection.pen.data.valueMappingSort==='desc'){
this.selection.pen.data.valueMapping.push({ this.selection.pen.data.valueMapping.push({
@@ -1835,8 +1851,12 @@
width: calc(100% - 120px); width: calc(100% - 120px);
padding: 20px 20px 20px 0; padding: 20px 20px 20px 0;
} }
.form-row-item .nz-icon-minus-position .nz-icon-minus-medium {
.form-row-item .nz-icon-minus-position { background: rgba(236, 127, 102, 0.1);
padding: 2px 6px;
color: #EC7F66;
}
/*.form-row-item .nz-icon-minus-position {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: -55px; right: -55px;
@@ -1849,7 +1869,7 @@
.nz-icon-minus { .nz-icon-minus {
color: #EC7F66; color: #EC7F66;
} }
} }*/
.tooltip-box { .tooltip-box {
padding-left: 10px; padding-left: 10px;

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

@@ -323,20 +323,25 @@
></promql-input> ></promql-input>
--> -->
<el-row> <el-row>
<el-col style="width: 120px; padding-right: 20px; text-align: left; padding-left:10px; color: #666"> <el-col style="width: 120px; padding-right: 20px; text-align: left; padding-left:10px; color: #666">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp; {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover placement="top" trigger="hover" width="211"> <el-popover placement="top" trigger="hover" width="211">
<div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div> <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> <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-popover>
</el-col> </el-col>
<el-col style="width: calc(100% - 120px);"> <el-col style="width: calc(100% - 120px);">
<el-input size="small" type="text" v-model="legends[index-1]" ></el-input> <el-input size="small" type="text" v-model="legends[index-1]" ></el-input>
</el-col> </el-col>
</el-row> </el-row>
<span class="nz-icon-minus-medium nz-icon-minus-position"> <div class="nz-icon-minus-position">
<i class="nz-icon nz-icon-minus" @click="removeExpression(index - 1)"></i> <span class="nz-icon-minus-medium">
</span> <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> </el-row>
</div> </div>
<!--value mapping start--> <!--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() { save() {
this.$refs['chartForm'].validate((valid) => { this.$refs['chartForm'].validate((valid) => {
if (valid) { if (valid) {