diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index baa78c803..f0fafe5be 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -584,6 +584,7 @@ export default { visible: true, threshold: null, }; + let errorMsg = ""; res.forEach((response, innerPos) => { if (response.status === 'success') { if (response.data.result) { @@ -683,33 +684,36 @@ export default { } }else{ if(response.msg){ - this.$message.error(response.msg); + //this.$message.error(response.msg); + errorMsg = response.msg; }else if(response.error){ - this.$message.error(response.error); + //this.$message.error(response.error); + errorMsg = response.error; }else { - this.$message.error(response); + //this.$message.error(response); + errorMsg = response; } } }); if(this.$refs.editChart&&this.$refs.editChart[index]) { if (chartItem.type === 'table') {//表格 - if (filterType === 'showFullScreen') {//table的全屏查询 + if (filterType === 'showFullScreen') {//全屏查询 this.$refs.editChart[index].setData(chartItem, tableData, - this.filter.panelId, this.filter, filterType); + this.filter.panelId, this.filter, filterType,errorMsg); } else { this.$refs.editChart[index].setData(chartItem, tableData, - this.filter.panelId, this.filter); + this.filter.panelId, this.filter,'',errorMsg); } } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) { if (series.length && chartItem.type === 4) {//曲线汇总 //series.push(sumData);//后续需要 } - if (filterType === 'showFullScreen') {//table的全屏查询 + if (filterType === 'showFullScreen') {//全屏查询 this.$refs.editChart[index].setData(chartItem, series, - this.filter.panelId, this.filter, legend, filterType); + this.filter.panelId, this.filter, legend, filterType,errorMsg); } else { this.$refs.editChart[index].setData(chartItem, series, - this.filter.panelId, this.filter, legend); + this.filter.panelId, this.filter, legend,'',errorMsg); } } } diff --git a/nezha-fronted/src/components/charts/chart-table.scss b/nezha-fronted/src/components/charts/chart-table.scss index f1a726462..f7411ad6b 100644 --- a/nezha-fronted/src/components/charts/chart-table.scss +++ b/nezha-fronted/src/components/charts/chart-table.scss @@ -78,6 +78,46 @@ text-align: center; width: 100%; line-height: 28px; + .panel-info-corner { + color: #767980; + cursor: pointer; + position: absolute; + display: none; + left: 0; + width: 28px; + height: 28px; + z-index: 2; + top: 0; + } + .panel-info-corner--error { + display: block; + color: #fff; + } + .panel-info-corner .fa { + position: relative; + top: -6px; + left: -6px; + font-size: 75%; + z-index: 3; + } + .fa { + display: inline-block; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + } + + .panel-info-corner--error .panel-info-corner-inner { + border-left: 28px solid #e02f44; + border-right: none; + border-bottom: 28px solid rgba(0,0,0,0); + } + .panel-info-corner-inner { + width: 0; + height: 0; + position: absolute; + left: 0; + bottom: 0; + } .nz-chart-top{ width:100%; } diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue index be93ef74d..8f049a68a 100644 --- a/nezha-fronted/src/components/charts/chart-table.vue +++ b/nezha-fronted/src/components/charts/chart-table.vue @@ -18,7 +18,18 @@ -->
- + +
{{errorContent}}
+ + + + +
@@ -126,6 +137,8 @@ export default { return { data: {}, // 该图表信息,chartItem unit:{}, + isError:false, + errorContent:'', pageSizes:[50,100,200], pageObj: { pageNo: 1, @@ -563,7 +576,14 @@ export default { //this.endLoading('screen'); }, // 设置数据, filter区分 - setData(chartItem, seriesItem, panelId, filter,area) { + setData(chartItem, seriesItem, panelId, filter,area,errorMsg) { + if(errorMsg && errorMsg!==''){ + this.isError = true; + this.errorContent = errorMsg; + }else { + this.isError = false; + this.errorContent = ''; + } if(area==='showFullScreen'){//全屏按时间查询 this.data = chartItem; this.unit = chartDataFormat.getUnit(this.data.unit); diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss index 8b23569b0..634256f59 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.scss +++ b/nezha-fronted/src/components/charts/line-chart-block.scss @@ -74,6 +74,17 @@ } } } +.chart-error-popper[x-placement^=top] .popper__arrow::after { + border-top-color: #e02f44; +} +.chart-error-popper{ + background-color:#e02f44; + color:#FFF; + word-wrap:break-word; + word-break:break-word; + max-width:280px; + border: 1px solid #e02f44; +} .line-chart-block { height: 100%; //min-height: 0px; @@ -152,9 +163,7 @@ left: 0; bottom: 0; } - .chart-error-popper{ - background-color:#e02f44; - } + .nz-chart-top{ width:100%; } diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 762d4cf14..3809fcd3f 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -27,10 +27,10 @@ + popper-class="chart-error-popper"> +
{{errorContent}}
@@ -170,6 +170,7 @@ seriesItemScreen:[], images: '', isError:false, + errorContent:'', toolbox: false, items: { metric_name: [], // 每条数据列名称 @@ -1165,8 +1166,15 @@ } }, // 设置数据, filter区分 - setData(chartItem, seriesItem, panelId, filter,legend,area) { + setData(chartItem, seriesItem, panelId, filter,legend,area,errorMsg) { this.setColor(legend.length); + if(errorMsg && errorMsg!==''){ + this.isError = true; + this.errorContent = errorMsg; + }else { + this.isError = false; + this.errorContent = ''; + } if(area==='showFullScreen'){//全屏按时间查询 /* this.legend = legend;