fix: 调整networkoverview的图表位置，增加app-card图的resize逻辑

src/assets/css/components/views/charts2/networkOverviewApps.scss

@@ -9,7 +9,8 @@
       font-size: 14px;
       color: #353636;
       font-weight: 600;
-      height: 32px;
+      display: flex;
+      align-items: flex-end;
     }
 
     .line-select-metric {
@@ -59,7 +60,6 @@
     grid-gap: 20px;
     width: 100%;
     padding-top: 10px;
-    height: calc(100% - 24px);
 
     .app-card {
       border: 1px solid #E2E5EC;

src/utils/unit-convert.js

@@ -162,6 +162,12 @@ export function valueToRangeValue (value, unitType) {
         }
         break
       }
+      case unitTypes.qps: {
+        if (values[0] < 0.01) {
+          return ['<0.01', 'qps']
+        }
+        break
+      }
       default: break
     }
   }

src/views/charts2/ChartList.vue

@@ -7,8 +7,8 @@
         :col-num="24"
         :is-draggable="!panelLock"
         :is-resizable="!panelLock"
-        :margin="[20, 20]"
-        :row-height="40"
+        :margin="[rowMargin, colMargin]"
+        :row-height="rowHeight"
         :vertical-compact="true"
         :use-css-transforms="false"
     >
@@ -36,7 +36,7 @@
 import VueGridLayout from 'vue-grid-layout'
 import _ from 'lodash'
 import Chart from '@/views/charts2/Chart'
-import { panelTypeAndRouteMapping, storageKey, drillDownPanelTypeMapping } from '@/utils/constants'
+import { panelTypeAndRouteMapping, drillDownPanelTypeMapping } from '@/utils/constants'
 import { typeMapping } from '@/views/charts2/chart-tools'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
@@ -54,7 +54,11 @@ export default {
     return {
       panelTypeAndRouteMapping,
       typeMapping,
-      layout: []
+      layout: [],
+      rowHeight: 40,
+      rowMargin: 20,
+      colMargin: 20,
+      debounceFunc: null
     }
   },
   components: {
@@ -73,14 +77,16 @@ export default {
   watch: {
     chartList (n) {
       if (!_.isEmpty(n)) {
+        let layout = []
         if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance) {
-          this.layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex)
+          layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex)
         } else if (Object.values(drillDownPanelTypeMapping).indexOf(this.panelType) >= -1) {
-          this.layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex || !c.params.hasOwnProperty('tabIndex'))
+          layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex || !c.params.hasOwnProperty('tabIndex'))
         } else {
-          this.layout = [...n]
+          layout = [...n]
         }
-        const overviewAppChart = n.find(c => c.type === typeMapping.networkOverview.appList)
+
+        /*const overviewAppChart = layout.find(c => c.type === typeMapping.networkOverview.appList)
         let actuallyLength = 0
         if (overviewAppChart) {
           const params = overviewAppChart.params.app ? overviewAppChart.params : { app: [] }
@@ -90,6 +96,13 @@ export default {
             actuallyLength = params.app.find(p => p.user === 'default').list.length + 1
           }
           overviewAppChart.h = actuallyLength % 3 > 0 ? (Math.floor(actuallyLength / 3) + 1) * 2 + 2 : Math.floor(actuallyLength / 3) * 2 + 2
+        }*/
+        this.layout = layout
+        const overviewAppChart = layout.find(c => c.type === typeMapping.networkOverview.appList)
+        if (overviewAppChart) {
+          this.$nextTick(() => {
+            this.resizeAppChart()
+          })
         }
       }
     },
@@ -106,11 +119,27 @@ export default {
     },
     resizeLine () {
       this.$refs.chartGrid.resizeLine()
+    },
+    resizeAppChart () {
+      const appCardsDom = document.querySelector('.app-cards')
+      const layout = _.cloneDeep(this.layout)
+      const overviewAppChart = layout.find(c => c.type === typeMapping.networkOverview.appList)
+      if (appCardsDom) {
+        const cardsHeight = appCardsDom.offsetHeight
+        if (cardsHeight) {
+          const headerHeight = 24
+          overviewAppChart.h = (cardsHeight + headerHeight + this.rowMargin) / (this.rowHeight + this.rowMargin)
+          this.layout = layout
         }
       }
     }
+  },
+  mounted () {
+    this.debounceFunc = _.debounce(this.resizeAppChart, 400)
+    window.addEventListener('resize', this.debounceFunc)
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.debounceFunc)
+  }
+}
 </script>
-
-<style scoped>
-
-</style>

src/views/charts2/Panel.vue

@@ -42,19 +42,14 @@ import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import {
   panelTypeAndRouteMapping,
-  bytesColumnNameGroupForNpm,
-  scoreUrl,
-  customTableTitlesForAppPerformance,
-  operationType,
   curTabState,
   drillDownPanelTypeMapping
 } from '@/utils/constants'
 import { getPanelList, getChartList } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { getTypeCategory } from '@/views/charts/charts/tools'
-import { computeScore, urlParamsHandler, overwriteUrl } from '@/utils/tools'
+import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import ChartList from '@/views/charts2/ChartList'
-import { get } from '@/utils/http'
 import { useStore } from 'vuex'
 
 export default {