feat:新功能

1 panel列表中图表错误信息参考grafana实现（只实现了列表部分，全屏和预览未实现）

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);
                   }
                 }
               }

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%;
     }

nezha-fronted/src/components/charts/chart-table.vue

@@ -18,7 +18,18 @@
         </div>
         -->
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-
+          <el-popover
+            v-if="isError"
+            close-delay="10"
+            placement="top-start"
+            trigger="hover"
+            popper-class="chart-error-popper">
+            <div >{{errorContent}}</div>
+            <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
+                <i class="nz-icon nz-icon-warning fa"></i>
+                <span class="panel-info-corner-inner"></span>
+            </span>
+          </el-popover>
           <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
@@ -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);

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%;
     }

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

@@ -27,10 +27,10 @@
       <el-popover
         v-if="isError"
         placement="top-start"
-        width="200"
-        popper-class="chart-error-popper"
+        close-delay="10"
         trigger="hover"
-        content="。。">
+        popper-class="chart-error-popper">
+        <div >{{errorContent}}</div>
         <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
           <i class="nz-icon nz-icon-warning fa"></i>
           <span class="panel-info-corner-inner"></span>
@@ -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;