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

src/assets/css/components/components/common/chart-error.scss

@@ -1,15 +1,15 @@
 .error-component {
   position: absolute;
-  width: 100%;
+  //width: 100%;
-  height: 100%;
+  //height: 100%;
   left: 0;
   top: 0;
 }
 .error-block {
   display: inline-block;
-  width: auto;
+  //width: 100%;
-  max-width: calc(100% - 24px);
+  //max-width: calc(100% - 24px);
-  max-height: calc(100% - 24px);
+  //max-height: calc(100% - 24px);
   //line-height: 24px;
   background: #FFE7E6;
   font-size: 14px;

src/assets/css/components/views/charts2/npmAppCategoryScore.scss

@@ -179,3 +179,6 @@
     color: $grey;
   }
 }
+.npm-app-border {
+  border: 1px solid #E2E5EC;
+}

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

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;

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;

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>
+   <chart-error info v-if="showError" :content="errorMsg" />
-   <div class="ddos-detection-value" v-if="!isNoData">
+
+   <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)
       })

src/views/charts2/charts/npm/NpmAppCategoryScore.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="npm-app">
+  <div class="npm-app" :class="showError?'npm-app-border':''">
-    <div class="npm-app-left">
+    <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,66 +199,98 @@ export default {
       const lastCycleTrafficRequest = get(api.npm.overview.appTrafficAnalysis, { ...params, cycle: 1 })
       this.toggleLoading(true)
       Promise.all([currentTrafficRequest, lastCycleTrafficRequest]).then(res => {
-        const prevData = res[1].data.result
+        if (res[0].code === 200 && res[1].code === 200) {
-        const data = res[0].data.result
+          this.showError = false
-        if (data && data.length > 0) {
+          this.errorMsg = ''
-          this.isNoData = false
+          const prevData = res[1].data.result
-          const tableData = data.map(d => {
+          const data = res[0].data.result
-            const mapping = npmCategoryInfoMapping.find(mapping => mapping.appSubcategory === d.appSubcategory)
+          if (data && data.length > 0) {
-            const result = {
+            this.isNoData = false
-              ...mapping,
+            const tableData = data.map(d => {
-              ...d,
+              const mapping = npmCategoryInfoMapping.find(mapping => mapping.appSubcategory === d.appSubcategory)
-              bytesRateChainRatio: '-',
+              const result = {
-              inboundBytesRateChainRatio: '-',
+                ...mapping,
-              outboundBytesRateChainRatio: '-'
+                ...d,
-            }
+                bytesRateChainRatio: '-',
+                inboundBytesRateChainRatio: '-',
+                outboundBytesRateChainRatio: '-'
+              }
 
-            const prev = prevData.find(p => p.appSubcategory === d.appSubcategory)
+              const prev = prevData.find(p => p.appSubcategory === d.appSubcategory)
-            if (prev) {
+              if (prev) {
-              result.bytesRateChainRatio = getChainRatio(d.totalBitsRate, prev.totalBitsRate)
+                result.bytesRateChainRatio = getChainRatio(d.totalBitsRate, prev.totalBitsRate)
-              result.inboundBytesRateChainRatio = getChainRatio(d.inboundBitsRate, prev.inboundBitsRate)
+                result.inboundBytesRateChainRatio = getChainRatio(d.inboundBitsRate, prev.inboundBitsRate)
-              result.outboundBytesRateChainRatio = getChainRatio(d.outboundBitsRate, prev.outboundBitsRate)
+                result.outboundBytesRateChainRatio = getChainRatio(d.outboundBitsRate, prev.outboundBitsRate)
-            }
-            return result
-          })
-          // 计算分数
-          const tcpRequest = get(api.npm.overview.appTcpSessionDelay, params)
-          const httpRequest = get(api.npm.overview.appHttpResponseDelay, params)
-          const sslRequest = get(api.npm.overview.appSslConDelay, params)
-          const tcpLostRequest = get(api.npm.overview.appTcpLostlenPercent, params)
-          const packetRetransRequest = get(api.npm.overview.appPacketRetransPercent, params)
-          Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res => {
-            const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
-            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
-                })
               }
+              return result
             })
-            tableData.forEach(t => {
+            // 计算分数
-              const data = {
+            const tcpRequest = get(api.npm.overview.appTcpSessionDelay, params)
-                establishLatencyMs: t.tcpScore ? t.tcpScore.establishLatencyMs : null,
+            const httpRequest = get(api.npm.overview.appHttpResponseDelay, params)
-                httpResponseLatency: t.httpScore ? t.httpScore.httpResponseLatency : null,
+            const sslRequest = get(api.npm.overview.appSslConDelay, params)
-                sslConLatency: t.sslScore ? t.sslScore.sslConLatency : null,
+            const tcpLostRequest = get(api.npm.overview.appTcpLostlenPercent, params)
-                tcpLostlenPercent: t.tcpLostScore ? t.tcpLostScore.tcpLostlenPercent : null,
+            const packetRetransRequest = get(api.npm.overview.appPacketRetransPercent, params)
-                pktRetransPercent: t.packetRetransScore ? t.packetRetransScore.pktRetransPercent : null
+            Promise.all([tcpRequest, httpRequest, sslRequest, tcpLostRequest, packetRetransRequest]).then(res => {
-              }
+              const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
-              t.score = computeScore(data)
+              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 => {
+                const data = {
+                  establishLatencyMs: t.tcpScore ? t.tcpScore.establishLatencyMs : null,
+                  httpResponseLatency: t.httpScore ? t.httpScore.httpResponseLatency : null,
+                  sslConLatency: t.sslScore ? t.sslScore.sslConLatency : null,
+                  tcpLostlenPercent: t.tcpLostScore ? t.tcpLostScore.tcpLostlenPercent : null,
+                  pktRetransPercent: t.packetRetransScore ? t.packetRetransScore.pktRetransPercent : null
+                }
+                t.score = computeScore(data)
+              })
+              this.tableData = tableData
+            }).finally(() => {
+              this.toggleLoading(false)
             })
-            this.tableData = tableData
+          } else {
-          }).finally(() => {
+            this.tableData = []
+            this.isNoData = true
             this.toggleLoading(false)
-          })
+          }
         } else {
-          this.tableData = []
-          this.isNoData = true
           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) {

src/views/charts2/charts/npm/NpmAppEventTable.vue

@@ -1,40 +1,41 @@
 <template>
   <div class="npm-app-event">
-    <div class="metric-select" >
+    <div class="metric-select">
-      <el-select v-model="metric"
+      <el-select
-                 class="option__select select-column"
+          v-model="metric"
-                 popper-class="option-popper common-select"
+          class="option__select select-column"
-                 :popper-append-to-body="false"
+          popper-class="option-popper common-select"
-                 key="tabMetric"
+          :popper-append-to-body="false"
-                 @change="changeMetric"
+          key="tabMetric"
-                 size="mini"
+          @change="changeMetric"
-                 width="100">
+          size="mini"
+          width="100">
         <el-option
-                v-for="item in options"
+            v-for="item in options"
-                :key="item.label"
+            :key="item.label"
-                :label="item.label"
+            :label="item.label"
-                :value="item.value"
+            :value="item.value"
         />
       </el-select>
-      <span>{{$t('network.metric')}}：</span>
+      <span>{{ $t('network.metric') }}：</span>
     </div>
     <el-table
-            :id="`tabTable_${index}`"
+        :id="`tabTable_${index}`"
-            :ref="`dataTable_${index}`"
+        :ref="`dataTable_${index}`"
-            :data="tableData"
+        :data="tableData"
-            class="npm-app-event-table"
+        class="npm-app-event-table"
-            height="100%"
+        height="100%"
-            empty-text=""
+        empty-text=""
     >
       <template v-for="(item, index) in customTableTitles" :key="index">
         <el-table-column class="data-column" :min-width="columnWidth(index)">
           <template #header>
-            <span class="data-column__span">{{$t(item.label)}}</span>
+            <span class="data-column__span">{{ $t(item.label) }}</span>
           </template>
-          <template  #default="scope" :column="item">
+          <template #default="scope" :column="item">
             <div class="data-app-event-table">
               <template v-if="item.prop === 'domain' ||item.prop === 'appName' ||item.prop === 'serverIp' ">
-                <span class="data-applications">{{$t(scope.row[item.prop])}}</span>
+                <span class="data-applications">{{ $t(scope.row[item.prop]) }}</span>
               </template>
               <template v-else-if="item.prop === 'eventSeverity'">
                 <template v-if="scope.row[item.prop]==='critical'">
@@ -56,14 +57,14 @@
                   <div v-for="item in 1" class="red-dot"></div>
                   <div v-for="item in 4" class="grey-dot"></div>
                 </template>
-                <span class="data-severity" >{{$t(scope.row[item.prop])}}</span>
+                <span class="data-severity">{{ $t(scope.row[item.prop]) }}</span>
               </template>
               <template v-else-if="item.prop === 'eventType'">
-               <!-- <span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>-->
+                <!-- <span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>-->
-                <span class="data-eventType" >{{$t(scope.row[item.prop])}}</span>
+                <span class="data-eventType">{{ $t(scope.row[item.prop]) }}</span>
               </template>
               <template v-else-if="item.prop === 'count'">
-                <span class="data-eventCount">{{scope.row[item.prop]}}</span>
+                <span class="data-eventCount">{{ scope.row[item.prop] }}</span>
               </template>
               <span v-else>-</span>
             </div>
@@ -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.applications',
-        { label: 'network.eventType', prop: 'eventType' },
+          prop: 'serverIp'
-        { label: 'network.eventCount', prop: 'count' }
+        },
+        {
+          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>

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

src/views/charts2/charts/npm/NpmEventsHeader.vue

@@ -57,7 +57,7 @@ export default {
   },
   watch: {
     timeFilter: {
-      handler (n) {
+      handler () {
         this.recentEventsListData()
       }
     }

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 此处需要看最后返回的数据
+                // todo 目前返回的字段为msg，以后将改为message
-                this.errorMsg = res2.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 = e.message
-          this.errorMsg = error.message
         }).finally(() => {
           this.toggleLoading(false)
         })
       } catch (e) {
         console.error(e)
         this.showError = true
-        // todo 此处需要看最后返回的数据
         this.errorMsg = e.message
       }
     },

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

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 {

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