diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue index 01417386f..14148f4ae 100644 --- a/nezha-fronted/src/components/charts/chartPreview.vue +++ b/nezha-fronted/src/components/charts/chartPreview.vue @@ -349,7 +349,7 @@ if (chartItem.type === 'table') {//表格 this.setTableData([]); } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === "endpointInfo") { - this.setData(chartItem, []); + this.setData(chartItem, [], []); }else if(chartItem.type ==='singleStat'){ this.serieSingleStat = ""; this.$refs.loadingPreview.endLoading(); diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index 01c323c57..77c89bd00 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -196,7 +196,7 @@ :ref="'promql-'+(index-1)" :id="promqlKeys[index-1]" :key="promqlKeys[index-1]" - :expression-list.sync="expressions" + :expression-list="expressions" :index="index-1" :styleType="2" :plugins="['metric-selector', 'metric-input', 'remove']" @@ -485,6 +485,14 @@ this.promqlKeys.splice(index, 1); this.elementIds.splice(index, 1); this.promqlCount--; + + this.$nextTick(() => { + this.expressions.forEach((ex, index) => { + if (ex) { + this.$refs[`promql-${index}`][0].metricChange(ex); + } + }); + }); } }, save() { @@ -1131,9 +1139,68 @@ if(this.chart.type == 'alertList'){ this.$refs.alertParamBox.saveParam('preview'); }else{ - this.$refs.chartTag.forEach((item, index) => {//循环指标列表 + /*this.$refs.chartTag.forEach((item, index) => {//循环指标列表 // 触发每个tag组件内部进行校验 item.saveTarget(index,'preview'); + });*/ + this.$refs.chartForm.validate((valid) => { + const params = { + // productId: this.productId, + //panelId: this.panelId, + title: this.chart.title,//this.chart + span: this.chart.span, + height: this.chart.height, + type: this.chart.type, + unit:this.chart.unit, + param:{ + + }, + sync: this.chart.sync + }; + if(this.chart.type === 'singleStat'){ + params.param.statistics=this.statistics; + } else { + delete params.param.statistics; + } + if(this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'){ + params.param.threshold=this.chart.param.threshold; + } else { + delete params.param.threshold; + } + //生成指标数组 + const elements = []; + this.expressions.forEach((expr, index) => { + elements.push({ + expression: expr, + type: 'expert', + legend: this.legends[index], + }); + }); + console.info(elements) + /*this.elementTarget.forEach((elem,index) => { + if(elem.type==='normal'){ + const metricStr = bus.tagsToString(elem.metric,elem.selectedTagList); + elements.push({ + //id:index+1, + //metric: elem.metric,//指标名称 + expression: metricStr,//指标对应Label及Value组成的表达式字符串 + type:elem.type,//指标类型 + legend:elem.legend,//配置的legend + }); + }else if(elem.type==='expert'){ + elements.push({ + //id:index+1, + //metric: elem.metric,//指标名称 + expression: elem.expression,//指标对应Label及Value组成的表达式字符串 + type:elem.type,//指标类型 + legend:elem.legend,//配置的legend + }); + } + });*/ + params.elements = elements; + if (valid) { + this.$refs.chartsPreview.show(params); + } }); } }else { @@ -1170,7 +1237,7 @@ //preview--end initElements() { if (!this.chart.elements || this.chart.elements.length == 0) { - this.chart.elements = [{expression: "", legend: "", type: "expert"}]; + this.chart.elements = [{expression: "", legend: "", type: "expert", id: ""}]; } this.chart.elements.forEach(element => { this.promqlKeys.push(getUUID()); diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue index 70d1e4224..6229cb8ca 100644 --- a/nezha-fronted/src/components/page/project/project.vue +++ b/nezha-fronted/src/components/page/project/project.vue @@ -421,10 +421,17 @@ } } }, - getProjectList:function(){ + getProjectList:function(reload){ this.$get('project',{pageSize:-1}).then(response=>{ if(response.code == 200){ this.projectList=response.data.list; + if (reload) { + if (this.projectList.length > 0) { + this.currentProject = this.projectList[0]; + } else { + this.currentProject = {}; + } + } } }) }, @@ -856,7 +863,7 @@ } }, projectListChange:function(n,o){ - this.getProjectList(); + this.getProjectList(true); }, currentProject(n, o) { // this.getModuleList();