CN-103 曲线无数据时应显示no data

src/components/charts/ChartError.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-popover
+          v-if="isError"
+          placement="top-start"
+          trigger="hover"
+          popper-class="chart-error-popper"
+          :close-delay=10
+          offset="10"
+          :width="-1"
+  > <!-- :width="-1" 是为了让min-width及max-width生效，让width失效-->
+    <div >{{errorInfo}}</div>
+    <template #reference>
+    <span  class="chart-info-corner chart-info-corner--error">
+                  <i class="cn-chart-icon-warning fa "></i>
+                  <span class="chart-info-corner-inner"></span>
+              </span>
+    </template>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: 'ChartError',
+  props: {
+    isError: Boolean,
+    errorInfo:String
+  }
+}
+</script>

src/components/charts/ChartMap.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="cn-chart cn-chart__map">
-    <div class="cn-chart__header">
+    <div class="cn-chart__header chart-header-position" >
-      <div class="header__title">
+      <slot name="chartErrorInfo"></slot>
+      <div class="header__title chart-title-width" >
         <slot name="title"></slot>
       </div>
       <div class="header__operations">
@@ -23,6 +24,12 @@ export default {
   name: 'ChartMap',
   props: {
     loading: Boolean
+  },
+  data () {
+    return {
+      errorContent: '出错了。。。',
+      isError: true,
+    }
   }
 }
 </script>

src/components/charts/ChartSingleValue.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="cn-chart cn-chart__single-value" :class="singleValueClass(type)">
+  <div class="cn-chart cn-chart__single-value chart-header-position" :class="singleValueClass(type)" >
+    <slot name="chartErrorInfo"></slot>
     <div class="single-value-icon__box" >
       <div class="single-value__icon"><i :class="icon"></i></div>
     </div>

src/components/charts/ChartTable.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="cn-chart cn-chart__table">
-    <div class="cn-chart__header">
+    <div class="cn-chart__header chart-header-position" >
+      <slot name="chartErrorInfo"></slot>
       <div class="header__title">
         <slot name="title"></slot>
       </div>

src/components/charts/EchartsFrame.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="cn-chart cn-chart__echarts" :class="{'cn-chart__echarts--statistics': isEchartsWithStatistics}">
-    <div class="cn-chart__header" v-if="layout.indexOf(layoutConstant.HEADER) > -1">
+    <div class="cn-chart__header chart-header-position" v-if="layout.indexOf(layoutConstant.HEADER) > -1" >
+      <slot name="chartErrorInfo"></slot>
       <div class="header__title">
         <slot name="title"></slot>
       </div>

src/components/charts/panel.scss

@@ -14,6 +14,41 @@
     font-size: 20px;
   }
 }
+
+.chart-error-popper{
+  word-wrap:break-word;
+  word-break:break-word;
+  border: 1px solid #e02f44;
+  min-width: 180px !important;
+  max-width: 280px !important;
+}
+
+.chart-title-width{
+  width:100%;
+}
+.chart-header-position{
+  position:relative;
+}
+
+.chart-error-popper.el-popper.is-light {
+  background: #e02f44;
+  border: 1px solid #e02f44;
+}
+.chart-error-popper.el-popover.el-popper {
+  color:white;
+}
+
+.chart-error-popper.el-popper.is-light[data-popper-placement^='top'] .el-popper__arrow::before {
+  border-color: #e02f44;
+  background: #e02f44;
+  bottom:0px;
+}
+
+.chart-error-popper.el-popper.is-light[data-popper-placement^='bottom'] .el-popper__arrow::before {
+  border-color: #e02f44;
+  background: #e02f44;
+}
+
 .cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane {
   display: grid;
   grid-template-columns: repeat(30, 1fr);
@@ -46,6 +81,7 @@
       width: 100%;
     }
   }
+
   &>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map {
     display: flex;
     flex-direction: column;
@@ -59,6 +95,46 @@
       color: #333333;
       font-weight: bold;
 
+      .chart-info-corner {
+        color: #767980;
+        cursor: pointer;
+        position: absolute;
+        display: none;
+        left: 0;
+        width: 28px;
+        height: 28px;
+        z-index: 2;
+        top: 0;
+      }
+      .chart-info-corner--error {
+        display: block;
+        color: #fff;
+      }
+      .chart-info-corner--error .chart-info-corner-inner {
+        border-left: 28px solid #e02f44;
+        border-right: none;
+        border-bottom: 28px solid rgba(0,0,0,0);
+      }
+      .chart-info-corner-inner {
+        width: 0;
+        height: 0;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
+      .chart-info-corner .fa {
+        position: relative;
+        top: -2px;
+        left: 6px;
+        font-size: 65%;
+        z-index: 3;
+        font-style: normal;
+      }
+      .cn-chart-icon-warning:before {
+        content: "!";
+        font-weight:normal;
+      }
+
       .header__operations {
         .cn-icon-more-light {
           color: #999;
@@ -73,6 +149,46 @@
     display: flex;
     align-items: center;
 
+
+    .chart-info-corner {
+      color: #767980;
+      cursor: pointer;
+      position: absolute;
+      display: none;
+      left: 0;
+      width: 28px;
+      height: 28px;
+      z-index: 2;
+      top: 0;
+    }
+    .chart-info-corner--error {
+      display: block;
+      color: #fff;
+    }
+    .chart-info-corner--error .chart-info-corner-inner {
+      border-left: 28px solid #e02f44;
+      border-right: none;
+      border-bottom: 28px solid rgba(0,0,0,0);
+    }
+    .chart-info-corner-inner {
+      width: 0;
+      height: 0;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+    .chart-info-corner .fa {
+      position: relative;
+      top: 3px;
+      left: 6px;
+      font-size: 65%;
+      z-index: 3;
+      font-style: normal;
+    }
+    .cn-chart-icon-warning:before {
+      content: "!";
+    }
+
     .single-value-icon__box {
       display: flex;
       align-items: center;

src/views/charts/Chart.vue

@@ -30,6 +30,13 @@
       :style="computePosition"
       :loading="loading"
   >
+    <template #chartErrorInfo>
+          <chart-error
+                  :isError="isError"
+                  :errorInfo="errorInfo"
+          >
+          </chart-error>
+    </template>
     <template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
     <template #operations>
 <!--      <i class="cn-icon cn-icon-more-light"></i>-->
@@ -48,6 +55,13 @@
       :loading="loading"
       :no-data="noData"
   >
+      <template #chartErrorInfo>
+          <chart-error
+                  :isError="isError"
+                  :errorInfo="errorInfo"
+          >
+          </chart-error>
+      </template>
     <template #title v-if="layout.indexOf(layoutConstant.HEADER) > -1">
       {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
     </template>
@@ -87,6 +101,13 @@
       :icon="singleValue.icon"
       v-loading="loading"
   >
+      <template #chartErrorInfo>
+          <chart-error
+                  :isError="isError"
+                  :errorInfo="errorInfo"
+          >
+          </chart-error>
+      </template>
     <template #title><span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span></template>
     <template #data>
       <span>{{handleSingleValue[0] ? handleSingleValue[0] : '-'}}</span>
@@ -105,6 +126,13 @@
       :loading="loading"
       :no-data="noData"
   >
+      <template #chartErrorInfo>
+          <chart-error
+                  :isError="isError"
+                  :errorInfo="errorInfo"
+          >
+          </chart-error>
+      </template>
     <template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
     <template #operations>
 <!--      <div class="header__operation header__operation&#45;&#45;table">
@@ -180,6 +208,7 @@ import {
   isTabs,
   getChartColor
 } from '@/components/charts/chart-options'
+import ChartError from '@/components/charts/ChartError'
 import EchartsFrame from '@/components/charts/EchartsFrame'
 import SingleValue from '@/components/charts/ChartSingleValue'
 import ChartTable from '@/components/charts/ChartTable'
@@ -210,7 +239,8 @@ export default {
     ChartTable,
     PieTable,
     StatisticsLegend,
-    ChartMap
+    ChartMap,
+    ChartError
   },
   data () {
     return {
@@ -235,7 +265,10 @@ export default {
       chartOption: null,
       loading: true,
       noData: false, // 查询结果为空
-      throttle: null // 节流器
+      throttle: null, // 节流器
+      isError:false,//接口响应是否报错
+      errorInfo:"",//接口具体错误信息
+
     }
   },
   methods: {
@@ -275,6 +308,9 @@ export default {
             get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
               if (response.code === 200) {
                 this.singleValue.value = response.data.result
+              }else {
+                  this.isError = true;
+                  this.errorInfo = response.message;
               }
               if (this.isSingleValueWithEcharts) { // 带曲线的单值图
                 const dom = document.getElementById(`chart${this.chartInfo.id}`)
@@ -294,6 +330,9 @@ export default {
                         }
                       }
                     })
+                  }else {
+                      this.isError = true;
+                      this.errorInfo = response.message;
                   }
                   this.myChart.setOption(this.chartOption)
                   this.$nextTick(() => {
@@ -477,6 +516,9 @@ export default {
             polygonTemplate.nonScalingStroke = true
             polygonTemplate.strokeWidth = 0.5
           }
+        }else {
+            this.isError = true;
+            this.errorInfo = response.message;
         }
       }).finally(() => {
         setTimeout(() => { this.loading = false }, 250)
@@ -583,6 +625,9 @@ export default {
             }
             this.chartOption.grid.left = 75
           }
+        }else {
+            this.isError = true;
+            this.errorInfo = response.message;
         }
         this.myChart.setOption(this.chartOption)
         this.$nextTick(() => {
@@ -697,6 +742,9 @@ export default {
               }
             }
           })
+        }else {
+            this.isError = true;
+            this.errorInfo = response.message;
         }
         this.myChart.setOption(this.chartOption)
         this.$nextTick(() => {
@@ -752,9 +800,15 @@ export default {
             get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
               if (response2.code === 200) {
                 this.pieTableData = response2.data.result
+              }else {
+                  this.isError = true;
+                  this.errorInfo = response.message;
               }
             })
           }
+        }else {
+            this.isError = true;
+            this.errorInfo = response.message;
         }
       }).finally(() => {
         setTimeout(() => { this.loading = false }, 250)
@@ -823,6 +877,9 @@ export default {
           this.table.tableData = response.data.result
           this.table.tableColumns = this.getTableTitle(response.data.result)
           this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
+        }else {
+            this.isError = true;
+            this.errorInfo = response.message;
         }
       }).finally(() => {
         setTimeout(() => { this.loading = false }, 250)