fix: 部分图表增加 no data

2022-08-10 09:24:53 +08:00
parent e6e6ccdabd
commit 4d712ebbb0
7 changed files with 136 additions and 91 deletions
--- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
@@ -21,6 +21,9 @@
    padding: 0 20px;
    display: flex;
    flex-direction: column;
+    .panel-chart__no-data {
+      height: calc(100% - 46px);
+    }
    .ddos-detection-type {
      display: flex;
      justify-content: space-between;
--- a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
@@ -18,20 +18,21 @@
  }
  .performance-event-value {
    width: 100%;
-    height: calc(100% - 36px);
-    .performance-event-pie {
-      height: calc(100% - 47px);
-      width: 100%;
-      .chart-drawing {
-        height: 50%;
-        width: 100%;
-      }
+    height: calc(100% - 81px);
    .performance-event-pie-hr {
      height: 1px;
      width: 310px;
      margin: auto;
      background: #E2E5EC;
    }
+    .performance-event-pie {
+      height: 50%;
+      width: 100%;
+      .chart-drawing {
+        height: 100%;
+        width: 100%;
+      }
+    }
  }
  .pie-button.el-button {
    width: 96px;
@@ -57,6 +58,4 @@
      }
    }
  }
-  }
-
 }
--- a/src/views/charts2/charts/NetworkOverviewDdosDetection.vue
+++ b/src/views/charts2/charts/NetworkOverviewDdosDetection.vue
@@ -2,7 +2,8 @@
 <div class="ddos-detection">
   <div class="ddos-detection-title"><i class="cn-icon cn-icon-a-DDosDetection"></i>{{$t('network.ddosDetection')}}</div>
   <div class="ddos-detection-value">
-     <div class="ddos-detection-type">
+     <chart-no-data v-if="isNoData"></chart-no-data>
+     <div class="ddos-detection-type" v-else>
       <div class="ddos-detection-type-value">
         <div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
         <div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackerCount') || 0}}</div>
@@ -25,14 +26,19 @@
 import { api } from '@/utils/api'
 import { get } from '@/utils/http'
 import { getSecond } from '@/utils/date-util'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
  name: 'NetworkOverviewDdosDetection',
  props: {
    timeFilter: Object
  },
+  components: {
+    ChartNoData
+  },
  data () {
    return {
-      ddosData: {}
+      ddosData: {},
+      isNoData: false
    }
  },
  methods: {
@@ -43,6 +49,11 @@ export default {
      }
      get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {
        if (res.code === 200) {
+          // res.data.result.length = 0
+          if (res.data.result.length === 0) {
+            this.isNoData = true
+            return
+          }
          this.ddosData = res.data.result[0]
        }
      })
--- a/src/views/charts2/charts/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/NetworkOverviewLine.vue
@@ -1,5 +1,7 @@
 <template>
  <div class="line network">
+    <chart-no-data v-if="isNoData"></chart-no-data>
+    <template v-else>
      <div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
      <div class="line-value-active" v-if="activeShow"></div>
      <div class="line-value">
@@ -55,6 +57,7 @@
          </div>
        </div>
      </div>
+    </template>
  </div>
 </template>

@@ -69,12 +72,16 @@ import _ from 'lodash'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
  name: 'NetworkOverviewLine',
  props: {
    chart: Object,
    timeFilter: Object
  },
+  components: {
+    ChartNoData
+  },
  setup () {
    return {
      myChart: shallowRef(null)
@@ -132,7 +139,8 @@ export default {
      echartsType: 'Bits/s',
      echartsData: {},
      dynamicVariable: '',
-      showMarkLine: true
+      showMarkLine: true,
+      isNoData: false
    }
  },
  watch: {
@@ -157,6 +165,11 @@ export default {
      }
      get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
        if (res.code === 200) {
+          // res.data.result.length = 0
+          if (res.data.result.length === 0) {
+            this.isNoData = true
+            return
+          }
          res.data.result.forEach((t, i) => {
            if (t.type === 'bytes' && val === 'Bits/s') {
              this.mpackets[0].analysis = t.totalBitsRate.analysis
--- a/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
+++ b/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
@@ -3,13 +3,17 @@
    <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">
-        <div class="chart-drawing" id="chart1"></div>
+        <chart-no-data v-if="isNoData"></chart-no-data>
+        <div class="chart-drawing" id="chart1" v-else></div>
+      </div>
      <div class="performance-event-pie-hr"></div>
-        <div class="chart-drawing" id="chart2"></div>
+      <div class="performance-event-pie">
+        <chart-no-data v-if="isNoData2"></chart-no-data>
+        <div class="chart-drawing" id="chart2" v-else></div>
+      </div>
    </div>
    <el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
  </div>
-  </div>
 </template>

 <script>
@@ -19,6 +23,7 @@ import { shallowRef } from 'vue'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
  name: 'NetworkOverviewPerformanceEvent',
  setup () {
@@ -30,9 +35,14 @@ export default {
  props: {
    timeFilter: Object
  },
+  components: {
+    ChartNoData
+  },
  data () {
    return {
-      timer: null
+      timer: null,
+      isNoData: false,
+      isNoData2: false
    }
  },
  methods: {
@@ -48,6 +58,11 @@ export default {
        this.chartOption = pieChartOption1
        get(api.netWorkOverview.eventSeverity, params).then(res => {
          if (res.code === 200) {
+            // res.data.result.length = 0
+            if (res.data.result.length === 0) {
+              this.isNoData = true
+              return
+            }
            res.data.result = res.data.result.map(t => {
              return {
                name: t.eventSeverity,
@@ -69,6 +84,11 @@ export default {
        this.chartOption2 = pieChartOption2
        get(api.netWorkOverview.eventType, params).then(res => {
          if (res.code === 200) {
+            // res.data.result.length = 0
+            if (res.data.result.length === 0) {
+              this.isNoData2 = true
+              return
+            }
            res.data.result = res.data.result.map(t => {
              return {
                name: t.eventType,
--- a/src/views/charts2/charts/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/NetworkOverviewTabs.vue
@@ -66,7 +66,7 @@
      </template>

    </el-tabs>
-    <div class="tab-search" >
+    <div class="tab-search">
      <div class="search-select"  v-if="drillDown">
        <span>{{$t('network.metric')}}:</span>
        <el-select v-model="metric"
@@ -140,7 +140,6 @@
        </el-tabs>
      </el-popover>
    </div>
-
  </div>

 </template>
--- a/src/views/charts2/charts/SingleValue.vue
+++ b/src/views/charts2/charts/SingleValue.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="single-value" v-for="(npm, index) in npmNetworkCycleData" :key="index">
+  <div class="single-value" v-for="(npm, index) in npmNetworkData" :key="index">
    <template v-if="index === 0">
      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
      <div class="single-value__content">