From 0a7787a0cd79f26eaa4a018c7eb84b14495c5341 Mon Sep 17 00:00:00 2001 From: "xinxin.wu" Date: Tue, 10 Dec 2024 18:59:17 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=B7=A5=E4=BD=9C=E5=8F=B0):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E4=B8=AA=E5=B7=A5=E4=BD=9C=E5=8F=B0=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=E8=AE=A1=E5=88=92=E6=A6=82=E8=A7=88&=E7=BC=BA=E9=99=B7?= =?UTF-8?q?=E9=A5=BC=E5=9B=BEbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/modules/workbench.ts | 2 +- frontend/src/components/pure/chart/utils.ts | 7 +-- .../views/workbench/components/notData.vue | 2 +- .../homePage/components/defectMemberBar.vue | 18 +++---- .../homePage/components/overview.vue | 12 +++-- .../homePage/components/testPlanOverview.vue | 24 +++++---- .../src/views/workbench/homePage/utils.ts | 54 +++++++++---------- 7 files changed, 62 insertions(+), 57 deletions(-) diff --git a/frontend/src/api/modules/workbench.ts b/frontend/src/api/modules/workbench.ts index 93c9f6460a..0ef7c2d4ea 100644 --- a/frontend/src/api/modules/workbench.ts +++ b/frontend/src/api/modules/workbench.ts @@ -230,7 +230,7 @@ export function workbenchTodoTestPlanList(data: TableQueryParams) { } // 待办-测试计划列表 export function getWorkTestPlanListUrl(projectId: string) { - return MSR.get({ url: `${WorkTestPlanListUrl}/${projectId}` }); + return MSR.get({ url: `${WorkTestPlanListUrl}/${projectId}` }, { ignoreCancelToken: true }); } // 工作台-测试计划概览 diff --git a/frontend/src/components/pure/chart/utils.ts b/frontend/src/components/pure/chart/utils.ts index fa44b75bdc..6621a3166b 100644 --- a/frontend/src/components/pure/chart/utils.ts +++ b/frontend/src/components/pure/chart/utils.ts @@ -9,7 +9,7 @@ export default function bindDataZoomEvent( const chartDom = chartRef.value?.chartRef; const handleDataZoom = (params: any) => { - const containerWidth = chartDom.getDom().offsetWidth; + const containerWidth = chartDom.getDom()?.offsetWidth; // 计算缩放百分比 const percent = (params.end - params.start) / 100; // 计算单组条形图的宽度（包括间隔和最小宽度） @@ -52,8 +52,9 @@ export default function bindDataZoomEvent( const handleResize = () => { if (chartDom) { - const currentOptions = chartDom.chart.getOption(); - if (currentOptions.dataZoom.length) { + const currentOptions = chartDom.chart?.getOption(); + + if (currentOptions && currentOptions?.dataZoom.length) { handleDataZoom({ start: currentOptions.dataZoom[0].start, end: currentOptions.dataZoom[0].end }); } } diff --git a/frontend/src/views/workbench/components/notData.vue b/frontend/src/views/workbench/components/notData.vue index 235eb942f4..8a362570db 100644 --- a/frontend/src/views/workbench/components/notData.vue +++ b/frontend/src/views/workbench/components/notData.vue @@ -65,7 +65,7 @@ border-radius: 4px; color: var(--color-text-4); background-color: var(--color-text-fff); - @apply flex items-center justify-center; + @apply flex w-full items-center justify-center; } .no-config-svg { margin: 0 auto 24px; diff --git a/frontend/src/views/workbench/homePage/components/defectMemberBar.vue b/frontend/src/views/workbench/homePage/components/defectMemberBar.vue index 822c77c022..7966517472 100644 --- a/frontend/src/views/workbench/homePage/components/defectMemberBar.vue +++ b/frontend/src/views/workbench/homePage/components/defectMemberBar.vue @@ -97,21 +97,15 @@ const hasPermission = ref(false); function handleData(detail: OverViewOfProject) { - const labelCount: Record = {}; - const uniqueData = detail.projectCountList.map((e) => { - const { name } = e; - if (!labelCount[name]) { - labelCount[name] = 1; - return { value: '', label: name }; - } - - labelCount[name] += 1; - // 添加序号后缀 - return { value: '', label: `${name} (${labelCount[name]})` }; + const data = detail.projectCountList.map((e) => { + return { + value: '', + label: e.name, + }; }); options.value = getSeriesData( - uniqueData, + data, detail, [...defectStatusColor, ...getColorScheme(13)], false, diff --git a/frontend/src/views/workbench/homePage/components/overview.vue b/frontend/src/views/workbench/homePage/components/overview.vue index 1067a36253..be910a5014 100644 --- a/frontend/src/views/workbench/homePage/components/overview.vue +++ b/frontend/src/views/workbench/homePage/components/overview.vue @@ -161,12 +161,20 @@ showSkeleton.value = false; } } + const chartRef = ref>(); async function handleProjectChange(shouldEmit = false) { await nextTick(); innerSelectAll.value = appStore.projectList.length === innerProjectIds.value.length; await nextTick(); - initOverViewDetail(); + await initOverViewDetail(); + + const chartDom = chartRef.value?.chartRef; + + if (chartDom && chartDom.chart) { + createCustomTooltip(chartDom); + bindDataZoomEvent(chartRef, options); + } if (shouldEmit) emit('change'); } @@ -177,7 +185,6 @@ }); } } - const chartRef = ref>(); async function handleRefreshKeyChange() { await nextTick(() => { @@ -191,7 +198,6 @@ onMounted(async () => { await initOverViewDetail(); - nextTick(() => { const chartDom = chartRef.value?.chartRef; diff --git a/frontend/src/views/workbench/homePage/components/testPlanOverview.vue b/frontend/src/views/workbench/homePage/components/testPlanOverview.vue index 4667518d05..c75a2f2576 100644 --- a/frontend/src/views/workbench/homePage/components/testPlanOverview.vue +++ b/frontend/src/views/workbench/homePage/components/testPlanOverview.vue @@ -71,7 +71,9 @@ - +
+ +
@@ -318,16 +320,18 @@ const [newProjectId] = innerProjectIds.value; const projectName = projectOptions.value.find((e) => e.value === newProjectId)?.label; - const treeList = childrenData.value[newProjectId]; + const treeList = childrenData.value[newProjectId] || []; - const modules = findNodePathByKey(treeList, id, undefined, 'value'); + if (treeList.length) { + const modules = findNodePathByKey(treeList, id, undefined, 'value'); - if (modules) { - const moduleName = (modules || [])?.treePath.map((item: any) => item.label); - if (moduleName.length === 1) { - return `${projectName}/${moduleName[0]}`; + if (modules) { + const moduleName = (modules || [])?.treePath.map((item: any) => item.label); + if (moduleName.length === 1) { + return `${projectName}/${moduleName[0]}`; + } + return `${projectName}/${moduleName.join(' / ')}`; } - return `${projectName}/${moduleName.join(' / ')}`; } } @@ -403,7 +407,9 @@ onMounted(() => { projectOptions.value = appStore.projectList.map((e) => ({ value: e.id, label: e.name })); const [newProjectId] = props.item.projectIds; - selectValue.value = [newProjectId, props.item.planId]; + if (props.item.planId) { + selectValue.value = [newProjectId, props.item.planId]; + } refreshHandler(newProjectId); }); diff --git a/frontend/src/views/workbench/homePage/utils.ts b/frontend/src/views/workbench/homePage/utils.ts index 8703d1afb5..04161c074a 100644 --- a/frontend/src/views/workbench/homePage/utils.ts +++ b/frontend/src/views/workbench/homePage/utils.ts @@ -132,10 +132,7 @@ export function getCommonBarOptions(
-
${item.seriesName.replace( - /\s\(\d+\)$/, - '' - )}
+
${item.seriesName}
${addCommasToNumber(item.data.originValue || 0)}
@@ -256,7 +253,7 @@ export function getCommonBarOptions( ellipsis: '...', }, formatter(name: string) { - return name.replace(/\s\(\d+\)$/, ''); // 去掉后缀 "(数字) 确保seriesName 重复也可以展示为正常" + return name; }, tooltip: { show: true, @@ -320,7 +317,7 @@ export function getCommonBarOptions( } // 下方饼图配置 -export function getPieCharOptions(key: WorkCardEnum) { +export function getPieCharOptions() { return { title: { show: true, @@ -341,7 +338,7 @@ export function getPieCharOptions(key: WorkCardEnum) { }, textAlign: 'center', // 确保副标题居中 }, - color: colorMapConfig[key], + tooltip: { show: true }, legend: { show: false, @@ -351,6 +348,8 @@ export function getPieCharOptions(key: WorkCardEnum) { type: 'pie', radius: ['75%', '90%'], center: [90, '48%'], + minAngle: 5, // 设置扇区的最小角度 + minShowLabelAngle: 10, // 设置标签显示的最小角度 avoidLabelOverlap: false, label: { show: false, @@ -404,27 +403,29 @@ export function handlePieData( }[] | null = [] ) { - const options: Record = getPieCharOptions(key); + const options: Record = getPieCharOptions(); const lastStatusPercentList = statusPercentList ?? []; const hasDataLength = lastStatusPercentList.filter((e) => Number(e.count) > 0).length; const pieBorderWidth = hasDataLength === 1 ? 0 : 2; - options.series.data = - hasDataLength > 0 - ? lastStatusPercentList.map((item) => ({ - name: item.status, - value: item.count, - tooltip: { - ...toolTipConfig, - position: 'right', - show: !!hasPermission, - }, - itemStyle: { - borderWidth: pieBorderWidth, - borderColor: '#ffffff', - }, - })) - : []; + const lastData = lastStatusPercentList + .map((item, color) => ({ + name: item.status, + value: item.count, + tooltip: { + ...toolTipConfig, + position: 'right', + show: !!hasPermission, + }, + itemStyle: { + color: colorMapConfig[key][color], + borderWidth: pieBorderWidth, + borderColor: '#ffffff', + }, + })) + .filter((e) => e.value !== 0); + + options.series.data = hasDataLength > 0 ? lastData : []; // 计算总数和图例格式 const tempObject: Record = {}; @@ -677,10 +678,7 @@ export function getSeriesData(
-
${params.name.replace( - /\s\(\d+\)$/, - '' - )}
+
${params.name}
${addCommasToNumber(params.value)}