fix: 1.对浏览器resize 事件进行优化2.更改kBps为Kbps

src/assets/css/components/components/layout/layout.scss

@@ -15,6 +15,16 @@
     display: flex;
     align-items: center;
     flex-grow: 1;
+    .header__left-breadcrumb.el-breadcrumb {
+      padding-left: 20px;
+      .header__left-breadcrumb-item.el-breadcrumb-item {
+        display: inline-block; max-width: 300px;
+        height: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
 
     .shrink-button {
       margin-left: 20px;

src/components/layout/Header.vue

@@ -3,8 +3,8 @@
     <!--导航面包屑-->
     <div class="header__left">
       <span @click="shrink" class="shrink-button" :class="{'shrink-button--collapse': isShrink}"><i class="cn-icon cn-icon-expand"></i></span>
-      <el-breadcrumb separator="/" style="padding-left: 20px; padding-top: 6px;">
+      <el-breadcrumb class="header__left-breadcrumb" separator="/">
-        <el-breadcrumb-item :title="item" v-for="item in breadcrumb" :key="item" style="display: inline-block; max-width: 300px; height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+        <el-breadcrumb-item class="header__left-breadcrumb-item" :title="item" v-for="item in breadcrumb" :key="item">
           {{item}}
         </el-breadcrumb-item>
       </el-breadcrumb>

src/mixins/common.js

@@ -19,7 +19,8 @@ export default {
         refresh: false,
         query: false
       },
-      timeout: null
+      timeout: null,
+      debounceFunc: null
     }
   },
   methods: {

src/views/charts/PanelChartList.vue

@@ -172,10 +172,11 @@ export default {
     }
   },
   mounted () {
-    window.addEventListener('resize', this.$_.debounce(this.chartHeightData, 100))
+    this.debounceFunc = this.$_.debounce(this.chartHeightData, 100)
+    window.addEventListener('resize', this.debounceFunc)
   },
   beforeUnmount () {
-    window.removeEventListener('resize', this.chartHeightData)
+    window.removeEventListener('resize', this.debounceFunc)
   },
   computed: {
     anchorPoint () {

src/views/charts/charts/ChartIpOpenPortBar.vue

@@ -101,10 +101,11 @@ export default {
     }
   },
   mounted () {
-    window.addEventListener('resize', this.$_.debounce(this.resize, 200))
+    this.debounceFunc = this.$_.debounce(this.resize, 200)
+    window.addEventListener('resize', this.debounceFunc)
   },
   beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
+    window.removeEventListener('resize', this.debounceFunc)
   },
   watch: {
     chartData: {

src/views/charts/charts/ChartSanKey.vue

@@ -111,10 +111,11 @@ export default {
     }
   },
   mounted () {
-    window.addEventListener('resize', this.$_.debounce(this.resize))
+    this.debounceFunc = this.$_.debounce(this.resize, 100)
+    window.addEventListener('resize', this.debounceFunc)
   },
   beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
+    window.removeEventListener('resize', this.debounceFunc)
   },
   watch: {
     chartData: {

src/views/charts/charts/ChartTabs.vue

@@ -45,7 +45,11 @@ export default {
     }
   },
   mounted () {
-    window.addEventListener('resize', this.$_.debounce(this.resize, 300))
+    this.debounceFunc = this.$_.debounce(this.resize, 300)
+    window.addEventListener('resize', this.debounceFunc)
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.debounceFunc)
   },
   setup (props) {
     let activeTab = ''

src/views/charts/charts/chart-echart-mixin.js

@@ -84,7 +84,7 @@ export default {
         }
       })
     },
-    test () {
+    setTimeoutResize () {
       setTimeout(() => {
         this.chartResize()
       }, 400)
@@ -98,7 +98,6 @@ export default {
           this.myChart2.setOption(this.chartOption2, refresh)
           this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
         }
-        window.addEventListener('resize', this.$_.debounce(this.test, 400))
       } finally {
         setTimeout(() => {
           this.$emit('showLoading', false)
@@ -106,8 +105,12 @@ export default {
       }
     }
   },
+  mounted () {
+    this.debounceFunc = this.$_.debounce(this.setTimeoutResize, 400)
+    window.addEventListener('resize', this.debounceFunc)
+  },
   beforeUnmount () {
-    window.removeEventListener('resize', this.test)
+    window.removeEventListener('resize', this.debounceFunc)
   },
   watch: {
     chartData: {

src/views/detections/Index.vue

@@ -612,7 +612,8 @@ export default {
   mounted () {
     this.queryFilter()
     this.queryList()
-    window.addEventListener('resize', this.$_.debounce(this.resize, 300))
+    this.debounceFunc = this.$_.debounce(this.resize, 300)
+    window.addEventListener('resize', this.debounceFunc)
   },
   watch: {
     eventSeverityData: {
@@ -730,7 +731,7 @@ export default {
     }
   },
   beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
+    window.removeEventListener('resize', this.debounceFunc)
   },
   setup () {
     const { params } = useRoute()

src/views/entityExplorer/EntityDetail.vue

@@ -110,10 +110,11 @@ export default {
     }
   },
   mounted () {
-    window.addEventListener('resize', this.$_.debounce(this.resize, 200))
+    this.debounceFunc = this.$_.debounce(this.resize, 400)
+    window.addEventListener('resize', this.debounceFunc)
   },
   beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
+    window.removeEventListener('resize', this.debounceFunc)
   },
   computed: {
     iconClass () {

src/views/entityExplorer/entityList/Row.vue

@@ -94,8 +94,8 @@
                     entityData.bytesSentRate
                       ? unitConvert(
                           entityData.bytesSentRate,
-                          unitTypes.byte,
+                          unitTypes.bps,
-                        ).join(' ') + 'ps'
+                        ).join(' ')
                       : '-'
                   }}</span>
                   <!-- 曲线-->

src/views/entityExplorer/entityList/detailOverview/App.vue

@@ -39,7 +39,7 @@
         <div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
         <div class="row__contents">
           <div class="row__content">
-            <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
+            <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ')}}</div>
             <!-- 曲线-->
             <div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
           </div>

src/views/entityExplorer/entityList/detailOverview/Domain.vue

@@ -43,7 +43,7 @@
         <div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
         <div class="row__contents">
           <div class="row__content">
-            <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
+            <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ')}}</div>
             <!-- 曲线-->
             <div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
           </div>

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -39,7 +39,7 @@
         <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.queryRate')}}</div>
         <div class="row__contents">
           <div class="row__content">
-            <div class="row__charts-msg">{{unitConvert(entityData.queryRate, unitTypes.byte).join(' ')}}ps</div>
+            <div class="row__charts-msg">{{unitConvert(entityData.queryRate, unitTypes.bps).join(' ')}}</div>
             <!-- 曲线-->
             <div class="row__charts" :id="`entityDnsServerInfo${entityData.ipAddr}`"></div>
           </div>
@@ -62,7 +62,7 @@
         <div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
         <div class="row__contents">
           <div class="row__content">
-            <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
+            <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ')}}</div>
             <!-- 曲线-->
             <div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`"></div>
           </div>

src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js

@@ -350,11 +350,12 @@ export default {
     }
   },
   mounted () {
-    window.addEventListener('resize', this.$_.debounce(this.resize, 200))
+    this.debounceFunc = this.$_.debounce(this.resize, 200)
+    window.addEventListener('resize', this.debounceFunc)
     this.chartOption = _.cloneDeep(entityListLineOption)
     setTimeout(() => { this.queryEntityDetail() })
   },
   beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
+    window.removeEventListener('resize', this.debounceFunc)
   }
 }

src/views/entityExplorer/entityList/entityListMixin.js

@@ -313,7 +313,8 @@ export default {
     }
   },
   mounted () {
-    window.addEventListener('resize', this.$_.debounce(this.resize, 200))
+    this.debounceFunc = this.$_.debounce(this.resize, 200)
+    window.addEventListener('resize', this.debounceFunc)
     this.chartOption = _.cloneDeep(entityListLineOption)
     this.entityData = _.cloneDeep(this.entity)
     setTimeout(() => {
@@ -323,6 +324,6 @@ export default {
     })
   },
   beforeUnmount () {
-    window.removeEventListener('resize', this.resize)
+    window.removeEventListener('resize', this.debounceFunc)
   }
 }