From ced28fd3e79a5e1f233371a1f82a147c44a48348 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Tue, 25 Oct 2022 18:41:27 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4networkoverview?= =?UTF-8?q?=E7=9A=84=E5=9B=BE=E8=A1=A8=E4=BD=8D=E7=BD=AE=EF=BC=8C=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0app-card=E5=9B=BE=E7=9A=84resize=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/charts2/networkOverviewApps.scss | 4 +- src/utils/unit-convert.js | 6 +++ src/views/charts2/ChartList.vue | 53 ++++++++++++++----- src/views/charts2/Panel.vue | 7 +-- 4 files changed, 50 insertions(+), 20 deletions(-) diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss index 0f8a1a45..b795ea09 100644 --- a/src/assets/css/components/views/charts2/networkOverviewApps.scss +++ b/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; diff --git a/src/utils/unit-convert.js b/src/utils/unit-convert.js index 94bb82e0..c949b5cf 100644 --- a/src/utils/unit-convert.js +++ b/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 } } diff --git a/src/views/charts2/ChartList.vue b/src/views/charts2/ChartList.vue index db27fa07..2d9495b6 100644 --- a/src/views/charts2/ChartList.vue +++ b/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) } } - - diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue index 03639d81..4cea1b23 100644 --- a/src/views/charts2/Panel.vue +++ b/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 {