fix(工作台): 修复柱状图bug

This commit is contained in:
xinxin.wu 2024-11-19 13:10:03 +08:00 committed by 刘瑞斌
parent 97318ee4b2
commit 8289daf30f
6 changed files with 89 additions and 44 deletions

View File

@ -87,12 +87,14 @@
const { openNewPage } = useOpenNewPage();
const reviewStatusOptions = computed(() => {
return Object.keys(reviewStatusMap).map((key) => {
return {
value: key,
label: t(reviewStatusMap[key as ReviewStatus].label),
};
const keys = Object.keys(reviewStatusMap).filter((key) => {
return props.type !== 'my_todo' || key !== 'COMPLETED';
});
return keys.map((key) => ({
value: key,
label: t(reviewStatusMap[key as ReviewStatus].label),
}));
});
const columns: MsTableColumn = [

View File

@ -14,7 +14,7 @@
<a-button type="secondary" @click="exitHandler">
{{ t('workbench.homePage.exitEdit') }}
</a-button>
<a-button type="primary" :disabled="!selectedCardList.length" :loading="confirmLoading" @click="saveHandler">
<a-button type="primary" :loading="confirmLoading" @click="saveHandler">
{{ t('common.save') }}
</a-button>
</div>

View File

@ -52,7 +52,7 @@
import type { OverViewOfProject, SelectedCardItem, TimeFormParams } from '@/models/workbench/homePage';
import { commonColorConfig, getCommonBarOptions, handleNoDataDisplay } from '../utils';
import { getColorScheme, getCommonBarOptions, handleNoDataDisplay } from '../utils';
import type { SelectOptionData } from '@arco-design/web-vue';
const { t } = useI18n();
@ -93,7 +93,10 @@
const defectStatusColor = ['#811FA3', '#FFA200', '#3370FF', '#F24F4F'];
function handleData(detail: OverViewOfProject) {
options.value = getCommonBarOptions(detail.xaxis.length >= 7, [...defectStatusColor, ...commonColorConfig]);
options.value = getCommonBarOptions(detail.xaxis.length >= 7, [
...defectStatusColor,
...getColorScheme(detail.xaxis.length),
]);
const { invisible, text } = handleNoDataDisplay(detail.xaxis, detail.projectCountList);
options.value.graphic.invisible = invisible;
options.value.graphic.style.text = text;

View File

@ -56,7 +56,7 @@
} from '@/models/workbench/homePage';
import { WorkCardEnum, WorkOverviewEnum } from '@/enums/workbenchEnum';
import { commonColorConfig, getCommonBarOptions, handleNoDataDisplay } from '../utils';
import { getColorScheme, getCommonBarOptions, handleNoDataDisplay } from '../utils';
const { t } = useI18n();
@ -108,7 +108,7 @@
});
cardModuleList.value = tempAxisData as ModuleCardItem[];
options.value = getCommonBarOptions(hasRoom.value, commonColorConfig);
options.value = getCommonBarOptions(hasRoom.value, getColorScheme(detail.projectCountList.length));
const { invisible, text } = handleNoDataDisplay(detail.xaxis, detail.projectCountList);
options.value.graphic.invisible = invisible;
options.value.graphic.style.text = text;

View File

@ -57,7 +57,7 @@
import type { OverViewOfProject, SelectedCardItem, TimeFormParams } from '@/models/workbench/homePage';
import { commonColorConfig, getCommonBarOptions, handleNoDataDisplay } from '../utils';
import { getColorScheme, getCommonBarOptions, handleNoDataDisplay } from '../utils';
const { t } = useI18n();
const appStore = useAppStore();
@ -92,8 +92,9 @@
const memberOptions = ref<{ label: string; value: string }[]>([]);
const options = ref<Record<string, any>>({});
const color = ['#811FA3', '#FFCA59', '#00C261', '#FFA1FF', '#F9F871', '#3370FF', '#F24F4F'];
function handleData(detail: OverViewOfProject) {
options.value = getCommonBarOptions(detail.xaxis.length >= 7, commonColorConfig);
options.value = getCommonBarOptions(detail.xaxis.length >= 7, color);
const { invisible, text } = handleNoDataDisplay(detail.xaxis, detail.projectCountList);
options.value.graphic.invisible = invisible;
options.value.graphic.style.text = text;
@ -209,7 +210,6 @@
(val) => {
if (val) {
innerHandleUsers.value = val;
initOverViewMemberDetail();
}
}
);

View File

@ -9,37 +9,56 @@ import { WorkCardEnum } from '@/enums/workbenchEnum';
const { t } = useI18n();
// 通用颜色配置
export const commonColorConfig = [
'#783887',
'#FFC14E',
'#2DFCEF',
'#811FA3',
'#00D1FF',
'#FFA53D',
'#00C261',
'#AA4FBF',
'#FFA1FF',
'#EE50A3',
'#FF9964',
'#FFCA59',
'#F9F871',
'#C3DD40',
'#62D256',
'#14E1C6',
'#50CEFB',
'#3370FF',
'#2B5FD9',
'#76F0FF',
'#935AF6',
'#DC9BFF',
'#FFC75E',
'#D34400',
'#F4D0BF',
'#FBD3E8',
'#D9F457',
'#0089D1',
'#87F578',
];
const commonColorConfig: Record<number, string[]> = {
2: ['#783887', '#FFC14E'],
4: ['#783887', '#FFC14E', '#2DFCEF', '#3370FF'],
8: ['#783887', '#FFC14E', '#2DFCEF', '#3370FF', '#811FA3', '#00D1FF', '#FFA53D', '#00C261'],
12: [
'#AA4FBF',
'#FFA1FF',
'#EE50A3',
'#FF9964',
'#FFCA59',
'#F9F871',
'#C3DD40',
'#62D256',
'#14E1C6',
'#50CEFB',
'#3370FF',
'#2B5FD9',
],
13: [
'#AA4FBF',
'#FFA1FF',
'#FFCA59',
'#F9F871',
'#14E1C6',
'#2DFCEF',
'#2B5FD9',
'#00D1FF',
'#935AF6',
'#DC9BFF',
'#FF9964',
'#FFC75E',
'#D34400',
'#F4D0BF',
'#EE50A3',
'#FBD3E8',
'#C3DD40',
'#D9F457',
'#0089D1',
'#62D256',
'#87F578',
],
};
export function getColorScheme(dataLength: number): string[] {
if (dataLength <= 2) return commonColorConfig[2];
if (dataLength <= 4) return commonColorConfig[4];
if (dataLength <= 8) return commonColorConfig[8];
if (dataLength <= 12) return commonColorConfig[12];
return commonColorConfig[13];
}
// 饼图颜色配置
export const colorMapConfig: Record<string, string[]> = {
@ -184,6 +203,27 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[]): Record<s
color: '#00000099',
fontSize: 12,
},
textStyle: {
width: 150,
overflow: 'truncate',
ellipsis: '...',
},
formatter(name: string) {
return name;
},
tooltip: {
show: true,
padding: 16,
position(point: any) {
return [point[0], '10%'];
},
extraCssText: 'max-width: 300px; white-space: normal; word-wrap: break-word; word-break: break-all;',
textStyle: {
width: 300,
fontSize: 12,
overflow: 'breakAll',
},
},
},
dataZoom: hasRoom
? [