From fd05fdaa35063cc17b51625f8a3396aeb0b34953 Mon Sep 17 00:00:00 2001 From: "xinxin.wu" Date: Thu, 28 Nov 2024 17:38:04 +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=E9=A5=BC=E5=9B=BE=E5=9B=BE=E4=BE=8B=E8=87=AA=E9=80=82?= =?UTF-8?q?=E5=BA=94=E5=9B=BE=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/pure/chart/index.vue | 8 +- .../homePage/components/apiCount.vue | 25 ++- .../homePage/components/caseCount.vue | 23 ++- .../homePage/components/caseReviewedCount.vue | 21 ++- .../homePage/components/defectCount.vue | 23 ++- .../homePage/components/defectMemberBar.vue | 2 +- .../homePage/components/legendPieChart.vue | 172 ++++++++++++++++++ .../homePage/components/overview.vue | 3 +- .../homePage/components/overviewMember.vue | 2 +- .../homePage/components/testPlanCount.vue | 24 ++- .../src/views/workbench/homePage/utils.ts | 124 +------------ 11 files changed, 286 insertions(+), 141 deletions(-) create mode 100644 frontend/src/views/workbench/homePage/components/legendPieChart.vue diff --git a/frontend/src/components/pure/chart/index.vue b/frontend/src/components/pure/chart/index.vue index 3e2d92fe27..0935737d23 100644 --- a/frontend/src/components/pure/chart/index.vue +++ b/frontend/src/components/pure/chart/index.vue @@ -1,5 +1,5 @@ diff --git a/frontend/src/views/workbench/homePage/components/apiCount.vue b/frontend/src/views/workbench/homePage/components/apiCount.vue index 22c0bcb946..497e773bfa 100644 --- a/frontend/src/views/workbench/homePage/components/apiCount.vue +++ b/frontend/src/views/workbench/homePage/components/apiCount.vue @@ -38,8 +38,13 @@ /> -
- +
+
@@ -52,9 +57,9 @@ */ import { ref } from 'vue'; - import MsChart from '@/components/pure/chart/index.vue'; import MsSelect from '@/components/business/ms-select'; import CardSkeleton from './cardSkeleton.vue'; + import LegendPieChart, { legendDataType } from './legendPieChart.vue'; import PassRatePie from './passRatePie.vue'; import { workApiCountCoverRage, workApiCountDetail } from '@/api/modules/workbench'; @@ -63,7 +68,7 @@ import type { ApiCoverageData, SelectedCardItem, TimeFormParams } from '@/models/workbench/homePage'; - import { handlePieData, handleUpdateTabPie } from '../utils'; + import { colorMapConfig, handlePieData, handleUpdateTabPie } from '../utils'; const { t } = useI18n(); const appStore = useAppStore(); @@ -87,6 +92,7 @@ const loading = ref(false); const projectId = ref(innerProjectIds.value[0]); + const currentPage = ref(1); const timeForm = inject>( 'timeForm', @@ -123,6 +129,9 @@ const apiCountOptions = ref({}); const hasPermission = ref(false); + + const statusPercentValue = ref([]); + async function handleCoverData(detail: ApiCoverageData) { const { unCoverWithApiDefinition, coverWithApiDefinition, apiCoverage } = detail; const coverData: { @@ -150,6 +159,7 @@ coverValueList.value = [...coverList]; coverOptions.value = { ...covOptions }; } + async function initApiCountRate() { try { loading.value = true; @@ -181,6 +191,13 @@ handleUsers: [], }); const { statusStatisticsMap, statusPercentList, errorCode } = detail; + statusPercentValue.value = (statusPercentList || []).map((item, index) => { + return { + ...item, + selected: true, + color: `${colorMapConfig[props.item.key][index]}`, + }; + }); hasPermission.value = errorCode !== 109001; apiCountOptions.value = handlePieData(props.item.key, hasPermission.value, statusPercentList); diff --git a/frontend/src/views/workbench/homePage/components/caseCount.vue b/frontend/src/views/workbench/homePage/components/caseCount.vue index 55cfb948a1..0e1e2e4cda 100644 --- a/frontend/src/views/workbench/homePage/components/caseCount.vue +++ b/frontend/src/views/workbench/homePage/components/caseCount.vue @@ -34,8 +34,13 @@ -
- +
+
@@ -48,9 +53,9 @@ */ import { ref } from 'vue'; - import MsChart from '@/components/pure/chart/index.vue'; import MsSelect from '@/components/business/ms-select'; import CardSkeleton from './cardSkeleton.vue'; + import LegendPieChart, { legendDataType } from './legendPieChart.vue'; import PassRatePie from './passRatePie.vue'; import { workCaseCountDetail } from '@/api/modules/workbench'; @@ -59,7 +64,7 @@ import type { SelectedCardItem, TimeFormParams } from '@/models/workbench/homePage'; - import { handlePieData, handleUpdateTabPie } from '../utils'; + import { colorMapConfig, handlePieData, handleUpdateTabPie } from '../utils'; const appStore = useAppStore(); const { t } = useI18n(); @@ -78,6 +83,7 @@ }); const projectId = ref(innerProjectIds.value[0]); + const currentPage = ref(1); const timeForm = inject>( 'timeForm', @@ -117,6 +123,7 @@ const caseCountOptions = ref>({}); const showSkeleton = ref(false); + const statusPercentValue = ref([]); async function initCaseCount() { try { @@ -134,6 +141,14 @@ }; const detail = await workCaseCountDetail(params); const { statusStatisticsMap, statusPercentList } = detail; + + statusPercentValue.value = (statusPercentList || []).map((item, index) => { + return { + ...item, + selected: true, + color: `${colorMapConfig[props.item.key][index]}`, + }; + }); hasPermission.value = detail.errorCode !== 109001; caseCountOptions.value = handlePieData(props.item.key, hasPermission.value, statusPercentList); diff --git a/frontend/src/views/workbench/homePage/components/caseReviewedCount.vue b/frontend/src/views/workbench/homePage/components/caseReviewedCount.vue index 74ff0ddd4e..ff6f349608 100644 --- a/frontend/src/views/workbench/homePage/components/caseReviewedCount.vue +++ b/frontend/src/views/workbench/homePage/components/caseReviewedCount.vue @@ -34,7 +34,12 @@
- +
@@ -47,9 +52,9 @@ */ import { ref } from 'vue'; - import MsChart from '@/components/pure/chart/index.vue'; import MsSelect from '@/components/business/ms-select'; import CardSkeleton from './cardSkeleton.vue'; + import LegendPieChart, { legendDataType } from './legendPieChart.vue'; import PassRatePie from './passRatePie.vue'; import { workCaseReviewDetail } from '@/api/modules/workbench'; @@ -58,7 +63,7 @@ import type { PassRateDataType, SelectedCardItem, TimeFormParams } from '@/models/workbench/homePage'; - import { handlePieData, handleUpdateTabPie } from '../utils'; + import { colorMapConfig, handlePieData, handleUpdateTabPie } from '../utils'; const { t } = useI18n(); const appStore = useAppStore(); @@ -75,6 +80,7 @@ const innerProjectIds = defineModel('projectIds', { required: true, }); + const currentPage = ref(1); const projectId = ref(innerProjectIds.value[0]); @@ -106,6 +112,7 @@ const hasPermission = ref(false); const showSkeleton = ref(false); + const statusPercentValue = ref([]); async function initReviewCount() { try { @@ -126,6 +133,14 @@ hasPermission.value = detail.errorCode !== 109001; const { statusStatisticsMap, statusPercentList } = detail; + statusPercentValue.value = (statusPercentList || []).map((item, index) => { + return { + ...item, + selected: true, + color: `${colorMapConfig[props.item.key][index]}`, + }; + }); + caseReviewCountOptions.value = handlePieData(props.item.key, hasPermission.value, statusPercentList); const { options: coverOptions, valueList } = handleUpdateTabPie( statusStatisticsMap?.cover || [], diff --git a/frontend/src/views/workbench/homePage/components/defectCount.vue b/frontend/src/views/workbench/homePage/components/defectCount.vue index 0d96575928..e40641954e 100644 --- a/frontend/src/views/workbench/homePage/components/defectCount.vue +++ b/frontend/src/views/workbench/homePage/components/defectCount.vue @@ -33,8 +33,13 @@ /> -
- +
+
@@ -47,9 +52,9 @@ */ import { ref } from 'vue'; - import MsChart from '@/components/pure/chart/index.vue'; import MsSelect from '@/components/business/ms-select'; import CardSkeleton from './cardSkeleton.vue'; + import LegendPieChart, { legendDataType } from './legendPieChart.vue'; import PassRatePie from './passRatePie.vue'; import { @@ -69,7 +74,7 @@ } from '@/models/workbench/homePage'; import { WorkCardEnum } from '@/enums/workbenchEnum'; - import { handlePieData, handleUpdateTabPie } from '../utils'; + import { colorMapConfig, handlePieData, handleUpdateTabPie } from '../utils'; const appStore = useAppStore(); @@ -120,6 +125,7 @@ const hasPermission = ref(false); const showSkeleton = ref(false); + const statusPercentValue = ref([]); async function initCount() { try { @@ -140,6 +146,13 @@ const { statusStatisticsMap, statusPercentList, errorCode } = detail; hasPermission.value = errorCode !== 109001; + statusPercentValue.value = (statusPercentList || []).map((item, index) => { + return { + ...item, + selected: true, + color: `${colorMapConfig[props.item.key][index]}`, + }; + }); countOptions.value = handlePieData(props.item.key, hasPermission.value, statusPercentList); if (props.item.key === WorkCardEnum.PLAN_LEGACY_BUG) { @@ -183,6 +196,8 @@ }); } + const currentPage = ref(1); + onMounted(() => { initCount(); }); diff --git a/frontend/src/views/workbench/homePage/components/defectMemberBar.vue b/frontend/src/views/workbench/homePage/components/defectMemberBar.vue index 4aa4ae44bb..4e2ca1c961 100644 --- a/frontend/src/views/workbench/homePage/components/defectMemberBar.vue +++ b/frontend/src/views/workbench/homePage/components/defectMemberBar.vue @@ -140,7 +140,7 @@ })(countData), }; }); - options.value.yAxis[0].max = maxAxis < 100 ? 50 : maxAxis + 50; + options.value.yAxis[0].max = maxAxis <= 100 ? 100 : maxAxis + 50; } const showSkeleton = ref(false); diff --git a/frontend/src/views/workbench/homePage/components/legendPieChart.vue b/frontend/src/views/workbench/homePage/components/legendPieChart.vue new file mode 100644 index 0000000000..531d6201a8 --- /dev/null +++ b/frontend/src/views/workbench/homePage/components/legendPieChart.vue @@ -0,0 +1,172 @@ + + + + + diff --git a/frontend/src/views/workbench/homePage/components/overview.vue b/frontend/src/views/workbench/homePage/components/overview.vue index 6cb245ad10..f245322a1f 100644 --- a/frontend/src/views/workbench/homePage/components/overview.vue +++ b/frontend/src/views/workbench/homePage/components/overview.vue @@ -54,7 +54,6 @@ import { contentTabList } from '@/config/workbench'; import { useI18n } from '@/hooks/useI18n'; import useAppStore from '@/store/modules/app'; - import { characterLimit } from '@/utils'; import type { ModuleCardItem, @@ -128,7 +127,7 @@ options.value.graphic.invisible = invisible; options.value.graphic.style.text = text; // x轴 - options.value.xAxis.data = detail.xaxis.map((e) => characterLimit(e, 10)); + options.value.xAxis.data = detail.xaxis; const { maxAxis, data } = getSeriesData(detail.projectCountList); options.value.series = data; diff --git a/frontend/src/views/workbench/homePage/components/overviewMember.vue b/frontend/src/views/workbench/homePage/components/overviewMember.vue index 32ae63422b..c2e5bc6be6 100644 --- a/frontend/src/views/workbench/homePage/components/overviewMember.vue +++ b/frontend/src/views/workbench/homePage/components/overviewMember.vue @@ -101,7 +101,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)); + options.value.xAxis.data = detail.xaxis; const { maxAxis, data } = getSeriesData(detail.projectCountList); diff --git a/frontend/src/views/workbench/homePage/components/testPlanCount.vue b/frontend/src/views/workbench/homePage/components/testPlanCount.vue index 4c49630587..eda2313173 100644 --- a/frontend/src/views/workbench/homePage/components/testPlanCount.vue +++ b/frontend/src/views/workbench/homePage/components/testPlanCount.vue @@ -32,8 +32,13 @@ /> -
- +
+
@@ -46,11 +51,10 @@ */ import { ref } from 'vue'; - import MsChart from '@/components/pure/chart/index.vue'; import MsSelect from '@/components/business/ms-select'; import CardSkeleton from './cardSkeleton.vue'; + import LegendPieChart, { legendDataType } from './legendPieChart.vue'; import PassRatePie from './passRatePie.vue'; - import TabCard from './tabCard.vue'; import { workTestPlanRage } from '@/api/modules/workbench'; import { useI18n } from '@/hooks/useI18n'; @@ -63,7 +67,7 @@ WorkTestPlanRageDetail, } from '@/models/workbench/homePage'; - import { handlePieData, handleUpdateTabPie } from '../utils'; + import { colorMapConfig, handlePieData, handleUpdateTabPie } from '../utils'; const { t } = useI18n(); const appStore = useAppStore(); @@ -80,6 +84,7 @@ const innerProjectIds = defineModel('projectIds', { required: true, }); + const currentPage = ref(1); const projectId = ref(innerProjectIds.value[0]); @@ -122,6 +127,7 @@ // 测试计划权限 const hasPermission = ref(false); const showSkeleton = ref(false); + const statusPercentValue = ref([]); async function initTestPlanCount() { try { @@ -162,6 +168,14 @@ { status: t('common.archived'), count: archived, percentValue: '0%' }, ]; + statusPercentValue.value = (statusPercentList || []).map((item, index) => { + return { + ...item, + selected: true, + color: `${colorMapConfig[props.item.key][index]}`, + }; + }); + const total = statusPercentList.reduce((sum, item) => sum + item.count, 0); const listStatusPercentList = statusPercentList.map((item) => ({ diff --git a/frontend/src/views/workbench/homePage/utils.ts b/frontend/src/views/workbench/homePage/utils.ts index 366e82169f..e28351a976 100644 --- a/frontend/src/views/workbench/homePage/utils.ts +++ b/frontend/src/views/workbench/homePage/utils.ts @@ -99,7 +99,8 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[]): Record +
+
${params[0].axisValueLabel}
${params .map( (item: any) => ` @@ -136,6 +137,9 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[]): Record = getPieCharOptions(key, hasPermission); + const options: Record = getPieCharOptions(key); const lastStatusPercentList = statusPercentList ?? []; options.series.data = lastStatusPercentList.map((item) => ({ name: item.status, @@ -490,13 +389,6 @@ export function handlePieData( options.series.data = []; } - // 设置图例的格式化函数，显示百分比 - options.legend.formatter = (name: string) => { - return `{a|${tempObject[name].status}} {b|${addCommasToNumber(tempObject[name].count)}} {c|${ - tempObject[name].percentValue - }}`; - }; - return options; }