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

fix: 修改 valueMapping 颜色未保存的问题

Browse Source
This commit is contained in:
zhangyu
2021-12-01 18:17:23 +08:00
parent 6867402a94
commit 294eee526c
3 changed files with 59 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -12,10 +12,17 @@
border: 1px solid $--border-color-light;
border-radius: 2px;
display: flex;
padding: 3px 10px 3px 5px;
padding: 0;
padding-left: 5px;
line-height: 30px;
justify-content: space-between;
margin-bottom: 10px;
box-sizing: border-box;
height: 32px;
.title-content-left{
display: inline-flex;
align-items: center;
}
.nz-icon-copy {
padding: 0 4px;
color: $--color-primary;
@@ -50,7 +57,7 @@
margin-left: 5px;
}
.mapping-display{
width: 124px;
width: 100px;
font-size: 14px;
border: 1px solid $--border-color-light;
border-radius: 2px 0 0 2px;
@@ -67,5 +74,21 @@
margin-bottom: 10px;
padding: 3px 10px;
}
.prev-mapping-box{
border: 1px solid $--border-color-light;
display: inline-block;
min-width: 18px;
height: 25px;
line-height: 25px;
border-radius: 5px;
margin-left: 120px;
padding: 0 3px;
text-align: center;
}
.element-item {
padding: 0;
border-bottom: none;
margin-bottom: 10px;
}
}
}

31
nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
View File

@@ -195,7 +195,22 @@
<div class="chart-title chart-title-config">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
123
<span v-show="!item.show" class="title-content-left">
<span v-if="item.type === 'value'">
{{item.value}}
</span>
<span v-if="item.type === 'range'">
{{item.from}} -> {{item.to}}
</span>
<span v-if="item.type === 'regx'">
{{item.regx}}
</span>
<div :style="{background:item.color.bac}" class="prev-mapping-box">
<span :style="{color:item.color.text}">
{{item.display || "T"}}
</span>
</div>
</span>
</span>
<span>
<span @click="addMapping('')">
@@ -211,18 +226,22 @@
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row v-show="item.show" :key="1" class="thresholds-item">
<el-select v-model="item.type" size="small" style="width: 100px" @change="(val)=>{mappingItemChange(index,val)}">
<el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
</el-select>
<div>
<el-select v-model="item.type" size="small" style="width: 100px" @change="(val)=>{mappingItemChange(index,val)}">
<el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
</el-select>
</div>
<el-input-number :controls="false" v-if="item.type === 'value'" size="small" v-model="item.value" placeholder="value"></el-input-number>
<el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.from" placeholder="from"></el-input-number>
<el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.to" placeholder="to" style="margin-left: 10px"></el-input-number>
<el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
</el-row>
<el-row v-show="item.show" :key="2" class="thresholds-item" style="position: relative">
<div class='mapping-display'>Display</div>
<div>
<div class='mapping-display'>Display</div>
</div>
<el-input v-model="item.display" style="margin-right: 10px" size="small"/>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(index,key,val)}"/>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
</el-row>
</transition-group>
</div>

9
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -213,6 +213,15 @@ export default {
if (key === 'thresholds') {
this.chartConfig.param.thresholds[index].color = val
}
if (key === 'bac') {
console.log(this.chartConfig.param.valueMapping.mapping,this.chartConfig.param.valueMapping.mapping[0],this.chartConfig.param.valueMapping.mapping[index])
this.chartConfig.param.valueMapping.mapping[index].color.bac = val
this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
}
if (key === 'text') {
this.chartConfig.param.valueMapping.mapping[index].color.text = val
this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
}
this.change()
},
change () {