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

fix:修改BUG

Browse Source 
1.metric选择下拉列表改为级联选择
2.图表tooltip日期格式化
3.无metric的内容，图表中legend及tooltip显示undefined
4.tooltip内容取2位小数
This commit is contained in:
hanyuxia
2020-01-19 10:07:34 +08:00
parent e4942c6593
commit 1c42b4c1df
8 changed files with 124 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -183,7 +183,10 @@ export default {
metric_name: '',
};
// 图表中每条线的名字,后半部分
let host = `${queryItem.metric.__name__}{`;//up,
let host = '';//up,
if(queryItem.metric.__name__){
host = `${queryItem.metric.__name__}{`;//up,
}
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
@@ -215,7 +218,7 @@ export default {
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm');
tableData.push({//表格数据
label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
metric: queryItem.metric.__name__,//metric列
metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
time: timeTmp,//采集时间
value: dpsItem[1],//数值
});

17
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -250,10 +250,15 @@ export default {
formatter:function(params){
let str = `<div style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'>`;
params.forEach((item, i) => {
if(i!==0){
str +=`<br/>`;
if(i===0){
let t_date = new Date(item.data[0]);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
}
str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span> ${item.seriesName}:${item.data[1]}`;
str +=`<br/>`;
let val = parseFloat(Number(item.data[1]).toFixed(2));
str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span> ${item.seriesName}:`;
str +=val;
});
str +=`</div>`;
return str;
@@ -690,7 +695,11 @@ export default {
metric_name: '',
};
// 图表中每条线的名字,后半部分
let host = `${queryItem.metric.__name__}{`;//up,
// let host = `${queryItem.metric.__name__}{`;//up,
let host = '';//up,
if(queryItem.metric.__name__){
host = `${queryItem.metric.__name__}{`;//up,
}
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]

10
nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
View File

@@ -123,8 +123,14 @@
const soleParam = Object.assign({}, params);
const elements = [];
// 图表中每条线的名字,后半部分
let host = `${queryItem.metric.__name__}`;//up,
let charTitle=`${queryItem.metric.__name__}`;//up,
//let host = `${queryItem.metric.__name__}`;//up,
//let charTitle=`${queryItem.metric.__name__}`;//up,
let host = '';//up,
let charTitle='';
if(queryItem.metric.__name__){
host = `${queryItem.metric.__name__}`;//up,
charTitle=`${queryItem.metric.__name__}`;//up,
}
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 判断是否有数据
if (queryItem.values.length > 0 && tagsArr.length > 0) {

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

@@ -127,6 +127,7 @@
<chart-metric ref="chartTag"
:pointer="index"
:metric-list="metricList"
:metricCascaderList="metricCascaderList"
:count-total="elements.length"
@on-delete-target="deleteTarget"
@sub-save-ok="subOk"
@@ -245,6 +246,7 @@
//productId: 0,//不需要这个参数，可以删除
panelId: 0,
metricList: [], // metric列表
metricCascaderList:[],//metric级联列表
deleteIndex: '', // 要删除的指标模块
subCount: 0, // subSave保存data到bus计数器
}
@@ -474,8 +476,40 @@
this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code === 200) {
this.metricList = response.data.list;
const cascaderMap = new Map();
this.metricList.forEach((item,index) => {
let arr = [];
let par = '';//父value
let metricTmp = item.metric;//子value
if(metricTmp){
arr = metricTmp.split('_');
par = arr[0];
}
const childOption = {
value: metricTmp,
label: metricTmp,
};
if(cascaderMap.has(par)){
cascaderMap.get(par).push(childOption);
}else {
let childArr = [];
childArr.push(childOption);
cascaderMap.set(par,childArr);
}
});
let metricCascaderArr = [];
cascaderMap.forEach(function(value,index){
const option = {
value: index,
label: index,
children:value,
};
metricCascaderArr.push(option);
});
this.metricCascaderList = metricCascaderArr;
}else {
this.metricList = [];
this.metricCascaderList = [];
}
})
},

9
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -102,10 +102,17 @@
<el-row v-if="tableShow == 1">
<el-col span="22" >
<el-form-item :label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<!--
<el-select ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric" @change="selectMetric">
<el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
:value="item.metric">{{item.metric}}</el-option>
</el-select>
-->
<el-cascader ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small"
v-model="elementInfo.metric"
:options="metricCascaderList"
:props="{ expandTrigger: 'hover' }"
@change="selectMetric"></el-cascader>
<span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
</el-form-item>
</el-col>
@@ -170,6 +177,7 @@ export default {
type: Array,
default: () => [],
},
metricCascaderList:[],
countTotal: {
type: Number,
default: 1,
@@ -252,6 +260,7 @@ export default {
// 选择metric
selectMetric() {
if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
this.elementInfo.metric = this.elementInfo.metric[1];
this.getSuggestTags(this.elementInfo.metric);
} else {
this.elementInfo.tagList = [];

9
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -102,10 +102,17 @@
<el-row v-if="tableShow == 1">
<el-col span="22" >
<el-form-item :label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<!--
<el-select ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric" @change="selectMetric">
<el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
:value="item.metric">{{item.metric}}</el-option>
</el-select>
-->
<el-cascader ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small"
v-model="elementInfo.metric"
:options="metricCascaderList"
:props="{ expandTrigger: 'hover' }"
@change="selectMetric"></el-cascader>
<span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
</el-form-item>
</el-col>
@@ -172,6 +179,7 @@ export default {
type: Array,
default: () => [],
},
metricCascaderList:[],
countTotal: {
type: Number,
default: 1,
@@ -254,6 +262,7 @@ export default {
// 选择metric
selectMetric() {
if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
this.elementInfo.metric = this.elementInfo.metric[1];
this.getSuggestTags(this.elementInfo.metric);
} else {
this.elementInfo.tagList = [];

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

@@ -283,8 +283,14 @@ export default {
metric_name: '',
};
// 图表中每条线的名字,后半部分
let host = `${queryItem.metric.__name__}`;//up,
let charName = `${queryItem.metric.__name__}`;
//let host = `${queryItem.metric.__name__}`;//up,
let host = '';//up,
let charName='';
if(queryItem.metric.__name__){
host = `${queryItem.metric.__name__}{`;//up,
charName = `${queryItem.metric.__name__}`;
}
//let charName = `${queryItem.metric.__name__}`;
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]

38
nezha-fronted/src/components/page/dashboard/metricSet.vue
View File

@@ -7,6 +7,7 @@
<el-row class="element-item" >
<chart-metric ref="chartTag"
:metric-list="metricList"
:metricCascaderList="metricCascaderList"
@on-add-target-success="getTarget"
@on-change-condition="getCondition"
></chart-metric>
@@ -116,6 +117,7 @@ export default {
//productId: 0,
panelId: 0,
metricList: [], // metric列表
metricCascaderList:[],//metric级联列表
isSave: false, // 是否要保存
saveDisabled: true, // 不可保存
createModal: false, // 创建看板panel
@@ -451,8 +453,40 @@ export default {
this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code === 200) {
this.metricList = response.data.list;
const cascaderMap = new Map();
this.metricList.forEach((item,index) => {
let arr = [];
let par = '';//父value
let metricTmp = item.metric;//子value
if(metricTmp){
arr = metricTmp.split('_');
par = arr[0];
}
const childOption = {
value: metricTmp,
label: metricTmp,
};
if(cascaderMap.has(par)){
cascaderMap.get(par).push(childOption);
}else {
let childArr = [];
childArr.push(childOption);
cascaderMap.set(par,childArr);
}
});
let metricCascaderArr = [];
cascaderMap.forEach(function(value,index){
const option = {
value: index,
label: index,
children:value,
};
metricCascaderArr.push(option);
});
this.metricCascaderList = metricCascaderArr;
}else {
this.metricList = [];
this.metricCascaderList = [];
}
})
},
@@ -471,15 +505,17 @@ export default {
document.body.removeChild(sensor);
return width;
},
/*
// 创建打开
createData(panelId) {
this.panelId = panelId;
this.elementTarget = {}; // 初始化清空参数
this.initInfo(); // 初始化图表信息
this.chartModal = true;
this.initOpen(); // 获取metric, productId数据
this.initOpen(); // 获取metric
this.elements = [1];
},
*/
/*
tagsToString(arr) {
let str = '';