From c3ffd01363b8446a9ba70dbc9b53f53e05be58e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Mon, 21 Nov 2022 17:31:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AF=B7=E6=B1=82=E6=B7=BB=E5=8A=A0erro?=
 =?UTF-8?q?r=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/chart-error.scss        |  34 ++++-
 .../views/charts2/linkDirectionGrid.scss      |   7 ++
 .../views/charts2/networkOverviewApps.scss    |   2 +-
 .../css/components/views/charts2/npmMap.scss  |   1 +
 .../views/charts2/npmRecentEvents.scss        |   1 +
 src/components/common/Error.vue               |  54 +++++---
 .../charts2/charts/linkMonitor/LinkBlock.vue  |  30 ++++-
 .../charts/linkMonitor/LinkDirectionGrid.vue  | 117 ++++++++++--------
 .../LinkDirectionGrid/PopoverContent.vue      |  13 +-
 .../charts/linkMonitor/LinkTrafficLine.vue    |  50 +++++---
 .../LinkTrafficDrillDownList.vue              |  89 +++++++------
 .../networkOverview/NetworkOverviewApps.vue   |  13 +-
 .../networkOverview/NetworkOverviewLine.vue   |  23 +++-
 .../NetworkOverviewPerformanceEvent.vue       |  38 +++++-
 .../charts2/charts/npm/NpmEventsHeader.vue    |  16 ++-
 src/views/charts2/charts/npm/NpmIpMap.vue     |  24 +++-
 .../charts2/charts/npm/NpmRecentEvents.vue    |  19 ++-
 .../charts2/charts/npm/NpmTrafficLine.vue     |  14 ++-
 .../charts2/charts/npm/RelatedSessions.vue    |   2 +-
 19 files changed, 392 insertions(+), 155 deletions(-)

diff --git a/src/assets/css/components/components/common/chart-error.scss b/src/assets/css/components/components/common/chart-error.scss
index a769dddf..3e5decd6 100644
--- a/src/assets/css/components/components/common/chart-error.scss
+++ b/src/assets/css/components/components/common/chart-error.scss
@@ -1,12 +1,16 @@
-.error-block {
+.error-component {
   position: absolute;
   width: 100%;
   height: 100%;
+  left: 0;
+  top: 0;
 }
-.error-block-tooltip {
+.error-block {
   display: inline-block;
   width: auto;
-  max-width: 350px;
+  max-width: calc(100% - 24px);
+  max-height: calc(100% - 24px);
+  line-height: 24px;
   background: #FFE7E6;
   border: 1px solid rgba(226,97,84,0.42);
   border-radius: 4px;
@@ -15,7 +19,31 @@
   font-weight: 400;
   padding: 10px 12px;
   margin: 12px;
+  z-index: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  //white-space: nowrap;
+  word-break: break-all;
 }
+
+.error-block-info {
+  position: absolute;
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  font-size: 14px;
+  color: #575757;
+  line-height: 24px;
+  font-weight: 400;
+  font-family: NotoSansSChineseRegular, serif;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
 .new-error-icon {
   position: relative;
   display: inline-block;
diff --git a/src/assets/css/components/views/charts2/linkDirectionGrid.scss b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
index 9b77c979..78a07893 100644
--- a/src/assets/css/components/views/charts2/linkDirectionGrid.scss
+++ b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
@@ -13,6 +13,13 @@
       font-size: 14px;
       color: #046ECA;
     }
+    .link-block-error {
+      position: absolute;
+      width: calc(100% - 20px);
+      height: calc(100% - 60px);
+      margin-left: -12px;
+      margin-top: 10px;
+    }
     .data-grid {
       height: 100px;
       .egress-row {
diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss
index b795ea09..55916a64 100644
--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -3,7 +3,7 @@
 
   .network-overview-apps-header {
     display: flex;
-    justify-content: space-between;
+    //justify-content: space-between;
 
     .network-overview-apps-title {
       font-size: 14px;
diff --git a/src/assets/css/components/views/charts2/npmMap.scss b/src/assets/css/components/views/charts2/npmMap.scss
index 9ca70b81..28a2a211 100644
--- a/src/assets/css/components/views/charts2/npmMap.scss
+++ b/src/assets/css/components/views/charts2/npmMap.scss
@@ -1,4 +1,5 @@
 .cn-chart__map-title {
+  display: flex;
   font-size: 14px;
   color: #353636;
   font-weight: 600;
diff --git a/src/assets/css/components/views/charts2/npmRecentEvents.scss b/src/assets/css/components/views/charts2/npmRecentEvents.scss
index 248f05f2..cfa52120 100644
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -2,6 +2,7 @@
   height: 100%;
   width: 100%;
   .npm-recent-title {
+    display: flex;
     font-size: 14px;
     color: #353636;
     font-weight: 600;
diff --git a/src/components/common/Error.vue b/src/components/common/Error.vue
index 48186b81..62442682 100644
--- a/src/components/common/Error.vue
+++ b/src/components/common/Error.vue
@@ -1,6 +1,15 @@
 <template>
-  <div>
-    <div v-if="showSmall">
+  <div v-if="showDefault" class="error-component">
+    <div class="error-block" :style="{'max-width': localMaxWidth, 'width': localWidth}">
+      <svg class="icon item-popover-up error-icon1" aria-hidden="true">
+        <use xlink:href="#cn-icon-baocuo"></use>
+      </svg>
+      {{ content }}
+    </div>
+  </div>
+
+  <div id="error-com">
+    <div v-if="tooltip !== undefined">
       <el-popover
           :width="localPopoverWidth"
           placement="top-start"
@@ -29,8 +38,8 @@
 <!--      </span>-->
     </div>
 
-    <div v-else class="error-block">
-      <div class="error-block-tooltip" :style="{'max-width': localMaxWidth, 'width': localWidth}">
+    <div class="error-block-info" v-if="info !== undefined">
+      <div>
         <svg class="icon item-popover-up error-icon1" aria-hidden="true">
           <use xlink:href="#cn-icon-baocuo"></use>
         </svg>
@@ -45,21 +54,29 @@
    组件在全局注册了，调用时: <chart-error :content="content"></chart-error>
 -->
 <!--
-   在标题之后显示：<chart-error small :content="content" />
+   目前有三种形式，分别是default、tooltip、info
+   默认，即红框展示：<chart-error :content="content" />
+   在标题之后显示，需要鼠标移动到图标上显示弹窗：<chart-error tooltip :content="content" />
+   文字提示：<chart-error tooltip :content="content" />
  -->
 <!--
-  自定义弹窗宽度：<chart-error small width="300" :content="content" />
+  自定义弹窗宽度：<chart-error tooltip width="300" :content="content" />
+  注意：info模式不支持宽度设置
 -->
 <!--
-  自定义icon图标：<chart-error small icon="baocuo" :content="content" />，此时icon全称为'cn-icon-baocuo'
+  自定义icon图标：<chart-error tooltip icon="baocuo" :content="content" />，此时icon全称为'cn-icon-baocuo'
 -->
 <!--  end----------------调用方式----------------end  -->
 <script>
 export default {
   name: 'Error',
   props: {
-    // 模块标识，small即标题之后出现icon图标，鼠标移入显示报错信息，非small即在div内显示报错信息
-    small: {
+    // 工具栏提示类型
+    tooltip: {
+      type: String
+    },
+    // 文字提示类型
+    info: {
       type: String
     },
     // 报错信息内容，如果不传，默认为"Error"
@@ -67,14 +84,14 @@ export default {
       type: String,
       default: 'Error！'
     },
-    // 报错信息模块宽度，如果选择small，则为弹窗宽度
+    // 报错信息模块宽度，如果类型选择tooltip，则为弹窗宽度，info模式没有宽度设置
     width: {
       type: String
     },
     // 报错信息模块最大宽度
     maxWidth: {
-      type: String,
-      default: '350'
+      type: String
+      // default: '350'
     },
     // 自定义icon图标
     icon: {
@@ -87,10 +104,11 @@ export default {
   },
   data () {
     return {
+      showDefault: false, // 是否显示default，分别是default、tooltip、info
       showSmall: false, // 显示错误的类型，true为图表模块内显示报错，false为标题后显示报错
       localWidth: '',
       localMaxWidth: '',
-      localPopoverWidth: '350'
+      localPopoverWidth: ''
     }
   },
   mounted () {
@@ -98,11 +116,15 @@ export default {
   },
   methods: {
     initData () {
-      if (this.small !== undefined) {
-        this.showSmall = true
+      if (this.tooltip !== undefined) {
+        this.showDefault = false
         this.localPopoverWidth = this.width !== undefined
+      }
+
+      if (this.tooltip === undefined && this.info === undefined) {
+        this.showDefault = true
       } else {
-        this.showSmall = false
+        this.showDefault = false
       }
 
       if (this.width) {
diff --git a/src/views/charts2/charts/linkMonitor/LinkBlock.vue b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
index a02d29da..acbcf086 100644
--- a/src/views/charts2/charts/linkMonitor/LinkBlock.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="link-blocks">
     <div class="block-list" style="position: relative">
-      <div class="block-list__title">{{ $t('linkMonitor.links') }}</div>
+      <div class="block-list__title" v-if="!showError">{{ $t('linkMonitor.links') }}</div>
 
       <!--无数据noData-->
       <chart-no-data v-if="isNoData"></chart-no-data>
 
       <div class="block-list__list" v-show="!isNoData">
+        <chart-error v-if="showError" :content="errorMsg1" />
         <el-popover
+            v-else
             placement="bottom"
             trigger="hover"
             popper-class="link-block__popper"
@@ -54,13 +56,15 @@
       </div>
     </div>
 
-    <div class="block-list" style="position: relative">
-      <div class="block-list__title">{{ $t('linkMonitor.nextHopInternet') }}</div>
+    <div class="block-list" >
+      <div class="block-list__title" v-if="!showError">{{ $t('linkMonitor.nextHopInternet') }}</div>
 
       <chart-no-data v-if="isNoData"></chart-no-data>
 
       <div class="block-list__list" v-show="!isNoData">
+        <chart-error v-if="showError" :content="errorMsg2" />
         <el-popover
+            v-else
             placement="bottom"
             trigger="hover"
             popper-class="link-block__popper"
@@ -120,11 +124,13 @@ import { colorGradientCalculation } from '@/utils/tools'
 import unitConvert from '@/utils/unit-convert'
 import { drillDownPanelTypeMapping, storageKey, unitTypes } from '@/utils/constants'
 import { getSecond } from '@/utils/date-util'
+import ChartError from '@/components/common/Error'
 
 export default {
   name: 'LinkBlock',
   mixins: [chartMixin],
   components: {
+    ChartError,
     ChartNoData
   },
   data () {
@@ -133,7 +139,10 @@ export default {
       unitTypes,
       linkData: [],
       nextHopData: [],
-      gradientColor: ['#FF005C', '#40537E'] // [start, end]
+      gradientColor: ['#FF005C', '#40537E'], // [start, end]
+      showError: false,
+      errorMsg1: '',
+      errorMsg2: ''
     }
   },
   setup () {
@@ -170,6 +179,8 @@ export default {
 
       Promise.all([dataRequest, nextHopRequest]).then(res => {
         if (res[0].code === 200 && res[1].code === 200) {
+          this.showError = false
+
           const linkData = res[0].data.result
           const nextHopData = res[1].data.result
 
@@ -274,11 +285,18 @@ export default {
 
           this.nextHopData = nextHopSorted
         } else {
-          this.isNoData = true
+          this.isNoData = false
+          this.showError = true
+          this.errorMsg1 = res[0].message
+          this.errorMsg2 = res[1].message
         }
       }).catch(e => {
         console.error(e)
-        this.isNoData = true
+        this.isNoData = false
+        this.showError = true
+        // todo 此处数据还待验证
+        this.errorMsg1 = e.message
+        this.errorMsg2 = e.message
       }).finally(() => {
         this.toggleLoading(false)
       })
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
index 087d4c9b..ff3eac8b 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="link-direction-grid">
     <!--左侧链路出入口-->
-    <popover-content :isNoData="isNoData" :gridData="gridData" style="width: 900px;"/>
+    <popover-content :isNoData="isLinkNoData" :gridData="linkGridData" :showError="isLinkShowError" :content="linkErrorMsg" style="width: 900px;"/>
 
     <!--右侧链路下一跳-->
-    <popover-content :isNoData="isNoData" :gridData="gridData2"/>
+    <popover-content :isNoData="isNextNoData" :gridData="nextGridData" :showError="isNextShowError" :content="nextErrorMsg" />
   </div>
 </template>
 
@@ -22,9 +22,14 @@ export default {
   mixins: [chartMixin],
   data () {
     return {
-      gridData: [],
-      gridData2: [],
-      isNoData: false
+      linkGridData: [],
+      nextGridData: [],
+      isLinkNoData: false,
+      isNextNoData: false,
+      isLinkShowError: false, // 显示左侧链路报错标识
+      linkErrorMsg: '', // 左侧链路的报错信息
+      isNextShowError: false, // 显示右侧下一跳报错标识
+      nextErrorMsg: '' // 右侧下一跳的报错信息
     }
   },
   components: {
@@ -32,7 +37,7 @@ export default {
   },
   watch: {
     timeFilter: {
-      handler (n) {
+      handler () {
         this.init()
       }
     }
@@ -45,7 +50,6 @@ export default {
       // 链路基本信息
       let linkInfo = localStorage.getItem(storageKey.linkInfo)
       linkInfo = JSON.parse(linkInfo)
-      // console.log('LinkDirectionGrid.vue---init--获取链路基本信息缓存', linkInfo)
 
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
@@ -57,7 +61,8 @@ export default {
       this.toggleLoading(true)
 
       Promise.all([dataRequest, nextHopRequest]).then(res => {
-        if (res[0].code === 200 && res[1].code === 200) {
+        if (res[0].code === 200) {
+          this.isLinkShowError = false
           // 链路流量数据
           const linkData = res[0].data.result
           // 接口数据乱序，根据入链路id（ingressLinkId）大小排序之后，
@@ -68,48 +73,31 @@ export default {
             }
             return a.egressLinkId - b.egressLinkId
           })
-
-          // 链路下一跳信息
-          const nextLinkData = res[1].data.result
-          // 接口数据乱序，根据出方向排序，再根据同个出方向下的入进行排序
-          nextLinkData.sort((a, b) => {
-            if (a.ingressLinkDirection !== b.ingressLinkDirection) {
-              return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection)
-            }
-            return a.egressLinkDirection.localeCompare(b.egressLinkDirection)
-          })
-
-          this.isNoData = linkData.length === 0 && nextLinkData.length === 0
-          if (this.isNoData) {
+          this.isLinkNoData = linkData.length === 0
+          if (this.isLinkNoData) {
             return
           }
 
           // 链路流量数据
-          const gridData = []
-          // 链路下一跳数据
-          const gridData2 = []
+          const linkGridData = []
           linkData.forEach(d => {
             const ingressLink = linkInfo.find(l => l.originalLinkId === d.ingressLinkId)
             const egressLink = linkInfo.find(l => l.originalLinkId === d.egressLinkId)
             if (ingressLink && egressLink) {
-              const data = gridData.find(g => g.linkId === ingressLink.linkId)
+              const data = linkGridData.find(g => g.linkId === ingressLink.linkId)
 
               // 上行使用情况计算
               const egressUsage = this.computeUsage(d.egressBitsRate, egressLink.bandwidth)
               // 下行使用情况计算
               const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressLink.bandwidth)
               // 宽带使用超过90%，赋红点
-              d.usageMore90 = false
-              if (egressUsage >= 0.9 || ingressUsage >= 0.9) {
-                d.usageMore90 = true
-              }
+
+              d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
               // 计算npm分数
               // 分数低于3分，赋红点
               d.score = this.localComputeScore(d)
-              d.scoreLow3 = false
-              if (d.score < 3) {
-                d.scoreLow3 = true
-              }
+
+              d.scoreLow3 = d.score < 3
 
               if (data) {
                 const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
@@ -125,7 +113,7 @@ export default {
                   })
                 }
               } else {
-                gridData.push({
+                linkGridData.push({
                   linkId: ingressLink.linkId,
                   egress: [{
                     linkId: egressLink.linkId,
@@ -141,14 +129,40 @@ export default {
             }
           })
 
-          this.gridData = gridData
+          this.linkGridData = linkGridData
+        } else {
+          this.isLinkNoData = false
+          this.isLinkShowError = true
+          this.linkErrorMsg = res[0].message
+        }
+
+        if (res[1].code === 200) {
+          this.isNextShowError = false
+
+          // 链路下一跳信息
+          const nextLinkData = res[1].data.result
+          // 接口数据乱序，根据出方向排序，再根据同个出方向下的入进行排序
+          nextLinkData.sort((a, b) => {
+            if (a.ingressLinkDirection !== b.ingressLinkDirection) {
+              return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection)
+            }
+            return a.egressLinkDirection.localeCompare(b.egressLinkDirection)
+          })
+
+          this.isNextNoData = nextLinkData.length === 0
+          if (this.isNextNoData) {
+            return
+          }
+
+          // 链路下一跳数据
+          const nextGridData = []
 
           nextLinkData.forEach(d => {
             const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress')
             const egressLink = linkInfo.find(l => l.nextHop === d.egressLinkDirection && l.direction === 'egress')
 
             if (ingressLink && egressLink) {
-              const data = gridData2.find(g => g.linkId === ingressLink.linkId)
+              const data = nextGridData.find(g => g.linkId === ingressLink.linkId)
 
               let egressBanwidth = 0
               let ingressBanwidth = 0
@@ -166,17 +180,13 @@ export default {
               // 下行使用情况计算
               const ingressUsage = this.computeUsage(d.ingressBitsRate, ingressBanwidth)
               // 宽带使用超过90%，赋红点
-              d.usageMore90 = false
-              if (egressUsage >= 0.9 || ingressUsage >= 0.9) {
-                d.usageMore90 = true
-              }
+
+              d.usageMore90 = egressUsage >= 0.9 || ingressUsage >= 0.9
               // 计算npm分数
               // 分数低于3分，赋红点
               d.score = this.localComputeScore(d)
-              d.scoreLow3 = false
-              if (d.score < 3) {
-                d.scoreLow3 = true
-              }
+
+              d.scoreLow3 = d.score < 3
 
               if (data) {
                 const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
@@ -193,7 +203,7 @@ export default {
                   })
                 }
               } else {
-                gridData2.push({
+                nextGridData.push({
                   linkId: ingressLink.linkId,
                   nextHop: ingressLink.nextHop,
                   egress: [{
@@ -211,13 +221,22 @@ export default {
             }
           })
 
-          this.gridData2 = gridData2
+          this.nextGridData = nextGridData
         } else {
-          this.isNoData = true
+          this.isLinkNoData = false
+          this.isNextShowError = true
+          // todo 此时返回的是msg，后期记得改为message
+          this.nextErrorMsg = res[1].msg
         }
       }).catch(e => {
         console.error(e)
-        this.isNoData = true
+
+        this.isLinkShowError = true
+        // todo 此时返回的是msg，后期记得改为message
+        this.linkErrorMsg = e[0].msg
+
+        this.isNextShowError = true
+        this.nextErrorMsg = e[1].msg
       }).finally(() => {
         this.toggleLoading(false)
       })
@@ -235,7 +254,7 @@ export default {
     /**
      * 本地计算npm分数
      */
-    localComputeScore (data, bandwidth) {
+    localComputeScore (data) {
       let score = 0
       const dataScore = {
         establishLatencyMs: data.establishLatencyMs || null,
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
index 755477f8..88e37115 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
@@ -5,7 +5,9 @@
 
     <chart-no-data v-if="isNoData"></chart-no-data>
 
-    <div class="data-grid" v-show="!isNoData">
+    <chart-error class="link-block-error" v-if="showError" :content="content"/>
+
+    <div class="data-grid" v-show="!isNoData && !showError">
       <div class="egress-row">
         <div class="egress-id" v-for="(item, index) in gridData" :key="index">
           <!--兼容下一跳情况-->
@@ -73,7 +75,7 @@
                       <div class="block-content-item-name">{{ $t('linkMonitor.linkBlock.total') }}</div>
 
                       <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
-                        {{unitConvert(row.egress[index2].totalBitsRate, unitTypes.bps).join('')}}
+                        {{ unitConvert(row.egress[index2].totalBitsRate, unitTypes.bps).join('') }}
                       </div>
                     </div>
                   </div>
@@ -146,13 +148,18 @@
 import unitConvert from '@/utils/unit-convert'
 import { unitTypes } from '@/utils/constants'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import ChartError from '@/components/common/Error'
+
 export default {
   name: 'PopoverContent',
   props: {
     gridData: Array,
-    isNoData: Boolean
+    isNoData: Boolean,
+    showError: Boolean,
+    content: String
   },
   components: {
+    ChartError,
     ChartNoData
   },
   data () {
diff --git a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
index 27722108..6ca30229 100644
--- a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
@@ -7,7 +7,8 @@
    </link-traffic-drill-down-list>
    <div class="line network link-traffic">
      <loading :loading="loading"></loading>
-     <div class="line-header">
+     <chart-error v-if="showError" :content="errorMsg" />
+     <div class="line-header" v-if="!showError">
        <div class="line-header-left">
          <div class="line-value-active" v-if="lineTab"></div>
          <div class="line-value">
@@ -59,22 +60,21 @@
 
 <script>
 import chartMixin from '@/views/charts2/chart-mixin'
-import linkTrafficDrillDownLine from '@/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine'
 import LinkTrafficDrillDownList from '@/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import Loading from '@/components/common/Loading'
-import {useRoute} from 'vue-router'
-import {ref, shallowRef} from 'vue'
+import { useRoute } from 'vue-router'
+import { ref, shallowRef } from 'vue'
 import unitConvert from '@/utils/unit-convert'
-import {chartColor3, chartColor4, unitTypes} from '@/utils/constants'
-import {overwriteUrl, urlParamsHandler} from '@/utils/tools'
-import {getSecond} from '@/utils/date-util'
-import {get} from '@/utils/http'
-import {api} from '@/utils/api'
+import { chartColor3, chartColor4, unitTypes } from '@/utils/constants'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
 import _ from 'lodash'
 import * as echarts from 'echarts'
-import {linkTrafficLineChartOption} from '@/views/charts2/charts/options/echartOption'
-import {stackedLineTooltipFormatter} from '@/views/charts/charts/tools'
+import { linkTrafficLineChartOption } from '@/views/charts2/charts/options/echartOption'
+import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 
 export default {
   name: 'LinkTrafficLine',
@@ -126,7 +126,9 @@ export default {
       sizes: [3, 4, 6, 8, 9, 10],
       dynamicVariable: '',
       showMarkLine: true,
-      loading: false
+      loading: false,
+      showError: false,
+      errorMsg: ''
     }
   },
   watch: {
@@ -148,7 +150,7 @@ export default {
       overwriteUrl(newUrl)
     },
     timeFilter: {
-      handler (n) {
+      handler () {
         if (this.lineTab) {
           this.init(this.lineMetric, this.showMarkLine, 'active')
         } else {
@@ -176,6 +178,7 @@ export default {
       this.loading = true
       get(api.linkMonitor.totalTrafficAnalysis, params).then((res) => {
         if (res.code === 200) {
+          this.showError = false
           this.isNoData = res.data.result.length === 0
           if (this.isNoData) {
             this.mpackets = [
@@ -184,7 +187,7 @@ export default {
               { analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
             ]
           }
-          res.data.result.forEach((t, i) => {
+          res.data.result.forEach((t) => {
             if (t.type === 'bytes' && val === 'Bits/s') {
               const mpackets = _.cloneDeep(this.mpackets)
               mpackets[0].analysis = t.totalBitsRate.analysis
@@ -269,10 +272,17 @@ export default {
               }
             }
           })
+        } else {
+          this.showError = true
+          // todo 此时返回的是msg，后期记得改
+          this.errorMsg = res.msg
+          // this.errorMsg = res.message
         }
       }).catch(e => {
         console.error(e)
-        this.isNoData = true
+        this.showError = true
+        this.errorMsg = e.message
+        // this.isNoData = true
       }).finally(() => {
         this.loading = false
       })
@@ -298,7 +308,7 @@ export default {
             width: 1
           },
           stack: t.name !== 'network.total' ? 'network.total' : '',
-          symbolSize: function (value, params) {
+          symbolSize: function (value) {
             return _this.symbolSizeSortChange(i, value[0])
           },
           itemStyle: {
@@ -334,8 +344,8 @@ export default {
             }
           })
         })
-        const str = stackedLineTooltipFormatter(params)
-        return str
+        // const str = stackedLineTooltipFormatter(params)
+        return stackedLineTooltipFormatter(params)
       }
       this.showMarkLine = true
       this.myChart.setOption(this.chartOption)
@@ -396,7 +406,7 @@ export default {
         })
       }
     },
-    handleActiveBar (value) {
+    handleActiveBar () {
       if (document.querySelector('.network .line-value-mpackets.is-active')) {
         const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-mpackets.is-active')
         const activeBar = document.querySelector('.network .line-value-active')
@@ -411,7 +421,7 @@ export default {
       this.lineTab = ''
       this.handleActiveBar()
       this.showMarkLine = !this.showMarkLine
-      this.mpackets.forEach((e, i) => {
+      this.mpackets.forEach((e) => {
         if (!e.invertTab) {
           e.invertTab = true
         }
diff --git a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue
index 07ff09b0..90bd7543 100644
--- a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue
+++ b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue
@@ -1,38 +1,42 @@
 <template>
   <div class="link-traffic-list">
     <loading :loading="loading"></loading>
-    <div class="link-traffic-list-center">
-      <div class="link-traffic-list-center-label">{{$t('network.total')}}</div>
-      <div class="link-traffic-list-center-value" v-if="lineData[0] && lineData[0].analysis">{{unitConvert(lineData[0].analysis.avg, unitTypes.bps).join('')}}</div>
-    </div>
-    <div class="link-traffic-list-center">
-      <div class="link-traffic-list-center-label">{{$t('linkMonitor.bandwidthUsage')}}</div>
-      <div class="link-traffic-list-center-value" v-if="bandWidth && lineData[0] && lineData[0].analysis">{{unitConvert(lineData[0].analysis.avg / bandWidth, unitTypes.percent).join('')}}</div>
-      <div class="link-traffic-list-center-value" v-else>-</div>
-    </div>
-    <div class="link-traffic-list-center">
-      <div class="link-traffic-list-center-label">{{$t('linkMonitor.npmScore')}}</div>
-      <div class="link-traffic-list-center-value">{{linkTrafficListData.npmScore || '-'}}</div>
-    </div>
-    <div class="link-traffic-list-center">
-      <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.tcpConnectionEstablishLatency')}}</div>
-      <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.establishLatencyMs), unitTypes.time).join('')}}</div>
-    </div>
-    <div class="link-traffic-list-center">
-      <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.httpResponse')}}</div>
-      <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.httpResponseLatency), unitTypes.time).join('')}}</div>
-    </div>
-    <div class="link-traffic-list-center">
-      <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.sslResponseLatency')}}</div>
-      <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.sslConLatency), unitTypes.time).join('')}}</div>
-    </div>
-    <div class="link-traffic-list-center">
-      <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.packetLoss')}}</div>
-      <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.tcpLostlenPercent, unitTypes.percent).join('')}}</div>
-    </div>
-    <div class="link-traffic-list-center">
-      <div class="link-traffic-list-center-label">{{$t('overall.packetRetrans')}}</div>
-      <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.pktRetransPercent, unitTypes.percent).join('')}}</div>
+
+    <chart-error v-if="showError" :content="errorMsg" />
+    <div v-else>
+      <div class="link-traffic-list-center">
+        <div class="link-traffic-list-center-label">{{$t('network.total')}}</div>
+        <div class="link-traffic-list-center-value" v-if="lineData[0] && lineData[0].analysis">{{unitConvert(lineData[0].analysis.avg, unitTypes.bps).join('')}}</div>
+      </div>
+      <div class="link-traffic-list-center">
+        <div class="link-traffic-list-center-label">{{$t('linkMonitor.bandwidthUsage')}}</div>
+        <div class="link-traffic-list-center-value" v-if="bandWidth && lineData[0] && lineData[0].analysis">{{unitConvert(lineData[0].analysis.avg / bandWidth, unitTypes.percent).join('')}}</div>
+        <div class="link-traffic-list-center-value" v-else>-</div>
+      </div>
+      <div class="link-traffic-list-center">
+        <div class="link-traffic-list-center-label">{{$t('linkMonitor.npmScore')}}</div>
+        <div class="link-traffic-list-center-value">{{linkTrafficListData.npmScore || '-'}}</div>
+      </div>
+      <div class="link-traffic-list-center">
+        <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.tcpConnectionEstablishLatency')}}</div>
+        <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.establishLatencyMs), unitTypes.time).join('')}}</div>
+      </div>
+      <div class="link-traffic-list-center">
+        <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.httpResponse')}}</div>
+        <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.httpResponseLatency), unitTypes.time).join('')}}</div>
+      </div>
+      <div class="link-traffic-list-center">
+        <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.sslResponseLatency')}}</div>
+        <div class="link-traffic-list-center-value">{{unitConvert(Math.floor(linkTrafficListData.sslConLatency), unitTypes.time).join('')}}</div>
+      </div>
+      <div class="link-traffic-list-center">
+        <div class="link-traffic-list-center-label">{{$t('networkAppPerformance.packetLoss')}}</div>
+        <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.tcpLostlenPercent, unitTypes.percent).join('')}}</div>
+      </div>
+      <div class="link-traffic-list-center">
+        <div class="link-traffic-list-center-label">{{$t('overall.packetRetrans')}}</div>
+        <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.pktRetransPercent, unitTypes.percent).join('')}}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -48,6 +52,7 @@ import { useRoute } from 'vue-router'
 import { getSecond } from '@/utils/date-util'
 import { computeScore } from '@/utils/tools'
 import Loading from '@/components/common/Loading'
+import ChartError from '@/components/common/Error'
 export default {
   name: 'linkTrafficList',
   mixins: [chartMixin],
@@ -62,6 +67,7 @@ export default {
     }
   },
   components: {
+    ChartError,
     Loading
   },
   data () {
@@ -72,7 +78,9 @@ export default {
       linkTrafficListData: {},
       cnLinkInfo: JSON.parse(localStorage.getItem(storageKey.linkInfo)),
       bandWidth: 0,
-      loading: false
+      loading: false,
+      showError: false,
+      errorMsg: ''
     }
   },
   watch: {
@@ -91,6 +99,7 @@ export default {
       if (this.queryCondition) {
         const condition = this.queryCondition.toLowerCase().split(' or ')
         if (condition.length > 1) {
+          // params.egressParam = true
           params.egressParam = condition.find(c => c.indexOf('common_egress_link_id') > -1 || c.indexOf('egress_link_direction') > -1)
           params.ingressParam = condition.find(c => c.indexOf('common_ingress_link_id') > -1 || c.indexOf('ingress_link_direction') > -1)
           let bandwidthAll = 0
@@ -109,10 +118,10 @@ export default {
           }
           if (egressLinkId && ingressLinkId) {
             this.cnLinkInfo.forEach(e => {
-              if (ingressLinkId == e.originalLinkId) {
+              if (ingressLinkId === e.originalLinkId) {
                 bandwidthAll += e.bandwidth
               }
-              if (egressLinkId == e.originalLinkId) {
+              if (egressLinkId === e.originalLinkId) {
                 bandwidthAll += e.bandwidth
               }
             })
@@ -129,6 +138,7 @@ export default {
       this.loading = true
       get(api.linkMonitor.networkAnalysis, params).then(res => {
         if (res.code === 200) {
+          this.showError = false
           this.isNoData = res.data.result.length === 0
           const data = {
             establishLatencyMs: res.data.result[0].establishLatencyMs || null,
@@ -139,10 +149,17 @@ export default {
           }
           this.linkTrafficListData = res.data.result[0]
           this.linkTrafficListData.npmScore = computeScore(data)
+        } else {
+          this.showError = true
+          // todo 此时返回的是msg，后期记得改
+          this.errorMsg = res.msg
+          // this.errorMsg = res.message
         }
       }).catch(e => {
         console.error(e)
-        this.isNoData = true
+        this.showError = true
+        this.errorMsg = e.message
+        // this.isNoData = true
       }).finally(() => {
         this.loading = false
       })
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index bb46e9cf..85ebc24b 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -2,6 +2,7 @@
   <div class="network-overview-apps">
     <div class="network-overview-apps-header">
       <div class="network-overview-apps-title">{{$t('networkOverview.appType.providerAndApp')}}</div>
+      <chart-error v-if="showError" tooltip :content="errorMsg" max-width="350" width="280" />
     </div>
 
     <div class="app-cards">
@@ -137,6 +138,7 @@ export default {
   mixins: [chartMixin],
   data () {
     return {
+      testData: '测试值',
       appData: [],
       // 假数据
       appTempData: [],
@@ -163,7 +165,9 @@ export default {
       timerSearch: null,
       loadingBody: false,
       curTabState: curTabState,
-      urlChangeParams: {}
+      urlChangeParams: {},
+      showError: false,
+      errorMsg: ''
     }
   },
   props: {
@@ -254,6 +258,7 @@ export default {
           })
         }
         if (res[0].code === 200 && res[1].code === 200) {
+          this.showError = false
           const prevData = res[0].data.result
           const data = res[1].data.result
           let toCompareType = 'bytes'
@@ -281,9 +286,13 @@ export default {
               })
             }
           })
+        } else {
+          this.showError = true
+          this.errorMsg = res[0].message
         }
       }).catch(e => {
-        console.error(e)
+        this.showError = true
+        this.errorMsg = e.message
         this.isNoData = true
       }).finally(() => {
         this.toggleLoading(false)
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index 6b92ec78..1d5fc286 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="line network">
-    <div class="line-header">
+    <chart-error v-if="showError" :content="errorMsg" />
+    <div class="line-header" v-if="!showError">
       <div class="line-header-left">
         <div class="line-value-active" v-if="lineTab"></div>
         <div class="line-value">
@@ -44,8 +45,8 @@
       </div>
     </div>
     <div style="height: calc(100% - 74px); position: relative">
-      <chart-no-data v-if="isNoData"></chart-no-data>
-      <div class="chart-drawing" v-show="showMarkLine && !isNoData" id="overviewLineChart"></div>
+      <chart-no-data v-if="isNoData && !showError"></chart-no-data>
+      <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" id="overviewLineChart"></div>
 <!--      todo 后续改动，此处为框选返回-->
 <!--      <div id="brushBtn" style="position: absolute;left: 0;top: 0;" v-show="mouseDownFlag">-->
 <!--        <el-button @click.stop="backBrushHistory">返回</el-button>-->
@@ -69,9 +70,11 @@ import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import ChartError from '@/components/common/Error'
 export default {
   name: 'NetworkOverviewLine',
   components: {
+    ChartError,
     ChartNoData
   },
   props: {
@@ -127,7 +130,9 @@ export default {
       dynamicVariable: '',
       showMarkLine: true,
       mouseDownFlag: false,
-      brushHistory: []
+      brushHistory: [],
+      showError: false,
+      errorMsg: ''
     }
   },
   watch: {
@@ -183,9 +188,14 @@ export default {
         params.q = this.queryCondition
       }
       this.toggleLoading(true)
+
       get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
+        this.errorMsg = res.message
+
         if (res.code === 200) {
           this.isNoData = res.data.result.length === 0
+          this.showError = false
+
           if (this.isNoData) {
             this.mpackets = [
               { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
@@ -312,9 +322,14 @@ export default {
               })
             }
           })
+        } else {
+          this.showError = true
+          this.errorMsg = res.message
         }
       }).catch(e => {
         console.error(e)
+        this.showError = true
+        this.errorMsg = e.message
         this.isNoData = true
       }).finally(() => {
         this.toggleLoading(false)
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
index 4d025048..9a5c7818 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
@@ -1,18 +1,24 @@
 <template>
   <div class="performance-event">
-    <div class="performance-event-title"><i class="cn-icon cn-icon-a-NetworkPerformanceEvent"></i>{{$t('network.networkPerEvent')}}</div>
+    <div class="performance-event-title">
+      <i class="cn-icon cn-icon-a-NetworkPerformanceEvent"></i>{{$t('network.networkPerEvent')}}
+    </div>
     <div class="performance-event-value">
       <div class="performance-event-pie">
         <chart-no-data v-if="isNoData"></chart-no-data>
+        <chart-error v-if="showError1" info :content="errorMsg1" />
         <div class="chart-drawing" id="chart1" v-show="!isNoData"></div>
       </div>
       <div class="performance-event-pie-hr"></div>
       <div class="performance-event-pie">
         <chart-no-data v-if="isNoData2"></chart-no-data>
+        <chart-error v-if="showError1" info :content="errorMsg1" />
         <div class="chart-drawing" id="chart2" v-show="!isNoData2"></div>
       </div>
     </div>
-    <el-button class="pie-button" size="small" @click="routerJump">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
+    <el-button class="pie-button" size="small" @click="routerJump">
+      {{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i>
+    </el-button>
   </div>
 </template>
 
@@ -25,6 +31,7 @@ import { api } from '@/utils/api'
 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: 'NetworkOverviewPerformanceEvent',
   setup () {
@@ -35,6 +42,7 @@ export default {
   },
   mixins: [chartMixin],
   components: {
+    ChartError,
     ChartNoData
   },
   data () {
@@ -43,12 +51,17 @@ export default {
       isNoData: false,
       isNoData2: false,
       loading1: false,
-      loading2: false
+      loading2: false,
+      showError1: false,
+      showError2: false,
+      errorMsg1: '',
+      errorMsg2: ''
     }
   },
   methods: {
     init () {
       const params = {
+        // startTime: true,
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime)
       }
@@ -60,6 +73,7 @@ export default {
         this.loading1 = true
         get(api.netWorkOverview.eventSeverity, params).then(res => {
           if (res.code === 200) {
+            this.showError1 = false
             if (res.data.result.length === 0) {
               this.isNoData = true
               return
@@ -88,8 +102,14 @@ export default {
             this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index })
             this.myChart.setOption(this.chartOption)
           } else {
-            this.isNoData = true
+            this.isNoData = false
+            this.showError1 = true
+            this.errorMsg1 = res.message
           }
+        }).catch((e) => {
+          this.isNoData = false
+          this.showError1 = true
+          this.errorMsg1 = e.message
         }).finally(() => {
           this.loading1 = false
         })
@@ -100,6 +120,8 @@ export default {
         this.loading2 = true
         get(api.netWorkOverview.eventType, params).then(res => {
           if (res.code === 200) {
+            this.showError2 = false
+
             if (res.data.result.length === 0) {
               this.isNoData2 = true
               return
@@ -119,7 +141,15 @@ export default {
             }
             this.chartOption2.series[0].data = res.data.result
             this.myChart2.setOption(this.chartOption2)
+          } else {
+            this.isNoData2 = false
+            this.showError2 = true
+            this.errorMsg2 = res.message
           }
+        }).catch((e) => {
+          this.isNoData2 = false
+          this.showError2 = true
+          this.errorMsg2 = e.message
         }).finally(() => {
           this.loading2 = false
         })
diff --git a/src/views/charts2/charts/npm/NpmEventsHeader.vue b/src/views/charts2/charts/npm/NpmEventsHeader.vue
index caa7f5aa..cb3bce5f 100644
--- a/src/views/charts2/charts/npm/NpmEventsHeader.vue
+++ b/src/views/charts2/charts/npm/NpmEventsHeader.vue
@@ -5,7 +5,8 @@
       <div class="npm-header-body-severity-icon" :class="item.eventSeverity"></div>
       <div class="npm-header-body-severity-value">{{item.eventSeverity}}</div>
     </div>
-    <div class="npm-header-body-total">{{item.count}}</div>
+    <chart-error v-if="showError" tooltip :content="errorMsg" />
+    <div v-else class="npm-header-body-total">{{item.count}}</div>
   </div>
  </div>
 </template>
@@ -15,8 +16,10 @@ import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import chartMixin from '@/views/charts2/chart-mixin'
+import ChartError from '@/components/common/Error'
 export default {
   name: 'NpmEventsHeader',
+  components: { ChartError },
   mixins: [chartMixin],
   data () {
     return {
@@ -47,7 +50,9 @@ export default {
           index: 4
         }
       ],
-      type: 'severity'
+      type: 'severity',
+      showError: false,
+      errorMsg: ''
     }
   },
   watch: {
@@ -67,6 +72,7 @@ export default {
       this.toggleLoading(true)
       get(api.npm.events.list, params).then(res => {
         if (res.code === 200) {
+          this.showError = false
           res.data.result.forEach(t => {
             this.chartData.forEach(d => {
               if (d.eventSeverity === t.eventSeverity) {
@@ -74,7 +80,13 @@ export default {
               }
             })
           })
+        } else {
+          this.showError = true
+          this.errorMsg = res.message
         }
+      }).catch(error => {
+        this.showError = true
+        this.errorMsg = error.message
       }).finally(() => {
         this.toggleLoading(false)
       })
diff --git a/src/views/charts2/charts/npm/NpmIpMap.vue b/src/views/charts2/charts/npm/NpmIpMap.vue
index 1cc407af..bfd6c7c5 100644
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/src/views/charts2/charts/npm/NpmIpMap.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="cn-chart__map-title" v-if="queryCondition">{{$t('npm.clientLocation')}}</div>
+  <div class="cn-chart__map-title" v-if="queryCondition">
+    {{$t('npm.clientLocation')}}
+    <chart-error v-if="showError" tooltip :content="errorMsg" />
+  </div>
   <div class="cn-chart__map" :class="{'cn-chart__map-drilldown': queryCondition}">
     <div class="map-canvas" id="npmDrillDownMap"></div>
   </div>
@@ -17,8 +20,10 @@ import { api, getData } from '@/utils/api'
 import { get } from '@/utils/http'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
+import ChartError from '@/components/common/Error'
 export default {
   name: 'NpmIpMap',
+  components: { ChartError },
   setup () {
     const { query } = useRoute()
     const tabIndex = ref(query.tabIndex || '')
@@ -37,7 +42,9 @@ export default {
       countryImageSeries: null,
       // Server | Client
       trafficDirection: 'Server',
-      curTabState: curTabState
+      curTabState: curTabState,
+      showError: false,
+      errorMsg: ''
     }
   },
   mixins: [chartMixin],
@@ -107,10 +114,16 @@ 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
               }
             })
             mapData.forEach(t => {
@@ -128,11 +141,18 @@ export default {
             })
             this.loadMarkerData(imageSeries, mapData)
           })
+        }).catch(error => {
+          this.showError = true
+          // todo 此处需要看最后返回的数据
+          this.errorMsg = error.message
         }).finally(() => {
           this.toggleLoading(false)
         })
       } catch (e) {
         console.error(e)
+        this.showError = true
+        // todo 此处需要看最后返回的数据
+        this.errorMsg = e.message
       }
     },
     loadMarkerData (imageSeries, data) {
diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue
index a7403cae..f40a0144 100644
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="npm-recent">
-    <div class="npm-recent-title">{{ $t('network.recentEvents') }}</div>
+    <div class="npm-recent-title">
+      {{ $t('network.recentEvents') }}
+      <chart-error v-if="showError" tooltip :content="errorMsg" />
+    </div>
     <el-table
         :id="`tabTable_${index}`"
         :ref="`dataTable_${index}`"
@@ -51,9 +54,11 @@ import { getSecond, dateFormatByAppearance } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
+import ChartError from '@/components/common/Error'
 
 export default {
   name: 'NpmRecentEvents',
+  components: { ChartError },
   mixins: [chartMixin],
   setup () {
     const { query } = useRoute()
@@ -71,7 +76,9 @@ export default {
         { label: 'network.severity', prop: 'eventSeverity' },
         { label: 'network.entity', prop: 'eventKey' },
         { label: 'detections.eventType', prop: 'eventType' }
-      ]
+      ],
+      showError: false,
+      errorMsg: ''
     }
   },
   watch: {
@@ -107,6 +114,7 @@ export default {
       this.toggleLoading(true)
       get(url, params).then(res => {
         if (res.code === 200) {
+          this.showError = false
           this.isNoData = res.data.result.length === 0
           res.data.result.forEach(e => {
             if (e.startTime) {
@@ -115,8 +123,13 @@ export default {
           })
           this.tableData = res.data.result
         } else {
-          this.isNoData = true
+          // this.isNoData = true
+          this.showError = true
+          this.errorMsg = res.message
         }
+      }).catch(error => {
+        this.showError = true
+        this.errorMsg = error.message
       }).finally(() => {
         this.toggleLoading(false)
       })
diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue
index 660fa767..05adaa59 100644
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -19,8 +19,9 @@
       </div>
     </div>
     <div class="npm-traffic-line-body">
-      <chart-no-data v-if="isNoData"></chart-no-data>
-      <div v-show="!isNoData" class="chart-drawing" id="chart"></div>
+      <chart-error v-if="showError" :content="errorMsg" />
+      <chart-no-data v-if="isNoData && !showError"></chart-no-data>
+      <div v-show="!isNoData && !showError" class="chart-drawing" id="chart"></div>
     </div>
   </div>
 </template>
@@ -40,10 +41,12 @@ import _ from 'lodash'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import ChartError from '@/components/common/Error'
 export default {
   name: 'NpmTrafficLine',
   mixins: [chartMixin],
   components: {
+    ChartError,
     ChartNoData
   },
   setup () {
@@ -114,7 +117,9 @@ export default {
           value: 'pktRetransPercent',
           label: this.$t('overall.packetRetrans')
         }
-      ]
+      ],
+      showError: false,
+      errorMsg: ''
     }
   },
   watch: {
@@ -363,6 +368,9 @@ export default {
                   this.echartsInit(this.mpackets)
                 }
               })
+            } else {
+              this.showError = true
+              this.errorMsg = res.message
             }
           }).catch(e => {
             this.isNoData = true
diff --git a/src/views/charts2/charts/npm/RelatedSessions.vue b/src/views/charts2/charts/npm/RelatedSessions.vue
index af90ddb3..78208a82 100644
--- a/src/views/charts2/charts/npm/RelatedSessions.vue
+++ b/src/views/charts2/charts/npm/RelatedSessions.vue
@@ -2,7 +2,7 @@
  <div class="npm-sessions">
    <div class="npm-sessions-title">
      {{$t('npm.relatedSessions')}}
-     <chart-error v-if="showError" small :content="errorMsg" />
+     <chart-error v-if="showError" tooltip :content="errorMsg" />
    </div>
    <div class="npm-sessions-div">
      <div class="npm-sessions-div-green" id="green" v-show="clientSessions > 0"></div>