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

feat：valueMapping添加tooltip的提示 ， 文本内容可以使用{{value}}替换为原值

Browse Source 
fix：修改 chart Type为table时 value未添加背景色的问题
This commit is contained in:
zhangyu
2020-12-04 17:24:12 +08:00
parent 728416de04
commit 053f1f123b
5 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/components/charts/chart-single-stat.vue
View File

@@ -424,7 +424,7 @@ export default {
if(this.mapping&&!this.mapping.color){
this.mapping.color={bac:'#fff',text:'#000'}
}
this.serieSingleStat = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else{
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}
@@ -460,7 +460,7 @@ export default {
if(this.mapping&&!this.mapping.color){
this.mapping.color={bac:'#fff',text:'#000'}
}
this.serieSingleStat = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else{
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}

12
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -52,7 +52,7 @@
<div class="mt-10 table-container" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
:data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table
@sort-change="tableDataSort">
@sort-change="tableDataSort" >
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true"
@@ -65,7 +65,7 @@
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope">
{{ scope.row.value}}
<div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
</template>
</el-table-column>
</el-table>
@@ -97,7 +97,7 @@
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope">
{{ scope.row.value}}
<div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
</template>
</el-table-column>
</el-table>
@@ -210,7 +210,8 @@
}],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
oldSearchTime: [],
ps: null
ps: null,
mapping:{},
};
},
created() {
@@ -395,7 +396,8 @@
}else{
mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
}
item.value = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
this.mapping=mapping;
item.value = mapping?mapping.text.replace('{{value}}', item.value):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
}
return item;
}));

3
nezha-fronted/src/components/common/language/cn.js
View File

@@ -182,6 +182,9 @@ const cn = {
unit: "单位",
legend: "图例",
legendTip: "使用名称或表达式控制时间序列的名称。例如{{hostname}将替换为标签主机名的标签值。",
valueMappingTip: '使用{{value}}可以显示原值\n'+
'例如：total alive: {{value}}\n'+
'结果为：total alive: 100',
option: "操作",
alertParam:{
param:'参数',

3
nezha-fronted/src/components/common/language/en.js
View File

@@ -145,6 +145,9 @@ const en = {
legend:'Legend',
statistics:'Statistics',
legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
valueMappingTip: 'Use {{value}} to display the original value\n'+
'For example: Total Alive: {{value}}\n'+
'The result is: Total Alive: 100',
sync: 'Sync to assets',
last:'Last',
threshold:'Threshold',

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

@@ -329,7 +329,13 @@
</el-row>
<!--value mapping start-->
<div class="right-box-sub-title" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
<span>{{$t('dashboard.panel.chartForm.valMapping.name')}}</span>
<span>
{{$t('dashboard.panel.chartForm.valMapping.name')}}
<el-popover placement="top" width="275" trigger="hover">
<div style="white-space: pre-wrap;">{{$t('dashboard.panel.chartForm.valueMappingTip')}}</div>
<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
</el-popover>
</span>
<span class="float-right" @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'||editChart.type == 'table'"></div>
@@ -1628,7 +1634,7 @@
deep: true,
immediate: true,
handler(n) {
//console.log(n);
console.log(n,(n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table'));
if((n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table')){
n.param.valueMapping.mapping.forEach(item=>{
this.showPicker.push({bac:false,text:false})