diff --git a/nezha-fronted/src/components/charts/chart-alert-rule-info.vue b/nezha-fronted/src/components/charts/chart-alert-rule-info.vue index 82e63b15a..8dfd0d918 100644 --- a/nezha-fronted/src/components/charts/chart-alert-rule-info.vue +++ b/nezha-fronted/src/components/charts/chart-alert-rule-info.vue @@ -28,12 +28,72 @@
-
-
-  {{$t('asset.createAssetTab.basicTitle')}} +
+
+ +  {{$t('project.project.project')}}
-
-
+
+
+
+ {{item.name}} +
{{item.name}}
+
+ {{item.nums}} +
+
+
+
+
+
+ +  {{$t('project.module.module')}} +
+
+
+
+ {{item.name}} +
{{item.name}}
+
+ {{item.nums}} +
+
+
+
+
+
+ +  {{$t('asset.asset')}} +
+
+
+
+ {{item.name}} +
{{item.name}}
+
+ {{item.nums}} +
+
+
+
+
+
+ +  {{$t('project.endpoint.endpoint')}} +
+
+
+
+ {{item.name}} +
{{item.name}}
+
+ {{item.nums}} +
+
+
+
+ +
@@ -81,13 +139,13 @@ type: Number, default: 0, }, - detail: Array }, data() { return { ready: false, data: {}, // 该图表信息,chartItem unit:{}, + detail: {}, isError:false, errorContent:'', loading:Object, @@ -100,8 +158,7 @@ end_time: '', from: '' }, - hideBasic:false, - hideFeature:false, + unfold: ["project"], //展开的列表 project、module、asset、endpoint firstShow: false, // 默认不显示操作按钮, caretShow:false, dragTitleShow:false, @@ -153,10 +210,20 @@ return labels; }, hideElement:function(type){ - if(type == 'basic'){ - this.hideBasic=!this.hideBasic; - }else{ - this.hideFeature=!this.hideFeature + let dom = this.$refs[type]; + if (this.unfold.indexOf(type) > -1) { + this.unfold.splice(this.unfold.indexOf(type), 1); + } else { + this.unfold.push(type); + } + if (dom.classList.contains("unfold")) { + dom.classList.remove("unfold"); + dom.classList.add("fold"); + } else if (dom.classList.contains("fold")) { + dom.classList.remove("fold"); + dom.classList.add("unfold"); + } else if (!dom.classList.contains("unfold") && !dom.classList.contains("fold")) { + dom.classList.add("unfold"); } setTimeout(()=>{ this.$refs.scrollbar.update(); @@ -209,17 +276,18 @@ }, // 设置数据, filter区分 - setData(chartItem) { + setData(chartItem, data) { this.resize(chartItem); this.divFirstShow = true; this.firstShow = true; // 展示操作按键 this.data = chartItem; + this.detail = data; this.$nextTick(()=>{ this.$refs.scrollbar.update(); - }) + }); this.endLoading(); }, }, diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index c43752c6e..99eb44b52 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -542,7 +542,47 @@ const param = { panelId: params.panelId, query: params.query, + from: params.from }; + //alert-rule单独处理 + if (param.from == "alertRule") { + this.dataList = []; + this.dataList.push({ + id: -10, + panelId: 0, + title: this.$t("dashboard.panel.chartForm.statistics"), + span: 4, + height: 350, + type: "alertRuleInfo", + prev: 0, + next: -9, + buildIn: 1 + }); + this.dataList.push({ + id: -9, + panelId: 0, + title: this.$t("alert.config.chart.alertNumTrend"), + span: 4, + height: 350, + type: "line", + prev: -10, + next: -1, + buildIn: 1, + elements: [{ + id: '', + expression: `nz_alert_nums{id="${this.alertRuleDetail[0].value}"}`, + type: '' + }] + }); + this.$nextTick(() => { + this.dataList.forEach((item,index) => { + this.setChartSize(item, index);//设置该图表宽度 + let chartBox = document.getElementById('chart-' + item.id); + this.handleElementInViewport(chartBox, 0, item, index); + }); + }); + return; + } if (!param.query) delete param.query; //根据panelId获得panel下的所有图表 this.$get('panel/'+ params.panelId+'/charts').then(response => { @@ -680,6 +720,11 @@ this.getAlertListChartData(chartItem,filterType); return; } + if(chartItem.type === 'alertRuleInfo'){ + this.getAlertRuleChartData(chartItem); + return; + } + if (this.isModel) { this.modelStaticData(chartInfo, filterType); } else { @@ -1251,6 +1296,14 @@ getAlertListChartData:function(chartInfo,filterType){ this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType); }, + getAlertRuleChartData(chartInfo) { + this.$get("alert/rule/stat?id=" + this.additionalInfo.id).then(response => { + if (response.code === 200) { + this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, response.data); + } + }); + }, + // 设置图表的尺寸 setChartSize(item, index) { this.$nextTick(() => { diff --git a/nezha-fronted/src/components/charts/chart-project-info.vue b/nezha-fronted/src/components/charts/chart-project-info.vue index ab1c1dac9..c6e1854e0 100644 --- a/nezha-fronted/src/components/charts/chart-project-info.vue +++ b/nezha-fronted/src/components/charts/chart-project-info.vue @@ -248,6 +248,11 @@ this.hideBasic = !this.hideBasic; }else{ let dom = this.$refs['module' + type][0]; + if (this.showModuleIds.indexOf(type) > -1) { + this.showModuleIds.splice(this.showModuleIds.indexOf(type), 1); + } else { + this.showModuleIds.push(type); + } if (dom.classList.contains("unfold")) { dom.classList.remove("unfold"); dom.classList.add("fold"); diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue index 9639028a3..c18ae4b29 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue @@ -22,27 +22,6 @@
-
-