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

feat(工作台): 工作台可视化暗黑主题

This commit is contained in:
xinxin.wu 2024-12-17 19:00:19 +08:00 committed by Craftsman
parent 773acd7937
commit a4bac8a86a
12 changed files with 343 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/config/chartTheme.ts Normal file
View File

@ -0,0 +1,61 @@
import useAppStore from '@/store/modules/app';
const appStore = useAppStore();
const colorThemeConfig: Record<string, any> = {
xLabelColor: {
dark: '#C0C2CF',
bright: '#646466',
},
legendColor: {
dark: '#E3E6F3',
bright: '#323233',
},
splitLineColor: {
dark: '#434552',
bright: '#EDEDF1',
},
yLabelColor: {
dark: '#90929F',
bright: '#AEAEB2',
},
subtextStyleColor: {
dark: '#90929F',
bright: '#323233',
},
itemStyleBorderColor: {
dark: '#242633',
bright: '#ffffff',
},
initItemStyleColor: {
dark: '#434552',
bright: '#D4D4D8',
},
pageIconColor: {
dark: '#959598',
bright: '#959598',
},
pageIconInactiveColor: {
dark: '#959598',
bright: '#C7C7CB',
},
pageTextStyleColor: {
dark: '#C7C7CB',
bright: '#959598',
},
graphicBackgroundColor: {
dark: '#ADB0BC',
bright: '#F9F9FE',
},
graphicFillColor: {
dark: '#242633',
bright: '#959598',
},
};
function getVisualThemeColor(key: string): string {
const theme = appStore.isDarkTheme ? 'dark' : 'bright';
return colorThemeConfig[key]?.[theme];
}
export default getVisualThemeColor;

173
frontend/src/config/workbench.ts
View File

@ -1,5 +1,6 @@
import { cloneDeep } from 'lodash-es';
import getVisualThemeColor from '@/config/chartTheme';
import { commonConfig, toolTipConfig } from '@/config/testPlan';
import type { ModuleCardItem } from '@/models/workbench/homePage';
@ -145,99 +146,101 @@ export const defaultLegacy = [
},
];
export const defaultValueMap: Record<string, any> = {
// 用例数量
[WorkCardEnum.CASE_COUNT]: {
review: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', '#D4D4D8'],
defaultName: 'workbench.homePage.reviewRate',
export const defaultValueMap = (): Record<string, any> => {
return {
// 用例数量
[WorkCardEnum.CASE_COUNT]: {
review: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.reviewRate',
},
pass: {
defaultList: cloneDeep(defaultPass),
color: ['#00C261', '#ED0303'],
defaultName: 'workbench.homePage.passRate',
},
},
pass: {
defaultList: cloneDeep(defaultPass),
color: ['#00C261', '#ED0303'],
defaultName: 'workbench.homePage.passRate',
// 关联用例数量
[WorkCardEnum.ASSOCIATE_CASE_COUNT]: {
cover: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.coverRate',
},
},
},
// 关联用例数量
[WorkCardEnum.ASSOCIATE_CASE_COUNT]: {
cover: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', '#D4D4D8'],
defaultName: 'workbench.homePage.coverRate',
// 用例评审数
[WorkCardEnum.REVIEW_CASE_COUNT]: {
cover: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.coverRate',
},
},
},
// 用例评审数
[WorkCardEnum.REVIEW_CASE_COUNT]: {
cover: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', '#D4D4D8'],
defaultName: 'workbench.homePage.coverRate',
// 测试计划数
[WorkCardEnum.TEST_PLAN_COUNT]: {
execute: {
defaultList: cloneDeep(defaultExecution),
color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
defaultName: 'workbench.homePage.executeRate',
},
pass: {
defaultList: cloneDeep(defaultPass),
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.passRate',
},
complete: {
defaultList: cloneDeep(defaultComplete),
color: [getVisualThemeColor('initItemStyleColor'), '#3370FF', '#00C261', '#FF9964'],
defaultName: 'workbench.homePage.completeRate',
},
},
},
// 测试计划数
[WorkCardEnum.TEST_PLAN_COUNT]: {
execute: {
defaultList: cloneDeep(defaultExecution),
color: ['#D4D4D8', '#00C261'],
defaultName: 'workbench.homePage.executeRate',
// 测试计划遗留缺陷
[WorkCardEnum.PLAN_LEGACY_BUG]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.legacyRate',
},
},
pass: {
defaultList: cloneDeep(defaultPass),
color: ['#00C261', '#D4D4D8'],
defaultName: 'workbench.homePage.passRate',
// 缺陷数
[WorkCardEnum.BUG_COUNT]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.legacyRate',
},
},
complete: {
defaultList: cloneDeep(defaultComplete),
color: ['#D4D4D8', '#3370FF', '#00C261', '#FF9964'],
defaultName: 'workbench.homePage.completeRate',
// 待我处理的缺陷
[WorkCardEnum.HANDLE_BUG_BY_ME]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.legacyRate',
},
},
},
// 测试计划遗留缺陷
[WorkCardEnum.PLAN_LEGACY_BUG]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', '#D4D4D8'],
defaultName: 'workbench.homePage.legacyRate',
// 接口数量
[WorkCardEnum.API_COUNT]: {
cover: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.coverRate',
},
complete: {
defaultList: cloneDeep(defaultComplete),
color: ['#00C261', '#3370FF', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.completeRate',
},
},
},
// 缺陷数
[WorkCardEnum.BUG_COUNT]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', '#D4D4D8'],
defaultName: 'workbench.homePage.legacyRate',
// 我创建的缺陷
[WorkCardEnum.CREATE_BUG_BY_ME]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', getVisualThemeColor('initItemStyleColor')],
defaultName: 'workbench.homePage.legacyRate',
},
},
},
// 待我处理的缺陷
[WorkCardEnum.HANDLE_BUG_BY_ME]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', '#D4D4D8'],
defaultName: 'workbench.homePage.legacyRate',
},
},
// 接口数量
[WorkCardEnum.API_COUNT]: {
cover: {
defaultList: cloneDeep(defaultCover),
color: ['#00C261', '#D4D4D8'],
defaultName: 'workbench.homePage.coverRate',
},
complete: {
defaultList: cloneDeep(defaultComplete),
color: ['#00C261', '#3370FF', '#D4D4D8'],
defaultName: 'workbench.homePage.completeRate',
},
},
// 我创建的缺陷
[WorkCardEnum.CREATE_BUG_BY_ME]: {
legacy: {
defaultList: cloneDeep(defaultLegacy),
color: ['#00C261', '#D4D4D8'],
defaultName: 'workbench.homePage.legacyRate',
},
},
};
};
// XX率饼图配置
@ -257,7 +260,7 @@ export const commonRatePieOptions = {
subtext: '0',
subtextStyle: {
fontSize: 12,
color: '#323233',
color: getVisualThemeColor('subtextStyleColor'),
fontWeight: 'bold',
align: 'center',
lineHeight: 3,

7
frontend/src/views/workbench/homePage/components/apiAndScenarioCase.vue
View File

@ -90,6 +90,7 @@
import RatioPie from './ratioPie.vue';
import { workApiCaseCountDetail, workApiCountCoverRage, workScenarioCaseCountDetail } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useOpenNewPage from '@/hooks/useOpenNewPage';
import useAppStore from '@/store/modules/app';
@ -196,7 +197,7 @@
const coverTitleConfig = computed(() => {
return {
name: t('workbench.homePage.apiCoverage'),
color: ['#D4D4D8', '#00C261'],
color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
tooltipText:
props.item.key === WorkCardEnum.API_CASE_COUNT
? t('workbench.homePage.apiCaseCountCoverRateTooltip')
@ -208,12 +209,12 @@
return props.item.key === WorkCardEnum.API_CASE_COUNT
? {
name: t('workbench.homePage.caseExecutionRate'),
color: ['#D4D4D8', '#00C261'],
color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
tooltipText: t('workbench.homePage.apiCaseCountExecuteRateTooltip'),
}
: {
name: t('workbench.homePage.sceneExecutionRate'),
color: ['#D4D4D8', '#00C261'],
color: [getVisualThemeColor('initItemStyleColor'), '#00C261'],
tooltipText: t('workbench.homePage.scenarioCaseCountExecuteRateTooltip'),
};
});

7
frontend/src/views/workbench/homePage/components/apiCount.vue
View File

@ -63,6 +63,7 @@
import PassRatePie from './passRatePie.vue';
import { workApiCountCoverRage, workApiCountDetail } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -195,7 +196,11 @@
return {
...item,
selected: true,
color: `${colorMapConfig[props.item.key][index]}`,
color: `${
colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
? colorMapConfig[props.item.key][index]
: getVisualThemeColor('initItemStyleColor')
}`,
};
});

7
frontend/src/views/workbench/homePage/components/caseCount.vue
View File

@ -59,6 +59,7 @@
import PassRatePie from './passRatePie.vue';
import { workCaseCountDetail } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -146,7 +147,11 @@
return {
...item,
selected: true,
color: `${colorMapConfig[props.item.key][index]}`,
color: `${
colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
? colorMapConfig[props.item.key][index]
: getVisualThemeColor('initItemStyleColor')
}`,
};
});
hasPermission.value = detail.errorCode !== 109001;

7
frontend/src/views/workbench/homePage/components/caseReviewedCount.vue
View File

@ -58,6 +58,7 @@
import PassRatePie from './passRatePie.vue';
import { workCaseReviewDetail } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -137,7 +138,11 @@
return {
...item,
selected: true,
color: `${colorMapConfig[props.item.key][index]}`,
color: `${
colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
? colorMapConfig[props.item.key][index]
: getVisualThemeColor('initItemStyleColor')
}`,
};
});

7
frontend/src/views/workbench/homePage/components/defectCount.vue
View File

@ -63,6 +63,7 @@
workBugHandleByMe,
workPlanLegacyBug,
} from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -150,7 +151,11 @@
return {
...item,
selected: true,
color: `${colorMapConfig[props.item.key][index]}`,
color: `${
colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
? colorMapConfig[props.item.key][index]
: getVisualThemeColor('initItemStyleColor')
}`,
};
});

54
frontend/src/views/workbench/homePage/components/ratioPie.vue
View File

@ -54,6 +54,7 @@
import MsChart from '@/components/pure/chart/index.vue';
import getVisualThemeColor from '@/config/chartTheme';
import { toolTipConfig } from '@/config/testPlan';
import { useI18n } from '@/hooks/useI18n';
import useOpenNewPage from '@/hooks/useOpenNewPage';
@ -92,7 +93,7 @@
subtext: '',
subtextStyle: {
fontSize: 14,
color: '#323233',
color: getVisualThemeColor('subtextStyleColor'),
fontWeight: 'bold',
lineHeight: 3,
},
@ -118,29 +119,11 @@
},
y: 'bottom',
bottom: 'center',
formatter: (name: any) => {
return `{a|${name}} {b|${addCommasToNumber(1022220)}}`;
},
tooltip: {
show: false,
},
},
textStyle: {
rich: {
a: {
width: 60,
color: '#959598', // 状态名称颜色
fontSize: 12,
},
b: {
width: 60,
color: '#783887',
fontSize: 16,
fontWeight: 'bold',
padding: [0, 0, 0, 16],
},
},
},
series: {
name: '',
type: 'pie',
@ -188,13 +171,27 @@
itemStyle: {
color: color[i],
borderWidth: pieBorderWidth,
borderColor: '#ffffff',
borderColor: getVisualThemeColor('itemStyleBorderColor'),
},
};
})
.filter((e) => e.value !== 0);
options.value.series.data = hasDataLength > 0 ? seriesData : [];
options.value.series.data =
hasDataLength > 0
? seriesData
: [
{
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
},
];
legend.value = [...props.data.slice(1)].map((e, i) => {
return {
...e,
@ -211,7 +208,18 @@
if (props.hasPermission) {
options.value.title.subtext = `${props.data[0].value ?? 0}%`;
} else {
options.value.series.data = [];
options.value.series.data = [
{
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
},
];
options.value.title.subtext = `-%`;
}

7
frontend/src/views/workbench/homePage/components/testPlanCount.vue
View File

@ -57,6 +57,7 @@
import PassRatePie from './passRatePie.vue';
import { workTestPlanRage } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -179,7 +180,11 @@
return {
...item,
selected: true,
color: `${colorMapConfig[props.item.key][index]}`,
color: `${
colorMapConfig[props.item.key][index] !== 'initItemStyleColor'
? colorMapConfig[props.item.key][index]
: getVisualThemeColor('initItemStyleColor')
}`,
percentValue: total > 0 ? `${((item.count / total) * 100).toFixed(2)}%` : '0.00%',
};
});

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

@ -97,6 +97,7 @@
import ThresholdProgress from './thresholdProgress.vue';
import { getWorkTestPlanListUrl, workTestPlanOverviewDetail } from '@/api/modules/workbench';
import getVisualThemeColor from '@/config/chartTheme';
import { commonRatePieOptions } from '@/config/workbench';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
@ -250,24 +251,40 @@
{
name: t('common.unExecute'),
value: totalCount - executeCount,
color: '#EDEDF1',
color: getVisualThemeColor('initItemStyleColor'),
},
];
const pieBorderWidth = executeData.filter((e) => Number(e.value) > 0).length === 1 ? 0 : 1;
execOptions.value.series.data = executeData
const lastExecuteData = executeData
.map((e) => {
return {
...e,
itemStyle: {
borderWidth: pieBorderWidth,
borderColor: '#ffffff',
borderColor: getVisualThemeColor('itemStyleBorderColor'),
color: e.color,
},
};
})
.filter((e) => e.value !== 0);
execOptions.value.series.data =
lastExecuteData.length > 0
? lastExecuteData
: [
{
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
},
];
}
const showSkeleton = ref(false);

7
frontend/src/views/workbench/homePage/index.vue
View File

@ -345,6 +345,13 @@
initDefaultList();
});
watch(
() => appStore.isDarkTheme,
() => {
handleRefresh();
}
);
const time = ref({ ...timeForm.value });
watch(

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

@ -1,5 +1,6 @@
import { cloneDeep } from 'lodash-es';
import getVisualThemeColor from '@/config/chartTheme';
import { toolTipConfig } from '@/config/testPlan';
import { commonRatePieOptions, defaultValueMap } from '@/config/workbench';
import { useI18n } from '@/hooks/useI18n';
@ -68,16 +69,22 @@ export function getColorScheme(dataLength: number): string[] {
// 饼图颜色配置
export const colorMapConfig: Record<string, string[]> = {
[WorkCardEnum.CASE_COUNT]: ['#ED0303', '#FFA200', '#3370FF', '#D4D4D8'],
[WorkCardEnum.CASE_COUNT]: ['#ED0303', '#FFA200', '#3370FF', 'initItemStyleColor'],
[WorkCardEnum.ASSOCIATE_CASE_COUNT]: ['#00C261', '#3370FF'],
[WorkCardEnum.REVIEW_CASE_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#ED0303', '#FFA200'],
[WorkCardEnum.TEST_PLAN_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#FF9964'],
[WorkCardEnum.PLAN_LEGACY_BUG]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.BUG_COUNT]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.HANDLE_BUG_BY_ME]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.CREATE_BY_ME]: ['#9441B1', '#3370FF', '#00C261', '#D4D4D8'],
[WorkCardEnum.REVIEW_CASE_COUNT]: [
getVisualThemeColor('initItemStyleColor'),
'#3370FF',
'#00C261',
'#ED0303',
'#FFA200',
],
[WorkCardEnum.TEST_PLAN_COUNT]: ['initItemStyleColor', '#3370FF', '#00C261', '#FF9964'],
[WorkCardEnum.PLAN_LEGACY_BUG]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.BUG_COUNT]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.HANDLE_BUG_BY_ME]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.CREATE_BY_ME]: ['#9441B1', '#3370FF', '#00C261', 'initItemStyleColor'],
[WorkCardEnum.API_COUNT]: ['#811FA3', '#00C261', '#3370FF', '#FFA1FF', '#EE50A3', '#FF9964', '#F9F871', '#C3DD40'],
[WorkCardEnum.CREATE_BUG_BY_ME]: ['#FFA200', '#3370FF', '#D4D4D8', '#00C261', ...getColorScheme(13)],
[WorkCardEnum.CREATE_BUG_BY_ME]: ['#FFA200', '#3370FF', 'initItemStyleColor', '#00C261', ...getColorScheme(13)],
};
// 柱状图
@ -129,8 +136,10 @@ export function getCommonBarOptions(
paramsList = params;
}
const html = `
<div class="w-[186px] ms-scroll-bar max-h-[236px] overflow-y-auto p-[16px] gap-[8px] flex flex-col">
<div class="font-medium max-w-[150px] one-line-text" style="color:#323233">${params[0].axisValueLabel}</div>
<div class="w-[186px] rounded ms-scroll-bar max-h-[236px] overflow-y-auto p-[16px] gap-[8px] flex flex-col bg-[var(--color-text-fff)]">
<div class="font-medium max-w-[150px] text-[var(--color-text-1)] one-line-text">
${params[0].axisValueLabel}
</div>
${testPlanHtml}
${paramsList
.map(
@ -168,7 +177,7 @@ export function getCommonBarOptions(
triggerEvent: true,
axisLabel: {
show: true,
color: '#646466',
color: getVisualThemeColor('xLabelColor'),
width: 100,
overflow: 'truncate',
ellipsis: '...',
@ -188,7 +197,7 @@ export function getCommonBarOptions(
},
axisLine: {
lineStyle: {
color: '#EDEDF1',
color: getVisualThemeColor('splitLineColor'),
},
},
},
@ -201,6 +210,9 @@ export function getCommonBarOptions(
show: false,
onZero: false, // 禁止 Y 轴强制显示在 0 位置
},
axisLabel: {
color: getVisualThemeColor('yLabelColor'),
},
offset: 0, // 第一个 Y 轴默认位置
nameTextStyle: {
fontSize: 12,
@ -211,7 +223,7 @@ export function getCommonBarOptions(
splitLine: {
show: true, // 控制是否显示水平线
lineStyle: {
color: '#EDEDF1', // 水平线颜色
color: getVisualThemeColor('splitLineColor'), // 水平线颜色
width: 1, // 水平线宽度
type: 'dashed', // 水平线线型，可选 'solid'、'dashed'、'dotted'
},
@ -227,8 +239,8 @@ export function getCommonBarOptions(
style: {
text: '',
fontSize: 14,
fill: '#959598',
backgroundColor: '#F9F9FE',
fill: getVisualThemeColor('graphicFillColor'),
backgroundColor: getVisualThemeColor('graphicBackgroundColor'),
padding: [6, 16, 6, 16],
borderRadius: 4,
},
@ -246,15 +258,16 @@ export function getCommonBarOptions(
left: 'center',
pageButtonItemGap: 5,
pageButtonGap: 5,
pageIconColor: '#00000099',
pageIconInactiveColor: '#00000042',
pageIconColor: getVisualThemeColor('pageIconColor'),
pageIconInactiveColor: getVisualThemeColor('pageIconInactiveColor'),
pageIconSize: [10, 8],
pageTextStyle: {
color: '#00000099',
color: getVisualThemeColor('pageTextStyleColor'),
fontSize: 12,
},
textStyle: {
width: 150,
color: getVisualThemeColor('legendColor'),
overflow: 'truncate',
ellipsis: '...',
},
@ -338,7 +351,7 @@ export function getPieCharOptions() {
subtext: '100111',
subtextStyle: {
fontSize: 20,
color: '#323233',
color: getVisualThemeColor('subtextStyleColor'),
fontWeight: 'bold',
align: 'center',
},
@ -415,23 +428,42 @@ export function handlePieData(
const pieBorderWidth = hasDataLength === 1 ? 0 : 2;
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',
},
}))
.map((item, color) => {
return {
name: item.status,
value: item.count,
tooltip: {
...toolTipConfig,
position: 'right',
show: !!hasPermission,
},
itemStyle: {
color:
colorMapConfig[key][color] === 'initItemStyleColor'
? getVisualThemeColor('initItemStyleColor')
: colorMapConfig[key][color],
borderWidth: pieBorderWidth,
borderColor: getVisualThemeColor('itemStyleBorderColor'),
},
};
})
.filter((e) => e.value !== 0);
options.series.data = hasDataLength > 0 ? lastData : [];
options.series.data =
hasDataLength > 0
? lastData
: [
{
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
},
];
// 计算总数和图例格式
const tempObject: Record<string, any> = {};
@ -445,7 +477,18 @@ export function handlePieData(
options.title.subtext = addCommasToNumber(totalCount);
if (!hasPermission) {
options.title.subtext = '-';
options.series.data = [];
options.series.data = [
{
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
},
];
}
return options;
@ -600,6 +643,18 @@ export function handleUpdateTabPie(
const valueKey = key.split('-')[1];
const countList = list || [];
let lastCountList: { value: number | string; label: string; name: string }[] = [];
const defaultValueMapConfig = defaultValueMap();
const emptyData = {
name: '',
value: 1,
tooltip: {
show: false,
},
itemStyle: {
color: getVisualThemeColor('initItemStyleColor'),
},
};
if (hasPermission) {
const pieBorderWidth = countList.slice(1).filter((e) => Number(e.count) > 0).length === 1 ? 0 : 1;
@ -609,26 +664,29 @@ export function handleUpdateTabPie(
label: item.name,
name: item.name,
itemStyle: {
color: defaultValueMap[typeKey][valueKey].color[i],
color: defaultValueMapConfig[typeKey][valueKey].color[i],
borderWidth: pieBorderWidth,
borderColor: '#ffffff',
borderColor: getVisualThemeColor('itemStyleBorderColor'),
},
};
});
options.series.data = lastCountList.every((e) => e.value === 0) ? [] : lastCountList.filter((e) => e.value !== 0);
options.series.data = lastCountList.every((e) => e.value === 0)
? [emptyData]
: lastCountList.filter((e) => e.value !== 0);
options.title.text = countList[0].name ?? '';
options.title.subtext = `${countList[0].count ?? 0}%`;
} else {
options.series.data = [];
lastCountList = defaultValueMap[typeKey][valueKey].defaultList.map((e: any) => {
options.series.data = [emptyData];
lastCountList = defaultValueMapConfig[typeKey][valueKey].defaultList.map((e: any) => {
return {
...e,
label: t(e.label),
};
});
options.title.text = t(defaultValueMap[typeKey][valueKey].defaultName);
options.title.text = t(defaultValueMapConfig[typeKey][valueKey].defaultName);
options.title.subtext = '-%';
}
@ -700,12 +758,12 @@ export function getSeriesData(
enterable: true,
formatter(params: any) {
const html = `
<div class="w-[186px] h-[50px] p-[16px] flex items-center justify-between">
<div class="w-[186px] h-[50px] p-[16px] flex items-center justify-between bg-[var(--color-text-fff)]">
<div class=" flex items-center">
<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}</div>
<div class="one-line-text max-w-[100px] text-[var(--color-text-2)]">${params.name}</div>
</div>
<div class="text-[var(--color-text-1)] font-semibold">${addCommasToNumber(params.value)}</div>
</div>
@ -778,7 +836,7 @@ export function createCustomTooltip(chartDom: InstanceType<typeof VCharts>) {
customTooltip.style.maxWidth = '300px';
customTooltip.style.padding = '5px';
customTooltip.style.background = 'rgba(0, 0, 0, 0.75)';
customTooltip.style.background = 'var(--color-text-2)';
customTooltip.style.color = 'var(--color-text-fff)';
customTooltip.style.borderRadius = '4px';