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

NEZ-1812 feat：部分图表value mapping增加icon

Browse Source
This commit is contained in:
zyh
2022-05-09 15:57:03 +08:00
parent b8df9f9c0a
commit 00fe36243c
12 changed files with 218 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -560,6 +560,9 @@
<span v-if="item.type === 'regx'">
{{item.regx}}
</span>
<div class="prev-mapping-icon">
<i :class="item.icon" :style="{ color: item.color.icon }"></i>
</div>
<div :style="{background:item.color.bac}" class="prev-mapping-box">
<span :style="{color:item.color.text}">
{{item.display || "T"}}
@@ -665,10 +668,36 @@
<div>
<div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
</div>
<div>
<el-select
v-model="item.icon"
size="small"
style="width: 75px"
:placeholder="$t('el.select.placeholder')"
@change="change('valueMapping', index)"
>
<template slot="prefix">
<i class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
</template>
<el-option
v-for="item in mappingIconList"
:value="item.value"
:key="item.value"
label=" "
>
<i :class="item.value"></i>
</el-option>
</el-select>
</div>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
</el-form-item>
<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)}"/>
<nezhaColor
:color-val="item.color"
:single="false"
:value-arr="[{name:'icon',value:item.color.icon,key:'icon'},{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>

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

@@ -58,6 +58,29 @@ export default {
value: 'regx'
}
],
mappingIconList: [
{
value: 'nz-icon nz-icon-failed'
}, {
value: 'nz-icon nz-icon-Firewall'
}, {
value: 'nz-icon nz-icon-ADC'
}, {
value: 'nz-icon nz-icon-overview-alert'
}, {
value: 'nz-icon nz-icon-yanzhengma'
}, {
value: 'nz-icon nz-icon-Switch'
}, {
value: 'nz-icon nz-icon-connecting'
}, {
value: 'nz-icon nz-icon-language-change'
}, {
value: 'nz-icon nz-icon-overview-alert1'
}, {
value: 'nz-icon nz-icon-model'
}
],
letter: [
'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N',
@@ -327,7 +350,8 @@ export default {
display: '',
color: {
bac: bacColor + 'FF',
text: ColorReverse(bacColor) + 'FF'
text: ColorReverse(bacColor) + 'FF',
icon: randomcolor() + 'FF'
}
}
if (this.chartConfig.type === 'table') {
@@ -388,6 +412,10 @@ export default {
this.chartConfig.param.valueMapping[index].color.text = val
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
}
if (key === 'icon') {
this.chartConfig.param.valueMapping[index].color.icon = val
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
}
this.change()
},
change (key, index) {

41
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -522,11 +522,14 @@
<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>
<div class="prev-mapping-icon">
<i :class="item.icon" :style="{ color: item.color.icon }"></i>
</div>
<div :style="{background:item.color.bac}" class="prev-mapping-box">
<span :style="{color:item.color.text}">
{{item.display || "T"}}
</span>
</div>
</span>
</span>
<span>
@@ -627,10 +630,36 @@
<div>
<div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
</div>
<div>
<el-select
v-model="item.icon"
size="small"
style="width: 75px"
:placeholder="$t('el.select.placeholder')"
@change="change('valueMapping', index)"
>
<template slot="prefix">
<i class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
</template>
<el-option
v-for="item in mappingIconList"
:value="item.value"
:key="item.value"
label=" "
>
<i :class="item.value"></i>
</el-option>
</el-select>
</div>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
</el-form-item>
<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)}"/>
<nezhaColor
:color-val="item.color"
:single="false"
:value-arr="[{name:'icon',value:item.color.icon,key:'icon'},{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>