From 3723d803ad47b4dc0a9a875cf3ec13ee919e1b63 Mon Sep 17 00:00:00 2001 From: "xinxin.wu" Date: Tue, 26 Nov 2024 18:48:07 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E5=B7=A5=E4=BD=9C=E5=8F=B0):=20?= =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=B7=A5=E4=BD=9C=E5=8F=B0=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E6=A6=82=E8=A7=88=E5=92=8C=E6=88=91=E5=88=9B?= =?UTF-8?q?=E5=BB=BA=E7=9A=84=E5=8D=A1=E7=89=87=E8=B0=83=E6=95=B4=E4=BA=BA?= =?UTF-8?q?=E5=91=98=E6=A6=82=E8=A7=88=E4=BA=A4=E4=BA=92=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/business/ms-select/index.tsx | 9 -- .../homePage/components/defectMemberBar.vue | 4 +- .../homePage/components/overview.vue | 91 ++++--------------- .../homePage/components/overviewMember.vue | 82 +++++------------ .../src/views/workbench/homePage/utils.ts | 78 +++++++++++++++- 5 files changed, 115 insertions(+), 149 deletions(-) diff --git a/frontend/src/components/business/ms-select/index.tsx b/frontend/src/components/business/ms-select/index.tsx index 80b325927e..05e4c32198 100644 --- a/frontend/src/components/business/ms-select/index.tsx +++ b/frontend/src/components/business/ms-select/index.tsx @@ -349,15 +349,6 @@ export default defineComponent( } }); - watch( - () => props.defaultAllSelect, - (val) => { - if (val) { - handleSelectAllChange(true); - } - } - ); - // 检测全选状态变化，全选时需要覆盖选择器的输入框内容，展示文本 ‘全部’；非全选时则移除文本 ‘全部’ watchEffect(() => { const innerDom = selectRef.value?.$el.nextElementSibling.querySelector('.arco-select-view-inner') as HTMLElement; diff --git a/frontend/src/views/workbench/homePage/components/defectMemberBar.vue b/frontend/src/views/workbench/homePage/components/defectMemberBar.vue index f1771bcb5b..d07bc64f19 100644 --- a/frontend/src/views/workbench/homePage/components/defectMemberBar.vue +++ b/frontend/src/views/workbench/homePage/components/defectMemberBar.vue @@ -20,7 +20,6 @@ > { - const data = contentTabList.find((e) => e.value === xAxisKey); - return { - ...data, - label: t(data?.label || ''), - count: detail.caseCountMap[xAxisKey as WorkOverviewEnum], - }; - }); + cardModuleList.value = contentTabList + .map((item) => { + return { + ...item, + label: t(item.label), + count: detail.caseCountMap[item.value], + }; + }) + .filter((e) => Object.keys(detail.caseCountMap).includes(e.value as string)); - cardModuleList.value = tempAxisData as ModuleCardItem[]; options.value = getCommonBarOptions(hasRoom.value, getColorScheme(detail.projectCountList.length)); const { invisible, text } = handleNoDataDisplay(detail.xaxis, hasPermission.value); options.value.graphic.invisible = invisible; options.value.graphic.style.text = text; // x轴 - options.value.xAxis.data = cardModuleList.value.map((e) => e.label); + options.value.xAxis.data = detail.xaxis.map((e) => characterLimit(e, 10)); - let maxAxis = 5; - - // 处理data数据 - options.value.series = detail.projectCountList.map((item) => { - const countData: Record[] = item.count.map((e) => { - return { - name: item.name, - value: e, - originValue: e, - tooltip: { - show: true, - trigger: 'item', - enterable: true, - formatter(params: any) { - const html = ` -
-
-
-
${params.name}
-
-
${addCommasToNumber(params.value)}
-
- `; - return html; - }, - }, - }; - }); - - const itemMax = Math.max(...item.count); - - maxAxis = Math.max(itemMax, maxAxis); - - return { - name: item.name, - type: 'bar', - barWidth: 12, - legendHoverLink: true, - large: true, - itemStyle: { - borderRadius: [2, 2, 0, 0], // 上边圆角 - }, - z: 10, - data: countData, - barMinHeight: ((optionData: Record[]) => { - optionData.forEach((itemValue: any, index: number) => { - if (itemValue.value === 0) optionData[index].value = null; - }); - let hasZero = false; - for (let i = 0; i < optionData.length; i++) { - if (optionData[i].value === 0) { - hasZero = true; - break; - } - } - return hasZero ? 0 : 5; - })(countData), - }; - }); - options.value.yAxis[0].max = maxAxis < 100 ? 100 : maxAxis + 50; + const { maxAxis, data } = getSeriesData(detail.projectCountList); + options.value.series = data; + options.value.yAxis[0].max = maxAxis; } const showSkeleton = ref(false); const selectAll = computed(() => appStore.projectList.length === innerProjectIds.value.length); diff --git a/frontend/src/views/workbench/homePage/components/overviewMember.vue b/frontend/src/views/workbench/homePage/components/overviewMember.vue index b79ccfd3dd..f0dc9f67ff 100644 --- a/frontend/src/views/workbench/homePage/components/overviewMember.vue +++ b/frontend/src/views/workbench/homePage/components/overviewMember.vue @@ -16,12 +16,10 @@ :search-keys="['name']" class="!w-[200px]" :prefix="t('workbench.homePage.project')" - @change="changeProject" > ([]); const options = ref>({}); - const color = ['#811FA3', '#FFCA59', '#00C261', '#FFA1FF', '#F9F871', '#3370FF', '#F24F4F']; function handleData(detail: OverViewOfProject) { - options.value = getCommonBarOptions(detail.xaxis.length >= 7, color); + options.value = getCommonBarOptions(detail.xaxis.length >= 7, getColorScheme(7)); const { invisible, text } = handleNoDataDisplay(detail.xaxis, hasPermission.value); options.value.graphic.invisible = invisible; options.value.graphic.style.text = text; options.value.xAxis.data = detail.xaxis.map((e) => characterLimit(e, 10)); - let maxAxis = 5; + const { maxAxis, data } = getSeriesData(detail.projectCountList); - // 处理data数据 - options.value.series = detail.projectCountList.map((item, sid) => { - const countData: Record[] = item.count.map((e) => { - return { - name: item.name, - value: e, - originValue: e, - }; - }); - - const itemMax = Math.max(...item.count); - - maxAxis = Math.max(itemMax, maxAxis); - - return { - name: t(contentTabList[sid].label), - type: 'bar', - barWidth: 12, - legendHoverLink: true, - large: true, - itemStyle: { - borderRadius: [2, 2, 0, 0], - }, - data: countData, - barMinHeight: ((optionData: Record[]) => { - optionData.forEach((itemValue: any, index: number) => { - if (itemValue.value === 0) optionData[index].value = null; - }); - let hasZero = false; - for (let i = 0; i < optionData.length; i++) { - if (optionData[i].value === 0) { - hasZero = true; - break; - } - } - return hasZero ? 0 : 5; - })(countData), - }; - }); - options.value.yAxis[0].max = maxAxis < 100 ? 100 : maxAxis + 50; + options.value.series = data; + options.value.yAxis[0].max = maxAxis; } const showSkeleton = ref(false); @@ -187,21 +145,16 @@ label: e.name, value: e.id, })); + innerHandleUsers.value = innerHandleUsers.value.filter((id: string) => + memberOptions.value.some((member) => member.value === id) + ); } const isInit = ref(true); - function changeProject() { - innerHandleUsers.value = []; - nextTick(() => { - getMemberOptions(); - initOverViewMemberDetail(); - emit('change'); - }); - } - - function changeMember() { + function changeMember(value: string[]) { nextTick(() => { initOverViewMemberDetail(); + innerHandleUsers.value = value; emit('change'); }); } @@ -241,19 +194,26 @@ onMounted(() => { isInit.value = false; - initOverViewMemberDetail(); if (props.item.projectIds.length) { getMemberOptions(); } + initOverViewMemberDetail(); }); - watch([() => props.refreshKey, () => projectId.value], async () => { + watch([() => props.refreshKey, () => projectId.value], async ([_key, newProjectId]) => { await nextTick(); - initOverViewMemberDetail(); - await sleep(50); + + if (newProjectId) { + innerHandleUsers.value = []; + emit('change'); + } + if (props.item.projectIds.length) { getMemberOptions(); } + await sleep(50); + + initOverViewMemberDetail(); }); diff --git a/frontend/src/views/workbench/homePage/utils.ts b/frontend/src/views/workbench/homePage/utils.ts index 325c4b60de..366e82169f 100644 --- a/frontend/src/views/workbench/homePage/utils.ts +++ b/frontend/src/views/workbench/homePage/utils.ts @@ -1,17 +1,18 @@ import { cloneDeep } from 'lodash-es'; import { toolTipConfig } from '@/config/testPlan'; -import { commonRatePieOptions, defaultValueMap } from '@/config/workbench'; +import { commonRatePieOptions, contentTabList, defaultValueMap } from '@/config/workbench'; import { useI18n } from '@/hooks/useI18n'; import { addCommasToNumber } from '@/utils'; import { WorkCardEnum } from '@/enums/workbenchEnum'; const { t } = useI18n(); -// 通用颜色配置 +// TODO 通用颜色配置注: 目前柱状图只用到了7种色阶，其他色阶暂时保留 const commonColorConfig: Record = { 2: ['#783887', '#FFC14E'], 4: ['#783887', '#FFC14E', '#2DFCEF', '#3370FF'], + 7: ['#811FA3', '#00C261', '#FF9964', '#50CEFB', '#EE50A3', '#3370FF', '#D34400'], 8: ['#783887', '#FFC14E', '#2DFCEF', '#3370FF', '#811FA3', '#00D1FF', '#FFA53D', '#00C261'], 12: [ '#AA4FBF', @@ -55,6 +56,7 @@ const commonColorConfig: Record = { export function getColorScheme(dataLength: number): string[] { if (dataLength <= 2) return commonColorConfig[2]; if (dataLength <= 4) return commonColorConfig[4]; + if (dataLength <= 7) return commonColorConfig[7]; if (dataLength <= 8) return commonColorConfig[8]; if (dataLength <= 12) return commonColorConfig[12]; return commonColorConfig[13]; @@ -543,3 +545,75 @@ export function handleUpdateTabPie( options, }; } + +export function getSeriesData( + projectCountList: { + id: string; + name: string; + count: number[]; + }[] +) { + let maxAxis = 5; + const seriesData = projectCountList.map((item, sid) => { + const countData: Record[] = item.count.map((e) => { + return { + name: t(contentTabList[sid].label), + value: e, + originValue: e, + tooltip: { + show: true, + trigger: 'item', + enterable: true, + formatter(params: any) { + const html = ` +
+
+
+
${params.name}
+
+
${addCommasToNumber(params.value)}
+
+ `; + return html; + }, + }, + }; + }); + + const itemMax = Math.max(...item.count); + + maxAxis = Math.max(itemMax, maxAxis); + + return { + name: t(contentTabList[sid].label), + type: 'bar', + barWidth: 12, + legendHoverLink: true, + large: true, + itemStyle: { + borderRadius: [2, 2, 0, 0], + }, + data: countData, + barMinHeight: ((optionData: Record[]) => { + optionData.forEach((itemValue: any, index: number) => { + if (itemValue.value === 0) optionData[index].value = null; + }); + let hasZero = false; + for (let i = 0; i < optionData.length; i++) { + if (optionData[i].value === 0) { + hasZero = true; + break; + } + } + return hasZero ? 0 : 5; + })(countData), + }; + }); + + return { + data: seriesData, + maxAxis: maxAxis < 100 ? 100 : maxAxis + 50, + }; +}