fix: 部分图表增加 no data

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;

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;
@@ -58,5 +59,3 @@
     }
   }
 }
-
-}

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

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

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,

src/views/charts2/charts/NetworkOverviewTabs.vue

@@ -140,7 +140,6 @@
         </el-tabs>
       </el-popover>
     </div>
-
   </div>
 
 </template>

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">