diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index b37bdf51c..07f750ca2 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -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],//数值 }); diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 9ef91baee..1986a5cdb 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -250,10 +250,15 @@ export default { formatter:function(params){ let str = `
`; params.forEach((item, i) => { - if(i!==0){ - str +=`
`; - } - str +=` ${item.seriesName}:${item.data[1]}`; + 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 +=`
`; + let val = parseFloat(Number(item.data[1]).toFixed(2)); + str +=` ${item.seriesName}:`; + str +=val; }); str +=`
`; 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"]] ] diff --git a/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue b/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue index f2f4ce6b8..538ca35e0 100644 --- a/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue +++ b/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue @@ -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) { diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index 47e5f3a29..67ea5f2af 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -127,6 +127,7 @@ { 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 = []; } }) }, diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue index 06c001601..02f446bc0 100644 --- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue +++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue @@ -102,10 +102,17 @@ + + {{metricShowList.text}} @@ -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 = []; diff --git a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue index 2b5dcee94..ad83777a2 100644 --- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue +++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue @@ -102,10 +102,17 @@ + + {{metricShowList.text}} @@ -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 = []; diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue index dd8dcb002..721e50d86 100644 --- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue +++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue @@ -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"]] ] diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.vue b/nezha-fronted/src/components/page/dashboard/metricSet.vue index e48fa5628..8844e1328 100644 --- a/nezha-fronted/src/components/page/dashboard/metricSet.vue +++ b/nezha-fronted/src/components/page/dashboard/metricSet.vue @@ -7,6 +7,7 @@ @@ -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 = '';