From a51ea8702f80d86933b206bd0b92711dc6ab320f Mon Sep 17 00:00:00 2001 From: "xinxin.wu" Date: Fri, 6 Dec 2024 19:27:25 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=B7=A5=E4=BD=9C=E5=8F=B0):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E5=B7=A5=E4=BD=9C=E5=8F=B0=E6=89=80=E6=9C=89=E6=9F=B1?= =?UTF-8?q?=E7=8A=B6=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/pure/chart/index.vue | 18 ++- frontend/src/components/pure/chart/utils.ts | 71 +++++++++ frontend/src/config/workbench.ts | 2 +- .../homePage/components/defectMemberBar.vue | 68 +++----- .../homePage/components/headerCard.vue | 59 +++++++ .../homePage/components/overview.vue | 18 ++- .../homePage/components/overviewMember.vue | 20 ++- .../workbench/homePage/components/tabCard.vue | 150 ------------------ .../homePage/components/testPlanCount.vue | 8 +- .../homePage/components/testPlanOverview.vue | 31 ++-- .../src/views/workbench/homePage/utils.ts | 45 ++++-- 11 files changed, 236 insertions(+), 254 deletions(-) create mode 100644 frontend/src/components/pure/chart/utils.ts create mode 100644 frontend/src/views/workbench/homePage/components/headerCard.vue delete mode 100644 frontend/src/views/workbench/homePage/components/tabCard.vue diff --git a/frontend/src/components/pure/chart/index.vue b/frontend/src/components/pure/chart/index.vue index 0935737d23..ed10199ff4 100644 --- a/frontend/src/components/pure/chart/index.vue +++ b/frontend/src/components/pure/chart/index.vue @@ -1,9 +1,11 @@ + + diff --git a/frontend/src/views/workbench/homePage/components/overview.vue b/frontend/src/views/workbench/homePage/components/overview.vue index 6948e6fc07..1067a36253 100644 --- a/frontend/src/views/workbench/homePage/components/overview.vue +++ b/frontend/src/views/workbench/homePage/components/overview.vue @@ -30,7 +30,7 @@
- @@ -50,9 +50,10 @@ import { ref } from 'vue'; import MsChart from '@/components/pure/chart/index.vue'; + import bindDataZoomEvent from '@/components/pure/chart/utils'; import MsSelect from '@/components/business/ms-select'; import CardSkeleton from './cardSkeleton.vue'; - import TabCard from './tabCard.vue'; + import HeaderCard from './headerCard.vue'; import { workMyCreatedDetail, workProOverviewDetail } from '@/api/modules/workbench'; import { contentTabList } from '@/config/workbench'; @@ -191,12 +192,21 @@ onMounted(async () => { await initOverViewDetail(); - setTimeout(() => { + nextTick(() => { const chartDom = chartRef.value?.chartRef; + if (chartDom && chartDom.chart) { createCustomTooltip(chartDom); + bindDataZoomEvent(chartRef, options); } - }, 0); + }); + }); + + onBeforeUnmount(() => { + const unbindDataZoom = bindDataZoomEvent(chartRef, options); + if (unbindDataZoom) { + unbindDataZoom.clear(); + } }); watch( diff --git a/frontend/src/views/workbench/homePage/components/overviewMember.vue b/frontend/src/views/workbench/homePage/components/overviewMember.vue index 2695c634b8..d60fb2f9de 100644 --- a/frontend/src/views/workbench/homePage/components/overviewMember.vue +++ b/frontend/src/views/workbench/homePage/components/overviewMember.vue @@ -50,6 +50,7 @@ import { ref } from 'vue'; import MsChart from '@/components/pure/chart/index.vue'; + import bindDataZoomEvent from '@/components/pure/chart/utils'; import MsSelect from '@/components/business/ms-select'; import CardSkeleton from './cardSkeleton.vue'; @@ -149,12 +150,12 @@ await nextTick(); await initOverViewMemberDetail(); - setTimeout(() => { - const chartDom = chartRef.value?.chartRef; - if (chartDom && chartDom.chart) { - createCustomTooltip(chartDom); - } - }, 0); + const chartDom = chartRef.value?.chartRef; + + if (chartDom && chartDom.chart) { + createCustomTooltip(chartDom); + bindDataZoomEvent(chartRef, options); + } } async function changeProject() { @@ -214,6 +215,13 @@ onMounted(() => { handleProjectChange(false); }); + + onBeforeUnmount(() => { + const unbindDataZoom = bindDataZoomEvent(chartRef, options); + if (unbindDataZoom) { + unbindDataZoom.clear(); + } + }); diff --git a/frontend/src/views/workbench/homePage/components/tabCard.vue b/frontend/src/views/workbench/homePage/components/tabCard.vue deleted file mode 100644 index 0b146a0db1..0000000000 --- a/frontend/src/views/workbench/homePage/components/tabCard.vue +++ /dev/null @@ -1,150 +0,0 @@ - - - - - diff --git a/frontend/src/views/workbench/homePage/components/testPlanCount.vue b/frontend/src/views/workbench/homePage/components/testPlanCount.vue index 2ad51fea51..9d58b506c2 100644 --- a/frontend/src/views/workbench/homePage/components/testPlanCount.vue +++ b/frontend/src/views/workbench/homePage/components/testPlanCount.vue @@ -191,16 +191,16 @@ count: completeRate, }, { - name: t('common.completed'), - count: finished, + name: t('common.notStarted'), + count: prepared, }, { name: t('common.inProgress'), count: running, }, { - name: t('common.notStarted'), - count: prepared, + name: t('common.completed'), + count: finished, }, { name: t('common.archived'), diff --git a/frontend/src/views/workbench/homePage/components/testPlanOverview.vue b/frontend/src/views/workbench/homePage/components/testPlanOverview.vue index 934205c57f..4cdd9d8f35 100644 --- a/frontend/src/views/workbench/homePage/components/testPlanOverview.vue +++ b/frontend/src/views/workbench/homePage/components/testPlanOverview.vue @@ -71,19 +71,7 @@
-
-
-
-
-
- -
-
{{ ele.label }}
-
-
{{ addCommasToNumber(ele.count || 0) }}
-
-
-
+
@@ -100,16 +88,18 @@ import { CascaderOption } from '@arco-design/web-vue'; import MsChart from '@/components/pure/chart/index.vue'; + import bindDataZoomEvent from '@/components/pure/chart/utils'; import MsCascader from '@/components/business/ms-cascader/index.vue'; import MsStatusTag from '@/components/business/ms-status-tag/index.vue'; import CardSkeleton from './cardSkeleton.vue'; + import HeaderCard from './headerCard.vue'; import ThresholdProgress from './thresholdProgress.vue'; import { getWorkTestPlanListUrl, workTestPlanOverviewDetail } from '@/api/modules/workbench'; import { commonRatePieOptions } from '@/config/workbench'; import { useI18n } from '@/hooks/useI18n'; import useAppStore from '@/store/modules/app'; - import { addCommasToNumber, findNodePathByKey, mapTree } from '@/utils'; + import { findNodePathByKey, mapTree } from '@/utils'; import type { ModuleCardItem, SelectedCardItem, TimeFormParams } from '@/models/workbench/homePage'; import { TestPlanStatusEnum } from '@/enums/testPlanEnum'; @@ -388,12 +378,11 @@ await initOverViewDetail(); - setTimeout(() => { - const chartDom = chartRef.value?.chartRef; - if (chartDom && chartDom.chart) { - createCustomTooltip(chartDom); - } - }, 0); + const chartDom = chartRef.value?.chartRef; + if (chartDom && chartDom.chart) { + createCustomTooltip(chartDom); + bindDataZoomEvent(chartRef, options); + } } async function handleRefreshKeyChange() { @@ -455,7 +444,7 @@ .threshold-card-item { margin-right: 16px; width: 34%; - height: 76px; + height: 78px; border: 1px solid var(--color-text-n8); border-radius: 4px; gap: 12px; diff --git a/frontend/src/views/workbench/homePage/utils.ts b/frontend/src/views/workbench/homePage/utils.ts index 80fddccf70..5ecdc65a49 100644 --- a/frontend/src/views/workbench/homePage/utils.ts +++ b/frontend/src/views/workbench/homePage/utils.ts @@ -71,7 +71,7 @@ export const colorMapConfig: Record = { [WorkCardEnum.CASE_COUNT]: ['#ED0303', '#FFA200', '#3370FF', '#D4D4D8'], [WorkCardEnum.ASSOCIATE_CASE_COUNT]: ['#00C261', '#3370FF'], [WorkCardEnum.REVIEW_CASE_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#ED0303', '#FFA200'], - [WorkCardEnum.TEST_PLAN_COUNT]: ['#9441B1', '#3370FF', '#00C261', '#D4D4D8'], + [WorkCardEnum.TEST_PLAN_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#FF9964'], [WorkCardEnum.PLAN_LEGACY_BUG]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)], [WorkCardEnum.BUG_COUNT]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)], [WorkCardEnum.HANDLE_BUG_BY_ME]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)], @@ -81,7 +81,12 @@ export const colorMapConfig: Record = { }; // 柱状图 -export function getCommonBarOptions(hasRoom: boolean, color: string[], isTestPlan = false): Record { +export function getCommonBarOptions( + hasRoom: boolean, + color: string[], + isTestPlan = false, + fullScreen = true +): Record { return { tooltip: [ { @@ -158,12 +163,11 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[], isTestPla axisLabel: { show: true, color: '#646466', - width: 120, + width: 100, overflow: 'truncate', ellipsis: '...', showMinLabel: true, showMaxLabel: true, - // TOTO 等待优化 interval: 0, }, axisPointer: { @@ -186,7 +190,6 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[], isTestPla { type: 'value', alignTicks: true, - name: t('workbench.homePage.unit'), // 设置单位 position: 'left', axisLine: { show: false, @@ -272,12 +275,13 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[], isTestPla type: 'slider', height: 24, bottom: 10, - // TODO 待优化 + realtime: true, minSpan: 1, - maxSpan: 26, + maxValueSpan: fullScreen ? 12 : 6, startValue: 0, end: 30, - rangeMode: ['value', 'percent'], // 起点按实际值，终点按百分比动态计算 + endValue: fullScreen ? 12 : 6, + rangeMode: ['percent', 'percent'], // 起点按实际值，终点按百分比动态计算 showDataShadow: 'auto', showDetail: false, filterMode: 'none', @@ -538,9 +542,9 @@ export const routeNavigationMap: Record = { }, complete: { status: [ - WorkNavValueEnum.TEST_PLAN_COMPLETED, // 测试计划-已完成 - WorkNavValueEnum.TEST_PLAN_UNDERWAY, // 测试计划-进行中 WorkNavValueEnum.TEST_PLAN_PREPARED, // 测试计划-未开始 + WorkNavValueEnum.TEST_PLAN_UNDERWAY, // 测试计划-进行中 + WorkNavValueEnum.TEST_PLAN_COMPLETED, // 测试计划-已完成 WorkNavValueEnum.TEST_PLAN_ARCHIVED, // 测试计划-已归档 ], route: RouteEnum.TEST_PLAN_INDEX, @@ -637,14 +641,16 @@ export function getSeriesData( contentTabList: ModuleCardItem[], detail: OverViewOfProject, colorConfig: string[], - isTestPlan = false + isTestPlan = false, + isStack = false, + fullScreen = true ) { let options: Record = {}; const { projectCountList, xaxis, errorCode } = detail; const hasPermission = errorCode !== 109001; - options = getCommonBarOptions(xaxis.length >= 7, colorConfig, isTestPlan); + options = getCommonBarOptions(xaxis.length >= 7, colorConfig, isTestPlan, fullScreen); options.xAxis.data = xaxis; const { invisible, text } = handleNoDataDisplay(xaxis, hasPermission); options.graphic.invisible = invisible; @@ -654,7 +660,7 @@ export function getSeriesData( const seriesData = projectCountList.map((item, sid) => { const countData: Record[] = item.count.map((e) => { return { - name: t(contentTabList[sid].label), + name: t(contentTabList[sid]?.label ?? ''), value: e, originValue: e, tooltip: { @@ -683,8 +689,8 @@ export function getSeriesData( maxAxis = Math.max(itemMax, maxAxis); - return { - name: t(contentTabList[sid].label), + const itemSeries: Record = { + name: t(contentTabList[sid]?.label ?? ''), type: 'bar', barWidth: 12, legendHoverLink: true, @@ -692,7 +698,6 @@ export function getSeriesData( itemStyle: { borderRadius: [2, 2, 0, 0], }, - barCategoryGap: 24, data: countData, barMinHeight: ((optionData: Record[]) => { optionData.forEach((itemValue: any, index: number) => { @@ -708,6 +713,12 @@ export function getSeriesData( return hasZero ? 0 : 5; })(countData), }; + + if (isStack) { + itemSeries.stack = 'stack'; + } + + return itemSeries; }); // 动态步长调整函数 @@ -752,7 +763,7 @@ export function createCustomTooltip(chartDom: InstanceType) { customTooltip.textContent = `${params.value}`; customTooltip.style.display = 'block'; - customTooltip.style.left = `${clientX - 20}px`; + customTooltip.style.left = `${clientX}px`; customTooltip.style.top = `${clientY + 10}px`; } });