fix: npm模块下文件请求做error处理

2022-11-23 17:20:37 +08:00
parent 16a255be50
commit 7d9829ae27
14 changed files with 328 additions and 136 deletions
--- a/src/assets/css/components/components/common/chart-error.scss
+++ b/src/assets/css/components/components/common/chart-error.scss
@@ -1,15 +1,15 @@
 .error-component {
  position: absolute;
-  width: 100%;
-  height: 100%;
+  //width: 100%;
+  //height: 100%;
  left: 0;
  top: 0;
 }
 .error-block {
  display: inline-block;
-  width: auto;
-  max-width: calc(100% - 24px);
-  max-height: calc(100% - 24px);
+  //width: 100%;
+  //max-width: calc(100% - 24px);
+  //max-height: calc(100% - 24px);
  //line-height: 24px;
  background: #FFE7E6;
  font-size: 14px;
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -179,3 +179,6 @@
    color: $grey;
  }
 }
+.npm-app-border {
+  border: 1px solid #E2E5EC;
+}
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -110,4 +110,10 @@
  .el-table--group::after,.el-table--border::after,.el-table::before {
    height: 0px;
  }
+  .table-error {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 68px;
+  }
 }
--- a/src/assets/css/components/views/charts2/npmEventsByType.scss
+++ b/src/assets/css/components/views/charts2/npmEventsByType.scss
@@ -3,6 +3,7 @@
  width: 100%;
  height: 100%;
  .npm-event-title {
+    display: flex;
    font-size: 14px;
    color: #353636;
    font-weight: 600;
--- a/src/assets/css/components/views/charts2/npmLine.scss
+++ b/src/assets/css/components/views/charts2/npmLine.scss
@@ -4,6 +4,7 @@
  width: 100%;
  border: 1px solid #f0f0f0;
  .npm-line-title {
+    display: flex;
    font-size: 14px;
    color: #353636;
    font-weight: 500;
@@ -14,6 +15,7 @@
    margin: 20px 20px 0 20px;
    justify-content: space-between;
    .npm-line-header-title {
+      display: flex;
      font-size: 14px;
      color: #353636;
      font-weight: 500;
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
@@ -1,8 +1,13 @@
 <template>
 <div class="ddos-detection">
   <chart-no-data v-if="isNoData"></chart-no-data>
-   <div class="ddos-detection-title"><i class="cn-icon cn-icon-a-DDosDetection"></i>{{$t('network.ddosDetection')}}</div>
-   <div class="ddos-detection-value" v-if="!isNoData">
+   <chart-error info v-if="showError" :content="errorMsg" />
+
+   <div class="ddos-detection-title">
+     <i class="cn-icon cn-icon-a-DDosDetection"></i>
+     {{$t('network.ddosDetection')}}
+   </div>
+   <div class="ddos-detection-value" v-if="!isNoData && !showError">
     <div class="ddos-detection-type">
       <div class="ddos-detection-type-value">
         <div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
@@ -28,21 +33,25 @@ import { get } from '@/utils/http'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
+import ChartError from '@/components/common/Error'
 export default {
  name: 'NetworkOverviewDdosDetection',
  components: {
+    ChartError,
    ChartNoData
  },
  mixins: [chartMixin],
  data () {
    return {
      ddosData: {},
-      isNoData: false
+      isNoData: false,
+      showError: false,
+      errorMsg: ''
    }
  },
  watch: {
    timeFilter: {
-      handler (n) {
+      handler () {
        this.ddosDetectDataRequests()
      }
    }
@@ -56,13 +65,22 @@ export default {
      this.toggleLoading(true)
      get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {
        if (res.code === 200) {
+          this.showError = false
          if (res.data.result.length === 0) {
            this.isNoData = true
          } else {
            this.ddosData = res.data.result[0]
            this.isNoData = false
          }
+        } else {
+          this.isNoData = false
+          this.showError = true
+          this.errorMsg = res.message
        }
+      }).catch((e) => {
+        this.isNoData = false
+        this.showError = true
+        this.errorMsg = e.message
      }).finally(() => {
        this.toggleLoading(false)
      })
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="npm-app">
-    <div class="npm-app-left">
+  <div class="npm-app" :class="showError?'npm-app-border':''">
+    <chart-error v-if="showError" :content="errorMsg" />
+
+    <div class="npm-app-left" v-if="!showError">
      <div class="npm-app-letter" :class="{'npm-app-letter-no-data': isNoData}">
        <div v-for="(letter, index) in colorPatchData" :key="index">
          {{letter.letter}}
@@ -21,7 +23,7 @@
        class="app-table"
        height="100%"
        empty-text=" "
-    >
+        v-if="!showError">
      <template v-for="(item, index) in customTableTitles" :key="index">
        <el-table-column class="data-column">
          <template #header>
@@ -137,13 +139,13 @@ import { get } from '@/utils/http'
 import {
  getChainRatio,
  computeScore,
-  changeCurTab,
  urlParamsHandler,
  overwriteUrl,
  getUserDrilldownTableConfig
 } from '@/utils/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import ChartError from '@/components/common/Error'
 export default {
  name: 'NpmAppCategoryScore',
  data () {
@@ -169,16 +171,19 @@ export default {
      ],
      isNoData: false,
      curTabState: curTabState,
-      urlChangeParams: {}
+      urlChangeParams: {},
+      showError: false,
+      errorMsg: ''
    }
  },
  components: {
+    ChartError,
    ChartNoData
  },
  mixins: [chartMixin],
  watch: {
    timeFilter: {
-      handler (n) {
+      handler () {
        this.init()
      }
    }
@@ -194,6 +199,9 @@ export default {
      const lastCycleTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 1 })
      this.toggleLoading(true)
      Promise.all([currentTrafficRequest, lastCycleTrafficRequest]).then(res => {
+        if (res[0].code === 200 && res[1].code === 200) {
+          this.showError = false
+          this.errorMsg = ''
          const prevData = res[1].data.result
          const data = res[0].data.result
          if (data && data.length > 0) {
@@ -224,12 +232,25 @@ export default {
            const packetRetransRequest = get(api.npm.overview.appPacketRetransPercent, params)
            Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res => {
              const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
+              let msg = ''
+
              res.forEach((r, i) => {
                if (r.code === 200) {
                  tableData.forEach(t => {
                    const find = r.data.result.find(d => d.appSubcategory === t.appSubcategory)
                    t[keyPre[i] + 'Score'] = find
                  })
+                } else {
+                  this.showError = true
+                  // todo 此处目前返回字段为msg，后续字段会修改为message
+                  msg = msg + ',' + r.message
+                  if (msg.indexOf(',') === 0) {
+                    msg = msg.substring(1, msg.length)
+                  }
+                  if (msg.lastIndexOf(',') === msg.length - 1) {
+                    msg = msg.substring(0, msg.length - 1)
+                  }
+                  this.errorMsg = msg
                }
              })
              tableData.forEach(t => {
@@ -251,9 +272,25 @@ export default {
            this.isNoData = true
            this.toggleLoading(false)
          }
+        } else {
+          this.toggleLoading(false)
+          this.showError = true
+          this.errorMsg = ''
+          let msg = res[0].message + ', ' + res[1].message
+          if (msg.indexOf(',') === 0) {
+            msg = msg.substring(1, msg.length)
+          }
+          if (msg.lastIndexOf(',') === msg.length - 1) {
+            msg = msg.substring(0, msg.length - 1)
+          }
+          this.errorMsg = msg
+        }
      }).catch(e => {
        console.error(e)
        this.toggleLoading(false)
+        this.showError = true
+        this.errorMsg = ''
+        this.errorMsg = e.message
      })
    },
    getUrlParam (param, defaultValue, isNumber) {
--- a/src/views/charts2/charts/npm/NpmAppEventTable.vue
+++ b/src/views/charts2/charts/npm/NpmAppEventTable.vue
@@ -1,7 +1,8 @@
 <template>
  <div class="npm-app-event">
    <div class="metric-select">
-      <el-select v-model="metric"
+      <el-select
+          v-model="metric"
          class="option__select select-column"
          popper-class="option-popper common-select"
          :popper-append-to-body="false"
@@ -76,20 +77,23 @@
        </div>
      </template>
    </el-table>
+
+    <div class="table-error">
+      <chart-error></chart-error>
+    </div>
  </div>
 </template>

 <script>
-import { unitTypes, npmCategoryInfoMapping } from '@/utils/constants'
-import unitConvert from '@/utils/unit-convert'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
-import { getChainRatio, computeScore } from '@/utils/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
+import ChartError from '@/components/common/Error'

 export default {
  name: 'NpmAppEventTable',
+  components: { ChartError },
  data () {
    return {
      metric: 'appLabel',
@@ -115,18 +119,32 @@ export default {
      dotList: ['grey-dot', 'grey-dot', 'grey-dot', 'grey-dot', 'grey-dot'],
      tableData: [],
      customTableTitles: [
-        { label: 'network.applications', prop: 'serverIp' },
-        { label: 'network.severity', prop: 'eventSeverity' },
-        { label: 'network.eventType', prop: 'eventType' },
-        { label: 'network.eventCount', prop: 'count' }
+        {
+          label: 'network.applications',
+          prop: 'serverIp'
+        },
+        {
+          label: 'network.severity',
+          prop: 'eventSeverity'
+        },
+        {
+          label: 'network.eventType',
+          prop: 'eventType'
+        },
+        {
+          label: 'network.eventCount',
+          prop: 'count'
+        }
      ],
-      isNoData: false
+      isNoData: false,
+      showError: false,
+      errorMsg: ''
    }
  },
  mixins: [chartMixin],
  watch: {
    timeFilter: {
-      handler (n) {
+      handler () {
        this.init()
      }
    }
@@ -142,20 +160,28 @@ export default {
      this.customTableTitles[0].label = this.typeLabelMap[this.metric]
      this.tableData = []
      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
+        startTime: true,
+        // startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
        limit: 10,
        type: this.metric
      }
      get(api.npm.events.dimensionEvents, params).then(res => {
        if (res.code === 200) {
+          this.showError = false
          if (!res.data.result || res.data.result.length === 0) {
            this.isNoData = true
          }
          this.tableData = res.data.result
        } else {
-          this.isNoData = true
+          this.isNoData = false
+          this.showError = true
+          this.errorMsg = res.message
        }
+      }).catch((e) => {
+        this.isNoData = false
+        this.showError = true
+        this.errorMsg = e.message
      }).finally(() => {
        this.toggleLoading(false)
      })
@@ -172,9 +198,7 @@ export default {
        return '15%'
      }
    }
-
  },
-  computed: {
-  }
+  computed: {}
 }
 </script>
--- a/src/views/charts2/charts/npm/NpmEventsByType.vue
+++ b/src/views/charts2/charts/npm/NpmEventsByType.vue
@@ -1,6 +1,9 @@
 <template>
  <div class="npm-event">
-    <div class="npm-event-title">{{$t('network.eventByType')}}</div>
+    <div class="npm-event-title">
+      {{$t('network.eventByType')}}
+      <chart-error tooltip v-if="showError" :content="errorMsg"></chart-error>
+    </div>
    <div class="npm-event-pie">
      <chart-no-data v-if="isNoData"></chart-no-data>
      <div class="npm-event-pies" v-else>
@@ -35,6 +38,7 @@ import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
+import ChartError from '@/components/common/Error'

 export default {
  name: 'NpmEventsByType',
@@ -42,6 +46,7 @@ export default {
    type: String
  },
  components: {
+    ChartError,
    ChartNoData
  },
  mixins: [chartMixin],
@@ -54,7 +59,9 @@ export default {
    return {
      chartData: [],
      timer: null,
-      isNoData: false
+      isNoData: false,
+      showError: false,
+      errorMsg: ''
    }
  },
  watch: {
@@ -104,6 +111,7 @@ export default {
      this.toggleLoading(true)
      get(api.npm.events.recentEvents, params).then(res => {
        if (res.code === 200) {
+          this.showError = false
          this.isNoData = res.data.result.length === 0
          const arrData = []
          res.data.result.forEach(t => {
@@ -121,8 +129,14 @@ export default {
            this.init()
          })
        } else {
-          this.isNoData = true
+          this.isNoData = false
+          this.showError = true
+          this.errorMsg = res.message
        }
+      }).catch((e) => {
+        this.isNoData = false
+        this.showError = true
+        this.errorMsg = e.message
      }).finally(() => {
        this.toggleLoading(false)
      })
--- a/src/views/charts2/charts/npm/NpmEventsHeader.vue
+++ b/src/views/charts2/charts/npm/NpmEventsHeader.vue
@@ -57,7 +57,7 @@ export default {
  },
  watch: {
    timeFilter: {
-      handler (n) {
+      handler () {
        this.recentEventsListData()
      }
    }
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/src/views/charts2/charts/npm/NpmIpMap.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="cn-chart__map-title" v-if="queryCondition">
    {{$t('npm.clientLocation')}}
-    <chart-error v-if="showError" tooltip :content="errorMsg" />
+    <chart-error v-if="showError" width="300" tooltip :content="errorMsg" />
  </div>
  <div class="cn-chart__map" :class="{'cn-chart__map-drilldown': queryCondition}">
    <div class="map-canvas" id="npmDrillDownMap"></div>
@@ -13,7 +13,7 @@ import { ref, shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { computeScore, getGeoData } from '@/utils/tools'
-import { storageKey, unitTypes, countryNameIdMapping, curTabState } from '@/utils/constants'
+import { storageKey, unitTypes, curTabState } from '@/utils/constants'
 import { valueToRangeValue } from '@/utils/unit-convert'
 import { getSecond } from '@/utils/date-util'
 import { api, getData } from '@/utils/api'
@@ -103,6 +103,9 @@ export default {
            ...params,
            params: res.map(r => `'${r.country}'`).join(',')
          }
+
+          this.showError = false
+
          // 计算分数
          const tcpRequest = get(api.npm.overview.mapTcp, subParams)
          const httpRequest = get(api.npm.overview.mapHttp, subParams)
@@ -114,16 +117,14 @@ export default {
            const mapData = res
            res2.forEach((r, i) => {
              if (r.code === 200) {
-                // todo 没有nodata处理
-                this.showError = false
                mapData.forEach(t => {
                  const find = r.data.result.find(d => d.country === t.country)
                  t[keyPre[i] + 'Score'] = find
                })
              } else {
                this.showError = true
-                // todo 此处需要看最后返回的数据
-                this.errorMsg = res2.message
+                // todo 目前返回的字段为msg，以后将改为message
+                this.errorMsg = r.message
              }
            })
            mapData.forEach(t => {
@@ -141,17 +142,15 @@ export default {
            })
            this.loadMarkerData(imageSeries, mapData)
          })
-        }).catch(error => {
+        }).catch(e => {
          this.showError = true
-          // todo 此处需要看最后返回的数据
-          this.errorMsg = error.message
+          this.errorMsg = e.message
        }).finally(() => {
          this.toggleLoading(false)
        })
      } catch (e) {
        console.error(e)
        this.showError = true
-        // todo 此处需要看最后返回的数据
        this.errorMsg = e.message
      }
    },
--- a/src/views/charts2/charts/npm/NpmLine.vue
+++ b/src/views/charts2/charts/npm/NpmLine.vue
@@ -3,7 +3,10 @@
    <chart-no-data v-if="isNoData"></chart-no-data>
    <template v-if="chartData.id === 11">
      <div class="npm-line-header">
-        <div class="npm-line-header-title">{{$t(chartData.i18n) || chartData.name}}</div>
+        <div class="npm-line-header-title">
+          {{$t(chartData.i18n) || chartData.name}}
+          <chart-error v-if="showError" tooltip :content="errorMsg"></chart-error>
+        </div>
        <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !isNoData">
          <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
            <div class="npm-line-header-icon" :class="'icon' + index"></div>
@@ -14,23 +17,38 @@
      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
    </template>
    <template v-else-if="chartData.id === 12">
-      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(ms)</div>
+      <div class="npm-line-title">
+        {{$t(chartData.i18n) || chartData.name}}(ms)
+        <chart-error v-if="showError" tooltip :content="errorMsg"></chart-error>
+      </div>
      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
    </template>
    <template v-else-if="chartData.id === 13">
-      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(ms)</div>
+      <div class="npm-line-title">
+        {{$t(chartData.i18n) || chartData.name}}(ms)
+        <chart-error v-if="showError" tooltip :content="errorMsg"></chart-error>
+      </div>
      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
    </template>
    <template v-else-if="chartData.id === 14">
-      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(ms)</div>
+      <div class="npm-line-title">
+        {{$t(chartData.i18n) || chartData.name}}(ms)
+        <chart-error v-if="showError" tooltip :content="errorMsg"></chart-error>
+      </div>
      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
    </template>
    <template v-else-if="chartData.id === 15">
-      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(%)</div>
+      <div class="npm-line-title">
+        {{$t(chartData.i18n) || chartData.name}}(%)
+        <chart-error v-if="showError" tooltip :content="errorMsg"></chart-error>
+      </div>
      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
    </template>
    <template v-else-if="chartData.id === 16">
-      <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(%)</div>
+      <div class="npm-line-title">
+        {{$t(chartData.i18n) || chartData.name}}(%)
+        <chart-error v-if="showError" tooltip :content="errorMsg"></chart-error>
+      </div>
      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
    </template>
  </div>
@@ -48,10 +66,12 @@ import { api } from '@/utils/api'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import unitConvert from '@/utils/unit-convert'
+import ChartError from '@/components/common/Error'

 export default {
  name: 'NpmLine',
  components: {
+    ChartError,
    ChartNoData
  },
  mixins: [chartMixin],
@@ -76,8 +96,10 @@ export default {
      timer: null,
      myChartArray: [],
      side: this.$store.state.panel.npmLocationSide,
-      country: this.$store.state.panel.npmLocationCountry
+      country: this.$store.state.panel.npmLocationCountry,
      // province: '',
+      showError: false,
+      errorMsg: ''
    }
  },
  watch: {
@@ -96,7 +118,7 @@ export default {
      }
    },
    timeFilter: {
-      handler (n) {
+      handler () {
        this.init()
      }
    }
@@ -134,6 +156,7 @@ export default {
        if (url) {
          get(url, params).then(res => {
            if (res.code === 200) {
+              this.showError = false
              this.isNoData = res.data.result.length === 0
              if (!this.isNoData) {
                if (this.chart.params.index === 0) {
@@ -152,7 +175,15 @@ export default {
                  this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
                }
              }
+            } else {
+              this.isNoData = false
+              this.showError = true
+              this.errorMsg = res.message
            }
+          }).catch((e) => {
+            this.isNoData = false
+            this.showError = true
+            this.errorMsg = e.message
          }).finally(() => {
            this.toggleLoading(false)
          })
--- a/src/views/charts2/charts/npm/NpmMap.vue
+++ b/src/views/charts2/charts/npm/NpmMap.vue
@@ -1,6 +1,8 @@
 <template>
  <div class="cn-chart__map">
    <div class="map-canvas" id="npmMap"></div>
+    <chart-error v-if="showError" max-width="900" :content="errorMsg"></chart-error>
+
    <div class="map-filter">
      <el-select
          size="mini"
@@ -55,9 +57,11 @@ import { getSecond } from '@/utils/date-util'
 import { api, getData } from '@/utils/api'
 import { get } from '@/utils/http'
 import chartMixin from '@/views/charts2/chart-mixin'
-import { Rectangle3D } from '@amcharts/amcharts4/.internal/core/elements/3d/Rectangle3D'
+// import { Rectangle3D } from '@amcharts/amcharts4/.internal/core/elements/3d/Rectangle3D'
+import ChartError from '@/components/common/Error'
 export default {
  name: 'NpmMap',
+  components: { ChartError },
  data () {
    return {
      locationOptions,
@@ -68,7 +72,9 @@ export default {
      countryImageSeries: null,
      // Server | Client
      trafficDirection: 'Server',
-      location: ''
+      location: '',
+      showError: false,
+      errorMsg: ''
    }
  },
  mixins: [chartMixin],
@@ -127,12 +133,24 @@ export default {
            Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res2 => {
              const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
              const mapData = res
+              let msg = ''
              res2.forEach((r, i) => {
                if (r.code === 200) {
                  mapData.forEach(t => {
                    const find = r.data.result.find(d => d.country === t.country)
                    t[keyPre[i] + 'Score'] = find
                  })
+                } else {
+                  this.showError = true
+                  // todo 此处目前返回字段为msg，后续字段会修改为message
+                  msg = msg + ',' + r.message
+                  if (msg.indexOf(',') === 0) {
+                    msg = msg.substring(1, msg.length)
+                  }
+                  if (msg.lastIndexOf(',') === msg.length - 1) {
+                    msg = msg.substring(0, msg.length - 1)
+                  }
+                  this.errorMsg = msg
                }
              })
              mapData.forEach(t => {
@@ -149,14 +167,23 @@ export default {
                }
              })
              this.loadMarkerData(imageSeries, mapData)
+            }).catch((e) => {
+              this.showError = true
+              this.errorMsg = e.message
            })
          } else {
            imageSeries.data = [{}]
          }
+        }).catch((e) => {
+          this.showError = true
+          this.errorMsg = e.message
        }).finally(() => {
          this.toggleLoading(false)
        })
      } catch (e) {
+        this.showError = true
+        // todo 此处错误信息有待考证，后续可能会改动
+        this.errorMsg = e
        console.error(e)
      }
    },
@@ -304,7 +331,7 @@ export default {
      }
    },
    timeFilter: {
-      handler (n) {
+      handler () {
        if (this.location) {
          this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries)
        } else {
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -188,6 +188,7 @@ export default {
      if (params.type && params.q) {
        get(api.npm.overview.trafficGraph, params).then((res) => {
          if (res.code === 200) {
+            this.showError = false
            this.isNoData = res.data.result.length === 0
            if (this.isNoData) {
              this.mpackets = [
@@ -306,10 +307,14 @@ export default {
              }
            })
          } else {
-            this.isNoData = true
+            this.isNoData = false
+            this.showError = true
+            this.errorMsg = res.message
          }
        }).catch(e => {
-          this.isNoData = true
+          this.isNoData = false
+          this.showError = true
+          this.errorMsg = e.message
        }).finally(() => {
          this.toggleLoading(false)
        })
@@ -318,6 +323,7 @@ export default {
          this.toggleLoading(true)
          get(api.npm.overview.totalTrafficAnalysis, params).then(res => {
            if (res.code === 200) {
+              this.showError = false
              this.isNoData = res.data.result.length === 0
              if (this.isNoData) {
                this.mpackets = [
@@ -369,11 +375,14 @@ export default {
                }
              })
            } else {
+              this.isNoData = false
              this.showError = true
              this.errorMsg = res.message
            }
          }).catch(e => {
-            this.isNoData = true
+            this.isNoData = false
+            this.showError = true
+            this.errorMsg = e.message
          }).finally(() => {
            this.toggleLoading(false)
          })
@@ -381,6 +390,7 @@ export default {
          this.toggleLoading(true)
          get(api.npm.overview.totalNetworkAnalysis, params).then(res => {
            if (res.code === 200) {
+              this.showError = false
              this.isNoData = res.data.result.length === 0
              if (this.isNoData) {
                this.npmQuantity = [
@@ -430,9 +440,15 @@ export default {
                  this.echartsInit(this.npmQuantity, '(%)')
                }
              })
+            } else {
+              this.isNoData = false
+              this.showError = true
+              this.errorMsg = res.message
            }
          }).catch(e => {
-            this.isNoData = true
+            this.isNoData = false
+            this.showError = true
+            this.errorMsg = e.message
          }).finally(() => {
            this.toggleLoading(false)
          })
@@ -440,6 +456,7 @@ export default {
          this.toggleLoading(true)
          get(api.npm.overview.totalHttpResponseDelay, params).then(res => {
            if (res.code === 200) {
+              this.showError = false
              this.isNoData = res.data.result.length === 0
              if (this.isNoData) {
                this.npmQuantity = [
@@ -465,9 +482,15 @@ export default {
                  this.echartsInit(this.npmQuantity, '(ms)')
                }
              })
+            } else {
+              this.isNoData = false
+              this.showError = true
+              this.errorMsg = res.message
            }
          }).catch(e => {
-            this.isNoData = true
+            this.isNoData = false
+            this.showError = true
+            this.errorMsg = e.message
          }).finally(() => {
            this.toggleLoading(false)
          })
@@ -475,6 +498,7 @@ export default {
          this.toggleLoading(true)
          get(api.npm.overview.totalSslConDelay, params).then(res => {
            if (res.code === 200) {
+              this.showError = false
              this.isNoData = res.data.result.length === 0
              if (this.isNoData) {
                this.npmQuantity = [
@@ -500,9 +524,15 @@ export default {
                  this.echartsInit(this.npmQuantity, '(ms)')
                }
              })
+            } else {
+              this.isNoData = false
+              this.showError = true
+              this.errorMsg = res.message
            }
          }).catch(e => {
-            this.isNoData = true
+            this.isNoData = false
+            this.showError = true
+            this.errorMsg = e.message
          }).finally(() => {
            this.toggleLoading(false)
          })