test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
xinxin.wu 2024-12-10 18:59:17 +08:00 committed by 刘瑞斌
parent 0e2894eea6
commit 0a7787a0cd
7 changed files with 62 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/api/modules/workbench.ts
View File

@ -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 });
}
// 工作台-测试计划概览

7
frontend/src/components/pure/chart/utils.ts
View File

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

2
frontend/src/views/workbench/components/notData.vue
View File

@ -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;

18
frontend/src/views/workbench/homePage/components/defectMemberBar.vue
View File

@ -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,

12
frontend/src/views/workbench/homePage/components/overview.vue
View File

@ -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;

24
frontend/src/views/workbench/homePage/components/testPlanOverview.vue
View File

@ -71,7 +71,9 @@
<MsChart height="76px" width="76px" :options="execOptions" />
</div>
</div>
<HeaderCard :content-tab-list="cardModuleList" />
<div class="flex-1">
<HeaderCard :content-tab-list="cardModuleList" />
</div>
</div>
<div>
<MsChart ref="chartRef" height="280px" :options="options" />
@ -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);
});

54
frontend/src/views/workbench/homePage/utils.ts
View File

@ -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,27 +403,29 @@ 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) => ({
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<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>