fix: 请求添加error处理

2022-11-21 17:31:30 +08:00
parent 69735e438f
commit c3ffd01363
19 changed files with 392 additions and 155 deletions
--- 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;
--- 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 {
--- 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;
--- 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;
--- 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;
--- 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) {
--- 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)
      })
--- 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,
--- 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 () {
--- 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
        }
--- a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue
+++ b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue
@@ -1,6 +1,9 @@
 <template>
  <div class="link-traffic-list">
    <loading :loading="loading"></loading>
+
+    <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>
@@ -35,6 +38,7 @@
        <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.pktRetransPercent, unitTypes.percent).join('')}}</div>
      </div>
    </div>
+  </div>
 </template>

 <script>
@@ -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
      })
--- 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)
--- 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)
--- 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
        })
--- 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)
      })
--- 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) {
--- 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)
      })
--- 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
--- 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>