fix:修改chart预览的时候last不生效的问题 以及type为table时的value值的颜色不是按照范围来的

This commit is contained in:
zhangyu
2020-12-07 11:08:18 +08:00
parent 1120bef05a
commit 59ae4e3efe
3 changed files with 15 additions and 2 deletions

View File

@@ -65,7 +65,7 @@
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'"> :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope"> <template slot-scope="scope">
<div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div> <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -397,6 +397,7 @@
mapping=mappings.find(t=>{return t.from <= value&& t.to >= value}); mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
} }
this.mapping=mapping; this.mapping=mapping;
item.mapping=mapping;
item.value = mapping?mapping.text.replace('{{value}}', item.value):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2); item.value = mapping?mapping.text.replace('{{value}}', item.value):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
} }
return item; return item;

View File

@@ -143,7 +143,7 @@
</el-table-column> </el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90"> <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
<template slot-scope="scope"> <template slot-scope="scope">
<div :style="{color:mapping&&mapping.color?mapping.color.text:'#000',background:mapping&&mapping.color?mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div> <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -368,6 +368,7 @@
// 获取一个图表具体数据 // 获取一个图表具体数据
getChartData() { getChartData() {
const chartItem = this.chart; const chartItem = this.chart;
console.log(chartItem);
if(chartItem.type === 'alertList'){ if(chartItem.type === 'alertList'){
this.getAlertListChartData(chartItem,null); this.getAlertListChartData(chartItem,null);
return; return;
@@ -401,6 +402,9 @@
const axiosArr = chartItem.elements.map((ele) => { const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele; const filterItem = ele;
let query = encodeURIComponent(filterItem.expression); let query = encodeURIComponent(filterItem.expression);
if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){
return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
}
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step); return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
}); });
// 一个图表的所有element单独获取数据 // 一个图表的所有element单独获取数据
@@ -1049,6 +1053,7 @@
mapping=mappings.find(t=>{return t.from <= value&& t.to >= value}); mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
} }
this.mapping=mapping; this.mapping=mapping;
item.mapping=mapping;
item.value = mapping?mapping.text.replace('{{value}}', item.value):this.unit.compute(value,null,2); item.value = mapping?mapping.text.replace('{{value}}', item.value):this.unit.compute(value,null,2);
} }
return item; return item;
@@ -1121,6 +1126,8 @@
// 查询数据,修改日期查询全屏数据 // 查询数据,修改日期查询全屏数据
getQueryChart(type) { getQueryChart(type) {
let axiosArr = []; let axiosArr = [];
const chartItem = this.chart;
console.log(chartItem);
this.$nextTick(() => { this.$nextTick(() => {
let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss'); let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss'); let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
@@ -1135,6 +1142,9 @@
axiosArr = this.chart.elements.map((ele) => { axiosArr = this.chart.elements.map((ele) => {
const filterItem = ele; const filterItem = ele;
let query = encodeURIComponent(filterItem.expression); let query = encodeURIComponent(filterItem.expression);
if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){
return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
}
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step); return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
}); });
// 一个图表 // 一个图表

View File

@@ -1432,6 +1432,7 @@
} }
params.param.nullType=this.editChart.param.nullType; params.param.nullType=this.editChart.param.nullType;
params.param.legendValue=this.editChart.param.legendValue; params.param.legendValue=this.editChart.param.legendValue;
params.param.last=this.editChart.param.last;
} else { } else {
delete params.param.threshold; delete params.param.threshold;
delete params.param.nullType; delete params.param.nullType;
@@ -1446,6 +1447,7 @@
}); });
}); });
params.elements = elements; params.elements = elements;
console.log(params,'params');
if (valid) { if (valid) {
this.$refs.chartsPreview.show(params); this.$refs.chartsPreview.show(params);
} }