CN-501 feat: 响应式方案实施

package.json

@@ -24,6 +24,7 @@
     "lodash": "^4.17.21",
     "moment-timezone": "^0.5.33",
     "node-sass": "^4.14.1",
+    "postcss-plugin-px2rem": "^0.8.1",
     "postcss-px2rem-exclude": "0.0.6",
     "sass-loader": "^8.0.2",
     "sass-resources-loader": "^2.2.1",

postcss.config.js

@@ -1,9 +1,11 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
+    autoprefixer: {},
-    /* 'postcss-px2rem-exclude': {
+    'postcss-plugin-px2rem': {
-      remUnit: 16,
+      rootValue: 16,
-      exclude: /node_modules/i
+      exclude: /node_modules/i,
-    } */
+      minPixelValue: 3,
+      selectorBlackList: ['.html', 'iconfont', '.ttf', '.css']
+    }
   }
 }

public/index.html

@@ -14,15 +14,39 @@
     <div id="app"></div>
   </body>
   <style>
-    @media only screen  and (min-width : 1224px) {
+      @media only screen  and (min-width: 800px) {
-      html {
+          body,html{font-size: 12px !important;}
-        font-size: 12px !important;
+      } /*>=800的设备*/
-      }
+
-    }
+      @media only screen  and (min-width: 1024px) {
-    @media only screen  and (min-width : 1824px) {
+          body,html{font-size: 12px !important;}
-      html {
+      } /*>=1024的设备*/
-        font-size: 16px !important;
+
-      }
+      @media only screen  and (min-width: 1280px) {
-    }
+          body,html{font-size: 12px !important;}
+      }/*>=1280的设备*/
+
+      @media only screen  and (min-width: 1366px) {
+          body,html{font-size: 12px !important; }
+      }/*>=1366的设备*/
+
+      @media only screen  and (min-width: 1440px) {
+          body,html{font-size: 12px !important;}
+      }/*>=1440的设备*/
+
+      @media only screen  and (min-width: 1680px) {
+          body,html{font-size: 14px !important;}
+      }/*>=1680的设备*/
+
+      @media only screen  and (min-width: 1920px) {
+          body,html{font-size: 16px !important;}
+      }/*>=1920的设备*/
+
+      @media only screen  and (min-width: 2048px) {
+          body,html{font-size: 18px !important;}
+      }/*>=2048的设备*/
+      @media only screen  and (min-width: 2560px) {
+          body,html{font-size: 22px !important;}
+      }/*>=2560的设备*/
   </style>
 </html>

src/assets/css/components/views/charts/ChartOneSituationStatistics.scss

@@ -5,10 +5,12 @@
         align-items: center;
         margin-left: 33px;
         height: 100%;
-        .box__progress{
+        .box__progress {
             display: block;
-            width: 76px;
+            .el-progress-circle {
-            height: 76px;
+                height: 80px !important;
+                width: 80px !important;
+            }
             .el-progress__text span{
                 font-size: 16px;
             }

src/assets/css/components/views/charts/chartEchartWithTable.scss

@@ -10,7 +10,6 @@
           .cn-chart__body {
             flex: auto;
             display: flex;
-            overflow: hidden auto;
 
             .el-table {
               padding: 0 10px;
@@ -37,16 +36,19 @@
               height: calc(100% - 36px) !important;
             }*/
           }
-          .cn-chart__body.pie-with-table {
+          //.cn-chart__body.pie-with-table {
-            flex-basis: 40%;
+          //  flex-basis: 60%;
-          }
+          //}
           .cn-chart__footer.pie-with-table {
-            flex-basis: 60%;
             padding: 10px 30px 30px;
+            overflow: auto;
+            .pie-table .el-table__body-wrapper {
+              height: calc(100% - 40px) !important;
+            }
           }
         }
         .pie-table {
-          font-size: 14px;
+          font-size: 12px;
           color: #333333;
           font-weight: 500;
 

src/assets/css/components/views/charts/chartSingleValue.scss

@@ -44,14 +44,14 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      flex: 0 0 40%;
+      flex: 0 0 100px;
     }
 
     .single-value__icon {
       display: flex;
       justify-content: center;
-      width: 72px;
+      width: 56px;
-      height: 72px;
+      height: 56px;
       background-color: $--chart-single-value-icon-background-color;
       border-radius: 50%;
 
@@ -66,12 +66,12 @@
     .single-value__content {
       display: flex;
       flex-direction: column;
-      max-width: 60%;
+      width: 200px;
       padding-right: 10px;
 
       .content__data {
-        padding-bottom: 7%;
+        padding-bottom: 10px;
-        font-size: 20px;
+        font-size: 18px;
         color: #333333;
         font-weight: bold;
       }
@@ -80,7 +80,7 @@
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        font-size: 16px;
+        font-size: 14px;
         color: #666666;
       }
 
@@ -105,10 +105,11 @@
     justify-content: space-around;
     align-items: center;
     height: 100%;
-    width: 100%;
+    width: 90%;
+    margin: auto;
 
     .single-value-icon__box {
-      flex: 0 0 80px;
+      flex: 0 0 74px;
     }
 
     .single-value__icon {
@@ -249,7 +250,7 @@
         display: flex;
         align-items: center;
         height: 25%;
-        font-size: 24px;
+        font-size: 18px;
         color: #333333;
         font-weight: bold;
       }
@@ -572,16 +573,15 @@
       display: flex;
       align-items: flex-start;
       justify-content: right;
-      margin-right:25px;
+      margin: 0 22px 22px 0;
       flex: 0 0 80;
-      margin-bottom: 25px;
     }
 
     .single-value__icon {
       display: flex;
       justify-content: center;
-      width: 70px;
+      width: 60px;
-      height: 70px;
+      height: 60px;
       background-color: $--chart-single-value-icon-background-color;
       border-radius: 50%;
 
@@ -601,7 +601,7 @@
       margin-left:25px;
 
       .content__data {
-        margin-bottom: 7%;
+        margin-bottom: 5%;
         font-size: 22px;
         color: #333333;
         font-weight: bold;

src/assets/css/components/views/charts/chartTable.scss

@@ -13,6 +13,7 @@
 
     .el-table {
       padding: 0 10px;
+      font-size: 14px;
       .el-table__body-wrapper.is-scrolling-none {
         height: 100%;
         overflow-y: auto;

src/assets/css/components/views/charts/panel.scss

@@ -29,9 +29,8 @@
           display: flex;
           justify-content:space-between;
           align-items:center;
-          padding: 10px 20px 10px 18px;
+          padding: 0 18px;
           flex: 0 0 40px;
-
           font-size: 16px;
           color: $--color-text-primary;
           transition: all 0.2s;
@@ -170,7 +169,8 @@
               }
               .option__select {
                 .el-input__inner {
-                  width: 80px;
+                  width: 92px;
+                  text-align: center;
                   padding-right: 20px;
                   border: none;
                   height: 100%;
@@ -335,6 +335,18 @@
             &>.el-tabs__header {
               margin-bottom: 10px;
             }
+            .el-tabs__nav.is-top {
+              .el-tabs__active-bar {
+                display: none;
+              }
+              .el-tabs__item.is-top {
+                padding: 0;
+                margin: 0 13px;
+              }
+              .el-tabs__item.is-top.is-active {
+                border-bottom: 2px solid #0091ff;
+              }
+            }
             &>.el-tabs__content {
               height: calc(100% - 40px);
               .el-tab-pane {

src/assets/css/components/views/entityExplorer/entity-explorer.scss

@@ -48,7 +48,7 @@
   }
   .explorer-container {
     display: flex;
-    overflow: hidden auto;
+    overflow: hidden;
     height: calc(100% - 120px);
     position: relative;
   }

src/components/table/settings/ChartTable.vue

@@ -124,7 +124,7 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80,
+          width: 110,
           sortable: 'custom'
         }, {
           label: this.$t('config.chart.name'),

src/components/table/settings/GalaxyProxyTable.vue

@@ -124,7 +124,7 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80,
+          width: 100,
           sortable: 'custom'
         }, {
           label: this.$t('overall.name'),

src/components/table/settings/I18nTable.vue

@@ -76,7 +76,7 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80,
+          width: 100,
           sortable: 'custom'
         },
         {

src/components/table/settings/OperationLogTable.vue

@@ -75,7 +75,7 @@ export default {
           label: this.$t('config.operationlog.id'),
           prop: 'id',
           show: true,
-          width: 80
+          width: 100
         }, {
           label: this.$t('config.operationlog.username'),
           prop: 'username',

src/components/table/settings/RoleTable.vue

@@ -85,7 +85,7 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80,
+          width: 100,
           sortable: 'custom'
         }, {
           label: this.$t('config.roles.name'),

src/components/table/settings/UserTable.vue

@@ -103,7 +103,7 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80,
+          width: 100,
           sortable: 'custom'
         }, {
           label: this.$t('config.user.name'),

src/main.js

@@ -26,6 +26,8 @@ import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 import PanelChartList from '@/views/charts/PanelChartList'
 const emitter = new bus()
 
+import 'lib-flexible'
+
 const _ = require('lodash') // lodash工具
 
 /* dayjs.extend(utc)

src/views/charts/PanelChartList.vue

@@ -81,6 +81,7 @@ import _ from 'lodash'
 import { useRouter } from 'vue-router'
 import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
 import { wholeScreenRouterMapping } from '@/utils/constants'
+import { ref } from 'vue'
 
 export default {
   name: 'PanelChartList',
@@ -102,7 +103,6 @@ export default {
     return {
       gridLayoutLoading: false,
       gridLayoutShow: false,
-      rowHeight: 40,
       copyDataList: [], // 所有的图表
       normalCopyDataList: [], // 非整屏滚动的图表
       noData: false, // no data
@@ -183,9 +183,29 @@ export default {
           return item.y >= -1
         })
       }, 100)
+    },
+    chartHeightData (e) {
+      if (e.currentTarget.innerWidth < 1280) {
+        this.rowHeight = 25
+      } else if (e.currentTarget.innerWidth >= 1280 && e.currentTarget.innerWidth <= 1440) {
+        this.rowHeight = 25
+      } else if (e.currentTarget.innerWidth >= 1440 && e.currentTarget.innerWidth < 1920) {
+        this.rowHeight = 32.5
+      } else if (e.currentTarget.innerWidth >= 1920 && e.currentTarget.innerWidth <= 2048) {
+        this.rowHeight = 40
+      } else if (e.currentTarget.innerWidth >= 2048 && e.currentTarget.innerWidth <= 2560) {
+        this.rowHeight = 55
+      } else if (e.currentTarget.innerWidth > 2560) {
+        this.rowHeight = 55
+      }
     }
   },
-
+  mounted () {
+    window.addEventListener('resize', this.$_.debounce(this.chartHeightData, 100))
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.chartHeightData)
+  },
   computed: {
     anchorPoint () {
       return function (chart) {
@@ -199,7 +219,23 @@ export default {
   },
   setup (props) {
     const { currentRoute } = useRouter()
+    const htmlHeight = document.getElementsByTagName('html')[0].clientWidth
+    const rowHeight = ref(0)
+    if (htmlHeight < 1280) {
+      rowHeight.value = 25
+    } else if (htmlHeight >= 1280 && htmlHeight <= 1440) {
+      rowHeight.value = 25
+    } else if (htmlHeight >= 1440 && htmlHeight < 1920) {
+      rowHeight.value = 32.5
+    } else if (htmlHeight >= 1920 && htmlHeight <= 2048) {
+      rowHeight.value = 40
+    } else if (htmlHeight >= 2048 && htmlHeight <= 2560) {
+      rowHeight.value = 55
+    } else if (htmlHeight > 2560) {
+      rowHeight.value = 55
+    }
     return {
+      rowHeight,
       currentPath: currentRoute.value.path
     }
   },

src/views/charts/charts/ChartEchartWithStatistics.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-drawing"  :style="`height: calc(100% - ${statisticsHeight}px)`" :id="`chart${chartInfo.id}`"></div>
+  <div class="chart-drawing" style="height: calc(100% - 17.5rem)" :id="`chart${chartInfo.id}`"></div>
   <div class="cn-chart__footer">
     <statistics-legend :data="statisticsData" :chart-info="chartInfo" @toggleLegend="toggleStatisticsLegend"></statistics-legend>
   </div>
@@ -19,8 +19,7 @@ export default {
   mixins: [chartEchartMixin],
   data () {
     return {
-      statisticsData: [],
+      statisticsData: []
-      statisticsHeight: 280
     }
   },
   props: {
@@ -29,13 +28,6 @@ export default {
   components: {
     StatisticsLegend
   },
-  mounted () {
-    // 动态计算统计信息的高度
-    if (this.chartData) {
-      const dataLen = this.chartData.length
-      this.statisticsHeight = (dataLen * 24) + 30 + 3 + 7 // 根据legend个数动态预留legend空间,7为其他
-    }
-  },
   methods: {
     initEcharts (id) {
       this.initDom(id)

src/views/charts/charts/ChartIpOpenPortBar.vue

@@ -95,8 +95,17 @@ export default {
       this.chartOption.series[0].data = protocols
       this.chartOption.xAxis.data = protocols.map(p => p.name)
       this.myChart.setOption(this.chartOption)
+    },
+    resize () {
+      this.myChart.resize()
     }
   },
+  mounted () {
+    window.addEventListener('resize', this.$_.debounce(this.resize, 200))
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.resize)
+  },
   watch: {
     chartData: {
       deep: true,

src/views/charts/charts/ChartOneSituationStatistics.vue

@@ -5,7 +5,6 @@
         <el-progress
           type="circle"
           :color="chartInfo.params.color"
-          width="76"
           :percentage="Math.floor(($_.get(chartData, 'percent', '-') * 100) * 100) / 100"
         />
       </div>

src/views/charts/charts/ChartSanKey.vue

@@ -105,8 +105,17 @@ export default {
       this.chartOption.series[0].data = data
       this.chartOption.series[0].links = link
       this.myChart.setOption(this.chartOption)
+    },
+    resize () {
+      this.myChart.resize()
     }
   },
+  mounted () {
+    window.addEventListener('resize', this.$_.debounce(this.resize))
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.resize)
+  },
   watch: {
     chartData: {
       deep: true,

src/views/charts/charts/ChartTable.vue

@@ -6,7 +6,7 @@
           tooltip-effect="light"
           :data="table.currentPageData"
       >
-        <el-table-column v-if="table.currentPageData.length" type="index" label="#">
+        <el-table-column :width="60" v-if="table.currentPageData.length" type="index" label="#">
         </el-table-column>
         <el-table-column
             v-for="(c, i) in table.tableColumns.common"

src/views/charts/charts/ChartTabs.vue

@@ -39,8 +39,14 @@ export default {
     },
     reload () {
       this.dataList = _.cloneDeep(this.dataList)
+    },
+    resize () {
+      this.$forceUpdate()
     }
   },
+  mounted () {
+    window.addEventListener('resize', this.$_.debounce(this.resize, 300))
+  },
   setup (props) {
     let activeTab = ''
     if (!_.isEmpty(props.chartInfo.children)) {

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

@@ -77,6 +77,18 @@ export default {
         return allZero
       }
     },
+    chartResize () {
+      this.$store.getters.getChartList.forEach(chart => {
+        if (chart) {
+          chart.resize()
+        }
+      })
+    },
+    test () {
+      setTimeout(() => {
+        this.chartResize()
+      }, 400)
+    },
     loadEchart (chartNum, refresh = false) {
       this.$emit('showLoading', true)
       try {
@@ -86,14 +98,7 @@ export default {
           this.myChart2.setOption(this.chartOption2, refresh)
           this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
         }
-        const _this = this
+        window.addEventListener('resize', this.$_.debounce(this.test, 400))
-        window.addEventListener('resize', function () {
-          _this.$store.getters.getChartList.forEach(chart => {
-            if (chart) {
-              chart.resize()
-            }
-          })
-        })
       } finally {
         setTimeout(() => {
           this.$emit('showLoading', false)
@@ -101,6 +106,9 @@ export default {
       }
     }
   },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.test)
+  },
   watch: {
     chartData: {
       deep: true,

src/views/detections/Index.vue

@@ -114,6 +114,7 @@ import { api, getData } from '@/utils/api'
 import { reverseSortBy, sortBy, extensionEchartY } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import DetectionNoData from '@/views/detections/DetectionNoData'
+import { shallowRef } from 'vue'
 
 export default {
   name: 'Index',
@@ -128,6 +129,7 @@ export default {
   },
   data () {
     return {
+      chartInit: [],
       pageObj: {
         pageNo: 1,
         pageSize: defaultPageSize,
@@ -285,7 +287,7 @@ export default {
           // eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
           eventSeverityTrendOption.xAxis.data = xData
           const detectionChart = echarts.init(chartDom)
-          this.echartsResize(detectionChart)
+          this.chartInit.push(shallowRef(detectionChart))
           detectionChart.setOption(eventSeverityTrendOption)
           // this.isEventSeverityNoData = false
         } else {
@@ -312,7 +314,7 @@ export default {
           })
           const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
-          this.echartsResize(detectionChart)
+          this.chartInit.push(shallowRef(detectionChart))
           detectionChart.setOption(eventSeverityOption)
           const vm = this
           detectionChart.off('click')
@@ -339,7 +341,7 @@ export default {
           }))
           const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
-          this.echartsResize(detectionChart)
+          this.chartInit.push(shallowRef(detectionChart))
           const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
           securityTypeOption.series[0].data = data.map(d => {
             return { value: d.count, name: d.eventType }
@@ -367,7 +369,7 @@ export default {
           }))
           const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
-          this.echartsResize(detectionChart)
+          this.chartInit.push(shallowRef(detectionChart))
           const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
           securityTypeOption.series[0].data = data.map(d => {
             return { value: d.count, name: d.securityType, itemStyle: { color: getAttackColor(d.securityType) } }
@@ -399,7 +401,7 @@ export default {
 
           const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
-          this.echartsResize(detectionChart)
+          this.chartInit.push(shallowRef(detectionChart))
           const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
           data.sort(reverseSortBy('count'))
           data = data.slice(0, 5)
@@ -455,7 +457,7 @@ export default {
         if (!this.$_.isEmpty(data)) {
           const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
-          this.echartsResize(detectionChart)
+          this.chartInit.push(shallowRef(detectionChart))
           const option = this.$_.cloneDeep(activeAttackBar)
           data.sort(reverseSortBy('count'))
           data = data.slice(0, 5)
@@ -603,15 +605,14 @@ export default {
         wraps.scrollTop = 0
       })
     },
-    echartsResize (detectionChart) {
+    resize () {
-      window.addEventListener('resize', function () {
+      this.chartInit.forEach(e => { e.value.resize() })
-        detectionChart.resize()
-      })
     }
   },
   mounted () {
     this.queryFilter()
     this.queryList()
+    window.addEventListener('resize', this.$_.debounce(this.resize, 300))
   },
   watch: {
     eventSeverityData: {
@@ -729,7 +730,7 @@ export default {
     }
   },
   beforeUnmount () {
-    window.removeEventListener('resize', function () {})
+    window.removeEventListener('resize', this.resize)
   },
   setup () {
     const { params } = useRoute()

src/views/entityExplorer/EntityDetail.vue

@@ -72,6 +72,7 @@ export default {
   },
   methods: {
     chartLoaded (chartList) {
+      this.chartList = chartList
       this.anchorPoints = []
       let anchorPoints = []
       const panelDom = document.querySelector('#detailWrapper')
@@ -103,8 +104,17 @@ export default {
     jumpToAnchor (anchor) {
       this.top = anchor.top
       document.querySelector('#detailWrapper').scrollTop = this.top
+    },
+    resize () {
+      this.chartLoaded(this.chartList)
     }
   },
+  mounted () {
+    window.addEventListener('resize', this.$_.debounce(this.resize, 200))
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.resize)
+  },
   computed: {
     iconClass () {
       let className

src/views/entityExplorer/entityList/Card.vue

@@ -58,11 +58,11 @@
         <div class="body__statics">
           <div class="entity-statics-down">
             <i class="cn-icon cn-icon-fall entity-statics-icon"></i>
-            {{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
+            <span>{{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') : '-'}}</span>
           </div>
           <div class="entity-statics-up" >
             <i class="cn-icon cn-icon-rise"></i>
-            {{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
+            <span>{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') : '-'}}</span>
           </div>
           <div class="body__detail" @click="showDetail">{{$t('overall.detail')}}></div>
         </div>
@@ -94,11 +94,11 @@
         </div>
         <div class="body__statics">
           <div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon"></i>
-            {{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
+            <span>{{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.bps).join(' ') : '-'}}</span>
           </div>
           <div class="entity-statics-up" >
             <i class="cn-icon cn-icon-rise"></i>
-            {{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
+            <span>{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ') : '-'}}</span>
           </div>
           <div class="body__detail" @click="showDetail">{{$t('overall.detail')}}></div>
         </div>
@@ -129,8 +129,8 @@
           <div class="body__drawing" :id="`entityListChart${entityData.appName}${listMode}`"></div>
         </div>
         <div class="body__statics">
-          <div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon"></i>{{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}</div>
+          <div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon"></i><span>{{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.bps).join(' ') : '-'}}</span></div>
-          <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise"></i>{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}</div>
+          <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise"></i><span>{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ') : '-'}}</span></div>
           <div class="body__detail" @click="showDetail">{{$t('overall.detail')}}></div>
         </div>
       </template>

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

@@ -4,6 +4,7 @@ import * as echarts from 'echarts'
 import { entityListLineOption } from '@/views/charts/charts/chart-options'
 import { riskLevelMapping, unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
+import { shallowRef } from 'vue'
 
 export default {
   props: {
@@ -26,7 +27,8 @@ export default {
         receivedChart: null
       },
       chartOption: null,
-      queryParams: {}
+      queryParams: {},
+      echartsArray: []
     }
   },
   computed: {
@@ -121,6 +123,7 @@ export default {
               }
             }
           })
+          this.echartsArray.push(shallowRef(this.sentChart), shallowRef(this.receivedChart))
           this.sentChart.setOption(this.chartOptionSent)
           this.receivedChart.setOption(this.chartOptionReceived)
         }
@@ -312,6 +315,7 @@ export default {
               ]
             }
           })
+          this.echartsArray.push(shallowRef(this.detectionChart))
           this.detectionChart.setOption(this.chartDetectionQueryRate)
         }
       })
@@ -333,6 +337,10 @@ export default {
           }, 200)
         })
       }
+    },
+
+    resize () {
+      this.echartsArray.forEach(item => { item.value.resize() })
     }
   },
   setup () {
@@ -342,7 +350,11 @@ export default {
     }
   },
   mounted () {
+    window.addEventListener('resize', this.$_.debounce(this.resize, 200))
     this.chartOption = _.cloneDeep(entityListLineOption)
     setTimeout(() => { this.queryEntityDetail() })
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.resize)
   }
 }

src/views/entityExplorer/entityList/entityListMixin.js

@@ -6,6 +6,7 @@ import { entityListLineOption } from '@/views/charts/charts/chart-options'
 import { riskLevelMapping, unitTypes } from '@/utils/constants'
 import { getSecond } from '@/utils/date-util'
 import unitConvert from '@/utils/unit-convert'
+import { shallowRef } from 'vue'
 
 export default {
   props: {
@@ -19,7 +20,8 @@ export default {
       trafficUrl: '',
       chartOption: null,
       unitTypes,
-      unitConvert
+      unitConvert,
+      echartsArray: []
     }
   },
   computed: {
@@ -251,6 +253,7 @@ export default {
           })
           if (this.listMode === 'block') {
             const chart = echarts.init(document.getElementById(`entityListChart${this.entityName}${this.listMode}`))
+            this.echartsArray.push(shallowRef(chart))
             chart.setOption({
               ...this.chartOption,
               series: [sentSeries, receivedSeries]
@@ -258,6 +261,7 @@ export default {
           } else if (this.listMode === 'list') {
             const sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}${this.listMode}`))
             const receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}${this.listMode}`))
+            this.echartsArray.push(shallowRef(sentChart), shallowRef(receivedChart))
             sentChart.setOption({
               ...this.chartOption,
               series: [sentSeries]
@@ -278,6 +282,9 @@ export default {
           } catch (e) {}
         }, 250)
       })
+    },
+    resize () {
+      this.echartsArray.forEach(item => { item.value.resize() })
     }
   },
   watch: {
@@ -306,6 +313,7 @@ export default {
     }
   },
   mounted () {
+    window.addEventListener('resize', this.$_.debounce(this.resize, 200))
     this.chartOption = _.cloneDeep(entityListLineOption)
     this.entityData = _.cloneDeep(this.entity)
     setTimeout(() => {
@@ -313,5 +321,8 @@ export default {
       this.queryEntityDetailTraffic()
       this.queryPerformance()
     })
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.resize)
   }
 }