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

2022-04-25 15:29:44 +08:00
parent 01760c28a4
commit e90d6ea506
29 changed files with 230 additions and 91 deletions
--- a/src/views/charts/PanelChartList.vue
+++ b/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
    }
  },
--- a/src/views/charts/charts/ChartEchartWithStatistics.vue
+++ b/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: [],
-      statisticsHeight: 280
+      statisticsData: []
    }
  },
  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)
--- a/src/views/charts/charts/ChartIpOpenPortBar.vue
+++ b/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,
--- a/src/views/charts/charts/ChartOneSituationStatistics.vue
+++ b/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>
--- a/src/views/charts/charts/ChartSanKey.vue
+++ b/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,
--- a/src/views/charts/charts/ChartTable.vue
+++ b/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"
--- a/src/views/charts/charts/ChartTabs.vue
+++ b/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)) {
--- a/src/views/charts/charts/chart-echart-mixin.js
+++ b/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', function () {
-          _this.$store.getters.getChartList.forEach(chart => {
-            if (chart) {
-              chart.resize()
-            }
-          })
-        })
+        window.addEventListener('resize', this.$_.debounce(this.test, 400))
      } finally {
        setTimeout(() => {
          this.$emit('showLoading', false)
@@ -101,6 +106,9 @@ export default {
      }
    }
  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.test)
+  },
  watch: {
    chartData: {
      deep: true,
--- a/src/views/detections/Index.vue
+++ b/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) {
-      window.addEventListener('resize', function () {
-        detectionChart.resize()
-      })
+    resize () {
+      this.chartInit.forEach(e => { e.value.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()
--- a/src/views/entityExplorer/EntityDetail.vue
+++ b/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
--- a/src/views/entityExplorer/entityList/Card.vue
+++ b/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-up" ><i class="cn-icon cn-icon-rise"></i>{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, 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><span>{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ') : '-'}}</span></div>
          <div class="body__detail" @click="showDetail">{{$t('overall.detail')}}></div>
        </div>
      </template>
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/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)
  }
 }
--- a/src/views/entityExplorer/entityList/entityListMixin.js
+++ b/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)
  }
 }