fix(工作台): 修复个工作台测试计划概览&缺陷饼图bug

frontend/src/api/modules/workbench.ts

@@ -230,7 +230,7 @@ export function workbenchTodoTestPlanList(data: TableQueryParams) {
 }
 // 待办-测试计划列表
 export function getWorkTestPlanListUrl(projectId: string) {
-  return MSR.get<CascaderOption[]>({ url: `${WorkTestPlanListUrl}/${projectId}` });
+  return MSR.get<CascaderOption[]>({ url: `${WorkTestPlanListUrl}/${projectId}` }, { ignoreCancelToken: true });
 }
 
 // 工作台-测试计划概览

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 });
       }
     }

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;

frontend/src/views/workbench/homePage/components/defectMemberBar.vue

@@ -97,21 +97,15 @@
   const hasPermission = ref<boolean>(false);
 
   function handleData(detail: OverViewOfProject) {
-    const labelCount: Record<string, any> = {};
-    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,

frontend/src/views/workbench/homePage/components/overview.vue

@@ -161,12 +161,20 @@
       showSkeleton.value = false;
     }
   }
+  const chartRef = ref<InstanceType<typeof MsChart>>();
 
   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<InstanceType<typeof MsChart>>();
 
   async function handleRefreshKeyChange() {
     await nextTick(() => {
@@ -191,7 +198,6 @@
 
   onMounted(async () => {
     await initOverViewDetail();
-
     nextTick(() => {
       const chartDom = chartRef.value?.chartRef;
 

frontend/src/views/workbench/homePage/components/testPlanOverview.vue

@@ -71,8 +71,10 @@
             <MsChart height="76px" width="76px" :options="execOptions" />
           </div>
         </div>
+        <div class="flex-1">
           <HeaderCard :content-tab-list="cardModuleList" />
         </div>
+      </div>
       <div>
         <MsChart ref="chartRef" height="280px" :options="options" />
       </div>
@@ -318,8 +320,9 @@
     const [newProjectId] = innerProjectIds.value;
     const projectName = projectOptions.value.find((e) => e.value === newProjectId)?.label;
 
-    const treeList = childrenData.value[newProjectId];
+    const treeList = childrenData.value[newProjectId] || [];
 
+    if (treeList.length) {
       const modules = findNodePathByKey(treeList, id, undefined, 'value');
 
       if (modules) {
@@ -330,6 +333,7 @@
         return `${projectName}/${moduleName.join(' / ')}`;
       }
     }
+  }
 
   async function changeHandler(value: string) {
     innerPlanId.value = value[value.length - 1];
@@ -403,7 +407,9 @@
   onMounted(() => {
     projectOptions.value = appStore.projectList.map((e) => ({ value: e.id, label: e.name }));
     const [newProjectId] = props.item.projectIds;
+    if (props.item.planId) {
       selectValue.value = [newProjectId, props.item.planId];
+    }
     refreshHandler(newProjectId);
   });
 

frontend/src/views/workbench/homePage/utils.ts

@@ -132,10 +132,7 @@ export function getCommonBarOptions(
           <div class="flex h-[18px] items-center justify-between">
             <div class="flex items-center">
               <div class="mb-[2px] mr-[8px] h-[8px] w-[8px] rounded-sm" style="background:${item.color}"></div>
-              <div class="one-line-text max-w-[100px] text-[var(--color-text-2)]">${item.seriesName.replace(
-                /\s\(\d+\)$/,
-                ''
-              )}</div>
+              <div class="one-line-text max-w-[100px] text-[var(--color-text-2)]">${item.seriesName}</div>
             </div>
             <div class="text-[var(--color-text-1)] font-semibold">${addCommasToNumber(item.data.originValue || 0)}</div>
           </div>
@@ -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,14 +403,13 @@ export function handlePieData(
       }[]
     | null = []
 ) {
-  const options: Record<string, any> = getPieCharOptions(key);
+  const options: Record<string, any> = 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) => ({
+  const lastData = lastStatusPercentList
+    .map((item, color) => ({
       name: item.status,
       value: item.count,
       tooltip: {
@@ -420,11 +418,14 @@ export function handlePieData(
         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<string, any> = {};
@@ -677,10 +678,7 @@ export function getSeriesData(
                 <div class="mb-[2px] mr-[8px] h-[8px] w-[8px] rounded-sm bg-[${params.color}]" style="background:${
               params.color
             }"></div>
-                <div class="one-line-text max-w-[100px]"" style="color:#959598">${params.name.replace(
-                  /\s\(\d+\)$/,
-                  ''
-                )}</div>
+                <div class="one-line-text max-w-[100px]"" style="color:#959598">${params.name}</div>
                 </div>
                 <div class="text-[var(--color-text-1)] font-semibold">${addCommasToNumber(params.value)}</div>
                 </div>