fix: 部分文件添加error处理

2022-11-24 14:10:28 +08:00
parent e2d6707249
commit 8e698f3b78
3 changed files with 52 additions and 30 deletions
--- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
+++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="line network dns-traffic-line">
-    <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">
@@ -138,7 +139,9 @@ export default {
      leftOffset: 0,
      sizes: [3, 4, 6, 8, 9, 10],
      dynamicVariable: '',
-      showMarkLine: true
+      showMarkLine: true,
+      showError: false,
+      errorMsg: ''
    }
  },
  watch: {
@@ -167,7 +170,7 @@ export default {
      overwriteUrl(newUrl)
    },
    timeFilter: {
-      handler (n) {
+      handler () {
        if (this.lineTab) {
          this.init(this.lineMetric, this.showMarkLine, 'active')
        } else {
@@ -195,6 +198,7 @@ export default {
      }
      get(url, params).then((res) => {
        if (res.code === 200) {
+          this.showError = false
          this.isNoData = res.data.result.length === 0
          if (this.isNoData) {
            this.lineTab = ''
@@ -204,7 +208,7 @@ export default {
              { analysis: {}, name: 'network.outbound', class: 'outbound', 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
@@ -266,10 +270,16 @@ export default {
              })
            }
          })
+        } else {
+          this.isNoData = false
+          this.showError = true
+          this.errorMsg = res.message
        }
      }).catch(e => {
        console.error(e)
-        this.isNoData = true
+        this.isNoData = false
+        this.showError = true
+        this.errorMsg = e.message
      }).finally(() => {
        this.toggleLoading(false)
      })
@@ -295,7 +305,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: {
@@ -339,7 +349,7 @@ export default {
        }
      })
      if (!show) {
-        this.chartOption.series.forEach((t, i) => {
+        this.chartOption.series.forEach((t) => {
          t.markLine.label.show = false
          t.markLine = []
        })
@@ -377,8 +387,7 @@ export default {
            }
          })
        })
-        const str = stackedLineTooltipFormatter(params)
-        return str
+        return stackedLineTooltipFormatter(params)
      }
      this.showMarkLine = true
      this.myChart.setOption(this.chartOption)
@@ -441,7 +450,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')
@@ -456,7 +465,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/LinkTrafficSankey.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue
@@ -2,21 +2,23 @@
  <div class="link-traffic-sankey">
    <el-tabs v-model="tab">
      <el-tab-pane :label="$t('linkMonitor.ingress')" name="0">
+        <chart-error v-if="showError" :content="errorMsg"></chart-error>
        <chart-no-data v-if="ingress"></chart-no-data>
-        <div v-if="tab == 0" class="chart-drawing" id="link-traffic-sankey-0"></div>
+        <div v-if="parseInt(tab) === 0 && !showError" class="chart-drawing" id="link-traffic-sankey-0"></div>
      </el-tab-pane>
      <el-tab-pane :label="$t('linkMonitor.egress')" name="1">
+        <chart-error v-if="showError" :content="errorMsg"></chart-error>
        <chart-no-data v-if="egress"></chart-no-data>
-        <div v-if="tab == 1" class="chart-drawing" id="link-traffic-sankey-1"></div>
+        <div v-if="parseInt(tab) === 1 && !showError" class="chart-drawing" id="link-traffic-sankey-1"></div>
      </el-tab-pane>
    </el-tabs>
-    <template v-if="tab == 0 && !ingress">
+    <template v-if="parseInt(tab) === 0 && !ingress">
      <div class="sankey__label" style="left: 5%;">External Locations</div>
      <div class="sankey__label" style="left: 35%;">Next-Hop Internets</div>
      <div class="sankey__label" style="left: 63%;">Links</div>
      <div class="sankey__label" style="right: 9%; transform: translateX(50%)">Internal Locations</div>
    </template>
-    <template v-else-if="tab == 1 && !egress">
+    <template v-else-if="parseInt(tab) === 1 && !egress">
      <div class="sankey__label" style="left: 5%;">Internal Locations</div>
      <div class="sankey__label" style="left: 33.2%;">Links</div>
      <div class="sankey__label" style="left: 64.5%;">Next-Hop Internets</div>
@@ -38,11 +40,13 @@ import { useRoute } from 'vue-router'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 import unitConvert from '@/utils/unit-convert'
 import { storageKey, unitTypes } from '@/utils/constants'
+import ChartError from '@/components/common/Error'

 export default {
  name: 'LinksTrafficSankey',
  mixins: [chartMixin],
  components: {
+    ChartError,
    ChartNoData
  },
  setup () {
@@ -63,7 +67,9 @@ export default {
      egress: false,
      unitConvert,
      unitTypes,
-      cnLinkInfo: JSON.parse(localStorage.getItem(storageKey.linkInfo))
+      cnLinkInfo: JSON.parse(localStorage.getItem(storageKey.linkInfo)),
+      showError: false,
+      errorMsg: ''
    }
  },
  watch: {
@@ -78,13 +84,14 @@ export default {
      overwriteUrl(newUrl)
    },
    timeFilter: {
-      handler (n) {
+      handler () {
        this.linkTrafficSankeyDataRequest(this.tab)
      }
    }
  },
  methods: {
    linkTrafficSankeyDataRequest (n) {
+      n = parseInt(n)
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime)
@@ -93,19 +100,19 @@ export default {
      if (this.queryCondition) {
        const condition = this.queryCondition.toLowerCase().split(' or ')
        if (condition.length > 1) {
-          if (n == 0) {
+          if (n === 0) {
            params.q = condition.find(c => c.indexOf('common_ingress_link_id') > -1 || c.indexOf('ingress_link_direction') > -1)
          } else {
            params.q = condition.find(c => c.indexOf('common_egress_link_id') > -1 || c.indexOf('egress_link_direction') > -1)
          }
        }
-        if (n == 0) {
+        if (n === 0) {
          url = api.linkMonitor.drilldownQuadrupleIngressAnalysis // 入口
        } else {
          url = api.linkMonitor.drilldownQquadrupleEgressAnalysis // 出口
        }
      } else {
-        if (n == 0) {
+        if (n === 0) {
          url = api.linkMonitor.quadrupleIngressAnalysis // 入口
        } else {
          url = api.linkMonitor.quadrupleEgressAnalysis // 出口
@@ -114,26 +121,32 @@ export default {
      this.toggleLoading(true)
      get(url, params).then(res => {
        if (res.code === 200) {
-          if (n == 0) {
+          this.showError = false
+          if (n === 0) {
            this.ingress = res.data.result.length === 0
          } else {
            this.egress = res.data.result.length === 0
          }
-          this.dataProcessing(res.data.result, n)
+          this.dataProcessing(res.data.result, parseInt(n))
+        } else {
+          this.showError = true
+          this.errorMsg = res.message
        }
      }).catch(e => {
        console.error(e)
        this.egress = true
        this.ingress = true
+        this.showError = true
+        this.errorMsg = e.message
      }).finally(() => {
        this.toggleLoading(false)
      })
    },
    dataProcessing (result, tab) {
-      if (tab == 0) {
+      if (tab === 0) {
        result.forEach(t => {
          this.cnLinkInfo.forEach(e => {
-            if (t.commonIngressLinkId == e.originalLinkId) {
+            if (t.commonIngressLinkId === e.originalLinkId) {
              t.linkId = e.linkId
              t.linkDirection = e.nextHop
              t.bandwidth = e.bandwidth
@@ -146,7 +159,7 @@ export default {
      } else {
        result.forEach(t => {
          this.cnLinkInfo.forEach(e => {
-            if (t.commonEgressLinkId == e.originalLinkId) {
+            if (t.commonEgressLinkId === e.originalLinkId) {
              t.linkId = e.linkId
              t.bandwidth = e.bandwidth
              t.linkDirection = e.nextHop
@@ -170,7 +183,7 @@ export default {
      const links1 = []
      const links2 = []
      const linksAnalyze2 = []
-      if (tab == 1) {
+      if (tab === 1) {
        result.forEach(r => {
          // 第一列
          if (!data0.some(d => d.name === r.client)) {
@@ -357,7 +370,7 @@ export default {
    echartsInit (tab, data, links) {
      const _this = this
      let dom = ''
-      if (tab == 0) {
+      if (tab === 0) {
        dom = document.getElementById('link-traffic-sankey-0')
        if (this.myChart) {
          this.myChart.dispose()
@@ -400,14 +413,14 @@ export default {
      }
      this.chartOption.series[0].data = data
      this.chartOption.series[0].links = links
-      if (tab == 0) {
+      if (tab === 0) {
        this.myChart.setOption(this.chartOption)
      } else {
        this.myChart2.setOption(this.chartOption)
      }
    },
    resize () {
-      if (this.tab == 0) {
+      if (this.tab === 0) {
        this.myChart.resize()
      } else {
        this.myChart2.resize()
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -349,7 +349,7 @@ export default {
        console.error(e)
        this.showError = true
        this.errorMsg = e.message
-        this.isNoData = true
+        this.isNoData = false
      }).finally(() => {
        this.toggleLoading(false)
      })